WT LAB WEEK-2 PROGRAM VII SEM CSE-B 2. Dynamic Website Development A. Develop dynamic Web content using JavaScript. B. Develop a student registration form with Validation support using JavaScript. C. Develop a dynamic website using JavaScript Event Handling D. Develop DOM manipulation using JavaScript Experiment: 2. Dynamic website development Problem Statement: Design Student Registration Form in DHTML with validations and javascript Event Handling. Take an example,First-Name, Last-Name, EmailID, Mobile Number,Address, Hobbies, Course, Gender, Date-of-Birth, etc. Description: When the web server receives a user request for a dynamic page, it does not send the page directly to the requesting browser as it would do with a static page. Instead, it passes the page to the application server which then completes three activities: ● Read the code on the page ● Validate the page according to the code’s instructions ● Check the validation for each field from the page 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> WT LAB WEEK-2 PROGRAM VII SEM CSE-B <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> Output: B. 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 { WT LAB WEEK-2 PROGRAM VII SEM CSE-B 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; WT LAB WEEK-2 PROGRAM VII SEM CSE-B 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> WT LAB WEEK-2 PROGRAM VII SEM CSE-B </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(".")) { WT LAB WEEK-2 PROGRAM VII SEM CSE-B 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> WT LAB WEEK-2 PROGRAM VII SEM CSE-B C. Develop a dynamic website using JavaScript Event Handling HTML allows event handler attributes, with JavaScript code, to be added to HTML elements. With single quotes: <element event='some JavaScript'> With double quotes: <element event="some JavaScript"> Program steps: ● Create an HTML page to create the form. ● CSS to design the layout of the form. ● Write JavaScript to handle the events in the html page. Index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Dynamic Website</title> <style> body { font-family: Arial, sans-serif; padding: 20px; background-color: #f2f2f2; transition: background-color 0.5s ease; } button, input, textarea { margin: 10px 0; padding: 8px; } #liveOutput { font-weight: bold; color: #333; } #formMessage { margin-top: 10px; } </style> </head> <body> <h1> <center> Dynamic Website with Java script Event Handling </center></h1> <button onclick="changeColor()">Change Background</button> WT LAB WEEK-2 PROGRAM VII SEM CSE-B <div> <input type="text" id="nameInput" placeholder="Enter your name"> <p id="liveOutput">Your name will appear here...</p> </div> <form onsubmit="submitForm(event)"> <textarea id="feedback" placeholder="Your feedback..."></textarea><br> <button type="submit">Submit</button> <p id="formMessage"></p> </form> <script> function changeColor() { const colors = ['#ffdddd', '#ddffdd', '#ddddff', '#ffffcc', '#ccffff']; const randomColor = colors[Math.floor(Math.random() * colors.length)]; document.body.style.backgroundColor = randomColor; } document.getElementById('nameInput').addEventListener('input', function (e) { const text = e.target.value.trim(); document.getElementById('liveOutput').textContent = text ? `Hello, ${text}!` : 'Your name will appear here...'; }); function submitForm(event) { event.preventDefault(); const feedback = document.getElementById('feedback').value.trim(); const message = document.getElementById('formMessage'); if (feedback) { message.textContent = 'Thank you for your feedback!'; message.style.color = 'green'; } else { message.textContent = 'Please enter feedback.'; message.style.color = 'red'; } } </script> </body> </html> WT LAB WEEK-2 PROGRAM VII SEM CSE-B Output: D. Develop DOM manipulation using JavaScript demonstrates DOM manipulation using JavaScript — all in a single HTML file. it will cover basic DOM operations like: ● Creating new elements ● Modifying content and attributes ● Removing elements ● Changing styles dynamically DOM elements dynamically — also known as CRUD operations on the DOM. ● Create ● Read ● Update ● Delete DOM elements dynamically — also known as CRUD operations on the DOM. Program steps: ● Create an HTML page to create the form. ● CSS to design the layout of the form. ● Write JavaScript to handle the events in the html page. WT LAB WEEK-2 PROGRAM VII SEM CSE-B 2D.HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>DOM Manipulation Example</title> <style> body { font-family: Arial, sans-serif; padding: 20px; } #itemList { margin-top: 10px; } li { margin: 5px 0; } .highlight { background-color: yellow; } </style> </head> <body> <h1>JavaScript DOM Manipulation</h1> <input type="text" id="newItem" placeholder="Enter item"> <button onclick="addItem()">Add Item</button> <button onclick="highlightItems()">Highlight Items</button> <button onclick="removeLastItem()">Remove Last</button> WT LAB WEEK-2 PROGRAM VII SEM CSE-B <ul id="itemList"> <li>Example Item 1</li> <li>Example Item 2</li> </ul> <script> function addItem() { const input = document.getElementById('newItem'); const text = input.value.trim(); if (text) { const li = document.createElement('li'); li.textContent = text; document.getElementById('itemList').appendChild(li); input.value = ''; } } function highlightItems() { const items = document.querySelectorAll('#itemList li'); items.forEach(item => item.classList.toggle('highlight')); } function removeLastItem() { const list = document.getElementById('itemList'); if (list.lastElementChild) { list.removeChild(list.lastElementChild); } } </script> </body> </html> WT LAB WEEK-2 PROGRAM VII SEM CSE-B