Bala MadhusoodhananThis 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
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:
