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________________________________

Calculator

Javascript Calculator






Made by Brandon © Brandon P Calculator

I hope you like the 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

1 Expert Approved Answer
Step: 1 Unlock blur-text-image
Question Has Been Solved by an Expert!

Get step-by-step solutions from verified subject matter experts

Step: 2 Unlock
Step: 3 Unlock

Students Have Also Explored These Related Databases Questions!