Day 37 of #100DaysChallenge

Good morning, everyone ☀️
Today’s project is an exciting.

Project Name: Time Tracking Dashboard

This dashboard helps users keep track of time spent on various activities like work, play, study, exercise, social, and self-care. Users can toggle between daily, weekly, and monthly views to see how their time is distributed.

Technologies Used
#HTML

#CSS

#JavaScript

HTML Structure
The HTML file sets up the layout with different sections for profile info, activity cards, and time toggles. Semantic elements like <div>, <img>, <h1>, and <ul> are used for structure and presentation.

CSS Styling
Font Import: I've Used Google Fonts to import the "Rubik" font for a modern and consistent look.

Global Styles: Resets default padding and margin, sets box-sizing, and specifies the font-family for consistency.

Layout: Uses CSS Grid for the card layout and Flexbox for centering elements. The design includes a clean and vibrant color palette, rounded corners, and a responsive layout.

Interactive Styles: Adds hover effects and active states for a more engaging user experience.

Hover Effects: Enhances user interaction by changing styles on hover.

JavaScript Functionality
Period Toggle: Adds event listeners to toggle between daily, weekly, and monthly views.

Dynamic Data Display: Updates the time displayed for each activity based on the selected period.
like Daily, Weekly and Monthly.


GitHub Repository:- https://github.com/roobiwebdev/Day-37-Time-tracking-dashboard/tree/master

Live Demo:- https://roobiwebdev.github.io/Day-37-Time-tracking-dashboard/



-Enjoyed every moment coding this!😎

-Completed 35 out of 100 Challenges so far—keeping up the momentum!🔥

-👨‍💻Join me on my coding journey as I tackle advanced challenges and add innovative touches to every project.

-Feedback is always welcome—would love to hear what you think—drop your thoughts, guys!

Let’s grow together! 🌱

#projects@DevNerd0

Full Source Code

Day 38 of #100DaysChallenge
Good morning, everyone ☀️ Today’s project is another exciting one.

Project Name: Tip Calculator App

This app allows users to quickly calculate the tip amount and the total bill per person by entering the bill amount, choosing a tip percentage, and specifying the number of people. It's clean, simple, and effective, with dynamic updates as inputs change.

Technologies Used
#HTML

#CSS

#JavaScript

HTML Structure
The HTML file sets up the layout with sections for entering the bill amount, selecting the tip percentage, and specifying the number of people. It also includes a display section for showing the calculated tip and total amount per person.

CSS Styling
Font Import: I've used Google Fonts to import the "Space Mono" font for a modern and clean look.

Global Styles: Resets default padding and margin, sets box-sizing, and specifies the font-family for consistency.

Layout: Utilizes Flexbox to center the container and align items. The design includes a clean background, dimensions, padding, border-radius, and a responsive layout.

Interactive Styles: Adds hover effects and active states for a more engaging user experience.

JavaScript Functionality
Input Validation: Validates user inputs for the bill amount, tip percentage, and number of people.

Dynamic Calculations: Calculates and displays the tip amount and total bill per person in real-time as inputs change.

Reset Functionality: Resets all inputs and calculations when the reset button is clicked.

GitHub Repository:- https://github.com/roobiwebdev/Day-38-Tip-Calculator-App-/tree/master

Live Demo:- https://roobiwebdev.github.io/Day-38-Tip-Calculator-App-/


- Feeling pumped on Day 38 of 100—let's keep this energy going! 💪🚀

- Completed 38 out of 100 Challenges so far—keeping up the momentum!🔥

- Join me on my coding journey as I tackle advanced challenges and add innovative touches to every project. 👨‍💻

- Feedback is always welcome—would love to hear what you think—drop your thoughts, guys!

-Let’s grow together! 🚀
#projects@DevNerd0
#100DaysOfChllenge #100DaysOfChllenge, #100DaysOfChllenge,✊✊✊💪😁

Full Source Code

Day 39 of #100DaysChallenge
Good morning, everyone ☀️ Today’s project is another exciting one.

Project Name: Social Media Dashboard

This project provides a comprehensive dashboard to monitor social media metrics like followers, likes, and page views across different platforms. It's clean, simple, and effective, with a dark mode toggle for user preference.

Technologies Used
#HTML

#CSS

#JavaScript

HTML Structure
The HTML file sets up the layout with sections for displaying follower counts, likes, and page views for various social media platforms. It includes elements for a dark mode toggle switch and individual cards for each social media account.

CSS Styling
Font Import: Used Google Fonts to import the "Inter" font for a modern and clean look.

Global Styles: Resets default padding and margin, sets box-sizing, and specifies the font-family for consistency.

Layout: Utilizes Flexbox and Grid for a structured and responsive design. The layout includes a clean background, dimensions, padding, border-radius, and dark mode support.

Interactive Styles: Adds hover effects and active states for a more engaging user experience.

JavaScript Functionality
Dark Mode Toggle: Implements a toggle switch to enable and disable dark mode.

Dynamic Content: Utilizes JavaScript to dynamically update the dashboard based on user interaction.

GitHub Repository:- https://github.com/roobiwebdev/Day-39-Social-Media-Dashboard

Live Demo:- https://roobiwebdev.github.io/Day-39-Social-Media-Dashboard/

Feeling pumped on Day 39 of 100—let's keep this energy going! 🚀

-Enjoyed every moment coding this!😎

-Completed 39 out of 100 challenges so far—keeping up the momentum!🔥

Join me on my coding journey as I tackle advanced challenges and add innovative touches to every project.

Feedback is always welcome—would love to hear what you think—drop your thoughts, guys! Let’s grow together!

#100DaysOfChallenge #CodingJourney #projects@DevNerd0 #SocialMediaDashboard ✊✊✊💪

Full source code

AND

Yesterday, I created a special project for my friend's birthday.
a personalized birthday page with some cool features! It includes interactive gradient text, a birthday song, and colorful fireworks. 🎉🎂

Check out the project and feel free to share your thoughts. 😊🎁 https://roobiwebdev.github.io/Happy-Birthday-Text-animation/

#projects@DevNerd0

if you want to see my code, repo link:- https://github.com/roobiwebdev/Happy-Birthday-Text-animation/