My Calculator

index.html

<h1> Javascript Calculator </h1>
<div class="main-div" id="main-div">
   <div class="screen" id="screen"><p></p></div>
  <div class="clear" id="clear"> C </div>
    <ul class="number-div">
      <li>1</li>
			<li>2</li>
			<li>3</li>
			<li>+</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
			<li>x</li>
			<li>7</li>
			<li>8</li>
			<li>9</li>
			<li>-</li>
			<li>0</li>
			<li>.</li>
			<li id="equals">=</li>
			<li>÷</li>
    </ul>
  </div>
  </div>

my-calculator.markdown

My Calculator

A Pen by Ismail Jamiu Babatunde on CodePen.

License.

script.js

window.onload = function(){
  let elements = document.getElementsByTagName("li");
  let screen = document.querySelectorAll('p')[0];
  let clear = document.getElementsByClassName('clear')[0];
  
  for(let i=0; i < elements.length; i+=1){
    if(elements[i].innerHTML === '='){
      elements[i].addEventListener('click', calculate(i));
    } else{
      elements[i].addEventListener('click', addtocurrentvalue(i));
    }
  }
  
  function addtocurrentvalue(i){
    return function(){
      if (elements[i].innerHTML === "÷"){
        screen.innerHTML += "/";
      } else if(elements[i].innerHTML === "x"){
        screen.innerHTML += "*";
      }
      else{
        screen.innerHTML += elements[i].innerHTML;
      }
    }
  }
  

  clear.onclick = function(){
    screen.innerHTML = " ";
    
  };
  
  
  function calculate(i){
    return function(){
      screen.innerHTML = eval(screen.innerHTML);
    };
  }
};

style.css

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: "Noto Serif", serif;
}
* {
  box-sizing: border-box;
  font: bold 14px Arial, sans-serif;
}

h1 {
  font-size: 40px;
  text-align: center;
  margin-bottom: 110px;
  background: #673ab7;
  color: white;
  margin-top: 0;
  padding: 20px;
}
.main-div {
  width: 290px;
  margin: 0 auto;
  background: #3f475b;
  height: 310px;
  box-shadow: 2px 2px 2px gray;
  padding: 15px;
  border-bottom: 5px solid #ed586c;
  border-radius: 4px;
  position: relative;
}
.screen-div,.number-div {
  padding: 0;
  margin: 0;
}
.screen {
  list-style: none;
  color: white;
  height: 45px;
  width: 58px;
  margin-left: 8px;
  border-radius: 4px;
  border-top: 4px solid #828a9b;
  text-align: center;
  font-weight: bold;
  font-family: "Ubuntu", sans-serif;
  margin-bottom: 8px;
  width: 182px;
  background: #828a9b;
  border-top: 4px solid #ed586c;
  overflow: hidden;
}
.clear {
  width: 60px;
background-color: #7b8d8e;
  padding: 10px 17px;
  position: absolute;
  border-radius: 3px;
  left: 215px;
  top: 18px;
  color: white;
  cursor: pointer;
  text-align: center;
}
.number-div li {
  list-style: none;
  float: left;
  width: 52px;
  background-color: white;
  margin: 9px 5px;
  padding: 10px;
  border-bottom: 4px solid #828a9b;
  border-radius: 5px;
  color: #888;
  text-align: center;
  transition: 0.2xs;
  cursor: pointer;
}
.number-div li:hover {
  background: #44b3c2;
  border-bottom: 4px solid #336699;
  color: white;
}
#equals {
  background: #f43341;
  color: white;
}
#equals:hover {
  background: #fe5e6a;
  border-bottom: 4px solid #b3232e;
  color: white;
}