DEV Community

Bala Madhusoodhanan
Bala Madhusoodhanan

Posted on

6 2 1 2 1

Quick tips for Frontend Challenge

This is a submission for Frontend Challenge v24.04.17, Glam Up My Markup: Earth Day Celebration Landing Page

What I Built

Below are the list of enhancement made to the basic HTML
1) Custom CSS styling
2) Dark Mode Toggle Button
3) JS to enable the toggle button

CSS styling:

  • Default styles: Applied to the body and headers, setting the font family, background color, and text color.
  • Dark mode styles: Applied when the dark-mode class is added to the body, changing the background and text colors.
<style>
        /* Default CSS styles go here */
        body {
            font-family: Arial, Century Gothic;
            background-color: #B2E1DD;
            color: #1E293B;
        }
        /* header styles */
        h1, h2 {
            font-family: 'Arial';
            font-size: 20px;
            font-weight: bold;
        }

        /* Dark mode styles */
        body.dark-mode {
            font-family: Century Gothic, Courier New;
            background-color: #1D6A1B;
            color: #F5EBE1;
        }
    /* Dark Mode header styles */
        body.dark-mode h1, 
        body.dark-mode h2{
            font-family: 'Century Gothic';
            font-size: 20px;
            font-weight: bold;
        }
Enter fullscreen mode Exit fullscreen mode

Reasoning behind the selection :
The consideration for the colour pallet for the HTML screen was to leverage the research by Google on how much energy can we save by making more considered colour choices? I have gone with the green pallet as its Earth Day challenge

For the font selection I have picked up the system fonts that are more eco -printed frinedly

eco-Fonts

Cool tool to check the contrast check Contrast check
Dark Mode Toggle Button:

  • Earth icon styles: Adds a globe icon before elements with the earth-icon class.
  • Toggle button position: Styles for positioning the dark mode toggle button.
/* Earth icon styles */
        .earth-icon::before {
            content: "\1F30D"; /* Unicode for Earth globe icon */
            font-size: 20px;
            margin-right: 5px;
        }
             /* Toggle button position */
        #toggleButton {
            position: absolute;
            top: 10px;
            right: 10px;
Enter fullscreen mode Exit fullscreen mode

JS to enable the toggle button:
Have used JS to make the HTML bit interactive. When the dark-mode class is toggled, the CSS styles defined for .dark-mode are applied, changing the theme of the webpage.

<script>
        const toggleButton = document.getElementById('toggleButton');
        const bodyElement = document.body;

       // Toggle dark mode
        toggleButton.addEventListener('click', () => {
            bodyElement.classList.toggle('dark-mode');
        });
</script>
Enter fullscreen mode Exit fullscreen mode

Demo

Demo

Reference:

Reinvent your career. Join DEV.

It takes one minute and is worth it for your career.

Get started

Top comments (0)

Visualizing Promises and Async/Await 🤓

async await

☝️ Check out this all-time classic DEV post on visualizing Promises and Async/Await 🤓

👋 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