Follow the example below , write an html file and a JavaScript file to show the
ID: 3885250 • Letter: F
Question
Follow the example below, write an html file and a JavaScript file to show the due date of a book checked out from a library. The html file should contain necessary elements to work with the JavaScript file described as follow. The JavaScript file needs to meet the following requirements:
1.It needs to have an object called “book” that have attributes called name, title, author and price. The values of these attributes are then written to the html file using JavaScript statements.
2. The book (as an element in your html file) should be due in TWO weeks from the time it is check ed out (the time when the html page is visited). The book due date is written to the html file using JavaScript statements.
Html Example
Javascript Example
(function() {
// PART ONE: CREATE HOTEL OBJECT AND WRITE OUT THE OFFER DETAILS
// Create a hotel object using object literal syntax
var hotel = {
name: 'Park',
roomRate: 240, // Amount in dollars
discount: 15, // Percentage discount
offerPrice: function() {
var offerRate = this.roomRate * ((100 - this.discount) / 100);
return offerRate;
}
};
// Write out the hotel name, standard rate, and the special rate
var hotelName, roomRate, specialRate; // Declare variables
hotelName = document.getElementById('hotelName'); // Get elements
roomRate = document.getElementById('roomRate');
specialRate = document.getElementById('specialRate');
hotelName.textContent = hotel.name; // Write hotel name
roomRate.textContent = '$' + hotel.roomRate.toFixed(2); // Write room rate
specialRate.textContent = '$' + hotel.offerPrice(); // Write offer price
// PART TWO: CALCULATE AND WRITE OUT THE EXPIRY DETAILS FOR THE OFFER
var expiryMsg; // Message displayed to users
var today; // Today's date
var elEnds; // The element that shows the message about the offer ending
function offerExpires(today) {
// Declare variables within the function for local scope
var weekFromToday, day, date, month, year, dayNames, monthNames;
// Add 7 days time (added in milliseconds)
weekFromToday = new Date(today.getTime() + 7 * 24 * 60 * 60 * 1000);
// Create arrays to hold the names of days / months
dayNames = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
// Collect the parts of the date to show on the page
day = dayNames[weekFromToday.getDay()];
date = weekFromToday.getDate();
month = monthNames[weekFromToday.getMonth()];
year = weekFromToday.getFullYear();
// Create the message
expiryMsg = 'Offer expires next ';
expiryMsg += day + '
(' + date + ' ' + month + ' ' + year + ')';
return expiryMsg;
}
today = new Date(); // Put today's date in variable
elEnds = document.getElementById('offerEnds'); // Get the offerEnds element
elEnds.innerHTML = offerExpires(today); // Add the expiry message
// Finish the immediately invoked function expression
}());
Explanation / Answer
book.html
<html>
<head>
</head>
<body>
<div>Book Details</div></br>
<div>
Name: <div id="name"></div></br>
Title: <div id="title"></div></br>
Author: <div id="author"></div></br>
Price<div id="price"></div></br>
<div>
<script type="text/javascript" src="book.js"></script>
</body>
</html>
book.js
var book= {
name : "Hui Hui",
title : "The Book",
author : "Tom Kaytes" ,
price : "$20"
};
//Setting values to HTML
document.getElementById('name').innerHTML = book.name;
document.getElementById('title').innerHTML = book.title;
document.getElementById('author').innerHTML = book.author;
document.getElementById('price').innerHTML = book.price ;