How to make calculator in java script.

By Aatifa Mugheer

 <!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Calculator - By Code Traversal</title>
  </head>
  <body>
    <div class="container">
      <div class="calculator">
        <input type="text" id="inputBox" placeholder="0" />
        <div>
          <button class="button operator">AC</button>
          <button class="button operator">DEL</button>
          <button class="button operator">%</button>
          <button class="button operator">/</button>
        </div>
        <div>
          <button class="button">7</button>
          <button class="button">8</button>
          <button class="button">9</button>
          <button class="button operator">*</button>
        </div>
        <div>
          <button class="button">4</button>
          <button class="button">5</button>
          <button class="button">6</button>
          <button class="button operator">-</button>
        </div>
        <div>
          <button class="button">1</button>
          <button class="button">2</button>
          <button class="button">3</button>
          <button class="button operator">+</button>
        </div>

        <div>
          <button class="button">00</button>
          <button class="button">0</button>
          <button class="button">.</button>
          <button class="button equalBtn">=</button>
        </div>
      </div>
    </div>

    <script src="script.js"></script>
  </body>
</html>

style.css

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(45deg, #0a0a0a, #3a4452);
}

.calculator{
    border: 1px solid #717377;
    padding: 20px;
    border-radius: 16px;
    background: transparent;
    box-shadow: 0px 3px 15px rgba(113, 115, 119, 0.5);

}

input{
    width: 320px;
    border: none;
    padding: 24px;
    margin: 10px;
    background: transparent;
    box-shadow: 0px 3px 15px rgbs(84, 84, 84, 0.1);
    font-size: 40px;
    text-align: right;
    cursor: pointer;
    color: #ffffff;
}

input::placeholder{
    color: #ffffff;
}

button{
    border: none;
    width: 60px;
    height: 60px;
    margin: 10px;
    border-radius: 50%;
    background: transparent;
    color: #ffffff;
    font-size: 20px;
    box-shadow: -8px -8px 15px rgba(255, 255, 255, 0.1);
    cursor: pointer;
}

.equalBtn{
    background-color: #fb7c14;
}

.operator{
    color: #6dee0a;
}

script.js

let input = document.getElementById('inputBox');
let buttons = document.querySelectorAll('button');

let string = "";
let arr = Array.from(buttons);
arr.forEach(button => {
    button.addEventListener('click', (e) =>{
        if(e.target.innerHTML == '='){
            string = eval(string);
            input.value = string;
        }

        else if(e.target.innerHTML == 'AC'){
            string = "";
            input.value = string;
        }
        else if(e.target.innerHTML == 'DEL'){
            string = string.substring(0, string.length-1);
            input.value = string;
        }
        else{
            string += e.target.innerHTML;
            input.value = string;
        }
       
    })
})

Comments

Post a Comment

Popular posts from this blog

C Program using continue statement

By Aatifa Mugheer
  #include <stdio.h> int main () {     int i , age ;     for ( i = 0 ; i < 10 ; i ++){     printf ( " %d \n Enter you age \n " , i );     scanf ( " %d " ,& age );     // if (age>10)     // {     // break;     // }     if ( age > 10 )     {         continue ;     }         printf ( "we have not come across any continue statement" );     printf ( "we have not come across any continue statement" );     printf ( "we have not come across any continue statement" );     printf ( "we have not come across any continue statement" );     printf ( "we have not come across any continue statement" );     printf ( "we have not come across any continue statement" );     printf ( "Aatifa is a good girl" );     }     return 0 ; } OUTPUT: 0 Enter you a...
Read more

C program of WHILE Loop

By Aatifa Mugheer
  #include <stdio.h> int main () {     int i = 0 ;     while ( i < 54 )     {         printf ( " %d \n " , i );         i = i + 1 ;     }         return 0 ; } OUTPUT 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53
Read more

NULL Pointer in C.

By Aatifa Mugheer
  #include <stdio.h> #include <conio.h> int main () {     int b = 34 ;     int * pt = & b ;     printf ( "The address of b is %d \n " , pt );         int a = 34 ;     int * ptr = NULL ;     if ( ptr != NULL )     printf ( "The address of a is %d \n " , * ptr );     else {         printf ( "The pointer is a null pointer and can not be defrenced" );     }     return 0 ; } OUTPUT: The address of b is 6422288 The pointer is a null pointer and can not be defrenced
Read more

C Program using DO WHILE loop

By Aatifa Mugheer
  #include <stdio.h> int main () {     int num , index = 0 ;     printf ( "Enter a number \n " );     scanf ( " %d " , & num );     do     {         printf ( " %d \n " , index + 1 );         index = index + 1 ;     } while ( index < num );     return 0 ; } OUTPUT: Enter a number 5 1 2 3 4 5
Read more

C Program using SWITCH statement

By Aatifa Mugheer
  #include <stdio.h> int main () {     int i = 9 ;     switch ( i ) {           case 5 :         printf ( "value is 7" );         break ;         case 8 :         printf ( "value is 8" );         break ;         case 9 :         printf ( "value is 9" );         break ;             default :         printf ( "value is not present" );         break ;     }     return 0 ; } OUTPUT value is 9
Read more

New Animated Login or signup page made by HTML, CSS and JavaScript.

By Aatifa Mugheer
  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > Animated Login And Registration Form </ title >     < link rel = "stylesheet" type = "text/css" href = "style.css" >     < link href = 'https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel = 'stylesheet' > </ head > < body >     < div class = "wrapper" >         < div class = "form-wrapper sign-in" >             < form action = "" >                 < h2 > Login </ h2 >                 < div class = "input-group" >                     < input type = "...
Read more

C Program to print multiplication table of any number.

By Aatifa Mugheer
  #include <stdio.h> int main () {     int num ;     printf ( "Enter the number you want multiplication table of: \n " );     scanf ( " %d " , & num );     printf ( "Multiplication table of %d is as follows: \n " , num );     for ( int i = 1 ; i < 11 ; i ++)     {         printf ( " %d x %d = %d \n " , num , i , num * i );     }         return 0 ; } Enter the number you want multiplication table of: 4 Multiplication table of 4 is as follows: 4 x 1 = 4 4 x 2 = 8 4 x 3 = 12 4 x 4 = 16 4 x 5 = 20 4 x 6 = 24 4 x 7 = 28 4 x 8 = 32 4 x 9 = 36 4 x 10 = 40 Enter the number you want multiplication table of: 67 Multiplication table of 67 is as follows: 67 x 1 = 67 67 x 2 = 134 67 x 3 = 201 67 x 4 = 268 67 x 5 = 335 67 x 6 = 402 67 x 7 = 469 67 x 8 = 536 67 x 9 = 603 67 x 10 = 670 Enter the number you want multiplication table of: 436 Multiplication table of 436...
Read more

C Language Travel Agency Manager Exercise.

By Aatifa Mugheer
  #include <stdio.h> struct driver {     char name [ 45 ];     char dlNo [ 50 ];     char route [ 47 ];     int kms ; }; int main () {     struct driver d1 , d2 , d3 ;     printf ( "Enter the details of drivers no.1 \n " );     printf ( "Enter the name of first drivers \n " );     scanf ( " %s " , & d1 . name );     printf ( "Enter the dlNo of first drivers \n " );     scanf ( " %s " , & d1 . dlNo );     printf ( "Enter the route of first drivers \n " );     scanf ( " %s " , & d1 . route );     printf ( "Enter the number of kms of first drivers \n " );     scanf ( " %d " , & d1 . kms );     printf ( "Enter the details of drivers no.2 \n " );     printf ( "Enter the name of second drivers \n " );     scanf ( " %s " , & d2 . name );     printf ( "Enter the dlNo of second d...
Read more

STRUCTURE IN C PROGRAMMING.

By Aatifa Mugheer
  #include <stdio.h> #include <string.h> struct student {     int id ;     int marks ;     char fav_char ;     char name [ 34 ]; }; int main () {     struct student aatifa , xyz , abc ;     aatifa . id = 1 ;     xyz . id = 2 ;     abc . id = 3 ;     aatifa . marks = 445 ;     xyz . marks = 450 ;     abc . marks = 451 ;     aatifa . fav_char = 'p' ;     xyz . fav_char = 'p' ;     abc . fav_char = 'p' ;     strcpy ( aatifa . name , "aatifa is a programmer" );     printf ( "aatifa got %d marks \n " , aatifa . marks );       printf ( "aatifa's name is: %s \n " , aatifa . name );     return 0 ; } OUTPUT: aatifa got 445 marks aatifa's name is: aatifa is a programmer
Read more