Day 36 of #100DaysChallenge

Good morning, folks! ☀️ Today’s project is an amazing one.

Project Name: Age Calculator App

This app allows users to input their birth date and instantly calculates their age in years, months, and days. It’s clean, simple, and effective. Additionally, it features error states to handle invalid inputs gracefully and animations when displaying age calculations.

Technologies Used
#HTML

#CSS

#JavaScript

HTML Structure The HTML file sets up the basic structure with inputs for day, month, and year. Semantic elements like <div>, <input>, and <button> are used for form handling.

CSS Styling

Font Import: Used Google Fonts to import the "Poppins" font for a stylish and modern 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 box-shadow for an appealing look.

Responsive Design: Media queries ensure the layout adapts beautifully to different screen sizes.

JavaScript Functionality

Input Validation: Adds event listeners to validate day, month, and year inputs.

Error Handling: Displays error messages if inputs are invalid.

Age Calculation: Calculates and displays the user's age in years, months, and days.

Adjusts for cases where days or months are negative:

if(ageDays < 0){
ageMonths--;
ageDays += 30;
}
if(ageMonths < 0){
ageYears--;
ageMonths += 12;
}

Animation: Animates the values when they are displayed, making the user experience more engaging:

animateValue = (obj, start, end, duration) => {
let startTimestamp = null;
const step = (timestamp) => {
if (!startTimestamp) startTimestamp = timestamp;
const progress = Math.min((timestamp - startTimestamp) / duration, 1);
obj.textContent = Math.floor(progress * (end - start) + start);
if (progress < 1) {
window.requestAnimationFrame(step);
}
};
window.requestAnimationFrame(step);
};

GitHub Repository:- https://github.com/roobiwebdev/Day-36-Age-Calculator-App/tree/master

Live Demo:- https://roobiwebdev.github.io/Day-36-Age-Calculator-App/


-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 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,✊✊✊💪😁