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

Day 39 of #100DaysChallenge
Good morning, everyone ☀️ Today’s project is another exciting one.

Project Name: Social Media Dashboard

This project provides a comprehensive dashboard to monitor social media metrics like followers, likes, and page views across different platforms. It's clean, simple, and effective, with a dark mode toggle for user preference.

Technologies Used
#HTML

#CSS

#JavaScript

HTML Structure
The HTML file sets up the layout with sections for displaying follower counts, likes, and page views for various social media platforms. It includes elements for a dark mode toggle switch and individual cards for each social media account.

CSS Styling
Font Import: Used Google Fonts to import the "Inter" 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 and Grid for a structured and responsive design. The layout includes a clean background, dimensions, padding, border-radius, and dark mode support.

Interactive Styles: Adds hover effects and active states for a more engaging user experience.

JavaScript Functionality
Dark Mode Toggle: Implements a toggle switch to enable and disable dark mode.

Dynamic Content: Utilizes JavaScript to dynamically update the dashboard based on user interaction.

GitHub Repository:- https://github.com/roobiwebdev/Day-39-Social-Media-Dashboard

Live Demo:- https://roobiwebdev.github.io/Day-39-Social-Media-Dashboard/

Feeling pumped on Day 39 of 100—let's keep this energy going! 🚀

-Enjoyed every moment coding this!😎

-Completed 39 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!

#100DaysOfChallenge #CodingJourney #projects@DevNerd0 #SocialMediaDashboard ✊✊✊💪

Full source code

AND

Yesterday, I created a special project for my friend's birthday.
a personalized birthday page with some cool features! It includes interactive gradient text, a birthday song, and colorful fireworks. 🎉🎂

Check out the project and feel free to share your thoughts. 😊🎁 https://roobiwebdev.github.io/Happy-Birthday-Text-animation/

#projects@DevNerd0

if you want to see my code, repo link:- https://github.com/roobiwebdev/Happy-Birthday-Text-animation/

#Day40
Good morning, everyone! ☀️
Today’s project is another exciting one. and  We’ve got some new members joining us from a big channel welcome aboard! 🎉

Project Name: Newsletter Sign-Up Form with Success Message

This project is all about creating an engaging and user-friendly newsletter sign-up form with a success message feature. It’s sleek, interactive, and perfect for gathering subscribers! Plus, it has error state handling to guide users when they enter invalid email addresses.

Technologies Used
#HTML

#CSS

#JavaScript

HTML Structure
The HTML file sets up a clean layout with a form for users to sign up for a newsletter. It includes fields for email input and a success message section.

CSS Styling
Font Import: Used Google Fonts to import the "Roboto" font for a clean and modern look.

Global Styles: Sets default padding and margin, box-sizing, and specifies the font-family for consistency.

Layout: Utilizes Flexbox for a centered and responsive design. The layout includes a vibrant background, intuitive form fields, and a polished success message.

Interactive Styles: Adds hover effects and responsive states to enhance user experience.

JavaScript Functionality
Email Validation: Ensures users enter a valid email address.

Interactive Feedback: Displays a success message upon successful email submission.

Error State Handling: Provides feedback for invalid email entries, guiding users to enter correct information.

User-Friendly: Allows users to dismiss the success message and reset the form easily.


GitHub Repository:- https://github.com/roobiwebdev/Day-40-Newsletter-sign-up-form

Live Demo:- https://roobiwebdev.github.io/Day-40-Newsletter-sign-up-form/


- Enjoyed every moment coding this!

- Completed 40 out of 100 challenges so far—keeping up the momentum!

- Feedback is always welcome—would love to hear what you think—drop your thoughts, guys! Let’s grow together!

#100DaysOfChallenge #CodingJourney #projects@DevNerd0 #NewsletterSignUp✊✊✊😁

Day 41 of #100DaysChallenge

Good morning, everyone! ☀️ Today’s project is another exciting one.

Project Name: Modern Publishing Platform

This project is a sleek, multi-page website for a modern publishing platform.

Technologies Used
#HTML

#CSS

#JavaScript

HTML Structure
Header: Navigation with collapsible lists for "Product", "Company", and "Contact".

Main Content: Sections on the editor, content management, and infrastructure.

Sections: Visually rich highlights on infrastructure.

Article: Details on features like free access and powerful tooling.

Footer: Links to Product, Company, and Contact.

Styling and Functionality
CSS: Modern fonts, responsive design, vibrant backgrounds, hover effects, smooth transitions.

JavaScript: Toggle menus, hide/show features, rotating icons for visual feedback.

GitHub Repository:- https://github.com/roobiwebdev/Day-41-Modern-Publishing-Platform

Live Link:- https://roobiwebdev.github.io/Day-41-Modern-Publishing-Platform/

-Feeling pumped on Day 41 of 100 let's keep this energy going! 🚀

Feedback is always welcome would love to hear what you think drop your thoughts, guys!

Let’s grow together! ✊✊✊

#100DaysOfChallenge #CodingJourney #PublishingPlatform #projects@DevNerd0