Make a Calculator By Using Pure HTML, CSS, JavaSript

How to make Amazing Calculator with Html CSS JavaScript

This Tutorial is to make calculator by using pure html CSS JavaScript

Here You Can Copy the free Source Code

HTML Code:

        <!DOCTYPE html>
<html lang="en">
<!-- code by desing code and hammad Rajpoot -->
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <link rel="javascript" href="script.js">
    <script src="script.js"></script>
    <style>
    </style>
</head>

<body>
    <div class="togglebtn2" onclick="myFunction()"></div>
    <div class="calculator">
        <div class="button">
            <input type="text" id="result" disabled>
            <input type="button" value="Clear" onclick="clearScreen()" id="btn1">
            <input type="button" value="/" onclick="display('/')">
            <input type="button" value="*" onclick="display('*')">
            <input type="button" value="7" onclick="display('7')">
            <input type="button" value="8" onclick="display('8')">
            <input type="button" value="9" onclick="display('9')">
            <input type="button" value="-" onclick="display('-')">
            <input type="button" value="4" onclick="display('4')">
            <input type="button" value="5" onclick="display('5')">
            <input type="button" value="6" onclick="display('6')">
            <input type="button" value="+" onclick="display('+')" id="plus">
            <input type="button" value="1" onclick="display('1')">
            <input type="button" value="2" onclick="display('2')">
            <input type="button" value="3" onclick="display('3')">
            <input type="button" value="0" onclick="display('0')">
            <input type="button" value="00" onclick="display('00')">
            <input type="button" value="." onclick="display('.')">
            <input type="button" value="=" onclick="calculate()" id="btn">
        </div>
    </div>
</body>
</html>

CSS Code:

        *{
          margin: 0;
          padding: 0;
          box-sizing: border-box;
          font-family: Verdana, Geneva, Tahoma, sans-serif;
      
      }
      body{
          display: flex;
          justify-content: center;
          align-items: center;
          min-height: 100vh;
      }
      .dark-mode{
          background: black;
          color: white;
          
      }
      .calculator{
          position: relative;
          width: 340px;
          padding: 30px;
          box-shadow: 15px 15px 20px rgba(0,0,0, 0.1),
          -15px -15px 20px #fffb;
          border-radius: 20px;
      }
      .calculator .button{
          position: relative;
          display: grid;
      
      }
      .calculator .button #result{
          position: relative;
          grid-column: span 4;
          user-select: none;
          overflow: hidden;
          width: 100%;
          text-align: end;
          color: #5166d6;
          height: 100px;
          line-height: 100px;
          box-shadow: inset 5px 5px 10px rgba(0,0,0, 0.1),
          inset -5px -5px 20px #fff;
          border-radius: 10px ;
          margin-bottom: 12px;
          padding: 0 20px;
          font-size: 2em;
          font-weight: 600;
      }
      .calculator .button input{
          position: relative;
          padding: 10px;
          box-shadow:  5px 5px 10px rgba(0,0,0, 0.1),
           -5px -5px 20px #fff;
          margin: 10px;
          cursor: pointer;
          user-select: none;
          min-width: 40px;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 1.2em;
          color: #666;
          border: 2px solid #edf1f4;
          box-shadow: 5px 5px 10px rgba(0,0,0, 0.1),
          -5px -5px 10px #fff;
          border-radius: 10px;
      
      }
      .calculator .button input:active{
          box-shadow: inset 5px 5px 10px rgba(0,0,0, 0.1),
          inset -5px -5px 10px #fff;
          color: #ff1100;
      
      }
      .calculator .button input#btn1{
          grid-column: span 2;
          background: #ff1100;
          color: #fff;
          border: 2px solid #edf1f4;
      
      }
      .calculator .button input#plus{
          grid-row: span 2;
          background: #00ff08;
          color: #fff;
          border: 2px solid #edf1f4;
      
      }
      .calculator .button input#btn{
          grid-row: span 2;
          background: #008cff;
          color: #fff;
          border: 2px solid #edf1f4;
      
      }
      .calculator .button input#btn:active,
      .calculator .button input#plus:active,
      .calculator .button input#btn:active{
          box-shadow: 5px 5px 10px rgba(0,0,0, 0.1),
          -5px -5px 10px #fff,
          inset 5px 5px 10px rgba(0, 0,0,0.1);
          
      }
      .togglebtn2{
          position: fixed;
          width: 20px;
          height: 20px;
          background: #555;
          top: 20px;
          right: 20px;
          border-radius: 50%;
          cursor: pointer;
          box-shadow: 5px 5px 10px rgba(0,0,0, 0.1),
          -5px -5px 10px #fff;
          border: 2px solid #edf1f4;
      }

JavaScript Code:

        function clearScreen(){
          document.getElementById("result").value ="";
      }
      // this function display the value
      function display(value){
          document.getElementById("result").value += value;
      }
      function calculate(){
          var a = document.getElementById("result").value;
          var b = eval(a);
          document.getElementById("result").value =b;
      }
      function myFunction(){
          let element = document.body;
          element.classList.toggle("dark-mode");
          
      }

Make a Calculator By Using Pure HTML, CSS, JavaSript

How to make Amazing Calculator with Html CSS JavaScript

This Tutorial is to make calculator by using pure html CSS JavaScript

Here You Can Copy the free Source Code

Post a Comment

Learn HTML in 7 Days: A Beginner's Guide to Creating Websites

Ludo Display UI Design Using Only HTML CSS | With Source Code

Categories

Latest Posts

Popular Posts

Contact Form