Sources Contact Advanced Search Tutorials

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

January 5, 2022 11:00 am GMT

Simple Calculator with Dark Mode

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 Inputfunction updScreen(val) { var x = document.getElementById(  "result").value; document.getElementById("result")  .value = x + val;}// Switch between Dark and Light Modesfunction 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

Original Link: https://dev.to/harshitkhaladk1/simple-calculator-with-dark-mode-5gpp

Share this article:

View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To