gudu-programs 1.0.0

package/src/program-10/Program10.jsx

@@ -0,0 +1,55 @@
+import React from 'react'
+
+class Fetcher extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = { items: [], loading: false, error: null, query: '' }
+  }
+
+  componentDidMount() {
+    this.fetchData()
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    if (prevState.query !== this.state.query) {
+      this.fetchData()
+    }
+  }
+
+  fetchData() {
+    this.setState({ loading: true, error: null })
+    const q = this.state.query || ''
+    fetch(`https://jsonplaceholder.typicode.com/posts${q ? `?_limit=5` : `?_limit=10`}`)
+      .then((r) => r.json())
+      .then((data) => this.setState({ items: data, loading: false }))
+      .catch((err) => this.setState({ error: err.message, loading: false }))
+  }
+
+  render() {
+    const { items, loading, error } = this.state
+    return (
+      <div>
+        <h2>Program 10 — Class Component & API</h2>
+        <div style={{ marginBottom: 8 }}>
+          <label>Query (not used for API but triggers update): <input onChange={(e)=>this.setState({query: e.target.value})} /></label>
+          <button onClick={()=>this.fetchData()}>Refresh</button>
+        </div>
+        {loading && <div>Loading...</div>}
+        {error && <div style={{ color: 'red' }}>{error}</div>}
+        <ul>
+          {items.map(i => (
+            <li key={i.id}><strong>{i.title}</strong><div>{i.body}</div></li>
+          ))}
+        </ul>
+      </div>
+    )
+  }
+}
+
+export default function Program10() {
+  return (
+    <div className="program-page">
+      <Fetcher />
+    </div>
+  )
+}

package/src/program-2/Footer.jsx

@@ -0,0 +1,8 @@
+export default function Footer({ tagline, copyright }) {
+  return (
+    <footer style={{ marginTop: 12 }}>
+      <small>{tagline}</small>
+      <div style={{ color: '#666' }}>{copyright}</div>
+    </footer>
+  )
+}

package/src/program-2/Header.jsx

@@ -0,0 +1,3 @@
+export default function Header({ title }) {
+  return <header><h2>{title}</h2></header>
+}

package/src/program-2/Program2.jsx

@@ -0,0 +1,18 @@
+import Header from './Header'
+import Footer from './Footer'
+
+export default function Program2() {
+  const title = 'My Props Demo App'
+  const tagline = 'Passing data via props is simple and powerful.'
+  const copyright = '© 2026 Example Corp.'
+
+  return (
+    <div className="program-page">
+      <Header title={title} />
+      <main>
+        <p>This app shows how props pass data from parent to children.</p>
+      </main>
+      <Footer tagline={tagline} copyright={copyright} />
+    </div>
+  )
+}

package/src/program-3/Program3.jsx

@@ -0,0 +1,29 @@
+import { useState } from 'react'
+
+export default function Program3() {
+  const initial = 0
+  const [count, setCount] = useState(initial)
+  const [step, setStep] = useState(1)
+
+  const inc = () => setCount((c) => c + Number(step))
+  const dec = () => setCount((c) => Math.max(0, c - Number(step)))
+  const reset = () => setCount(initial)
+
+  return (
+    <div className="program-page">
+      <h2>Program 3 — Counter</h2>
+      <div style={{ fontSize: 48, margin: '12px 0', fontWeight: 700 }}>{count}</div>
+      <div style={{ display: 'flex', gap: 8 }}>
+        <button onClick={dec} className="btn">-</button>
+        <button onClick={inc} className="btn">+</button>
+        <button onClick={reset} className="btn">Reset</button>
+      </div>
+      <div style={{ marginTop: 12 }}>
+        <label>
+          Step:{' '}
+          <input type="number" value={step} min="1" onChange={(e) => setStep(e.target.value)} style={{ width: 80 }} />
+        </label>
+      </div>
+    </div>
+  )
+}

package/src/program-4/Program4.jsx

@@ -0,0 +1,9 @@
+import ToDoFunction from './ToDoFunction'
+
+export default function Program4() {
+  return (
+    <div className="program-page">
+      <ToDoFunction />
+    </div>
+  )
+}

package/src/program-4/ToDoFunction.jsx

@@ -0,0 +1,35 @@
+import { useState } from 'react'
+
+export default function ToDoFunction() {
+  const [tasks, setTasks] = useState([])
+  const [text, setText] = useState('')
+
+  const add = () => {
+    const t = text.trim()
+    if (!t) return
+    setTasks((s) => [...s, { id: Date.now(), text: t, done: false }])
+    setText('')
+  }
+
+  const toggle = (id) => setTasks((s) => s.map(t => t.id===id? {...t, done: !t.done}: t))
+  const remove = (id) => setTasks((s) => s.filter(t => t.id!==id))
+
+  return (
+    <div>
+      <h2>Program 4 — To-Do List</h2>
+      <div style={{ display: 'flex', gap: 8 }}>
+        <input value={text} onChange={(e) => setText(e.target.value)} placeholder="New task" />
+        <button onClick={add}>Add</button>
+      </div>
+      <ul style={{ marginTop: 12 }}>
+        {tasks.map((t) => (
+          <li key={t.id} style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
+            <input type="checkbox" checked={t.done} onChange={() => toggle(t.id)} />
+            <span style={{ textDecoration: t.done ? 'line-through' : 'none' }}>{t.text}</span>
+            <button onClick={() => remove(t.id)} style={{ marginLeft: 'auto' }}>Delete</button>
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}

package/src/program-5/BasicFigure.jsx

@@ -0,0 +1,9 @@
+export default function BasicFigure({ src, caption, onRemove }) {
+  return (
+    <figure style={{ border: '1px solid #ddd', padding: 8, borderRadius: 6 }}>
+      <img src={src} alt={caption} style={{ maxWidth: 200, display: 'block', marginBottom: 6 }} />
+      <figcaption>{caption}</figcaption>
+      {onRemove && <button onClick={onRemove} style={{ marginTop: 6 }}>Remove</button>}
+    </figure>
+  )
+}

package/src/program-5/FigureList.jsx

@@ -0,0 +1,38 @@
+import { useState } from 'react'
+import BasicFigure from './BasicFigure'
+
+const starter = [
+  { id: 1, src: 'https://via.placeholder.com/200', caption: 'Placeholder 1' },
+  { id: 2, src: 'https://via.placeholder.com/200?text=2', caption: 'Placeholder 2' },
+]
+
+export default function FigureList() {
+  const [items, setItems] = useState(starter)
+  const [url, setUrl] = useState('')
+  const [caption, setCaption] = useState('')
+
+  const add = () => {
+    if (!url.trim()) return
+    setItems((s) => [...s, { id: Date.now(), src: url.trim(), caption: caption.trim() }])
+    setUrl('')
+    setCaption('')
+  }
+
+  const remove = (id) => setItems((s) => s.filter(i => i.id !== id))
+
+  return (
+    <div>
+      <h2>Figures</h2>
+      <div style={{ display: 'flex', gap: 8, marginBottom: 8 }}>
+        <input placeholder="Image URL" value={url} onChange={(e)=>setUrl(e.target.value)} />
+        <input placeholder="Caption" value={caption} onChange={(e)=>setCaption(e.target.value)} />
+        <button onClick={add}>Add</button>
+      </div>
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 12 }}>
+        {items.map(i => (
+          <BasicFigure key={i.id} src={i.src} caption={i.caption} onRemove={() => remove(i.id)} />
+        ))}
+      </div>
+    </div>
+  )
+}

package/src/program-5/Program5.jsx

@@ -0,0 +1,10 @@
+import FigureList from './FigureList'
+
+export default function Program5() {
+  return (
+    <div className="program-page">
+      <h2>Program 5 — Figure Gallery</h2>
+      <FigureList />
+    </div>
+  )
+}

package/src/program-6/Program6.jsx

@@ -0,0 +1,53 @@
+import { useState } from 'react'
+
+const emailRe = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+
+export default function Program6() {
+  const [name, setName] = useState('')
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [showPw, setShowPw] = useState(false)
+  const [errors, setErrors] = useState({})
+
+  const sanitize = (s) => s.replace(/[<>]/g, '')
+
+  const submit = (e) => {
+    e.preventDefault()
+    const errs = {}
+    if (!name.trim()) errs.name = 'Name required'
+    if (!emailRe.test(email)) errs.email = 'Invalid email'
+    if (password.length < 6) errs.password = 'Password too short'
+    setErrors(errs)
+    if (Object.keys(errs).length === 0) {
+      const data = { name: sanitize(name), email: sanitize(email), password: '***' }
+      alert('Submitted: ' + JSON.stringify(data))
+    }
+  }
+
+  return (
+    <div className="program-page">
+      <h2>Program 6 — Form Validation</h2>
+      <form onSubmit={submit} noValidate>
+        <div>
+          <label>Name</label>
+          <input value={name} onChange={(e)=>setName(e.target.value)} style={{ borderColor: errors.name? 'red':undefined }} />
+          <div style={{ color: 'red' }}>{errors.name}</div>
+        </div>
+        <div>
+          <label>Email</label>
+          <input value={email} onChange={(e)=>setEmail(e.target.value)} style={{ borderColor: errors.email? 'red':undefined }} />
+          <div style={{ color: 'red' }}>{errors.email}</div>
+        </div>
+        <div>
+          <label>Password</label>
+          <input type={showPw? 'text':'password'} value={password} onChange={(e)=>setPassword(e.target.value)} style={{ borderColor: errors.password? 'red':undefined }} />
+          <div style={{ color: 'red' }}>{errors.password}</div>
+        </div>
+        <label><input type="checkbox" checked={showPw} onChange={(e)=>setShowPw(e.target.checked)} /> Show Password</label>
+        <div>
+          <button type="submit">Submit</button>
+        </div>
+      </form>
+    </div>
+  )
+}

package/src/program-7/ProfileCard.css

@@ -0,0 +1,14 @@
+.profile-card {
+  border-radius: 12px;
+  padding: 16px;
+  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
+  max-width: 360px;
+}
+.profile-card img {
+  width: 96px;
+  height: 96px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+.profile-card h3 { margin: 8px 0 4px }
+.profile-card p { margin: 0; color: #444 }

package/src/program-7/ProfileCard.jsx

@@ -0,0 +1,11 @@
+import './ProfileCard.css'
+
+export default function ProfileCard({ name, bio, img, bg }) {
+  return (
+    <div className="profile-card" style={{ background: bg || '#fff' }}>
+      <img src={img} alt={name} />
+      <h3>{name}</h3>
+      <p>{bio}</p>
+    </div>
+  )
+}

package/src/program-7/Program7.jsx

@@ -0,0 +1,22 @@
+import { useState } from 'react'
+import ProfileCard from './ProfileCard'
+
+export default function Program7() {
+  const [bg, setBg] = useState('#ffffff')
+  return (
+    <div className="program-page">
+      <h2>Program 7 — Profile Card</h2>
+      <div className="controls">
+        <label>Card background: <input value={bg} onChange={(e)=>setBg(e.target.value)} /></label>
+      </div>
+      <div style={{ marginTop: 12 }}>
+        <ProfileCard
+          name="Jane Doe"
+          bio="Frontend engineer and React enthusiast."
+          img="https://via.placeholder.com/150"
+          bg={bg}
+        />
+      </div>
+    </div>
+  )
+}

package/src/program-8/Program8.jsx

@@ -0,0 +1,46 @@
+import { useState } from 'react'
+
+export default function Program8() {
+  const [tasks, setTasks] = useState([])
+  const [name, setName] = useState('')
+  const [date, setDate] = useState('')
+  const [desc, setDesc] = useState('')
+  const [filter, setFilter] = useState('all')
+
+  const add = () => {
+    if (!name.trim()) return
+    setTasks(s => [...s, { id: Date.now(), name: name.trim(), date, desc, done: false }])
+    setName(''); setDate(''); setDesc('')
+  }
+
+  const toggle = (id) => setTasks(s => s.map(t => t.id===id? {...t, done: !t.done}: t))
+  const visible = tasks.filter(t => filter==='all' ? true : filter==='done' ? t.done : !t.done)
+
+  return (
+    <div className="program-page">
+      <h2>Program 8 — Reminder App</h2>
+      <div>
+        <input placeholder="Task" value={name} onChange={(e)=>setName(e.target.value)} />
+        <input type="date" value={date} onChange={(e)=>setDate(e.target.value)} />
+        <input placeholder="Description (optional)" value={desc} onChange={(e)=>setDesc(e.target.value)} />
+        <button onClick={add}>Add</button>
+      </div>
+      <div style={{ marginTop: 8 }}>
+        <label><input type="radio" name="f" checked={filter==='all'} onChange={()=>setFilter('all')} /> All</label>
+        <label><input type="radio" name="f" checked={filter==='done'} onChange={()=>setFilter('done')} /> Completed</label>
+        <label><input type="radio" name="f" checked={filter==='pending'} onChange={()=>setFilter('pending')} /> Pending</label>
+      </div>
+      <ul style={{ marginTop: 12 }}>
+        {visible.map(t => (
+          <li key={t.id} style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
+            <input type="checkbox" checked={t.done} onChange={()=>toggle(t.id)} />
+            <div>
+              <div style={{ fontWeight: 600 }}>{t.name} <small style={{ color: '#666' }}>{t.date}</small></div>
+              <div style={{ color: '#444' }}>{t.desc}</div>
+            </div>
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}

package/src/program-9/Program9.jsx

@@ -0,0 +1,25 @@
+import { Routes, Route, NavLink } from 'react-router-dom'
+
+function Home() { return <div><h3>Home</h3><p>Welcome to the Home page.</p></div> }
+function About() { return <div><h3>About</h3><p>About page content.</p></div> }
+function Contact() { return <div><h3>Contact</h3><p>Contact details here.</p></div> }
+
+export default function Program9() {
+  return (
+    <div className="program-page">
+      <h2>Program 9 — Routing Example</h2>
+      <nav style={{ display: 'flex', gap: 8, marginBottom: 8 }}>
+        <NavLink to="/program-9/" end>Home</NavLink>
+        <NavLink to="/program-9/about">About</NavLink>
+        <NavLink to="/program-9/contact">Contact</NavLink>
+      </nav>
+      <div style={{ background: '#fff' }}>
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route path="about" element={<About />} />
+          <Route path="contact" element={<Contact />} />
+        </Routes>
+      </div>
+    </div>
+  )
+}