webtech-codes 1.0.0__py3-none-any.whl

webtech_codes-1.0.0.dist-info/METADATA

@@ -0,0 +1,74 @@
+Metadata-Version: 2.4
+Name: webtech-codes
+Version: 1.0.0
+Summary: Terminal cheat-sheet browser for Web Technology Lab experiment code files
+Author: Ajay
+License: MIT License
+        
+        Copyright (c) 2026 Ajay
+        
+        Permission is hereby granted, free of charge, to any person obtaining a copy
+        of this software and associated documentation files (the "Software"), to deal
+        in the Software without restriction, including without limitation the rights
+        to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+        copies of the Software, and to permit persons to whom the Software is
+        furnished to do so, subject to the following conditions:
+        
+        The above copyright notice and this permission notice shall be included in all
+        copies or substantial portions of the Software.
+        
+        THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+        IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+        FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+        AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+        LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+        OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+        SOFTWARE.
+        
+Keywords: web-technology,html,css,javascript,react,angularjs,nodejs,lab,education
+Classifier: Development Status :: 4 - Beta
+Classifier: Environment :: Console
+Classifier: Intended Audience :: Education
+Classifier: License :: OSI Approved :: MIT License
+Classifier: Operating System :: OS Independent
+Classifier: Programming Language :: Python :: 3
+Classifier: Topic :: Education
+Classifier: Topic :: Utilities
+Requires-Python: >=3.9
+Description-Content-Type: text/markdown
+License-File: LICENSE
+Dynamic: license-file
+
+# WebTech Lab Codes
+
+A small terminal utility that lists the Web Technology Lab experiment folders and prints every code file in a selected experiment. The bundled source files are from the provided `Web_Technology_Lab_Experiments_2_to_12.zip`.
+
+## Install from PyPI
+
+```bash
+python -m pip install webtech-lab-codes-ajay
+```
+
+## Commands
+
+```bash
+webtech show all exp
+webtech display 2
+webtech display "Ex02 Blog"
+webtech display "Ex12 Node MongoDB"
+webtech --help
+webtech --version
+```
+
+Experiment names are case-insensitive. `display` prints each file with a filename banner and preserves the source indentation. It prints files only; it does not execute HTML, JavaScript, Node.js, or database code.
+
+## Run from a source checkout
+
+```bash
+python -m pip install -e .
+webtech show all exp
+```
+
+## Build and publish
+
+See `PUBLISHING.md` for step-by-step PyPI instructions. Check the package name on PyPI before publishing; if it is already taken, change `project.name` in `pyproject.toml` and use that name in install commands.

webtech_codes-1.0.0.dist-info/RECORD

@@ -0,0 +1,50 @@
+webtech_codes-1.0.0.dist-info/licenses/LICENSE,sha256=FpdtK5FGpULccqx_l1BiAPKeOWXDZ-Y81SxPuaAfXCA,1061
+webtech_lab_codes/__init__.py,sha256=J-j-u0itpEFT6irdmWmixQqYMadNl1X91TxUmoiLHMI,22
+webtech_lab_codes/cli.py,sha256=RHXfD9EvYV2NnB7j-CHaSwUGHi1qqOD-s_GVaD2Xl-0,3785
+webtech_lab_codes/experiments/SOURCE_README.txt,sha256=cXhVGzB8hj0-J68aC0wTZ1fO0rndzECP08C37OFaue4,1119
+webtech_lab_codes/experiments/Ex02_Blog/index.html,sha256=efhZ-4HVhkZmtGm6TFLv7vF7C-kCRf9cp8wiND5dKdE,752
+webtech_lab_codes/experiments/Ex02_Blog/styles.css,sha256=kIeGg861GH4eWOZeGUljWkHavwfJPAEpnwLd7AY3tWs,199
+webtech_lab_codes/experiments/Ex03_Hotspot/index.html,sha256=hcYZgOOXJuo5-RNAkMU6VZEdBH54giyYar1v5XtVO_c,1223
+webtech_lab_codes/experiments/Ex03_Hotspot/styles.css,sha256=SUG-hhRhZHiEAHbt4k4brUIJPdmJLgSl76a8CNSRrYM,168
+webtech_lab_codes/experiments/Ex04_Registration_Form/index.html,sha256=kB6vD59KjZduVXBVIVWi2zxf7wz6J_ziTiTNp4JausE,1059
+webtech_lab_codes/experiments/Ex04_Registration_Form/styles.css,sha256=FfWTEKTVL3q1yzTjjN7Efbxa9KzxwSJDZBw43dPzE_Y,374
+webtech_lab_codes/experiments/Ex05_College_Website/admission.html,sha256=9r89oB20pSX-xk3UshX9AUk76uL5QSITUQG5LsmSiqk,588
+webtech_lab_codes/experiments/Ex05_College_Website/contact.html,sha256=7nKzD7UMiKsVP53xqONbV3WrgC9SXN35Z0zgYvmcqEM,683
+webtech_lab_codes/experiments/Ex05_College_Website/events.html,sha256=AWPiZBjbp5E-ip5HujPSE36wPw7GCXzoceOjmq1TWvQ,544
+webtech_lab_codes/experiments/Ex05_College_Website/fees.html,sha256=aW2fBSzYOOuyiBHFrOH9zdMFWg9N7xZWYKFXAPrXNI4,606
+webtech_lab_codes/experiments/Ex05_College_Website/index.html,sha256=UlFppc2v91x5MWzDnfgIilcP3qGIUennhAzVsApOgGc,587
+webtech_lab_codes/experiments/Ex05_College_Website/results.html,sha256=UfnTj8p03sUgFZrno3lXXrgjuVWPTniZ7Fho8UfrFXo,588
+webtech_lab_codes/experiments/Ex05_College_Website/styles.css,sha256=hvmpQUQRwlEgQbPDSpNxPD1gRjZrlxsyfwCaIgOv_j0,416
+webtech_lab_codes/experiments/Ex06_Shopping_Webpage/index.html,sha256=fWp1DU4bUz-fr9MiPR7i7oMr9HS4pn8KALrpJuq86y4,827
+webtech_lab_codes/experiments/Ex06_Shopping_Webpage/styles.css,sha256=ZjkU2qPhU20rXFzBovPlGEh-ejgnr17lPgmva97vPF8,702
+webtech_lab_codes/experiments/Ex07a_Electricity_Bill/7a.js,sha256=0C4cxhgWsw9Y_e-GJSUV9Cp2NL0E8I4y-4jnAIajOJM,249
+webtech_lab_codes/experiments/Ex07b_Student_Marks/7b.js,sha256=u-eHvNktElWAwEavssIzL5B92xCzXA9_fD2TXT80VI4,316
+webtech_lab_codes/experiments/Ex07c_ATM_PIN/7c.js,sha256=dyi3v_IuiKdNnYvk-KmpKrK_X2wf44nUJn-PDzuhjok,480
+webtech_lab_codes/experiments/Ex07d_Shopping_Amount/7d.js,sha256=TNBS9BgWxcjO-L_-mxKQQPDbCsx0pFJ2OkwgTWK7cLQ,290
+webtech_lab_codes/experiments/Ex07e_Employee_Salary/7e.js,sha256=fE43ZdZrJjQgATu0cAw_ZtIYcfB3Qv5TwiWi-AeVlLE,346
+webtech_lab_codes/experiments/Ex08a_Table_Mouse_Events/index.html,sha256=QnU51qJ14aOcaYR_cQog8PtT3c09mYEbhH3dCKjQFPM,840
+webtech_lab_codes/experiments/Ex08a_Table_Mouse_Events/styles.css,sha256=SqLhUY5D5MfczfPrIVXK4nnskOnFOs36VMXwrWfpMUM,177
+webtech_lab_codes/experiments/Ex08b_Digital_Clock/index.html,sha256=1dUkiZ-nsPF9liqe7ZW9VcX3PZyOyJsam7gjMNopZ2c,339
+webtech_lab_codes/experiments/Ex08b_Digital_Clock/styles.css,sha256=Af_FhS0GFZpu6y30M3v6M7W_EZanyZ_LG2GQhMV-vdk,106
+webtech_lab_codes/experiments/Ex08c_Keyboard_Interaction/index.html,sha256=bhKtS8aWjjugZrk6V9xtuB51uaVfpRG1mNy1tLTG8Mc,595
+webtech_lab_codes/experiments/Ex08c_Keyboard_Interaction/styles.css,sha256=BiR2bax72OTm2ItLXkeET5c4J7-JOCoWyj9fZBvGMxs,131
+webtech_lab_codes/experiments/Ex08d_Form_Display/index.html,sha256=2INt0Mec6xB-Z3lIZ7E5WDqHe_D67QlenmsbBJfzFbY,449
+webtech_lab_codes/experiments/Ex08d_Form_Display/styles.css,sha256=H1ekhV4a_k-HFOQu7nXLXTI3zqxrSXrXVmcS56gNeCU,75
+webtech_lab_codes/experiments/Ex08e_Mini_Login/index.html,sha256=-lPUezA0smIBFPwoVclgHj8vEdjtr_oC7EKyW9PLk9Q,518
+webtech_lab_codes/experiments/Ex08e_Mini_Login/styles.css,sha256=6jphc7wDFvs5svt7zlvdCUAhiYRkpaWjdy3XWSKCCJ0,107
+webtech_lab_codes/experiments/Ex08f_Dark_Light_Mode/index.html,sha256=P_wAYcGsQUtHDqeyexNrD6MentkZjyn8uT63LlPid50,346
+webtech_lab_codes/experiments/Ex08f_Dark_Light_Mode/styles.css,sha256=34yBrPJabW0a2ayq11OLUF-UamCGF_qMkKQwq1bvjX8,120
+webtech_lab_codes/experiments/Ex09_AngularJS_Validation/index.html,sha256=ZAY4xeAMV0YUGn1YTteA_7wbPTFWs5q55v8E_UeNUqY,1127
+webtech_lab_codes/experiments/Ex09_AngularJS_Validation/styles.css,sha256=dCN_J2u-nOxFt4SvkhlDL8bWOfQBV8rrCK_2fqj16Sw,181
+webtech_lab_codes/experiments/Ex10_React_Components_Props_State_Events/index.html,sha256=YLXQmG9UEi1tnJgFy48KgThaUwRBYMoeMTAt2rY4KSw,742
+webtech_lab_codes/experiments/Ex10_React_Components_Props_State_Events/styles.css,sha256=mG0r1buqVbSbHCLTrodi7Y0oCWOlTNn63nh7X2ZkOak,106
+webtech_lab_codes/experiments/Ex11_React_State_Input/index.html,sha256=JkA8EVS2znOQHJERRdnsEL_CNgydSJ9oXSsRbKhDzTk,700
+webtech_lab_codes/experiments/Ex11_React_State_Input/styles.css,sha256=_lQw0IY-DPgcjpWIvzg3916GV0xeURmgef4-4GYdhdQ,81
+webtech_lab_codes/experiments/Ex12_Node_MongoDB/README.txt,sha256=6QtekDPfRYrC6MnWBJXlWCgKc9-h5JllrjZAgRJJEP4,624
+webtech_lab_codes/experiments/Ex12_Node_MongoDB/package.json,sha256=xksBoYtJdGziRkJNIJG2WPuRjGqv8ivR6HDDuoiXtCw,191
+webtech_lab_codes/experiments/Ex12_Node_MongoDB/server.js,sha256=8js8dYZha200LyXCVNkUL7Zja-XOv4PNkh9F4p5nC48,1690
+webtech_codes-1.0.0.dist-info/METADATA,sha256=e78WNOoiEME0uhfUn1nhyKK25SZqi7vnxA4iue7X04I,3013
+webtech_codes-1.0.0.dist-info/WHEEL,sha256=mOdXR9C3wMVov7cSY8PY-XCzo3SmmWCHvGQr5csJoao,91
+webtech_codes-1.0.0.dist-info/entry_points.txt,sha256=W1bXOCreCrjXx2XnHaehurCWJ_4EM3xa8tod1qJdWuE,55
+webtech_codes-1.0.0.dist-info/top_level.txt,sha256=JubKjMbM7OKlaJSPam_ha0ixU9frfOWJw5AiPcHfkb8,18
+webtech_codes-1.0.0.dist-info/RECORD,,

webtech_codes-1.0.0.dist-info/WHEEL

@@ -0,0 +1,5 @@
+Wheel-Version: 1.0
+Generator: setuptools (84.2.1)
+Root-Is-Purelib: true
+Tag: py3-none-any
+

webtech_codes-1.0.0.dist-info/entry_points.txt

@@ -0,0 +1,2 @@
+[console_scripts]
+webtech = webtech_lab_codes.cli:main

webtech_codes-1.0.0.dist-info/licenses/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Ajay
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

webtech_codes-1.0.0.dist-info/top_level.txt

@@ -0,0 +1 @@
+webtech_lab_codes

webtech_lab_codes/__init__.py

@@ -0,0 +1 @@
+__version__ = "1.0.0"

webtech_lab_codes/cli.py

@@ -0,0 +1,107 @@
+from __future__ import annotations
+
+import difflib
+import sys
+from pathlib import Path
+
+from . import __version__
+
+EXP_DIR = Path(__file__).resolve().parent / "experiments"
+
+
+def _experiment_dirs() -> list[Path]:
+    return sorted((p for p in EXP_DIR.iterdir() if p.is_dir()), key=lambda p: p.name.lower())
+
+
+def _normalise(value: str) -> str:
+    return " ".join("".join(ch.lower() if ch.isalnum() else " " for ch in value).split())
+
+
+def _label(path: Path) -> str:
+    return path.name.replace("_", " ")
+
+
+def show_all() -> None:
+    dirs = _experiment_dirs()
+    print("Web Technology Lab — Experiments 2 to 12")
+    print("=" * 48)
+    for folder in dirs:
+        files = sorted(p.name for p in folder.rglob("*") if p.is_file())
+        print(f"{_label(folder)}")
+        print(f"  Files: {', '.join(files)}")
+    print(f"\nTotal: {len(dirs)} experiment folders")
+    print("Use: webtech display <experiment name>")
+
+
+def display_experiment(query: str) -> int:
+    folders = _experiment_dirs()
+    wanted = _normalise(query)
+    if not wanted:
+        print("Please provide an experiment name. Try: webtech show all exp")
+        return 2
+    matches = []
+    for folder in folders:
+        candidates = {_normalise(folder.name), _normalise(_label(folder))}
+        exp_num = ''.join(ch for ch in folder.name.split('_', 1)[0] if ch.isdigit())
+        if exp_num:
+            candidates.update({_normalise(f"experiment {int(exp_num)}"), _normalise(f"exp {int(exp_num)}"), _normalise(str(int(exp_num)))})
+        if wanted in candidates or any(c.startswith(wanted) for c in candidates):
+            matches.append(folder)
+    if not matches:
+        choices = [_label(p) for p in folders]
+        close = difflib.get_close_matches(query, choices, n=5, cutoff=0.35)
+        print(f"No experiment matched: {query}")
+        if close:
+            print("Closest matches:")
+            for item in close:
+                print(f"  {item}")
+        print("Run 'webtech show all exp' to see all names.")
+        return 1
+    if len(matches) > 1:
+        print("The name matches multiple experiments. Use one of these exact names:")
+        for folder in matches:
+            print(f"  {_label(folder)}")
+        return 2
+    folder = matches[0]
+    files = sorted(p for p in folder.rglob("*") if p.is_file())
+    print(f"\n{'=' * 78}\n{_label(folder)}\n{'=' * 78}")
+    for path in files:
+        rel = path.relative_to(folder).as_posix()
+        print(f"\n--- FILE: {rel} ---")
+        print("-" * min(78, len(rel) + 13))
+        try:
+            content = path.read_text(encoding="utf-8-sig")
+        except UnicodeDecodeError:
+            content = path.read_text(encoding="latin-1")
+        print(content.rstrip())
+        print()
+    print(f"Displayed {len(files)} file(s) from {_label(folder)}.")
+    return 0
+
+
+def main(argv: list[str] | None = None) -> int:
+    args = list(sys.argv[1:] if argv is None else argv)
+    if not args or args in (["--help"], ["-h"]):
+        print("Web Technology Lab Codes")
+        print("Usage:")
+        print("  webtech show all exp")
+        print("  webtech display <experiment name or number>")
+        print("  webtech --version")
+        return 0 if args else 2
+    if args == ["--version"] or args == ["-V"]:
+        print(f"webtech-lab-codes {__version__}")
+        return 0
+    if len(args) >= 3 and args[:3] == ["show", "all", "exp"]:
+        if len(args) > 3:
+            print("Unexpected extra arguments after 'show all exp'.")
+            return 2
+        show_all()
+        return 0
+    if args[0].lower() == "display":
+        return display_experiment(" ".join(args[1:]))
+    print("Unknown command. Use 'webtech show all exp' or 'webtech display <name>'.")
+    return 2
+
+
+if __name__ == "__main__":
+    raise SystemExit(main())

webtech_lab_codes/experiments/Ex02_Blog/index.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head><title>My Blog</title><link rel="stylesheet" href="styles.css"></head>
+<body>
+<h1>My Personal Blog</h1>
+<p class="center">Welcome to my simple blog page.</p>
+<hr>
+<h2>About Me</h2><p>I am a student interested in web technology and programming.</p>
+<h2>My Skills</h2><ul><li>HTML</li><li>CSS</li><li>JavaScript</li></ul>
+<h2>Education</h2><table><tr><th>Course</th><th>Status</th></tr><tr><td>B.E. CSE</td><td>Studying</td></tr></table>
+<h2>My Daily Routine</h2><ol><li>Attend college</li><li>Practise coding</li><li>Study</li></ol>
+<h2>Favourite Website</h2><a href="https://www.wikipedia.org">Wikipedia</a>
+<h2>Quote</h2><p><i>Learning never stops.</i></p>
+<h2>Contact</h2><p>Email: student@example.com</p>
+</body></html>

webtech_lab_codes/experiments/Ex02_Blog/styles.css

@@ -0,0 +1,4 @@
+body { font-family: Arial; margin: 25px; color: black; background: white; }
+h1, .center { text-align: center; }
+table { border-collapse: collapse; }
+th, td { border: 1px solid black; padding: 8px; }

webtech_lab_codes/experiments/Ex03_Hotspot/index.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head><title>Image Hotspots</title><link rel="stylesheet" href="styles.css"></head>
+<body>
+<h1>Clickable Hotspots</h1>
+<p>Click a marked region to open its information page.</p>
+<svg width="360" height="300" viewBox="0 0 360 300" role="img" aria-label="Simple map illustration">
+ <rect x="1" y="1" width="358" height="298" fill="white" stroke="black"/>
+ <path d="M150 25 L190 45 L210 80 L195 110 L220 140 L205 180 L180 215 L155 265 L130 230 L115 190 L95 155 L120 120 L105 85 L130 55 Z" fill="white" stroke="black" stroke-width="2"/>
+ <a href="https://en.wikipedia.org/wiki/Delhi" target="_blank"><circle cx="155" cy="105" r="9" fill="white" stroke="black"/><text x="170" y="109" font-size="12">Delhi</text></a>
+ <a href="https://en.wikipedia.org/wiki/Tamil_Nadu" target="_blank"><circle cx="165" cy="225" r="9" fill="white" stroke="black"/><text x="180" y="229" font-size="12">Tamil Nadu</text></a>
+ <a href="https://en.wikipedia.org/wiki/Kerala" target="_blank"><circle cx="145" cy="230" r="6" fill="white" stroke="black"/><text x="40" y="250" font-size="12">Kerala</text></a>
+</svg>
+<p>Note: This is a simple illustration for practising clickable hotspots, not a geographic map.</p>
+</body></html>

webtech_lab_codes/experiments/Ex03_Hotspot/styles.css

@@ -0,0 +1,3 @@
+body { font-family: Arial; color: black; background: white; margin: 25px; }
+h1, body > p { text-align: center; }
+svg { display: block; margin: auto; max-width: 100%; }

webtech_lab_codes/experiments/Ex04_Registration_Form/index.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head><title>Registration Form</title><link rel="stylesheet" href="styles.css"></head>
+<body>
+<h1>Application Registration Form</h1>
+<form onsubmit="event.preventDefault(); document.getElementById('msg').textContent='Registration submitted successfully.';">
+<label>Full Name <input type="text" required></label>
+<label>Date of Birth <input type="date" required></label>
+<label>Email <input type="email" required></label>
+<label>Mobile Number <input type="tel" pattern="[0-9]{10}" placeholder="10 digits" required></label>
+<label>Gender
+<select required><option value="">Select</option><option>Male</option><option>Female</option><option>Other</option></select></label>
+<label>Address <textarea required></textarea></label>
+<label>State <select><option>Tamil Nadu</option><option>Kerala</option><option>Karnataka</option></select></label>
+<label><input type="checkbox" required> I confirm the details are correct.</label>
+<button type="submit">Register</button> <button type="reset">Reset</button>
+</form><p id="msg"></p>
+</body></html>

webtech_lab_codes/experiments/Ex04_Registration_Form/styles.css

@@ -0,0 +1,6 @@
+body { font-family: Arial; margin: 25px; color: black; background: white; }
+h1 { text-align: center; }
+form { max-width: 500px; margin: auto; }
+label { display: block; margin: 12px 0; }
+input:not([type=checkbox]), select, textarea { display: block; box-sizing: border-box; width: 100%; padding: 7px; border: 1px solid black; margin-top: 4px; }
+button { padding: 7px 15px; }

webtech_lab_codes/experiments/Ex05_College_Website/admission.html

@@ -0,0 +1,2 @@
+<!DOCTYPE html><html><head><title>Admission</title><link rel="stylesheet" href="styles.css"></head>
+<body><header><h1>ABC College</h1><p>Education and Excellence</p></header><nav><a href="index.html">Home</a> | <a href="events.html">Events</a> | <a href="admission.html">Admission</a> | <a href="fees.html">Fees</a> | <a href="results.html">Results</a> | <a href="contact.html">Contact</a></nav><main><h2>Admission</h2><p>Applicants should have completed the required qualifying examination.</p><p>Contact the college office to apply.</p></main><footer>ABC College</footer></body></html>

webtech_lab_codes/experiments/Ex05_College_Website/contact.html

@@ -0,0 +1,2 @@
+<!DOCTYPE html><html><head><title>Contact</title><link rel="stylesheet" href="styles.css"></head>
+<body><header><h1>ABC College</h1><p>Education and Excellence</p></header><nav><a href="index.html">Home</a> | <a href="events.html">Events</a> | <a href="admission.html">Admission</a> | <a href="fees.html">Fees</a> | <a href="results.html">Results</a> | <a href="contact.html">Contact</a></nav><main><h2>Contact Us</h2><p>Coimbatore, Tamil Nadu</p><form onsubmit="event.preventDefault();alert('Feedback submitted');"><label>Name <input required></label><label>Message <textarea required></textarea></label><button>Send</button></form></main><footer>ABC College</footer></body></html>

webtech_lab_codes/experiments/Ex05_College_Website/events.html

@@ -0,0 +1,2 @@
+<!DOCTYPE html><html><head><title>Events</title><link rel="stylesheet" href="styles.css"></head>
+<body><header><h1>ABC College</h1><p>Education and Excellence</p></header><nav><a href="index.html">Home</a> | <a href="events.html">Events</a> | <a href="admission.html">Admission</a> | <a href="fees.html">Fees</a> | <a href="results.html">Results</a> | <a href="contact.html">Contact</a></nav><main><h2>College Events</h2><ul><li>Technical Symposium</li><li>Workshop</li><li>Sports Day</li></ul></main><footer>ABC College</footer></body></html>

webtech_lab_codes/experiments/Ex05_College_Website/fees.html

@@ -0,0 +1,2 @@
+<!DOCTYPE html><html><head><title>Fees</title><link rel="stylesheet" href="styles.css"></head>
+<body><header><h1>ABC College</h1><p>Education and Excellence</p></header><nav><a href="index.html">Home</a> | <a href="events.html">Events</a> | <a href="admission.html">Admission</a> | <a href="fees.html">Fees</a> | <a href="results.html">Results</a> | <a href="contact.html">Contact</a></nav><main><h2>Fee Structure</h2><table><tr><th>Course</th><th>Fee per year</th></tr><tr><td>CSE</td><td>₹80,000</td></tr><tr><td>ECE</td><td>₹75,000</td></tr></table></main><footer>ABC College</footer></body></html>

webtech_lab_codes/experiments/Ex05_College_Website/index.html

@@ -0,0 +1,2 @@
+<!DOCTYPE html><html><head><title>College Home</title><link rel="stylesheet" href="styles.css"></head>
+<body><header><h1>ABC College</h1><p>Education and Excellence</p></header><nav><a href="index.html">Home</a> | <a href="events.html">Events</a> | <a href="admission.html">Admission</a> | <a href="fees.html">Fees</a> | <a href="results.html">Results</a> | <a href="contact.html">Contact</a></nav><main><h2>Welcome to Our College</h2><p>Providing education in engineering and technology.</p><p><a href='admission.html'>Apply Now</a></p></main><footer>ABC College</footer></body></html>

webtech_lab_codes/experiments/Ex05_College_Website/results.html

@@ -0,0 +1,2 @@
+<!DOCTYPE html><html><head><title>Results</title><link rel="stylesheet" href="styles.css"></head>
+<body><header><h1>ABC College</h1><p>Education and Excellence</p></header><nav><a href="index.html">Home</a> | <a href="events.html">Events</a> | <a href="admission.html">Admission</a> | <a href="fees.html">Fees</a> | <a href="results.html">Results</a> | <a href="contact.html">Contact</a></nav><main><h2>Sample Results</h2><table><tr><th>Name</th><th>Mark</th></tr><tr><td>Arun</td><td>85</td></tr><tr><td>Kavi</td><td>90</td></tr></table></main><footer>ABC College</footer></body></html>

webtech_lab_codes/experiments/Ex05_College_Website/styles.css

@@ -0,0 +1,7 @@
+body { font-family: Arial; margin: 0; color: black; background: white; }
+header, footer { text-align: center; padding: 15px; border: 1px solid black; }
+nav { text-align: center; padding: 12px; border-bottom: 1px solid black; }
+nav a { color: black; margin: 5px; }
+main { margin: 25px; }
+table { border-collapse: collapse; } th, td { border: 1px solid black; padding: 8px; }
+label { display: block; margin: 10px 0; }

webtech_lab_codes/experiments/Ex06_Shopping_Webpage/index.html

@@ -0,0 +1,9 @@
+<!DOCTYPE html><html><head><title>Shopping Page</title><link rel="stylesheet" href="styles.css"></head>
+<body><header><h1>Simple Mart</h1></header>
+<nav><a href="#">Home</a><div class="dropdown"><a href="#">Products ▾</a><div class="menu"><a href="#grocery">Groceries</a><a href="#fruit">Fruits</a><a href="#dairy">Dairy</a></div></div><a href="#offers">Offers</a><a href="#contact">Contact</a></nav>
+<h2 class="center">Products</h2><section class="products">
+<article id="grocery"><h3>Groceries</h3><p>Rice and pulses</p></article>
+<article id="fruit"><h3>Fruits</h3><p>Fresh seasonal fruits</p></article>
+<article id="dairy"><h3>Dairy</h3><p>Milk and cheese</p></article></section>
+<p id="offers" class="center">Special offers available today.</p><p id="contact" class="center">Contact: shop@example.com</p>
+</body></html>

webtech_lab_codes/experiments/Ex06_Shopping_Webpage/styles.css

@@ -0,0 +1,11 @@
+body { font-family: Arial; margin: 0; color: black; background: white; }
+header, .center { text-align: center; }
+header { border-bottom: 1px solid black; }
+nav { display: flex; justify-content: center; gap: 25px; border-bottom: 1px solid black; padding: 12px; }
+nav a { color: black; text-decoration: none; }
+.dropdown { position: relative; }
+.menu { display: none; position: absolute; background: white; border: 1px solid black; min-width: 120px; }
+.menu a { display: block; padding: 8px; }
+.dropdown:hover .menu { display: block; }
+.products { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }
+article { border: 1px solid black; padding: 20px; width: 180px; text-align: center; }

webtech_lab_codes/experiments/Ex07a_Electricity_Bill/7a.js

@@ -0,0 +1,7 @@
+const units = 250;
+let bill;
+if (units <= 100) bill = units * 2;
+else if (units <= 200) bill = 100 * 2 + (units - 100) * 3;
+else bill = 100 * 2 + 100 * 3 + (units - 200) * 5;
+console.log("Units:", units);
+console.log("Electricity bill: Rs.", bill);

webtech_lab_codes/experiments/Ex07b_Student_Marks/7b.js

@@ -0,0 +1,8 @@
+const marks = [85, 78, 92, 88, 76];
+let total = 0;
+for (let i = 0; i < marks.length; i++) total += marks[i];
+console.log("Marks:", marks.join(", "));
+console.log("Total:", total);
+console.log("Average:", total / marks.length);
+console.log("Highest:", Math.max(...marks));
+console.log("Lowest:", Math.min(...marks));

webtech_lab_codes/experiments/Ex07c_ATM_PIN/7c.js

@@ -0,0 +1,13 @@
+const readline = require("node:readline");
+const rl = readline.createInterface({ input: process.stdin, output: process.stdout });
+const correctPIN = "2920";
+let attempts = 0;
+function ask() {
+  rl.question("Enter PIN: ", pin => {
+    attempts++;
+    if (pin === correctPIN) { console.log("PIN Verified"); rl.close(); }
+    else if (attempts === 3) { console.log("Wrong PIN Attempt\nATM Blocked"); rl.close(); }
+    else { console.log("Wrong PIN Attempt"); ask(); }
+  });
+}
+ask();

webtech_lab_codes/experiments/Ex07d_Shopping_Amount/7d.js

@@ -0,0 +1,6 @@
+const prices = [500, 750, 250, 1000];
+let total = 0;
+for (let i = 0; i < prices.length; i++) total += prices[i];
+console.log("Prices:", prices.join(", "));
+console.log("Total purchase amount: Rs.", total);
+console.log(total >= 2000 ? "Eligible for Discount" : "Not Eligible for Discount");

webtech_lab_codes/experiments/Ex07e_Employee_Salary/7e.js

@@ -0,0 +1,11 @@
+const employees = [
+  { name: "Arun", salary: 25000 },
+  { name: "Bala", salary: 30000 },
+  { name: "Charan", salary: 28000 }
+];
+for (const employee of employees) {
+  console.log("Name:", employee.name);
+  console.log("Monthly salary:", employee.salary);
+  console.log("Annual salary:", employee.salary * 12);
+  console.log("---------------");
+}

webtech_lab_codes/experiments/Ex08a_Table_Mouse_Events/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html><html><head><title>Table Mouse Events</title><link rel="stylesheet" href="styles.css"></head><body>
+<h2>Table Mouse Events</h2><p>Hover, click, or double-click a row.</p>
+<table id="t"><tr><th>Name</th><th>Department</th></tr><tr><td>Arun</td><td>CSE</td></tr><tr><td>Rahul</td><td>ECE</td></tr><tr><td>Kavi</td><td>IT</td></tr></table>
+<script>
+document.querySelectorAll("#t tr:not(:first-child)").forEach(row => {
+ row.onmouseover = () => row.style.background = "lightgray";
+ row.onmouseout = () => { if (!row.classList.contains("selected")) row.style.background = ""; };
+ row.onclick = () => { row.classList.toggle("selected"); row.style.background = row.classList.contains("selected") ? "gray" : ""; };
+ row.ondblclick = () => { row.classList.remove("selected"); row.style.background = ""; };
+});
+</script></body></html>

webtech_lab_codes/experiments/Ex08a_Table_Mouse_Events/styles.css

@@ -0,0 +1,3 @@
+body { font-family: Arial; margin: 25px; color: black; }
+table { border-collapse: collapse; width: 400px; }
+th, td { border: 1px solid black; padding: 10px; text-align: left; }

webtech_lab_codes/experiments/Ex08b_Digital_Clock/index.html

@@ -0,0 +1,6 @@
+<!DOCTYPE html><html><head><title>Digital Clock</title><link rel="stylesheet" href="styles.css"></head><body>
+<h2>Real-Time Digital Clock</h2><p id="clock"></p>
+<script>
+function showTime() { document.getElementById("clock").textContent = new Date().toLocaleTimeString(); }
+showTime(); setInterval(showTime, 1000);
+</script></body></html>

webtech_lab_codes/experiments/Ex08b_Digital_Clock/styles.css

@@ -0,0 +1,2 @@
+body { font-family: Arial; text-align: center; padding: 30px; color: black; }
+#clock { font-size: 36px; }

webtech_lab_codes/experiments/Ex08c_Keyboard_Interaction/index.html

@@ -0,0 +1,5 @@
+<!DOCTYPE html><html><head><title>Keyboard Interaction</title><link rel="stylesheet" href="styles.css"></head><body>
+<h2>Keyboard Interaction</h2><p>Press A to add a thick border. Press R to reset.</p>
+<table id="t"><tr><th>Name</th><th>Department</th></tr><tr><td>Arun</td><td>CSE</td></tr><tr><td>Kavi</td><td>IT</td></tr></table>
+<script>document.addEventListener("keydown", e => { if(e.key.toLowerCase()==="a") document.getElementById("t").style.border="4px solid black"; if(e.key.toLowerCase()==="r") document.getElementById("t").style.border="1px solid black"; });</script>
+</body></html>

webtech_lab_codes/experiments/Ex08c_Keyboard_Interaction/styles.css

@@ -0,0 +1,3 @@
+body { font-family: Arial; margin: 25px; }
+table { border-collapse: collapse; }
+th, td { border: 1px solid black; padding: 10px; }

webtech_lab_codes/experiments/Ex08d_Form_Display/index.html

@@ -0,0 +1,4 @@
+<!DOCTYPE html><html><head><title>Form Display</title><link rel="stylesheet" href="styles.css"></head><body>
+<h2>Simple Form</h2><form id="f"><input id="name" placeholder="Enter your name" required><button>Submit</button></form><p id="out"></p>
+<script>document.getElementById("f").onsubmit = e => { e.preventDefault(); document.getElementById("out").textContent = "You entered: " + document.getElementById("name").value; };</script>
+</body></html>

webtech_lab_codes/experiments/Ex08d_Form_Display/styles.css

@@ -0,0 +1,2 @@
+body { font-family: Arial; margin: 25px; }
+input, button { padding: 8px; }

webtech_lab_codes/experiments/Ex08e_Mini_Login/index.html

@@ -0,0 +1,4 @@
+<!DOCTYPE html><html><head><title>Mini Login</title><link rel="stylesheet" href="styles.css"></head><body>
+<h2>Mini Login System</h2><input id="user" placeholder="Username"><input id="pass" type="password" placeholder="Password"><button onclick="login()">Login</button><p id="msg"></p>
+<script>function login(){ document.getElementById("msg").textContent = document.getElementById("user").value==="admin" && document.getElementById("pass").value==="1234" ? "Welcome" : "Invalid credentials"; }</script>
+</body></html>

webtech_lab_codes/experiments/Ex08e_Mini_Login/styles.css

@@ -0,0 +1,2 @@
+body { font-family: Arial; margin: 25px; }
+input, button { display: block; padding: 8px; margin: 10px 0; }

webtech_lab_codes/experiments/Ex08f_Dark_Light_Mode/index.html

@@ -0,0 +1,4 @@
+<!DOCTYPE html><html><head><title>Dark Light Mode</title><link rel="stylesheet" href="styles.css"></head><body>
+<h2>Dark / Light Mode</h2><p>Click the button to change the theme.</p><button id="toggle">Toggle Theme</button>
+<script>document.getElementById("toggle").onclick = () => document.body.classList.toggle("dark");</script>
+</body></html>

webtech_lab_codes/experiments/Ex08f_Dark_Light_Mode/styles.css

@@ -0,0 +1,2 @@
+body { font-family: Arial; padding: 25px; background: white; color: black; }
+.dark { background: black; color: white; }

webtech_lab_codes/experiments/Ex09_AngularJS_Validation/index.html

@@ -0,0 +1,9 @@
+<!DOCTYPE html><html ng-app="app"><head><title>AngularJS Form Validation</title><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script><link rel="stylesheet" href="styles.css"></head>
+<body ng-controller="FormCtrl"><h2>Registration Form</h2>
+<form name="f" ng-submit="submit()" novalidate>
+<label>Name: <input name="name" ng-model="user.name" required></label><span ng-show="f.name.$touched && f.name.$invalid">Name is required.</span>
+<label>Email: <input type="email" name="email" ng-model="user.email" required></label><span ng-show="f.email.$touched && f.email.$invalid">Enter a valid email.</span>
+<label>Password: <input type="password" name="password" ng-model="user.password" ng-minlength="4" required></label><span ng-show="f.password.$touched && f.password.$invalid">Password must be at least 4 characters.</span>
+<button ng-disabled="f.$invalid">Register</button></form><p>{{message}}</p>
+<script>angular.module("app",[]).controller("FormCtrl",function($scope){$scope.submit=function(){$scope.message="Registration successful for "+$scope.user.name;};});</script>
+</body></html>

webtech_lab_codes/experiments/Ex09_AngularJS_Validation/styles.css

@@ -0,0 +1,4 @@
+body { font-family: Arial; margin: 25px; color: black; }
+label { display: block; margin: 12px 0; }
+input { display: block; padding: 7px; margin-top: 4px; }
+span { display: block; }

webtech_lab_codes/experiments/Ex10_React_Components_Props_State_Events/index.html

@@ -0,0 +1,8 @@
+<!DOCTYPE html><html><head><title>React Components</title><link rel="stylesheet" href="styles.css">
+<script src="https://unpkg.com/react@18/umd/react.development.js"></script><script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script><script src="https://unpkg.com/@babel/standalone/babel.min.js"></script></head><body>
+<div id="root"></div>
+<script type="text/babel">
+function Greeting(props){return <h2>Hello, {props.name}</h2>;}
+function App(){const [count,setCount]=React.useState(0);return <div><Greeting name="Student"/><p>Button clicked: {count} times</p><button onClick={()=>setCount(count+1)}>Click</button></div>;}
+ReactDOM.createRoot(document.getElementById("root")).render(<App/>);
+</script></body></html>

webtech_lab_codes/experiments/Ex10_React_Components_Props_State_Events/styles.css

@@ -0,0 +1,2 @@
+body { font-family: Arial; margin: 25px; color: black; background: white; }
+button { padding: 7px 15px; }

webtech_lab_codes/experiments/Ex11_React_State_Input/index.html

@@ -0,0 +1,6 @@
+<!DOCTYPE html><html><head><title>React Input Handling</title><link rel="stylesheet" href="styles.css">
+<script src="https://unpkg.com/react@18/umd/react.development.js"></script><script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script><script src="https://unpkg.com/@babel/standalone/babel.min.js"></script></head><body>
+<div id="root"></div><script type="text/babel">
+function App(){const [name,setName]=React.useState("");return <div><h2>Enter Your Name</h2><input value={name} onChange={e=>setName(e.target.value)} placeholder="Name"/><p>Hello, {name || "Student"}</p></div>;}
+ReactDOM.createRoot(document.getElementById("root")).render(<App/>);
+</script></body></html>

webtech_lab_codes/experiments/Ex11_React_State_Input/styles.css

@@ -0,0 +1,2 @@
+body { font-family: Arial; margin: 25px; color: black; }
+input { padding: 8px; }

webtech_lab_codes/experiments/Ex12_Node_MongoDB/README.txt

@@ -0,0 +1,17 @@
+NODE.JS + MONGODB CRUD
+
+1. Install Node.js and MongoDB, or create a MongoDB Atlas database.
+2. Open terminal in this folder.
+3. Run: npm install
+4. Start MongoDB locally, or set MONGO_URI to your Atlas connection string.
+5. Run: npm start
+6. Open http://localhost:3000
+
+Endpoints:
+GET    /students       list students
+POST   /students       create student; JSON body e.g. {"name":"Arun","mark":85}
+GET    /students/:id   read one student
+PUT    /students/:id   update student; JSON body e.g. {"mark":90}
+DELETE /students/:id   delete student
+
+Use Postman, Thunder Client, or another API client for POST/PUT/DELETE requests.

webtech_lab_codes/experiments/Ex12_Node_MongoDB/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "simple-student-crud",
+  "version": "1.0.0",
+  "main": "server.js",
+  "scripts": { "start": "node server.js" },
+  "dependencies": { "express": "^4.21.2", "mongoose": "^8.9.5" }
+}

webtech_lab_codes/experiments/Ex12_Node_MongoDB/server.js

@@ -0,0 +1,33 @@
+const express = require("express");
+const mongoose = require("mongoose");
+const app = express();
+app.use(express.json());
+
+const uri = process.env.MONGO_URI || "mongodb://127.0.0.1:27017/studentdb";
+mongoose.connect(uri).then(() => console.log("MongoDB connected"))
+  .catch(err => console.error("MongoDB connection error:", err.message));
+
+const Student = mongoose.model("Student", new mongoose.Schema({
+  name: { type: String, required: true },
+  mark: { type: Number, required: true }
+}));
+
+app.get("/", (req, res) => res.send("Student CRUD API is running"));
+app.post("/students", async (req, res) => {
+  try { res.status(201).json(await Student.create(req.body)); }
+  catch (e) { res.status(400).json({ error: e.message }); }
+});
+app.get("/students", async (req, res) => res.json(await Student.find()));
+app.get("/students/:id", async (req, res) => {
+  try { const s = await Student.findById(req.params.id); if (!s) return res.status(404).json({error:"Not found"}); res.json(s); }
+  catch { res.status(400).json({error:"Invalid ID"}); }
+});
+app.put("/students/:id", async (req, res) => {
+  try { const s = await Student.findByIdAndUpdate(req.params.id, req.body, {new:true, runValidators:true}); if (!s) return res.status(404).json({error:"Not found"}); res.json(s); }
+  catch (e) { res.status(400).json({error:e.message}); }
+});
+app.delete("/students/:id", async (req, res) => {
+  try { const s = await Student.findByIdAndDelete(req.params.id); if (!s) return res.status(404).json({error:"Not found"}); res.json({message:"Student deleted"}); }
+  catch { res.status(400).json({error:"Invalid ID"}); }
+});
+app.listen(3000, () => console.log("Server running at http://localhost:3000"));

webtech_lab_codes/experiments/SOURCE_README.txt

@@ -0,0 +1,16 @@
+WEB TECHNOLOGY LAB — SIMPLE WORKING CODES (EXPERIMENTS 2–12)
+
+Each experiment has its own folder. HTML experiments use index.html and styles.css.
+Experiment 7 files are standalone JavaScript programs.
+
+HOW TO RUN
+1. HTML/CSS/DOM experiments: open that experiment's index.html in a browser.
+2. Experiment 7: install Node.js, open a terminal in the experiment folder, run:
+   node 7a.js   (change the filename for the required experiment)
+3. Experiment 9 (AngularJS): open index.html while connected to the internet (AngularJS CDN).
+4. Experiments 10–11 (React): these use React through CDN and Babel; open index.html with internet access.
+5. Experiment 12 (Node.js + MongoDB): install Node.js, install MongoDB locally or use MongoDB Atlas.
+   In the folder run: npm install, then npm start. Set MONGO_URI in your environment if needed.
+   This is a basic CRUD API; use the browser or an API client to test the endpoints.
+
+All designs are intentionally plain black and white. Experiment 3 uses a simple inline SVG map-style image so it works without a separate image download; hotspot coordinates are illustrative.