Scribd Logo
Upload

Welcome to Scribd!

  • 12 views

    Calculator Code

    Uploaded by

    Samlove Ojo

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content

    You might also like

    Calculator Code

    Uploaded by

    Samlove Ojo
    12 views7 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    12 views7 pages

    Calculator Code

    Uploaded by

    Samlove Ojo

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    of 7

    HTML, CSS AND JAVASCRIPT FOR CALCULATOR DESIGN

    HTML BASIC ESTIMATED STRUCTURE


    <!DOCTYPE html>

    <html>

    <head>

    <meta name=”viewport” content=”width=device-width, initial-scale=1.0”>

    <title>Calculator</title>

    <link rel=”stylesheet” href=”style.css”>

    </head>

    <body>

    </body>

    </html>

    CSS BASIC ESTIMATED STRUCTURE


    *{

    margin: 0;

    padding: 0;

    font-family: ‘poppins’, sans-serif;

    box-sizing: border-box;

    HTML
    <!DOCTYPE html>

    <html>

    <head>

    <meta name=”viewport” content=”width=device-width, initial-scale=1.0”>

    <title>Calculator</title>

    <link rel=”stylesheet” href=”style.css”>

    </head>

    <body>

    <div class=”container”>
    </div>
    </body>

    </html>

    CSS
    .container{

    width: 100%;

    height: 100%;

    background: purple;

    HTML
    <!DOCTYPE html>

    <html>

    <head>

    <meta name=”viewport” content=”width=device-width, initial-scale=1.0”>

    <title>Calculator</title>

    <link rel=”stylesheet” href=”style.css”>

    </head>

    <body>

    <div class=”container”>
    <div class=”calculator”>
    <form>
    <div>
    <input type=”text” name=”display”>
    </div>
    <div>
    <input type=”button” value=”AC”>
    <input type=”button” value=”DEL”>
    Calculator first row
    <input type=”button” value=”.”>
    <input type=”button” value=”/”>
    </div>
    </form>
    </div>
    </div>

    </body>

    </html>
    Move everything to the center

    CSS
    .container{

    width: 100%;

    height: 100vh;

    background: purple;

    display: flex;
    align-items: center;
    justify-content: center;
    }
    .calculator{
    Background: brown;
    Padding: 20px;
    Border-radius: 10px;
    }

    Add other buttons to calculator


    HTML
    <!DOCTYPE html>

    <html>

    <head>

    <meta name=”viewport” content=”width=device-width, initial-scale=1.0”>

    <title>Calculator</title>

    <link rel=”stylesheet” href=”style.css”>

    </head>

    <body>

    <div class=”container”>
    <div class=”calculator”>
    <form>
    <div>
    <input type=”text” name=”display”>
    </div>
    <div>
    <input type=”button” value=”AC”>
    <input type=”button” value=”DEL”>
    <input type=”button” value=”.”>
    <input type=”button” value=”/”>
    </div>
    <div>
    <input type=”button” value=”1”>
    <input type=”button” value=”2”>
    <input type=”button” value=”3”>
    <input type=”button” value=”*”>
    </div>
    <div>
    <input type=”button” value=”4”>
    <input type=”button” value=”5”>
    <input type=”button” value=”6”>
    <input type=”button” value=”-”>
    </div>
    <div>
    <input type=”button” value=”7”>
    <input type=”button” value=”8”>
    <input type=”button” value=”9”>
    <input type=”button” value=”+”>
    </div>
    <div>
    <input type=”button” value=”00”>
    <input type=”button” value=”0”>
    <input type=”button” value=”=”>
    </div>
    </form>
    </div>
    </div>

    </body>

    </html>
    Add Calculator display button

    CSS Inside the calculator, we have the form and the input file

    .calculator form input{

    border: 0;

    outline: 0;

    width: 60px;

    height: 60px;

    border-radius: 10px;

    box-shadow: 8px solid green;

    or

    box-shadow: -8px -8px 15px rgba(255, 255, 255, 0.1), 5px 5px 15px rgba(0, 0, 0, 0.2);

    background: transparent;

    font-size: 20px;

    color: white;

    cursor: pointer;

    margin: 10px

    Edit the display area by adding a div class name to display


    <div class=”display”>
    <input type=”text” name=”display”>
    </div>
    Back to CSS file

    form .display{

    display: flex;

    justify-content: flex-end;

    margin: 20px 0;

    form .display input{

    text-align: right;

    flex: 1;

    font-size: 45px;

    box-shadow: none;
    Edit the equal button to fit the space by adding a div class name as equal
    <input type=”button” value=”=” class=”equal”>
    </div>
    Back to CSS
    Form input.equal{
    Width: 145px; double other widths
    }

    Add functionality, anytime we click on any number, it should appear


    in the display area by adding click features
    If you click on 1, it will display 1 but cant give multiple
    1 so in front of the = ‘1’ “> add plus += ‘1’ “>

    <div>
    <input type=”button” value=”1” onclick=”display.value = ‘1’ “>
    <input type=”button” value=”2” onclick=”display.value += ‘2’ “>
    <input type=”button” value=”3” onclick=”display.value += ‘3’ “>
    <input type=”button” value=”*” onclick=”display.value += ‘*’ “>
    </div>
    <div>
    <input type=”button” value=”4” onclick=”display.value += ‘4’ “>
    <input type=”button” value=”5” onclick=”display.value += ‘5’ “>
    <input type=”button” value=”6” onclick=”display.value += ‘6’ “>
    <input type=”button” value=”-” onclick=”display.value += ‘-’ “>
    </div>
    <div>
    <input type=”button” value=”7” onclick=”display.value += ‘7’ “>
    <input type=”button” value=”8” onclick=”display.value += ‘8’ “>
    <input type=”button” value=”9” onclick=”display.value += ‘9’ “>
    <input type=”button” value=”+” onclick=”display.value += ‘+’ “>
    </div>
    <div>
    <input type=”button” value=”00” onclick=”display.value += ‘00’ “>
    <input type=”button” value=”0” onclick=”display.value += ‘0’ “>
    <input type=”button” value=”=”>
    </div>
    Add click functions to top buttons

    <input type=”button” value=”AC” onclick=”display.value = ‘’ “> Empty ‘’ to clear all

    <input type=”button” value=”DEL”>


    <input type=”button” value=”.” onclick=”display.value += ‘.’ “>
    <input type=”button” value=”/” onclick=”display.value += ‘/’ “>

    For delete the command is different because it delete only one number

    <input type=”button” value=”DEL” onclick=”display.value =


    display.value.toString().slice(0,-1) “>

    Add onclick to equal


    <input type=”button” value=”=” onclick=”display.value = eval(display.value)”>

    You might also like