Form Validation:
Formval.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="formval.css">
<title>Register</title>
</head>
<body>
<div class="container">
<form action="" id="form">
<h1>Form Validation</h1>
<div class="input-group">
<label>Username</label>
<input type="text" id="username">
<div class="error"></div>
</div>
<div class="input-group">
<label>Email</label>
<input type="text" id="email">
<div class="error"></div>
</div>
<div class="input-group">
<label>Password</label>
<input type="password" id="password">
<div class="error"></div>
</div>
<div class="input-group">
<label>Mobile Number</label>
<input type="text" id="phno">
<div class="error"></div>
</div>
<button type="submit">Submit</button>
</form>
</div>
<script src="formval.js" defer></script>
</body>
</html>
Formval.css:
body{
background-color: aliceblue;
margin:0;
font-family: 'Poppins', sans-serif;
}
#form{
width:400px;
margin:20vh auto 0 auto;
background-color: whitesmoke;
border-radius: 5px;
padding:30px;
}
h1{
text-align: center;
color:#278787;
}
#form button{
background-color: #ec228e;
color:white;
border: 1px solid balck;
border-radius: 5px;
padding:10px;
margin:20px 0px;
cursor:pointer;
font-size:20px;
width:100%;
}
.input-group{
display:flex;
flex-direction: column;
margin-bottom: 15px;
}
.input-group input{
border-radius: 5px;
font-size:20px;
margin-top:5px;
padding:10px;
border:1px solid rgb(34,193,195) ;
}
.input-group .error{
color:rgb(242, 18, 18);
font-size:16px;
margin-top: 5px;
}
.input-group.valid input{
border-color: #0cc477;
}
.input-group.invalid input{
border-color:rgb(206, 67, 67);
}
Formval.js
const form = document.querySelector('#form')
const username = document.getElementById('username');
const email = document.getElementById('email');
const password = document.getElementById('password');
const cpassword = document.getElementById('phno');
form.addEventListener('submit',(event)=>{
if(!validateInputs()){
event.preventDefault();
}
})
function validateInputs(){
const usernameVal = username.value;
const emailVal = email.value;
const passwordVal = password.value;
const phnoVal = phno.value;
let success = true
if(usernameVal===''){
success=false;
invalid(username,'Username is required')
}
else{
valid(username)
}
if(emailVal===''){
success = false;
invalid(email,'Email is required')
}
else if(!validateEmail(emailVal)){
success = false;
invalid(email,'Please enter a valid email')
}
else{
valid(email)
}
return success;
}
function invalid(element,message){
const inputGroup = element.parentElement;
const errorElement = inputGroup.querySelector('.error')
errorElement.innerText = message;
inputGroup.classList.add('invalid');
inputGroup.classList.remove('valid');
}
function valid(element){
const inputGroup = element.parentElement;
const errorElement = inputGroup.querySelector('.error')
errorElement.innerText = '';
inputGroup.classList.add('valid')
inputGroup.classList.remove('invalid')
}
const validateEmail = (email) => {
return String(email)
.match(
/([a-z 0-9 A-Z-])@([a-z]{2,4}).([a-z]{2,8})(.[a-z]{2,8})?/
);
};
DOM Methods:
Domnew.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="domnew.css">
<title>Document</title>
</head>
<body>
<button id="b1">Add Textbox</button> </button>
<script src="domnew.js"> </script>
</body>
</html>
Domnew.js
let btn=document.getElementById("b1");
btn.addEventListener("click",addtextbox);
function addtextbox()
{
let label=document.createElement("label");
label.textContent="Enter your name:";
let text=document.createElement("input");
text.setAttribute("type","tetx");
let br=document.createElement("br");
let br1=document.createElement("br1");
document.body.append(br);
document.body.append(br1);
document.body.append(label);
document.body.append(text);
let btn=document.createElement("button");
let bte=document.createTextNode("Add");
btn.appendChild(bte);
btn.onclick=addtextbox;
document.body.appendChild(btn);
}
XML:
One.xml:
<?xml-model href="one.xsd"?>
<student-info>
<student>
<name> aaa</name>
<dept> SCOPE</dept>
<mark> 67</mark>
</student>
<student>
<name> bbb</name>
<dept> SCORE</dept>
<mark> 89</mark>
</student>
</student-info>
One.xsd:
<?xml version="1.0" encoding="UTF-8"?>
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">
<xs:element name="student-info">
<xs:complexType>
<xs:sequence>
<xs:element name="student" maxOccurs="unbounded">
<xs:complexType>
<xs:sequence>
<xs:element name="name" type="xs:string" />
<xs:element name="dept" type="xs:string" />
<xs:element name="mark" type="xs:string" />
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:schema>
JSON:
Json.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="json.js"></script>
</body>
</html>
Json.js
const jsonindi = '{"name":"aaaa","dept":"SCOPE","mark":"56"}';
const jsonstring= JSON.parse(jsonindi);
console.log(jsonstring);
student.json:
[{
"name":"aaaa",
"dept":"SCOPE",
"mark":"56"
},{
"name":"bbbb",
"dept":"SCOPE",
"mark":"86"
},
{
"name":"cccc",
"dept":"SCOPE",
"mark":"96"
}
]
JQuery Form Validation:
Form.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Validation</title>
<link rel="stylesheet" href="form.css">
</head>
<body>
<div class="Container">
<form name="formvalidation" id="formvalidation">
<div class="input-row">
<input type="text" name="name" id="name" placeholder="Name"
required> <br><br>
</div>
<div class="input-row">
<input type="text" name="dob" id="dob" placeholder="YYYY-MM-
DD" required> <br><br>
</div>
<div class="input-row">
<input type="text" name="email" id="email"
placeholder="[email protected]" required> <br><br>
</div>
<div class="input-row">
<input type="password" name="password" id="password"
placeholder="password" required> <br><br>
</div>
<div class="input-row">
<input type="password" name="cpassword" id="cpassword"
placeholder="Confirmpassword" required> <br><br>
</div>
<div class="input-row">
<input type="text" name="mobilenumber"
id="mobilenumber" placeholder="1234567890" required> <br><br>
</div>
<input type="SUBMIT" value="submit">
</form>
</div>
<script src="jquery/jquery.js"></script>
<script src="jquery/jqv/jqv.js"></script>
<script src="form.js"></script>
</body>
</html>
Form.css:
body{
margin: 15px;
background-color: antiquewhite;
}
.container{
width:600px;
padding:30px;
border-radius:15px;
}
.container.input-row{
margin-bottom: 12px;
}
.container input:not([type="submit"]){
margin: 0 0 3px;
background-color: #d6d6d6;
padding:10px 15px;
font-size: 15px;
}
label.error{
font-weight: 700;
display: block;
color:red;
font-size: 14px;
}
Form.js:
$(document).ready(function(){
$.validator.setDefaults(
{
submitHandler:function(){
alert("submitted");
}
}
);
$("#formvalidation").validate(
{
rules:{
name:"required",
dob:{
required:true,
date:true
},
email:{
required:true,
email:true
},
},
messages:{
name:"enter user name",
dob:{
required:"enter dob",
date:"enter the correct format"
},
email:{
required:"enter email id",
email:"enter correct format"
}
}
}
);
});
Responsive Web Application:
Responsive.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="responsive.css">
</head>
<body>
<header>
<h1>Header</h1>
</header>
<main id="one">
<h1> New Data</h1>
</main>
<footer>
<h2> Footer</h2>
</footer>
</body>
</html>
responsive.css
/* @media mediatype(condition:breakpoint)*/
*{
margin: 0;
padding:0;
box-sizing: border-box;
}
body{
display: flex;
flex-direction: column;
}
header, main, footer{
display:grid;
place-content: center;
}
header{
top:0;
}
main{
height:500px
}
footer{
bottom: 0;
}
@media screen and (min-width:500px){
main{
background-color: aqua;
visibility: hidden;
}
}
@media screen and (min-width:700px){
main{
background-color: rgb(235, 92, 226);
visibility: visible;
}
}
@media screen and (min-width:900px){
main{
background-color: rgb(40, 141, 14);
visibility: visible;
}
}
@media (orientation:portrait){
main{
background-color: rgb(242, 156, 26);
}
}
@media (orientation:landscape){
main{
background-color: brown;
}
}
1)
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8”>
<title>Event Registration Form</title>
<script src=https://code.jquery.com/jquery-3.6.0.min.js></script>
<script src=https://code.jquery.com/ui/1.13.2/jquery-ui.min.js></script>
<link rel=”stylesheet”
href=https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css>
<style>
Body {
Font-family: Arial, sans-serif;
Background-color: #f4f4f4;
Padding: 20px;
}
.container {
Width: 400px;
Margin: auto;
Background: white;
Padding: 20px;
Border-radius: 5px;
Box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
H2 {
Text-align: center;
}
.form-group {
Margin-bottom: 15px;
}
Label {
Display: block;
Margin-bottom: 5px;
Font-weight: bold;
}
Input[type=”text”], input[type=”email”] {
Width: 100%;
Padding: 8px;
Box-sizing: border-box;
}
.error {
Color: red;
Font-size: 0.9em;
Display: none;
}
Button {
Width: 100%;
Padding: 10px;
Background-color: #4CAF50;
Border: none;
Color: white;
Font-size: 16px;
Cursor: pointer;
}
Button:hover {
Background-color: #45a049;
}
</style>
</head>
<body>
<div class=”container”>
<h2>Event Registration</h2>
<form id=”registrationForm”>
<div class=”form-group”>
<label for=”fullname”>Full Name:</label>
<input type=”text” id=”fullname” name=”fullname”>
<span class=”error” id=”nameError”>Please enter your name</span>
</div>
<div class=”form-group”>
<label for=”email”>Email:</label>
<input type=”text” id=”email” name=”email”>
<span class=”error” id=”emailError”>Enter a valid email</span>
</div>
<div class=”form-group”>
<label for=”zipcode”>Zip Code:</label>
<input type=”text” id=”zipcode” name=”zipcode”>
<span class=”error” id=”zipError”>Zip code must be 5 digits</span>
</div>
<div class=”form-group”>
<label for=”city”>City:</label>
<input type=”text” id=”city” name=”city”>
<span class=”error” id=”cityError”>Please enter your city</span>
</div>
<button type=”submit”>Register</button>
</form>
</div>
<script>
// Sample JSON data for cities
Const cities = [
“New York”, “Los Angeles”, “Chicago”, “Houston”, “Phoenix”,
“Philadelphia”, “San Antonio”, “San Diego”, “Dallas”, “San Jose”
];
// Initialize jQuery UI Autocomplete
$(function () {
$(“#city”).autocomplete({
Source: cities
});
});
// Form validation
$(“#registrationForm”).submit(function € {
e.preventDefault(); // Prevent default form submission
let isValid = true;
// Full name validation
If ($(“#fullname”).val().trim() === “”) {
$(“#nameError”).show();
isValid = false;
} else {
$(“#nameError”).hide();
}
// Email validation
Const email = $(“#email”).val().trim();
Const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
If (!emailPattern.test(email)) {
$(“#emailError”).show();
isValid = false;
} else {
$(“#emailError”).hide();
}
// Zip code validation
Const zip = $(“#zipcode”).val().trim();
If (!/^\d{5}$/.test(zip)) {
$(“#zipError”).show();
isValid = false;
} else {
$(“#zipError”).hide();
}
// City validation
If ($(“#city”).val().trim() === “”) {
$(“#cityError”).show();
isValid = false;
} else {
$(“#cityError”).hide();
}
If (isValid) {
Alert(“Form submitted successfully!”);
// Optionally, you can reset the form:
// this.reset();
}
});
</script>
</body>
</html>
2)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Landing Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
*{
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Segoe UI', sans-serif;
}
body {
background: linear-gradient(to right, #1e3c72, #2a5298);
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
color: white;
}
.container {
display: flex;
background: linear-gradient(to right, #1e3c72, #2a5298);
padding: 50px;
border-radius: 10px;
width: 90%;
max-width: 1000px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.left {
flex: 1;
padding: 20px;
}
.left h1 {
font-size: 36px;
margin-bottom: 20px;
}
.left p {
font-size: 16px;
margin-bottom: 20px;
line-height: 1.6;
}
.left .learn-more-btn {
padding: 10px 20px;
background: #00ff88;
color: #000;
text-decoration: none;
font-weight: bold;
border-radius: 5px;
}
.right {
flex: 1;
padding: 30px;
background: #fff;
border-radius: 10px;
color: #000;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.right h2 {
text-align: center;
margin-bottom: 20px;
}
.form-group {
margin-bottom: 15px;
}
.form-group input {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 5px;
}
.form-group button {
width: 100%;
padding: 12px;
background-color: #1e3c72;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
.form-group button:hover {
background-color: #163261;
}
@media (max-width: 768px) {
.container {
flex-direction: column;
padding: 20px;
}
.left, .right {
width: 100%;
margin-bottom: 20px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="left">
<h1>Fly makes you faster</h1>
<p>New free templates by uicookies.com. For more templates visit the site.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<a href="#" class="learn-more-btn">Learn More</a>
</div>
<div class="right">
<h2>Sign Up for Free</h2>
<form>
<div class="form-group">
<input type="text" placeholder="Full Name" required>
</div>
<div class="form-group">
<input type="email" placeholder="Email" required>
</div>
<div class="form-group">
<input type="text" placeholder="Phone" required>
</div>
<div class="form-group">
<input type="text" placeholder="City" required>
</div>
<div class="form-group">
<button type="submit">Register</button>
</div>
</form>
</div>
</div>
</body>
</html>
3)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Counter App</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.counter-container {
text-align: center;
background-color: white;
padding: 40px;
border-radius: 10px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
h1 {
font-size: 36px;
margin-bottom: 20px;
}
#count {
font-size: 48px;
margin-bottom: 30px;
font-weight: bold;
color: black;
}
.buttons button {
padding: 10px 20px;
margin: 5px;
border: 2px solid #333;
border-radius: 5px;
background-color: white;
font-size: 16px;
cursor: pointer;
transition: 0.3s;
}
.buttons button:hover {
background-color: #e0e0e0;
}
</style>
</head>
<body>
<div class="counter-container">
<h1>Counter</h1>
<div id="count">0</div>
<div class="buttons">
<button onclick="decrease()">DECREASE</button>
<button onclick="reset()">RESET</button>
<button onclick="increase()">INCREASE</button>
</div>
</div>
<script>
let count = 0;
const countEl = document.getElementById("count");
function updateDisplay() {
countEl.textContent = count;
if (count > 0) {
countEl.style.color = "green";
} else if (count < 0) {
countEl.style.color = "red";
} else {
countEl.style.color = "black";
}
}
function increase() {
count++;
updateDisplay();
}
function decrease() {
count--;
updateDisplay();
}
function reset() {
count = 0;
updateDisplay();
}
</script>
</body>
</html>
4)
// ============================
// a. Insert Multiple Products
// ============================
Db.products.insertMany([
{
Productid: “P101”,
Name: “Smartphone”,
Category: “Electronics”,
Price: 499,
stockQuantity: 10,
discontinued: false
},
{
Productid: “P102”,
Name: “Washing Machine”,
Category: “Home Appliances”,
Price: 299,
stockQuantity: 15,
discontinued: false
},
{
Productid: “P103”,
Name: “Bluetooth Speaker”,
Category: “Electronics”,
Price: 59,
stockQuantity: 0,
discontinued: false,
lastRestocked: new Date(“2024-08-01”)
},
{
Productid: “P104”,
Name: “Microwave”,
Category: “Home Appliances”,
Price: 89,
stockQuantity: 8,
discontinued: false
},
{
Productid: “P105”,
Name: “Laptop”,
Category: “Electronics”,
Price: 899,
stockQuantity: 5,
discontinued: false
}
]);
// =======================================================
// b. Increase price of all Electronics by 10%
// =======================================================
Db.products.updateMany(
{ category: “Electronics” },
[{ $set: { price: { $multiply: [“$price”, 1.1] } } }]
);
// =======================================================
// c. Mark products discontinued if stock = 0 and
// not restocked in last 6 months
// =======================================================
Const sixMonthsAgo = new Date();
sixMonthsAgo.setMonth(sixMonthsAgo.getMonth() – 6);
db.products.updateMany(
{
stockQuantity: 0,
$or: [
{ lastRestocked: { $exists: false } },
{ lastRestocked: { $lt: sixMonthsAgo } }
]
},
{ $set: { discontinued: true } }
);
// =======================================================
// d. Delete products discontinued over a year ago
// (Assuming we add discontinuedDate when marking discontinued)
// =======================================================
Const oneYearAgo = new Date();
oneYearAgo.setFullYear(oneYearAgo.getFullYear() – 1);
db.products.deleteMany({
discontinued: true,
discontinuedDate: { $lt: oneYearAgo }
});
// =======================================================
// e. Get Home Appliances OR price < $50 AND not discontinued
// =======================================================
Db.products.find({
Discontinued: { $ne: true },
$or: [
{ category: “Home Appliances” },
{ price: { $lt: 50 } }
]
});
// =======================================================
// f. Insert a current date field into all products
// =======================================================
Db.products.updateMany(
{},
{ $set: { date: new Date() } }
);
// =======================================================
// g. Update stockQuantity when new stock arrives
// Example: Add 20 units to product P101
// =======================================================
Db.products.updateOne(
{ productid: “P101” },
{
$inc: { stockQuantity: 20 },
$set: { lastRestocked: new Date() }
}
);
// =======================================================
// h. Get orders by specific customer in last 6 months
// AND totalAmount > 500
// Assuming ‘orders’ collection has: customerId, totalAmount, orderDate
// =======================================================
Const lastSixMonths = new Date();
lastSixMonths.setMonth(lastSixMonths.getMonth() – 6);
db.orders.find({
customerId: “C123”,
totalAmount: { $gt: 500 },
orderDate: { $gte: lastSixMonths }
});
// =======================================================
// i. Get all orders scheduled for delivery today
// =======================================================
Const today = new Date();
Today.setHours(0, 0, 0, 0);
Const tomorrow = new Date(today);
Tomorrow.setDate(today.getDate() + 1);
Db.orders.find({
deliveryDate: {
$gte: today,
$lt: tomorrow
}
});
// =======================================================
// j. Retrieve top four product items
// Criteria: Most stock or most sold — here we use stock
// =======================================================
Db.products.find().sort({ stockQuantity: -1 }).limit(4);
