Java Script Calculator: Sanjay M

Download as pdf or txt
Download as pdf or txt
You are on page 1of 11

IWP

Java Script
Calculator

Sanjay M
19BCE2207
HTML CODE
<body data-theme"">

<div class="main">

<div class="calculator">

<div class="header">

<div class="switchbox">

<input type="checkbox" name="" id="switch" class="switch" value="switch">

</div>

</div>

<div class="input">

<input type="text" name="" id="display" disabled>

<input type="button" value="C" class="cancel_btn">

</div>

<div class="row">

<input type="button" value="7">

<input type="button" value="8">

<input type="button" value="9">

<input type="button" value="+">

<div class="row">

<input type="button" value="4">

<input type="button" value="5">

<input type="button" value="6">

1
<input type="button" value="-">

</div>

<div class="row">

<input type="button" value="1">

<input type="button" value="2">

<input type="button" value="3">

<input type="button" value="*">

</div>

<div class="row">

<input style="border-radius: 0 0 0 10px;" type="button" value=".">

<input type="button" value="0">

<input style="background: #542e71; color: white;" type="button" value="=">

<input style="border-radius: 0 0 10px 0;" type="button" value="/">

</div>

</div>

</div>

</body>

2
CSS CODE
@import url('https://fonts.googleapis.com/css2?family=Zen+Dots&display=swap');

*{

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: Zen Dots, cursive;

html{

--bg: #f1f1f1;

--sec_bg: #fff;

--color: #000;

--hover_color: #e7e7e7;

body[data-theme="dark"]{

--bg: #0e0e0e;

--sec_bg: #222222;

--color: #fff;

--hover_color: #424242;

body{

background: var(--bg)

3
.main{

height: 100vh;

display: flex;

justify-content: center;

align-items: center;

.calculator{width: 300px;}

.header{

width: 100%;

height 60px;

background: #1bIa17;

border-radius: 10px 10px 0 0;

display: flex;

align-items: center;

.switchbox{

margin-left: 20px;

width: 60px;

height: 25px;

background: #d8d8d8;

position: relative;

.switchbox input{

width: 100%;

4
height: 100%;

cursor: pointer;

position: absolute;

z-index: 100;

-webkit-appearance: none;

.switchBox .box{

position: absolute;

top: 10%;

left: 4px;

width: 20px;

height: 80%;

background: #6d6d6d;

border-radius: 20px;

transition: all .4s;

.switchBox input:checked ~ .box{

left: 60%;

background: #ff8303;

.input{

width: 100%;

height: 60px;

background: #fff;

5
}

input{

cursor: pointer;

.input #display{

width: 74%;

height: 60px;

border: none;

outline: none;

font-size: 1.5rem;

padding-left: 10px;

.cancel_btn{

width: 24pc;

height: 60px;

border: none;

background: #ff8303;

font-size: 1.5rem;

color: white;

.row{width: 100%;margin 10px 0;}

.row input{

width: 23.6%;

height: 60px;

6
background: var(--sec_bg);

color: var(--color);

border: 1px solid rgba(0, 0, 0, 0.137);

font-size: 1.5rem;

.active{animation: 4s}

@keyframes anim{0%,200%{transform: scale(1);}

50%{transform: scale(1.1);background: var(--hover_color);}

7
JAVA SCRIPT
const switchbtn = document.getElementById ("switch");

const display = document.getElementById ("display");

const input = document.querySelectorAll ("input");

let value = "";

switchbtn.addEventListener("click", ()=>{

if(switchbtn.checked == true){

document.body.setAttribute("data-theme", "dark");

}else{

document.body.setAttribute("data-theme", "");

} );

input.forEach((e)=>{

e.addEventListener("click", (event)=>{

if(event.target.value == "="){

if(value.lenght != 0){

let newal = eval(value);

value = newal;

display.value = value;

}else if(event.target.value == 'C'){

value = "";

display.value = value;

8
}else if(event.target.value == "switch"){

}else{

value += event.target.value;

display.value = value;

if(!event.target.classList.contains("switch")){

event.target.classList.add("active");

setTimeout(() =>{

event.target.classList.remove("active");

},400);

});

});

9
CONCLUSION
Lite Mode

Dark Mode

10

You might also like