0% found this document useful (0 votes)
2 views16 pages

Javascript

The document contains a series of JavaScript programs designed to create web applications for various functionalities, including credit card validation, form validation for name, email, and password, country-capital matching, a simple calculator, a self-modifying web page, and more. Each program is structured with HTML, CSS, and JavaScript, providing interactive user interfaces and validation logic. The author of the document is Vishal Singh Naula, a student in Semester VI, Section C2.

Uploaded by

aj
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
2 views16 pages

Javascript

The document contains a series of JavaScript programs designed to create web applications for various functionalities, including credit card validation, form validation for name, email, and password, country-capital matching, a simple calculator, a self-modifying web page, and more. Each program is structured with HTML, CSS, and JavaScript, providing interactive user interfaces and validation logic. The author of the document is Vishal Singh Naula, a student in Semester VI, Section C2.

Uploaded by

aj
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 16

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>

<label><h3>Enter Card Number:</h3></label>


<input type="text" id="cardNumber" style="width: 200px; height: 30px; font-
size: 16px;">
<button onclick="validateCard()" style="width: 200px; height: 30px; font-size:
16px;">Validate</button>
<h2 id="result"></h2>
<script>
function validateCard() {
let cardNumber = document.getElementById("cardNumber").value.trim();
let result = document.getElementById("result");
let visaRegex = /^4\d{12}(\d{3})?$/; // Visa: 13 or 16 digits, starts with 4
let masterCardRegex = /^5[1-5]\d{14}$/; // MasterCard: 16 digits, starts
with 51-55
let amexRegex = /^3[47]\d{13}$/; // American Express: 15 digits, starts
with 34 or 37
if (visaRegex.test(cardNumber)) {
result.textContent = "Valid Visa Card";
} else if (masterCardRegex.test(cardNumber)) {
result.textContent = "Valid MasterCard";
} else if (amexRegex.test(cardNumber)) {
result.textContent = "Valid American Express Card";
} else {
result.textContent = "Invalid Card Number";
}
}
</script>

</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

22. Design the simple Calculator.

<!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

23 Design a web page that is self-modifying itself after every second.

<!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>

<br><footer><h5>Name-Vishal Singh Naula Student ID.-220112476 Semester-


VI Section-C2</h5></footer><br>
</html>

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:

You might also like