Quick tips for Frontend Challenge
Tags: devchallenge, frontendchallenge, css, javascript
Published: 2024-04-24 08:05:22

_This is a submission for [Frontend Challenge v24.04.17](https://dev.to/devteam/join-us-for-the-next-frontend-challenge-earth-day-edition-52e4), 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

{% embed https://www.youtube.com/watch?v=N_6sPd0Jd3g %}

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

[eco-Fonts](https://leap.eco/print-for-the-planet-the-best-eco-fonts/)

Cool tool to check the contrast check [Contrast check](https://snook.ca/technical/colour_contrast/colour.html#fg=F5EBE1,bg=E5DDDD)
**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

![Demo](https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExdTdna2k1dnAxaTVpb2x5aHV1MXUyZDFxandodzZoZGM4MmY1cHhjdiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/FlwUqU63I2qRyEK0rj/giphy.gif)

Reference:
{% embed https://dev.to/balagmadhu/ux-decision-and-the-carbon-cost-4lbi %}