Advanced Web Designing – JavaScript Assignment No.
2
HTML + JavaScript Programs
Program 1: 01 Even 1 To 100
<!DOCTYPE html>
<html><head><title>Even Numbers</title></head>
<body>
<h2>Even numbers between 1 and 100</h2>
<script>
for (let i = 2; i <= 100; i += 2) {
[Link](i + " ");
}
</script>
</body></html>
Program 2: 02 Prime 1 To 100
<!DOCTYPE html>
<html><head><title>Prime Numbers</title></head>
<body>
<h2>Prime numbers between 1 and 100</h2>
<script>
for (let n = 2; n <= 100; n++) {
let prime = true;
for (let i = 2; i <= [Link](n); i++) {
if (n % i === 0) { prime = false; break; }
}
if (prime) [Link](n + " ");
}
</script>
</body></html>
Program 3: 03 Tables 11 To 20
<!DOCTYPE html>
<html><head><title>Tables 11 to 20</title></head>
<body>
<h2>Tables from 11 to 20</h2>
<script>
for (let n = 11; n <= 20; n++) {
[Link]("<h3>Table of " + n + "</h3>");
for (let i = 1; i <= 10; i++) {
[Link](n + " × " + i + " = " + (n * i) + "<br>");
}
}
</script>
</body></html>
Program 4: 04 Sum First 10
<!DOCTYPE html>
<html><head><title>Sum of First 10 Numbers</title></head>
<body>
<h2>Sum of first 10 numbers</h2>
<script>
let sum = 0;
for (let i = 1; i <= 10; i++) {
sum += i;
}
[Link]("Sum = " + sum);
</script>
</body></html>
Program 5: 05 Factorial 1 To 10
<!DOCTYPE html>
<html><head><title>Factorial 1 to 10</title></head>
<body>
<h2>Factorials from 1 to 10</h2>
<script>
for (let n = 1; n <= 10; n++) {
let fact = 1;
for (let i = 1; i <= n; i++) {
fact *= i;
}
[Link](n + "! = " + fact + "<br>");
}
</script>
</body></html>
Program 6: 06 Patterns
<!DOCTYPE html>
<html><head><title>JavaScript Patterns</title>
<style>pre{font-size:18px;line-height:1.5}</style>
</head>
<body>
<h2>Patterns</h2>
<script>
let rows = parseInt(prompt("Enter number of rows:", "4"));
if (isNaN(rows) || rows < 1) rows = 4;
[Link]("<h3>i) Number Pattern</h3><pre>");
let num = 1;
for (let i = 1; i <= rows; i++) {
for (let j = 1; j <= i; j++) {
[Link](num++ + (j < i ? " " : ""));
}
[Link]("\n");
}
[Link]("</pre>");
[Link]("<h3>ii) Star Pattern</h3><pre>");
for (let i = 1; i <= rows; i++) {
[Link]("* ".repeat(i).trim() + "\n");
}
[Link]("</pre>");
[Link]("<h3>iii) Alphabet-Number Pattern</h3><pre>");
for (let i = 1; i <= rows; i++) {
for (let j = 1; j <= i; j++) {
[Link]([Link](96 + j) + j + (j < i ? " " : ""));
}
[Link]("\n");
}
[Link]("</pre>");
[Link]("<h3>iv) Centered @ Pattern</h3><pre>");
for (let i = 1; i <= rows; i++) {
[Link](" ".repeat((rows - i) * 2) + ("@ ".repeat(i)).trim() + "\n");
}
[Link]("</pre>");
</script>
</body></html>
Program 7: 07 Add Two Numbers Form
<!DOCTYPE html>
<html><head><title>Add Two Numbers</title></head>
<body>
<h2>Addition of Two Numbers</h2>
<form onsubmit="return addNumbers()">
Number 1: <input type="number" id="num1" required><br><br>
Number 2: <input type="number" id="num2" required><br><br>
Result: <input type="text" id="result" readonly><br><br>
<button type="submit">Add</button>
</form>
<script>
function addNumbers() {
let a = Number([Link]("num1").value);
let b = Number([Link]("num2").value);
[Link]("result").value = a + b;
return false;
}
</script>
</body></html>
Program 8: 08 Current Date Alert
<!DOCTYPE html>
<html><head><title>Current Date</title></head>
<body>
<h2>Display Current Date</h2>
<script>
let today = new Date();
alert("Current Date: " + [Link]());
[Link]("Current Date: " + [Link]());
</script>
</body></html>
Program 9: 09 Confirm Dialog
<!DOCTYPE html>
<html><head><title>Confirm Dialog</title></head>
<body>
<h2>Confirm Dialog Box</h2>
<button onclick="check()">Click Here</button>
<script>
function check() {
let answer = confirm("Do you want to continue?");
if (answer)
alert("You clicked OK.");
else
alert("You clicked Cancel.");
}
</script>
</body></html>
Program 10: 10 City Select Visit
<!DOCTYPE html>
<html><head><title>Select City</title></head>
<body>
<h2>Select a City</h2>
<select id="city" onchange="visitPage()">
<option value="">-- Select City --</option>
<option value="Rajasthan">Rajasthan</option>
<option value="Kerala">Kerala</option>
<option value="Shimla">Shimla</option>
</select>
<p id="message"></p>
<script>
function visitPage() {
let city = [Link]("city").value;
if (city) {
[Link]("message").innerHTML =
"You selected " + city + ".";
}
}
</script>
</body></html>
Program 11: 11 Background Colour Radio
<!DOCTYPE html>
<html><head><title>Background Colour</title></head>
<body>
<h2>Change Background Colour</h2>
<label><input type="radio" name="colour" onclick="changeBg('lightblue')"> Blue</label><br>
<label><input type="radio" name="colour" onclick="changeBg('lightgreen')"> Green</label><br>
<label><input type="radio" name="colour" onclick="changeBg('lightyellow')"> Yellow</label>
<script>
function changeBg(colour) {
[Link] = colour;
}
</script>
</body></html>
Program 12: 12 Mouseover Mouseout
<!DOCTYPE html>
<html><head><title>Mouse Events</title></head>
<body>
<h2>Mouseover and Mouseout</h2>
<p>Move the mouse over and away from the image.</p>
<img id="myImage" src="[Link]
alt="Image" width="250" height="150"
onmouseover="mouseOver()" onmouseout="mouseOut()">
<script>
function mouseOver() {
[Link]("myImage").src =
"[Link]
}
function mouseOut() {
[Link]("myImage").src =
"[Link]
}
</script>
</body></html>
Program 13: 13 Username Onblur Uppercase
<!DOCTYPE html>
<html><head><title>Uppercase Username</title></head>
<body>
<h2>Username in Uppercase</h2>
<form>
Username:
<input type="text" id="username" onblur="makeUppercase()">
</form>
<script>
function makeUppercase() {
let box = [Link]("username");
[Link] = [Link]();
}
</script>
</body></html>
Program 14: 14 Validate Number
<!DOCTYPE html>
<html><head><title>Validate Number</title></head>
<body>
<h2>Number Validation</h2>
<input type="text" id="number" placeholder="Enter a number">
<button onclick="validateNumber()">Validate</button>
<p id="result"></p>
<script>
function validateNumber() {
let value = [Link]("number").[Link]();
if (value !== "" && !isNaN(value))
[Link]("result").innerHTML = "Valid number.";
else
[Link]("result").innerHTML = "Invalid number.";
}
</script>
</body></html>
Program 15: 15 Login Form Validation
<!DOCTYPE html>
<html><head><title>Login Form</title></head>
<body>
<h2>Login Form Validation</h2>
<form onsubmit="return validateLogin()">
Username: <input type="text" id="username" required><br><br>
Password: <input type="password" id="password" required><br><br>
<button type="submit">Login</button>
</form>
<script>
function validateLogin() {
let username = [Link]("username").[Link]();
let password = [Link]("password").value;
if (username === "" || password === "") {
alert("Username and password are required.");
return false;
}
if ([Link] < 6) {
alert("Password must contain at least 6 characters.");
return false;
}
alert("Login validation successful.");
return false;
}
</script>
</body></html>