Skip to content

Instantly share code, notes, and snippets.

@danielnjama

danielnjama/index.html

Created October 3, 2019 10:41
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save danielnjama/18bcc7362087f0304244702fd386cf83 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save danielnjama/18bcc7362087f0304244702fd386cf83 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source https://jsbin.com/bokatar/1
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>DCalculator</title>
<style id="jsbin-css">
h1{
text-align: center;
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: tomato;
font-weight: 100;
border-radius: 50px;
}
#maths{
background-color: aquamarine;
width: 600px;
margin-right: 300px;
margin-left: 300px;
margin-top: 100px;
border-radius: 50px;
text-align: center;
}
</style>
</head>
<body>
<form id='maths'>
<h1>Enter some values</h1>
<input type='text' id='v1' value='' name='b1'>
+
<input type='test' id='v2' value='' name='b2'> <br/>
<p id='ans'> </p>
</form>
<script id="jsbin-javascript">
var v1=document.getElementById('v1')
var v2=document.getElementById('v2')
var answ=document.getElementById('ans')
v1.addEventListener('input',anst);
v2.addEventListener('input',anst);
function anst () {
var one = parseFloat(v1.value) || 0;
var two = parseFloat(v2.value) || 0;
answ.innerHTML=('The answer is: ' + parseFloat(one+two));
}
</script>
<script id="jsbin-source-css" type="text/css">h1{
text-align: center;
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: tomato;
font-weight: 100;
border-radius: 50px;
}
#maths{
background-color: aquamarine;
width: 600px;
margin-right: 300px;
margin-left: 300px;
margin-top: 100px;
border-radius: 50px;
text-align: center;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">var v1=document.getElementById('v1')
var v2=document.getElementById('v2')
var answ=document.getElementById('ans')
v1.addEventListener('input',anst);
v2.addEventListener('input',anst);
function anst () {
var one = parseFloat(v1.value) || 0;
var two = parseFloat(v2.value) || 0;
answ.innerHTML=('The answer is: ' + parseFloat(one+two));
}
</script></body>
</html>
Raw
jsbin.bokatar.css
h1{
text-align: center;
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: tomato;
font-weight: 100;
border-radius: 50px;
}
#maths{
background-color: aquamarine;
width: 600px;
margin-right: 300px;
margin-left: 300px;
margin-top: 100px;
border-radius: 50px;
text-align: center;
}
Raw
jsbin.bokatar.js
var v1=document.getElementById('v1')
var v2=document.getElementById('v2')
var answ=document.getElementById('ans')
v1.addEventListener('input',anst);
v2.addEventListener('input',anst);
function anst () {
var one = parseFloat(v1.value) || 0;
var two = parseFloat(v2.value) || 0;
answ.innerHTML=('The answer is: ' + parseFloat(one+two));
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment