1. A) Create a static website using HTM Create a static website using HTML tables Table.html <!DOCTYPE html> <html lang="en"> <head> <metacharsetcharset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Static Website with HTML Table</title> <style> /* Optional: Add some basic styling for better presentation */body { font-family: Arial, sansserif;margin: 20px; } table { width: 100%; border-collapse: collapse;margin-top: 20px; } th, td { border: 1px solid #ddd;padding: 8px; text-align: left; } th { background-color: #f2f2f2; } </style> </head> <body> <h1>Sample Table</h1> <table> <thead> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> </tr> </thead > <tbody> <tr> <td>Row 1, Cell 1</td> <td>Row 1, Cell 2</td> <td>Row 1, Cell 3</td> </tr> <tr> <td>Row 2, Cell 1</td> <td>Row 2, Cell 2</td> <td>Row 2, Cell 3</td> </tr> <tr> <td>Row 3, Cell 1</td> <td>Row 3, Cell 2</td> <td>Row 3, Cell 3</td> </tr> </tbody> </table> </body> </html> 3.C. Implement Express.js, router // Filename - index.js // Importing express module const express = require("express") const app = express() // Handling GET / request app.use("/", (req, res, next) => { res.send("This is the express server") }) // Handling GET /hello request app.get("/hello", (req, res, next) => { res.send("This is the hello response"); }) // Server setup app.listen(3000, () => { console.log("Server is Running") }) OUTPUT Implement Router const http = require('http'); http.createServer(function (req, res) { res.writeHead(200, { 'Content-Type': 'text/html' }); const url = req.url; if (url === '/about') { res.write(' Welcome to about us page'); res.end(); } else if (url === '/contact') { res.write(' Welcome to contact us page'); res.end(); } else { res.write('Hello World!'); res.end(); } }).listen(3000, function () { console.log("server start at port 3000"); }); OUTPUT 1.B) Create a registration form using HTML forms Program steps: 1. Open notepad 2. Create tags – form and its attributes 3. Save as html file Form.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> Registration Form</title /title> <style> body { font-family: Arial, sansserif;margin: 20px; } form { width: 300px; margin: 0 auto; } label { display: block; margin-bottom:8px; } input { width:100%; padding:8px; margin-bottom:16px; box-sizing:border-box; } button { backgroundcolor:#4CAF50; color:green; padding:10px15px; border:none; border-radius: 4px; cursor:pointer; } button:hover { background-color: #45a0 background-color: #45a049; } </style> </head> <body> <h1><center>Registration Form</center></h1> <form> <label for="fname">First Name:</label> <input type="text" id="fname" name="fname" required> <label for="lname">Last Name:</label> <input type="text" id="lname" name="lname" required> <label for="email">Email:</label> <input type="email" id="email" name="email" required> <label for="password">Password:</label> <input type="password" id="password" name="password" required> <button type="submit">Register</button> </form> </body> </html> 3 B. Implement file system in Node.js Program steps: ● Read files ● Create files ● Update files ● Delete files Rename files // filesystem.js const fs = require('fs'); const path = require('path'); // Define a sample file path const filePath = path.join(__dirname, 'example.txt'); // ------------------------------ // 1. CREATE a new file // ------------------------------ fs.writeFile(filePath, 'Hello, this is a new file!', (err) => { if (err) return console.error('Error creating file:', err); console.log(' ✅ File created successfully.'); // ------------------------------ // 2. READ the file // ------------------------------ fs.readFile(filePath, 'utf8', (err, data) => { if (err) return console.error('Error reading file:', err); console.log(' 📖 File content:', data); // ------------------------------ // 3. UPDATE the file (append text) // ------------------------------ fs.appendFile(filePath, '\nThis line was appended later.', (err) => { if (err) return console.error('Error updating file:', err); console.log(' ✏ File updated successfully.'); // ------------------------------ // 4. RENAME the file // ------------------------------ const newFilePath = path.join(__dirname, 'renamed_example.txt'); fs.rename(filePath, newFilePath, (err) => { if (err) return console.error('Error renaming file:', err); console.log(' 📝 File renamed successfully.'); // ------------------------------ // 5. DELETE the file // ------------------------------ fs.unlink(newFilePath, (err) => { if (err) return console.error('Error deleting file:', err); console.log(' 🗑 File deleted successfully.'); }); }); }); }); }); OUTPUT 2B. Develop a student registration form with Validation support using JavaScript. Program steps: Create an HTML page to create the form. CSS to design the layout of the form. JavaScript to validate the form. Form.html <html> <head> <style> body { font-family: Arial, sans-serif; background-color: #f5f5f5; } h1 { text-align: center; color: #333; } form { max-width: 600px; margin: 0 auto; padding: 20px; background-color: #fff; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } input[type="text"], input[type="password"], select, textarea { width: 100%; padding: 10px; margin: 5px 0; border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box; font-size: 16px; } select { width: 100%; padding: 10px; margin: 5px 0; border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box; font-size: 16px; background-color: #fff; appearance: none; -webkit-appearance: none; -moz-appearance: none; } textarea { resize: vertical; } input[type="submit"], input[type="reset"], input[type="checkbox"] { background-color: #007bff; color: #fff; border: none; border-radius: 5px; padding: 10px 20px; cursor: pointer; font-size: 16px; } input[type="submit"]:hover, input[type="reset"]:hover, input[type="checkbox"]:hover { background-color: #0056b3; } .error-message { color: red; font-size: 14px; margin-top: 5px; } </style> </head> <body> <h1>REGISTRATION FORM</h1> <form name="RegForm" onsubmit="return validateForm()" onreset="resetErrors()"> <p> <label for="name">Name:</label> <input type="text" id="name" name="Name" placeholder="Enter your full name" /> <span id="name-error" class="error-message"></span> </p> <p> <label for="address">Address:</label> <input type="text" id="address" name="Address" placeholder="Enter your address" /> <span id="address-error" class="error-message"></span> </p> <p> <label for="email">E-mail Address:</label> <input type="text" id="email" name="EMail" placeholder="Enter your email" /> <span id="email-error" class="error-message"></span> </p> <p> <label for="password">Password:</label> <input type="password" id="password" name="Password" /> <span id="password-error" class="error-message"></span> </p> <p> <label for="subject">Select Your Course:</label> <select id="subject" name="Subject"> <option value="">Select Course</option> <option value="BTECH">BTECH</option> <option value="BBA">BBA</option> <option value="BCA">BCA</option> <option value="B.COM">B.COM</option> </select> <span id="subject-error" class="error-message"></span> </p> <p> <label for="comment">College Name:</label> <textarea id="comment" name="Comment"></textarea> </p> <p> <input type="checkbox" id="agree" name="Agree" /> <label for="agree">I agree to the above information</label> <span id="agree-error" class="error-message"></span> </p> <p> <input type="submit" value="Send" name="Submit" /> <input type="reset" value="Reset" name="Reset" /> </p> </form> <script> function validateForm() { const name = document.getElementById("name").value; const addr = document.getElementById("address").value; const email = document.getElementById("email").value; const pass = document.getElementById("password").value; const sub = document.getElementById("subject").value; const agree = document.getElementById("agree").checked; const nameErr = document.getElementById("name-error"); const addrErr = document.getElementById("address-error"); const emailErr = document.getElementById("email-error"); const passErr = document.getElementById("password-error"); const subErr = document.getElementById("subject-error"); const agreeErr = document.getElementById("agree-error"); nameErr.textContent = ""; addrErr.textContent = ""; emailErr.textContent = ""; passErr.textContent = ""; subErr.textContent = ""; agreeErr.textContent = ""; let isValid = true; if (name === "" || /\d/.test(name)) { nameErr.textContent = "Please enter your name properly."; isValid = false; } if (addr === "") { addrErr.textContent = "Please enter your address."; isValid = false; } if (email === "" || !email.includes("@") || !email.includes(".")) { emailErr.textContent = "Please enter a valid email address."; isValid = false; } if (pass === "" || pass.length < 6) { passErr.textContent = "Please enter a password with at least 6 characters."; isValid = false; } if (sub === "") { subErr.textContent = "Please select your course."; isValid = false; } if (!agree) { agreeErr.textContent = "Please agree to the above information."; isValid = false; } if (isValid) { alert("Form submitted successfully!"); return true; } else { return false; } } function resetErrors() { document.getElementById("name-error").textContent = ""; document.getElementById("address-error").textContent = ""; document.getElementById("email-error").textContent = ""; document.getElementById("password-error").textContent = ""; document.getElementById("subject-error").textContent = ""; document.getElementById("agree-error").textContent = ""; } </script> </body> </html> 3aA. Deployment of Node.js and built-in Node.js modules // Load the HTTP module const http = require('http'); // Create an HTTP server http.createServer((req, res) => { res.writeHead(200, { 'Content-Type': 'text/html' }); // Get current date and time const currentDate = new Date(); // Send response res.write(`<p>The date and time are currently ${currentDate}</p>`); res.end(); }).listen(8080); console.log("Server running at http://localhost:8080/"); OUTPUT: 4b React Props Index.html <!doctype html> <html lang="en"> <body> <div id="root"></div> <script type="module" src="/src/main.jsx"></script> </body> </html> Main.jsx import { createRoot } from 'react-dom/client' function Car(props) { return ( <h2>I am a {props.brand}!</h2> ); } createRoot(document.getElementById('root')).render( <Car brand="Ford" /> ); OUTPUT React events Index.html <!doctype html> <html lang="en"> <body> <div id="root"></div> <script type="module" src="/src/main.jsx"></script> </body> </html> Main.jsx import { createRoot } from 'react-dom/client' function Football() { const shoot = () => { alert("Great Shot!"); } return ( <button onClick={shoot}>Take the shot!</button> ); } createRoot(document.getElementById('root')).render( <Football /> ); OUTPUT React lists Index.html <!doctype html> <html lang="en"> <body> <div id="root"></div> <script type="module" src="/src/main.jsx"></script> </body> </html> Main.jsx import { createRoot } from 'react-dom/client' function MyCars() { const cars = ['Ford', 'BMW', 'Audi']; return ( <> <h1>My Cars:</h1> <ul> {cars.map((car) => <li>I am a { car }</li>)} </ul> </> ); } createRoot(document.getElementById('root')).render( <MyCars /> ); OUTPUT React forms Index.html <!doctype html> <html lang="en"> <body> <div id="root"></div> <script type="module" src="/src/main.jsx"></script> </body> </html> Main.jsx import { createRoot } from 'react-dom/client' function MyForm() { return ( <form> <label>Enter your name: <input type="text" /> </label> </form> ) } createRoot(document.getElementById('root')).render( <MyForm /> ); OUTPUT React routers Index.html <!doctype html> <html lang="en"> <body> <div id="root"></div> <script type="module" src="/src/main.jsx"></script> </body> </html> Main.jsx import { createRoot } from 'react-dom/client'; import { BrowserRouter, Routes, Route, Link } from 'react-router-dom'; function Home() { return <h1>Home Page</h1>; } function About() { return <h1>About Page</h1>; } function Contact() { return <h1>Contact Page</h1>; } function App() { return ( <BrowserRouter> {/* Navigation */} <nav> <Link to="/">Home</Link> |{" "} <Link to="/about">About</Link> |{" "} <Link to="/contact">Contact</Link> </nav> {/* Routes */} <Routes> <Route path="/" element={<Home />} /> <Route path="/about" element={<About />} /> <Route path="/contact" element={<Contact />} /> </Routes> </BrowserRouter> ); } createRoot(document.getElementById('root')).render( <App /> ); OUTPUT 2.A) Develop dynamic Web content using JavaScript Program steps: ● Open an html page ● Reading: Dynamically displaying data ● Creating: Allow User Input ● Editing data before submit. ● Save the file as html Dynamic.html <!DOCTYPE html> <html> <head> <title>To create HTML dynamic pages</title> <style> body { text-align: center; } p { color: green; } </style> </head> <body> <h1>Dynamically changing content</h1> <h3>Enter Your Name</h3> <input id="name" type="text"> <button type="button" onclick="EnterName()">Submit</button> <p id="demo"></p> <script> function EnterName() { let user = document.getElementById("name").value; document.getElementById("demo").innerHTML = "Welcome to matrusri Engineering college " + user; } </script> </body> </html> 2B. Develop a student registration form with Validation support using JavaScript. Program steps: Create an HTML page to create the form. CSS to design the layout of the form. JavaScript to validate the form. Form.html <html> <head> <style> body { font-family: Arial, sans-serif; background-color: #f5f5f5; } h1 { text-align: center; color: #333; } form { max-width: 600px; margin: 0 auto; padding: 20px; background-color: #fff; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } input[type="text"], input[type="password"], select, textarea { width: 100%; padding: 10px; margin: 5px 0; border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box; font-size: 16px; } select { width: 100%; padding: 10px; margin: 5px 0; border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box; font-size: 16px; background-color: #fff; appearance: none; -webkit-appearance: none; -moz-appearance: none; } textarea { resize: vertical; } input[type="submit"], input[type="reset"], input[type="checkbox"] { background-color: #007bff; color: #fff; border: none; border-radius: 5px; padding: 10px 20px; cursor: pointer; font-size: 16px; } input[type="submit"]:hover, input[type="reset"]:hover, input[type="checkbox"]:hover { background-color: #0056b3; } .error-message { color: red; font-size: 14px; margin-top: 5px; } </style> </head> <body> <h1>REGISTRATION FORM</h1> <form name="RegForm" onsubmit="return validateForm()" onreset="resetErrors()"> <p> <label for="name">Name:</label> <input type="text" id="name" name="Name" placeholder="Enter your full name" /> <span id="name-error" class="error-message"></span> </p> <p> <label for="address">Address:</label> <input type="text" id="address" name="Address" placeholder="Enter your address" /> <span id="address-error" class="error-message"></span> </p> <p> <label for="email">E-mail Address:</label> <input type="text" id="email" name="EMail" placeholder="Enter your email" /> <span id="email-error" class="error-message"></span> </p> <p> <label for="password">Password:</label> <input type="password" id="password" name="Password" /> <span id="password-error" class="error-message"></span> </p> <p> <label for="subject">Select Your Course:</label> <select id="subject" name="Subject"> <option value="">Select Course</option> <option value="BTECH">BTECH</option> <option value="BBA">BBA</option> <option value="BCA">BCA</option> <option value="B.COM">B.COM</option> </select> <span id="subject-error" class="error-message"></span> </p> <p> <label for="comment">College Name:</label> <textarea id="comment" name="Comment"></textarea> </p> <p> <input type="checkbox" id="agree" name="Agree" /> <label for="agree">I agree to the above information</label> <span id="agree-error" class="error-message"></span> </p> <p> <input type="submit" value="Send" name="Submit" /> <input type="reset" value="Reset" name="Reset" /> </p> </form> <script> function validateForm() { const name = document.getElementById("name").value; const addr = document.getElementById("address").value; const email = document.getElementById("email").value; const pass = document.getElementById("password").value; const sub = document.getElementById("subject").value; const agree = document.getElementById("agree").checked; const nameErr = document.getElementById("name-error"); const addrErr = document.getElementById("address-error"); const emailErr = document.getElementById("email-error"); const passErr = document.getElementById("password-error"); const subErr = document.getElementById("subject-error"); const agreeErr = document.getElementById("agree-error"); nameErr.textContent = ""; addrErr.textContent = ""; emailErr.textContent = ""; passErr.textContent = ""; subErr.textContent = ""; agreeErr.textContent = ""; let isValid = true; if (name === "" || /\d/.test(name)) { nameErr.textContent = "Please enter your name properly."; isValid = false; } if (addr === "") { addrErr.textContent = "Please enter your address."; isValid = false; } if (email === "" || !email.includes("@") || !email.includes(".")) { emailErr.textContent = "Please enter a valid email address."; isValid = false; } if (pass === "" || pass.length < 6) { passErr.textContent = "Please enter a password with at least 6 characters."; isValid = false; } if (sub === "") { subErr.textContent = "Please select your course."; isValid = false; } if (!agree) { agreeErr.textContent = "Please agree to the above information."; isValid = false; } if (isValid) { alert("Form submitted successfully!"); return true; } else { return false; } } function resetErrors() { document.getElementById("name-error").textContent = ""; document.getElementById("address-error").textContent = ""; document.getElementById("email-error").textContent = ""; document.getElementById("password-error").textContent = ""; document.getElementById("subject-error").textContent = ""; document.getElementById("agree-error").textContent = ""; } </script> </body> </html> 4a4A. Index.html <!doctype html> <html lang="en"> <body> <div id="root"></div>