Skip to content

Instantly share code, notes, and snippets.

@timwco
Last active August 29, 2015 14:21
Show Gist options
  • Save timwco/907893db753b6defd8fa to your computer and use it in GitHub Desktop.
Save timwco/907893db753b6defd8fa to your computer and use it in GitHub Desktop.
Calculator Exercise
<!DOCTYPE html>
<html>
<head>
<title>Calculator</title>
<style type="text/css">
.container { width: 300px; margin: 15px auto;}
</style>
</head>
<body>
<div class="container">
<img src="http://f.cl.ly/items/2Z1g1g1o0K3d360N3W0z/mathcat.png" alt="Math Cat" />
<h3>Let's Do Some Math!</h3>
<input type="text" id="num_one" />
<br /><br />
<input type="text" id="num_two" />
<br /><br />
<input type="submit" value="Calculate" id="calculateBtn" />
<div class="answer">
<br />
Answer: <span id="answer"></span>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
// Grab the inputs
var input1 = document.querySelector('#num_one');
var input2 = document.querySelector('#num_two');
// grab the calculate button
var calcBtn = document.querySelector('#calculateBtn');
// grab the answer field
var answerField = document.querySelector('#answer');
// Value Holder
var value1, value2;
// Calculate the value of the Input Fields
function calculate () {
value1 = input1.value;
value2 = input2.value;
answerField.innerHTML = Number(value1) + Number(value2);
}
// Add a "watcher" to our button
calcBtn.addEventListener('click', calculate);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment