Hello my name is anno im a software engineer. here’s to share my just for fun holiday project build with angular 9 it’s realtime clock application.
it’s easy and fun and suitble for beginner to learn basicSinge page application
if you have zero experience just checkout here :
https://angular.io/
and install angular cli here :
https://cli.angular.io/
let’s start code : at UI Project we can consider we have some UI HTML elements :
1. Clock Time
2. Greetings Text
3. Link Text
4. Background
and also functions to update Clocktime and change Greetings Text Based on Clocktime Hours
1. here’s function to update Clocktime every one second
time // global variable for string interpolation on html
getCurrentDate() {
setInterval(() => {
this.time = new Date(); //set time variable with current date }, 1000); // set it every one seconds}
2. function to decide greetings text :
we decide hours as parameter to determine greetings text value either it’s morning , afternoon and etc
hours;
msg;
link;
decide() { this.hours = new Date().getHours(); console.log(“this.hours”, this.hours)if (this.hours < 10) { this.msg = “Good Morning” this.link = “wwww.google.com" console.log(“selamat Pagi”) } else if (this.hours < 16) { this.msg = “Good Afternoon” this.link = “wwww.tokopedia.com" } else if (this.hours < 19) { this.msg = “Good Evening” } else if (this.hours < 24) { this.msg = “Good Night” this.link = “wwww.sprout.co.id" console.log(“selamat malam”) } else if (this.hours < 6) { this.msg = “Sleep lah” this.link = “www.mangabat.com" } }
and finally interpolate it to html template
and pipe a variable time with date pipe as you like , you can choose time format here https://angular.io/api/common/DatePipe or custom it on your own with moment.js https://momentjs.com/
3. Link Text
link text can contain static from link variable or you can use free firebase db to store link realtime and interpolate it with {{ }} to html for more dynamic
4. Background
for background build it as you like and i suggest you , to use ngIf based on hours to make background more intelligent and able to detect whether morning or afternoon
<div *ngIf="hours == 18">
</div>checkout my github contain source code of this app : https://github.com/Anderies/clock-greets
if you have any question about angular or project just send me message i’d love to answer it ✌️
