DEV Community

Bala Madhusoodhanan
Bala Madhusoodhanan

Posted on

Quick tips for Frontend Challenge

#devchallenge #frontendchallenge #css #javascript

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:

balagmadhu

UX decision and the Carbon cost

Bala Madhusoodhanan ・ Feb 14 '23

#webdev #greensoftware #engineering #design

Top comments (0)