Table of contents
- HTML
- CSS
- JavaScript
- 1. how to return values from JavaScript to HTML elements with ID name?
- 2. How to return values from JavaScript to HTML elements with class name?
- 3. How to get Current date in JavaScript?
- 4. How to pass desired date JavaScript?
- 5. How to countdown method / function every second in JavaScript?
- how to stop the function Interval?
- Conclusion
- My Code:
Today's day 12 Goal is to Build and learn by creating a Countdown timer in Html & CSS from YT Tutorial.
HTML
1. How to get HTML emmet snippet code?
- Type
!and hittabon keyboard.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
2. How to give name of your project open in VS code?
- Look for the following code in the html page and change it to your desired title.
<title>yourprojectname</title>
3. How to include link CSS style sheet in HTML page?
- Write the following code.
<link rel="stylesheet" href="style.css">
4. How to include link JS file in HTML page?
- Write the following code.
<script src="/script.js"></script>
- Include script tag above the closing body tag for faster loading application.
5.
CSS
-
JavaScript
Following 2 points I have observed while I'm learning JavaScript which are important.
1. how to return values from JavaScript to HTML elements with ID name?
- Write the following code.
document.getElementsByClassName("head").innerHTML="lol";
2. How to return values from JavaScript to HTML elements with class name?
- As you can see the many number of classes with identical name, with
[0]in JavaScript will return to the first P tag which is having class demo.
<p class="demo">0</p>
<p class="pool">hi</p>
<p class="demo">1</p>
<p class="demo">2</p>
<script>
document.getElementsByClassName("demo")[0].innerHTML = "lol";
</script>
3. How to get Current date in JavaScript?
- Write the following code.
const today = new Date();
4. How to pass desired date JavaScript?
- Write the following code.
const birthday = new Date('2/1/2022');
The date format in us format.
subtracting dates in returns Milli seconds.
5. How to countdown method / function every second in JavaScript?
- Write the following code.
X =setInterval(countdown,second);
how to stop the function Interval?
- Write the following code.
clearInterval(x);
Conclusion
I have Discussed and practiced the following,
HTML Emmet snippet code.
Giving title name your project.
Include link CSS file in HTML page.
Include link JS file in HTML page.
Return values from JavaScript to HTML elements with ID name.
Return values from JavaScript to HTML elements with class name.
Get Current date in JavaScript.
Pass desired date JavaScript.
Countdown method / function every second in JavaScript.
Stop the function Interval.
My Code:
Source: YT
Author: Dheeraj.y