JavaScript Calculator FCC

In this example below you will see how to do a JavaScript Calculator FCC with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by BrianBrain, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright BrianBrain ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>JavaScript Calculator FCC</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">

<div class="text-center">
  <h1>JavaScript Calculator</h1>
  <h2>By: Brian Kidd</h2>
  
</div>

  <div id ="calcOutput">
    <span id = "input" class = "text-right">0</span>
    <hr/>
</div>
<div class = "main-calc text-center">
<div class = "text-center" id = "calculator">
  <a class = "btn btn-danger" id = "deleteAll">AC</a>
  <a class = "btn btn-danger"
     id="backOne">CE</a>
  <a class = "btn btn-primary" id="/">/</a>
   <a class = "btn btn-primary" id="*">*</a>
    <br/>
  <a class = "btn btn-primary" id = "7">7</a>
  <a class = "btn btn-primary" id = "8">8</a>    <a class = "btn btn-primary" id = "9">9</a>
  <a class = "btn btn-primary" id = "-">-</a>
  <br/>
  <a class = "btn btn-primary" id = "4">4</a>
  <a class = "btn btn-primary" id = "5">5</a>    <a class = "btn btn-primary" id = "6">6</a>
  <a class = "btn btn-primary" id = "+">+</a>
  <br/>
  <a class = "btn btn-primary" id = "1">1</a>
  <a class = "btn btn-primary" id = "2">2</a>    <a class = "btn btn-primary" id = "3">3</a>
  <a class = "btn btn-primary" id = ".">.</a>
  <br/>
  <a class = "btn btn-primary bigButton" id = "0">0</a>
  <a class = "btn btn-primary bigButton" id = "equals">=</a>
</div>
  
</div><!--main-calc-->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>

  

</body>

</html>

/*Downloaded from https://www.codeseek.co/BrianBrain/javascript-calculator-fcc-EZLJaN */
html, body{
  background-color: #003300;
}

h1{
  color:#FFFFFF;
  font-family:Orbitron;
}
h2{
  color:#FFFFFF;
  font-family:Oswald;
}
.main-calc{
 color:#FFFFFF;
 width: 280px;
 margin: auto;
  font-family:Orbitron;
}

#calcOutput{
  background-color:#FFFFFF;
  width:280px;
  height:75px;
  border-top-left-radius:2em;
  border-top-right-radius:2em;
  margin:auto;
  margin-top: 20px;
  padding-top:20px;
}
#calculator{
  background-color:#53ff1a;
  padding-top: 20px;
  padding-bottom: 30px;
  border-bottom-left-radius:2em;
  border-bottom-right-radius:2em;
}
#input{
  padding-left:50px;
  font-size:2em;
}

.bigButton{
  width:93px;
}
.btn-primary{
  width:45px;

}
a{
  margin: 5px;
  width: 2.6vw;
  height: 2.6vw;
}

Comments