DEV Challenge v24.03.20, Glam Up My Markup: Camp Activities

DEV Challenge v24.03.20, Glam Up My Markup: Camp Activities

by sh20raj

HTML

<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">

<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>

CSS

* {
  box-sizing: border-box;
}
body {
    font-family: Poppins, Arial, sans-serif;
    background-color: #f7f7f7;
    margin: 0;
    padding: 20px;
}

#camp-activities-inquiry {
    max-width: 600px;
    margin: 20px auto;
    background-color: #fff;
    padding: 20px;
  
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  box-shadow: blue 0px 0px 0px 2px inset, rgb(255, 255, 255) 10px -10px 0px -3px, rgb(31, 193, 27) 10px -10px, rgb(255, 255, 255) 20px -20px 0px -3px, rgb(255, 217, 19) 20px -20px, rgb(255, 255, 255) 30px -30px 0px -3px, rgb(255, 156, 85) 30px -30px, rgb(255, 255, 255) 40px -40px 0px -3px, rgb(255, 85, 85) 40px -40px;
}

h1 {
    color: #333;
    text-align: center;
}

label {
    display: block;
    margin-bottom: 5px;
}

select, textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    resize: vertical;
}

button {
    display: block;
    width: 100%;
    padding: 10px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}

JavaScript

// Add event listener to the submit button
document.querySelector('form').addEventListener('submit', function(event) {
    event.preventDefault(); // Prevent the default form submission
    const activityValue = document.getElementById('activity-select').value;
    const allergiesValue = document.getElementById('food-allergies').value;
    const additionalInfoValue = document.getElementById('additional-info').value;

    // Display a summary message using an alert
    let message = `Thank you for your submission!\n\n`;
    message += `Activity: ${activityValue}\n`;
    message += `Food Allergies: ${allergiesValue || 'None'}\n`;
    message += `Additional Info: ${additionalInfoValue || 'None'}`;

    alert(message);

    // Optionally, you can send this data to a server using AJAX or fetch()
});