Javascript
Javascript
PROGRAM 20
19. Design a web page to validate the credit card numbers per the information.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Credit Card Validator</title>
<style>
body {
border: 5px solid black;
padding: 20px;
margin: 10px;
text-align: center;
}
footer {
margin-top: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<h2>Credit Card Validator</h2>
</body>
<br><footer><h4>Name-Vishal Singh Naula Student ID.-220112476 Semester-
VI Section-C2</h4></footer><br>
</html>
OUTPUT:
PROGRAM 21
20. Design a web page to validate the NAME, EMAIL and PASSWORD.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
border: 5px solid black;
padding: 20px;
margin: 10px;
text-align: center;
}
footer {
margin-top: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<h2>Validator</h2>
<label>Name:</label>
<input type="text" id="name" style="width: 200px; height: 30px; font-size:
16px;"><br><br>
<label>Email:</label>
<input type="text" id="email" style="width: 200px; height: 30px; font-size:
16px;"><br><br>
<label>Password:</label>
<input type="password" id="password" style="width: 200px; height: 30px; font-
size: 16px;"><br><br>
<button onclick="validateForm()" style="width: 120px; height: 35px; font-size:
16px;">Validate</button>
<p id="result"></p> <!-- Displays validation result -->
<script>
function validateForm() {
let name = document.getElementById("name").value.trim();
let email = document.getElementById("email").value.trim();
let password = document.getElementById("password").value.trim();
let result = document.getElementById("result");
let nameRegex = /^[A-Za-z ]{6,}$/;
let emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
let passwordRegex = /^(?=.*[A-Za-z])(?=.*\d).{8,}$/;
if (!nameRegex.test(name)) {
result.textContent = "Invalid Name";
return;
}
if (!emailRegex.test(email)) {
result.textContent = "Invalid Email Format";
return;
}
if (!passwordRegex.test(password)) {
result.textContent = "Password is Weak";
return;
}
result.textContent = "Form is Valid!";
}
</script>
</body>
<br><footer><h4>Name-Vishal Singh Naula Student ID.-220112476 Semester-
VI Section-C2</h4></footer><br>
</html>
OUTPUT:
PROGRAM 22
21.Store some country names and their capitals. Ask the user to select a country
and its capital from two lists. If the match is correct, display “Correct answer”;
otherwise, display an error message and tell the correct answer.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
border: 5px solid black;
padding: 20px;
margin: 10px;
text-align: center;
}
footer {
margin-top: 20px;
font-weight: bold;
}
</style>
<script>
function checkCapital() {
let country = document.getElementById("country").value;
let capital = document.getElementById("capital").value;
let capitals = { "India": "New Delhi", "USA": "Washington DC", "UK":
"London","Japan":"Tokoyo" };
if (capitals[country] === capital) {
result.textContent = "Correct.";
return;
} else {
result.textContent = "Incorrect and correct annswer is : " +
capitals[country] ;
return;
}
}
</script>
</head>
<body>
<h2>Match Country with Capital</h2>
<select id="country" >
<option value="" disabled selected>Select Country</option>
<option value="India">India</option>
<option value="USA">USA</option>
<option value="UK">UK</option>
<option value="Japan">Japan</option>
</select>
<select id="capital">
<option value="" disabled selected>Select Capital</option>
<option value="New Delhi">New Delhi</option>
<option value="Washington DC">Washington DC</option>
<option value="London">London</option>
<option value="Tokoyo">Tokoyo</option>
</select>
<button onclick="checkCapital()">Check</button>
<p id="result"></p>
</body>
<br><footer><h4>Name-Vishal Singh Naula Student ID.-220112476 Semester-
VI Section-C2</h4></footer><br>
</html>
OUTPUT:
PROGRAM 23
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
border: 5px solid black;
padding: 20px;
margin: 10px;
text-align: center;
}
footer {
margin-top: 20px;
font-weight: bold;
}
</style>
<script>
function calculate() {
let num1 = Number(document.getElementById("n1").value);
let op = document.getElementById("operator").value;
let num2 = Number(document.getElementById("n2").value);
let result = document.getElementById("result");
if (op == '+') {
result.textContent = num1 + num2;
return;
}if (op == '-') {
result.textContent = num1 - num2;
return;
} if (op == '*') {
result.textContent = num1 * num2;
return;
}if (op == '/') {
result.textContent = num1 / num2;
return;
}if(op == '%'){
result.textContent = num1 % num2;
return;
} result.textContent = "Invalid values!";
}
</script>
</head>
<body>
<h2>CALCULATOR</h2>
<label>Num1:</label>
<input type="number" id="n1" style="width: 200px; height: 30px; font-size:
16px;"><br><br>
<select id="operator">
<option value="" disabled selected>Operator</option>
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
<option value="%">%</option>
</select><br><br>
<label>Num2:</label>
<input type="number" id="n2" style="width: 200px; height: 30px; font-size:
16px;"><br><br>
<button onclick="calculate()" style="width: 120px; height: 35px; font-size:
16px;">=</button>
<p id="result"></p>
</body>
<br><footer><h4>Name-Vishal Singh Naula Student ID.-220112476 Semester-
VI Section-C2</h4></footer><br>
</html>
OUTPUT:
PROGRAM 24
<!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>
<style>
body {
border: 5px solid black;
padding: 20px;
margin: 10px;
text-align: center;
}
footer {
margin-top: 20px;
font-weight: bold;
}
</style>
<body>
<div id="abc">Initial Time</div>
<script>
function modify(){
var d = new Date();
var hrs = d.getHours();
var min = d.getMinutes();
var sec = d.getSeconds();
var newc = "Time : " + hrs + " : " + min + " : " + sec;
document.getElementById("abc").innerText=newc;
}
setInterval(modify, 1000);
</script>
</body>
<br><footer><h5>Name-Vishal Singh Naula Student ID.-220112476 Semester-
VI Section-C2</h5></footer><br>
</html>
OUTPUT:
PROGRAM 25
24. Write a code for a web application that accepts the user's birthdate in a textbox
and displays the day of the week in a message box at the click of a button.
<!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>
<style>
body {
border: 5px solid black;
padding: 20px;
margin: 10px;
text-align: center;
}
footer {
margin-top: 20px;
font-weight: bold;
}
</style>
<body>
<label><h3>Enter Date of Birth :</h3></label>
<input type="date" id="birthDate" style="width: 200px; height: 30px; font-size:
16px;">
<button id="btn" onclick="checkDay()">Check the Day</button>
<script>
function checkDay(){
let inputDate = document.getElementById("birthDate").value;
let birthDate = new Date(inputDate);
const weekdays = ["Sunday", "Monday", "Tuesday", "Wednesday",
"Thursday", "Friday", "Saturday"];
const idx = birthDate.getDay();
document.getElementById("abc").innerText=weekdays[idx];
}
</script>
<p>Day: </p>
<div id="abc"></div>
</body>
<br><footer><h5>Name-Vishal Singh Naula Student ID.-220112476 Semester-
VI Section-C2</h5></footer><br>
</html>
OUTPUT:
PROGRAM 26
25. Write a script that inputs a telephone number as a string in the form (555)555-
555. The script should use the strings method split to extract the area code as a
token and the last four digits of the phone numbers as a token. Display the area code
in one test field and the seven-digit phone number in another text field.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
border: 5px solid black;
padding: 20px;
margin: 10px;
text-align: center;
}
footer {
margin-top: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<h3>Phone Number Splitter</h3>
<input type="text" id="phoneInput" placeholder="Enter Phone Number">
<button onclick="splitPhone()">Split</button><br><br>
Area Code: <input type="text" id="area"><br><br>
Seven-Digit: <input type="text" id="seven"><br>
<script>
function splitPhone() {
let phone = document.getElementById("phoneInput").value;
let parts = phone.split(/[()\-]/);
document.getElementById("area").value = parts[1];
document.getElementById("seven").value = parts[2] + parts[3];
}
</script>
</body>
OUTPUT :
PROGRAM 28
27. Write a JavaScript function that takes a string that has lower and upper case
letters as a parameter and converts upper case letters to lower case and lower case
letters to upper case.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
border: 5px solid black;
padding: 20px;
margin: 10px;
text-align: center;
}
footer {
margin-top: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<h3>Toggle Case</h3>
<input type="text" id="caseInput" placeholder="Enter String: ">
<button onclick="toggleCase()">Convert</button>
<p id="caseResult"></p>
<script>
function toggleLetterCase(str){
var result = "";
for (var i = 0; i < str.length; i++) {
var char = str[i];
if (/[A-Z]/.test(char)) {
result += char.toLowerCase();
}
else if (/[a-z]/.test(char)) {
result += char.toUpperCase();
}
else {
result += char;
}
}
return result;
}
function toggleCase() {
let str = document.getElementById("caseInput").value;
document.getElementById("caseResult").innerText = toggleLetterCase(str);
}
</script>
</body>
<footer><h5>Name-Vishal Singh Naula Student ID.-220112476 Semester-VI
Section-C2</h5></footer>
</html>
OUTPUT: