Scribd Logo
Upload

Welcome to Scribd!

  • New Text Document

    Uploaded by

    saied mostafa
    35 views2 pages
    This document contains the code for a simple calculator application. It includes HTML and CSS code to layout the calculator interface, which consists of number and operator buttons within a container. It also includes JavaScript code to handle button click events to add numbers and operators to the output field, as well as functions for calculation, clearing output, and adding decimal points.

    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 simple calculator application. It includes HTML and CSS code to layout the calculator interface, which consists of number and operator buttons within a container. It also includes JavaScript code to handle button click events to add numbers and operators to the output field, as well as functions for calculation, clearing output, and adding decimal points.

    Copyright:

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

    New Text Document

    Uploaded by

    saied mostafa
    This document contains the code for a simple calculator application. It includes HTML and CSS code to layout the calculator interface, which consists of number and operator buttons within a container. It also includes JavaScript code to handle button click events to add numbers and operators to the output field, as well as functions for calculation, clearing output, and adding decimal points.

    Copyright:

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

    <!

    DOCTYPE html>
    <html>
    <head>
    <title>Simple Calculator</title>
    <style>
    body {
    font-family: Arial, sans-serif;
    background-color: #F2F2F2;
    margin: 0;
    padding: 0;
    }
    h1 {
    text-align: center;
    margin-top: 50px;
    color: #333;
    }
    .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 30px auto;
    max-width: 300px;
    background-color: #FFF;
    border-radius: 5px;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
    padding: 20px;
    }
    .button {
    width: 70px;
    height: 70px;
    font-size: 24px;
    margin: 5px;
    border-radius: 5px;
    background-color: #E6E6E6;
    box-shadow: inset 0px 0px 5px rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    outline: none;
    border: none;
    color: #333;
    transition: all 0.2s ease-in-out;
    }
    .button:hover {
    background-color: #CCC;
    box-shadow: inset 0px 0px 5px rgba(0,0,0,0.6);
    color: #FFF;
    }
    .output {
    width: 100%;
    font-size: 36px;
    text-align: right;
    padding: 10px;
    box-sizing: border-box;
    background-color: #EEE;
    margin-bottom: 20px;
    border-radius: 5px;
    border: none;
    box-shadow: inset 0px 0px 5px rgba(0,0,0,0.3);
    }
    </style>
    </head>
    <body>
    <h1>Simple Calculator</h1>
    <div class="container">
    <input type="text" class="output" disabled>
    <button class="button" onclick="addNumber('7')">7</button>
    <button class="button" onclick="addNumber('8')">8</button>
    <button class="button" onclick="addNumber('9')">9</button>
    <button class="button" onclick="addOperator('/')">/</button>
    <button class="button" onclick="addNumber('4')">4</button>
    <button class="button" onclick="addNumber('5')">5</button>
    <button class="button" onclick="addNumber('6')">6</button>
    <button class="button" onclick="addOperator('*')">*</button>
    <button class="button" onclick="addNumber('1')">1</button>
    <button class="button" onclick="addNumber('2')">2</button>
    <button class="button" onclick="addNumber('3')">3</button>
    <button class="button" onclick="addOperator('-')">-</button>
    <button class="button" onclick="addNumber('0')">0</button>
    <button class="button" onclick="addDecimal('.')">.</button>
    <button class="button" onclick="calculate()">=</button>
    <button class="button" onclick="addOperator('+')">+</button>
    <button class="button" onclick="clearOutput()">AC</button>
    </div>
    <script>
    let output = document.querySelector('.output');

    function addNumber(num) {
    output.value += num;
    }

    function addOperator(operator) {
    if (output.value.slice(-1) === '+' || output.value.slice(-1) ===
    '-' || output.value.slice(-1) === '*' || output.value.slice(-1) === '/') {
    return;
    }

    You might also like

    • 4
      Document1 page
      4
      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
    • 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
    • 1
      Document2 pages
      1
      Saif Jutt
      No ratings yet
    • Exp 2
      Document9 pages
      Exp 2
      ANSARI MOHAMMAD SAHIL ASHRAF 422164
      No ratings yet
    • 3
      Document2 pages
      3
      Saif Jutt
      No ratings yet
    • Pemwebprakp4 2218004
      Document16 pages
      Pemwebprakp4 2218004
      Naufal Whildan
      No ratings yet
    • 4
      Document2 pages
      4
      Saif Jutt
      No ratings yet
    • !doctype HTML
      Document3 pages
      !doctype HTML
      melati.surya.ningsih29
      No ratings yet
    • Calculator Using HTML, CSS, JS
      Document2 pages
      Calculator Using HTML, CSS, JS
      akrao23375
      No ratings yet
    • 4
      Document2 pages
      4
      Saif Jutt
      No ratings yet
    • 3
      Document2 pages
      3
      Saif Jutt
      No ratings yet
    • 2
      Document2 pages
      2
      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
    • Library
      Document35 pages
      Library
      lohit krishna
      No ratings yet
    • 1
      Document2 pages
      1
      Saif Jutt
      No ratings yet
    • 1
      Document2 pages
      1
      Saif Jutt
      No ratings yet
    • Web Programming Surya
      Document59 pages
      Web Programming Surya
      Aswath Vikranth
      No ratings yet
    • Home Gratis
      Document13 pages
      Home Gratis
      Bisma Cadae
      No ratings yet
    • 2
      Document2 pages
      2
      Saif Jutt
      No ratings yet
    • Doctype HTML
      Document2 pages
      Doctype HTML
      ammarskandar4
      No ratings yet
    • 2
      Document2 pages
      2
      Saif Jutt
      No ratings yet
    • 2
      Document2 pages
      2
      Saif Jutt
      No ratings yet
    • Login Code Se
      Document2 pages
      Login Code Se
      Know Unknown
      No ratings yet
    • Message
      Document4 pages
      Message
      hienhiennguyen0106
      No ratings yet
    • Codes
      Document69 pages
      Codes
      Daniella Janna Eugenio
      No ratings yet
    • Kikd 3.2&4.2 PPB Ke2
      Document11 pages
      Kikd 3.2&4.2 PPB Ke2
      Vian Vian
      No ratings yet
    • Fortnite Skins
      Document24 pages
      Fortnite Skins
      Aminee BT BT
      No ratings yet
    • Final Practical File
      Document36 pages
      Final Practical File
      Deepanshu Punj
      No ratings yet
    • Code
      Document4 pages
      Code
      Ankit barnwal
      No ratings yet
    • 5
      Document2 pages
      5
      Saif Jutt
      No ratings yet
    • Cod HTML Calc
      Document1 page
      Cod HTML Calc
      rmsx22
      No ratings yet
    • Css Style
      Document82 pages
      Css Style
      Sam Nagasaki
      No ratings yet
    • Code
      Document2 pages
      Code
      Prince Choudhary
      No ratings yet
    • Mini Project Report (2) RWPD
      Document17 pages
      Mini Project Report (2) RWPD
      desaikrish713
      No ratings yet
    • Popup
      Document2 pages
      Popup
      Amit Singh
      No ratings yet
    • Lab Fat: CSE3002 - IWP L43+L44 18BCE0820 Nishant Pantbalekundri 2. Railway Reservation
      Document66 pages
      Lab Fat: CSE3002 - IWP L43+L44 18BCE0820 Nishant Pantbalekundri 2. Railway Reservation
      nishant
      No ratings yet
    • App
      Document14 pages
      App
      Shimul Zahan
      No ratings yet
    • HTML:: HTML Lang Charset Content Name Content
      Document4 pages
      HTML:: HTML Lang Charset Content Name Content
      Gleyson Melo
      No ratings yet
    • Serie Amortissement1
      Document23 pages
      Serie Amortissement1
      souad akdim
      No ratings yet
    • Untitled
      Document2 pages
      Untitled
      milisav djordjevic
      No ratings yet
    • Tugas Website Native
      Document7 pages
      Tugas Website Native
      Devi Perdiansyah
      No ratings yet
    • 5
      Document2 pages
      5
      Saif Jutt
      No ratings yet
    • Archive Browser
      Document86 pages
      Archive Browser
      vanesa
      No ratings yet
    • Untitled
      Document2 pages
      Untitled
      ANTONIO JEAN PIERRE DIAZ GARRIDO
      No ratings yet
    • Dasdasd
      Document1 page
      Dasdasd
      sarowi
      No ratings yet
    • Own Project
      Document7 pages
      Own Project
      MYKO DIONGSON
      No ratings yet
    • Emirb Novi Pop
      Document6 pages
      Emirb Novi Pop
      Dzenad Zen Hasanovic
      No ratings yet
    • Emirb Novi Pop
      Document6 pages
      Emirb Novi Pop
      Dzenad Zen Hasanovic
      No ratings yet
    • Theme 8116239681570749602
      Document28 pages
      Theme 8116239681570749602
      Mohamed Sihad
      No ratings yet
    • Nalasoacalc
      Document5 pages
      Nalasoacalc
      Rianala Manantsoa
      No ratings yet
    • Theme 8455354877711033351
      Document17 pages
      Theme 8455354877711033351
      cxafh4729
      No ratings yet
    • Profilecard
      Document19 pages
      Profilecard
      iqbal zahra telbissi
      No ratings yet
    • Graphical Calculator
      Document4 pages
      Graphical Calculator
      Muskan agarwal
      No ratings yet
    • CSS for Hotel Bookings
      From Everand
      CSS for Hotel Bookings
      Abdelfattah Ragab
      No ratings yet