Glam Up My Markup: Camp Activities - The Frontend Challenge Submission

CodingWithRand — Sun, 31 Mar 2024 16:02:10 +0000

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

What I Built

I created a creative form submission for a camp activities inquiry. It can enhance user experience while filling in the form with interactive elements, cool animations, and effects. In this form, you can...

Select your preferred camp activity with the portrait of the image of your selected camp activity showing on the side.
Provide additional information such as food allergies to the counselor.
Enjoy the vibe on the webpage. (The camping background image integrates with moving clouds in the background and mysterious bushes at the bottom of the page that can shrink and grow when clicked on it)

To enhance the user experience to the maximum, I made the website responsive. Hence, mobile users can fill in the form conveniently without getting annoyed by the ugly UI interface.

Demo

Camp Activities Selection Section Textareas Section Mobile View
Note: Please click on the bushes at the bottom of the page to reveal the Submit button, in case you don't see it

You can access the website that I hosted on GitHub here
And here is the source code

CodingWithRand / DEV.to-challenge

A project to join the DEV.to - Glam Up My Markup 💅 Contest Interested? You can also join here

MIT License

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT…

View on GitHub

Journey

I had seen the challenge post since the start of the contest date. It took me such a long time to finally come up with this idea. In the first place, I got a rough idea about putting a camping-related image as a background, and probably binding the form elements to other images to make it interesting and interactive. But the real progress was made 4-5 days before the challenge due date.

So, I was searching for nice images for the page. The vector graphic images looked good in my point of view because they look simple and clean, which may make the user feel comfortable filling in the form.

An example of Vector Graphic Image - By Tonchino - Own work, CC BY-SA 3.0

And with the reason of simplicity and convenience, I also chose the font that suits the reason.

But I needed creativity and interactivity too, and that requires a lot more elements to be pre-rendered on the page that I might even have to change the HTML structure.

From this

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

to this

<section id="camp-activities-inquiry" style="display: block;">
        <img src="images/cloud.png" class="cloud" style="width: 40vw; height: 20vw; top: -10vh; animation-delay: 22s; animation-duration: 80s;">
        <img src="images/cloud.png" class="cloud" style="width: 8vw; top: 4vh; animation-delay: 18s; animation-duration: 65s;">
        <img src="images/cloud.png" class="cloud" style="width: 12vw; top: 2vh; animation-duration: 67s;">
        <img src="images/cloud.png" class="cloud" style="width: 18vw; top: 4vh; animation-delay: 13s; animation-duration: 65s;">
        <img src="images/cloud.png" class="cloud" style="width: 25vw; height: 10vw; top: -2vh; animation-delay: 10s; animation-duration: 72s;">
        <img src="images/cloud.png" class="cloud" style="width: 15vw; top: 5vh; animation-delay: 10s; animation-duration: 63s;">
        <img src="images/cloud.png" class="cloud" style="width: 10vw; top: 1.5vh; animation-delay: 5s; animation-duration: 69s;">
        <img src="images/cloud.png" class="cloud" style="width: 18vw; top: 4vh; animation-delay: 3s; animation-duration: 65s;">
        <img src="images/cloud.png" class="cloud" style="width: 30vw; height: 15vw; top: -3vh; animation-delay: 0s; animation-duration: 75s;">
        <img src="images/cloud.png" class="cloud" style="width: 15vw; top: 7vh; animation-delay: 0s; animation-duration: 60s;">
        <h1 class="animated">Camp Activities Inquiry</h1>
        <form action="/submit-form" method="POST">
                <div class="activity-selection-section">
                        <label for="activity-select" class="animated appeared">Which camp activities are you most looking forward to?</label>
                        <div class="custom-select animated appeared"><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>
                                <div class="select-selected">
                                        <div id="current-selected">Hiking</div>
                                        <div class="selected-hover-effect" style="width: 0px; opacity: 0;"></div>
                                        <div class="arrow-area"><img src="images/down-arrow.png" style="rotate: 0deg;">
                                        </div>
                                </div>
                                <div class="select-items select-hide"
                                        style="display: none; opacity: 0; transform: translateY(-20%); transition: transform 0.4s ease-in-out 0.15s, opacity 0.4s ease-in-out 0s;">
                                        <div>--Please choose an option--</div>
                                        <div class="same-as-selected">Hiking</div>
                                        <div>Canoeing</div>
                                        <div>Fishing</div>
                                        <div>Crafts</div>
                                        <div>Archery</div>
                                </div>
                        </div>
                </div>
                <div class="selected-activity animated" style="opacity: 1;">
                        <img src="images/hiking.png" class="selected-activity-img appeared" style="transform: rotateY(180deg);">
                </div>
                <div class="food-allergies-section">
                        <label for="food-allergies" class="animated appeared">Food Allergies (if any)</label>
                        <textarea id="food-allergies" name="food_allergies" rows="4" cols="50" class="appeared"></textarea>
                </div>
                <div class="addition-section">
                        <label for="additional-info" class="animated appeared">Additional things the counselor should know</label>
                        <textarea id="additional-info" name="additional_info" rows="4" cols="50" class="appeared"></textarea>
                </div>
                <div class="animated appeared" style="grid-column: 1 / span 2;">
                        <button type="submit">Submit</button>
                </div>
        </form>
        <img src="images/bush.png" class="bush" style="left: 0px; width: 30rem;">
        <img src="images/bush.png" class="bush" style="right: 0px; transform: scaleX(-1); width: 30rem;">
        <div class="effect-area">
                <img src="images/leaf.png" class="leaf" style="animation-name: leaf-away-1; animation-delay: 0s; left: 1213px; top: 531px;">
                <img src="images/leaf.png" class="leaf" style="animation-name: leaf-away-2; animation-delay: 0.15s; left: 1213px; top: 521px;">
        </div>
</section>

However, according to the rules, you shouldn't directly apply the change to the given HTML code. So, that is IMPOSSIBLE!!

Or is it? *VSauce theme played*

Well, there is a way, and it is to use the JavaScript which is allowed to append the element node to the DOM. That is one of the new things I have learned from participating in this contest. I didn't know that you could do this like inserting JSX in React (Of course you can because React is also a javascript library) The fundamentals of DOM I only had were selecting elements, styling or adding classes to them, and some event listeners of the elements. Creating DOM nodes or elements is a new thing for me. Now, I know how to create new elements and append them to the DOM in the right order.

Besides that, working on this project is like reviewing my knowledge of vanilla JavaScript and DOM Manipulation, because the interactivity of the page mainly relies on JavaScript. We also have to mention CSS too, since it brings creativity to the page and makes the page neat and responsive. In conclusion, I have learned new methods to add DOM elements in JavaScript and strengthened my knowledge of JavaScript and CSS to write the perfect code that works well.

As submitting the project a few hours before the deadline, I can guarantee that this project has enough quality to contend with other participants. I have checked thoroughly into the code and conducted many tests on the project to ensure it works perfectly fine.

(To be honest, I would like to add sound to the webpage and make the form submission confirmation system too, but due to the lack of time. I scrapped that idea)

Thank you for reading my post to the end, I really appreciate it!

DEV Community: CodingWithRand

Glam Up My Markup: Camp Activities - The Frontend Challenge Submission

What I Built

Demo

CodingWithRand / DEV.to-challenge

Journey