<link rel="stylesheet" href="styles.css">
<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>
<section id="selected-activities">
</section>
<script src="script.js"></script>
</body>
@import url('https://fonts.googleapis.com/css2?family=Akaya+Kanadaka&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
html{
background: url('https://i.postimg.cc/pTRtPbrr/camping.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
font-family: "Akaya Kanadaka", system-ui;
font-weight: 400;
font-style: normal;
font-size: 20px;
}
body{
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}
#camp-activities-inquiry{
background: rgba( 63, 141, 101, 0.65 );
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
backdrop-filter: blur( 7.5px );
-webkit-backdrop-filter: blur( 7.5px );
border-radius: 10px;
border: 1px solid rgba( 255, 255, 255, 0.18 );
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 20px 20px 20px 20px;
}
h1{
color: #EAFF00;
}
#camp-activities-inquiry h1::before {
content: '';
display: inline-block;
background: url("https://i.postimg.cc/pTCMTG5Z/trek.png");
background-size: contain;
width: 150px;
height: 150px;
}
#camp-activities-inquiry > h1 {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
&:after {
content: '';
display: inline-block;
background: url("https://i.postimg.cc/3x0hBFz8/rabbit.png");
background-size: contain;
width: 150px;
height: 150px;
}
}
#camp-activities-inquiry form > *{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 0.5rem;
width: -webkit-fill-available;
}
#camp-activities-inquiry #activity-select{
width: -webkit-fill-available;
width: -moz-available;
text-align: left;
-ms-text-align-last: center;
-moz-text-align-last: center;
border-radius: 0.375rem;
padding: 0.25rem;
font-size: 15px;
font-family: "Pacifico", cursive;
font-weight: 400;
font-style: normal;
}
#food-allergies{
border: 5px solid rgba( 63, 141, 101, 0.65 );
border-radius: 15px;
font-family: "Pacifico", cursive;
font-size: 15px;
font-style: normal;
}
#additional-info{
border: 5px solid rgba( 63, 141, 101, 0.65 );
border-radius: 15px;
font-size: 15px;
font-family: "Pacifico", cursive;
font-weight: 400;
font-style: normal;
}
button{
border-radius: 15px;
background-color: rgba( 63, 141, 101, 0.65 );
height: 45px;
font-size: 15px;
font-family: "Pacifico", cursive;
font-weight: 400;
font-style: normal;
}
#selected-activities{
display: none;
flex-direction: row;
background: rgba( 63, 141, 101, 0.65 );
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
backdrop-filter: blur( 4px );
-webkit-backdrop-filter: blur( 4px );
border-radius: 10px;
border: 1px solid rgba( 255, 255, 255, 0.18 );
height: 600px;
width: 400px;
border-radius: 0.375rem;
padding: 0.25rem;
}
option {
background: rgba( 63, 141, 101, 0.65 );
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
backdrop-filter: blur( 4px );
-webkit-backdrop-filter: blur( 4px );
border-radius: 10px;
border: 1px solid rgba( 255, 255, 255, 0.18 ); /* Prevents content overflow during animation */
}
@keyframes shake {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(3px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(3px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(1px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}
const inquiry_form = document.getElementById('camp-activities-inquiry');
const activity_select = document.getElementById('activity-select');
const selected_activity = document.getElementById('selected-activities');
const food_allergies = document.getElementById('food-allergies');
imageGallary = {
'hiking_image' : 'https://i.postimg.cc/gkQFn6jf/Hiking.gif',
'canoeing_image' : 'https://i.postimg.cc/XqDMKr8B/Canoeing.gif',
'fishing_image' : 'https://i.postimg.cc/jq8rY1bq/Fishing.gif',
'crafts_image': 'https://i.postimg.cc/pXpMWBWf/Crafts.gif',
'archery_image': 'https://i.postimg.cc/C1gwdnPF/archery.gif'
}
function reset_form(e){
//e.preventDefault();
selected_activity.style.display = 'none';
activity_select.selectedIndex = 0;
inquiry_form.style.display = 'flex';
}
personalItems = {
'hiking' : ['https://i.postimg.cc/BbZsB9fk/headlamp.png', 'https://i.postimg.cc/kX4qVmct/knife.png', 'https://i.postimg.cc/Bbh3hYq6/fire-starter.png', 'https://i.postimg.cc/5ytdFBwM/whistle.png'],
'canoeing' : ['https://i.postimg.cc/wxF9Tvhp/dry-bag.png','https://i.postimg.cc/sX4sWfq5/boots.png'],
'fishing' : ['https://i.postimg.cc/7LgkvYxj/tackle-box.png','https://i.postimg.cc/sX4sWfq5/boots.png'],
'crafts' : ['https://i.postimg.cc/3Jc7mcSf/paper-crafts.png'],
'archery' : ['https://i.postimg.cc/nL8JwQtv/safety-shoes.png']
};
function update_activity(e) {
e.preventDefault();
activity_select.style.animation = 'none';
food_allergies.style.animation = 'none';
if(activity_select.value == ''){
setTimeout(function() {
activity_select.style.animation = 'shake 0.5s';
}, 10);
return;
}
if(food_allergies.value == ''){
setTimeout(function() {
food_allergies.style.animation = 'shake 0.5s';
}, 10);
return;
}
const activity = activity_select.value;
selected_activity.style.display = 'flex';
// Create keyframes for the animations
const keyframes1 = [
{ transform: 'scale(0)' },
{ transform: 'scale(1)' }
];
// Set up the animation options
const options = {
duration: 1000, // 1 second
iterations: 1,
easing: 'ease-in-out'
};
inquiry_form.style.display = 'none';
let items = personalItems[activity].map(item =>
`<li><img src='${item}' height='50px' width='50px'></li>`).join('');
let activity_image = imageGallary[activity + '_image'];
// Apply the animations
selected_activity.animate(keyframes1, options);
selected_activity.innerHTML = `
<div style='display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%'>
<h1 style='display: flex; justify-content: center; align-items: center;'>Thank you for inquiry.</h1>
<h1 style='display: flex; justify-content: center; align-items: center; margin: unset;'>Your Selected activity:</h1>
<h1 style='display: flex; justify-content: center; align-items: center;'>${activity.toUpperCase()}</h1>
<img src='${activity_image}' height='150px' width='150px' style='border-radius: 100%; border: 2px solid black'>
<p style='margin-bottom:0px'>Required Personal items:
<ul style='display: flex;list-style:none;margin:0px'>
${items}
</ul>
</p>
<button onClick="reset_form(event)">Submit another inquiry</button>
</div>
`;
}
//activity_select.addEventListener('change', update_activity);
document.querySelector('form').addEventListener('submit',update_activity);
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.