DEV Community

Cover image for Glam Up My Markup - Camp Form for kids
PythonIsNotASnake
PythonIsNotASnake

Posted on

3 3 3 1 2

Glam Up My Markup - Camp Form for kids

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

<!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>
Enter fullscreen mode Exit fullscreen mode

Website of the code snippet

Website of the code snippet with hover effect

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!

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

Top comments (0)

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay