This is html/CSS/JavaScript. This website will change based on the system time o
ID: 3815925 • Letter: T
Question
This is html/CSS/JavaScript. This website will change based on the system time of the machine running. If the user views the page between 7am to 7pm, the page should have CSS and look based around day. The facts about that country should be day oriented. If the page is viewed outside of 7am to 7pm, the facts and CSS theme should change to be night oriented. The majority of the page's look and information should change based on being day or night. The page must be able to be input as military time(ie 1 is 1 am and 13 is 1pm).
Explanation / Answer
Below is the code:
<!DOCTYPE html>
<html>
<head>
<title>Time bound HTML</title>
<script type="text/JavaScript">
function changeCSS() {
var currentTime = new Date().getHours();
var givenTime = document.getElementById("startTime").value;
if(givenTime!= ""){
currentTime = givenTime;
}
if (7 <= currentTime && currentTime < 19) {
document.body.className = "sun";
}
else {
// document.write("<link href="sunny.css" rel='stylesheet' type='text/css' />");
document.body.className = "night";
}
}
</script>
<style>
.sun {
background-image: url("sunny-day.jpg");
}
.night {
background-image: url("night.jpg");
}
.main{
width:500px;
height:auto;
background:#96bbf7;
margin:50px auto;
text-align:center;
padding: 25px 0;
}
.main input{
margin:25px 0;
}
</style>
<!--<link href="night.css" rel="stylesheet" type="text/css" />-->
</head>
<body>
<div class="main">
<span> Enter the time of the day, you want to view the HTML page at: </span></br>
<span>Day Time: <input type="text" id="startTime"></br>
<input type="submit" value="Change The Page">
</div>
</body>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.