HELP! Attached is a picture of how output should look. Using JavaScript, jQuery,
ID: 3595415 • Letter: H
Question
HELP! Attached is a picture of how output should look.
Using JavaScript, jQuery, and cookies
Overview
Create a website that allows the user to register an event using a form. Once the event has been registered, the website should display a countdown timer for the event (the form should no longer be displayed). If the user returns to the website any time before the event the countdown timer should be displayed. Once the day of the event arrives an animated message should be displayed in place of the countdown timer. The animated message should display for 2 days after the date of the event. After those 2 days, the website should return to displaying the form in order to allow the user to register a new event. Requirements
You must follow best coding practices for HTML, CSS, JavaScript, and jQuery
Code must be documented.
Your countdown timer must display the first name and event name entered in the form.
Your “event has arrived” message must be animated.
Assumptions/Limitations for our Implementation
You can assume the event occurs at 12:00:00am on the day of the event.
There can be only one event registered at a time.
You can assume the user enters all form information correctly.
Kristin's Countdown to Fall Break! 2 Days 14 Hours 44 Minutes 15 Seconds Your event has arrived!Explanation / Answer
<!DOCTYPE HTML>
<html>
<head>
<style>
p {
text-align: center;
font-size:40px;
color: white;
background-color: black;
}
</style>
</head>
<body>
<script>
function showInput() {
document.getElementById('display').innerHTML =
document.getElementById("user_input").value;
}
</script>
<form>
<label><b>Enter first your name</b></label>
<input type="text" name="message" id="user_input">
</form>
<input type="submit"><br/>
<p><span id='display'></span></p>
<p id="demo"></p>
<script>
// Set the date we're counting down to
var countDownDate = new Date("Oct 19, 2017 04:50:00").getTime();
// Update the count down every 1 second
var x = setInterval(function() {
// Get todays date and time
var now = new Date().getTime();
// Find the distance between now an the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Output the result in an element with id="demo"
document.getElementById("demo").innerHTML = days + " Days " + hours + " Hours "
+ minutes + " Minutes " + seconds + " Seconds";
// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "Your event has arrived!";
}
}, 1000);
</script>
</body>
</html>
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.