endfee 1.0.0

package/testpad.js

@@ -0,0 +1,1914 @@
+username 
+
+
+//React props - Greeting Messages in English and French
+//1.1
+import './App.css'
+import WelcomeMessage from './WelcomeMessage'
+
+function App() {
+
+  return (
+    <>
+      <section id="center">
+
+        <WelcomeMessage name="Alice" language="en" />
+        <WelcomeMessage name="Chloe" language="fr" />
+
+      </section>
+    </>
+  )
+}
+
+export default App
+
+// 1.2
+function WelcomeMessage({ name, language }) {
+
+  let message = "";
+
+  if (language === "en") {
+    message = `Hello, ${name}!`;
+  } else if (language === "fr") {
+    message = `Bonjour, ${name}!`;
+  } else {
+    message = `Hello, ${name}!`; // default
+  }
+
+  return <h3>{message}</h3>;
+}
+
+export default WelcomeMessage;  
+
+
+
+
+//React props - Social Feed
+//2.1
+import PostCard from './PostCard'
+
+function App() {
+
+  const Post_Data = [
+    {
+      id: 1,
+      username: "dev_traveler",
+      content: "Just finished my first React project!",
+      likes: 24,
+      comments: ["Great job!", "Keep it up!", "React is awesome."]
+    },
+    {
+      id: 2,
+      username: "chef_logic",
+      content: "The secret to a perfect steak is the sear.",
+      likes: 85,
+      comments: ["Recipe please?", "Cast iron or grill?"]
+    }
+  ];
+
+  return (
+    <>
+      <h1 style={{ textAlign: "center" }}>Activity Feed</h1>
+
+      {Post_Data.map((post) => (
+        <PostCard key={post.id} post={post} />
+      ))}
+    </>
+  );
+}
+
+export default App;
+
+//2.2
+const PostCard = ({ post }) => {
+
+  return (
+    <div
+      style={{
+        border: "1px solid #ccc",
+        borderRadius: "10px",
+        padding: "15px",
+        margin: "20px",
+        backgroundColor: "#f9f9f9"
+      }}
+    >
+      <h2>{post.username}</h2>
+
+      <p>{post.content}</p>
+
+      <p
+        style={{
+          color: post.likes > 50 ? "red" : "black",
+          fontWeight: post.likes > 50 ? "bold" : "normal"
+        }}
+      >
+        Likes: {post.likes}
+      </p>
+
+      <hr />
+
+      <h4>User Comments</h4>
+
+      {post.comments.map((text, index) => (
+            <div
+                style={{
+                    backgroundColor: "#100101",
+                    padding: "8px",
+                    margin: "5px 0",
+                    borderRadius: "5px"
+                }}
+                key={index}
+            >
+            {text}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default PostCard;
+
+
+
+//React props - Profile Card Component
+//3.1
+import './App.css'
+import ProfileCard from './ProfileCard'
+
+function App() {
+
+  return (
+    <>
+      <h1 style={{ textAlign: "center" }}>Profile Cards</h1>
+
+      <div style={{ display: "flex", justifyContent: "center" }}>
+
+        <ProfileCard name="Alice" age={23} isOnline={true} />
+        <ProfileCard name="Bob" age={21} isOnline={false} />
+        <ProfileCard name="Carlos" age={25} isOnline={true} />
+
+      </div>
+    </>
+  )
+}
+
+export default App
+
+//3.2
+const ProfileCard = ({ name, age, isOnline }) => {
+
+  return (
+    <div
+      style={{
+        border: "1px solid #ccc",
+        borderRadius: "10px",
+        padding: "15px",
+        margin: "15px",
+        width: "250px",
+        boxShadow: "0 2px 5px rgba(0,0,0,0.1)"
+      }}
+    >
+      <h2>{name}</h2>
+      <p>Age: {age}</p>
+
+      <p
+        style={{
+          color: isOnline ? "green" : "gray",
+          fontWeight: "bold"
+        }}
+      >
+        {isOnline ? "Online" : "Offline"}
+      </p>
+    </div>
+  );
+};
+
+export default ProfileCard;
+
+
+
+
+// React Basic State - Disable Button After Click
+//4
+import { useState } from 'react'
+import './App.css'
+
+function App() {
+
+  const [isDisabled, setIsDisabled] = useState(false);
+
+  const handleClick = () => {
+    setIsDisabled(true);
+  };
+
+  return (
+    <>
+      <h2 style={{ textAlign: "center" }}>Disable Button After Click</h2>
+
+      <div style={{ textAlign: "center", marginTop: "20px" }}>
+        <button
+          onClick={handleClick}
+          disabled={isDisabled}
+          style={{
+            padding: "10px 20px",
+            cursor: isDisabled ? "not-allowed" : "pointer"
+          }}
+        >
+          {isDisabled ? "Clicked" : "Click Me"}
+        </button>
+      </div>
+    </>
+  )
+}
+
+export default App
+
+
+
+// React Basic State - Dropdown Selection
+//5
+import { useState } from 'react'
+import './App.css'
+
+function App() {
+
+  const options = ["HTML", "CSS", "JavaScript", "React"];
+
+  const [selected, setSelected] = useState(options[0]);
+
+  const handleChange = (e) => {
+    setSelected(e.target.value);
+  };
+
+  return (
+    <>
+      <div style={{ textAlign: "center", marginTop: "40px" }}>
+
+        <h2>Select Technology:</h2>
+
+        <select
+          value={selected}
+          onChange={handleChange}
+          style={{ padding: "8px", fontSize: "16px" }}
+        >
+          {options.map((opt, index) => (
+            <option key={index} value={opt}>
+              {opt}
+            </option>
+          ))}
+        </select>
+
+        <p style={{ marginTop: "20px", fontSize: "18px" }}>
+          You selected: <b>{selected}</b>
+        </p>
+
+      </div>
+    </>
+  )
+}
+
+export default App
+
+
+// React Basic State - Background Color Changer
+//6
+import { useState } from 'react'
+import './App.css'
+
+function App() {
+
+  const [bgColor, setBgColor] = useState("#ffffff");
+
+  const getRandomColor = () => {
+    const letters = "0123456789ABCDEF";
+    let color = "#";
+
+    for (let i = 0; i < 6; i++) {
+      color += letters[Math.floor(Math.random() * 16)];
+    }
+
+    return color;
+  };
+
+  const handleClick = () => {
+    setBgColor(getRandomColor());
+  };
+
+  return (
+    <>
+      <div
+        style={{
+          height: "100vh",
+          backgroundColor: bgColor,
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          flexDirection: "column"
+        }}
+      >
+        <h2>Background Color Changer</h2>
+
+        <button
+          onClick={handleClick}
+          style={{
+            padding: "10px 20px",
+            fontSize: "16px",
+            cursor: "pointer"
+          }}
+        >
+          Change Color
+        </button>
+
+        <p style={{ marginTop: "15px" }}>
+          Current Color: <b>{bgColor}</b>
+        </p>
+      </div>
+    </>
+  )
+}
+
+export default App
+
+
+
+// React Basic State - password input show/hide.
+//7
+import { useState } from 'react'
+import './App.css'
+
+function App() {
+
+  const [showPassword, setShowPassword] = useState(false);
+
+  const handleToggle = () => {
+    setShowPassword(!showPassword);
+  };
+
+  return (
+    <>
+      <div style={{ margin: "50px" }}>
+
+        <h1>Password Field</h1>
+
+        <input
+          type={showPassword ? "text" : "password"}
+          placeholder="Enter password"
+          style={{
+            padding: "10px",
+            fontSize: "16px",
+            marginBottom: "15px",
+            width: "250px"
+          }}
+        />
+
+        <br />
+
+        <button
+          onClick={handleToggle}
+          style={{
+            padding: "8px 15px",
+            cursor: "pointer"
+          }}
+        >
+          {showPassword ? "Hide" : "Show"}
+        </button>
+
+      </div>
+    </>
+  )
+}
+
+export default App
+
+
+
+//React Basic State - Input Live Preview
+//8
+import { useState } from 'react'
+import './App.css'
+
+function App() {
+
+  const [text, setText] = useState("");
+
+  const handleChange = (e) => {
+    setText(e.target.value);
+  };
+
+  return (
+    <>
+      <div style={{ margin: "50px" }}>
+
+        <h1>Live Input Preview</h1>
+
+        <input
+          type="text"
+          value={text}
+          onChange={handleChange}
+          placeholder="Type something..."
+          style={{
+            padding: "10px",
+            fontSize: "16px",
+            width: "250px",
+            marginBottom: "20px"
+          }}
+        />
+
+        <p style={{ fontSize: "20px" }}>
+          You typed: <b>{text}</b>
+        </p>
+
+      </div>
+    </>
+  )
+}
+
+export default App
+
+
+// React Basic State - Random Quote Generator
+//9
+import { useState } from 'react'
+import './App.css'
+
+function App() {
+
+  const quotes = [
+    "Dream big and dare to fail.",
+    "Success is not final, failure is not fatal.",
+    "Believe you can and you're halfway there.",
+    "Do something today that your future self will thank you for.",
+    "Stay hungry, stay foolish."
+  ];
+
+  const [quote, setQuote] = useState(quotes[0]);
+
+  const generateQuote = () => {
+    const randomIndex = Math.floor(Math.random() * quotes.length);
+    setQuote(quotes[randomIndex]);
+  };
+
+  return (
+    <>
+      <div style={{ margin: "50px" }}>
+
+        <h1>Random Quote Generator</h1>
+
+        <p style={{ fontSize: "20px", margin: "20px 0" }}>
+          {quote}
+        </p>
+
+        <button
+          onClick={generateQuote}
+          style={{
+            padding: "10px 20px",
+            cursor: "pointer"
+          }}
+        >
+          Generate Quote
+        </button>
+
+      </div>
+    </>
+  )
+}
+
+export default App
+
+
+
+//React Basic State - Character Limit with Warning
+//10
+import { useState } from 'react'
+import './App.css'
+
+function App() {
+
+  const maxLimit = 20;
+
+  const [text, setText] = useState("");
+
+  const handleChange = (e) => {
+    const value = e.target.value;
+
+    if (value.length <= maxLimit) {
+      setText(value);
+    }
+  };
+
+  const remaining = maxLimit - text.length;
+
+  return (
+    <>
+      <div style={{ margin: "50px" }}>
+
+        <h1>Character Limit Input</h1>
+
+        <input
+          type="text"
+          value={text}
+          onChange={handleChange}
+          style={{
+            padding: "10px",
+            fontSize: "16px",
+            width: "300px",
+            marginBottom: "15px"
+          }}
+        />
+
+        <p>Remaining: {remaining}</p>
+
+        {remaining === 0 && (
+          <p style={{ color: "red", fontWeight: "bold" }}>
+            Limit reached!
+          </p>
+        )}
+
+      </div>
+    </>
+  )
+}
+
+export default App
+
+
+//React Complex State - Toggle Status Inside Object
+//11
+import { useState } from 'react'
+import './App.css'
+
+function App() {
+
+  const [task, setTask] = useState({
+    title: "Learn React",
+    completed: false
+  });
+
+  const toggleStatus = () => {
+    setTask({
+      ...task,
+      completed: !task.completed
+    });
+  };
+
+  return (
+    <>
+      <div style={{ margin: "50px" }}>
+
+        <h2>
+          {task.title} - {task.completed ? "Completed" : "Pending"}
+        </h2>
+
+        <button
+          onClick={toggleStatus}
+          style={{
+            padding: "10px 20px",
+            cursor: "pointer"
+          }}
+        >
+          Toggle Status
+        </button>
+
+      </div>
+    </>
+  )
+}
+
+export default App
+
+
+
+// React Complex State - Update Specific User in List
+//12
+import { useState } from 'react'
+import './App.css'
+
+function App() {
+
+  const [users, setUsers] = useState([
+    { id: 1, name: "A" },
+    { id: 2, name: "B" }
+  ]);
+
+  const updateUser = () => {
+    const updatedUsers = users.map((user) => {
+      if (user.id === 2) {
+        return { ...user, name: "Updated" };
+      }
+      return user;
+    });
+
+    setUsers(updatedUsers);
+  };
+
+  return (
+    <>
+      <div style={{ margin: "50px" }}>
+
+        <h2>User List</h2>
+
+        {users.map((user) => (
+          <p key={user.id}>
+            User {user.id}: {user.name}
+          </p>
+        ))}
+
+        <button
+          onClick={updateUser}
+          style={{
+            padding: "10px 20px",
+            marginTop: "10px",
+            cursor: "pointer"
+          }}
+        >
+          Update User
+        </button>
+
+      </div>
+    </>
+  )
+}
+
+export default App
+
+
+
+//React Complex State - Employee Form with State Management
+//13
+import { useState } from 'react'
+import './App.css'
+
+function App() {
+
+  const [formData, setFormData] = useState({
+    name: "",
+    department: "",
+    salary: ""
+  });
+
+  const [submittedData, setSubmittedData] = useState(null);
+
+  // Single change handler
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+
+    setFormData({
+      ...formData,
+      [name]: value
+    });
+  };
+
+  // Submit handler
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    setSubmittedData(formData);
+  };
+
+  // Reset handler
+  const handleReset = () => {
+    setFormData({
+      name: "",
+      department: "",
+      salary: ""
+    });
+    setSubmittedData(null);
+  };
+
+  return (
+    <>
+      <div style={{ margin: "50px" }}>
+
+        <h2>Employee Form</h2>
+
+        <form onSubmit={handleSubmit}>
+
+          <input
+            type="text"
+            name="name"
+            placeholder="Employee Name"
+            value={formData.name}
+            onChange={handleChange}
+            style={{ display: "block", marginBottom: "10px", padding: "8px" }}
+          />
+
+          <input
+            type="text"
+            name="department"
+            placeholder="Department"
+            value={formData.department}
+            onChange={handleChange}
+            style={{ display: "block", marginBottom: "10px", padding: "8px" }}
+          />
+
+          <input
+            type="number"
+            name="salary"
+            placeholder="Salary"
+            value={formData.salary}
+            onChange={handleChange}
+            style={{ display: "block", marginBottom: "10px", padding: "8px" }}
+          />
+
+          <button type="submit" style={{ marginRight: "10px" }}>
+            Submit
+          </button>
+
+          <button type="button" onClick={handleReset}>
+            Reset
+          </button>
+
+        </form>
+
+        {/* Display Data */}
+        {submittedData && (
+          <div style={{ marginTop: "20px" }}>
+            <h3>Employee Details:</h3>
+            <p>Name: {submittedData.name}</p>
+            <p>Department: {submittedData.department}</p>
+            <p>Salary: {submittedData.salary}</p>
+          </div>
+        )}
+
+      </div>
+    </>
+  )
+}
+
+export default App
+
+
+
+//React Complex State - Search Functionality 
+//14
+import { useState } from 'react'
+import './App.css'
+
+function App() {
+
+  const usersData = [
+    { id: 1, name: "Amit Sharma", city: "Delhi" },
+    { id: 2, name: "Neha Verma", city: "Mumbai" },
+    { id: 3, name: "Rahul Singh", city: "Chandigarh" },
+    { id: 4, name: "Priya Mehta", city: "Pune" }
+  ];
+
+  const [search, setSearch] = useState("");
+
+  const handleChange = (e) => {
+    setSearch(e.target.value);
+  };
+
+  // Filter users (case-insensitive)
+  const filteredUsers = usersData.filter((user) =>
+    user.name.toLowerCase().includes(search.toLowerCase())
+  );
+
+  return (
+    <>
+      <div style={{ margin: "50px", maxWidth: "400px" }}>
+
+        <h2>User Search</h2>
+
+        <input
+          type="text"
+          placeholder="Search by name..."
+          value={search}
+          onChange={handleChange}
+          style={{
+            width: "100%",
+            padding: "10px",
+            marginBottom: "15px"
+          }}
+        />
+
+        {filteredUsers.map((user) => (
+          <div
+            key={user.id}
+            style={{
+              border: "1px solid #ccc",
+              padding: "10px",
+              marginBottom: "10px",
+              borderRadius: "5px"
+            }}
+          >
+            <strong>{user.name}</strong>
+            <span style={{ float: "right" }}>{user.city}</span>
+          </div>
+        ))}
+
+      </div>
+    </>
+  )
+}
+
+export default App
+
+
+
+// React Complex State - Product Dashboard with Category Filter
+//15
+import { useState } from "react";
+import "./App.css";
+
+function App() {
+
+  const products = [
+    { id: 1, name: "Laptop", price: 80000, category: "Premium" },
+    { id: 2, name: "Mouse", price: 500, category: "Basic" },
+    { id: 3, name: "Keyboard", price: 1500, category: "Basic" },
+    { id: 4, name: "Smartphone", price: 60000, category: "Premium" },
+    { id: 5, name: "Monitor", price: 12000, category: "Deluxe" },
+    { id: 6, name: "Headphones", price: 3000, category: "Deluxe" }
+  ];
+
+  const [category, setCategory] = useState("All");
+
+  const handleChange = (e) => {
+    setCategory(e.target.value);
+  };
+
+  const filteredProducts =
+    category === "All"
+      ? products
+      : products.filter((p) => p.category === category);
+
+  return (
+    <>
+      <div style={{ padding: "20px", background: "#eef2f5", minHeight: "100vh" }}>
+
+        <h2>Product Dashboard</h2>
+
+        <select
+          value={category}
+          onChange={handleChange}
+          style={{
+            padding: "10px",
+            width: "100%",
+            marginBottom: "20px",
+            borderRadius: "8px"
+          }}
+        >
+          <option>All</option>
+          <option>Premium</option>
+          <option>Deluxe</option>
+          <option>Basic</option>
+        </select>
+
+        <div
+          style={{
+            display: "grid",
+            gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))",
+            gap: "20px"
+          }}
+        >
+
+          {filteredProducts.map((p) => (
+            <div
+              key={p.id}
+              style={{
+                background: "#fff",
+                padding: "20px",
+                borderRadius: "15px",
+                boxShadow: "0 4px 10px rgba(0,0,0,0.1)"
+              }}
+            >
+              <h3>{p.name}</h3>
+              <h2>₹{p.price}</h2>
+
+              <span
+                style={{
+                  padding: "5px 12px",
+                  borderRadius: "20px",
+                  color: "#fff",
+                  background:
+                    p.category === "Premium"
+                      ? "#2b6cb0"
+                      : p.category === "Deluxe"
+                      ? "#38a169"
+                      : "#718096"
+                }}
+              >
+                {p.category}
+              </span>
+            </div>
+          ))}
+
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default App;
+
+
+
+//E-Commerce Product Categories (Nested Routing) 
+//16.1
+npm install react-router-dom
+
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+import Products from "./Products";
+import Electronics from "./Electronics";
+import Clothing from "./Clothing";
+import Furniture from "./Furniture";
+
+function App() {
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route path="/products" element={<Products />}>
+          <Route path="electronics" element={<Electronics />} />
+          <Route path="clothing" element={<Clothing />} />
+          <Route path="furniture" element={<Furniture />} />
+        </Route>
+      </Routes>
+    </BrowserRouter>
+  );
+}
+
+export default App;
+
+
+//16.2
+import { Link, Outlet } from "react-router-dom";
+
+const Products = () => {
+  return (
+    <div style={{ margin: "40px" }}>
+      <h1>Products Page</h1>
+
+      <nav style={{ marginBottom: "20px" }}>
+        <Link to="electronics">Electronics</Link> |{" "}
+        <Link to="clothing">Clothing</Link> |{" "}
+        <Link to="furniture">Furniture</Link>
+      </nav>
+
+      <hr />
+
+      {/* Nested content yaha render hoga */}
+      <Outlet />
+    </div>
+  );
+};
+
+export default Products;
+
+// 16.3
+const Electronics = () => {
+  return (
+    <div>
+      <h2>Electronics</h2>
+      <ul>
+        <li>Mobile</li>
+        <li>Laptop</li>
+        <li>Headphones</li>
+      </ul>
+    </div>
+  );
+};
+
+export default Electronics;
+
+//16.4
+const Clothing = () => {
+  return (
+    <div>
+      <h2>Clothing</h2>
+      <ul>
+        <li>T-Shirts</li>
+        <li>Jeans</li>
+        <li>Jackets</li>
+      </ul>
+    </div>
+  );
+};
+
+export default Clothing;
+
+//16.5
+const Furniture = () => {
+  return (
+    <div>
+      <h2>Furniture</h2>
+      <ul>
+        <li>Sofa</li>
+        <li>Table</li>
+        <li>Chair</li>
+      </ul>
+    </div>
+  );
+};
+
+export default Furniture;
+
+
+//User Profile Page (Dynamic Routing + useParams) 
+//17
+export const users = [
+  {
+    id: 101,
+    name: "Rahul",
+    email: "rahul@gmail.com",
+    posts: ["Post 1", "Post 2"]
+  },
+  {
+    id: 102,
+    name: "Priya",
+    email: "priya@gmail.com",
+    posts: ["Post A", "Post B"]
+  }
+];
+
+//17.1
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+import Users from "./Users";
+import UserProfile from "./UserProfile";
+
+function App() {
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route path="/users" element={<Users />} />
+        <Route path="/users/:id" element={<UserProfile />} />
+      </Routes>
+    </BrowserRouter>
+  );
+}
+export default App;
+
+//17.2
+import { Link } from "react-router-dom";
+import { users } from "./data";
+
+const Users = () => {
+  return (
+    <div style={{ margin: "40px" }}>
+      <h2>Users List</h2>
+
+      {users.map((u) => (
+        <p key={u.id}>
+          <Link to={`/users/${u.id}`}>{u.name}</Link>
+        </p>
+      ))}
+    </div>
+  );
+};
+export default Users;
+
+//17.3
+import { useParams, Link } from "react-router-dom";
+import { users } from "./data";
+
+const UserProfile = () => {
+
+  const { id } = useParams();
+
+  const user = users.find((u) => u.id === Number(id));
+
+  if (!user) {
+    return <h2>User not found</h2>;
+  }
+
+  return (
+    <div style={{ margin: "40px" }}>
+      <h2>{user.name}'s Profile</h2>
+
+      <p>Email: {user.email}</p>
+
+      <h4>Posts:</h4>
+      <ul>
+        {user.posts.map((p, i) => (
+          <li key={i}>{p}</li>
+        ))}
+      </ul>
+
+      <br />
+
+      <Link to="/users">⬅ Back to Users</Link>
+    </div>
+  );
+};
+
+export default UserProfile;
+
+
+//React - The Smart Inventory Dashboard
+//18
+import React from "react";
+
+function App() {
+  const products = [
+    { id: 101, name: "Laptop", price: 85000, category: "Electronics", stock: 15 },
+    { id: 102, name: "Office Chair", price: 12000, category: "Furniture", stock: 0 },
+    { id: 103, name: "Smart Watch", price: 5000, category: "Electronics", stock: 4 },
+    { id: 104, name: "Desk Lamp", price: 1500, category: "Furniture", stock: 8 },
+    { id: 105, name: "Mechanical Keyboard", price: 7000, category: "Electronics", stock: 25 },
+    { id: 106, name: "Gaming Mouse", price: 3500, category: "Electronics", stock: 2 }
+  ];
+
+  return (
+    <div className="min-h-screen bg-gray-100 p-6">
+      <h1 className="text-4xl font-bold text-center mb-6">
+        Product Dashboard
+      </h1>
+
+      <div className="overflow-x-auto">
+        <table className="w-full border border-gray-400 bg-white">
+          <thead>
+            <tr className="bg-gray-200">
+              <th className="border p-3">Name</th>
+              <th className="border p-3">Category</th>
+              <th className="border p-3">Price</th>
+              <th className="border p-3">Stock</th>
+              <th className="border p-3">Availability Status</th>
+            </tr>
+          </thead>
+
+          <tbody>
+            {products.map((product) => (
+              <tr
+                key={product.id}
+                style={{
+                  color:
+                    product.stock === 0
+                      ? "red"
+                      : product.stock <= 10
+                      ? "orange"
+                      : product.price > 50000
+                      ? "green"
+                      : "black",
+                  fontStyle: product.stock === 0 ? "italic" : "normal"
+                }}
+              >
+                <td className="border p-3 text-center">{product.name}</td>
+                <td className="border p-3 text-center">{product.category}</td>
+                <td className="border p-3 text-center">₹{product.price}</td>
+                <td className="border p-3 text-center">{product.stock}</td>
+                <td className="border p-3 text-center">
+                  {product.stock === 0
+                    ? "Out of Stock"
+                    : product.stock <= 10
+                    ? "Limited Stock"
+                    : "In Stock"}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      {/* Statistics */}
+      <div className="bg-white mt-6 p-5 rounded shadow text-center">
+        <h2 className="text-2xl font-semibold mb-3">
+          Catalog Statistics
+        </h2>
+
+        <p>
+          <b>Total Items in Catalog:</b> {products.length}
+        </p>
+
+        <p>
+          <b>Average Product Price:</b> ₹
+          {(
+            products.reduce((sum, item) => sum + item.price, 0) /
+            products.length
+          ).toFixed(2)}
+        </p>
+      </div>
+
+      {/* Premium Products */}
+      <div className="bg-white mt-6 p-5 rounded shadow">
+        <h2 className="text-2xl font-semibold text-center mb-3">
+          Premium Products
+        </h2>
+
+        {products.filter((p) => p.price > 10000).length > 0 ? (
+          <ul className="list-disc pl-6">
+            {products
+              .filter((p) => p.price > 10000)
+              .map((p) => (
+                <li key={p.id}>{p.name}</li>
+              ))}
+          </ul>
+        ) : (
+          <p className="text-center">
+            No premium products available at the moment.
+          </p>
+        )}
+      </div>
+
+      {/* Electronics Clearance */}
+      <div className="bg-white mt-6 p-5 rounded shadow">
+        <h2 className="text-2xl font-semibold text-center mb-3">
+          Electronics Clearance
+        </h2>
+
+        <ul className="list-disc pl-6">
+          {products
+            .filter(
+              (p) =>
+                p.category === "Electronics" &&
+                p.stock > 0 &&
+                p.stock < 5
+            )
+            .map((p) => (
+              <li key={p.id}>
+                {p.name} - Only {p.stock} left
+              </li>
+            ))}
+        </ul>
+      </div>
+    </div>
+  );
+}
+
+export default App;
+
+
+//React JSX - Student Dropdown
+//19
+import React from "react";
+
+function StudentDropdown() {
+  const students = [
+    { id: 1, name: "Amit" },
+    { id: 2, name: "Riya" },
+    { id: 3, name: "John" },
+    { id: 4, name: "Sneha" }
+  ];
+
+  return (
+    <div>
+      <h2>Student Dropdown</h2>
+
+      <select>
+        <option>Select Student</option>
+
+        {students.map((student) => (
+          <option key={student.id}>
+            {student.name}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+}
+
+export default StudentDropdown;
+
+
+//React - E-commerce Product Dashboard 
+//20.1
+import { useEffect, useState } from "react";
+import ProductTable from "./ProductTable";
+
+function App() {
+  const [products, setProducts] = useState([]);
+  const [sortOrder, setSortOrder] = useState("low");
+
+  useEffect(() => {
+    fetch("https://fakestoreapi.com/products")
+      .then((res) => res.json())
+      .then((data) => setProducts(data))
+      .catch(() => setProducts(null));
+  }, []);
+
+  const sortedProducts =
+    products &&
+    [...products].sort((a, b) =>
+      sortOrder === "low"
+        ? a.price - b.price
+        : b.price - a.price
+    );
+
+  if (products === null) {
+    return (
+      <h2 className="text-center text-red-500 mt-10">
+        Failed to load products.
+      </h2>
+    );
+  }
+
+  return (
+    <div className="p-5">
+      <h1 className="text-2xl font-bold text-center mb-4">
+        Product Dashboard
+      </h1>
+
+      <div className="flex justify-center mb-4">
+        <select
+          className="border p-2 rounded"
+          value={sortOrder}
+          onChange={(e) => setSortOrder(e.target.value)}
+        >
+          <option value="low">Price Low to High</option>
+          <option value="high">Price High to Low</option>
+        </select>
+      </div>
+
+      <ProductTable products={sortedProducts || []} />
+    </div>
+  );
+}
+
+export default App;
+
+//20.2
+function ProductTable({ products }) {
+  return (
+    <table className="w-full border border-gray-300">
+      <thead>
+        <tr className="bg-gray-200">
+          <th className="border p-2">ID</th>
+          <th className="border p-2">Product Name</th>
+          <th className="border p-2">Price</th>
+          <th className="border p-2">Category</th>
+          <th className="border p-2">Rating</th>
+          <th className="border p-2">Product Image</th>
+        </tr>
+      </thead>
+
+      <tbody>
+        {products.map((product) => (
+          <tr key={product.id}>
+            <td className="border p-2 text-center">
+              {product.id}
+            </td>
+
+            <td className="border p-2">
+              {product.title}
+            </td>
+
+            <td className="border p-2 text-center">
+              ${product.price}
+            </td>
+
+            <td className="border p-2 text-center">
+              {product.category}
+            </td>
+
+            <td className="border p-2 text-center">
+              {product.rating.rate}
+            </td>
+
+            <td className="border p-2 text-center">
+              <img
+                src={product.image}
+                alt={product.title}
+                className="w-16 h-16 object-contain mx-auto"
+              />
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}
+
+export default ProductTable;
+
+
+//React - Product Category Filter Using Checkbox
+//21
+import { useState } from "react";
+
+function App() {
+  const products = [
+    {
+      id: 1,
+      name: "Laptop",
+      category: "Electronics",
+      price: 50000,
+    },
+    {
+      id: 2,
+      name: "T-Shirt",
+      category: "Clothing",
+      price: 1200,
+    },
+    {
+      id: 3,
+      name: "Mobile",
+      category: "Electronics",
+      price: 30000,
+    },
+    {
+      id: 4,
+      name: "Jeans",
+      category: "Clothing",
+      price: 2000,
+    },
+  ];
+
+  const [electronics, setElectronics] = useState(false);
+  const [clothing, setClothing] = useState(false);
+
+  const filteredProducts = products.filter((product) => {
+    if (!electronics && !clothing) return true;
+
+    return (
+      (electronics && product.category === "Electronics") ||
+      (clothing && product.category === "Clothing")
+    );
+  });
+
+  return (
+    <div className="p-5">
+      <h1 className="text-2xl font-bold text-center mb-4">
+        Product Category Filter
+      </h1>
+
+      <div className="flex gap-6 mb-4">
+        <label>
+          <input
+            type="checkbox"
+            checked={electronics}
+            onChange={() => setElectronics(!electronics)}
+          />{" "}
+          Electronics
+        </label>
+
+        <label>
+          <input
+            type="checkbox"
+            checked={clothing}
+            onChange={() => setClothing(!clothing)}
+          />{" "}
+          Clothing
+        </label>
+      </div>
+
+      <table className="w-full border border-gray-300">
+        <thead>
+          <tr className="bg-gray-200">
+            <th className="border p-2">ID</th>
+            <th className="border p-2">Product Name</th>
+            <th className="border p-2">Category</th>
+            <th className="border p-2">Price</th>
+          </tr>
+        </thead>
+
+        <tbody>
+          {filteredProducts.map((product) => (
+            <tr key={product.id}>
+              <td className="border p-2 text-center">{product.id}</td>
+              <td className="border p-2">{product.name}</td>
+              <td className="border p-2 text-center">
+                {product.category}
+              </td>
+              <td className="border p-2 text-center">
+                ₹{product.price}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+export default App;
+
+
+//React - Product Dropdown Viewer
+//22
+import { useEffect, useState } from "react";
+
+function App() {
+  const [products, setProducts] = useState([]);
+  const [selectedProduct, setSelectedProduct] = useState("");
+
+  useEffect(() => {
+    fetch("https://fakestoreapi.com/products")
+      .then((res) => res.json())
+      .then((data) => setProducts(data))
+      .catch((err) => console.log(err));
+  }, []);
+
+  const product = products.find(
+    (p) => p.id === Number(selectedProduct)
+  );
+
+  return (
+    <div className="max-w-2xl mx-auto p-5">
+      <h1 className="text-3xl font-bold text-center mb-6">
+        Product Viewer
+      </h1>
+
+      <select
+        className="w-full border p-3 rounded mb-6"
+        value={selectedProduct}
+        onChange={(e) => setSelectedProduct(e.target.value)}
+      >
+        <option value="">Select Product</option>
+
+        {products.map((p) => (
+          <option key={p.id} value={p.id}>
+            {p.title}
+          </option>
+        ))}
+      </select>
+
+      {product ? (
+        <div className="border rounded-lg p-5 shadow">
+          <img
+            src={product.image}
+            alt={product.title}
+            className="w-48 h-48 object-contain mx-auto"
+          />
+
+          <h2 className="text-2xl text-center mt-4 mb-4">
+            {product.title}
+          </h2>
+
+          <div className="border p-3 rounded mb-3">
+            <strong>Category:</strong> {product.category}
+          </div>
+
+          <div className="border p-3 rounded mb-3">
+            <strong>Price:</strong> ${product.price}
+          </div>
+
+          <div className="border p-3 rounded">
+            {product.description}
+          </div>
+        </div>
+      ) : (
+        <div className="border border-dashed p-6 text-center rounded">
+          Select a product to view details
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default App;
+
+
+//React - Image Slider
+//23
+import { useState } from "react";
+
+function App() {
+  const images = [
+    "https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=800",
+    "https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?w=800",
+    "https://images.unsplash.com/photo-1493246507139-91e8fad9978e?w=800",
+    "https://images.unsplash.com/photo-1519125323398-675f0ddb6308?w=800"
+  ];
+
+  const [index, setIndex] = useState(0);
+
+  const nextImage = () => {
+    setIndex((index + 1) % images.length);
+  };
+
+  const prevImage = () => {
+    setIndex((index - 1 + images.length) % images.length);
+  };
+
+  return (
+    <div className="p-5">
+      <h1 className="text-3xl text-center font-bold mb-5">
+        Image Slider
+      </h1>
+
+      <img
+        src={images[index]}
+        alt="slider"
+        className="w-full max-w-3xl h-96 object-cover mx-auto rounded-lg"
+      />
+
+      <div className="flex justify-between max-w-3xl mx-auto mt-5">
+        <button
+          onClick={prevImage}
+          className="bg-blue-500 text-white px-4 py-2 rounded"
+        >
+          Previous
+        </button>
+
+        <button
+          onClick={nextImage}
+          className="bg-blue-500 text-white px-4 py-2 rounded"
+        >
+          Next
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export default App;
+
+
+
+
+//React - password validator
+//24
+import { useState } from "react";
+
+function App() {
+  const [password, setPassword] = useState("");
+
+  return (
+    <div className="p-10">
+      <h1 className="text-5xl font-bold mb-10">
+        Password Validator
+      </h1>
+
+      <input
+        type="password"
+        placeholder="Enter Password"
+        value={password}
+        onChange={(e) => setPassword(e.target.value)}
+        className="w-full border-2 border-gray-300 rounded-lg p-4 text-2xl"
+      />
+
+      <div className="mt-12 space-y-6 text-2xl font-bold">
+        <p
+          className={
+            /^[A-Z]/.test(password)
+              ? "text-green-600"
+              : "text-red-600"
+          }
+        >
+          First character should be Capital
+        </p>
+
+        <p
+          className={
+            /[a-z]/.test(password)
+              ? "text-green-600"
+              : "text-red-600"
+          }
+        >
+          Must contain one small letter
+        </p>
+
+        <p
+          className={
+            /[!@#$%^&*(),.?":{}|<>]/.test(password)
+              ? "text-green-600"
+              : "text-red-600"
+          }
+        >
+          Must contain one special character
+        </p>
+
+        <p
+          className={
+            /[0-9]/.test(password)
+              ? "text-green-600"
+              : "text-red-600"
+          }
+        >
+          Must contain one number (0-9)
+        </p>
+      </div>
+    </div>
+  );
+}
+
+export default App;
+
+
+
+
+
+
+
+
+
+
+
+//TS Library Management System
+//1
+enum BookStatus {
+    Available,
+    CheckedOut,
+    Reserved
+}
+
+type Book = [string, string, number, BookStatus];
+
+function borrowBook(book: Book): string {
+    if (book[3] === BookStatus.Available) {
+        book[3] = BookStatus.CheckedOut;
+        return `"${book[0]}" has been successfully borrowed.`;
+    } else if (book[3] === BookStatus.Reserved) {
+        return `"${book[0]}" is reserved and cannot be borrowed.`;
+    } else {
+        return `"${book[0]}" is already checked out.`;
+    }
+}
+
+
+let book1: Book = [
+    "The Great Gatsby",
+    "F. Scott Fitzgerald",
+    123456,
+    BookStatus.Available
+];
+
+console.log(borrowBook(book1)); 
+console.log(borrowBook(book1)); 
+
+
+//TS-Movie Ticket Booking 
+//2
+enum SeatType {
+    Regular,
+    Premium,
+    VIP
+}
+
+type Ticket = [string, number, SeatType, number];
+
+function calculateDiscount(ticket: Ticket): number {
+    if (ticket[2] === SeatType.Premium) {
+        return ticket[3] * 0.9;
+    } else if (ticket[2] === SeatType.VIP) {
+        return ticket[3] * 0.8;
+    }
+    return ticket[3];
+}
+
+let ticket1: Ticket = ["Avengers", 12, SeatType.Premium, 500];
+console.log(calculateDiscount(ticket1));
+
+let ticket2: Ticket = ["Batman", 5, SeatType.VIP, 1000];
+console.log(calculateDiscount(ticket2));
+
+
+//TS-Smart Home Automation
+//3
+enum DeviceStatus {
+    On,
+    Off,
+    Standby
+}
+
+type SmartDevice = [string, string, DeviceStatus];
+
+function toggleDeviceStatus(
+    device: SmartDevice,
+    newStatus: DeviceStatus
+): SmartDevice {
+    if (
+        (device[2] === DeviceStatus.Off && newStatus === DeviceStatus.Standby) ||
+        (device[2] === DeviceStatus.Standby && newStatus === DeviceStatus.Off)
+    ) {
+        return device;
+    }
+
+    device[2] = newStatus;
+    return device;
+}
+
+let device: SmartDevice = ["Living Room Light", "Light", DeviceStatus.Off];
+
+console.log(toggleDeviceStatus(device, DeviceStatus.On));
+console.log(toggleDeviceStatus(device, DeviceStatus.Standby));
+
+
+//TS - Function Overloading
+//4.1
+function add(a: number, b: number): number;
+function add(a: string, b: string): string;
+
+function add(a: any, b: any): any {
+    return a + b;
+}
+
+function calculate(): void {
+    const input1 = (document.getElementById("input1") as HTMLInputElement).value;
+    const input2 = (document.getElementById("input2") as HTMLInputElement).value;
+
+    const num1 = Number(input1);
+    const num2 = Number(input2);
+
+    let result: number | string;
+
+    if (!isNaN(num1) && !isNaN(num2)) {
+        result = add(num1, num2);
+    } else {
+        result = add(input1, input2);
+    }
+
+    (document.getElementById("result") as HTMLElement).innerText =
+        "Result: " + result;
+}
+
+//4.2
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Function Overloading</title>
+</head>
+<body>
+    <input type="text" id="input1" placeholder="Enter first value">
+    <input type="text" id="input2" placeholder="Enter second value">
+    <button onclick="calculate()">Add</button>
+
+    <p id="result"></p>
+
+    <script src="app.js"></script>
+</body>
+</html>
+
+
+
+//TS - Character Counter for Textarea
+//5
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Character Counter</title>
+</head>
+<body>
+    <textarea id="postContent" rows="5" cols="40"></textarea>
+    <br>
+    Characters: <span id="charCount">0</span>/200
+    <div id="warningMsg"></div>
+
+    <script>
+        const postContent = document.getElementById("postContent");
+        const charCount = document.getElementById("charCount");
+        const warningMsg = document.getElementById("warningMsg");
+
+        postContent.addEventListener("input", updateCount);
+
+        function updateCount() {
+            const count = postContent.value.length;
+
+            charCount.textContent = count;
+
+            if (count > 200) {
+                warningMsg.textContent =
+                    "Warning: Character limit exceeded!";
+            } else {
+                warningMsg.textContent = "";
+            }
+        }
+    </script>
+</body>
+</html>
+
+
+//TS - Dropdown Selection Display
+//6
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Dropdown Selection Display</title>
+</head>
+<body>
+    <select id="countrySelect">
+        <option value="India">India</option>
+        <option value="USA">USA</option>
+        <option value="Canada">Canada</option>
+    </select>
+
+    <p id="selectedCountry"></p>
+
+    <script>
+        const countrySelect = document.getElementById("countrySelect");
+        const selectedCountry = document.getElementById("selectedCountry");
+
+        countrySelect.addEventListener("change", () => {
+            selectedCountry.textContent =
+                "Selected Country: " + countrySelect.value;
+        });
+    </script>
+</body>
+</html>
+
+
+//TS - Real-time Numeric Input Validation with TypeScript
+//7
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Numeric Input Validation</title>
+</head>
+<body>
+    <input type="text" id="ageInput" placeholder="Enter Age">
+    <div id="errorMsg"></div>
+
+    <script>
+        const ageInput = document.getElementById("ageInput");
+        const errorMsg = document.getElementById("errorMsg");
+
+        ageInput.addEventListener("input", () => {
+            const value = ageInput.value;
+
+            if (/^\d*$/.test(value)) {
+                errorMsg.textContent = "";
+            } else {
+                errorMsg.textContent = "Only numeric characters are allowed.";
+            }
+        });
+    </script>
+</body>
+</html>