Here's a simple calculator built using HTML, CSS and obviously, JavaScript.
This calculator also has dark mode which looks really good. And here's how you can do that:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Simple JS Calculator</title>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="light.css" id="theme">
<script src="script.js"></script>
</head>
<body>
<div class="container">
<h1>Calculator</h1>
<div class="row-1">
<input type="text" id="result" placeholder="Result" readonly>
<button onclick="clearScreen()" id="clear" >C</button>
</div>
<div class="btnrow-1">
<button onclick="updScreen(1)">1</button>
<button onclick="updScreen(2)">2</button>
<button onclick="updScreen(3)">3</button>
<button onclick="updScreen('*')">x</button>
</div>
<div class="btnrow-1">
<button onclick="updScreen(4)" >4</button>
<button onclick="updScreen(5)" >5</button>
<button onclick="updScreen(6)" >6</button>
<button onclick="updScreen('+')">+</button>
</div>
<div class="btnrow-1">
<button onclick="updScreen(7)">7</button>
<button onclick="updScreen(8)">8</button>
<button onclick="updScreen(9)">9</button>
<button onclick="updScreen('-')">-</button>
</div>
<div class="btnrow-2">
<button onclick="updScreen('/')" >/</button>
<button onclick="updScreen(0)" >0</button>
<button onclick="updScreen('.')">.</button>
<button onclick="result.value = eval(result.value)">=</button>
</div>
<div class="btnrow-1">
<button onclick="themeSwitcher()" id="dark-mode" >Turn on Dark Mode</button>
</div>
</div>
</body>
</html>
CSS
Now made two css file 1) Light Mode 2) Dark Mode
Here's the CSS for Light Mode
/* CSS Reset */
*{
margin: 0;
padding: 0;
}
body{
background-color: lightSteelBlue;
font-family: 'Open Sans', sans-serif;
font-weight: 500;
}
.row-1 {
margin-top: 15px;
}
h1{
color: black;
font-family: Lunacy, serif;
}
.container{
display: flex;
width: 100%;
height: 90vh;
flex-direction: column;
justify-content: center;
align-items: center;
}
button{
background-color: white;
width: 65px;
height: 65px;
margin: 2px 0.3px;
border: none;
outline: none;
border-radius: 3px;
font-size: 15px;
font-family: 'Open Sans', sans-serif;
}
button:hover{
cursor: pointer;
background-color: rgb(37, 35, 59);
color: #fff;
}
#dark-mode {
width: 274px;
height: 40px;
}
#clear{
background-color: rgb(255, 20, 20);
color: white;
}
#clear:hover{
background-color: rgb(37, 35, 59);
}
input[type="text"]{
width: 180px;
height: 65px;
padding-left: 25px;
border: none;
outline: none;
border-radius: 3px;
font-size: 15px;
font-family: 'Open Sans', sans-serif;
}
p {
text-align: center;
}
Here's the CSS for Dark Mode
/* CSS Reset */
*{
margin: 0;
padding: 0;
}
body{
background-color: #1d1e1f;
font-family: 'Open Sans', sans-serif;
font-weight: 500;
}
.row-1 {
margin-top: 15px;
}
h1{
color: orange;
font-family: Lunacy, serif;
color: #FFBB89;
font-size: ;
}[](url)
.container{
display: flex;
width: 100%;
height: 90vh;
flex-direction: column;
justify-content: center;
align-items: center;
}
button{
background-color: #444444;
color: white;
width: 65px;
height: 65px;
margin: 2px 0.3px;
border: none;
outline: none;
border-radius: 3px;
font-size: 15px;
font-family: 'Open Sans', sans-serif;
}
input{
color: white;
}
button:hover{
cursor: pointer;
background-color: rgb(160, 160, 160);
color: #fff;
}
#dark-mode {
width: 274px;
height: 40px;
}
#clear{
background-color: rgb(255, 40, 40);
color: white;
}
#clear:hover{
background-color: rgb(37, 36, 54);
}
input[type="text"]{
background-color: #444444;
color: white;
width: 180px;
height: 65px;
padding-left: 25px;
border: none;
outline: none;
border-radius: 3px;
font-size: 15px;
font-family: 'Open Sans', sans-serif;
}
p {
text-align: center;
color: white;
}
And finally, here's the JavaScript:
// Clear screen with C button.
function clearScreen() {
document.getElementById("result")
.value = "";
}
// Display updates in Result Input
function updScreen(val) {
var x = document.getElementById(
"result").value;
document.getElementById("result")
.value = x + val;
}
// Switch between Dark and Light Modes
function themeSwitcher() {
var dark = document.getElementById(
"dark-mode");
var th = document.getElementById(
"theme");
if (th.getAttribute('href') ==
'light.css') {
th.href = 'dark.css';
dark.innerHTML =
'Turn on Light Mode';
} else {
th.href = 'light.css';
dark.innerHTML =
'Turn on Dark mode';
}
}
That's it. Now we have a simple calculator with dark mode. Thanks for reading. Hope you like it! If you have any problems, you can definitely comment and ask me. I will definitely help you. If you like my post, please like the article Follow me 👇