#Day35 of #100DaysChallenge

wassup fam, ☀️Good morning!
Today's challenge is another exciting one!

Project Name: Intro Component with Sign-Up Form.

This project is a user-friendly sign-up form component designed to collect user information efficiently. Users can input their details and receive immediate feedback if any fields are incorrect. If the form is filled out correctly, a sweet alert pops up, making the user experience even cooler.⚡️

Technologies Used:
#HTML

#CSS (including Flexbox and media queries)

#JavaScript

1. HTML Structure
The HTML file includes a form with inputs for first name, last name, email, and password. It uses semantic HTML elements like div, input, and button for structure and functionality.

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

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

Flexbox: Utilized to center the container and align items efficiently.

Background and Styling: Sets the background color, dimensions, padding, border-radius, and box-shadow for a visually appealing design.

Responsive Design: Utilizes media queries to adjust the layout and visibility for different screen sizes.

3. JavaScript Functionality
Input Validation: Adds event listeners to validate the input fields for first name, last name, email, and password.

Error Handling: Displays error messages and icons if any fields are incorrect or empty.

Sweet Alert: If the form is filled out correctly, a sweet alert pops up, making the user experience even cooler.

Submit Functionality: Shows a success message upon form submission if all inputs are valid.

GitHub Repository Link:- https://github.com/roobiwebdev/Day-35-Intro-component-with-sign-up-form/tree/master

Live Demo:-https://roobiwebdev.github.io/Day-35-Intro-component-with-sign-up-form/



-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

lol.... 😁

#mame

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