What I Built
My primary goal was to create an engaging and educational landing page with the theme of Earth Day. To achieve this, I focused on several key enhancements:
Interactive Quiz Game
I developed a dynamic quiz game to educate visitors about environmental issues and Earth Day. The quiz included questions on various topics, such as conservation symbols, Earth’s surface, and benefits of reducing plastic waste. This feature was designed to engage users interactively, providing immediate feedback on their answers to enhance learning.
Enhanced Quiz Button
To make the quiz more accessible and visually appealing, I enhanced the quiz button. By adding an icon and styling the button, I ensured it was prominent and inviting, encouraging users to engage with the quiz.
Visibility Toggles
Recognizing the need to manage content visibility effectively, I implemented toggles for articles. This not only helped in organizing content better but also allowed for a cleaner and more user-friendly interface.
Interactive Swiper
To showcase tips on environmental conservation effectively, I integrated a swiper mechanism that allowed users to swipe through different tips. This not only added a modern touch to the page but also made the information more digestible and fun to interact with.
Functions
I used several functions to achieve these goals. Here’s an explanation of what each function does:
quizGame()
This function is responsible for setting up a quiz game. It:
Creates a quiz container element and inserts it into the DOM right after a designated link.
Defines quiz questions and handles the game logic.
Handles question navigation and scoring.
Utilizes nested functions like showQuestion(), selectAnswer(), nextQuestion(), and restartQuiz() to manage quiz interactions, including displaying questions, handling answer selection, and navigating between questions.
setupQuizButton()
This function enhances the appearance and functionality of a quiz-related link by:
Adding a font-awesome icon before the quiz link text.
Applying CSS styles to make the link more prominent and interactive.
setupVisibilityToggles()
This function sets up visibility toggles for articles within a section by:
Assigning unique IDs to the first two articles, allowing for easier manipulation or styling through CSS or JavaScript.
initializeSwiper()
This function initializes a swiper component, which is a popular library for creating responsive sliders:
It replaces a list within an article with a swiper container that includes multiple slides.
Each slide represents different environmental tips and is styled with a background image.
It configures the swiper with various effects, pagination, and autoplay settings.
Demo
Journey
My journey to enhance an HTML landing page for Earth Day was both challenging and rewarding. Given the constraint of not modifying the existing HTML structure directly, I had to think creatively about how to use JavaScript and CSS to introduce new functionalities and improve the user interface.
This required a deep dive into the DOM manipulation and dynamic styling to implement the desired features without disrupting the original content structure.
Image Credits
I used the following images from Pexels:
Photo by Johannes Plenio: https://www.pexels.com/photo/forest-covered-in-white-fog-1423600/
Photo by Sebastian Arie Voortman: https://www.pexels.com/photo/body-of-water-during-golden-hour-189349/
Photo by Tom Swinnen: https://www.pexels.com/photo/orange-flower-1115090/
Photo by Filip Olsok: https://www.pexels.com/photo/elephant-on-green-grass-field-4003736/
Photo by Thirdman: https://www.pexels.com/photo/a-man-using-a-net-to-scoop-garbage-from-a-lake-7656994/
Photo by ready made: https://www.pexels.com/photo/mobile-phone-with-green-recycling-sign-and-mesh-bag-3850512/
Photo by Akil Mazumder: https://www.pexels.com/photo/person-holding-a-green-plant-1072824/
