<body>
<section id="camp-activities-inquiry">
<h1>Camp Activities Inquiry</h1>
<form action="/submit-form" method="POST">
<label for="activity-select">Which camp activities are you most looking forward to?</label>
<select id="activity-select" name="activity">
<option value="">--Please choose an option--</option>
<option value="hiking">Hiking</option>
<option value="canoeing">Canoeing</option>
<option value="fishing">Fishing</option>
<option value="crafts">Crafts</option>
<option value="archery">Archery</option>
</select>
<label for="food-allergies">Food Allergies (if any)</label>
<textarea id="food-allergies" name="food_allergies" rows="4" cols="50"></textarea>
<label for="additional-info">Additional things the counselor should know</label>
<textarea id="additional-info" name="additional_info" rows="4" cols="50"></textarea>
<button type="submit">Submit</button>
</form>
</section>
</body>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
height: 100vh;
}
body{
font-family: Arial, Helvetica, sans-serif;
}
h1{
font-size: 10px;
font-weight: 700;
text-align: center;
padding-top: 50px;
color: white;
}
#camp-activities-inquiry{
background-image: linear-gradient(to right, #0ad2df , #fb00ff);
height: 100vh;
display: flex;
background-size: cover;
flex-direction: column;
align-items: center;
justify-content: center;
}
form{
display: inline-flex;
flex-direction: column;
background-color: white;
color: rgb(73, 72, 69);
width: 50%;
height: 85%;
padding: 40px;
margin: auto;
box-shadow: 0 4px 4px rgba(0,0,0,0.5);
border-radius: 10px;
}
label{
padding: 25px 0 10px 0;
}
#activity-select{
padding: 10px;
border-radius: 5px;
}
textarea{
padding: 10px;
border-radius: 10px;
resize: none;
}
button{
padding: 10px;
border-radius: 10px;
background-image: linear-gradient(to right, #fb00ff,#0ad2df );
color: white;
border: none;
cursor: pointer;
margin: 30px 0 0 0;
width: 100%;
font-size: 24px;
}
button:hover{
background-image: linear-gradient(to right, #0ad2df, #fb00ff);
}
const form = document.querySelector('form');
form.addEventListener('submit', submit);
function submit(e){
e.preventDefault();
let foodAllergies = document.getElementById('food-allergies').value;
let additionalInfo = document.getElementById('additional-info').value;
let activitySelect = document.getElementById('activity-select').value;
if(foodAllergies === '' || additionalInfo === '' || activitySelect === ''){
alert('Please fill out all fields');
}
else{
alert(`Thank you for filling out the form. Your Food Allergies is ${foodAllergies}.`);
}
foodAllergies.value = '';
additionalInfo = ' ';
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.