🎲 Random Number Generator - React.js

A modern Random Number Generator built with React.js to demonstrate the use of the useState Hook, event handling, and conditional rendering. The application generates a random number between 1 and 100 with a single button click and updates the user interface instantly.

---

📖 Project Overview

This project was developed to strengthen my understanding of React fundamentals, especially state management using the useState Hook. It also focuses on creating an attractive and responsive user interface with a colorful gradient background and glassmorphism design.

---

✨ Features

• 🎲 Generate a random number between 1 and 100
• ⚛️ State management using the useState Hook
• 🔄 Dynamic UI updates
• 💬 Conditional rendering
• 🖱️ Interactive button with hover animation
• 🌈 Beautiful gradient background
• 🪟 Glassmorphism card using rgba()
• 🔘 Rounded gradient button
• 📱 Fully responsive layout

---

🛠️ Technologies Used

• React.js
• JavaScript (ES6+)
• HTML5
• CSS3
• React Hooks (useState)

---

📂 Project Structure

src/
├── App.js
├── App.css
├── index.js
└── index.css

🎯 Learning Objectives

This project helped me understand:

• React Functional Components
• React Hooks (useState)
• Event Handling with onClick
• State Management
• Conditional Rendering
• JavaScript Math.random()
• Responsive UI Design
• Glassmorphism and Gradient Styling

---

📚 How It Works

1. The application starts with a placeholder message:

   • "No number generated yet"

2. Clicking the Generate Random Number button creates a random number between 1 and 100.

3. React updates the state using the useState Hook.

4. The generated number is displayed instantly without refreshing the page.

---

👨‍💻 Author

Mukesh Kanna

Aspiring Full Stack Developer passionate about building responsive, interactive, and modern web applications using React.js, JavaScript, HTML, and CSS.

If you like this project, consider ⭐ starring the repository and sharing your feedback.