In this lab, I followed the instruction from JavaScript30 and recreated the Countdown Timer activity. First off, I made the HTML, CSS, and JavaScript files. Secondly, the <html>, <head>, <body>, <meta>, and <title> tags were already inserted in the HTML file. Thirdly, I typed in <link rel="stylesheet" type="text/css" href="Lab_43.css"> inside the <head> tags to link the CSS file with my HTML file. Fourthly, I typed in <script src="Lab_43.js" type="text/javascript"></script> inside the <body> tags which linked my JavaScript file with my HTML file. Inside the <body> tags, I typed the heading for the lab which has my name, date, and lab number with <div id="heading"><h1>Lab 43</h1><h2>Wei Jian Zhen</h2><h3>12/24/2019</h3></div>. Then, I typed in <div class="timer"></div> which is the div that encompasses the whole timer. Inside that div, I typed in <div class="timer__controls"></div> with multiple buttons and a form input inside to control the timer. There is also a <div class="display"></div> that has <p> and <h1> tags inside to display the time. For the CSS, I made sure the webpage was responsive the screen size changes by typing in html { width: 100%; height: auto;} body { background-color: #00FFA8; min-width: 100%; min-height: 100%;}. #heading {text-align: center; font-size: 16px;} for centering the heading. of the lab. #copyright {font-size: 16px; font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif"; font-weight: normal; padding-left: 1%; padding-right: 1%;} to set the copyright font a different font and space in between. .display__time-left {font-weight: 100; font-size: 20rem; margin: 0; color: white; text-shadow: 4px 4px 0 rgba(0,0,0,0.05);} to style the font and font color of the time text. .timer {display: flex;min-height: 100vh; flex-direction: column;} to style the whole timer itself that aligns its child elements into columns and a minimum height. .timer__controls {display: flex;} .timer__controls > * {flex: 1;}.timer__controls form {flex: 1; display: flex;} .timer__controls input {flex: 1;border: 0;padding: 2rem;} .timer__button { background: none; border: 0; cursor: pointer; color: white; font-size: 2rem; text-transform: uppercase; background: rgba(0,0,0,0.1); border-bottom: 3px solid rgba(0,0,0,0.2); border-right: 1px solid rgba(0,0,0,0.2); padding: 1rem; font-family: 'Inconsolata', monospace;} .timer__button:hover,
.timer__button:focus {background: rgba(0,0,0,0.2); outline: 0;} to style the child elements of the timer like background color or border. .display {flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;} .display__end-time {font-size: 4rem; color: white;} to make the timer text align properly. For the JavaScript, I put:
// JavaScript Document
let countdown;
const timerDisplay = document.querySelector('.display__time-left');
const endTime = document.querySelector('.display__end-time');
const buttons = document.querySelectorAll('[data-time]');
function timer(seconds) {
// clear any existing timers
clearInterval(countdown);
const now = Date.now();
const then = now + seconds * 1000;
displayTimeLeft(seconds);
displayEndTime(then);
countdown = setInterval(() => {
const secondsLeft = Math.round((then - Date.now()) / 1000);
// check if we should stop it!
if(secondsLeft < 0) {
clearInterval(countdown);
return;
}
// display it
displayTimeLeft(secondsLeft);
}, 1000);
}
function displayTimeLeft(seconds) {
const minutes = Math.floor(seconds / 60);
const remainderSeconds = seconds % 60;
const display = `${minutes}:${remainderSeconds < 10 ? '0' : '' }${remainderSeconds}`;
document.title = display;
timerDisplay.textContent = display;
}
function displayEndTime(timestamp) {
const end = new Date(timestamp);
const hour = end.getHours();
const adjustedHour = hour > 12 ? hour - 12 : hour;
const minutes = end.getMinutes();
endTime.textContent = `Be Back At ${adjustedHour}:${minutes < 10 ? '0' : ''}${minutes}`;
}
function startTimer() {
const seconds = parseInt(this.dataset.time);
timer(seconds);
}
buttons.forEach(button => button.addEventListener('click', startTimer));
document.customForm.addEventListener('submit', function(e) {
e.preventDefault();
const mins = this.minutes.value;
console.log(mins);
timer(mins * 60);
this.reset();
});
This makes the timer get the time, continue forward in timer, animate the time, and make the timer functional.
Lastly, I made the copyright notice with <p> and <div> tags. Knowing how to build a countdown timer is useful for a web designer in making his or her own websites with time mechanics.
Link:
http://techteach.us/Web2020/ZWeiJian/WCP/Labs/Lab_43/Lab_43.html
No comments:
Post a Comment