Build a Modern Dark and Light Mode Theme UI Arithmetic Calculator in HTML5 CSS3 and Javascript Full Project For Beginners

Build a Modern Dark and Light Mode Theme UI Arithmetic Calculator in HTML5 CSS3 and Javascript Full Project For Beginners

 

Welcome folks today in this blog post we will be building a dark and light mode calculator in html5 css3 and javascript. All the full source code of the application is shown below.

 

 

Get Started

 

 

In order to get started you need to make  an index.html file and copy paste the following code

 

index.html

 

<!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>
  <div class="wrapper">
    <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="+" onclick="liveScreen('+')" />
      </div>
      <div class="third-row">
        <input type="button" value="4" id="four" onclick="liveScreen(4)" />
        <input type="button" value="5" id="five" onclick="liveScreen(5)" />
        <input type="button" value="6" id="six" onclick="liveScreen(6)" />
        <input type="button" value="-" onclick="liveScreen('-')" />
      </div>
      <div class="fourth-row">
        <input type="button" value="7" id="seven" onclick="liveScreen(7)" />
        <input type="button" value="8" id="eight" onclick="liveScreen(8)" />
        <input type="button" value="9" id="nine" onclick="liveScreen(9)" />
        <input type="button" value="x" onclick="liveScreen('*')" />
      </div>
      <div class="fifth-row">
        <input type="button" value="/" onclick="liveScreen('/')" />

        <input type="button" value="0" id="zero" onclick="liveScreen(0)" />
        <input type="button" value="." class="dot" onclick="liveScreen('.')" />
        <input type="button" value="=" onclick="result.value = eval(result.value)" />
      </div>
      <div class="bottom-buttons">
        <a href="https://github.com/zxcodes/JavaScript-Calculator"><i class="fab fa-github"></i>
          Source</a>
        <button onclick="switchTheme()" id="dark-mode">
          Dark Mode 🌙
        </button>
      </div>
    </div>
  </div>
  <!-- Fontawesome Script -->
  <script src="https://kit.fontawesome.com/f28b055962.js" crossorigin="anonymous"></script>
  <script src="script.js" sync defer></script>
</body>

</html>

 

See also  Node.js jsPDF Wrapper to Generate PDF Documents From HTML5 Template Using jspdfmake Library in Javascript Full Project For Beginners

 

And now make light theme css file which is light.css and copy paste the following code

 

light.css

 

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  font-family: "Open Sans", sans-serif;
}
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;
}

.wrapper {
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
h1 {
  text-align: center;
  margin-bottom: 1.5%;
  color: #fff;
}
.container {
  width: 300px;
}
.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;
}

.first-row,
.second-row,
.third-row,
.fourth-row,
.fifth-row {
  margin-bottom: 3px;
}
input[type="text"] {
  background-color: rgb(255, 255, 255);
  width: 218px;
}
input[type="button"]:hover {
  background-color: rgb(37, 35, 59);
  color: #fff;
}
.clear {
  color: #fff;
  background-color: rgb(255, 25, 25);
}
button {
  border: none;
  background-color: rgb(41, 38, 38);
  padding: 8px;
  color: white;
  margin: 2px;
  cursor: pointer;
  outline: none;
  border-radius: 4px;

  font-size: 0.8em;
  font-weight: 200;
}

a {
  text-decoration: none;
  border: none;
  background-color: rgb(41, 38, 38);
  padding: 8px;
  color: white;
  margin: 2px;
  cursor: pointer;
  outline: none;
  border-radius: 4px;

  font-size: 0.8em;
  font-weight: 200;
}
.bottom-buttons {
  display: flex;
  margin-left: -2.3px;
}
.fab {
  font-size: 1.1em;
}

 

 

And now make a dark theme file called dark.css and copy paste the below code

 

dark.css

 

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  font-family: "Open Sans", sans-serif;
}

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;
}
.wrapper {
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

h1 {
  text-align: center;
  margin-bottom: 1.5%;
  color: #fff;
}
.container {
  width: 300px;
}
.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;
}

.first-row,
.second-row,
.third-row,
.fourth-row,
.fifth-row {
  margin-bottom: 3px;
}
input[type="text"] {
  background-color: rgb(47, 51, 50);
  width: 218px;
}
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: 8px;
  color: white;
  margin: 2px;
  cursor: pointer;
  outline: none;
  border-radius: 4px;
  font-size: 0.8em;
  font-weight: 200;
}

a {
  text-decoration: none;
  color: #fff;
  border: none;
  background-color: rgb(39, 36, 36);
  padding: 8px;
  color: white;
  margin: 2px;
  border-radius: 4px;
  font-size: 0.8em;
  font-weight: 200;
}
.bottom-buttons {
  display: flex;
  margin-left: -2.3px;
}
.fab {
  font-size: 1.1em;
}

 

See also  Build a Voice or Sound Recorder Which Downloads Recording as OGA File in Browser Using Javascript Full Project For Beginners

 

And now make a script.js file for the javascript code and copy paste the below code

 

script.js

 

// Clears the screen on click of C button.
function clearScreen() {
  document.getElementById("result").value = "";
}
// Displays 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 🌙";
  }
}

 

 

And now if you open index.html file inside the browser you will see the below output

 

Leave a Reply