diff --git a/README.md b/README.md index 1c2ae0e..94953eb 100644 --- a/README.md +++ b/README.md @@ -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/)** diff --git a/TimeOfDay/index.html b/TimeOfDay/index.html new file mode 100644 index 0000000..199f4b8 --- /dev/null +++ b/TimeOfDay/index.html @@ -0,0 +1,14 @@ + + + Welcome depending on time of day + + + + +

Output Area

+ + + + + + \ No newline at end of file diff --git a/TimeOfDay/style.css b/TimeOfDay/style.css new file mode 100644 index 0000000..acc1896 --- /dev/null +++ b/TimeOfDay/style.css @@ -0,0 +1 @@ +body { padding:0; margin:10; vertical-align:top; background:#ffffff; font-family:Tahoma;} \ No newline at end of file diff --git a/TimeOfDay/timeOfDay.js b/TimeOfDay/timeOfDay.js new file mode 100644 index 0000000..84ace90 --- /dev/null +++ b/TimeOfDay/timeOfDay.js @@ -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 = `

${message}

`; +} \ No newline at end of file