lodapav 1.0.0

package/main.jsx

@@ -0,0 +1,1494 @@
+// =====================================
+// Promise - Inventory Stock Checker
+// =====================================
+
+function stockAvailability(arr) {
+    return new Promise((resolve, reject) => {
+
+        setTimeout(() => {
+
+            for (let item of arr) {
+
+                if (
+                    !item ||
+                    item.available === 0 ||
+                    item.available == null
+                ) {
+                    reject("invalid");
+                    return;
+                }
+
+                if (item.available < item.requested) {
+                    resolve("partial");
+                    return;
+                }
+            }
+
+            resolve("Available");
+
+        }, 1000);
+
+    });
+}
+
+
+// =====================================
+// Promise - Movie Ticket Booking
+// =====================================
+
+function checkSeatAvailability(arr) {
+    return new Promise((resolve, reject) => {
+
+        setTimeout(() => {
+
+            for (let seat of arr) {
+
+                if (
+                    seat.seatsAvailable <= 0 ||
+                    seat.seatsAvailable == null
+                ) {
+                    reject("invalid");
+                    return;
+                }
+
+                if (seat.seatsAvailable < seat.seatsRequested) {
+                    resolve("partial");
+                    return;
+                }
+            }
+
+            resolve("available");
+
+        }, 600);
+
+    });
+}
+
+
+// =====================================
+// Promise - Network Speed Tester
+// =====================================
+
+function checkUserSpeed(arr) {
+    return new Promise((resolve, reject) => {
+
+        setTimeout(() => {
+
+            for (let user of arr) {
+
+                if (user.actual <= 0) {
+                    reject("rejected");
+                    return;
+                }
+
+                if (user.actual < user.required) {
+                    resolve("slow");
+                    return;
+                }
+            }
+
+            resolve("fast");
+
+        }, 700);
+
+    });
+}
+
+
+// =====================================
+// Promise - Product Price Validator
+// =====================================
+
+function checkoutSystem(arr) {
+    return new Promise((resolve, reject) => {
+
+        setTimeout(() => {
+
+            if (arr.length === 0) {
+                reject("empty");
+                return;
+            }
+
+            for (let item of arr) {
+
+                if (
+                    typeof item.price !== "number" ||
+                    item.price <= 0
+                ) {
+                    reject("invalid");
+                    return;
+                }
+            }
+
+            resolve("valid");
+
+        }, 1500);
+
+    });
+}
+
+
+// =====================================
+// Promise - User Registration Validator
+// =====================================
+
+function userRegistration(arr) {
+    return new Promise((resolve, reject) => {
+
+        setTimeout(() => {
+
+            for (let user of arr) {
+
+                if (user.name.length < 3) {
+                    reject("invalid name");
+                    return;
+                }
+
+                if (!user.email.includes("@")) {
+                    reject("invalid email");
+                    return;
+                }
+
+                if (user.age < 18) {
+                    reject("invalid age");
+                    return;
+                }
+            }
+
+            resolve("registered");
+
+        }, 1200);
+
+    });
+}
+
+// =====================================
+// Axios - Contact Form Submission
+// =====================================
+
+function submitContactForm(formData) {
+
+    axios.post(
+        "https://formsubmit.co/YOUR_EMAIL",
+        formData
+    )
+    .then(function(res) {
+        console.log("Form submitted successfully:", res.data);
+    })
+    .catch(function(err) {
+        console.log("Failed to submit form:", err.message);
+    });
+
+}
+
+
+// =====================================
+// Axios - Register User
+// =====================================
+
+function registerUser(userData) {
+
+    if (
+        !userData.name ||
+        !userData.email ||
+        !userData.password ||
+        !userData.email.includes("@") ||
+        userData.password.length < 6
+    ) {
+        console.log("Invalid input data");
+        return;
+    }
+
+    console.log("Registering user...");
+
+    axios.post(
+        "https://jsonplaceholder.typicode.com/users",
+        userData
+    )
+    .then(function(res) {
+        console.log(
+            "User registered successfully:",
+            res.data
+        );
+    })
+    .catch(function(err) {
+        console.log(
+            "Registration failed:",
+            err.message
+        );
+    });
+
+}
+
+
+// =====================================
+// React Class-Based Component 1
+// =====================================
+
+class StudentTable extends React.Component {
+
+    render() {
+
+        const students = [
+            { id: 1, name: "Ali", age: 20, course: "B.Tech" },
+            { id: 2, name: "Sara", age: 22, course: "BCA" },
+            { id: 3, name: "Ahmed", age: 21, course: "MCA" },
+            { id: 4, name: "Zoya", age: 23, course: "MBA" }
+        ];
+
+        return (
+            <table border="1" cellPadding="10">
+                <thead>
+                    <tr>
+                        <th>ID</th>
+                        <th>Name</th>
+                        <th>Age</th>
+                        <th>Course</th>
+                    </tr>
+                </thead>
+
+                <tbody>
+                    {students.map((s) => (
+                        <tr key={s.id}>
+                            <td>{s.id}</td>
+                            <td>{s.name}</td>
+                            <td>{s.age}</td>
+                            <td>{s.course}</td>
+                        </tr>
+                    ))}
+                </tbody>
+            </table>
+        );
+    }
+}
+
+ReactDOM.render(
+    <StudentTable />,
+    document.getElementById("root")
+);
+
+
+// =====================================
+// React Functional Component 1
+// =====================================
+
+function ProductList() {
+
+    const products = [
+        {
+            id: 1,
+            name: "Laptop",
+            price: 55000,
+            category: "Electronics"
+        },
+        {
+            id: 2,
+            name: "Shoes",
+            price: 2000,
+            category: "Fashion"
+        },
+        {
+            id: 3,
+            name: "Watch",
+            price: 3500,
+            category: "Accessories"
+        },
+        {
+            id: 4,
+            name: "Phone",
+            price: 30000,
+            category: "Electronics"
+        }
+    ];
+
+    return (
+        <div>
+            <h2>Product Dashboard</h2>
+
+            {products.map((p) => (
+                <div
+                    key={p.id}
+                    style={{
+                        border: "1px solid black",
+                        padding: "10px",
+                        margin: "10px"
+                    }}
+                >
+                    <h3>{p.name}</h3>
+                    <p>Price: ₹{p.price}</p>
+                    <p>Category: {p.category}</p>
+
+                    {p.price > 30000
+                        ? <p>Premium Product</p>
+                        : <p>Regular Product</p>}
+                </div>
+            ))}
+        </div>
+    );
+}
+
+ReactDOM.render(
+    <ProductList />,
+    document.getElementById("root")
+);
+
+
+// =====================================
+// React JSX - Advanced Result Dashboard
+// =====================================
+
+const students = [
+    { id: 1, name: "Aman", marks: 85, course: "BCA", attendance: 92 },
+    { id: 2, name: "Riya", marks: 45, course: "BCA", attendance: 78 },
+    { id: 3, name: "Karan", marks: 72, course: "BBA", attendance: 55 },
+    { id: 4, name: "Neha", marks: 30, course: "BCA", attendance: 95 },
+    { id: 5, name: "Arjun", marks: 92, course: "BBA", attendance: 40 },
+    { id: 6, name: "Sonia", marks: 55, course: "BCA", attendance: 65 }
+];
+
+function App() {
+    return (
+        <div>
+
+            <h2>Student Performance Dashboard</h2>
+
+            <table border="1" cellPadding="10">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Course</th>
+                        <th>Marks</th>
+                        <th>Attendance</th>
+                        <th>Final Status</th>
+                    </tr>
+                </thead>
+
+                <tbody>
+                    {students.map((s) => (
+                        <tr
+                            key={s.id}
+                            style={{
+                                color:
+                                    s.marks < 50
+                                        ? "red"
+                                        : s.attendance < 60
+                                        ? "orange"
+                                        : s.marks > 80
+                                        ? "green"
+                                        : "black"
+                            }}
+                        >
+                            <td>{s.name}</td>
+                            <td>{s.course}</td>
+                            <td>{s.marks}</td>
+                            <td>{s.attendance}%</td>
+
+                            <td>
+                                {s.marks < 50
+                                    ? "Fail"
+                                    : s.attendance < 60
+                                    ? "Attendance Shortage"
+                                    : "Pass"}
+                            </td>
+                        </tr>
+                    ))}
+                </tbody>
+            </table>
+
+            <h3>Statistics</h3>
+
+            <p>
+                Total Students: {students.length}
+            </p>
+
+            <p>
+                Class Average: {
+                    (
+                        students.reduce(
+                            (sum, s) => sum + s.marks,
+                            0
+                        ) / students.length
+                    ).toFixed(2)
+                }
+            </p>
+
+            <h3>Dean's List</h3>
+
+            {
+                students.filter(s => s.marks > 85).length > 0
+                ?
+                students
+                    .filter(s => s.marks > 85)
+                    .map(s => (
+                        <p key={s.id}>{s.name}</p>
+                    ))
+                :
+                <p>
+                    No students currently qualify
+                    for the Dean's List.
+                </p>
+            }
+
+            <h3>BCA Honors</h3>
+
+            {
+                students
+                    .filter(
+                        s =>
+                            s.course === "BCA" &&
+                            s.marks > 50
+                    )
+                    .map(s => (
+                        <p key={s.id}>
+                            {s.name} - {s.marks}
+                        </p>
+                    ))
+            }
+
+        </div>
+    );
+}
+
+ReactDOM.render(
+    <App />,
+    document.getElementById("root")
+);
+
+
+// =====================================
+// React Props - Greeting Messages
+// =====================================
+
+function WelcomeMessage(props) {
+    return (
+        <h3>
+            {props.language === "en"
+                ? `Hello, ${props.name}!`
+                : `Bonjour, ${props.name}!`}
+        </h3>
+    );
+}
+
+function App() {
+    return (
+        <div>
+            <WelcomeMessage name="Alice" language="en" />
+            <WelcomeMessage name="Chloe" language="fr" />
+        </div>
+    );
+}
+
+ReactDOM.render(<App />, document.getElementById("root"));
+
+
+// =====================================
+// React Props - Social Feed
+// =====================================
+
+const POSTS_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?"]
+    }
+];
+
+const CommentItem = ({ text }) => {
+    return <div>{text}</div>;
+};
+
+const PostCard = ({ post }) => {
+    return (
+        <>
+            <h3>{post.username}</h3>
+            <p>{post.content}</p>
+
+            <p
+                style={{
+                    color: post.likes > 50 ? "red" : "black",
+                    fontWeight: post.likes > 50 ? "bold" : "normal"
+                }}
+            >
+                Likes: {post.likes}
+            </p>
+
+            {post.comments.map((c, i) => (
+                <CommentItem key={i} text={c} />
+            ))}
+        </>
+    );
+};
+
+function App() {
+    return (
+        <div>
+            {POSTS_DATA.map(post => (
+                <PostCard key={post.id} post={post} />
+            ))}
+        </div>
+    );
+}
+
+ReactDOM.render(<App />, document.getElementById("root"));
+
+
+// =====================================
+// React Props - Profile Card
+// =====================================
+
+function ProfileCard(props) {
+    return (
+        <div style={{ border: "1px solid black", margin: "10px", padding: "10px" }}>
+            <h3>{props.name}</h3>
+            <p>Age: {props.age}</p>
+
+            <p
+                style={{
+                    color: props.isOnline ? "green" : "gray"
+                }}
+            >
+                {props.isOnline ? "online" : "offline"}
+            </p>
+        </div>
+    );
+}
+
+function App() {
+    return (
+        <div>
+            <ProfileCard name="Alice" age={23} isOnline={true} />
+            <ProfileCard name="Bob" age={21} isOnline={false} />
+            <ProfileCard name="Carlos" age={25} isOnline={true} />
+        </div>
+    );
+}
+
+ReactDOM.render(<App />, document.getElementById("root"));
+
+
+// =====================================
+// React Basic State - Counter With Limit
+// =====================================
+
+function Counter() {
+
+    const [count, setCount] = React.useState(0);
+
+    return (
+        <div>
+            <h2>{count}</h2>
+
+            <button
+                onClick={() => {
+                    if (count < 10) {
+                        setCount(count + 1);
+                    }
+                }}
+            >
+                Increment (+)
+            </button>
+
+            <button
+                onClick={() => {
+                    if (count > 0) {
+                        setCount(count - 1);
+                    }
+                }}
+            >
+                Decrement (-)
+            </button>
+        </div>
+    );
+}
+
+ReactDOM.render(<Counter />, document.getElementById("root"));
+
+
+// =====================================
+// React Basic State - Disable Button After Click
+// =====================================
+
+function App() {
+
+    const [disabled, setDisabled] = React.useState(false);
+
+    return (
+        <button
+            disabled={disabled}
+            onClick={() => setDisabled(true)}
+        >
+            Click Me
+        </button>
+    );
+}
+
+ReactDOM.render(<App />, document.getElementById("root"));
+
+
+// =====================================
+// React Basic State - Dropdown Selection
+// =====================================
+
+function App() {
+
+    const options = ["HTML", "CSS", "JavaScript", "React"];
+
+    const [selected, setSelected] = React.useState(options[0]);
+
+    return (
+        <div>
+            <h2>Select Technology:</h2>
+
+            <select
+                value={selected}
+                onChange={(e) => setSelected(e.target.value)}
+            >
+                {options.map((item, index) => (
+                    <option key={index} value={item}>
+                        {item}
+                    </option>
+                ))}
+            </select>
+
+            <h3>You selected: {selected}</h3>
+        </div>
+    );
+}
+
+ReactDOM.render(<App />, document.getElementById("root"));
+
+
+// =====================================
+// React Basic State - Background Color Changer
+// =====================================
+
+function App() {
+
+    const [bg, setBg] = React.useState("white");
+
+    function changeColor() {
+
+        const colors = [
+            "red",
+            "blue",
+            "green",
+            "yellow",
+            "orange",
+            "purple"
+        ];
+
+        const random =
+            colors[Math.floor(Math.random() * colors.length)];
+
+        setBg(random);
+    }
+
+    return (
+        <div
+            style={{
+                backgroundColor: bg,
+                height: "100vh"
+            }}
+        >
+            <button onClick={changeColor}>
+                Change Color
+            </button>
+        </div>
+    );
+}
+
+ReactDOM.render(<App />, document.getElementById("root"));
+
+
+// =====================================
+// React Basic State - Password Show/Hide
+// =====================================
+
+function App() {
+
+    const [show, setShow] = React.useState(false);
+
+    return (
+        <div>
+            <h1>Password Field</h1>
+
+            <input
+                type={show ? "text" : "password"}
+            />
+
+            <br /><br />
+
+            <button
+                onClick={() => setShow(!show)}
+            >
+                {show ? "Hide" : "Show"}
+            </button>
+        </div>
+    );
+}
+
+ReactDOM.render(<App />, document.getElementById("root"));
+
+
+// =====================================
+// React Basic State - Input Live Preview
+// =====================================
+
+function App() {
+
+    const [text, setText] = React.useState("");
+
+    return (
+        <div>
+            <h1>Live Input Preview</h1>
+
+            <input
+                type="text"
+                value={text}
+                onChange={(e) =>
+                    setText(e.target.value)
+                }
+            />
+
+            <h2>You typed: {text}</h2>
+        </div>
+    );
+}
+
+ReactDOM.render(<App />, document.getElementById("root"));
+
+
+// =====================================
+// React Basic State - Random Quote Generator
+// =====================================
+
+function App() {
+
+    const quotes = [
+        "Dream big and dare to fail.",
+        "Never stop learning.",
+        "Success comes from hard work.",
+        "Stay hungry stay foolish.",
+        "Believe in yourself."
+    ];
+
+    const [quote, setQuote] = React.useState(quotes[0]);
+
+    function generateQuote() {
+        const random =
+            Math.floor(Math.random() * quotes.length);
+
+        setQuote(quotes[random]);
+    }
+
+    return (
+        <div>
+            <h1>Random Quote Generator</h1>
+
+            <h2>{quote}</h2>
+
+            <button onClick={generateQuote}>
+                Generate Quote
+            </button>
+        </div>
+    );
+}
+
+ReactDOM.render(<App />, document.getElementById("root"));
+
+
+// =====================================
+// React Basic State - Character Limit
+// =====================================
+
+function App() {
+
+    const limit = 20;
+
+    const [text, setText] = React.useState("");
+
+    function handleChange(e) {
+
+        if (e.target.value.length <= limit) {
+            setText(e.target.value);
+        }
+    }
+
+    return (
+        <div>
+
+            <h1>Character Limit Input</h1>
+
+            <input
+                type="text"
+                value={text}
+                onChange={handleChange}
+            />
+
+            <h2>
+                Remaining: {limit - text.length}
+            </h2>
+
+            {text.length === limit && (
+                <h2 style={{ color: "red" }}>
+                    Limit reached!
+                </h2>
+            )}
+
+        </div>
+    );
+}
+
+ReactDOM.render(<App />, document.getElementById("root"));
+
+// =====================================
+// React Complex State - Product Dashboard
+// =====================================
+
+function ProductTiles() {
+
+    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] = React.useState("All");
+
+    const filtered =
+        category === "All"
+            ? products
+            : products.filter(
+                  p => p.category === category
+              );
+
+    return (
+        <div>
+
+            <h2>Product Dashboard</h2>
+
+            <select
+                value={category}
+                onChange={(e) =>
+                    setCategory(e.target.value)
+                }
+            >
+                <option>All</option>
+                <option>Premium</option>
+                <option>Deluxe</option>
+                <option>Basic</option>
+            </select>
+
+            {filtered.map(product => (
+                <div key={product.id}>
+                    <h3>{product.name}</h3>
+                    <p>₹{product.price}</p>
+                    <p>{product.category}</p>
+                </div>
+            ))}
+        </div>
+    );
+}
+
+ReactDOM.render(
+    <ProductTiles />,
+    document.getElementById("root")
+);
+
+
+// =====================================
+// React Complex State - Search Functionality
+// =====================================
+
+function SearchUser() {
+
+    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] = React.useState("");
+
+    const filtered = usersData.filter(user =>
+        user.name
+            .toLowerCase()
+            .includes(search.toLowerCase())
+    );
+
+    return (
+        <div>
+
+            <h2>User Search</h2>
+
+            <input
+                type="text"
+                placeholder="Search by name..."
+                value={search}
+                onChange={(e) =>
+                    setSearch(e.target.value)
+                }
+            />
+
+            {filtered.map(user => (
+                <div key={user.id}>
+                    <b>{user.name}</b> - {user.city}
+                </div>
+            ))}
+
+        </div>
+    );
+}
+
+ReactDOM.render(
+    <SearchUser />,
+    document.getElementById("root")
+);
+
+
+// =====================================
+// React Complex State - Employee Form
+// =====================================
+
+function EmployeeForm() {
+
+    const [form, setForm] = React.useState({
+        name: "",
+        department: "",
+        salary: ""
+    });
+
+    const [employee, setEmployee] =
+        React.useState(null);
+
+    function handleChange(e) {
+        setForm({
+            ...form,
+            [e.target.name]: e.target.value
+        });
+    }
+
+    function handleSubmit(e) {
+        e.preventDefault();
+        setEmployee(form);
+    }
+
+    function handleReset() {
+
+        setForm({
+            name: "",
+            department: "",
+            salary: ""
+        });
+
+        setEmployee(null);
+    }
+
+    return (
+        <div>
+
+            <form onSubmit={handleSubmit}>
+
+                <input
+                    name="name"
+                    value={form.name}
+                    onChange={handleChange}
+                    placeholder="Name"
+                />
+
+                <input
+                    name="department"
+                    value={form.department}
+                    onChange={handleChange}
+                    placeholder="Department"
+                />
+
+                <input
+                    name="salary"
+                    value={form.salary}
+                    onChange={handleChange}
+                    placeholder="Salary"
+                />
+
+                <button type="submit">
+                    Submit
+                </button>
+
+                <button
+                    type="button"
+                    onClick={handleReset}
+                >
+                    Reset
+                </button>
+
+            </form>
+
+            {employee && (
+                <div>
+                    <h3>{employee.name}</h3>
+                    <p>{employee.department}</p>
+                    <p>{employee.salary}</p>
+                </div>
+            )}
+
+        </div>
+    );
+}
+
+ReactDOM.render(
+    <EmployeeForm />,
+    document.getElementById("root")
+);
+
+
+// =====================================
+// React Complex State - Update User
+// =====================================
+
+function App() {
+
+    const [users, setUsers] = React.useState([
+        { id: 1, name: "A" },
+        { id: 2, name: "B" }
+    ]);
+
+    function updateUser() {
+
+        const updatedUsers = users.map(user =>
+            user.id === 2
+                ? { ...user, name: "Updated" }
+                : user
+        );
+
+        setUsers(updatedUsers);
+    }
+
+    return (
+        <div>
+
+            <h3>User List</h3>
+
+            {users.map(user => (
+                <p key={user.id}>
+                    User {user.id}: {user.name}
+                </p>
+            ))}
+
+            <button onClick={updateUser}>
+                Update User
+            </button>
+
+        </div>
+    );
+}
+
+ReactDOM.render(
+    <App />,
+    document.getElementById("root")
+);
+
+
+// =====================================
+// React Complex State - Toggle Status
+// =====================================
+
+function App() {
+
+    const [task, setTask] = React.useState({
+        title: "Learn React",
+        completed: false
+    });
+
+    function toggleStatus() {
+
+        setTask({
+            ...task,
+            completed: !task.completed
+        });
+    }
+
+    return (
+        <div>
+
+            <h3>
+                {task.title} - {
+                    task.completed
+                        ? "Completed"
+                        : "Pending"
+                }
+            </h3>
+
+            <button onClick={toggleStatus}>
+                Toggle Status
+            </button>
+
+        </div>
+    );
+}
+
+ReactDOM.render(
+    <App />,
+    document.getElementById("root")
+);
+
+
+// =====================================
+// TS - Function Overloading
+// =====================================
+
+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 val1 = (
+        document.getElementById("input1") as HTMLInputElement
+    ).value;
+
+    const val2 = (
+        document.getElementById("input2") as HTMLInputElement
+    ).value;
+
+    const num1 = Number(val1);
+    const num2 = Number(val2);
+
+    let result;
+
+    if (!isNaN(num1) && !isNaN(num2)) {
+        result = add(num1, num2);
+    } else {
+        result = add(val1, val2);
+    }
+
+    (
+        document.getElementById("result") as HTMLElement
+    ).innerText = String(result);
+}
+
+
+// =====================================
+// TS - Smart Home Automation
+// =====================================
+
+enum DeviceStatus {
+    On = "On",
+    Off = "Off",
+    Standby = "Standby"
+}
+
+type SmartDevice = [
+    string,
+    string,
+    DeviceStatus
+];
+
+function toggleDeviceStatus(
+    device: SmartDevice,
+    newStatus: DeviceStatus
+): SmartDevice {
+
+    if (
+        device[2] === DeviceStatus.Off &&
+        newStatus === DeviceStatus.Standby
+    ) {
+        return device;
+    }
+
+    device[2] = newStatus;
+
+    return device;
+}
+
+let device: SmartDevice = [
+    "Light",
+    "LED",
+    DeviceStatus.Off
+];
+
+console.log(
+    toggleDeviceStatus(
+        device,
+        DeviceStatus.On
+    )
+);
+
+
+// =====================================
+// TS - Movie Ticket Booking
+// =====================================
+
+enum SeatType {
+    Regular = "Regular",
+    Premium = "Premium",
+    VIP = "VIP"
+}
+
+type Ticket = [
+    string,
+    number,
+    SeatType,
+    number
+];
+
+function calculateDiscount(
+    ticket: Ticket
+): number {
+
+    let price = ticket[3];
+
+    if (ticket[2] === SeatType.Premium) {
+        price = price - price * 0.10;
+    }
+
+    if (ticket[2] === SeatType.VIP) {
+        price = price - price * 0.20;
+    }
+
+    return price;
+}
+
+let ticket: Ticket = [
+    "Avengers",
+    5,
+    SeatType.VIP,
+    1000
+];
+
+console.log(
+    calculateDiscount(ticket)
+);
+
+
+// =====================================
+// TS - Library Management System
+// =====================================
+
+enum BookStatus {
+    Available = "Available",
+    CheckedOut = "CheckedOut",
+    Reserved = "Reserved"
+}
+
+type Book = [
+    string,
+    string,
+    number,
+    BookStatus
+];
+
+function borrowBook(
+    book: Book
+): string {
+
+    if (
+        book[3] === BookStatus.Available
+    ) {
+        book[3] = BookStatus.CheckedOut;
+        return "Book borrowed";
+    }
+
+    return "Book not available";
+}
+
+let book: Book = [
+    "Java",
+    "James",
+    12345,
+    BookStatus.Available
+];
+
+console.log(
+    borrowBook(book)
+);
+
+
+// =====================================
+// TS - Character Counter Textarea
+// =====================================
+
+const postContent =
+    document.getElementById(
+        "postContent"
+    ) as HTMLTextAreaElement;
+
+const charCount =
+    document.getElementById(
+        "charCount"
+    ) as HTMLElement;
+
+const warningMsg =
+    document.getElementById(
+        "warningMsg"
+    ) as HTMLElement;
+
+postContent.addEventListener(
+    "input",
+    () => {
+
+        const count =
+            postContent.value.length;
+
+        charCount.innerText =
+            count.toString();
+
+        if (count > 200) {
+            warningMsg.innerText =
+                "Character limit exceeded";
+        } else {
+            warningMsg.innerText = "";
+        }
+    }
+);
+
+
+// =====================================
+// TS - Dropdown Selection Display
+// =====================================
+
+const countrySelect =
+    document.getElementById(
+        "countrySelect"
+    ) as HTMLSelectElement;
+
+const selectedCountry =
+    document.getElementById(
+        "selectedCountry"
+    ) as HTMLElement;
+
+countrySelect.addEventListener(
+    "change",
+    () => {
+
+        selectedCountry.innerText =
+            countrySelect.value;
+    }
+);
+
+
+// =====================================
+// TS - Numeric Input Validation
+// =====================================
+
+const ageInput =
+    document.getElementById(
+        "ageInput"
+    ) as HTMLInputElement;
+
+const errorMsg =
+    document.getElementById(
+        "errorMsg"
+    ) as HTMLElement;
+
+ageInput.addEventListener(
+    "input",
+    () => {
+
+        const value =
+            ageInput.value;
+
+        const valid =
+            /^[0-9]*$/.test(value);
+
+        if (!valid) {
+            errorMsg.innerText =
+                "Only numbers allowed";
+        } else {
+            errorMsg.innerText = "";
+        }
+    }
+);
+
+
+// =====================================
+// React - Password Validator
+// =====================================
+
+function PasswordValidator() {
+
+    const [password, setPassword] =
+        React.useState("");
+
+    return (
+        <div>
+
+            <h1>Password Validator</h1>
+
+            <input
+                type="password"
+                placeholder="Enter Password"
+                value={password}
+                onChange={(e) =>
+                    setPassword(e.target.value)
+                }
+            />
+
+            <p
+                style={{
+                    color:
+                        /^[A-Z]/.test(password)
+                            ? "green"
+                            : "red"
+                }}
+            >
+                First character should be Capital
+            </p>
+
+            <p
+                style={{
+                    color:
+                        /[a-z]/.test(password)
+                            ? "green"
+                            : "red"
+                }}
+            >
+                Must contain one small letter
+            </p>
+
+            <p
+                style={{
+                    color:
+                        /[0-9]/.test(password)
+                            ? "green"
+                            : "red"
+                }}
+            >
+                Must contain one number
+            </p>
+
+            <p
+                style={{
+                    color:
+                        /[^A-Za-z0-9]/.test(password)
+                            ? "green"
+                            : "red"
+                }}
+            >
+                Must contain one special character
+            </p>
+
+        </div>
+    );
+}
+
+ReactDOM.render(
+    <PasswordValidator />,
+    document.getElementById("root")
+);
+