Question: I neeed help making a calculator using HTML and Javascript. the values need to be passed in unsing event listeners.. Im struggling with how to
I neeed help making a calculator using HTML and Javascript. the values need to be passed in unsing event listeners.. Im struggling with how to compute with the equals sign and using the +,/,*,- etc.. please help.. here is my current code..
HTML________________________________
Javascript Calculator
CSS____________________________________________
.nav.navbar-nav li a { /* How to change the text of the navbar*/ color: white;
}
.navbar-nav li{ background-color: red; border-left: solid 2px; box-shadow: 3px 3px 10px; margin-right: 4px; border-right: solid 3px;
} button{ color:red;
margin:5px; width:2.6vw; height:2.6vw; /*//background-color: red;*/ }
#calculator{ background-color: black; width:250px; border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; margin-right:auto; margin-left:auto; } #display{ padding-left:25px; font-size:20px; background-color: white; border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; margin-top: 18px; margin-bottom:10px; } .navbar-nav { color:white; } .nav.navbar-nav.navbar-right li a { color: red; }
.navbar{ padding-top: 15px; padding-bottom: 15px; color: green;
}
.navbar .nav .active a{ background-color: black; color: red; } .jumbotron{ position: relative; margin-top:2px ; text-align:center; } #num1{ text-align: center; padding-left: 50px; margin-left: 50px; }
#header1{ color: red; font-size:70px; } p.four { outline: 2px solid #ff0000; text-decoration: underline; text-decoration-line:overline; }
.inner-footer { background-color: red; color:white; }
label{ width:175px; display:inline-block; margin:15px 10px; } span{ font-style:italic; color:red; }
script.js_________________________________________
window.addEventListener("load", function(){ var display1 =document.getElementById("display"); var output; var operator = document.getElementById("equals");
var buttons = document.getElementsByClassName("number"); var size =buttons.length; for(var i=0; i document.getElementById(display1) }); document.getElementById("equals").addEventListener("click", function(){ if(output ===) } ); // window.onload = function(){ // var current, // var screen, // var output, // var limit, // var zero, // var period, // var operator; // screen = document.getElementById("display"); // var elem = document.querySelectorAll("number") // }
Step by Step Solution
There are 3 Steps involved in it
Get step-by-step solutions from verified subject matter experts
