Hi Guys Wish you Happy Year 🎊.

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: ;   
}

.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 👇
Twitter

Quora

Blog

Simple Calculator with Dark Mode

Harshit Khaladkar🇮🇳

HTML

CSS

Here's the CSS for Light Mode

Here's the CSS for Dark Mode

Join Our Newsletter. No Spam, Only the good stuff.

Related