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