Dev Nerd

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

lol.... 😁 #mame

#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

#Day_34 Interactive Rating Component ☀️Good morning, everybody! I'm back with another exciting project!😎 Project Name: Interactive Rating Component This project is a user-friendly rating component designed to gather feedback effectively. Users can select a rating and submit their response. Technologies Used: #HTML #CSS (including Flexbox and media queries) #JavaScript 1. HTML Structure The HTML file consists of a rating card with buttons for selecting a rating and a submission section. Semantic HTML elements like div and button are used for structure and functionality. 2. CSS Styling Font Import: I've Uses Google Fonts to import the "Overpass" 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: I've 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 Button Selection and Styling: Adds event listeners to buttons for toggling styles on click, storing the selected rating value. Submit Functionality: Hides the main card and displays a thank-you card with the selected rating. GitHub Repository Link:-https://github.com/roobiwebdev/Day-34-Intractive-Rating-Component Live Demo:-https://roobiwebdev.github.io/Day-34-Intractive-Rating-Component/ - Enjoyed every moment coding this! 😎 - Completed 34 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! 🌱 #100daysofcode #projects@DevNerd0

#Day_33 FAQ Accordion Good morning, everybody! 👋 I'm back with another exciting project! 😊 Project name is called: FAQ Accordion This project is a responsive FAQ accordion designed to enhance user interaction by allowing them to expand and collapse different questions to see corresponding answers. Technologies Used #HTML #CSS  (including Flexbox and media queries) #JavaScript 1, HTML Structure The HTML file contains a series of question-and-answer pairs wrapped in div elements with classes for styling and JavaScript functionality. I've Uses semantic HTML elements like nav for navigation and h1 for the main heading.... 2, CSS Styling Font Import: I've uses Google Fonts to import the "Work Sans" font for this project. Global Styles: Resets default padding and margin, sets box-sizing, and specifies the font-family to keep consistency across different browsers. Flexbox: Utilized to center the container and align items. Background Images: I've uses different images for desktop and mobile views. Container Styling: Sets dimensions, background color, padding, border-radius, and box-shadow, to make it looking good. Responsive Design: I've used Media queries to adjust layout and visibility for different screen sizes. 3, JavaScript Functionality Icons and Answers Toggle: I've used  JavaScript to toggle the visibility of answers and icons when the plus icons are clicked. Array Methods: Utilized array methods like forEach() to loop through NodeLists, adding event listeners to manage the display of answers and icons. - Enjoyed every moment coding this! 😎 -Completed 33 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

Day-32: article preview component I've just completed another front-end coding challenge #100daysofcode #projects@DevNerd0 #100daysofcodechallenge

Day-32: article preview component I've just completed another front-end coding challenge #100daysofcode #projects@DevNerd0 #100daysofcodechallenge

Day-31: coming soon master I've just completed another front-end coding challenge #projects@DevNerd0

Day-30: Bento grid I've just completed another front-end coding challenge from @frontendmentor! . #100daysofcode  #coding #projects@DevNerd0 #html #selflearning #project #code

Day-29: Gear loading animation I've just completed another coding challenge ! . #100daysofcode #projects@DevNerd0   #coding #html #selflearning #project #code

Day-28: Login form I've just completed another coding challenge ! . #100daysofcode #projects@DevNerd0   #coding #html #selflearning #project #code

Day-27: sunnyside agency landing page I've just completed another front-end coding challenge from @frontendmentor! . #100daysofcode #projects@DevNerd0   #coding #html #selflearning #project #code

Day-26: Chat app css illustration. I've just completed another front-end coding challenge from @frontendmentor! . #100daysofcode  #coding #html #selflearning #project #code #projects@DevNerd0

Day-25: Fylo dark theme landing page I've just completed another front-end coding challenge from @frontendmentor! . #100daysofcode  #coding #html #selflearning #project #projects@DevNerd0 #code