The image is what my app looks like(there are 5 season options). Im a new student, and I'm 100% green to this. Any tips to help get me started would be greatly appreciated. I know that this project is gonna involve lots of coding using only javascript. Thanks
html code
<form>
<fieldset id="apphead">
<h2>Twin Cities Disc Golf League Finder</h2>
</fieldset>
<fieldset id="season">
<legend><span>Choose a Season</span></legend>
<select id="pickseason">
<option value="all">ALL</option>
<option value="spring">Spring(Mar-May)</option>
<option value="summer">Summer(Jun-Aug)</option>
<option value="fall">Fall(Sep-Nov)</option>
<option value="winter">Winter(Dec-Feb)</option>
</select>
</fieldset>
<fieldset id="weekday">
<legend><span>Choose Day of the Week</span></legend>
<label for="allweek" id="all">
All
<input type="radio" id="wkall" name="dayofweek" class="weekday" value="everyday"/>
</label>
<label for="monday" id="mon">
Mon
<input type="radio" id="wkmon" name="dayofweek" class="weekday" value="monday"/>
</label>
<label for="tuesday" id="tue">
Tue
<input type="radio" id="wktue" name="dayofweek" class="weekday" value="tuesday"/>
</label>
<label for="wednesday" id="wed">
Wed
<input type="radio" id="wkwed" name="dayofweek" class="weekday" value="wednesday"/>
</label>
<label for="thursday" id="thur">
Thur
<input type="radio" id="wkthur" name="dayofweek" class="weekday" value="thursday"/>
</label>
<label for="friday" id="fri">
Fri
<input type="radio" id="wkfri" name="dayofweek" class="weekday" value="friday"/>
</label>
<label for="saturday" id="sat">
Sat
<input type="radio" id="wksat" name="dayofweek" class="weekday" value="saturday" />
</label>
<label for="sunday" id="sun">
Sun
<input type="radio" id="wksun" name="dayofweek" class="weekday" value="sunday" />
</label>
</fieldset>
<fieldset id="time">
<legend><span>Choose a Time of Day</span></legend>
<label for="any" id="anylabel">
Any Time
<input type="radio" id="any" name="timeofday" class="selecttime" value="anytime"/>
</label>
<label for="flex" id="flexlabel">
Flex (All Day)
<input type="radio" id="flex" name="timeofday" class="selecttime" value="flexallday"/>
</label>
<label for="before" id="beforelabel">
Before Noon
<input type="radio" id="before" name="timeofday" class="selecttime" value="beforenoon"/>
</label>
<label for="after" id="afterlabel">
After Noon
<input type="radio" id="after" name="timeofday" class="selecttime" value="afternoon"/>
</label>
</fieldset>
<fieldset id="type">
<legend><span>Choose Type</span></legend>
<label for="both" id="bothlabel">
Both
<input type="radio" id="typeboth" name="ruletypes" class="selecttype" value="both"/>
</label>
<label for="singles" id="singleslabel">
Singles
<input type="radio" id="typesingles" name="ruletypes" class="selecttype" value="singles"/>
</label>
<label for="doubles" id="doubleslabel">
Doubles
<input type="radio" id="typedoubles" name="ruletypes" class="selecttype" value="doubles"/>
</label>
</fieldset>
<fieldset class="buttonbox">
<button onclick="league()" type="button" class="submit">FIND A LEAGUE</button>
</fieldset>
</form>
JavaScript
<script>
function league(){
var seasonSelection;
var weekSelection;
var timeSelection;
var typeSelection;
seasonSelection = seasonChoice();
weekSelection = weekDay();
timeSelection = timeChoice();
typeSelction = chooseType();
if(seasonSelection == "all" && weekSelection == "everyday" && timeSelection == "anytime" && typeSelection == "both"){
window.alert("Solberg | Bassett Creek | 6:30PM | 5$ ");
}
}
function seasonChoice(){
var seasonChoice = document.getElementById("pickseason").value;
return seasonChoice;
}
function weekDay(){
var weekSelection = document.getElementsByClassName("weekday");
var weekValue;
for(var z=0; z <= 8; z++){
if(weekSelection.checked){
weekValue = weekSelection.value;
}
}
return weekValue;
}
function timeChoice(){
var timeSelection = document.getElementsByClassName("selecttime");
var timeValue;
for(var t=0; t <= 4; t++){
if(timeSelection.checked){
timeValue = timeSelection.value;
}
}
return timeValue;
}
function chooseType(){
var typeSelection = document.getElementsByClassName("selecttype");
var typeValue;
for(var y=0; y <= 3; y++){
if(typeSelection.checked){
typeValue = typeSelection.value;
}
}
return typeValue;
}
</script>
Aucun commentaire:
Enregistrer un commentaire