Skip to main content

Featured

🎉 Day 46 — React Mastery Completed (Final Summary & Congratulations!)

🎉 Day 46 — React Mastery Completed (Final Summary & Congratulations!) Congratulations, developer! 👏 You’ve successfully completed the 45-Day React.js Roadmap — from understanding the fundamentals to mastering advanced concepts like Redux, Routing, Testing, and Deployment. 📘 What You’ve Learned ✅ React basics — Components, JSX, Props, and State ✅ Hooks — useState, useEffect, useRef, useMemo, and Custom Hooks ✅ Context API and Redux Toolkit for global state management ✅ Routing with React Router & Protected Routes ✅ Data fetching using Fetch API, Axios, React Query ✅ Advanced Patterns — Compound Components, Render Props, HOCs ✅ Styling — CSS Modules, Styled Components, Theming ✅ Animations, Accessibility, Testing, and Performance Optimization ✅ Deployment on Vercel, Netlify, or GitHub Pages 🧩 Final Project Ideas Now that you’re done, build real-world apps to polish your skills: 📝 Task ...
Post a Comment
Read more

📘 Day 38: Events and Event Handling in JavaScript

📘 Day 38: Events and Event Handling in JavaScript

Events are actions that happen in the browser, such as a user clicking a button or typing text. With event handling, JavaScript can detect and respond to these actions.

🔹 Common Event Types

  • onclick – Triggered when an element is clicked
  • onmouseover – When the mouse hovers over an element
  • onkeyup – When a key is released
  • onchange – When input value changes

🧠 Example 1: Inline Event

<button onclick="showMessage()">Click Me</button>
<script>
function showMessage() {
  alert("Hello! You clicked the button!");
}
</script>

🧠 Example 2: Using addEventListener()

const button = document.querySelector("button");

button.addEventListener("click", () => {
  alert("Event handled using addEventListener!");
});

🧠 Example 3: Mouse Events

const box = document.querySelector(".box");

box.addEventListener("mouseover", () => {
  box.style.backgroundColor = "orange";
});

box.addEventListener("mouseout", () => {
  box.style.backgroundColor = "lightgray";
});

💡 Practice

Create a button that changes the page background color each time it’s clicked.

🧑‍💻 Try It Editor

Comments

Post a Comment