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_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_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

#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