Scribd Logo
Upload

Welcome to Scribd!

  • WT Ass3

    Uploaded by

    boomboomciao049
    7 views5 pages
    calaculator assignment

    Original Title

    WT_ASS3

    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
    calaculator assignment

    Copyright:

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

    WT Ass3

    Uploaded by

    boomboomciao049
    calaculator assignment

    Copyright:

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

    Assignment 3

    index.html
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,
    initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Calculator using Html,Css & Javascript</title>
    </head>
    <body>
    <div class="container1">
    <h1 class="text-center">cal-C</h1>
    <div class="container flex flex-col items-center">
    <div class="row">
    <input class="input" type="text">
    </div>
    <div class="row">
    <button class="button">ac</button>
    <button class="button">del</button>
    <button class="button">%</button>
    <button class="button">-</button>
    </div>
    <div class="row">
    <button class="button">7</button>
    <button class="button">8</button>
    <button class="button">9</button>
    <button class="button">*</button>
    </div>
    <div class="row">
    <button class="button">4</button>
    <button class="button">5</button>
    <button class="button">6</button>
    <button class="button">/</button>
    </div>
    <div class="row">
    <button class="button">1</button>
    <button class="button">2</button>
    <button class="button">3</button>
    <button class="button">+</button>
    </div>
    <div class="row">
    <button class="button">00</button>
    <button class="button">0</button>
    <button class="button">.</button>
    <button class="button">=</button>
    </div>
    </div>
    </div>
    <script src="script.js"></script>
    </body>
    </html>

    style.css
    @import
    url('https://fonts.googleapis.com/css2?family=Bitter&family=Montserrat:
    wght@700&family=Nunito:wght@600&family=Roboto&family=Rubik:wght@500&dis
    play=swap');
    html,body{
    height: 100%;
    width: 100%;
    font-family: 'Roboto', sans-serif;

    }
    .button{
    padding: 20px;
    width: 52px;
    max-width: 0px 3px;
    border: 0;
    border-radius: 9px;
    cursor: pointer;
    font-family: 'Roboto', sans-serif;
    }
    .row{
    margin: 8px 0px;
    }
    .container1{
    border:0;
    margin: 0px 594px;
    background-color:#80B3FF;
    border-radius: 20px;
    }

    .row input{
    width: 221px;
    font-size: 17px;
    margin: 0px;
    padding: 10px 0px;
    border-radius: 5px;
    text-align: center;
    border: 0;

    }
    .text-center{
    text-align: center;
    color: #B6FFFA;
    }

    .mx-auto{
    margin: auto;
    }

    .flex{
    display: flex;
    justify-content: center;
    align-items: center;
    }
    .flex-col{
    flex-direction: column;
    }

    .items-center{
    align-items: center;
    }

    script.js
    let string="";
    let buttons=document.querySelectorAll('.button');
    Array.from(buttons).forEach( (button) => {
    button.addEventListener('click',(e) =>{
    if(e.target.innerHTML == '='){
    string=eval(string);
    document.querySelector('input').value = string;
    }
    else if(e.target.innerHTML == 'ac'){
    string='';
    document.querySelector('input').value = string;
    }
    else if(e.target.innerHTML == 'del'){
    string=string.substring(0,string.length-1);
    document.querySelector('input').value = string;
    }
    else{
    console.log(e.target)
    string=string + e.target.innerHTML;
    document.querySelector('input').value=string;
    }
    })

    })
    Output:

    You might also like