Develop the following application, use the following HTML elements to get started with. You will get the same code on starter folder. Apply all the styles and functionality using JavaScript only.
The year color is changing every 1 second
The date and time background color is changing every on seconds
Completed challenge has background green
Ongoing challenge has background yellow
Coming challenges have background red
<!--
Develop the following application, use the following HTML elements to get started with. You will get the same code on starter folder. Apply all the styles and functionality using JavaScript only.
The year color is changing every 1 second
The date and time background color is changing every on seconds
Completed challenge has background green
Ongoing challenge has background yellow
Coming challenges have background red
-->
<!DOCTYPE html>
<html>
<head>
<title>JavaScript for Everyone:DOM</title>
</head>
<body>
<div class="wrapper">
<h1>Asabeneh Yetayeh challenges in <span class="year">2020</span></h1>
<h2>30DaysOfJavaScript Challenge</h2>
<h4 id="dte"></h4>
<ul>
<li class="done">30DaysOfPython Challenge Done</li>
<li class="Ongoing">30DaysOfJavaScript Challenge Ongoing</li>
<li class="coming">30DaysOfReact Challenge Coming</li>
<li class="coming">30DaysOfFullStack Challenge Coming</li>
<li class="coming">30DaysOfDataAnalysis Challenge Coming</li>
<li class="coming">30DaysOfReactNative Challenge Coming</li>
<li class="coming">30DaysOfMachineLearning Challenge Coming</li>
</ul>
</div>
<script>
const d=new Date();
const month=["January","February","March","April","May","June","July","August","September","October","November","December"]
var m=month[d.getMonth()];
var day=d.getDate();
var y=d.getFullYear();
var h=d.getHours();
var min=d.getMinutes();
var sec=d.getSeconds();
//upgating seconds
setInterval(function(){
if(sec>=59)sec=0
document.getElementById('dte').innerHTML=` May ${day} , ${y} ${h}:${min}:${sec++}`;
},1000);
(document.getElementById('dte')).style.width='240px';
(document.getElementById('dte')).style.margin='auto';
//text center alignment
const a=document.querySelector('.wrapper')
a.style.textAlign = 'center';
//increase 2020 font
const yFS=document.querySelector('.year');
yFS.style.fontSize = '70px';
//changing 2020 color and date background
setInterval(function yearColor(){
const color=["red","blue","green","orange","yellow","indigo","crimson","brown"];
n=Math.round(Math.random()*(color.length));
m=Math.round(Math.random()*(color.length));
// console.log(n)
const b=document.querySelector('.year');
//console.log(b)
b.style.color=color[n];
const x=document.getElementById('dte');
x.style.backgroundColor=color[m];
x.style.padding='10px';
},1000);
// console.log(a)
//formatting lists
//document.getElementsByTagName('ul').style.listStyle ="square inside"
document.querySelectorAll('li').forEach((ele)=>{
ele.style.margin='auto';
ele.style.width='400px';
ele.style.textAlign='left';
ele.style.listStyle='none';
ele.style.padding='10px';
ele.style.marginTop='4px';
})
//changing list backgrounds
document.querySelector('.done').style.backgroundColor = 'green'
const lOngoing=document.querySelectorAll('.Ongoing');
lOngoing.forEach((ele)=>{
ele.style.backgroundColor = 'yellow';
})
const lcoming=document.querySelectorAll('.coming');
lcoming.forEach((ele)=>{
ele.style.backgroundColor = 'red';
})
</script>
</body>
</html>
The date and 2020 color changing after every 1 sec
Develop the following application, use the following HTML elements to get started with. You will get the same code on starter folder. Apply all the styles and functionality using JavaScript only.