dev-code-snippets-md 1.0.0 → 1.1.0

package/snippets/react-lab-1-10.md

@@ -0,0 +1,1099 @@
+```
+// Program 1 App.css
+import { useState } from "react";
+import "./App.css";
+function App() {
+  const [text, setText] = useState("");
+  return (
+    <div className="App">
+      <h1>Dynamic Text Display</h1>
+      <input
+        type="text"
+        value={text}
+        onChange={(e) => setText(e.target.value)}
+        placeholder="Type something..."
+      />
+      <p>You typed: {text}</p>
+    </div>
+  );
+}
+export default App;
+// Program 2 App.js
+import Header from "./Header";
+import Footer from "./Footer";
+import "./App.css";
+function App() {
+  return (
+    <div className="App">
+      <Header title="Welcome to My React App" />
+      <Footer
+        tagline="Building great apps with React"
+        copyright="© 2025 MyApp"
+      />
+    </div>
+  );
+}
+export default App;
+// Program 2 Header.js
+function Header({ title }) {
+  return (
+    <header>
+      <h1>{title}</h1>
+    </header>
+  );
+}
+export default Header;
+// Program 2 Footer.js
+function Footer({ tagline, copyright }) {
+  return (
+```
+
+```
+    <footer>
+      <p>{tagline}</p>
+      <p>{copyright}</p>
+    </footer>
+  );
+}
+export default Footer;
+/* Program 2 App.css */
+.App {
+  text-align: center;
+  font-family: Arial, sans-serif;
+}
+header {
+  background-color: #282c34;
+  padding: 20px;
+  color: white;
+}
+footer {
+  background-color: #282c34;
+  padding: 10px;
+  color: white;
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  text-align: center;
+}
+// Program 3 App.js
+import { useState } from "react";
+import "./App.css";
+function App() {
+  const [count, setCount] = useState(0);
+  const [step, setStep] = useState(1);
+  return (
+    <div className="App">
+      <h1>Counter Application</h1>
+      <h2>{count}</h2>
+      <button onClick={() => setCount(count + step)}>
+        Increase by {step}
+      </button>
+      <button
+        onClick={() =>
+          count - step >= 0 && setCount(count - step)
+        }
+      >
+        Decrease by {step}
+      </button>
+      <button onClick={() => setCount(0)}>
+        Reset
+      </button>
+```
+
+```
+      <br />
+      <br />
+      <input
+        type="number"
+        value={step}
+        min="1"
+        onChange={(e) =>
+          setStep(Number(e.target.value))
+        }
+      />
+    </div>
+  );
+}
+export default App;
+```
+
+```
+/* Program 3 App.css */
+.App {
+  text-align: center;
+}
+button {
+  margin: 10px;
+  padding: 10px;
+  font-size: 16px;
+  cursor: pointer;
+}
+input {
+  padding: 5px;
+  font-size: 16px;
+}
+// Program 4 App.js
+import { useState } from "react";
+import "./App.css";
+function App() {
+  const [tasks, setTasks] = useState([]);
+  const [text, setText] = useState("");
+  const addTask = () => {
+    if (text) {
+      setTasks([
+        ...tasks,
+        {
+          id: Date.now(),
+          text,
+          done: false
+        }
+      ]);
+      setText("");
+    }
+  };
+  const deleteTask = (id) => {
+    setTasks(tasks.filter((t) => t.id !== id));
+  };
+```
+
+```
+  const toggleTask = (id) => {
+    setTasks(
+      tasks.map((t) =>
+        t.id === id
+          ? { ...t, done: !t.done }
+          : t
+      )
+    );
+  };
+  return (
+    <div className="todo">
+      <h2>To-Do List</h2>
+      <input
+        value={text}
+        onChange={(e) => setText(e.target.value)}
+        placeholder="Add task"
+      />
+      <button onClick={addTask}>Add</button>
+      <ul>
+        {tasks.map((t) => (
+          <li
+            key={t.id}
+            className={t.done ? "done" : ""}
+          >
+            <span
+              onClick={() => toggleTask(t.id)}
+            >
+              {t.text}
+            </span>
+            <button
+              onClick={() => deleteTask(t.id)}
+            >
+              X
+            </button>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+export default App;
+/* Program 4 App.css */
+.todo {
+  width: 400px;
+  margin: 40px auto;
+  text-align: center;
+  font-family: Arial;
+  border: 1px solid gray;
+  padding: 20px;
+  background: white;
+}
+input {
+  padding: 8px;
+  width: 60%;
+}
+```
+
+```
+button {
+  padding: 8px;
+  margin-left: 5px;
+  cursor: pointer;
+}
+ul {
+  list-style: none;
+  padding: 0;
+}
+li {
+  margin: 10px 0;
+  padding: 8px;
+  border: 1px solid gray;
+  display: flex;
+  justify-content: space-between;
+}
+.done {
+  text-decoration: line-through;
+  background: lightgray;
+}
+Program 5 - App.js
+import FigureList from "./components/FigureList";
+import "./App.css";
+function App() {
+  return (
+    <div className="app">
+      <h1>Dynamic Image Gallery</h1>
+      <FigureList />
+    </div>
+  );
+}
+export default App;
+Program 5 - BasicFigure.js
+function BasicFigure({ image, caption }) {
+  return (
+    <div className="card">
+      <img src={image} alt={caption} />
+      <p>{caption}</p>
+    </div>
+  );
+}
+export default BasicFigure;
+// Program 5 FigureList.js
+```
+
+```
+import { useState } from "react";
+import BasicFigure from "./BasicFigure";
+function FigureList() {
+  const [images, setImages] = useState([
+    { image: "https://picsum.photos/200", caption: "Image 1" },
+    { image: "https://picsum.photos/201", caption: "Image 2" },
+```
+
+```
+    { image: "https://picsum.photos/202", caption: "Image 3" }
+  ]);
+  const addImage = () => {
+    const n = images.length + 1;
+    setImages([
+      ...images,
+      {
+        image: `https://picsum.photos/20${n}`,
+        caption: `Image ${n}`
+      }
+    ]);
+  };
+  const removeImage = () => {
+    setImages(images.slice(0, -1));
+  };
+  return (
+    <div>
+      <button onClick={addImage}>Add Image</button>
+      <button onClick={removeImage}>
+        Remove Image
+      </button>
+      <div className="grid">
+        {images.map((img, i) => (
+          <BasicFigure
+            key={i}
+            image={img.image}
+            caption={img.caption}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+export default FigureList;
+/* Program 5 App.css */
+.app {
+  text-align: center;
+  font-family: Arial;
+}
+h1 {
+  background: black;
+  color: white;
+  padding: 10px;
+}
+button {
+  padding: 8px;
+  margin: 10px;
+  cursor: pointer;
+}
+.grid {
+  display: flex;
+  justify-content: center;
+```
+
+```
+  flex-wrap: wrap;
+  gap: 15px;
+}
+.card {
+  border: 1px solid gray;
+  padding: 10px;
+  background: white;
+}
+.card img {
+  width: 200px;
+  height: 200px;
+}
+src/
+│
+├── App.js
+├── App.css
+│
+└── components/
+    ├── FigureList.js
+    └── BasicFigure.js
+// Program 6 App.js
+import React, { useState } from "react";
+import "./App.css";
+function App() {
+  const [data, setData] = useState({
+    name: "",
+    email: "",
+    password: ""
+  });
+  const [error, setError] = useState({});
+  function handleChange(e) {
+    let value = e.target.value.replace(/[<>]/g, "");
+    setData({
+      ...data,
+      [e.target.name]: value
+    });
+  }
+  function handleSubmit(e) {
+    e.preventDefault();
+    let err = {};
+    if (data.name === "")
+      err.name = "Enter name";
+    if (data.email === "") {
+      err.email = "Enter email";
+    } else if (!data.email.includes("@")) {
+      err.email = "Invalid email";
+    }
+    if (data.password.length < 6)
+      err.password = "Min 6 characters";
+```
+
+```
+    setError(err);
+    if (Object.keys(err).length === 0) {
+      alert("Form Submitted");
+      console.log(data);
+    }
+  }
+  return (
+    <div className="box">
+      <h2>React Form</h2>
+      <form onSubmit={handleSubmit}>
+        <input
+          type="text"
+          name="name"
+          placeholder="Name"
+          onChange={handleChange}
+          className={error.name ? "red" : ""}
+        />
+        <p>{error.name}</p>
+        <input
+          type="text"
+          name="email"
+          placeholder="Email"
+          onChange={handleChange}
+          className={error.email ? "red" : ""}
+        />
+        <p>{error.email}</p>
+        <input
+          type="password"
+          name="password"
+          placeholder="Password"
+          onChange={handleChange}
+          className={error.password ? "red" : ""}
+        />
+        <p>{error.password}</p>
+        <button>Submit</button>
+      </form>
+    </div>
+  );
+}
+export default App;
+/* Program 6 App.css */
+body {
+  font-family: Arial;
+  background: #f2f2f2;
+}
+.box {
+  width: 300px;
+  margin: 100px auto;
+  padding: 20px;
+  background: white;
+  border-radius: 5px;
+```
+
+```
+}
+input {
+  width: 100%;
+  padding: 8px;
+  margin-top: 10px;
+}
+button {
+  width: 100%;
+  padding: 8px;
+  margin-top: 10px;
+  background: blue;
+  color: white;
+  border: none;
+}
+.red {
+  border: 2px solid red;
+}
+p {
+  color: red;
+  font-size: 12px;
+}
+// Program 7 App.js
+import React, { useState } from "react";
+import "./App.css";
+function App() {
+  const [color, setColor] = useState("lightblue");
+  function changeColor() {
+    setColor(
+      color === "lightblue"
+        ? "lightpink"
+        : "lightgreen"
+    );
+  }
+  return (
+    <div
+      className="card"
+      style={{ backgroundColor: color }}
+    >
+      <img
+        src="https://randomuser.me/api/portraits/men/1.jpg"
+        alt="profile"
+      />
+      <h2>John Doe</h2>
+      <p>Web Developer</p>
+      <button onClick={changeColor}>
+        Change Color
+      </button>
+    </div>
+  );
+}
+```
+
+```
+export default App;
+```
+
+```
+/* Program 7 App.css */
+```
+
+```
+body {
+  font-family: Arial;
+  background: #f2f2f2;
+}
+.card {
+  width: 250px;
+  margin: 100px auto;
+  padding: 20px;
+  text-align: center;
+  border-radius: 10px;
+  transition: 0.3s;
+}
+.card:hover {
+  transform: scale(1.05);
+}
+img {
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+}
+h2 {
+  color: #333;
+}
+p {
+  color: #666;
+}
+button {
+  padding: 8px 15px;
+  border: none;
+  background: blue;
+  color: white;
+  border-radius: 5px;
+}
+// Program 8 App.js
+import React, { useState } from "react";
+import "./App.css";
+function App() {
+  const [task, setTask] = useState("");
+  const [date, setDate] = useState("");
+  const [tasks, setTasks] = useState([]);
+  const [filter, setFilter] = useState("all");
+  function addTask() {
+    if (task !== "") {
+      setTasks([
+        ...tasks,
+        {
+          text: task,
+          due: date,
+```
+
+```
+          done: false
+      setTask("");
+      setDate("");
+  function toggle(index) {
+    let newTasks = [...tasks];
+    newTasks[index].done = !newTasks[index].done;
+    setTasks(newTasks);
+  let showTasks = tasks.filter((t) =>
+    filter === "all"
+      ? true
+      : filter === "done"
+      ? t.done
+      : !t.done
+    <div className="box">
+      <h2>Reminder App</h2>
+      <input
+        type="text"
+        placeholder="Task"
+        value={task}
+        onChange={(e) => setTask(e.target.value)}
+      <input
+        type="date"
+        value={date}
+        onChange={(e) => setDate(e.target.value)}
+      <button onClick={addTask}>Add</button>
+      <div className="filter">
+        <button onClick={() => setFilter("all")}>
+          All
+        </button>
+        <button onClick={() => setFilter("done")}>
+          Completed
+        </button>
+        <button onClick={() => setFilter("pending")}>
+          Pending
+        </button>
+      </div>
+      {showTasks.map((t, i) => (
+        <div
+          key={i}
+          className="task"
+          style={{
+            textDecoration: t.done
+```
+
+```
+              ? "line-through"
+              : "none"
+          }}
+        >
+          <h4>{t.text}</h4>
+```
+
+```
+          <p>{t.due}</p>
+```
+
+```
+          <button onClick={() => toggle(i)}>
+            {t.done ? "Undo" : "Done"}
+          </button>
+        </div>
+      ))}
+    </div>
+  );
+}
+export default App;
+```
+
+```
+/* Program 8 App.css */
+```
+
+```
+body {
+  font-family: Arial;
+  background: #f2f2f2;
+}
+.box {
+  width: 300px;
+  margin: 50px auto;
+  padding: 20px;
+  background: white;
+  border-radius: 10px;
+}
+input {
+  width: 100%;
+  padding: 8px;
+  margin-top: 10px;
+}
+button {
+  margin-top: 10px;
+  padding: 8px;
+}
+.task {
+  margin-top: 15px;
+  padding: 10px;
+  background: #eee;
+  border-radius: 5px;
+}
+.filter button {
+  margin-right: 5px;
+}
+// Program 9 App.js
+import React from "react";
+import {
+  BrowserRouter,
+  Routes,
+```
+
+```
+  Route,
+  Link
+} from "react-router-dom";
+function Home() {
+  return <h2>Home Page</h2>;
+}
+function About() {
+  return <h2>About Page</h2>;
+}
+function Contact() {
+  return <h2>Contact Page</h2>;
+}
+function App() {
+  return (
+    <BrowserRouter>
+      <nav>
+        <Link to="/">Home</Link>
+        <Link to="/about">About</Link>
+        <Link to="/contact">Contact</Link>
+      </nav>
+      <Routes>
+        <Route
+          path="/"
+          element={<Home />}
+        />
+        <Route
+          path="/about"
+          element={<About />}
+        />
+        <Route
+          path="/contact"
+          element={<Contact />}
+        />
+      </Routes>
+    </BrowserRouter>
+  );
+}
+export default App;
+/* Program 9 App.css */
+nav {
+  margin: 20px;
+}
+nav a {
+  margin-right: 15px;
+  text-decoration: none;
+  color: blue;
+  font-size: 20px;
+}
+nav a:hover {
+  color: red;
+```
+
+```
+}
+// Program 10 App.js
+import React, { Component } from "react";
+import "./App.css";
+class App extends Component {
+  state = {
+    data: [],
+    search: "",
+    error: ""
+  };
+  componentDidMount() {
+    fetch("https://jsonplaceholder.typicode.com/users")
+      .then((res) => res.json())
+      .then((result) =>
+        this.setState({ data: result })
+      )
+      .catch(() =>
+        this.setState({
+          error: "Data not found"
+        })
+      );
+  }
+  componentDidUpdate(prevProps, prevState) {
+    if (
+      prevState.search !== this.state.search
+    ) {
+      console.log("Search Updated");
+    }
+  }
+  render() {
+    let users = this.state.data.filter((u) =>
+      u.name
+        .toLowerCase()
+        .includes(
+          this.state.search.toLowerCase()
+        )
+    );
+    return (
+      <div className="box">
+        <h2>API Data</h2>
+        <input
+          type="text"
+          placeholder="Search"
+          onChange={(e) =>
+            this.setState({
+              search: e.target.value
+            })
+          }
+        />
+        <button
+          onClick={() =>
+            window.location.reload()
+          }
+        >
+          Refresh
+```
+
+```
+        </button>
+```
+
+```
+        <p>{this.state.error}</p>
+        {users.map((user) => (
+          <div
+            className="card"
+            key={user.id}
+          >
+            <h3>{user.name}</h3>
+            <p>{user.email}</p>
+          </div>
+        ))}
+      </div>
+    );
+  }
+}
+export default App;
+/* Program 10 App.css */
+body {
+  font-family: Arial;
+  background: #f2f2f2;
+}
+.box {
+  width: 350px;
+  margin: auto;
+  padding: 20px;
+}
+input {
+  padding: 8px;
+  width: 60%;
+}
+button {
+  padding: 8px;
+  margin-left: 5px;
+}
+.card {
+  background: white;
+  padding: 10px;
+  margin-top: 10px;
+  border-radius: 5px;
+}
+/////For execution /////
+```
+
+```
+Experiment 9 = React Router Navigation Application.
+```
+
+```
+src/
+│
+├── App.js
+├── App.css
+├── Home.js
+├── About.js
+├── Contact.js
+└── Navbar.js
+```
+
+```
+npm install react-router-dom
+```
+
+```
+// Home.js
+function Home() {
+  return <h1>Welcome to the Home Page</h1>;
+}
+export default Home;
+// About.js
+function About() {
+  return <h1>About Us</h1>;
+}
+export default About;
+// Contact.js
+function Contact() {
+  return <h1>Contact Us</h1>;
+}
+export default Contact;
+// Navbar.js
+import { NavLink } from "react-router-dom";
+function Navbar() {
+  return (
+    <nav>
+      <NavLink to="/" className="active">
+        Home
+      </NavLink>
+      <NavLink to="/about" className="active">
+        About
+      </NavLink>
+      <NavLink to="/contact" className="active">
+        Contact
+      </NavLink>
+    </nav>
+  );
+}
+export default Navbar;
+// App.js
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import Navbar from "./Navbar";
+import Home from "./Home";
+import About from "./About";
+import Contact from "./Contact";
+function App() {
+  return (
+```
+
+```
+    <Router>
+      <Navbar />
+      <Routes>
+        <Route path="/" element={<Home />} />
+        <Route path="/about" element={<About />} />
+        <Route path="/contact" element={<Contact />} />
+      </Routes>
+    </Router>
+  );
+}
+export default App;
+/* App.css */
+nav a {
+  margin: 10px;
+  text-decoration: none;
+  color: black;
+}
+.active {
+  font-weight: bold;
+  color: blue;
+}
+```
+
+```
+///Program 8 for execution///
+src/
+│
+├── App.js
+│
+└── components/
+    ├── AddTask.js
+    ├── Task.js
+    └── TaskList.js
+components/Task.js
+import React from "react";
+const Task = ({ task, toggleComplete }) => {
+  return (
+    <div
+      className="task"
+      style={{
+        textDecoration: task.completed
+          ? "line-through"
+          : "none"
+      }}
+    >
+      <h3>{task.name}</h3>
+      <p>Due: {task.dueDate}</p>
+      <button
+        onClick={() =>
+          toggleComplete(task.id)
+        }
+      >
+```
+
+```
+        {task.completed
+          ? "Mark as Incomplete"
+          : "Mark as Completed"}
+      </button>
+    </div>
+  );
+};
+export default Task;
+```
+
+```
+components/TaskList.js
+import React from "react";
+import Task from "./Task";
+const TaskList = ({
+  tasks,
+  toggleComplete
+}) => {
+  return (
+    <div>
+      {tasks.map((task) => (
+        <Task
+          key={task.id}
+          task={task}
+          toggleComplete={toggleComplete}
+        />
+      ))}
+    </div>
+  );
+};
+export default TaskList;
+```
+
+```
+components/AddTask.js
+import React, { useState } from "react";
+const AddTask = ({ addTask }) => {
+  const [taskName, setTaskName] =
+    useState("");
+  const [dueDate, setDueDate] =
+    useState("");
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (taskName.trim()) {
+      addTask(taskName, dueDate);
+      setTaskName("");
+      setDueDate("");
+    }
+  };
+  return (
+    <form onSubmit={handleSubmit}>
+      <input
+        type="text"
+        placeholder="Task Name"
+```
+
+```
+        value={taskName}
+        onChange={(e) =>
+          setTaskName(e.target.value)
+        }
+        required
+      />
+      <input
+        type="date"
+        value={dueDate}
+        onChange={(e) =>
+          setDueDate(e.target.value)
+        }
+      />
+      <button type="submit">
+        Add Task
+      </button>
+    </form>
+  );
+};
+export default AddTask;
+```
+
+```
+App.js
+```
+
+```
+import React, { useState } from "react";
+import AddTask from "./components/AddTask";
+import TaskList from "./components/TaskList";
+function App() {
+  const [tasks, setTasks] = useState([]);
+  const [filter, setFilter] =
+    useState("all");
+  // Add New Task
+  const addTask = (name, dueDate) => {
+    const newTask = {
+      id: Date.now(),
+      name,
+      dueDate,
+      completed: false
+    };
+    setTasks([...tasks, newTask]);
+  };
+  // Mark Task Complete / Incomplete
+  const toggleComplete = (id) => {
+    setTasks(
+      tasks.map((task) =>
+        task.id === id
+          ? {
+              ...task,
+              completed:
+                !task.completed
+            }
+          : task
+```
+
+```
+      )
+    );
+  };
+  // Filter Tasks
+  const filteredTasks = tasks.filter(
+    (task) =>
+      filter === "all"
+        ? true
+        : filter === "completed"
+        ? task.completed
+        : !task.completed
+  );
+  return (
+    <div>
+      <h1>
+        Reminder Application
+      </h1>
+      <AddTask addTask={addTask} />
+      <div>
+        <button
+          onClick={() =>
+            setFilter("all")
+          }
+        >
+          All Tasks
+        </button>
+        <button
+          onClick={() =>
+            setFilter("completed")
+          }
+        >
+          Completed
+        </button>
+        <button
+          onClick={() =>
+            setFilter("pending")
+          }
+        >
+          Pending
+        </button>
+      </div>
+      <TaskList
+        tasks={filteredTasks}
+        toggleComplete={
+          toggleComplete
+        }
+      />
+    </div>
+  );
+}
+export default App;
+```
+