practice

　　　　

<html lang="ja">
<meta charset="utf-8">

<style>
body{width:500px;
height:300px;
border:solid 1px black;
border-radius:8px;}
main{position:relative;
left:150px;
top:0;
display:flex;
flex-wrap:wrap;
width:500px;}
form{position:absolute;
left:224px;
top:280px;}
input[type="text"],#結果{font-size:24px;
border:1px solid black;
text-align:center;
padding:5px;
margin-right:10px;
box-sizing:border-box;}
button{margin-left:144px;}
.インプット_01{position:absolute;
left:-130px;
top:30px;
width:200px;
height:40px;}
.インプット_02{position:absolute;
left:130px;
top:30px;
width:200px;
height:40px;}
#結果{min-height:30px;
display:inline-block;
vertical-align:top;}
.セレクト{position:absolute;
left:84px;
top:30px;
display:flex;
flex-wrap:wrap;
width:50px;}
label{display:inline-block;}
.アンサー{position:absolute;
left:90px;top:160px;}
.リザルト{position:absolute;
left:-60px;
top:40px;
width:460px;
height:40px;}
</style>

<body>
<main>
<input type="text"class="インプット_01"id="いんぷっと_1"placeholder="入力">
<span class="セレクト">
<label><input type="radio"name="演算"value="➕"checked>➕</label>
<label><input type="radio"name="演算"value="➖">➖</label>
<label><input type="radio"name="演算"value="✖️">✖️</label>
<label><input type="radio"name="演算"value="➗">➗</label>
</span>
<input type="text"class="インプット_02"id="いんぷっと_2"placeholder="入力">
</main>
<div class="アンサー">
<button onclick="目印()">計算</button>
<br>
<div id="結果"class="リザルト"></div>
</div>
<form><input type="button"onclick="location.reload();"value="リセット"></form>
</body>

<script>
function 目印()
{入力_1=parseFloat(document.getElementById("いんぷっと_1").value);
演算=document.querySelector('input[name="演算"]:checked').value;
入力_2=parseFloat(document.getElementById("いんぷっと_2").value);
if(isNaN(入力_1)|| isNaN(入力_2))
{document.getElementById("結果").textContent="入力してください";
return;}
let 結果;
switch(演算)
{case"➕":
結果=入力_1+入力_2;
break;
case"➖":
結果=入力_1-入力_2;
break;
case"✖️":
結果=入力_1*入力_2;
break;
case"➗":
結果=入力_1/入力_2;
break;
default:
結果="無効な計算式です";}
document.getElementById("結果").textContent=入力_1+" "+演算+" "+入力_2+" = "+結果;}
</script>

</html>