HTML & JavaScript Programs for Web Development Assignment
1. HTML Table - Student Mark Sheet
<html>
<body>
<h2>Student Mark Sheet</h2>
<table border="1">
<tr>
<th>Name</th>
<th>Roll No</th>
<th>Subject</th>
<th>Marks</th>
<th>Grade</th>
</tr>
<tr>
<td>Rohan</td>
<td>101</td>
<td>Maths</td>
<td>95</td>
<td>A+</td>
</tr>
<tr>
<td>Aryan</td>
<td>102</td>
<td>Science</td>
<td>88</td>
<td>A</td>
</tr>
</table>
</body>
</html>
2. Daily Schedule
<html>
<body>
<h2>Weekly Schedule</h2>
<ol>
<li>Monday
<ul>
<li>Wake up early</li>
1
<li>Attend classes</li>
<li>Study 2 hours</li>
</ul>
</li>
<li>Tuesday
<ul>
<li>Gym workout</li>
<li>Project work</li>
<li>Revision</li>
</ul>
</li>
</ol>
</body>
</html>
3. Student Registration Form
<html>
<body>
<h2>Student Registration Form</h2>
<form>
Name: <input type="text" name="name"><br><br>
Email: <input type="email" name="email"><br><br>
Mobile: <input type="text" name="mobile"><br><br>
Gender: <input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female<br><br>
Address:<br>
<textarea rows="3" cols="30"></textarea><br><br>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
</body>
</html>
4. Top 10 Favorite Movies
<html>
<body>
<h2>Top 10 Favorite Movies</h2>
<ol type="I">
<li>Inception
<ul>
2
<li>Leonardo DiCaprio</li>
<li>Joseph Gordon-Levitt</li>
</ul>
</li>
<li>Interstellar
<ul>
<li>Matthew McConaughey</li>
<li>Anne Hathaway</li>
</ul>
</li>
</ol>
</body>
</html>
5. Online Shopping Checkout Form
<html>
<body>
<h2>Checkout Form</h2>
<form>
Name: <input type="text" name="name"><br><br>
Email: <input type="email" name="email"><br><br>
Mobile: <input type="text" name="mobile"><br><br>
Address:<br><textarea rows="3" cols="30"></textarea><br><br>
Payment Method:<br>
<input type="radio" name="payment" value="cod"> COD<br>
<input type="radio" name="payment" value="upi"> UPI<br>
<input type="radio" name="payment" value="card"> Card<br><br>
<input type="submit" value="Place Order">
</form>
</body>
</html>
6. Static Pages - Registration & Login
[Link]
<html>
<body>
<h2>Registration</h2>
<form>
Name: <input type="text" name="name"><br><br>
3
Email: <input type="email" name="email"><br><br>
Password: <input type="password" name="pass"><br><br>
<input type="submit" value="Register">
</form>
<a href="[Link]">Login</a>
</body>
</html>
[Link]
<html>
<body>
<h2>Login</h2>
<form>
Email: <input type="email" name="email"><br><br>
Password: <input type="password" name="pass"><br><br>
<input type="submit" value="Login">
</form>
<a href="[Link]">Register</a>
</body>
</html>
7. Alert, Confirm, Prompt & Control Structures
<html>
<body>
<h2>JavaScript Examples</h2>
<button onclick="alertBox()">Alert</button>
<button onclick="confirmBox()">Confirm</button>
<button onclick="promptBox()">Prompt</button>
<button onclick="controlDemo()">Conditions & Loop</button>
<script>
function alertBox(){ alert("This is Alert!"); }
function confirmBox(){
if(confirm("Continue?")) alert("OK clicked");
else alert("Cancel clicked");
}
function promptBox(){
let name = prompt("Enter your name:");
alert("Hello " + name);
}
function controlDemo(){
let num = prompt("Enter a number:");
if(num>0) alert("Positive");
4
else if(num<0) alert("Negative");
else alert("Zero");
let result = "";
for(let i=1;i<=5;i++) result+=i+" ";
alert("Loop Output: "+result);
}
</script>
</body>
</html>
8. [Link] Data Visualization Script
// [Link] console bar chart
const months=["Jan","Feb","Mar","Apr"];
const sales=[10,20,15,30];
[Link]("Sales Chart:");
[Link]((m,i)=>{
[Link](m+" : "+"#".repeat(sales[i]));
});
9. Events and Event Stream Example
<html>
<body>
<h2>Event Example</h2>
<button id="btn">Click Me</button>
<p id="mouse">Mouse moves: 0</p>
<input type="text" id="key" placeholder="Type here">
<script>
let count=0;
[Link]("btn").onclick=()=>alert("Button Clicked");
[Link]("mousemove",()=>{
count++; [Link]("mouse").innerText="Mouse moves: "+count;
});
[Link]("key").addEventListener("keyup",
e=>[Link]("Key:",[Link]));
</script>
</body>
</html>
5
10. JS Validation for Registration Fields
<html>
<body>
<h2>Registration Form</h2>
<form onsubmit="return validate()">
Email: <input type="text" id="email"><br><br>
Phone: <input type="text" id="phone"><br><br>
Password: <input type="password" id="pass"><br><br>
<input type="submit" value="Register">
</form>
<script>
function validate(){
let email=[Link]("email").value;
let phone=[Link]("phone").value;
let pass=[Link]("pass").value;
if(!/^[\w._]+@[a-z]+\.[a-z]{2,3}$/.test(email)){ alert("Invalid Email");
return false; }
if(!/^[0-9]{10}$/.test(phone)){ alert("Invalid Phone"); return false; }
if([Link]<6){ alert("Password min 6 chars"); return false; }
alert("Registration Successful!"); return true;
}
</script>
</body>
</html>