Scribd
Upload
16 views11 pages

K225195 We Lab 4

The document contains various JavaScript functions and HTML code snippets demonstrating different programming concepts. It includes examples of data types, string manipulation, arithmetic operations, palindrome checking, and form validation. Additionally, it features HTML forms for user input and an image slider implementation.

Uploaded by

k224818
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
16 views11 pages

K225195 We Lab 4

The document contains various JavaScript functions and HTML code snippets demonstrating different programming concepts. It includes examples of data types, string manipulation, arithmetic operations, palindrome checking, and form validation. Additionally, it features HTML forms for user input and an image slider implementation.

Uploaded by

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

WE-LAB-4

22K-5195

1)

1- function dataTypes() {
2- const str = "K225195";
3- const person = { name: "Laiba", age: 21 };
4- let numbers = [1, 2, 3, 4];
5- let number = 10;
6- var isActive = true;
7- let undefinedVar;
8- const emptyValue = null;
9- const uniqueSymbol = Symbol("id");
10- let bigNumber =
1234567890123456789012345678901234567890n;
11-
12- console.log("Object:", person);
13- console.log("String:", str);
14- console.log("Array:", numbers);
15- console.log("Number:", number);
16- console.log("Boolean:", isActive);
17- console.log("Undefined:", undefinedVar);
18- console.log("Null:", emptyValue);
19- console.log("Symbol:", uniqueSymbol);
20- console.log("BigInt:", bigNumber);
21- }
22-
23- dataTypes();

2)

function reverseString(str) {
let reversedStr = str.split('').sort().reverse().join('');
console.log("Reversed String :", reversedStr);
}
reverseString("Laiba");
3)

function printTable(number) {
let result = '';
for (let i = 1; i <= 10; i++) {
result += `${number} * ${i} = ${number * i}\n`;
}
console.log(result);
}

printTable(7);

4)

const readline = require('readline');


const rl = readline.createInterface({
input: process.stdin,
output: process.stdout
});
rl.question('enter first num: ', (num1) => {
rl.question('enter second numb: ', (num2) => {
num1 = parseFloat(num1);
num2 = parseFloat(num2);

const add = num1 + num2;


const subtract = num1 - num2;
const multiply = num1 * num2;
const divide = num1 / num2;

console.log(`Addition: ${add}`);
console.log(`Subtraction: ${subtract}`);
console.log(`Multiplication: ${multiply}`);
console.log(`Division: ${divide}`);
rl.close();
});
});

5)

function isPalindrome(str) {
const reversed = str.split('').reverse().join('');
if (str === reversed) {
console.log("string is a palindrome.");
} else {
console.log("string is not a palindrome.");
}
}
isPalindrome("civic");
isPalindrome("laiba");

6)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Sign-Up Form</title>
</head>
<body>
<h1>Sign-Up Form</h1>
<form id="signupForm">
<label for="username">Username:</label>
<input type="text" id="username" required><br><br>

<label for="email">Email:</label>
<input type="email" id="email" required><br><br>

<label for="password">Password:</label>
<input type="password" id="password" required><br><br>

<button type="submit">Submit</button>
</form>

<h2>Entered Information:</h2>
<p id="displayUsername"></p>
<p id="displayEmail"></p>
<p id="displayPassword"></p>

<script>
const form = document.getElementById('signupForm');
const displayUsername =
document.getElementById('displayUsername');
const displayEmail = document.getElementById('displayEmail');
const displayPassword =
document.getElementById('displayPassword');

form.addEventListener('submit', function(event) {
event.preventDefault();

const username = document.getElementById('username').value;


const email = document.getElementById('email').value;
const password = document.getElementById('password').value;

displayUsername.textContent = "Username: " + username;


displayEmail.textContent = "Email: " + email;
displayPassword.textContent = "Password: " + password;
});
</script>
</body>
</html>
7)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Sign-Up Form with Validation</title>
</head>
<body>
<h1>Sign-Up Form with Validation</h1>
<form id="signupForm">
<label for="username">Username (min 5 characters):</label>
<input type="text" id="username" required><br><br>

<label for="contact">Contact Number:</label>


<input type="text" id="contact" required><br><br>

<label for="email">Email:</label>
<input type="email" id="email" required><br><br>

<label for="password">Password (min 8 characters):</label>


<input type="password" id="password" required><br><br>

<label for="gender">Gender:</label>
<input type="radio" id="male" name="gender" value="Male"> Male
<input type="radio" id="female" name="gender" value="Female">
Female<br><br>

<label for="terms">Agree to Terms:</label>


<input type="checkbox" id="terms" required> I agree to the
terms<br><br>

<button type="submit">Submit</button>
</form>

<h2>Entered Information:</h2>
<p id="displayUsername"></p>
<p id="displayContact"></p>
<p id="displayEmail"></p>
<p id="displayPassword"></p>
<p id="displayGender"></p>
<p id="displayTerms"></p>

<script>
const form = document.getElementById('signupForm');
const displayUsername =
document.getElementById('displayUsername');
const displayContact =
document.getElementById('displayContact');
const displayEmail = document.getElementById('displayEmail');
const displayPassword =
document.getElementById('displayPassword');
const displayGender = document.getElementById('displayGender');
const displayTerms = document.getElementById('displayTerms');

form.addEventListener('submit', function(event) {
event.preventDefault();

const username = document.getElementById('username').value;


const contact = document.getElementById('contact').value;
const email = document.getElementById('email').value;
const password = document.getElementById('password').value;
const gender =
document.querySelector('input[name="gender"]:checked');
const terms = document.getElementById('terms').checked;

const usernameRegex = /^[a-zA-Z0-9]{5,}$/;


const contactRegex = /^[0-9]{10}$/;
const passwordRegex = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]
{8,}$/;
const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-
zA-Z]{2,}$/;
if (!usernameRegex.test(username)) {
alert('Username must be at least 5 characters long and
contain only letters and numbers.');
return;
}
if (!contactRegex.test(contact)) {
alert('Please enter a valid 10-digit contact number.');
return;
}
if (!emailRegex.test(email)) {
alert('Please enter a valid email address.');
return;
}
if (!passwordRegex.test(password)) {
alert('Password must be at least 8 characters long,
with at least one letter and one number.');
return;
}
if (!gender) {
alert('Please select your gender.');
return;
}
if (!terms) {
alert('You must agree to the terms and conditions.');
return;
}

displayUsername.textContent = "Username: " + username;


displayContact.textContent = "Contact: " + contact;
displayEmail.textContent = "Email: " + email;
displayPassword.textContent = "Password: " + password;
displayGender.textContent = "Gender: " + gender.value;
displayTerms.textContent = "Agreed to Terms: " + (terms ?
'Yes' : 'No');
});
</script>
</body>
</html>
8)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Image Slider</title>
<style>
#slider {
width: 500px;
height: 300px;
overflow: hidden;
}
#slider img {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<h1>Image Slider</h1>
<div id="slider">
<img src="https://images.unsplash.com/photo-1585076641399-
5c06d1b3365f?q=80&w=1470&auto=format&fit=crop&ixlib=rb-
4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="Image 1">
<img src="https://images.unsplash.com/photo-1607706189992-
eae578626c86?w=500&auto=format&fit=crop&q=60&ixlib=rb-
4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTR8fGh0bWx8ZW58MHx8MHx8fDA%3D"
alt="Image 2">
<img src="https://images.unsplash.com/photo-1505685296765-
3a2736de412f?w=500&auto=format&fit=crop&q=60&ixlib=rb-
4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTl8fGh0bWx8ZW58MHx8MHx8fDA%3D"
alt="Image 3">
</div>

<script>
let currentIndex = 0;
const images = document.querySelectorAll('#slider img');
const totalImages = images.length;

function moveSlider() {
images.forEach((img, index) => {
img.style.display = 'none';
});

images[currentIndex].style.display = 'block';

currentIndex = (currentIndex + 1) % totalImages;


}

setInterval(moveSlider, 3000);
moveSlider();
</script>
</body>
</html>

You might also like