An Interest In:
Web News this Week
- April 25, 2024
- April 24, 2024
- April 23, 2024
- April 22, 2024
- April 21, 2024
- April 20, 2024
- April 19, 2024
Some of Our Sources
- Engadget
- Simplebits
- Creative Curio
- Line 25
- Stylized Web
- Wal You
- Freelance Switch
- Design Modo
- Web Resource Source
- TechPowerUp
Help Webnuz
Referal links:
July 8, 2020 10:36 am GMT
Original Link: https://dev.to/mohammadfarmaan/simple-calculator-with-dark-mode-545c
Simple Calculator with Dark Mode.
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:
Here's the markup:
<!DOCTYPE html><html><head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>Calculator</title> <meta name="description" content="" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" href="light.css" id="theme" /> <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap" rel="stylesheet" /></head><body> <center> <div class="container"> <h1>Calculator</h1> <div class="first-row"> <input type="text" name="result" class="result" id="result" value="" placeholder="Result" readonly/> <input type="button" value="C" onclick="clearScreen()" class="clear" /> </div> <div class="second-row"> <input type="button" value="1" onclick="liveScreen(1)" id="one" /> <input type="button" value="2" onclick="liveScreen(2)" id="two" /> <input type="button" value="3" id="three" onclick="liveScreen(3)" /> <input type="button" value="4" id="four" onclick="liveScreen(4)" /> </div> <div class="third-row"> <input type="button" value="5" id="five" onclick="liveScreen(5)" /> <input type="button" value="6" id="six" onclick="liveScreen(6)" /> <input type="button" value="7" id="seven" onclick="liveScreen(7)" /> <input type="button" value="8" id="eight" onclick="liveScreen(8)" /> </div> <div class="fourth-row"> <input type="button" value="9" id="nine" onclick="liveScreen(9)" /> <input type="button" value="0" id="zero" onclick="liveScreen(0)" /> <input type="button" value="+" onclick="liveScreen('+')" /> <input type="button" value="-" onclick="liveScreen('-')" /> </div> <div class="fifth-row"> <input type="button" value="=" onclick="result.value = eval(result.value)" /> <input type="button" value="/" onclick="liveScreen('/')" /> <input type="button" value="x" onclick="liveScreen('*')" /> <input type="button" value="." class="dot" onclick="liveScreen('.')" /> </div> <div class="bottom-buttons"> <button> <i class="fab fa-github"></i> <a href="https://github.com/Mohammad-Farmaan/JavaScript-Calculator">GitHub</a> </button> <button onclick="switchTheme()" id="dark-mode"> Dark Mode </button> </div> </div> </center> <script src="https://kit.fontawesome.com/f28b055962.js" crossorigin="anonymous"></script> <script src="script.js" async defer></script></body></html>Here's the CSS for Light Mode:
* { box-sizing: border-box; padding: 0; margin: 0; font-family: "Open Sans", sans-serif; font-weight: bold;}body { background-color: rgb(28, 231, 221); transition: 0.8s; -webkit-transition: 0.8s; -moz-transition: 0.8s; -ms-transition: 0.8s; -o-transition: 0.8s;}h1 { margin-top: 25vh; text-align: center; margin-bottom: 1.5%; color: #fff;}.container { width: 370px;}.result { width: 59.1%;}input { padding: 25px; color: rgb(17, 16, 16); font-size: 1em; cursor: pointer; width: 70px; background-color: #fff; border: none; outline: none; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px;}.first-row,.second-row,.third-row,.fourth-row,.fifth-row { margin-bottom: 3px;}input[type="text"] { background-color: rgb(255, 255, 255);}input[type="button"]:hover { background-color: rgb(37, 35, 59); color: #fff;}.clear { color: #fff; background-color: rgb(255, 42, 42);}button { border: none; background-color: rgb(41, 38, 38); padding: 10px; color: white; margin: 2px; cursor: pointer; outline: none; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px;}button a { text-decoration: none; color: #fff;}.bottom-buttons { float: left; margin-left: 10%; margin-top: 0.7%;}@media (max-width: 640px) { h1 { margin-top: 15vh; }}Here's the CSS for Dark Mode:
* { box-sizing: border-box; padding: 0; margin: 0; font-family: "Open Sans", sans-serif; font-weight: bold;}body { background-color: rgb(20, 19, 19); transition: 0.8s; -webkit-transition: 0.8s; -moz-transition: 0.8s; -ms-transition: 0.8s; -o-transition: 0.8s;}h1 { margin-top: 25vh; text-align: center; margin-bottom: 1.5%; color: #fff;}.container { width: 370px;}.result { width: 59.1%;}input { padding: 25px; color: rgb(255, 255, 255); font-size: 1em; cursor: pointer; width: 70px; background-color: rgb(47, 51, 50); border: none; outline: none; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px;}.first-row,.second-row,.third-row,.fourth-row,.fifth-row { margin-bottom: 3px;}input[type="text"] { background-color: rgb(47, 51, 50);}input[type="button"]:hover { background-color: rgb(160, 160, 160); color: #fff;}.clear { color: #fff; background-color: rgb(255, 42, 42);}button { border: none; background-color: rgb(39, 36, 36); padding: 10px; color: white; margin: 2px; cursor: pointer; outline: none; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px;}button a { text-decoration: none; color: #fff;}.bottom-buttons { float: left; margin-left: 10%; margin-top: 0.7%;}@media (max-width: 640px) { h1 { margin-top: 15vh; }}And finally, here's the JavaScript:
// Clears the screen on click of C button.function clearScreen() { document.getElementById("result").value = "";}// Displays the entered value on screen.function liveScreen(value) { document.getElementById("result").value += value;}// Swaps the style sheet in order to achieve dark mode.function switchTheme() { let darkMode = document.getElementById("dark-mode"); let theme = document.getElementById("theme"); if (theme.getAttribute("href") == "light.css") { theme.href = "dark.css"; darkMode.innerHTML = "Light Mode "; } else { theme.href = "light.css"; darkMode.innerHTML = "Dark Mode "; }}That's it. Now we have a simple calculator with dark mode. Thanks for reading. Hope you like it!
Link to live demo:
https://mohammad-farmaan.github.io/JavaScript-Calculator
Here's the link to repo:
Mohammad-Farmaan / JavaScript-Calculator
A simple calculator built using HTML, CSS and JavaScript which also has support for dark mode.
JavaScript-Calculator
A simple calculator built using HTML, CSS and JavaScript which also has support for dark mode. Feel free to check out the code and don't forget to star the repo.
Original Link: https://dev.to/mohammadfarmaan/simple-calculator-with-dark-mode-545c
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To