Chapter 8 Programming Assignment For this chapter we are going to make our own b
ID: 3807847 • Letter: C
Question
Chapter 8 Programming Assignment
For this chapter we are going to make our own basic calculator.
Up until now, I have created the event handlers for your templates. For this chapter you will need to create your own event handlers for 4 buttons, as well as write the code for the calculation that each should do.
This also gives us time to make sure we fully understand how events work and how to trigger them, as next chapter we will start to do more with page modifications. It's important that you have a pretty thorough grasp on the basics we have discussed up until this point
Chapter 8.css
body{
margin:0;
background:#333;
}
.main{
width:400px;
height:auto;
background:#fff;
margin:50px auto;
text-align:center;
padding: 25px 0;
}
.main input{
margin:25px 0;
}
Chapter 8.html
<!DOCTYPE html>
<html>
<head>
<title>Chapter 8 Calculator</title>
<link href="Chapter8.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="main">
<h1>Basic Calculator</h1>
<p>Enter 2 numbers below and click the desired operator button.</p>
<input type="text" name="txtNum1" id="txtNum1" placeholder="Enter 1st Number" />
<br />
<br />
<input type="text" name="txtNum2" id="txtNum2" placeholder="Enter 2nd Number" />
<br/>
<br/>
<button id="btnAdd" name="btnAdd">+</button>
<button id="btnSubtract" name="btnSubtract">-</button>
<button id="btnMultiply" name="btnMultiply">X</button>
<button id="btnDivide" name="btnDivide">/</button>
<br/>
<br/>
<br/>
<br/>
<div id="divResults"></p>
</div>
<script src="Chapter8.js"></script>
</body>
</html>
Chapter 8.js
// COURSE: CIT 140 JavaScript
// NAME: <YOUR NAME>
// DATE: <DATE>
// PROJECT: Chapter 8 Programming Project
function Add(){
}
function Subtract(){
}
function Multiply(){
}
function Divide(){
}
I have included what directions I have along with all the separate files for this program.
I am needing all the code for the Chapter 8.js file.
Explanation / Answer
Hello,
I have made changes in html and js file and attching the same.
I have made changes in htm like added in button onclick function you can see in the attched code like Add() and so on.
I have made logic in Chapter8.js file
Just for example
function Add(){
var a = document.getElementById("txtNum1").value; (from your html code passed the input 1 id and fetching the vlaue in a )
var b = document.getElementById("txtNum2").value;(from your html code passed the input 2 id and fetching the vlaue in a )
var c = Number(a)+Number(b); (Adding input 1 and input 2 value)
document.getElementById("totalval").value = c;(To assing the final value in the text as i have created in your HTML file " Get Result: <input type="text" name="total" id="totalval" /> ").
}
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.