dev-code-snippets-md 1.0.0 → 1.1.0

package/snippets/react-code-snippets.md

@@ -1,458 +0,0 @@
-# React Lab Programs (Experiment 06–10)
-
-Source: BCSL657B React Lab Manual
-
----
-
-# EXPERIMENT 06 — React Form Validation
-
-## File: src/App.js
-
-```javascript
-import './App.css';
-import React, { useState } from "react";
-
-const App = () => {
-
-  const [formData, setFormData] = useState({
-    name: "",
-    email: "",
-    password: "",
-    showPassword: false
-  });
-
-  const [errors, setErrors] = useState({});
-
-  const handleChange = (e) => {
-    const { name, value } = e.target;
-    let sanitizedValue = value.replace(/[<>]/g, "");
-    setFormData({ ...formData, [name]: sanitizedValue });
-  };
-
-  const toggleShowPassword = () => {
-    setFormData({ ...formData, showPassword: !formData.showPassword });
-  };
-
-  const validateForm = () => {
-
-    let newErrors = {};
-
-    if (!formData.name.trim())
-      newErrors.name = "Name is required.";
-
-    if (!formData.email.trim())
-      newErrors.email = "Email is required.";
-    else if (!/^\S+@\S+\.\S+$/.test(formData.email))
-      newErrors.email = "Invalid email format.";
-
-    if (!formData.password.trim())
-      newErrors.password = "Password is required.";
-    else if (formData.password.length < 6)
-      newErrors.password = "Password must be at least 6 characters.";
-
-    setErrors(newErrors);
-
-    return Object.keys(newErrors).length === 0;
-
-  };
-
-  const handleSubmit = (e) => {
-
-    e.preventDefault();
-
-    if (validateForm()) {
-
-      console.log("Form Submitted Successfully!", formData);
-
-      alert("Form Submitted Successfully!");
-
-      setFormData({
-        name: "",
-        email: "",
-        password: "",
-        showPassword: false
-      });
-
-      setErrors({});
-
-    }
-
-  };
-
-  return (
-
-    <div className="container">
-
-      <h2>React Form</h2>
-
-      <form onSubmit={handleSubmit}>
-
-        <label>Name</label>
-        <input name="name" value={formData.name} onChange={handleChange} />
-        {errors.name && <p>{errors.name}</p>}
-
-        <label>Email</label>
-        <input name="email" value={formData.email} onChange={handleChange} />
-        {errors.email && <p>{errors.email}</p>}
-
-        <label>Password</label>
-        <input
-          type={formData.showPassword ? "text" : "password"}
-          name="password"
-          value={formData.password}
-          onChange={handleChange}
-        />
-        {errors.password && <p>{errors.password}</p>}
-
-        <label>
-          <input type="checkbox" checked={formData.showPassword} onChange={toggleShowPassword}/>
-          Show Password
-        </label>
-
-        <button type="submit">Submit</button>
-
-      </form>
-
-    </div>
-
-  );
-
-};
-
-export default App;
-```
-
----
-
-# EXPERIMENT 07 — Profile Card Component
-
-## File: src/components/ProfileCard.js
-
-```javascript
-import React, { useState } from "react";
-
-const ProfileCard = ({ name, bio, profilePic, initialBgColor }) => {
-
-  const [bgColor, setBgColor] = useState(initialBgColor || "#f8f9fa");
-
-  const changeBackground = () => {
-
-    const colors = ["#ffadad","#ffd6a5","#cce5ff","#d4a5a5","#caffbf"];
-
-    const randomColor = colors[Math.floor(Math.random() * colors.length)];
-
-    setBgColor(randomColor);
-
-  };
-
-  return (
-
-    <div style={{ backgroundColor: bgColor, padding: "20px", textAlign: "center" }}>
-
-      <img
-        src={profilePic}
-        alt="profile"
-        style={{ width: "100px", borderRadius: "50%" }}
-      />
-
-      <h2>{name}</h2>
-
-      <p>{bio}</p>
-
-      <button onClick={changeBackground}>
-        Change Background
-      </button>
-
-    </div>
-
-  );
-
-};
-
-export default ProfileCard;
-```
-
----
-
-# EXPERIMENT 08 — Reminder Application
-
-## File: src/components/AddTask.js
-
-```javascript
-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)}
-      />
-
-      <input
-        type="date"
-        value={dueDate}
-        onChange={(e) => setDueDate(e.target.value)}
-      />
-
-      <button type="submit">Add Task</button>
-
-    </form>
-
-  );
-
-};
-
-export default AddTask;
-```
-
----
-
-## File: src/App.js
-
-```javascript
-import React, { useState } from 'react';
-import AddTask from './components/AddTask';
-
-function App() {
-
-  const [tasks, setTasks] = useState([]);
-
-  const addTask = (name, dueDate) => {
-
-    const newTask = {
-      id: Date.now(),
-      name,
-      dueDate,
-      completed: false
-    };
-
-    setTasks([...tasks, newTask]);
-
-  };
-
-  return (
-
-    <div>
-
-      <h1>Reminder App</h1>
-
-      <AddTask addTask={addTask} />
-
-      <ul>
-
-        {tasks.map(task => (
-          <li key={task.id}>
-            {task.name} - {task.dueDate}
-          </li>
-        ))}
-
-      </ul>
-
-    </div>
-
-  );
-
-}
-
-export default App;
-```
-
----
-
-# EXPERIMENT 09 — React Router Navigation
-
-## File: src/App.js
-
-```javascript
-import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
-
-function Home() {
-  return <h1>Welcome to Home</h1>;
-}
-
-function About() {
-  return <h1>About Us</h1>;
-}
-
-function Contact() {
-  return <h1>Contact Us</h1>;
-}
-
-function App() {
-
-  return (
-
-    <Router>
-
-      <Routes>
-
-        <Route path="/" element={<Home />} />
-
-        <Route path="/about" element={<About />} />
-
-        <Route path="/contact" element={<Contact />} />
-
-      </Routes>
-
-    </Router>
-
-  );
-
-}
-
-export default App;
-```
-
----
-
-# EXPERIMENT 10 — Lifecycle Methods + API Fetch
-
-## File: src/DataFetcher.js
-
-```javascript
-import React, { Component } from "react";
-import axios from "axios";
-
-class DataFetcher extends Component {
-
-  constructor(props) {
-
-    super(props);
-
-    this.state = {
-      data: [],
-      searchTerm: '',
-      error: null,
-    };
-
-  }
-
-  componentDidMount() {
-    this.fetchData();
-  }
-
-  componentDidUpdate(prevProps, prevState) {
-
-    if (prevState.searchTerm !== this.state.searchTerm) {
-      this.fetchData();
-    }
-
-  }
-
-  fetchData = () => {
-
-    axios.get("https://jsonplaceholder.typicode.com/posts")
-
-      .then(response => {
-        this.setState({
-          data: response.data,
-          error: null
-        });
-      })
-
-      .catch(() => {
-        this.setState({
-          error: "Failed to fetch data"
-        });
-      });
-
-  };
-
-  handleSearch = (event) => {
-
-    this.setState({
-      searchTerm: event.target.value
-    });
-
-  };
-
-  render() {
-
-    const { data, searchTerm, error } = this.state;
-
-    const filteredData =
-      data.filter(item =>
-        item.title.includes(searchTerm)
-      );
-
-    return (
-
-      <div>
-
-        <h1>Data Fetcher</h1>
-
-        <input
-          type="text"
-          placeholder="Search..."
-          onChange={this.handleSearch}
-        />
-
-        {error && <p>{error}</p>}
-
-        <ul>
-
-          {filteredData.map(item => (
-            <li key={item.id}>{item.title}</li>
-          ))}
-
-        </ul>
-
-      </div>
-
-    );
-
-  }
-
-}
-
-export default DataFetcher;
-```
-
----
-
-## File: src/App.js
-
-```javascript
-import React from "react";
-import DataFetcher from "./DataFetcher";
-
-function App() {
-
-  return (
-
-    <div>
-
-      <DataFetcher />
-
-    </div>
-
-  );
-
-}
-
-export default App;
-```