Scribd Logo
Upload

Welcome to Scribd!

  • Doctype HTML

    Uploaded by

    ammarskandar4
    3 views2 pages
    This document contains HTML and CSS code to create a basic calculator interface with a display and buttons laid out in a grid. The display is at the top in a dark bar showing the number 0. Below are buttons for numbers 0-9 and basic math operators laid out in a 4x4 grid. The buttons are styled with consistent colors, padding and transitions on hover.

    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 HTML and CSS code to create a basic calculator interface with a display and buttons laid out in a grid. The display is at the top in a dark bar showing the number 0. Below are buttons for numbers 0-9 and basic math operators laid out in a 4x4 grid. The buttons are styled with consistent colors, padding and transitions on hover.

    Copyright:

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

    Doctype HTML

    Uploaded by

    ammarskandar4
    This document contains HTML and CSS code to create a basic calculator interface with a display and buttons laid out in a grid. The display is at the top in a dark bar showing the number 0. Below are buttons for numbers 0-9 and basic math operators laid out in a 4x4 grid. The buttons are styled with consistent colors, padding and transitions on hover.

    Copyright:

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

    <!

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

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

    #display {
    background-color: #222;
    color: #fff;
    font-size: 1.5em;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 10px;
    }

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

    button {
    border: none;
    outline: none;
    cursor: pointer;
    font-size: 1.2em;
    padding: 15px;
    background-color: #444;
    color: #fff;
    transition: background-color 0.3s;
    }

    button:hover {
    background-color: #555;
    }

    button.operator {
    background-color: #ff9500;
    color: #222;
    }

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

    <div id="calculator">
    <div id="display">0</div>
    <div id="buttons">
    <button>7</button>
    <button>8</button>
    <button>9</button>
    <button class="operator">/</button>

    <button>4</button>
    <button>5</button>
    <button>6</button>
    <button class="operator">*</button>

    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button class="operator">-</button>

    <button>0</button>
    <button>.</button>
    <button class="operator">=</button>
    <button class="operator">+</button>
    </div>
    </div>

    </body>
    </html>

    You might also like

    • 1
      Document2 pages
      1
      Saif Jutt
      No ratings yet
    • 4
      Document2 pages
      4
      Saif Jutt
      No ratings yet
    • 4
      Document2 pages
      4
      Saif Jutt
      No ratings yet
    • 2
      Document2 pages
      2
      Saif Jutt
      No ratings yet
    • 3
      Document2 pages
      3
      Saif Jutt
      No ratings yet
    • 3
      Document2 pages
      3
      Saif Jutt
      No ratings yet
    • 2
      Document2 pages
      2
      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
    • 4
      Document1 page
      4
      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
    • 2
      Document2 pages
      2
      Saif Jutt
      No ratings yet
    • 1
      Document2 pages
      1
      Saif Jutt
      No ratings yet
    • 4
      Document2 pages
      4
      Saif Jutt
      No ratings yet
    • 2
      Document2 pages
      2
      Saif Jutt
      No ratings yet
    • 5
      Document2 pages
      5
      Saif Jutt
      No ratings yet
    • 4
      Document2 pages
      4
      Saif Jutt
      No ratings yet
    • Cod HTML Calc
      Document1 page
      Cod HTML Calc
      rmsx22
      No ratings yet
    • HTML
      Document2 pages
      HTML
      ccrown861
      No ratings yet
    • Nalasoacalc
      Document5 pages
      Nalasoacalc
      Rianala Manantsoa
      No ratings yet
    • 2
      Document2 pages
      2
      Saif Jutt
      No ratings yet
    • 4
      Document2 pages
      4
      Saif Jutt
      No ratings yet
    • New Text Document
      Document2 pages
      New Text Document
      saied mostafa
      No ratings yet
    • Theme 5250455546679472398
      Document2 pages
      Theme 5250455546679472398
      Paint with MSM
      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
    • Index - PHP: Contrôle N°1 PHP Nom Et Prénom: MERYEM AYAD
      Document17 pages
      Index - PHP: Contrôle N°1 PHP Nom Et Prénom: MERYEM AYAD
      meryem
      No ratings yet
    • 5
      Document2 pages
      5
      Saif Jutt
      No ratings yet
    • Source Code Food Delivery Webpage
      Document13 pages
      Source Code Food Delivery Webpage
      Apurva Ankushrao
      No ratings yet
    • Archive Browser
      Document86 pages
      Archive Browser
      vanesa
      No ratings yet
    • HTML Css App
      Document11 pages
      HTML Css App
      Aymen Gmar
      No ratings yet
    • Mini Project 1
      Document7 pages
      Mini Project 1
      Seid Krsic
      No ratings yet
    • Registration Form
      Document2 pages
      Registration Form
      NIRANJAN BEHERA
      No ratings yet
    • Gambarlogin Prile
      Document4 pages
      Gambarlogin Prile
      furry1446
      No ratings yet
    • Vitro Nex
      Document7 pages
      Vitro Nex
      Andrei Suceu
      No ratings yet
    • Calc
      Document4 pages
      Calc
      805199
      No ratings yet
    • Simpelaja
      Document35 pages
      Simpelaja
      sulaiman Sulaiman
      No ratings yet
    • Own Project
      Document7 pages
      Own Project
      MYKO DIONGSON
      No ratings yet
    • Calc
      Document3 pages
      Calc
      citiye2321
      No ratings yet
    • Exp 2
      Document9 pages
      Exp 2
      ANSARI MOHAMMAD SAHIL ASHRAF 422164
      No ratings yet
    • WT Record
      Document14 pages
      WT Record
      Sravanthi Sravs
      No ratings yet
    • Hopeless
      Document7 pages
      Hopeless
      azlannisar
      No ratings yet
    • Calculator Using HTML, CSS, JS
      Document2 pages
      Calculator Using HTML, CSS, JS
      akrao23375
      No ratings yet
    • Archita1 Websyslabexer
      Document11 pages
      Archita1 Websyslabexer
      Tijnara Archita
      No ratings yet
    • Doctype HTML
      Document44 pages
      Doctype HTML
      Ayoub Khelifaoui
      No ratings yet
    • 1234
      Document1 page
      1234
      Studyपुर 24x7
      No ratings yet
    • WT Mini Project
      Document59 pages
      WT Mini Project
      indira indu
      No ratings yet
    • Web Tech
      Document14 pages
      Web Tech
      panchalkushal478
      No ratings yet
    • Codes
      Document69 pages
      Codes
      Daniella Janna Eugenio
      No ratings yet
    • Login Code Se
      Document2 pages
      Login Code Se
      Know Unknown
      No ratings yet
    • Personal Portfolio
      Document24 pages
      Personal Portfolio
      Anurag Kumar
      No ratings yet
    • 20-CP-09 FB and Gmail Sign Up and Sign in
      Document19 pages
      20-CP-09 FB and Gmail Sign Up and Sign in
      INFOTAINMENT CHANNEL
      No ratings yet
    • Build A Telephone Number Validator
      Document4 pages
      Build A Telephone Number Validator
      John Kesh Mahugu
      No ratings yet
    • Menu
      Document7 pages
      Menu
      Simon Valenzuela Diaz
      No ratings yet
    • Tema Web
      Document3 pages
      Tema Web
      stefy15stirbu
      No ratings yet
    • CSS for Hotel Bookings
      From Everand
      CSS for Hotel Bookings
      Abdelfattah Ragab
      No ratings yet