Create a webpage that allows the user to select their birthday from a pulldown l
ID: 3712170 • Letter: C
Question
Create a webpage that allows the user to select their birthday from a pulldown list, as shown in the example. Use a for loop to initialize the possible years (ranging from 1900-2018) and possible days (ranging from 01 - 31). Then once they click submit, output the date as shown in the example, and output the season they were born in. Format your page similarly to the example: the selection lists and button should be in a div, and the output should be in another div, and the divs should have their own colours/styles. Additionally, make the overall background of the whole page have particle effects using particle.js, such that the particles are light blue triangles and the background colour is pink. Additionally, make the output divs and button rounded using the border-radius property of css.
Explanation / Answer
<!DOCTYPE html>
<html>
<head>
<title>Sample Page</title>
<style>
body {
background-color: pink;
}
#input {
padding: 20px;
background-color: #cec7c0;
color: blue;
border: 1px solid black;
}
#output {
padding: 20px;
background-color: #f49842;
border-radius: 5px;
border: 1px solid black;
}
.button {
background-color: #4CAF50;
border: none;
border-radius: 5px;
color: white;
padding: 5px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="input">
<form>
<h3>Please select your Date of Birth: </h3>
<select id="day">
<option value="Day">Day</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select id="month">
<option value="Month">Month</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<select id="year">
<option value="Year">Year</option>
<option value="1990">1990</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
</select>
</form>
<br>
<br>
<button type="button" class="button">Submit</button>
</div>
<br>
<br>
<div id="output">
<p id="dob"> </p>
<p id="season"> </p>
</div>
<script>
function myFunction() {
let day = document.getElementById("day").value;
let month = document.getElementById("month").value;
let year = document.getElementById("year").value;
document.getElementById("dob").innerHTML = "Your DOB is : " + day + "/" + month + "/" + year;
let season = "";
if(month >= 3 && month <= 5)
season = "Summer";
else if(month >= 6 && month <= 9)
season = "Rainy";
else if(month >= 10 && month <= 11)
season = "Autumn";
else
season = "Winter";
document.getElementById("season").innerHTML = "You were born in " + season + " season."
}
</script>
</body>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.