Java Script Calculator: Sanjay M
Java Script Calculator: Sanjay M
Java Script Calculator: Sanjay M
Java Script
Calculator
Sanjay M
19BCE2207
HTML CODE
<body data-theme"">
<div class="main">
<div class="calculator">
<div class="header">
<div class="switchbox">
</div>
</div>
<div class="input">
</div>
<div class="row">
<div class="row">
1
<input type="button" value="-">
</div>
<div class="row">
</div>
<div class="row">
</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;
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;
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;
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 input{
width: 23.6%;
height: 60px;
6
background: var(--sec_bg);
color: var(--color);
font-size: 1.5rem;
.active{animation: 4s}
7
JAVA SCRIPT
const switchbtn = document.getElementById ("switch");
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){
value = newal;
display.value = value;
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