Skip to content
This repository has been archived by the owner on Oct 1, 2021. It is now read-only.

switch to dark mode in JS #229

Merged
merged 1 commit into from
Oct 8, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added Language/Javascript/darkmode/darkmode.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
18 changes: 18 additions & 0 deletions Language/Javascript/darkmode/index.html
Original file line number Diff line number Diff line change
@@ -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>
14 changes: 14 additions & 0 deletions Language/Javascript/darkmode/style.css
Original file line number Diff line number Diff line change
@@ -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;
}
22 changes: 22 additions & 0 deletions Language/Javascript/darkmode/webpage.js
Original file line number Diff line number Diff line change
@@ -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");
}