Scribd
Upload
64 views11 pages

Java Script Calculator: Sanjay M

The document contains HTML, CSS, and JavaScript code for a basic calculator web application. The HTML defines the structure and layout of the calculator interface. The CSS contains styling rules for the interface elements. The JavaScript code handles user input, calculations, and toggling between a light and dark theme.

Uploaded by

Sanjay Muthu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
64 views11 pages

Java Script Calculator: Sanjay M

The document contains HTML, CSS, and JavaScript code for a basic calculator web application. The HTML defines the structure and layout of the calculator interface. The CSS contains styling rules for the interface elements. The JavaScript code handles user input, calculations, and toggling between a light and dark theme.

Uploaded by

Sanjay Muthu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 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