Web Design - Technical Design - JavaScript Countdown Assignment # 4

HTML CSS Javascript Code

<!DOCTYPE html>
<html>
<head>
	<title>Eid Ul Fitar Time Remaining</title>

<style type="text/css">
	
body{
  text-align: center;
  background-image: url('https://i.ibb.co/XyNcVXj/eid.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  font-family: cursive;
  font-weight: 100;
}

h2{
  color: maroon;
  font-family: arial black;
  background-color: yellow;
  font-weight: 50;
  font-size: 36px;
  margin: 40px 0px 20px;
}

h3{
  color: white;
  background-color: rgb(120,0,0.5);
  position: relative;
  left: 550px;
  width: 420px;
  border-radius: 25px;
  height: auto;
  font-weight: 100;
  font-size: 26px;
  margin: 40px 0px 20px;
}
#p2 {
  color: yellow;
  padding: 20px;
  background-color:rgb(120,25,0.5);
  font-family: cursive;
  font-weight: 100;
  font-size: 25px;
  margin: 40px 0px 20px;
}
#clock{
  font-family: sans-serif;
  color: yellow;
  display: inline-block;
  font-weight: 100;
  text-align: center;
  font-size: 56px;
}

#clock > div{
  padding: 10px;
  border: 2px solid white;
  border-radius: 50px 0px 50px 0px;
  width: 140px;
  box-shadow: 10px 12px grey;
  background: black;
  display: inline-block;
}

#clock div > span{
  padding: 15px;
  border-radius: 100px;
  background: red;
  display: inline-block;
}

.small{
  padding-top: 5px;
  font-size: 28px;
}

</style>

</head>
<body>
	<h2> Count Down Clock Assignment By Faisal Javaid</h2>
<div id="clock">
	<div>
		<span id="D"></span>
		<div class="small">Days</div>
	</div>
	<div>
		<span id="H"></span>
		<div class="small">Hours</div>
	</div>
	<div>
		<span id="M"></span>
		<div class="small">Minutes</div>
	</div>
	<div>
		<span id="S"></span>
		<div class="small">Seconds</div>
	</div>
</div>
<h3> Eid-ul-Fitar Time Remaining | Insha ALLAH In Pakistan</h3><br>
<p id="CountDown"></p>
<p align="justify" id="p2">Eid al-Fitr, (Arabic: “Festival of Breaking Fast”) also spelled ʿĪd al-Fiṭr, also called al-ʿĪd al-Ṣaghīr, Turkish Ramazan Bayrami (“Ramadan Festival”), first of two canonical festivals of Islam. Eid al-Fitr marks the end of Ramadan, the Muslim holy month of fasting, and is celebrated during the first three days of Shawwal, the 10th month of the Islamic calendar (though the Muslim use of a lunar calendar means that it may fall in any season of the year). As in Islam’s other holy festival, Eid al-Adha, it is distinguished by the performance of communal prayer (ṣalāt) at daybreak on its first day. Eid al-Fitr is a time of official receptions and private visits, when friends greet one another, presents are given, new clothes are worn, and the graves of relatives are visited. See also mawlid; ʿĀshūrāʾ.</p>
<script type="text/javascript">
setInterval(EidCountDown,1000);
function EidCountDown()
{
var eid_ul_fiter=new Date("May 13,2021 6:00:00").getTime();
var current=new Date().getTime();
var difference=eid_ul_fiter-current;
var d=Math.floor(difference/(1000*60*60*24));
var h=Math.floor((difference%(1000*60*60*24))/(1000*60*60));
var m=Math.floor((difference%1000*60*60)/(1000*60));
var s=Math.floor((difference%(1000*60))/1000);
document.getElementById("D").innerHTML=d;
document.getElementById("H").innerHTML=h;
document.getElementById("M").innerHTML=m;
document.getElementById("S").innerHTML=s;
}
</script>

<!-- <p id="countdown"></p>
<script>
setInterval(eid,1000);
function eid()
{
	var eid_ul_fiter=new Date("may 14,2021 7:00:00").getTime();
	var current=new Date().getTime();
	var difference=eid_ul_fiter-current;
    var d=Math.floor(difference/(1000*60*60*24));
	var h=Math.floor((difference%(1000*60*60*24))/(1000*60*60));
	var m=Math.floor((difference%1000*60*60)/(1000*60));
	var s=Math.floor((difference%(1000*60))/1000);
	document.getElementById("countdown").innerHTML="Days "+d+" Hours "+h+
	" Minutes "+m+" Seconds "+s;
}

</script> -->
</body>
</html>

CSS Code

JavaScript Code

Web Design - Technical Design - JavaScript Countdown Assignment # 4

IDEAL-TECH

Post a Comment

إرسال تعليق

نموذج الاتصال

Web Design - Technical Design - JavaScript Countdown Assignment # 4

IDEAL-TECH

You might like

Post a Comment

إرسال تعليق

نموذج الاتصال