Merge pull request Harshsngh07#229 from mahimasawant/master

switch to dark mode in JS
aditi2906 · Oct 8, 2020 · 571926b · 571926b
2 parents 0f1cf27 + 289087b
commit 571926b
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 0 deletions.
diff --git a/Language/Javascript/darkmode/darkmode.png b/Language/Javascript/darkmode/darkmode.png
diff --git a/Language/Javascript/darkmode/index.html b/Language/Javascript/darkmode/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>My Webpage</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+
+    <h1>My Webpage</h1>
+    <div id="welcome"></div>
+    <h4 id="time"></h4>
+
+    <button id="btn" onclick="dark()">switch to dark mode</button>
+
+    <script src="webpage.js"></script>
+  </body>
+</html>
diff --git a/Language/Javascript/darkmode/style.css b/Language/Javascript/darkmode/style.css
@@ -0,0 +1,14 @@
+body {
+  padding: 25px;
+  background-color: white;
+  color: black;
+  font-size: 25px;
+}
+
+.dark-mode {
+  background-color: black;
+  color: white;
+}
+#btn {
+  border-radius: 12px;
+}
diff --git a/Language/Javascript/darkmode/webpage.js b/Language/Javascript/darkmode/webpage.js
@@ -0,0 +1,22 @@
+var name = prompt("Please enter your name");
+
+if (name != null) {
+  document.getElementById("welcome").innerHTML =
+    "Hello " + name + "! Welcome to my Webpage";
+
+  const ctime = document.getElementById("time");
+
+  function clock() {
+    let date = new Date();
+    let time = date.toLocaleTimeString();
+    ctime.innerText = time;
+  }
+
+  // clock();
+
+  setInterval(clock, 1000);
+}
+function dark() {
+  var element = document.body;
+  element.classList.toggle("dark-mode");
+}