Project based Learning using HTML CSS JS - Day 13

Project based Learning using HTML CSS JS - Day 13

dheerajy's photo
dheerajy
·

1 min read

Table of contents

Today's day 13 Goal is to Build and learn by creating a Countdown timer in Html & CSS from YT Tutorial.

HTML

-

CSS

1. how to give background colour property in CSS?

  1. Write the following code.
background-color: coral;

JavaScript

1. how to get time left in days,minutes,seconds in JavaScript?

  1. Write the following code.
const days = Math.floor(timespan/day);
const hours = Math.floor((timespan%day)/hour);
const minutes =Math.floor((timespan%hour)/minute);
const seconds = Math.floor((timespan%minute)/second);

how to return data from JavaScript to html element?

  1. Write the following code.
timeleft.innerHTML= days+'days '+hours+'hours '+minutes+'minutes '+seconds+'seconds';
}

Conclusion

I have Discussed and practiced the following,

  1. Background colour property in CSS

  2. Time left in days,minutes,seconds in JavaScript.

  3. Return data from JavaScript to html element.

I Have successfully built Birthday countdown timer in 2 days by learning in open source using stack HTML, CSS, JavaScript.

My Code:

day 13 countdown.png

Source: YT

Author: Dheeraj.y

projectbasedLearningHTML5CSS3JavaScript100DaysOfCode