EXERCISE NUMBER 4
EVENT FINDER
<!DOCTYPE html>
<html>
<head>
<title><b>EVENT CALENDAR</b></title>
<style>format and styles
div{
Margin-bottom:10px
}
label{
Display:inline-block;
width:200px;
}
fieldset{
background:lightblue;
}
legend{
padding:20px 0;
font-size:20px;
}
</style>
</head>
<body>
<h1>SEARCH A MONTH </h1>
<h4><p>Please type in the Month (1-12); </p></h4>
<fieldset>
<label for="number">Month: </label>
<input type="number" placeholder="Enter the number of Month" onfocus="this.placeholder=''" name="Month" id="number" ><br><br>
<button onclick="Display()" style="margin-left: 174px;" name="Display" id="display" value="Display" > Display </button>
</fieldset>
<p id="demo"></p>
<script>
function Display()
{
var numval = document.getElementById("number").value;
if(numval == 1)
{
document.getElementById("demo"). innerHTML ="<span style='font-size:30px; color:skyblue;'><b><u><em> January; New Year's Day</span>";
}
else if(numval == 2)
{
document.getElementById("demo"). innerHTML ="<span style='font-size;30px; color:Red;'><b><u><em> Valentines Day</span>";
}
else if(numval == 3)
{
document.getElementById("demo"). innerHTML ="<span style='font-size;30px; color:gold;'><b><u><em> International Women's Day</span>";
}
else if(numval == 4)
{
document.getElementById("demo"). innerHTML ="<span style='font-size;30px; color:Yellow;'><b><u><em> April Fool's Day</span>";
}
else if(numval == 5)
{
document.getElementById("demo"). innerHTML ="<span style='font-size;30px; color:Blue;'><b><u><em> Labor Day</span>";
}
else if(numval == 6)
{
document.getElementById("demo"). innerHTML ="<span style='font-size;30px; color:#00B11E;'><b><u><em> World Environment Day</span>";
}
else if(numval == 7)
{
document.getElementById("demo"). innerHTML ="<span style='font-size;30px; color:#001569;'><b><u><em> Independence Day</span>";
}
else if(numval == 8)
{
document.getElementById("demo"). innerHTML ="<span style='font-size;30px; color:#FF9300;'><b><u><em> Friendship Day</span>";
}
else if(numval == 9)
{
document.getElementById("demo"). innerHTML ="<span style='font-size;30px; color:#664300;'><b><u><em> International Literacy Day</span>";
}
else if(numval == 10)
{
document.getElementById("demo"). innerHTML ="<span style='font-size;30px; color:#28CEFF;'><b><u><em> World Smile Day</span>";
}
else if(numval == 11)
{
document.getElementById("demo"). innerHTML ="<span style='font-size;30px; color:Gray;'><b><u><em> Gunpowder Day</span>";
}
else if(numval == 12)
{
document.getElementById("demo"). innerHTML ="<span style='font-size;30px; color:#005608;'><b><u><em> Christmas Day</span>";
}
else
{
document.getElementById("demo"). innerHTML ="<span style='font-size;30px; color:#8700FF;'><b><u><em> Display all months others Invalid Input</span>";
}
}
</script>
</body>
</html>
Comments
Post a Comment