JavaScript + HTML Practice Programs
Program 1: Display Numbers from 1 to 10
<!DOCTYPE html>
<html>
<head>
<title>Counting 1 to 10</title>
</head>
<body>
<script>
for (let i = 1; i <= 10; i++) {
[Link](i + "<br>");
}
</script>
</body>
</html>
Program 2: Print Table of 5
<!DOCTYPE html>
<html>
<head>
<title>Table of 5</title>
</head>
<body>
<script>
for (let i = 1; i <= 10; i++) {
[Link]("5 x " + i + " = " + (5 * i) + "<br>");
}
</script>
</body>
</html>
Program 3: Check Even or Odd
<!DOCTYPE html>
<html>
<head>
<title>Even or Odd</title>
</head>
<body>
<script>
let num = 7; // change the number here
if (num % 2 === 0) {
[Link](num + " is Even");
} else {
[Link](num + " is Odd");
}
</script>
</body>
</html>
Program 4: Print Your Name 5 Times
<!DOCTYPE html>
<html>
<head>
<title>Print Name</title>
</head>
<body>
<script>
for (let i = 1; i <= 5; i++) {
[Link]("My name is Diya<br>");
}
</script>
</body>
</html>
Program 5: User se Name Input le aur Welcome Message dikhaye
<!DOCTYPE html>
<html>
<head>
<title>Input Example</title>
</head>
<body>
<h2>Enter your name:</h2>
<input type="text" id="username">
<button >
<p id="output"></p>
<script>
function greetUser() {
let name = [Link]("username").value;
[Link]("output").innerHTML = "Welcome, " + name + "!";
}
</script>
</body>
</html>
Program 6: 2 Numbers le aur Unka Sum Show kare
<!DOCTYPE html>
<html>
<head>
<title>Addition</title>
</head>
<body>
<h2>Add Two Numbers</h2>
<input type="number" id="num1"> +
<input type="number" id="num2">
<button >
<p id="result"></p>
<script>
function addNumbers() {
let a = parseInt([Link]("num1").value);
let b = parseInt([Link]("num2").value);
let sum = a + b;
[Link]("result").innerHTML = "Sum is: " + sum;
}
</script>
</body>
</html>
Program 7: Check Number is Positive, Negative, or Zero
<!DOCTYPE html>
<html>
<head>
<title>Check Number</title>
</head>
<body>
<h2>Enter a Number:</h2>
<input type="number" id="checkNum">
<button >
<p id="status"></p>
<script>
function checkNumber() {
let num = parseInt([Link]("checkNum").value);
if(num > 0) {
[Link]("status").innerHTML = "Number is Positive";
} else if(num < 0) {
[Link]("status").innerHTML = "Number is Negative";
} else {
[Link]("status").innerHTML = "Number is Zero";
}
}
</script>
</body>
</html>