1. Engineering
  2. Computer Science
  3. i neeed help making a calculator using html and javascript...

Question: i neeed help making a calculator using html and javascript...

Question details

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________________________________

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Calculator</title>

<meta name="description" content="Calculator page" />
<meta name="keywords" content="Portfolio, cs2350, HTML5,calculator" />
<meta name="auther" content="Brandon Poirier" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
   <link href = "calculator.css" rel = "stylesheet" type = "text/css" />
  
<script src = "script.js"></script>
  
  

   </head>
   <body>
  
   <nav class = "navbar navbar-inverse"> <!-- This will make the navigation bar black color -->
   <div class = "container-fluid"> <!-- fluid brings everything over to the rightof the text within the navbar -->
   <div class="navbar-header"> <!-- This creates the navigation bar it must go with the 2 previous div and nav classes !-->

   <!-- This creates 3 icon bars when the window is shrunk to show the nav bar if you add another one it adds 4 stripes you must then use the span code for it to work!-->
   <button type ="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavBar">
       <span class="icon-bar"></span>
       <span class="icon-bar"></span>
       <span class="icon-bar"></span>
   </button>
   <a class="navbar-brand" href="story.html">Story Page</a>
   </div>

   <div class="collapse navbar-collapse" id="myNavBar">
       <ul class="nav navbar-nav">
           <li class="active"><a href ="cs2350.html">cs 2350</a></li>
           <li><a href ="5Movies.HTML">5 favorite movies</a></li>
           <li><a href = "webContentOnly.HTML"> My Favorite Hobby Page</a></li>
           <li><a href = "howto.html"> Instruction On How To Publish a Web Page</a></li>
           <li><a href = "about.html"> About Me</a></li>
      
       </div>
       </div>
       </nav>

  
   <div class="text-center">
   <br>
   <h1 id="header1"><B>Javascript Calculator</B></h1>
   <br>
   </div>

  
   <div class ="text-center" id= "calculator">
   <!-- <form name="calculator"> -->
<input type="text" id="display"><br/>

   <button type= "button" value ="7" class="number">7</button>
   <button type= "button" value ="8" class="number">8</button>
   <button type= "button" value ="9" class="number">9</button>
   <button type= "button" value ="+" class="number">+</button><br/>
   <button type= "button" value ="4" class="number">4</button>
   <button type= "button" value ="5" class="number">5</button>
   <button type= "button" value ="6" class="number">6</button>
   <button type= "button" value ="-" class="number">-</button><br/>
   <button type= "button" value ="1" class="number">1</button>
   <button type= "button" value ="2" class="number">2</button>
   <button type= "button" value ="3" class="number">3</button>
   <button type= "button" value ="x" class="number">x</button><br/>
   <button type= "button" value ="c" class="number">C</button>
   <button type= "button" value ="0" class="number">0</button>
   <button type= "button" value ="=" id = "equals" class="number">=</button>
   <button type= "button" value ="/" class="number">/</button><br/>
   <button type= "button" value ="x2" class="number">x2</button>
   <button type= "button" value ="1/2" class="number">1/2</button>


   </div>

  
  


  

  
  

<footer>
       <div class="inner-footer">
           <div class="container">
               <div class="row">
                   <div class="col-md-6">
                      
                       <p>Made by Brandon &copy; Brandon P Calculator</p>
                      
                   </div>
                   <div class="col-md-6">
                       <p>I hope you like the calculator</p>
                      
                   </div>


                  
               </div>
           </div>
       </div>
      

          
              
   </footer>
  
  


   </body>
</html>

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<size; i++){
        buttons[i].addEventListener("click", function(){
            output=display.value +=this.value
           
        })
    }

    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")

// }

Solution by an expert tutor
Blurred Solution
This question has been solved
Subscribe to see this solution