Creating a "Simple calculator" using HTML

<!DOCTYPE html>
<html>

<body>

  <div class="container">
    <fieldset id="container">
      <form name="calculator">

        <input id="display" type="text" name="display" readonly>

        <input class="button digits" type="button" value="7" onclick="calculator.display.value += '7'">
        <input class="button digits" type="button" value="8" onclick="calculator.display.value += '8'">
        <input class="button digits" type="button" value="9" onclick="calculator.display.value += '9'">
        <input class="button mathButtons" type="button" value="+" onclick="calculator.display.value += ' + '">
        <br>
        <input class="button digits" type="button" value="4" onclick="calculator.display.value += '4'">
        <input class="button digits" type="button" value="5" onclick="calculator.display.value += '5'">
        <input class="button digits" type="button" value="6" onclick="calculator.display.value += '6'">
        <input class="button mathButtons" type="button" value="-" onclick="calculator.display.value += ' - '">
        <br>
        <input class="button digits" type="button" value="1" onclick="calculator.display.value += '1'">
        <input class="button digits" type="button" value="2" onclick="calculator.display.value += '2'">
        <input class="button digits" type="button" value="3" onclick="calculator.display.value += '3'">
        <input class="button mathButtons" type="button" value="x" onclick="calculator.display.value += ' * '">
        <br>
        <input id="clearButton" class="button" type="button" value="C" onclick="calculator.display.value = ''">
        <input class="button digits" type="button" value="0" onclick="calculator.display.value += '0'">
        <input class="button mathButtons" type="button" value="=" onclick="calculator.display.value = eval(calculator.display.value)">
        <input class="button mathButtons" type="button" value="/" onclick="calculator.display.value += ' / '">
      </form>
    </fieldset>
  </div>

  <style>
    body {
      background: url(http://www.inkspilldesign.com/demo/wood-tile-background.jpg);
      background-color: #424242;
      font-family: Tahoma;
    }
    
    .container {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
      width: 100vw;
    }
    
    #container {
      width: 200px;
      padding: 8px 8px 20px 8px;
      margin: 20px auto;
      background-color: #ABABAB;
      border-radius: 4px;
      border-top: 2px solid #FFF;
      border-right: 2px solid #FFF;
      border-bottom: 2px solid #C1C1C1;
      border-left: 2px solid #C1C1C1;
      box-shadow: -3px 3px 7px rgba(0, 0, 0, .6), inset -100px 0px 100px rgba(255, 255, 255, .5);
    }
    
    #display {
      display: block;
      margin: 15px auto;
      height: 42px;
      width: 174px;
      padding: 0 10px;
      border-radius: 4px;
      border-top: 2px solid #C1C1C1;
      border-right: 2px solid #C1C1C1;
      border-bottom: 2px solid #FFF;
      border-left: 2px solid #FFF;
      background-color: #FFF;
      box-shadow: inset 0px 0px 10px #030303, inset 0px -20px 1px rgba(150, 150, 150, .2);
      font-size: 28px;
      color: #666;
      text-align: right;
      font-weight: 400;
    }
    
    .button {
      display: inline-block;
      margin: 2px;
      width: 42px;
      height: 42px;
      font-size: 16px;
      font-weight: bold;
      border-radius: 4px;
    }
    
    .mathButtons {
      margin: 2px 2px 6px 2px;
      color: #FFF;
      text-shadow: -1px -1px 0px #44006F;
      background-color: #434343;
      border-top: 2px solid #C1C1C1;
      border-right: 2px solid #C1C1C1;
      border-bottom: 2px solid #181818;
      border-left: 2px solid #181818;
      box-shadow: 0px 0px 2px #030303, inset 0px -20px 1px #2E2E2E;
    }
    
    .digits {
      color: #181818;
      text-shadow: 1px 1px 0px #FFF;
      background-color: #EBEBEB;
      border-top: 2px solid #FFF;
      border-right: 2px solid #FFF;
      border-bottom: 2px solid #C1C1C1;
      border-left: 2px solid #C1C1C1;
      border-radius: 4px;
      box-shadow: 0px 0px 2px #030303, inset 0px -20px 1px #DCDCDC;
    }
    
    .digits:hover,
    .mathButtons:hover,
    #clearButton:hover {
      background-color: #FFBA75;
      box-shadow: 0px 0px 2px #FFBA75, inset 0px -20px 1px #FF8000;
      border-top: 2px solid #FFF;
      border-right: 2px solid #FFF;
      border-bottom: 2px solid #AE5700;
      border-left: 2px solid #AE5700;
    }
    
    #clearButton {
      color: #FFF;
      text-shadow: -1px -1px 0px #44006F;
      background-color: #D20000;
      border-top: 2px solid #FF8484;
      border-right: 2px solid #FF8484;
      border-bottom: 2px solid #800000;
      border-left: 2px solid #800000;
      box-shadow: 0px 0px 2px #030303, inset 0px -20px 1px #B00000;
    }
  </style>
</body>
<h1>
   <span>MADE BY DEVANSH MISHRA</span>
       </h1>

</html>

Comments

Post a Comment

Popular posts from this blog

Chandrayan 3 Mission Special :Animation

<!--   Creator : Devansh Mishra          --> <!doctype html> <html>    <head>      <style> .full {     animation: full 2s linear 40s 1;     animation-fill-mode: forwards; } @keyframes full {     100% {         opacity: 0     } } h2 {     font-size: 30px;     color: mediumseagreen;     font-family: tahoma;     opacity: 0;     animation: ro 2s linear 50s 1;     animation-fill-mode: forwards;     text-align: center;     z-index: 10; } .rover {     width: 400px;     height: 480px;     position: absolute;     background-image: linear-gradient(to top, #eee2e2 0, #e3c09d 15%, #2f2f3a 90%);     margin: auto;     top: -500px;     left: 0;     bottom: 0;     right: 0;     ...
Read more

Python Basic Programs By Devansh Mishra.

Basic programs are given of python which is very useful for Python Beginner's.  1.Hello World print("Hello World") 2.Square Root  number = int(input("enter a number: ")) sqrt = number ** 0.5 print("square root:", sqrt) 3. cube Root def cube_root(x):         return x**(1/3) print(cube_root(27)) 4. Fahrenheit to Celsius temp = float(input("Enter temperature in Fahrenheit: ")) celsius = (temp - 32) * 5/9 print(f"{temp} in Fahrenheit is equal to {celsius} in Celsius")   5. Area of Triangle Height = float(input("Enter Height: ")) Base = float(input("Enter Base: ")) ans = (0.5) * Height * Base print("Area Of Triangle", ans) 6. Area of Circle rad = float(input("Enter Radius Of Circle :")) area = 3.14 * rad * rad print("Area of Circle", area) 7. Armstrong Number in Python from math import * number = int(input("Enter the number : ")) result = 0 n = 0 temp = number; while (temp != 0)...
Read more

" Words moving in circular motion as Tiny Particles " Animation

<!DOCtype html> <html> <style>   body {     margin: 0;     overflow: hidden;   }      a {     position: fixed;     display: inline-block;     margin-left: calc(50vw - 70px);     font-size: 20px;     z-index: 1;     color: white;   } </style> <body>   <script>     let canvas = document.createElement('canvas');     canvas.style.background = '#000'     document.body.appendChild(canvas);     let gl = canvas.getContext("webgl",     {       preserveDrawingBuffer: true     });     let clearPass = program(     {       type: gl.TRIANGLES,       vertexSize: 2,       vertices: [-1, 3, -1, -1, 3, -1], // full screen triangle       shaders: [`             attribute vec2...
Read more