JavaScript Calculator

Simple Calculator written in HTML5, CSS3 and JavaScript.

by Oluwagbemi Kadri

HTML

<!doctype html>
<html>

  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="mystyles.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Calculator</title>
  </head>

  <body style="background-image: url('images/calculator.jpg'); background-repeat: no-repeat;">

    <h2 style="text-align: center; margin-top: 50px; color: #006400;"> My JavaScript Calculator </h2>
    <form name="form" class="forms" onmouseover="myform(this)">

      <div class="calculate">
        <input name="answer" class="result" onmouseover="myinput(this)">
        <br/>
        <input type="button" class="button button4" name="C" value="C" onclick="c()">

        <input type="button" class="button button14" name="CE" value="CE" onclick="ce()">

        <input type="button" onmousedown="mDown(this)" onmouseup="mUp(this)" class="button button4" name="plus" value="+" onclick="doplus()">
        <br/>

        <input type="button" class="button" name="1" value="1" onclick="num(1)">

        <input type="button" class="button button2" name="2" value="2" onclick="num(2)">

        <input type="button" class="button button3" name="3" value="3" onclick="num(3)">

        <input type="button" onmousedown="mDn(this)" onmouseup="mup(this)" class="button button4" name="." value="." onclick="dodot()">
        <br/>
        <input type="button" class="button button5" name="4" value="4" onclick="num(4)">

        <input type="button" class="button button6" name="5" value="5" onclick="num(5)">

        <input type="button" class="button button7" name="6" value="6" onclick="num(6)">

        <input type="button" onmousedown="mDwn(this)" onmouseup="mU(this)" class="button button4" name="mult" value="*" onclick="domul()">
        <br/>
        <input type="button" class="button button8" name="7" value="7" onclick="num(7)">

        <input type="button" class="button button9" name="8" value="8" onclick="num(8)">

        <input type="button" class="button...

CSS

.forms {
  padding-top: 30px;
  padding-right: 0px;
  padding-bottom: 50px;
  padding-left: 85px;
  border: 1px solid #555555;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
}

.result {
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  width: 86%;
  margin-left: auto;
  margin-right: auto;
}

.button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  width: 20%;
  margin-left: auto;
  margin-right: auto;
}

.button2 {
  background-color: #008CBA;
}

.button3 {
  background-color: #f44336;
}

.button4 {
  background-color: #e7e7e7;
  color: black;
}

.button5 {
  background-color: #555555;
}

.button6 {
  background-color: #ee82ee;
}

.button7 {
  background-color: #6a5acd;
}

.button8 {
  background-color: #ffa500;
}

.button9 {
  background-color: #f44336;
}

.button10 {
  background-color: #ee82ee;
  color: black;
}

.button11 {
  background-color: #6a5acd;
}

.button12 {
  background-color: #803ac0;
}

.button13 {
  background-color: #6a5acd;
}

.button14 {
  background-color: #6a7acd;
  padding: 15px 64px;
  width: 42%;
}

.calculate {
  width: 80%;
}

@media (max-width:800px) {
  .button {
    width: 20%;
    padding: 10px 10px;
  }
}

@media (max-width:800px) {
  .calculate {
    width: 80%;
  }
}

@media (max-width:800px) {
  .button14 {
    width: 42%;
  }
}

@media (max-width:800px) {
  .result {
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    width: 86%;
    margin-left: auto;
    margin-right: auto;
  }
}

JavaScript

function num(number) {
  document.form.answer.value += number;
}

function doplus() {
  document.form.answer.value += "+";
}

function dodot() {
  document.form.answer.value += ".";
}

function domul() {
  document.form.answer.value += "*";
}

function dodiv() {
  document.form.answer.value += "/";
}

function dosub() {
  document.form.answer.value += "-";
}

function domodu() {
  document.form.answer.value += "%";
}

function evalu() {
  var evali = eval(document.form.answer.value)
  document.form.answer.value = evali;
}

function mDown(obj) {
  obj.style.backgroundColor = "#1ec5e5";
}

function mUp(obj) {
  obj.style.backgroundColor = "#e7e7e7";
}

function mDn(obj) {
  obj.style.backgroundColor = "Orange";
}

function mup(obj) {
  obj.style.backgroundColor = "#e7e7e7";
}

function mDwn(obj) {
  obj.style.backgroundColor = "#D94A38";
}

function mU(obj) {
  obj.style.backgroundColor = "#e7e7e7";
}

function m(obj) {
  obj.style.backgroundColor = "MediumSeaGreen";
}

function mu(obj) {
  obj.style.backgroundColor = "#e7e7e7";
}


function myinput(x) {
  x.style.fontSize = "25px";
}

function myform(x) {
  x.style.borderColor = "MediumSeaGreen";

}

function c(number) {
  document.form.answer.value = null;
}

function ce(number) {
  var number = document.form.answer.value;
  var num = number.slice(0, -1)
  document.form.answer.value = num;
}