Skip to content

Added script to detect time of day #6

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
MarkCBJSS merged 1 commit into from
Jun 30, 2020
Merged

Added script to detect time of day #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
1 change: 1 addition & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ If there's anything that you think could be improved due to misunderstanding, th
1. Date and Time > myDayFunction.js
2. Date and Time > myYearAndDate.js
3. VAT Calculator > vat-script.js
4. Time of Day > timeOfDay.js

# Courses and Sources
**[https://www.sololearn.com/Course/JavaScript/](https://www.sololearn.com/Course/JavaScript/)**
Expand Down
14 changes: 14 additions & 0 deletions TimeOfDay/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<html>
<head>
<title>Welcome depending on time of day</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
<div class="output"><p>Output Area</p></div>
<button type="button">Click Me to see the Time of Day Message</button>

<script src="timeOfDay.js"></script>

</body>
</html>
1 change: 1 addition & 0 deletions TimeOfDay/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
body { padding:0; margin:10; vertical-align:top; background:#ffffff; font-family:Tahoma;}
27 changes: 27 additions & 0 deletions TimeOfDay/timeOfDay.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@

const button = document.querySelector("button");
const output = document.querySelector(".output");

button.addEventListener("click", showOutput);

function showOutput(){
const date = new Date();
let cur = date.getHours();
let message;

if (cur > 17 ) {
message = "Good evening";
output.style.backgroundColor = "black";
} else if (cur > 12) {
message = "Good Afternoon";
output.style.backgroundColor = "yellow";
} else if (cur > 0) {
message = "Good Morning";
output.style.backgroundColor = "blue";
} else {
message = "Something is wrong";
output.style.backgroundColor = "red";
}

output.innerHTML = `<p>${message}</p>`;
}