<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>인터넷 프로그래밍 3번째 과제</title>
<style type = "text/css">
#onbox div { width : 200px;
height : 200px;
border : 2px solid black;
}
#offbox div { width : 200px;
height : 200px;
border : 2px solid black;
}
p.subject {
font-size : 30pt;
font-weight : bold;
color : #FF0000;
}
</style>
<script type = "text/javascript">
</script>
</head>
<body>
<p class = 'subject'>
Drag and Drop 을 이용한 On, Off Range Number 계산기
</p>
<table border = "1" >
<tr>
<td> 덧셈 </td>
<td>
<form onsubmit="return false" oninput="if(addn.value>10000){addn.value=10000;}else if(addn.value<-10000){addn.value=-10000;} addout.value = parseInt(add_r.valueAsNumber) + add_n.valueAsNumber">
<input type="range" name=add_r min="0" max="10000" value=1 step=1 > +
<input id=addn type="number" name=add_n min="0" max="10000" value=1 step=1 > =
<output name="addout" for="add_r add_n" ></output>
</form>
</td></tr>
<tr>
<td> 빼기 </td>
<td>
<form onsubmit="return false" oninput="if(subn.value>10000){subn.value=10000;}else if(subn.value<-10000){subn.value=-10000;} subout.value = parseInt(sub_r.valueAsNumber) - sub_n.valueAsNumber">
<input type="range" name=sub_r min="0" max="10000" value=1 step=1> -
<input id=subn type="number" name=sub_n min="0" max="10000" value=1 step=1> =
<output name="subout" for="sub_r sub_n" value=0></output>
</form>
</td></tr>
<tr>
<td> 곱하기 </td>
<td>
<form onsubmit="return false" oninput="if(muln.value>10000){muln.value=10000;}else if(muln.value<-10000){muln.value=-10000;} mulout.value = parseInt(mul_r.valueAsNumber) * mul_n.valueAsNumber">
<input type="range" name=mul_r min="0" max="10000" value=1 step=1> *
<input id=muln type="number" name=mul_n min="0" max="10000" value=1 step=1> =
<output name="mulout" for="mul_r mul_n" ></output>
</form>
</td></tr>
<tr>
<td> 나누기 </td>
<td>
<form onsubmit="return false" oninput="if(dividn.value>10000){dividn.value=10000;}else if(dividn.value<-10000){dividn.value=-10000;} dvdout.value = parseInt(divide_r.valueAsNumber) / divide_n.valueAsNumber">
<input type="range" name=divide_r min="0" max="10000" value=1 step=1> /
<input id=dividn type="number" name=divide_n min="0" max="10000" value=1 step=1> =
<output name="dvdout" for="divide_r divide_n" value=1></output>
</form>
</td></tr>
</table>
<table>
<td>
<div id="onbox" >
<div>
</div>
</div>
</td>
<td>
<div id="offbox" >
<div>
</div>
</div>
</td>
</table>
</body>
</html>
