Scribd Logo
Upload

Welcome to Scribd!

  • 3

    Uploaded by

    Saif Jutt
    9 views2 pages
    This document contains the code for a basic calculator interface. It includes HTML and CSS to layout the display and buttons in a grid. The JavaScript code defines functions to append numbers/operators, clear the display, backspace, and evaluate the display content as a calculation when the equals button is clicked. The calculator displays the result or an error message.

    Original Description:

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This document contains the code for a basic calculator interface. It includes HTML and CSS to layout the display and buttons in a grid. The JavaScript code defines functions to append numbers/operators, clear the display, backspace, and evaluate the display content as a calculation when the equals button is clicked. The calculator displays the result or an error message.

    Copyright:

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

    3

    Uploaded by

    Saif Jutt
    This document contains the code for a basic calculator interface. It includes HTML and CSS to layout the display and buttons in a grid. The JavaScript code defines functions to append numbers/operators, clear the display, backspace, and evaluate the display content as a calculation when the equals button is clicked. The calculator displays the result or an error message.

    Copyright:

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

    <!

    DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
    body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    display: flex;
    align-items: center;
    justify
    margin: 0;
    }

    #calculator {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    width: 300px;
    }

    #display {
    background-color: #f0f0f0;
    padding: 10px;
    text-align: right;
    }

    #buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    }

    button {
    background-color: #e0e0e0;
    border: none;
    padding: 20px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s;
    }

    button:hover {
    background-color: #d0d0d0;
    }
    </style>
    </head>
    <body>

    <div id="calculator">
    <div id="display"></div>
    <div id="buttons">
    <button onclick="clearDisplay()">C</button>
    <button onclick="appendToDisplay('/')">/</button>
    <button onclick="appendToDisplay('*')">*</button>
    <button onclick="backspace()">←</button>
    <button onclick="appendToDisplay('7')">7</button>
    <button onclick="appendToDisplay('8')">8</button>
    <button onclick="appendToDisplay('9')">9</button>
    <button onclick="appendToDisplay('-')">-</button>

    <button onclick="appendToDisplay('4')">4</button>
    <button onclick="appendToDisplay('5')">5</button>
    <button onclick="appendToDisplay('6')">6</button>
    <button onclick="appendToDisplay('+')">+</button>

    <button onclick="appendToDisplay('1')">1</button>
    <button onclick="appendToDisplay('2')">2</button>
    <button onclick="appendToDisplay('3')">3</button>
    <button onclick="appendToDisplay('0')">0</button>

    <button onclick="calculate()">=</button>
    </div>
    </div>

    <script>y(value) {
    display.textContent += value;
    }

    function clearDisplay() {
    display.textContent = '';
    }

    function backspace() {
    display.textContent = display.textContent.slice(0, -1);
    }

    function calculate() {
    try {
    display.textContent = eval(display.textContent);
    } catch (error) {
    display.textContent = 'Error';
    }
    }
    </script>

    </body>
    </html>

    You might also like

    • 1
      Document2 pages
      1
      Saif Jutt
      No ratings yet
    • 2
      Document2 pages
      2
      Saif Jutt
      No ratings yet
    • 3
      Document2 pages
      3
      Saif Jutt
      No ratings yet
    • 4
      Document2 pages
      4
      Saif Jutt
      No ratings yet
    • 4
      Document2 pages
      4
      Saif Jutt
      No ratings yet
    • 3
      Document2 pages
      3
      Saif Jutt
      No ratings yet
    • 1
      Document2 pages
      1
      Saif Jutt
      No ratings yet
    • 1
      Document2 pages
      1
      Saif Jutt
      No ratings yet
    • 1
      Document2 pages
      1
      Saif Jutt
      No ratings yet
    • 3
      Document2 pages
      3
      Saif Jutt
      No ratings yet
    • 2
      Document2 pages
      2
      Saif Jutt
      No ratings yet
    • 5
      Document2 pages
      5
      Saif Jutt
      No ratings yet
    • 2
      Document2 pages
      2
      Saif Jutt
      No ratings yet
    • 2
      Document2 pages
      2
      Saif Jutt
      No ratings yet
    • 2
      Document2 pages
      2
      Saif Jutt
      No ratings yet
    • 5
      Document2 pages
      5
      Saif Jutt
      No ratings yet
    • 5
      Document2 pages
      5
      Saif Jutt
      No ratings yet
    • 2
      Document2 pages
      2
      Saif Jutt
      No ratings yet
    • 4
      Document2 pages
      4
      Saif Jutt
      No ratings yet
    • 4
      Document2 pages
      4
      Saif Jutt
      No ratings yet
    • 4
      Document2 pages
      4
      Saif Jutt
      No ratings yet
    • 4
      Document1 page
      4
      Saif Jutt
      No ratings yet
    • Doctype HTML
      Document2 pages
      Doctype HTML
      ammarskandar4
      No ratings yet
    • 1
      Document2 pages
      1
      Saif Jutt
      No ratings yet
    • Puja Girase - AI - A2
      Document6 pages
      Puja Girase - AI - A2
      bhamrekomal2003
      No ratings yet
    • Harshada Girase - AI - A2
      Document6 pages
      Harshada Girase - AI - A2
      bhamrekomal2003
      No ratings yet
    • Ahmopqhhahsiibnmksis
      Document2 pages
      Ahmopqhhahsiibnmksis
      muhammedhuseyindemir02
      No ratings yet
    • New Text Document
      Document2 pages
      New Text Document
      saied mostafa
      100% (1)
    • One File Calci 6
      Document5 pages
      One File Calci 6
      rishabhbathamhulahu
      No ratings yet
    • Calculator Using HTML, CSS, JS
      Document2 pages
      Calculator Using HTML, CSS, JS
      akrao23375
      No ratings yet
    • !doctype HTML
      Document3 pages
      !doctype HTML
      melati.surya.ningsih29
      No ratings yet
    • Cal HTML
      Document2 pages
      Cal HTML
      13 Smarty
      No ratings yet
    • 1
      Document2 pages
      1
      saifjuttsaif0202
      No ratings yet
    • To-do list
      Document2 pages
      To-do list
      Sakshi Mehla
      No ratings yet
    • Nalasoacalc
      Document5 pages
      Nalasoacalc
      Rianala Manantsoa
      No ratings yet
    • Páginas Burocráticas - Rastrear Pedido
      Document2 pages
      Páginas Burocráticas - Rastrear Pedido
      Washington Lisboa
      No ratings yet
    • Events
      Document3 pages
      Events
      manusrinivas91
      No ratings yet
    • Calculate Wage
      Document2 pages
      Calculate Wage
      agtwtc
      No ratings yet
    • 2
      Document2 pages
      2
      saifjuttsaif0202
      No ratings yet
    • Web Programming Surya
      Document59 pages
      Web Programming Surya
      Aswath Vikranth
      No ratings yet
    • Tema Web
      Document3 pages
      Tema Web
      stefy15stirbu
      No ratings yet
    • Mini Project Sample Codes
      Document8 pages
      Mini Project Sample Codes
      drpuneethrajkumar007
      No ratings yet
    • HTML
      Document2 pages
      HTML
      ccrown861
      No ratings yet
    • WT4 (1) 1
      Document3 pages
      WT4 (1) 1
      saurabhbborate0621
      No ratings yet
    • Build A Palindrome Checker
      Document4 pages
      Build A Palindrome Checker
      marekwieszjakjest
      No ratings yet
    • Theme 5250455546679472398
      Document2 pages
      Theme 5250455546679472398
      Paint with MSM
      No ratings yet
    • Vitro Nex
      Document7 pages
      Vitro Nex
      Andrei Suceu
      No ratings yet
    • HTML Css App
      Document11 pages
      HTML Css App
      Aymen Gmar
      No ratings yet
    • Romantic
      Document2 pages
      Romantic
      marcenariajcstilos
      No ratings yet
    • Codigo rastreio
      Document2 pages
      Codigo rastreio
      murilogomescunha878
      No ratings yet
    • Calc
      Document3 pages
      Calc
      citiye2321
      No ratings yet
    • Cod HTML Calc
      Document1 page
      Cod HTML Calc
      rmsx22
      No ratings yet
    • Java Script Calculator: Sanjay M
      Document11 pages
      Java Script Calculator: Sanjay M
      Sanjay Muthu
      No ratings yet
    • Bus Reservation
      Document24 pages
      Bus Reservation
      rocky70308
      No ratings yet
    • Untitled
      Document2 pages
      Untitled
      ANTONIO JEAN PIERRE DIAZ GARRIDO
      No ratings yet
    • Pemwebprakp4 2218004
      Document16 pages
      Pemwebprakp4 2218004
      Naufal Whildan
      No ratings yet
    • Textdfg
      Document4 pages
      Textdfg
      azetrap4
      No ratings yet
    • Archita1 Websyslabexer
      Document11 pages
      Archita1 Websyslabexer
      Tijnara Archita
      No ratings yet
    • WTL
      Document25 pages
      WTL
      Harshit Dhumal
      No ratings yet
    • CSS for Hotel Bookings
      From Everand
      CSS for Hotel Bookings
      Abdelfattah Ragab
      No ratings yet
    • 5
      Document2 pages
      5
      Saif Jutt
      No ratings yet
    • 3
      Document2 pages
      3
      Saif Jutt
      No ratings yet
    • 1
      Document2 pages
      1
      Saif Jutt
      No ratings yet
    • 5
      Document2 pages
      5
      Saif Jutt
      No ratings yet
    • 3
      Document2 pages
      3
      Saif Jutt
      No ratings yet
    • 4
      Document2 pages
      4
      Saif Jutt
      No ratings yet
    • 2
      Document2 pages
      2
      Saif Jutt
      No ratings yet
    • 4
      Document2 pages
      4
      Saif Jutt
      No ratings yet
    • 2
      Document1 page
      2
      Saif Jutt
      No ratings yet
    • 5
      Document1 page
      5
      Saif Jutt
      No ratings yet
    • 5
      Document1 page
      5
      Saif Jutt
      No ratings yet
    • 1
      Document1 page
      1
      Saif Jutt
      No ratings yet
    • 4
      Document1 page
      4
      Saif Jutt
      No ratings yet