Interactive Rating Component

Welcome! 👋

This project is an implementation of the Interactive Rating Component challenge by Frontend Mentor.

A responsive, interactive rating component built with Vite, Tailwind CSS, and ES6 modules. Users can rate a product or service by selecting a rating from 1 to 5. The component displays the total rating count and a thank-you message after submission.

Table of Contents

• Getting Started
• Technologies and Tools
• Challenges
• Learning Outcomes
• Credits
• License

Getting Started

To get started with this project, follow these steps:

1. Clone the repository
2. Install the dependencies: npm install
3. Start the development server: npm run dev
4. Check the terminal for the port number (e.g., http://localhost:{portnumber}) and open your browser to access the project locally.

Alternatively, you can view the project on GitHub Pages: Project Live Link

Technologies and Tools

• HTML
• CSS (with Tailwind CSS)
• JavaScript (ES6 modules)
• Vite
• Prettier
• Prettier-plugin-tailwindcss
• ESLint

Challenges

Some of the challenges that I overcame during this project include:

• Designing a responsive layout that works well on both desktop and mobile devices
• Implementing interactive rating buttons with hover effects
• Handling button click events and updating the total rating count
• Toggling between the rating and thank-you state of the component
• Setting up and configuring Vite, Tailwind CSS, Prettier, its Tailwind CSS plugin, and ESLint for the first time in a project
• Adapting to a utility-first CSS approach with Tailwind CSS
• Organizing and structuring the JavaScript code using ES6 modules for better maintainability
• Implementing semantic HTML for better accessibility and SEO

Overcoming these challenges has allowed me to develop a deeper understanding of the technologies and tools involved, as well as further develop my problem-solving skills in web development.

Learning Outcomes

During the development of this project, I have learned and improved my skills in:

• HTML and CSS
• Responsive web design
• JavaScript and DOM manipulation
• Event handling in JavaScript
• Modular JavaScript and ES6 modules
• Utilizing Vite as a build tool and development server
• Implementing a design using the Tailwind CSS framework
• Configuring Prettier, its Tailwind CSS plugin, and ESLint

Credits

• Challenge by Frontend Mentor.
• Coded by Usman Butt, with code comments by ChatGPT Plus (Model: GPT-4).
• ReadMe ideas and structure by Usman Butt, with writing assistance from ChatGPT Plus (Model: GPT-4).

License

MIT License