Calculator Using HTML, CSS, and JavaScript

A calculator is a device that performs arithmetic operations and is an essential tool for everyday use. In this article, we will be creating a calculator using HTML, CSS, and JavaScript.

Step 1. HTML

HTML is the markup language used for creating web pages. It is used to define the structure and content of a webpage. The HTML code for the calculator will have buttons for each of the digits and operations like addition, subtraction, multiplication, and division.

<!doctype html>
<html>
  <head>
    <title>Calculator</title>
    <link rel="stylesheet" href="Calculator 4.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/segment7" type="text/css" />
    <link href="https://fonts.googleapis.com/css?family=Rubik" rel="stylesheet">
    <script src="Calculator 4.js"></script>
  </head>
  <body>
    <div class="main">
      <form name="form"><input class="textview" name="textview" placeholder="0" style="overflow: scroll;" disabled></form>
      <table>
        <tr>
          <td>
            <div class="button" id="clean" onclick="clean()">
              <div class="inner">C</div>
            </div>
          </td>
          <td>
            <div class="button none" onclick="back()">
              <div class="inner"><img alt="←" id="img" src="https://www.dropbox.com/s/2jmv326a6rdvijq/Clear.png?raw=1"></div>
            </div>
          </td>
          <td>
            <div class="button none" onclick="opt('/')">
              <div class="inner">÷</div>
            </div>
          </td>
          <td>
            <div class="button none" onclick="opt('*')">
              <div class="inner">�-</div>
            </div>
          </td>
        </tr>
        <tr>
          <td>
            <div class="button none" onclick="insert(7)">
              <div class="inner">7</div>
            </div>
          </td>
          <td>
            <div class="button none" onclick="insert(8)">
              <div class="inner">8</div>
            </div>
          </td>
          <td>
            <div class="button none" onclick="insert(9)">
              <div class="inner">9</div>
            </div>
          </td>
          <td>
            <div class="button none" onclick="insert('-')">
              <div class="inner">-</div>
            </div>
          </td>
        </tr>
        <tr>
          <td>
            <div class="button none" onclick="insert(4)">
              <div class="inner">4</div>
            </div>
          </td>
          <td>
            <div class="button none" onclick="insert(5)">
              <div class="inner">5</div>
            </div>
          </td>
          <td>
            <div class="button none" onclick="insert(6)">
              <div class="inner">6</div>
            </div>
          </td>
          <td rowspan="2" id="plus">
            <div id="first" class="button none" onclick="opt('+')">
              <div class="inner">+</div>
            </div>
          </td>
        </tr>
        <tr>
          <td>
            <div class="button none" onclick="insert(1)">
              <div class="inner">1</div>
            </div>
          </td>
          <td>
            <div class="button none" onclick="insert(2)">
              <div class="inner">2</div>
            </div>
          </td>
          <td>
            <div class="button none" onclick="insert(3)">
              <div class="inner">3</div>
            </div>
          </td>
        </tr>
        <tr>
          <td>
            <div id="zero" class="button none" onclick="zero()">
              <div class="inner">0</div>
            </div>
          </td>
          <td>
            <div class="button none" onclick="insert('.')">
              <div class="inner">.</div>
            </div>
          </td>
          <td colspan="2" id="equal">
            <div id="second" class="button none" onclick="equal()">
              <div class="inner">=</div>
            </div>
          </td>
        </tr>
      </table>
    </div>
    <div id="copy">&copy;iHexerxBlogg</div>
  </body>
</html>

Step 2. CSS

CSS is the stylesheet language used for styling the HTML elements on a webpage. CSS can be used to change the font size, color, background color, and many other aspects of the web page. In this case, we will be using CSS to style the calculator buttons and give them a clean and professional look.

/* ----- Calculator ----- */
 
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100vh;
  background: url("https://images.pexels.com/photos/900106/pexels-photo-900106.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");
  background-position: right;
  background-size: cover;
}
.main {
  width: 400px;
  height: 600px;
  position: absolute;
  top: 50%;
  left: 50%;
  background: #5c5859;
  padding: 0;
  border-radius: 20px;
  box-shadow: 0 5px 50px 0 rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 -5px 10px 5px rgba(0, 0, 0, 0.5);
  transform: translate(-50%, -50%) scale(1);
  /* display: none;*/
}
.textview {
  width: 90%;
  height: 90px;
  position: absolute;
  right: 0;
  left: 0;
  margin: 24px auto 15px auto;
  font-size: 50px;
  text-align: right;
  font-family: "Segment7Standard";
  font-family: "Rubik", sans-serif;
  background: #cddecc;
  color: #6d756b;
  border: none;
  padding: 0 5px 0 0;
  border-radius: 15px;
  overflow-x: scroll;
  box-shadow: inset 0 -5px 10px 2px #6b756a, 0 5px 10px 0px #3f423f;
  /*    padding: 5px;*/
}
table {
  position: absolute;
  /*top: 0;
    right: 0;*/
  bottom: 0;
  /*    left: 0;*/
  /*    display: flex;
    justify-content: center;
    align-items: center;*/
  margin: 0 5px 23px 23px;
}
#clean {
  background: #ff1900;
  color: #fff;
  box-shadow: inset 0 5px 10px 0 #ff1900, inset 0 -5px 10px 3px #2d1f1fba,
    0 5px 10px 0px #1e211e;
}
#clean:active {
  box-shadow: inset 0 -5px 10px 0 #ff1900, inset 0 5px 10px 3px #2d1f1fba,
    0 0px 10px 0px #3f423f00;
}
#img {
  width: 80%;
  height: 80%;
  transform: scale(0.9);
}
#plus,
#first {
  height: 164px;
}
#equal,
#second {
  width: 164px;
}
#second {
  background: #31e008;
  color: #fff;
  box-shadow: inset 0 5px 10px 0 #31e008, inset 0 -5px 10px 3px #2a5a22bf,
    0 5px 10px 0px #1e211e;
}
#second:active {
  box-shadow: inset 0 -5px 10px 0 #31e008, inset 0 5px 10px 3px #2a5a22bf,
    0 0px 10px 0px #3f423f00;
}
.button {
  width: 76px;
  height: 76px;
  font-size: 50px;
  font-weight: 900;
  position: relative;
  left: 0;
  right: 0;
  margin: 4px;
  border: none;
  border-radius: 18px;
  font-family: "Rubik", sans-serif;
  background: #f0eeef;
  color: #3b3b3c;
  box-shadow: inset 0 5px 10px 0 #fff, inset 0 -5px 10px 3px #847a7aba,
    0 5px 10px 0px #1e211e;
  display: flex;
  justify-content: center;
  align-items: center;
}
.main table tr td .button:active {
  box-shadow: inset 0 -5px 10px 0 #fff, inset 0 5px 10px 3px #847a7aba,
    0 0px 10px 0px #3f423f00;
}
.inner {
  height: 100%;
  width: 100%;
  position: relative;
  top: 0;
  bottom: 0;
  margin: auto 0 auto 0;
  /*    background: green;*/
  padding: 0;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateY(-2.5px);
}
.main table tr td .button .inner:active {
  transform: translateY(2.5px) scale(0.98);
}
#copy {
  position: fixed;
  bottom: 2.5px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0 auto 2.5px auto;
  font-size: 20px;
  color: #fff;
  text-shadow: 0.5px 0.5px 5px #5c5859;
}
::selection {
  background: transparent;
  color: auto;
}

Step 3. JavaScript

JavaScript is the programming language used for adding interactivity to the web page. JavaScript can be used to respond to user actions, change the content of a web page, and perform calculations. In this case, we will be using JavaScript to make the calculator perform arithmetic operations.

/* ----- Calculator ----- */

function insert(num) {

    var a = document.form.textview;

    a.value += num;
}
function opt(amd) {
    var view = document.form.textview;
    if (view.value != "") {
        view.value += amd;
    }
}
function zero() {
    var view = document.form.textview;
    if (view.value != "") {
        view.value += '0';
    }
}
function equal() {
    var button = document.getElementsByClassName('none');
    var a = document.form.textview;
    var exp = a.value;

    if (exp) {
        try {a.value = eval(exp);}
        catch (e) {
            alert ("Syntax Error!");
            document.form.textview.value = 'Syntax Error!';
            none();
        }
    }
    if (a.value == 0) {
        a.value = "";
    }
    if(a.value == 'Infinity'){
        document.form.textview.value = "Can't divide by Zero!";
       // button.onclick ='none()';
       alert('Can\'t divide by Zero!')
       none();
    }
}
function none() {
    alert('Press the Clear button!');
} 
function clean() {
    document.form.textview.value = '';
}

function back() {
    var exp = document.form.textview.value;
    document.form.textview.value = exp.substring(0, exp.length-1);
}

Conclusion

By using HTML, CSS, and JavaScript, we created a fully functional calculator that can perform all the basic arithmetic operations. The calculator will have a clean and professional look, and it will respond to user actions in a timely manner. This calculator can be a great tool for students, professionals, and anyone who needs to perform simple arithmetic operations.

In conclusion, this article showed how to create a calculator using HTML, CSS, and JavaScript. HTML provides the structure and content, CSS provides the styling, and JavaScript provides the interactivity. With these three languages, you can create a wide range of web applications, including a calculator.

iHexerxBlogg

Calculator Using HTML, CSS, and JavaScript

Step 1. HTML

Step 2. CSS

Step 3. JavaScript

Conclusion

About the Author

إرسال تعليق

Tech and Fun Zone