web-prac 0.1.0__tar.gz

web_prac-0.1.0/PKG-INFO

@@ -0,0 +1,46 @@
+Metadata-Version: 2.4
+Name: web-prac
+Version: 0.1.0
+Summary: Ready-to-run code scaffolder for Web Lab practicals (HTML, CSS, TypeScript, React, Node.js, Flask)
+Requires-Python: >=3.8
+Description-Content-Type: text/markdown
+
+# web-prac (`import web`)
+
+Direct, ready-to-run file scaffolder for Web Lab experiments (HTML, CSS, TypeScript, React, Node.js, Flask).
+
+## Installation
+
+```bash
+pip install web-prac
+```
+
+## Usage
+
+In any Python script or interactive Python shell in VS Code:
+
+```python
+import web
+
+# Exp 2: HTML5/CSS3 Personal Resume
+web.exp2()
+
+# Exp 3: Student Registration Form (HTML, CSS, JS with factorial & fibonacci)
+web.exp3()
+
+# Exp 4: TypeScript (Primitives, enums, objects, OOP inheritance)
+web.exp4()
+
+# Exp 5: React Single Page Application (React Router DOM, components, styles)
+web.exp5()
+
+# Exp 7: Node.js File Server & File Handling (HTTP server + fs operations)
+web.exp7()
+
+# Exp 8: Flask Feedback Application (GET/POST form handling)
+web.exp8()
+```
+
+### Folder Handling
+- **If a project folder is already open in VS Code**, the files are written directly into your active folder.
+- **If no folder is open**, it automatically creates a `prac/` folder and opens it directly in VS Code.

web_prac-0.1.0/README.md

@@ -0,0 +1,39 @@
+# web-prac (`import web`)
+
+Direct, ready-to-run file scaffolder for Web Lab experiments (HTML, CSS, TypeScript, React, Node.js, Flask).
+
+## Installation
+
+```bash
+pip install web-prac
+```
+
+## Usage
+
+In any Python script or interactive Python shell in VS Code:
+
+```python
+import web
+
+# Exp 2: HTML5/CSS3 Personal Resume
+web.exp2()
+
+# Exp 3: Student Registration Form (HTML, CSS, JS with factorial & fibonacci)
+web.exp3()
+
+# Exp 4: TypeScript (Primitives, enums, objects, OOP inheritance)
+web.exp4()
+
+# Exp 5: React Single Page Application (React Router DOM, components, styles)
+web.exp5()
+
+# Exp 7: Node.js File Server & File Handling (HTTP server + fs operations)
+web.exp7()
+
+# Exp 8: Flask Feedback Application (GET/POST form handling)
+web.exp8()
+```
+
+### Folder Handling
+- **If a project folder is already open in VS Code**, the files are written directly into your active folder.
+- **If no folder is open**, it automatically creates a `prac/` folder and opens it directly in VS Code.

web_prac-0.1.0/pyproject.toml

@@ -0,0 +1,14 @@
+[build-system]
+requires = ["setuptools>=68"]
+build-backend = "setuptools.build_meta"
+
+[project]
+name = "web-prac"
+version = "0.1.0"
+description = "Ready-to-run code scaffolder for Web Lab practicals (HTML, CSS, TypeScript, React, Node.js, Flask)"
+readme = "README.md"
+requires-python = ">=3.8"
+dependencies = []
+
+[tool.setuptools]
+packages = ["web"]

web_prac-0.1.0/setup.cfg

@@ -0,0 +1,4 @@
+[egg_info]
+tag_build = 
+tag_date = 0
+

web_prac-0.1.0/tests/test_web.py

@@ -0,0 +1,61 @@
+import os
+import sys
+import tempfile
+import unittest
+from pathlib import Path
+
+PKG_ROOT = Path(__file__).resolve().parents[1]
+if str(PKG_ROOT) not in sys.path:
+    sys.path.insert(0, str(PKG_ROOT))
+
+import web
+
+
+class TestWebPractical(unittest.TestCase):
+    def test_get_code(self):
+        for exp in ["exp2", "exp3", "exp4", "exp5", "exp7", "exp8"]:
+            files = web.get_code(exp)
+            self.assertIsInstance(files, dict)
+            self.assertGreater(len(files), 0)
+
+    def test_exp2_creation(self):
+        with tempfile.TemporaryDirectory() as tmp:
+            web.exp2(path=tmp)
+            self.assertTrue((Path(tmp) / "index.html").exists())
+
+    def test_exp3_creation(self):
+        with tempfile.TemporaryDirectory() as tmp:
+            web.exp3(path=tmp)
+            self.assertTrue((Path(tmp) / "index.html").exists())
+            self.assertTrue((Path(tmp) / "styles.css").exists())
+            self.assertTrue((Path(tmp) / "script.js").exists())
+
+    def test_exp4_creation(self):
+        with tempfile.TemporaryDirectory() as tmp:
+            web.exp4(path=tmp)
+            self.assertTrue((Path(tmp) / "index.ts").exists())
+            self.assertTrue((Path(tmp) / "tsconfig.json").exists())
+
+    def test_exp5_creation(self):
+        with tempfile.TemporaryDirectory() as tmp:
+            web.exp5(path=tmp)
+            self.assertTrue((Path(tmp) / "src" / "App.jsx").exists())
+            self.assertTrue((Path(tmp) / "src" / "App.css").exists())
+            self.assertTrue((Path(tmp) / "package.json").exists())
+
+    def test_exp7_creation(self):
+        with tempfile.TemporaryDirectory() as tmp:
+            web.exp7(path=tmp)
+            self.assertTrue((Path(tmp) / "server.js").exists())
+            self.assertTrue((Path(tmp) / "file_ops.js").exists())
+            self.assertTrue((Path(tmp) / "file.txt").exists())
+
+    def test_exp8_creation(self):
+        with tempfile.TemporaryDirectory() as tmp:
+            web.exp8(path=tmp)
+            self.assertTrue((Path(tmp) / "app.py").exists())
+            self.assertTrue((Path(tmp) / "templates" / "feedback.html").exists())
+
+
+if __name__ == "__main__":
+    unittest.main()

web_prac-0.1.0/web/__init__.py

@@ -0,0 +1,50 @@
+"""web-prac: Ready-to-run code scaffolder for Web Lab experiments."""
+
+from .exp2 import exp2, resume
+from .exp3 import exp3, registration
+from .exp4 import exp4, typescript
+from .exp5 import exp5, react
+from .exp7 import exp7, nodejs
+from .exp8 import exp8, flask
+
+_EXP_MAP = {
+    "exp2": ".exp2",
+    "resume": ".exp2",
+    "exp3": ".exp3",
+    "registration": ".exp3",
+    "exp4": ".exp4",
+    "typescript": ".exp4",
+    "exp5": ".exp5",
+    "react": ".exp5",
+    "exp7": ".exp7",
+    "nodejs": ".exp7",
+    "exp8": ".exp8",
+    "flask": ".exp8",
+}
+
+
+def get_code(exp_name: str) -> dict:
+    """Returns the dictionary of {filename: content} for an experiment without writing to disk."""
+    name = exp_name.lower().replace("-", "_")
+    if name not in _EXP_MAP:
+        raise ValueError(f"Unknown experiment: {exp_name}. Available: {list(_EXP_MAP.keys())}")
+    import importlib
+    mod = importlib.import_module(_EXP_MAP[name], __name__)
+    return mod.FILES
+
+
+__all__ = [
+    "exp2",
+    "exp3",
+    "exp4",
+    "exp5",
+    "exp7",
+    "exp8",
+    "resume",
+    "registration",
+    "typescript",
+    "react",
+    "nodejs",
+    "flask",
+    "get_code",
+]

web_prac-0.1.0/web/_core.py

@@ -0,0 +1,51 @@
+import os
+import subprocess
+from pathlib import Path
+from typing import Dict, Optional
+
+
+def get_target_dir(custom_path: Optional[str] = None) -> Path:
+    if custom_path:
+        target = Path(custom_path).resolve()
+        target.mkdir(parents=True, exist_ok=True)
+        return target
+
+    cwd = Path.cwd().resolve()
+    user_home = Path.home().resolve()
+
+    is_home_or_root = (
+        cwd == user_home
+        or cwd == Path(cwd.anchor).resolve()
+        or cwd.name.lower() in ("system32", "windows", "temp")
+    )
+
+    if is_home_or_root:
+        target = cwd / "prac"
+        target.mkdir(parents=True, exist_ok=True)
+        try:
+            subprocess.Popen(["code", str(target)], shell=True)
+        except Exception:
+            try:
+                os.startfile(target)
+            except Exception:
+                pass
+        return target
+    else:
+        return cwd
+
+
+def write_files(files: Dict[str, str], exp_name: str, custom_path: Optional[str] = None) -> Path:
+    target = get_target_dir(custom_path)
+    created = []
+    for rel_path, content in files.items():
+        file_path = target / rel_path
+        file_path.parent.mkdir(parents=True, exist_ok=True)
+        file_path.write_text(content.strip() + "\n", encoding="utf-8")
+        created.append(rel_path)
+
+    print(f"\n[web] Successfully created {exp_name} files in:")
+    print(f"      {target}")
+    for f in created:
+        print(f"       -> {f}")
+    print()
+    return target

web_prac-0.1.0/web/exp2.py

@@ -0,0 +1,100 @@
+from ._core import write_files
+
+FILES = {
+    "index.html": """<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Veer Gopani</title>
+    <style>
+        * { margin:0; padding:0; box-sizing:border-box; font-family:'Trebuchet MS', Verdana, sans-serif; }
+        body { background:#d0d5dc; color:#222; display:flex; justify-content:center; align-items:center; min-height:100vh; padding:1.5rem; }
+        .container { width:85%; max-width:900px; background:#f5f6f8; border-radius:15px; overflow:hidden; box-shadow:0 8px 20px rgba(0,0,0,0.2); }
+        .header { background:linear-gradient(135deg, #1a1a1a, #3a3a3a); color:#f0f0f0; text-align:center; padding:2rem 1.5rem; }
+        .header img { width:130px; height:130px; border-radius:50%; border:4px solid #888; object-fit:cover; margin-bottom:12px; background:#555; }
+        .header h1 { font-size:2.2rem; letter-spacing:1px; color:#ffffff; }
+        .header p { font-size:1rem; margin-top:6px; font-style:italic; opacity:0.85; color:#c0c0c0; }
+        .section { padding:1.5rem 2rem; border-bottom:1px solid #d0d0d0; background:#f8f9fa; }
+        .section:nth-child(even) { background:#eef0f2; }
+        .section h2 { color:#1a1a1a; margin-bottom:12px; border-left:5px solid #555; padding-left:12px; font-size:1.2rem; }
+        .section p { line-height:1.7; color:#2a2a2a; }
+        .skills span { display:inline-block; background:#3a3a3a; color:#f0f0f0; padding:6px 18px; border-radius:25px; margin:5px; transition:0.3s; cursor:default; font-size:0.9rem; }
+        .skills span:hover { background:#1a1a1a; transform:scale(1.05); }
+        ul { margin-left:20px; list-style:none; }
+        li { margin-bottom:8px; padding-left:1.2rem; position:relative; line-height:1.6; color:#2a2a2a; }
+        li::before { content:"▹"; position:absolute; left:0; color:#555; font-weight:600; }
+        .contact p { margin:6px 0; padding-left:0; }
+        .contact p::before { content:none; }
+        .contact p strong { display:inline-block; min-width:80px; color:#1a1a1a; }
+        footer { background:#1a1a1a; color:#c0c0c0; text-align:center; padding:16px; font-size:0.9rem; }
+        @media(max-width:600px){ .container{width:98%;} .header img{width:100px;height:100px;} .header h1{font-size:1.6rem;} .section{padding:1.2rem;} .contact p strong{min-width:70px;} }
+    </style>
+</head>
+<body>
+<div class="container">
+    <div class="header">
+        <img src="image.png" alt="Profile Picture">
+        <h1>Veer Gopani</h1>
+        <p>Information Technology Student | Web Developer | UI Enthusiast</p>
+    </div>
+    <div class="section">
+        <h2>About Me</h2>
+        <p><i>"Dream big, stay focused, and never stop learning."</i></p>
+        <br>
+        <p>I am <strong>Veer Gopani</strong>, an Information Technology student with a keen interest in web development and software programming. I enjoy designing responsive websites, learning new technologies, and improving my coding skills through projects.</p>
+    </div>
+    <div class="section contact">
+        <h2>Personal Details</h2>
+        <p><strong>Name:</strong> Veer Gopani</p>
+        <p><strong>Age:</strong> 20 Years</p>
+        <p><strong>Email:</strong> veergopani70@gmail.com</p>
+        <p><strong>Phone:</strong> +91 9833009090</p>
+        <p><strong>Address:</strong> Mumbai, Maharashtra</p>
+    </div>
+    <div class="section">
+        <h2>Academic Qualifications</h2>
+        <ul>
+            <li><strong>T.E. Information Technology</strong> - St. Francis Institute of Technology (Pursuing)</li>
+            <li><strong>HSC</strong> - Nirmala Memorial Foundation Jr. College</li>
+            <li><strong>SSC</strong> - Kapol Vidhyanidhi International School</li>
+        </ul>
+    </div>
+    <div class="section">
+        <h2>Skills</h2>
+        <div class="skills">
+            <span>JS</span><span>TS</span><span>Python</span>
+            <span>Java</span><span>Flutter</span><span>C/C++</span>
+        </div>
+    </div>
+    <div class="section">
+        <h2>Projects</h2>
+        <ul>
+            <li>TransitOS: Unified Mobility Kernel</li>
+            <li>Null Geodesic Raytracer</li>
+            <li>AgriNext</li>
+        </ul>
+    </div>
+    <div class="section">
+        <h2>Achievements</h2>
+        <ul>
+            <li>1st Place in the Blockchain Track in CodeSangram Online Hackathon 2026</li>
+        </ul>
+    </div>
+    <footer><p>© 2026 Veer Gopani</p></footer>
+</div>
+</body>
+</html>
+"""
+}
+
+
+def exp2(path=None):
+    """Experiment 2: HTML5/CSS3 Personal Resume Layout."""
+    return write_files(FILES, "Experiment 2 (Resume)", path)
+
+
+resume = exp2
+
+if __name__ == "__main__":
+    exp2()

web_prac-0.1.0/web/exp3.py

@@ -0,0 +1,185 @@
+from ._core import write_files
+
+FILES = {
+    "index.html": """<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Student Registration Form</title>
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <div class="card">
+    <h2>Student Registration</h2>
+
+    <div class="field">
+      <label for="firstName">First Name *</label>
+      <input type="text" id="firstName" placeholder="First name">
+    </div>
+
+    <div class="field">
+      <label for="middleName">Middle Name</label>
+      <input type="text" id="middleName" placeholder="Middle name">
+    </div>
+
+    <div class="field">
+      <label for="lastName">Last Name *</label>
+      <input type="text" id="lastName" placeholder="Last name">
+    </div>
+
+    <div class="field">
+      <label for="rollNo">Roll No *</label>
+      <input type="number" id="rollNo" placeholder="Enter roll number">
+    </div>
+
+    <div class="field">
+      <label for="mobileNo">Mobile Number *</label>
+      <input type="text" id="mobileNo" placeholder="10-digit mobile number">
+    </div>
+
+    <div class="field">
+      <label for="address">Address *</label>
+      <textarea id="address" rows="3" placeholder="Enter full address"></textarea>
+    </div>
+
+    <div class="field">
+      <label for="factorial-input">Enter the factorial number</label>
+      <input type="number" id="factorial-input" placeholder="enter factorial no">
+    </div>
+
+    <div class="field">
+      <label for="fibonacci-input">Enter the number of terms</label>
+      <input type="number" id="fibonacci-input" placeholder="enter no of terms">
+    </div>
+
+    <button onclick="submitValues()">Submit</button>
+
+    <div id="output"></div>
+  </div>
+
+  <script src="script.js"></script>
+</body>
+</html>
+""",
+    "styles.css": """.card {
+  background-color: #2c1b27;
+  padding: 25px 30px;
+  border-radius: 8px;
+  box-shadow: 0 4px 10px rgba(233, 229, 229, 0.1);
+  width: 100%;
+  max-width: 380px;
+  margin: 30px auto;
+}
+
+h2 {
+  margin-top: 0;
+  text-align: center;
+  color: #ffffff;
+}
+
+.field {
+  margin-bottom: 12px;
+}
+
+label {
+  display: block;
+  margin-bottom: 4px;
+  font-weight: bold;
+  font-size: 14px;
+  color: #ffffff;
+}
+
+input, textarea {
+  width: 100%;
+  padding: 8px;
+  box-sizing: border-box;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  background-color: #fafafa;
+  font-size: 14px;
+  font-family: inherit;
+}
+
+button {
+  width: 100%;
+  padding: 10px;
+  background-color: #28a745;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 16px;
+  margin-top: 10px;
+}
+
+button:hover {
+  background-color: #218838;
+}
+
+#output {
+  margin-top: 15px;
+  font-weight: bold;
+  font-size: 14px;
+  line-height: 1.5;
+}
+""",
+    "script.js": """function submitValues() {
+  let firstName = document.getElementById("firstName").value;
+  let middleName = document.getElementById("middleName").value;
+  let lastName = document.getElementById("lastName").value;
+  let rollNo = document.getElementById("rollNo").value;
+  let mobileNo = document.getElementById("mobileNo").value;
+  let address = document.getElementById("address").value;
+  let factorial_input = document.getElementById("factorial-input").value;
+  let fibonacci_input = document.getElementById("fibonacci-input").value;
+
+  let output = document.getElementById("output");
+
+  let factorial_output = 1;
+  for (let index = 1; index <= factorial_input; index++) {
+    factorial_output = factorial_output * index;
+  }
+
+  let fib_num = parseInt(fibonacci_input) || 0;
+  let fib_sequence = [];
+  let a = 0, b = 1;
+  for (let index = 0; index < fib_num; index++) {
+    fib_sequence.push(a);
+    let next = a + b;
+    a = b;
+    b = next;
+  }
+  let fibonacci_output = fib_sequence.join(", ") || "None";
+
+  if (firstName == "" || lastName == "" || rollNo == "" || mobileNo == "" || address == "") {
+    output.innerText = "Please fill in all required (*) fields!";
+    output.style.color = "red";
+  } else {
+    let fullName = firstName + (middleName ? " " + middleName : "") + " " + lastName;
+
+    output.style.color = "#ffffff";
+    output.innerHTML =
+      "<hr>" +
+      "<strong>Registration Details:</strong><br>" +
+      "Name: " + fullName + "<br>" +
+      "Roll No: " + rollNo + "<br>" +
+      "Mobile: " + mobileNo + "<br>" +
+      "Address: " + address + "<br>" +
+      "Factorial Output: " + factorial_output + "<br>" +
+      "Fibonacci Series: " + fibonacci_output;
+  }
+}
+"""
+}
+
+
+def exp3(path=None):
+    """Experiment 3: Student Registration Form with Validation, Factorial, and Fibonacci."""
+    return write_files(FILES, "Experiment 3 (Student Registration)", path)
+
+
+registration = exp3
+
+if __name__ == "__main__":
+    exp3()

web_prac-0.1.0/web/exp4.py

@@ -0,0 +1,130 @@
+from ._core import write_files
+
+FILES = {
+    "index.ts": """// Primitive datatypes
+let a: number = 47901;
+let b: string = "Veer";
+let c: boolean = true;
+let d: null = null;
+let e: undefined = undefined;
+
+console.log("Number:", a);
+console.log("String:", b);
+console.log("Boolean:", c);
+console.log("Null:", d);
+console.log("Undefined:", e);
+
+// Non-primitive datatypes
+let marks: number[] = [85, 99, 100]; // array
+console.log("Marks array:", marks);
+
+let student1: [number, string] = [60, "Veer"]; // tuple
+console.log("Student tuple:", student1);
+
+// User-defined datatypes: enum
+enum Day {
+  Monday = "Monday",
+  Tuesday = "Tuesday",
+  Wednesday = "Wednesday",
+  Thursday = "Thursday",
+  Friday = "Friday",
+  Saturday = "Saturday",
+  Sunday = "Sunday"
+}
+
+let today: Day = Day.Sunday;
+console.log("Enum Day:", today);
+
+// Typed Object
+let student: {
+  name: string;
+  age: number;
+} = {
+  name: "Veer",
+  age: 21
+};
+console.log("Student Object:", student.name, student.age);
+
+// Inheritance: Base class
+class Company {
+  companyName: string;
+  constructor(companyName: string) {
+    this.companyName = companyName;
+  }
+  displayCompany() {
+    console.log("Company Name:", this.companyName);
+  }
+}
+
+// Single Inheritance
+class Employee extends Company {
+  employeeName: string;
+  employeeId: number;
+  constructor(companyName: string, employeeName: string, employeeId: number) {
+    super(companyName);
+    this.employeeName = employeeName;
+    this.employeeId = employeeId;
+  }
+  displayEmployee() {
+    console.log("Employee Name:", this.employeeName);
+    console.log("Employee ID:", this.employeeId);
+  }
+}
+
+const employee1 = new Employee("Ballers Inc.", "Baller", 999);
+employee1.displayCompany();
+employee1.displayEmployee();
+
+// Multilevel Inheritance
+class Manager extends Employee {
+  department: string;
+  constructor(companyName: string, employeeName: string, employeeId: number, department: string) {
+    super(companyName, employeeName, employeeId);
+    this.department = department;
+  }
+  displayManager() {
+    console.log("Department:", this.department);
+  }
+}
+
+const manager1 = new Manager("Ballers Inc.", "Veer", 67, "Goonology");
+manager1.displayCompany();
+manager1.displayEmployee();
+manager1.displayManager();
+""",
+    "tsconfig.json": """{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "commonjs",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true
+  }
+}
+""",
+    "package.json": """{
+  "name": "exp4-typescript",
+  "version": "1.0.0",
+  "scripts": {
+    "build": "tsc",
+    "start": "npx ts-node index.ts"
+  },
+  "devDependencies": {
+    "ts-node": "^10.9.2",
+    "typescript": "^5.0.0"
+  }
+}
+"""
+}
+
+
+def exp4(path=None):
+    """Experiment 4: TypeScript Datatypes, Enums, Interfaces, and Multilevel Inheritance."""
+    return write_files(FILES, "Experiment 4 (TypeScript)", path)
+
+
+typescript = exp4
+
+if __name__ == "__main__":
+    exp4()

web_prac-0.1.0/web/exp5.py

@@ -0,0 +1,236 @@
+from ._core import write_files
+
+FILES = {
+    "index.html": """<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Web Lab - React SPA</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
+""",
+    "src/main.jsx": """import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App.jsx';
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+""",
+    "src/App.jsx": """import './App.css';
+import { BrowserRouter, Route, Routes, Link } from 'react-router-dom';
+
+function Home() {
+  const topics = [
+    { srNo: 1, topic: 'HTML & CSS' },
+    { srNo: 2, topic: 'JavaScript' },
+    { srNo: 3, topic: 'TypeScript' },
+    { srNo: 4, topic: 'React' },
+    { srNo: 5, topic: 'Node.js & Express' },
+  ];
+
+  return (
+    <div className="section-container">
+      <h4 className="section-title">Topics to be covered</h4>
+      <table className="topics-table">
+        <thead>
+          <tr>
+            <th>Sr. No.</th>
+            <th>Topics</th>
+          </tr>
+        </thead>
+        <tbody>
+          {topics.map((item) => (
+            <tr key={item.srNo}>
+              <td className="text-center">{item.srNo}</td>
+              <td>{item.topic}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+function About() {
+  return (
+    <div className="section-container">
+      <h4 className="section-title">Sessions=&gt;</h4>
+      <div className="content-box">
+        <p>
+          Web Course
+          <br />
+          Web Lab
+          <br />
+          Web Assignment
+          <br />
+          Web Experiment
+        </p>
+      </div>
+    </div>
+  );
+}
+
+function Contact() {
+  return (
+    <div className="section-container">
+      <h4 className="section-title">Contacts</h4>
+      <div className="content-box">
+        <p>Phone No: +91 9372771613</p>
+        <p className="margin-top-sm">
+          Email-ID: veergopani70@student.sfit.ac.in
+        </p>
+      </div>
+    </div>
+  );
+}
+
+function App() {
+  return (
+    <div className="app-root">
+      <BrowserRouter>
+        <nav className="navbar">
+          <span className="nav-title">Web Lab</span>
+          <Link to="/" className="nav-link nav-link-active">
+            Home
+          </Link>
+          <Link to="/about" className="nav-link">
+            Sessions
+          </Link>
+          <Link to="/contact" className="nav-link">
+            Contact
+          </Link>
+        </nav>
+
+        <main className="page-body">
+          <Routes>
+            <Route path="/" element={<Home />} />
+            <Route path="/about" element={<About />} />
+            <Route path="/contact" element={<Contact />} />
+          </Routes>
+        </main>
+      </BrowserRouter>
+    </div>
+  );
+}
+
+export default App;
+""",
+    "src/App.css": """.app-root {
+  font-family: sans-serif;
+  margin: 0;
+  padding: 0;
+}
+
+.navbar {
+  background-color: #e3f2fd;
+  padding: 10px 20px;
+  display: flex;
+  align-items: center;
+  gap: 25px;
+  font-weight: bold;
+}
+
+.nav-title {
+  margin-right: auto;
+}
+
+.nav-link {
+  color: #000000;
+  text-decoration: none;
+}
+
+.nav-link-active {
+  color: #1565c0;
+}
+
+.page-body {
+  padding: 0 20px;
+}
+
+.section-container {
+  margin-top: 15px;
+}
+
+.section-title {
+  margin: 5px 0;
+}
+
+.topics-table {
+  border-collapse: collapse;
+  width: 250px;
+  text-align: left;
+}
+
+.topics-table th,
+.topics-table td {
+  border: 1px solid #000000;
+  padding: 4px 8px;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.content-box {
+  border: 1px solid #c2b588;
+  padding: 15px;
+  min-height: 80px;
+  max-width: 600px;
+}
+
+.content-box p {
+  margin: 0;
+}
+
+.margin-top-sm {
+  margin-top: 5px;
+}
+""",
+    "package.json": """{
+  "name": "exp5-react-spa",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.22.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.2.1",
+    "vite": "^5.1.4"
+  }
+}
+""",
+    "vite.config.js": """import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+});
+"""
+}
+
+
+def exp5(path=None):
+    """Experiment 5: React Single Page Application using React Router."""
+    return write_files(FILES, "Experiment 5 (React SPA)", path)
+
+
+react = exp5
+
+if __name__ == "__main__":
+    exp5()

web_prac-0.1.0/web/exp7.py

@@ -0,0 +1,157 @@
+from ._core import write_files
+
+FILES = {
+    "server.js": """const http = require('http');
+const fs = require('fs');
+const path = require('path');
+const PORT = 5377;
+
+const server = http.createServer((req, res) => {
+    const logMessage = `[${new Date().toISOString()}] Request received for: ${req.url}\\n`;
+    fs.appendFile('server.log', logMessage, (err) => {
+        if (err) console.error('Failed to write to log file:', err);
+    });
+
+    if (req.url === '/' || req.url === '/index.html') {
+        fs.readFile(path.join(__dirname, 'index.html'), 'utf8', (err, data) => {
+            if (err) {
+                res.writeHead(500, { 'Content-Type': 'text/plain' });
+                res.end('500 Internal Server Error: Missing HTML source.');
+                return;
+            }
+            res.writeHead(200, { 'Content-Type': 'text/html' });
+            res.end(data);
+        });
+    } else {
+        res.writeHead(404, { 'Content-Type': 'text/plain' });
+        res.end('404 Page Not Found');
+    }
+});
+
+server.listen(PORT, () => {
+    console.log(`Server is actively running at http://localhost:${PORT}/`);
+});
+""",
+    "index.html": """<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Node.js Server</title>
+</head>
+<body>
+    <h1>Welcome to My Node.js Server!</h1>
+    <p>This file was handled and served using the built-in fs module.</p>
+</body>
+</html>
+""",
+    "file_ops.js": """const fs = require('fs');
+const readline = require('readline');
+
+const rl = readline.createInterface({
+    input: process.stdin,
+    output: process.stdout
+});
+
+console.log("=== Node.js File System Operations ===");
+console.log("1. Read file");
+console.log("2. Check access (file exists)");
+console.log("3. Open/Create file");
+console.log("4. Write to file (replace)");
+console.log("5. Append to file");
+console.log("6. Delete file");
+
+rl.question("Enter your choice (1-6): ", (choice) => {
+    switch (choice.trim()) {
+        case "1":
+            rl.question("Enter file name to read: ", (filename) => {
+                fs.readFile(filename, 'utf8', (err, data) => {
+                    if (err) console.error("Error reading file:", err.message);
+                    else console.log("File Content:\\n" + data);
+                    rl.close();
+                });
+            });
+            break;
+        case "2":
+            rl.question("Enter file name to check: ", (filename) => {
+                fs.access(filename, fs.constants.F_OK, (err) => {
+                    if (err) console.log("File does not exist.");
+                    else console.log("File exists!");
+                    rl.close();
+                });
+            });
+            break;
+        case "3":
+            rl.question("Enter file name to open/create: ", (filename) => {
+                fs.open(filename, 'w', (err, fd) => {
+                    if (err) console.error("Error opening file:", err.message);
+                    else {
+                        console.log("File opened/created successfully!");
+                        fs.close(fd, () => {});
+                    }
+                    rl.close();
+                });
+            });
+            break;
+        case "4":
+            rl.question("Enter file name to write: ", (filename) => {
+                rl.question("Enter content: ", (content) => {
+                    fs.writeFile(filename, content, (err) => {
+                        if (err) console.error("Error writing:", err.message);
+                        else console.log("Written to file successfully!");
+                        rl.close();
+                    });
+                });
+            });
+            break;
+        case "5":
+            rl.question("Enter file name to append to: ", (filename) => {
+                rl.question("Enter content to append: ", (content) => {
+                    fs.appendFile(filename, content + "\\n", (err) => {
+                        if (err) console.error("Error appending:", err.message);
+                        else console.log("Appended successfully!");
+                        rl.close();
+                    });
+                });
+            });
+            break;
+        case "6":
+            rl.question("Enter file name to delete: ", (filename) => {
+                fs.unlink(filename, (err) => {
+                    if (err) console.error("Unable to delete:", err.message);
+                    else console.log("File deleted successfully!");
+                    rl.close();
+                });
+            });
+            break;
+        default:
+            console.log("Invalid choice.");
+            rl.close();
+            break;
+    }
+});
+""",
+    "file.txt": """Hello, this is a sample file for Node.js file operations.
+St. Francis Institute of Technology - Web Lab Experiment 7.
+""",
+    "package.json": """{
+  "name": "exp7-nodejs-server",
+  "version": "1.0.0",
+  "main": "server.js",
+  "scripts": {
+    "start": "node server.js",
+    "ops": "node file_ops.js"
+  }
+}
+"""
+}
+
+
+def exp7(path=None):
+    """Experiment 7: Node.js Web Server & File System Handling."""
+    return write_files(FILES, "Experiment 7 (Node.js Server & File Handling)", path)
+
+
+nodejs = exp7
+
+if __name__ == "__main__":
+    exp7()

web_prac-0.1.0/web/exp8.py

@@ -0,0 +1,166 @@
+from ._core import write_files
+
+FILES = {
+    "app.py": """from flask import Flask, render_template, request
+
+app = Flask(__name__)
+
+
+@app.route('/')
+def show_feedback_form():
+    return render_template('feedback.html')
+
+
+@app.route('/feedback', methods=['POST'])
+def handle_feedback():
+    name = request.form.get('name')
+    email = request.form.get('email')
+    rating = request.form.get('rating')
+    comments = request.form.get('comments')
+
+    return f\"\"\"
+    <html>
+    <head>
+        <title>Feedback Received</title>
+        <style>
+            body {{ font-family: Arial, sans-serif; background: #f4f4f9; display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; }}
+            .card {{ background: white; padding: 30px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); width: 380px; text-align: left; }}
+            h2 {{ color: #28a745; margin-top: 0; }}
+            a {{ display: inline-block; margin-top: 15px; color: #007bff; text-decoration: none; }}
+        </style>
+    </head>
+    <body>
+        <div class="card">
+            <h2>Thank You for Your Feedback!</h2>
+            <p><strong>Name:</strong> {name}</p>
+            <p><strong>Email:</strong> {email}</p>
+            <p><strong>Rating:</strong> {rating}/5</p>
+            <p><strong>Comments:</strong> {comments}</p>
+            <a href="/">← Submit another feedback</a>
+        </div>
+    </body>
+    </html>
+    \"\"\"
+
+
+if __name__ == '__main__':
+    print("Starting Flask Feedback Form at http://localhost:5000/ ...")
+    app.run(debug=True, port=5000)
+""",
+    "templates/feedback.html": """<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Feedback Form</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            background-color: #f4f4f9;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            min-height: 100vh;
+            margin: 0;
+            padding: 20px 0;
+        }
+        .form-container {
+            background-color: #ffffff;
+            padding: 30px;
+            border-radius: 8px;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+            width: 380px;
+        }
+        .form-container h2 {
+            margin-top: 0;
+            margin-bottom: 20px;
+            text-align: center;
+            color: #333;
+        }
+        .form-group {
+            margin-bottom: 15px;
+        }
+        .form-group label {
+            display: block;
+            margin-bottom: 5px;
+            font-weight: bold;
+            color: #555;
+        }
+        .form-group input, 
+        .form-group select, 
+        .form-group textarea {
+            width: 100%;
+            padding: 8px;
+            box-sizing: border-box;
+            border: 1px solid #ccc;
+            border-radius: 4px;
+            font-size: 14px;
+        }
+        .form-group textarea {
+            resize: vertical;
+            height: 100px;
+        }
+        .submit-btn {
+            width: 100%;
+            padding: 10px;
+            background-color: #28a745;
+            color: white;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 16px;
+        }
+        .submit-btn:hover {
+            background-color: #218838;
+        }
+    </style>
+</head>
+<body>
+
+<div class="form-container">
+    <h2>Feedback Form</h2>
+    <form action="/feedback" method="POST">
+        <div class="form-group">
+            <label for="name">Name:</label>
+            <input type="text" id="name" name="name" required>
+        </div>
+        <div class="form-group">
+            <label for="email">Email:</label>
+            <input type="email" id="email" name="email" required>
+        </div>
+        <div class="form-group">
+            <label for="rating">Rating:</label>
+            <select id="rating" name="rating" required>
+                <option value="">-- Select Rating --</option>
+                <option value="5">5 - Excellent</option>
+                <option value="4">4 - Very Good</option>
+                <option value="3">3 - Good</option>
+                <option value="2">2 - Fair</option>
+                <option value="1">1 - Poor</option>
+            </select>
+        </div>
+        <div class="form-group">
+            <label for="comments">Comments / Suggestions:</label>
+            <textarea id="comments" name="comments" placeholder="Share your experience..." required></textarea>
+        </div>
+        <button type="submit" class="submit-btn">Submit Feedback</button>
+    </form>
+</div>
+
+</body>
+</html>
+""",
+    "requirements.txt": """Flask>=2.0.0
+"""
+}
+
+
+def exp8(path=None):
+    """Experiment 8: Design Feedback Form using Flask."""
+    return write_files(FILES, "Experiment 8 (Flask Feedback Form)", path)
+
+
+flask = exp8
+
+if __name__ == "__main__":
+    exp8()

web_prac-0.1.0/web_prac.egg-info/PKG-INFO

@@ -0,0 +1,46 @@
+Metadata-Version: 2.4
+Name: web-prac
+Version: 0.1.0
+Summary: Ready-to-run code scaffolder for Web Lab practicals (HTML, CSS, TypeScript, React, Node.js, Flask)
+Requires-Python: >=3.8
+Description-Content-Type: text/markdown
+
+# web-prac (`import web`)
+
+Direct, ready-to-run file scaffolder for Web Lab experiments (HTML, CSS, TypeScript, React, Node.js, Flask).
+
+## Installation
+
+```bash
+pip install web-prac
+```
+
+## Usage
+
+In any Python script or interactive Python shell in VS Code:
+
+```python
+import web
+
+# Exp 2: HTML5/CSS3 Personal Resume
+web.exp2()
+
+# Exp 3: Student Registration Form (HTML, CSS, JS with factorial & fibonacci)
+web.exp3()
+
+# Exp 4: TypeScript (Primitives, enums, objects, OOP inheritance)
+web.exp4()
+
+# Exp 5: React Single Page Application (React Router DOM, components, styles)
+web.exp5()
+
+# Exp 7: Node.js File Server & File Handling (HTTP server + fs operations)
+web.exp7()
+
+# Exp 8: Flask Feedback Application (GET/POST form handling)
+web.exp8()
+```
+
+### Folder Handling
+- **If a project folder is already open in VS Code**, the files are written directly into your active folder.
+- **If no folder is open**, it automatically creates a `prac/` folder and opens it directly in VS Code.

web_prac-0.1.0/web_prac.egg-info/SOURCES.txt

@@ -0,0 +1,15 @@
+README.md
+pyproject.toml
+tests/test_web.py
+web/__init__.py
+web/_core.py
+web/exp2.py
+web/exp3.py
+web/exp4.py
+web/exp5.py
+web/exp7.py
+web/exp8.py
+web_prac.egg-info/PKG-INFO
+web_prac.egg-info/SOURCES.txt
+web_prac.egg-info/dependency_links.txt
+web_prac.egg-info/top_level.txt

web_prac-0.1.0/web_prac.egg-info/dependency_links.txt

@@ -0,0 +1 @@
+

web_prac-0.1.0/web_prac.egg-info/top_level.txt

@@ -0,0 +1 @@
+web