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

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;

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>

Demo

Reference:

UX decision and the Carbon cost

Bala Madhusoodhanan ・ Feb 14 '23

#webdev #greensoftware #engineering #design