Student Motivation is a beginner-friendly React app designed to inspire students every day with simple motivational messages and study tips. This project showcases the use of functional components, inline styling, and event handling in React.
This project includes:
- A warm greeting with encouraging words.
- A motivational button to start the day.
- A set of advice buttons providing daily study tips.
It’s designed with simple and colorful UI using inline styles — great for learners and React beginners.
The app is built entirely using reusable React functional components like Greeting, Button, and End.
The UI is written in JSX, allowing HTML-like syntax directly inside JavaScript.
Each element uses inline CSS-in-JS styling for quick customization and learning.
Each button has its own onClick event handler to display motivational alerts.
Displays a colorful welcome message:
<h1>Hello, Sharada! 🌸</h1>
<p>Today is a fresh page in your story...</p>
🌞 Button Component
Interactive button with a message when hovered:
alert("Good Morning! You're doing great!");
🌟 End Component
Four advice buttons with custom alerts:
Advice 1: Wake up early and start your day with purpose!
Advice 2: Plan your study schedule. Discipline is key!
Advice 3: Stay consistent. Small efforts daily lead to success!
Advice 4: Revise and memorize smartly. Repetition strengthens memory!
🔄 How to Run the Project
Step 1: Create project with Vite
npm create vite@latest student-motivation --template react
cd student-motivation
Step 2: Replace contents of src/ with your files
Then install and run:
npm install
npm run dev
Visit: http://localhost:5173
🎯 Output
🌸 Greeting: Motivational header and message
🌞 Button: Alert for morning greeting
🌟 Advice Section: 4 study tips in beautiful layout
💡 Responsive design with inline styles
🧠 Learning Summary
Building React components
Writing JSX and embedding JavaScript in JSX
Applying inline styles
Handling button events
💬 Final Note
"Push yourself because no one else is going to do it for you." 💪
This app is just the beginning of your development journey!
Happy Coding & Stay Motivated! 🌱🚀