JavaScript/CSS/HTML add codes to achieve highlight TimeZone CITY label(s) Given
ID: 3751982 • Letter: J
Question
JavaScript/CSS/HTML add codes to achieve highlight TimeZone CITY label(s)
Given existing codes, add new codes to achieve auto hightlight CITY label(s) with background RED color, when the local time of that city or cities is between 900-1800.
<script language="JavaScript">
<!--
function worldClock(zone, region){
var dst = 0
var time = new Date()
var gmtMS = time.getTime() + (time.getTimezoneOffset() * 60000)
var gmtTime = new Date(gmtMS)
var day = gmtTime.getDate()
var month = gmtTime.getMonth()
var year = gmtTime.getYear()
if(year < 1000){
year += 1900
}
var monthArray = new Array("January", "February", "March", "April", "May", "June", "July", "August",
"September", "October", "November", "December")
var monthDays = new Array("31", "28", "31", "30", "31", "30", "31", "31", "30", "31", "30", "31")
if (year%4 == 0){
monthDays = new Array("31", "29", "31", "30", "31", "30", "31", "31", "30", "31", "30", "31")
}
if(year%100 == 0 && year%400 != 0){
monthDays = new Array("31", "28", "31", "30", "31", "30", "31", "31", "30", "31", "30", "31")
}
var hr = gmtTime.getHours() + zone
var min = gmtTime.getMinutes()
var sec = gmtTime.getSeconds()
if (hr >= 24){
hr = hr-24
day -= -1
}
if (hr < 0){
hr -= -24
day -= 1
}
if (hr < 10){
hr = " " + hr
}
if (min < 10){
min = "0" + min
}
if (sec < 10){
sec = "0" + sec
}
if (day <= 0){
if (month == 0){
month = 11
year -= 1
}
else{
month = month -1
}
day = monthDays[month]
}
if(day > monthDays[month]){
day = 1
if(month == 11){
month = 0
year -= -1
}
else{
month -= -1
}
}
if (dst == 1){
hr -= -1
if (hr >= 24){
hr = hr-24
day -= -1
}
if (hr < 10){
hr = " " + hr
}
if(day > monthDays[month]){
day = 1
if(month == 11){
month = 0
year -= -1
}
else{
month -= -1
}
}
return monthArray[month] + " " + day + ", " + year + "<br>" + hr + ":" + min + ":" + sec
}
else{
return monthArray[month] + " " + day + ", " + year + "<br>" + hr + ":" + min + ":" + sec
}
}
function worldClockZone(){
document.getElementById("UTC").innerHTML = worldClock(0, "Greenwich")
document.getElementById("CITY2").innerHTML = worldClock(+10, "Greenwich")
document.getElementById("CITY1").innerHTML = worldClock(-5, "Greenwich")
document.getElementById("CITY3").innerHTML = worldClock(+1, "Greenwich")
setTimeout("worldClockZone()", 1000)
}
window.onload=worldClockZone;
//-->
</script>
<style type="text/css">
.hrow {
vertical-align: middle;
width: 100%;
}
.hrow td {
padding: 5px;
width: 140px;
background-color: #D2D2D2;
border: 2px solid #D2D2D2;
border-collapse: collapse;
font-family:arial;
color: #0A0A0A;
text-align: center;
font-weight: normal;
}
.hrow td:hover {
background-color: #B2FF4B;
color: #222222;
border: 2px solid #B2FF4B;
}
.hrow td:hover h3 {
color: #0A0A0A;
}
h3 {
text-transform: uppercase;
display: inline;
color: #0A0A0A;
font-family: arial;
}
</style>
<table>
<tr class="hrow">
<td><h3>CITY1</h3></br><span id="CITY1"></span></td>
<td><h3>UTC</h3></br><span id="UTC"></span></td>
<td><h3>CITY2</h3></br><span id="CITY2"></span></td>
<td><h3>CITY3</h3></br><span id="CITY3"></span></td>
</tr>
</table>
Explanation / Answer
## Get the code below, I Created a function called //changeLabelColor() which modify label of city
## when //local time //is between 9:00 & 18:00
## Highlighted the code for changeLabelColor() please look into that deeply
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<script language="JavaScript">
function worldClock(zone, region){
var dst = 0
var time = new Date()
var gmtMS = time.getTime() + (time.getTimezoneOffset() * 60000)
var gmtTime = new Date(gmtMS)
var day = gmtTime.getDate()
var month = gmtTime.getMonth()
var year = gmtTime.getYear()
if(year < 1000){
year += 1900
}
var monthArray = new Array("January", "February", "March", "April", "May", "June", "July", "August",
"September", "October", "November", "December")
var monthDays = new Array("31", "28", "31", "30", "31", "30", "31", "31", "30", "31", "30", "31")
if (year%4 == 0){
monthDays = new Array("31", "29", "31", "30", "31", "30", "31", "31", "30", "31", "30", "31")
}
if(year%100 == 0 && year%400 != 0){
monthDays = new Array("31", "28", "31", "30", "31", "30", "31", "31", "30", "31", "30", "31")
}
var hr = gmtTime.getHours() + zone
var min = gmtTime.getMinutes()
var sec = gmtTime.getSeconds()
if (hr >= 24){
hr = hr-24
day -= -1
}
if (hr < 0){
hr -= -24
day -= 1
}
if (hr < 10){
hr = " " + hr
}
if (min < 10){
min = "0" + min
}
if (sec < 10){
sec = "0" + sec
}
if (day <= 0){
if (month == 0){
month = 11
year -= 1
}
else{
month = month -1
}
day = monthDays[month]
}
if(day > monthDays[month]){
day = 1
if(month == 11){
month = 0
year -= -1
}
else{
month -= -1
}
}
if (dst == 1){
hr -= -1
if (hr >= 24){
hr = hr-24
day -= -1
}
if (hr < 10){
hr = " " + hr
}
if(day > monthDays[month]){
day = 1
if(month == 11){
month = 0
year -= -1
}
else{
month -= -1
}
}
return monthArray[month] + " " + day + ", " + year + "<br>" + hr + ":" + min + ":" + sec
}
else{
return monthArray[month] + " " + day + ", " + year + "<br>" + hr + ":" + min + ":" + sec
}
}
function worldClockZone(){
document.getElementById("UTC").innerHTML = worldClock(0, "Greenwich")
document.getElementById("CITY2").innerHTML = worldClock(+10, "Greenwich")
document.getElementById("CITY1").innerHTML = worldClock(-5, "Greenwich")
document.getElementById("CITY3").innerHTML = worldClock(+1, "Greenwich")
changeLabelColor();
setTimeout("worldClockZone()", 1000)
}
window.onload=worldClockZone;
/**
* This function called every second, check all times of city
* and update color if time is between 9:00 and 18:00
* */
function changeLabelColor()
{
// Get All HTML Elements
let UTC = document.getElementById("UTC").innerText;
let CITY2= document.getElementById("CITY2").innerText;
let CITY1= document.getElementById("CITY1").innerText;
let CITY3 = document.getElementById("CITY3").innerText;
// Creating DATE() object and passing UTC value
let UTCDate = new Date(UTC);
let utcHours= UTCDate.getHours(); // Get current hours of UTC time
let utcTime= UTCDate.getMinutes(); // Get current minutes of UTC time
// Check the condition hour between 9 and 18
if(utcHours>=9 && utcHours<=18)
{
// update color with RED
document.getElementById('UTCLable').style.backgroundColor='#FF0000';
// Check minutes when hour is 18
if(utcHours==18 && utcTime>0)
{
// update with old color if not
document.getElementById('UTCLable').style.backgroundColor='#D2D2D2';
}
}else{
// update with old color if not
document.getElementById('UTCLable').style.backgroundColor='#D2D2D2';
}
// Creating DATE() object and passing CITY1 value
let CITY1Date = new Date(CITY1);
let CITY1Hours= CITY1Date.getHours(); //get Hours
let CITY1Time= CITY1Date.getMinutes();//get minutes
if(CITY1Hours>=9 && CITY1Hours<=18)
{
//RED
document.getElementById('CITY1Lable').style.backgroundColor='#FF0000';
if(CITY1Hours==18 && CITY1Time>0)
{
// DEFAULT COLOR
document.getElementById('CITY1Lable').style.backgroundColor='#D2D2D2';
}
}else{
// DEFAULT COLOR
document.getElementById('CITY1Lable').style.backgroundColor='#D2D2D2';
}
// Creating DATE() object and passing CITY2 value
let CITY2Date = new Date(CITY2);
let CITY2Hours= CITY2Date.getHours();//Hours
let CITY2Time= CITY2Date.getMinutes();// minutes
if(CITY2Hours>=9 && CITY2Hours<=18)
{
//RED
document.getElementById('CITY2Lable').style.backgroundColor='#FF0000';
if(CITY2Hours==18 && CITY2Time>0)
{
//Default color
document.getElementById('CITY2Lable').style.backgroundColor='#D2D2D2';
}
}else{
//Default color
document.getElementById('CITY2Lable').style.backgroundColor='#D2D2D2';
}
// Creating DATE() object and passing CITY3 value
let CITY3Date = new Date(CITY3);
let CITY3Hours= CITY3Date.getHours();//Hours
let CITY3Time= CITY3Date.getMinutes();//Minutes
if(CITY3Hours>=9 && CITY3Hours<=18)
{
//RED
document.getElementById('CITY3Lable').style.backgroundColor='#FF0000';
if(CITY3Hours==18 && CITY3Time>0)
{
//DEFAULT Color
document.getElementById('CITY3Lable').style.backgroundColor='#D2D2D2';
}
}else{
//DEFAULT Color
document.getElementById('CITY3Lable').style.backgroundColor='#D2D2D2';
}
}
//-->
</script>
<style type="text/css">
.hrow {
vertical-align: middle;
width: 100%;
}
.hrow td {
padding: 5px;
width: 140px;
background-color: #D2D2D2;
border: 2px solid #D2D2D2;
border-collapse: collapse;
font-family: arial;
color: #0A0A0A;
text-align: center;
font-weight: normal;
}
.hrow td:hover {
background-color: #B2FF4B;
color: #222222;
border: 2px solid #B2FF4B;
}
.hrow td:hover h3 {
color: #0A0A0A;
}
h3 {
text-transform: uppercase;
display: inline;
color: #0A0A0A;
font-family: arial;
}
</style>
<body>
<table>
<tr class="hrow">
<td>
<h3 id="CITY1Lable">CITY1</h3></br><span id="CITY1"></span>
</td>
<td>
<h3 id="UTCLable">UTC</h3></br><span id="UTC"></span>
</td>
<td>
<h3 id="CITY2Lable">CITY2</h3></br><span id="CITY2"></span>
</td>
<td>
<h3 id="CITY3Lable">CITY3</h3></br><span id="CITY3"></span>
</td>
</tr>
</table>
</body>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.