<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=League+Spartan:wght@700&display=swap" rel="stylesheet">
<title>Frontend Mentor | Calculator app</title>
</head>
<body>
<article>
<section class="header">
<div>calc</div>
<div>
<h1>THEME</h1>
<div>
<div class="num">123</div>
<div class="theme">
<div id="theme-1" class="toggle"></div>
<div id="theme-2" class="toggle"></div>
<div id="theme-3" class="toggle"></div>
</div>
</div>
</div>
</section>
<section id="screen">
</section>
<section id="keypad">
<div class="keypad-nums">7</div>
<div class="keypad-nums">8</div>
<div class="keypad-nums">9</div>
<div class="keypad-clean key-del">DEL</div>
<div class="keypad-nums">4</div>
<div class="keypad-nums">5</div>
<div class="keypad-nums">6</div>
<div class="keypad-nums">+</div>
<div class="keypad-nums">1</div>
<div class="keypad-nums">2</div>
<div class="keypad-nums">3</div>
<div class="keypad-nums">-</div>
<div class="keypad-nums">.</div>
<div class="keypad-nums">0</div>
<div class="keypad-nums">/</div>
<div class="keypad-nums">x</div>
<div class="keypad-clean key-reset">Clear All</div>
<div class="key-equal">=</div>
</section>
</article>
<div class="attribution">
Coded by <a href="#">Anas Shaik</a>.
</div>
</body>
</html>
/*theme 1*/
body {
margin:0;
display:flex;
flex-direction:column;
height:100vh;
font-family: 'League Spartan', sans-serif;
background-color:hsl(222, 26%, 31%);
justify-content:center;
align-content:center;
}
*{
box-sizing:border-box ;
transition:0.5s;
}
.attribution {
font-size: 11px; text-align: center;
}
.attribution a {
color:hsl(228, 45%, 44%);
}
article{
margin:1.5rem;
}
.header{
display:flex;
justify-content:space-between;
color:white;
}
.header > div:first-child{
font-size:2rem;
}
.header > div:last-child{
font-size:0.7rem;
display:flex;
}
.header > div:last-child > h1 {
margin-right:1.5rem;
}
.header > div:last-child > div {
position:relative ;
top:-0.2rem;
}
.theme{
background-color:hsl(223, 31%, 20%);
border-radius:0.65rem;
width:4.5rem;
height:1.5rem;
margin-top:0.7rem;
display:flex;
justify-content:center;
align-items:center;
}
.num{
letter-spacing:1rem;
width:100%;
line-height:0rem;
text-indent:0.75rem;
}
.toggle{
width:1rem;
height:1rem;
border-radius:0.5rem;
margin:0.2rem;
}
#theme-1{
background-color:hsl(6, 63%, 50%);
opacity:1;
}
#theme-1:hover{
background-color:#F96C5C;
}
#theme-2{
background-color:hsl(25, 98%, 40%);
opacity:0;
}
#theme-2:hover{
background-color:#FF8B38;
}
#theme-3{
background-color:hsl(176, 100%, 44%);
opacity:0;
}
#theme-3:hover{
background-color:#91F2E9;
}
#screen{
background-color:hsl(224, 36%, 15%);
line-height:0rem;
margin-top:2rem;
padding:3rem 1.5rem;
text-align:right;
color:white;
font-size:2.8rem;
border-radius:0.5rem;
overflow:scroll ;
}
#keypad{
display:grid;
grid-gap:1rem;
grid-template-columns:4rem 4rem 4rem 4rem;
grid-auto-rows:4rem;
margin-top:1.5rem;
background-color:hsl(223, 31%, 20%);
justify-content:center;
padding:1.5rem 0rem;
border-radius:0.5rem;
}
.keypad-nums{
background-color:hsl(30, 25%, 89%);
display:flex;
align-items:center;
justify-content:center;
border-radius:0.25rem;
font-size:2.2rem;
color:hsl(221, 14%, 31%);
box-shadow:0rem 0.25rem hsl(28, 16%, 65%);
transform:translateY(0rem);
transition:0.2s;
}
.keypad-clean{
background-color:hsl(225, 21%, 49%);
display:flex;
align-items:center;
justify-content:center;
border-radius:0.25rem;
font-size:1.4rem;
color:hsl(30, 25%, 89%);
box-shadow:0rem 0.25rem hsl(224, 28%, 35%);
transform:translateY(0rem);
transition:0.2s;
}
.key-reset{
grid-column:1/3;
}
.key-equal{
background-color:hsl(6, 63%, 50%);
display:flex;
align-items:center;
justify-content:center;
border-radius:0.25rem;
grid-column:3/5;
font-size:1.4rem;
color:hsl(30, 25%, 89%);
box-shadow:0rem 0.25rem hsl(6, 70%, 34%);
transform:translateY(0rem);
transition:0.2s;
}
.keypad-nums:hover{
background-color:white;
box-shadow:0rem 0rem hsl(28, 16%, 65%);
transform:translateY(0.25rem);
}
.keypad-clean:hover{
background-color:#A2B3E1;
box-shadow:0rem 0rem hsl(224, 28%, 35%);
transform:translateY(0.25rem);
}
.key-equal:hover{
background-color:#F96C5C;
box-shadow:0rem 0em hsl(6, 70%, 34%);
transform:translateY(0.25rem);
}
/*theme 2*/
.keypad-nums-theme2{
background-color:hsl(45, 7%, 89%);
display:flex;
align-items:center;
justify-content:center;
border-radius:0.25rem;
font-size:2.2rem;
color:hsl(60, 10%, 19%);
box-shadow:0rem 0.25rem hsl(35, 11%, 61%);
transform:translateY(0rem);
transition:0.2s;
}
.keypad-clean-theme2{
background-color:hsl(185, 42%, 37%);
display:flex;
align-items:center;
justify-content:center;
border-radius:0.25rem;
font-size:1.4rem;
color:white;
box-shadow:0rem 0.25rem hsl(185, 58%, 25%);
transform:translateY(0rem);
transition:0.2s;
}
.key-equal-theme2{
background-color:hsl(25, 98%, 40%);
display:flex;
align-items:center;
justify-content:center;
border-radius:0.25rem;
grid-column:3/5;
font-size:1.4rem;
color:hsl(30, 25%, 89%);
box-shadow:0rem 0.25rem hsl(25, 99%, 27%);
transform:translateY(0rem);
transition:0.2s;
}
.keypad-nums-theme2:hover{
background-color:white;
box-shadow:0rem 0rem hsl(35, 11%, 61%);
transform:translateY(0.25rem);
}
.keypad-clean-theme2:hover{
background-color:#62B5BD;
box-shadow:0rem 0rem hsl(185, 58%, 25%);
transform:translateY(0.25rem);
}
.key-equal-theme2:hover{
background-color:#F27C38;
box-shadow:0rem 0em hsl(25, 99%, 27%);
transform:translateY(0.25rem);
}
/*theme 3*/
.keypad-nums-theme3{
background-color:hsl(268, 47%, 21%);
display:flex;
align-items:center;
justify-content:center;
border-radius:0.25rem;
font-size:2.2rem;
color:hsl(52, 100%, 62%);
box-shadow:0rem 0.25rem hsl(290, 70%, 36%);
transform:translateY(0rem);
transition:0.2s;
}
.keypad-clean-theme3{
background-color:hsl(281, 89%, 26%);
display:flex;
align-items:center;
justify-content:center;
border-radius:0.25rem;
font-size:1.4rem;
color:white;
box-shadow:0rem 0.25rem hsl(285, 91%, 52%);
transform:translateY(0rem);
transition:0.2s;
}
.key-equal-theme3{
background-color:hsl(176, 100%, 44%);
display:flex;
align-items:center;
justify-content:center;
border-radius:0.25rem;
grid-column:3/5;
font-size:1.4rem;
color:hsl(198, 20%, 13%);
box-shadow:0rem 0.25rem hsl(177, 92%, 70%);
transform:translateY(0rem);
transition:0.2s;
}
.keypad-nums-theme3:hover{
background-color:#762EA6;
box-shadow:0rem 0rem hsl(35, 11%, 61%);
transform:translateY(0.25rem);
}
.keypad-clean-theme3:hover{
background-color:#B016F2;
box-shadow:0rem 0rem hsl(285, 91%, 52%);
transform:translateY(0.25rem);
}
.key-equal-theme3:hover{
background-color:#91F2E9;
box-shadow:0rem 0em hsl(177, 92%, 70%);
transform:translateY(0.25rem);
}
window.onload = function() {
alert("you can change the theme by toggling the top right key")
//calculator function
let keypadNums = Array.from(document.getElementsByClassName("keypad-nums"));;
let keypadClean = Array.from(document.getElementsByClassName("keypad-clean"));;
let keyEqual = document.querySelector(".key-equal");
let screen = document.getElementById("screen");
keypadNums.forEach(key => {key.addEventListener("click",()=>{
if(key.innerText == "x"){
screen.innerText += "*"
}
else {
screen.innerText += key.innerText ;
}
})})
keypadClean.forEach(key => {key.addEventListener("click",()=>{
if(key.innerText == "RESET"){
screen.innerText = "" ;
}
if(key.innerText == "DEL"){
screen.innerText = screen.innerText.slice(0, -1) ;
}
})})
keyEqual.addEventListener("click",()=>{
try{
screen.innerText = eval(screen.innerText);
}
catch{
screen.innerText = "error";
}
})
let body = document.querySelector("body");
let header = document.querySelector(".header");
let theme = document.querySelector(".theme");
let themeOne = document.querySelector("#theme-1");
let themeTwo = document.querySelector("#theme-2");
let themeThree = document.querySelector("#theme-3");
let keypad = document.querySelector("#keypad") ;
let keyReset = document.querySelector(".key-reset") ;
let keyDel = document.querySelector(".key-del")
//theme one
themeOne.addEventListener("click",()=>{
themeTwo.style.opacity = "0" ;
themeOne.style.opacity = "1" ;
themeThree.style.opacity = "0" ;
theme.style.backgroundColor = "hsl(223, 31%, 20%)" ;
body.style.backgroundColor = "hsl(222, 26%, 31%)" ;
header.style.color = "white" ;
screen.style.backgroundColor = "hsl(224, 36%, 15%)" ;
screen.style.color = "white" ;
keypad.style.backgroundColor = "hsl(223, 31%, 20%)" ;
keypadNums.forEach(key=>{
key.className = "keypad-nums";
})
keyReset.className = "keypad-clean key-reset"
keyDel.className = "keypad-clean"
keyEqual.className = "key-equal"
})
//theme 2
themeTwo.addEventListener("click",()=>{
themeTwo.style.opacity = "1" ;
themeOne.style.opacity = "0" ;
themeThree.style.opacity = "0" ;
theme.style.backgroundColor = "hsl(0, 5%, 81%)" ;
body.style.backgroundColor = "hsl(0, 0%, 90%)" ;
header.style.color = "hsl(60, 10%, 19%)" ;
screen.style.backgroundColor = "hsl(0, 0%, 93%)" ;
screen.style.color = "hsl(60, 10%, 19%)" ;
keypad.style.backgroundColor = "hsl(0, 5%, 81%)" ;
keypadNums.forEach(key=>{
key.className = "keypad-nums-theme2";
})
keyReset.className = "keypad-clean-theme2 key-reset"
keyDel.className = "keypad-clean-theme2"
keyEqual.className = "key-equal-theme2"
})
//theme 3
themeThree.addEventListener("click",()=>{
themeTwo.style.opacity = "0" ;
themeOne.style.opacity = "0" ;
themeThree.style.opacity = "1" ;
theme.style.backgroundColor = "hsl(268, 71%, 12%)" ;
body.style.backgroundColor = "hsl(268, 75%, 9%)" ;
header.style.color = "hsl(52, 100%, 62%)" ;
screen.style.backgroundColor = "hsl(268, 71%, 12%)" ;
screen.style.color = "hsl(52, 100%, 62%)" ;
keypad.style.backgroundColor = "hsl(268, 71%, 12%)" ;
keypadNums.forEach(key=>{
key.className = "keypad-nums-theme3";
})
keyReset.className = "keypad-clean-theme3 key-reset"
keyDel.className = "keypad-clean-theme3"
keyEqual.className = "key-equal-theme3"
})
}
More Projects by Shaik
Resources
Dіscover Freelancers