<!DOCTYPE html>
<html>
<head>
<title>Event Finder</title>
<style>
h1 {
margin-left: 280px;
font-family: "Times New Roman";
}
p {
margin-left: 285px;
font-family: "Times New Roman";
}
div {
margin-bottom: 10 px;
}
label {
display: inline-block;
width: 120px;
height: 20px;
padding: 10px;
margin-left: 30px;
font-family: "Times New Roman";
}
fieldset {
margin-left: 280px;
margin-right: 280px;
background: #ff6d24;
padding: 5px;
font-family: "Times New Roman";
</style>
</head>
<body>
<h1>Event Finder</h1>
<p> Please type in the Month (1-12): </p>
<fieldset>
<label for="text">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> <br><br>
</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:20px; color:#b57600;'><b><u><em> January: New Year's Day</span>";
}
else if (numval == 2)
{
document.getElementById("demo"). innerHTML = "<span style='font-size:20px; color:#ff0084;'><b><u><em> February: Valentine's Day</span>";
}
else if (numval == 3)
{
document.getElementById("demo"). innerHTML = "<span style='font-size:20px; color:#09b000;'><b><u><em> March: Graduation Day</span>";
}
else if (numval == 4)
{
document.getElementById("demo").innerHTML = "<span style='font-size:20px; color:#d969ff;'><b><u><em> April: Lenten Season / Easter Day</span>";
}
else if (numval == 5)
{
document.getElementById("demo").innerHTML = "<span style='font-size:20px; color:#2723de;'><b><u><em> May: Labor Day</span>";
}
else if (numval == 6)
{
document.getElementById("demo").innerHTML = "<span style='font-size:20px; color:#09b000;'><b><u><em> June: Independence Day</span>";
}
else if (numval == 7)
{
document.getElementById("demo").innerHTML = "<span style='font-size:20px; color:#fc5c05;'><b><u><em> July: Nutrition Month</span>";
}
else if (numval == 8)
{
document.getElementById("demo").innerHTML = "<span style='font-size:20px; color:#0077ff;'><b><u><em> August: Buwan ng Wika</span>";
}
else if (numval == 9)
{
document.getElementById("demo").innerHTML = "<span style='font-size:20px; color:#b5a000;'><b><u><em> September: Teachers Month</span>";
}
else if (numval == 10)
{
document.getElementById("demo").innerHTML = "<span style='font-size:20px; color:#07008a;'><b><u><em> October: United Nation Month</span>";
}
else if (numval == 11)
{
document.getElementById("demo").innerHTML = "<span style='font-size:20px; color:#000000;'><b><u><em> November: Halloween / All Souls Day</span>";
}
else if (numval == 12)
{
document.getElementById("demo").innerHTML = "<span style='font-size:20px; color:#ff0000;'><b><u><em> December: Christmas Day</span>";
}
else if (numval == 13)
{
document.getElementById("demo").innerHTML = "<span style='font-size:20px; color:#00633c;'><b><u><em> •All Months: <br> 1. January <br> 2. February <br> 3. March <br> 4. April <br> 5. May <br> 6. June <br> 7. July <br> 8. August <br> 9. September <br> 10. October <br> 11. November <br> 12. December</span>";
}
else
{
document.getElementById("demo").innerHTML = "<span style='font-size:20px; color:#2e2e2e;'><b><u><em> Invalid output</span>";
}
}
//-->
</script>
</body>
</html>
<html>
<head>
<title>Event Finder</title>
<style>
h1 {
margin-left: 280px;
font-family: "Times New Roman";
}
p {
margin-left: 285px;
font-family: "Times New Roman";
}
div {
margin-bottom: 10 px;
}
label {
display: inline-block;
width: 120px;
height: 20px;
padding: 10px;
margin-left: 30px;
font-family: "Times New Roman";
}
fieldset {
margin-left: 280px;
margin-right: 280px;
background: #ff6d24;
padding: 5px;
font-family: "Times New Roman";
</style>
</head>
<body>
<h1>Event Finder</h1>
<p> Please type in the Month (1-12): </p>
<fieldset>
<label for="text">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> <br><br>
</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:20px; color:#b57600;'><b><u><em> January: New Year's Day</span>";
}
else if (numval == 2)
{
document.getElementById("demo"). innerHTML = "<span style='font-size:20px; color:#ff0084;'><b><u><em> February: Valentine's Day</span>";
}
else if (numval == 3)
{
document.getElementById("demo"). innerHTML = "<span style='font-size:20px; color:#09b000;'><b><u><em> March: Graduation Day</span>";
}
else if (numval == 4)
{
document.getElementById("demo").innerHTML = "<span style='font-size:20px; color:#d969ff;'><b><u><em> April: Lenten Season / Easter Day</span>";
}
else if (numval == 5)
{
document.getElementById("demo").innerHTML = "<span style='font-size:20px; color:#2723de;'><b><u><em> May: Labor Day</span>";
}
else if (numval == 6)
{
document.getElementById("demo").innerHTML = "<span style='font-size:20px; color:#09b000;'><b><u><em> June: Independence Day</span>";
}
else if (numval == 7)
{
document.getElementById("demo").innerHTML = "<span style='font-size:20px; color:#fc5c05;'><b><u><em> July: Nutrition Month</span>";
}
else if (numval == 8)
{
document.getElementById("demo").innerHTML = "<span style='font-size:20px; color:#0077ff;'><b><u><em> August: Buwan ng Wika</span>";
}
else if (numval == 9)
{
document.getElementById("demo").innerHTML = "<span style='font-size:20px; color:#b5a000;'><b><u><em> September: Teachers Month</span>";
}
else if (numval == 10)
{
document.getElementById("demo").innerHTML = "<span style='font-size:20px; color:#07008a;'><b><u><em> October: United Nation Month</span>";
}
else if (numval == 11)
{
document.getElementById("demo").innerHTML = "<span style='font-size:20px; color:#000000;'><b><u><em> November: Halloween / All Souls Day</span>";
}
else if (numval == 12)
{
document.getElementById("demo").innerHTML = "<span style='font-size:20px; color:#ff0000;'><b><u><em> December: Christmas Day</span>";
}
else if (numval == 13)
{
document.getElementById("demo").innerHTML = "<span style='font-size:20px; color:#00633c;'><b><u><em> •All Months: <br> 1. January <br> 2. February <br> 3. March <br> 4. April <br> 5. May <br> 6. June <br> 7. July <br> 8. August <br> 9. September <br> 10. October <br> 11. November <br> 12. December</span>";
}
else
{
document.getElementById("demo").innerHTML = "<span style='font-size:20px; color:#2e2e2e;'><b><u><em> Invalid output</span>";
}
}
//-->
</script>
</body>
</html>