Glam Up My Markup - Camp Form for kids
Tags: frontendchallenge, devchallenge, css, javascript
Published: 2024-03-21 20:34:27

_This is a submission for DEV Challenge v24.03.20, Glam Up My Markup: Camp Activities_

## What I Built And Why
I built the "Glam Up My Markup" Challenge. I decided to format the form a little bit to make it look like a regular form. Additional I added some colors and bigger fonts so that it is easy to understand for kids and parents. I saw this challenge by the Use-Case parents want to fill out this form for the camp and get supported by their child. So it should look a little bit cute or funny and not like a office document.
The button and the header got a small hover effect so it is more enjoyable in user interaction.
The HTML got the language property with the value "en-us" so a web browser plugin can easily translate the website in any language (tested by Firefox' translator in Beta state).

## Demo

```html
<!DOCTYPE html>

<html lang="en-us">
    <head>
        <meta charset="UTF-8">
        <title>Camp Activities Inquiry</title>
<!-- CSS Style Sheet -->        
        <style>
            section {
                margin-left: 10%;
                margin-right: 10%;
            }
            form {
                padding: 1%;
                background-color: #bec4ae;
                font-size: x-large;
                display: flex;
                flex-direction: column;
                flex-wrap: wrap;
                border-radius: 1rem;
                border-width: 5px;
                border-color: black;
                border-style: solid;
            }
            select {
                font-size: x-large;
                margin-bottom: 15px;
            }
            textarea {
                font-size: x-large;
                margin-bottom: 15px;
            }
            button {
                margin: auto;
                font-size: x-large;
                color: white;
                width: 100px;
                background-color: #787f4b;
                border-style: solid;
                border-width: 5px;
                border-radius: 1rem;
                border-color: black;
                transition: all .5s;
            }
            button:hover {
                background-color: #d76e4f;
                cursor: pointer;
                width: 100%;
            }
            body {
                background-color: #cdd3bc;
            }
            
            h1 {
                color: #313738;
                font-size: xx-large;
                text-align: center;
            }
            h1:hover {
                color: #d76e4f;
            }
        </style>
    </head>
    <body>
<!-- HTML 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>
</html>
```

![Website of the code snippet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jgrjglfc1wdbqlvpgmuc.png)

![Website of the code snippet with hover effect](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z4x6spd9zxb4q33ndn5e.png)

## Conclusion
I made this in an hour of evening coding session. The code is not special but it consider to the use-case I mentioned above.
PS: Hope to get a badge for this :)

Keep coding!