Web Tech File

lO
lOMoAR cPSD| 49115863
INDEX
S.N EXPERIMENT Page No
1. Create a webpage with HTML describing your department. Use 04-08
paragraph and list tags. Apply various colors to suitably distinguish
key words. Also apply font styling like italics, underline to sentence
you find appropriate. Also use header tags. Insert an image and
create a link such that clicking on image takes user to other page.
Change the background color of the page. At the bottom create a link
to take user to the top of the page.
2. Design page that has 5 equal columns the table should look the same 09-12
in all screen resolution.
3. Design page that has 5 equal columns the table should look the same 13-16
in all screen resolution.
4. Write a HTML code to generate following output. Put validation 17-20

checks on values entered by the user using JavaScript like email
check and password and confirm password. Also change background
color after 5 seconds of
page load.
5. Create an html page containing the polynomial expression as 21-22

follows
a0 + a1x+ a2x 2 + a3 x3
6. Write a HTML code to generate following output: Use of FrameSet. 23-25
7. Write a JavaScript program to display a hidden div (e.g. showing 26-27

stats of a player when user clicks on his name).
8. Write a JavaScript program to sort the items of an array. 28
9. Write a JavaScript program which accept a string as input and swap 29
the case of each character. For example if you input 'The Quick
Brown Fox' the output should be 'tHE qUICK bROWN fOX'.
10. Write a JavaScript function to hide email addresses to protect from 30
unauthorized user.
11. Write a JavaScript function to insert a string within a string at a 31
particular position.
12. Write a JavaScript function to check whether a given value is 32
hexadecimal value or not.
13. Write a JavaScript function to convert a decimal number to binary, 33-34
hexadecimal or octal number.
14. Write a merge sort program in JavaScript. 35-36
15. Write a JavaScript program to count number of words in string. 37
Note : -Remove white-space from start and end position. -Convert 2
or more spaces to 1. - Exclude newline with a start spacing.
Experiment-1
AIM: Create a webpage with HTML describing your department. Use paragraph and list tags.
Apply various colors to suitably dis nguish key words. Also apply font styling like italics,
underline to sentence you find appropriate. Also use header tags. Insert an image and create
a link such that clicking on image takes user to other page. Change the background color of
the page. At the bo om create a link to take user to the top of the page.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Delhi Technological University - Computer Engineering
Department</title> <style>
h1{ font-size:
36px; font-weight:
bold; text-align:
center;
} p{
font-size: 20px;
line-height: 1.5;
text-align: justify;
}
.bold{ font-
weight: bold;
}
.italic{
font-style: italic;
}
ul{
margin-left: 40px;
}
li{
margin-bottom: 10px;
}
#header{
background-color: #333;
color: #fff; padding:
20px; text-align:
center;
}
#header a{ color:
#fff; text-
decoration: none;
}
#header a:hover{ text-

decoration: underline;
}
#image{ text-
align: center;
margin-top: 20px;
}
#image img{ width: 200px;
height: 200px; border-radius:
50%; cursor: pointer;
transition: all 0.2s ease-in-out;
}
#image img:hover{
transform: scale(1.1);
}
#top-link{ position: fixed;
bottom: 20px; right: 20px;
padding: 10px; background-color:
#ffffff; color: #ec0000;
font-size: 18px; border-radius:
50%; cursor: pointer;
transition: all 0.2s ease-in-out;
}
#top-link:hover{
transform: scale(1.1);
}
</style>
</head>
<body>
<div id="header">
<h1>Delhi Technological University</h1>
<p><i>Formerly known as Delhi College of Engineering</i></p>
<a href="#">Home</a> | <a href="#">About</a> | <a href="#">Contact</a>
</div>
<h1>Computer Engineering Department</h1>
<p>Delhi Technological University's <span class="bold">Computer Engineering

Department</span> is one of the most prestigious departments in the
university. The department offers both undergraduate and postgraduate programs
in computer engineering, with a focus on practical, hands-on learning.</p>
<p>The undergraduate program, <span class="italic">Bachelor of Technology in
Computer Engineering</span>, is a four-year program that covers a wide range of
topics, including programming, algorithms, data structures, computer networks,
database systems, and computer architecture. The program also includes a number
of electives that allow students to specialize in areas such as artificial
intelligence, machine learning, cybersecurity, and software engineering.</p>
<p>The postgraduate program, <span class="italic">Master of Technology in
Computer Engineering</span>, is a two-year program that is designed for students
who want to pursue advanced research in computer engineering. The program covers
advanced topics such as computer graphics, distributed systems, advanced
algorithms, and high-performance computing.</p>
<h2>Facilities</h2>
<ul>
<li>State-of-the-art computer labs</li>
<li>High-speed internet connectivity</li>
<li>Library with a vast collection of books, journals, and research
papers</li>
<li>Collaboration with industry partners for research and development
projects</li>
<li>Opportunities for students to participate in national and international
coding competitions</li>
</ul>
<div id="image">
<a href="https://www.dtu.ac.in/"><img src=" https://tinyurl.com/5n8fpdzv"
alt="DTU Campus"></a>
</div>
<p>DTU's Computer Engineering Department is equipped with modern facilities and

resources to support research and learning. The department has a dedicated team
of faculty members who are experts in their respective fields and are committed
to providing quality education to their students.</p>
<p>The department also organizes various workshops, seminars, and guest lectures
by industry experts to keep the students updated with the latest trends and
technologies in the field of computer engineering.</p>
<p>Graduates from the Computer Engineering Department are in high demand in the
industry and have secured placements in top companies such as Microsoft, Amazon,
Google, and Facebook.</p>
<div id="top-link">
<a href="#">^</a>
</div>
</body>
</html>
Output:
Experiment-2
AIM: Design page that has 5 equal columns the table should look the same in all screen
resolu on.
Code:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="./main.css">
<style>
* { margin:
0; padding:
0;
} body { display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh; color:
#fff;
background-color: black;
}
.table { background-color: rgb(138,
47, 199); display: flex; flex-
direction: row; justify-content:
center; align-items: center;
padding: 2% 5%;
}
.column { padding: 0 2%;
display: flex; height: 100%;
flex-direction: column; justify-
content: space-between; align-
items: center;
border: 2px solid rgb(196, 190, 190);
}
.header, .data {
display: flex;
}
.header {
flex: 1;
}
.data {
flex: 4; }
</style>
<title>Experiment 2</title>
</head>
<body>
<div class="table">
<div class="column">
<div class="header">
Column 1
</div>
<div class="data">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a massa
a est gravida gravida. Vivamus sapien sem. Mauris condimentum massa a rhoncus
placerat. Aenean efficitur eget justo at iaculis. et dolor nisi. Sed consequat
fermentum enim, ac sodales nisi consequat vel. Nunc rhoncus porta elit a
egestas. Nulla gravida vitae nulla et eleifend. Vestibulum id leo felis.
</div>
</div>
Column 2
</div>
<div class="data">
a est gravida gravida. Vivamus vel sapien sem. Mauris condimentum massa a rhoncus
placerat. Aenean efficitur eget justo at iaculis. et dolor nisi. Sed consequat
fermentum enim, ac sodales nisi consequat vel. Nunc rhoncus porta elit egestas.
Nulla gravida vitae nulla et eleifend. Vestibulum id leo felis.
</div>
</div>
Column 3
</div>
<div class="data">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a massa a
est gravida gravida. Vivamus vel sapien sem. Mauris condimentum massa a rhoncus
placerat. Aenean efficitur eget justo at iaculis. Integer et dolor nisi. Sed
consequat fermentum enim, ac sodales nisi consequat vel. Nunc rhoncus porta elit a
</div>
</div>
Column 4
</div>
<div class="data">

consequat fermentum enim, ac sodales nisi consequat vel. Nunc rhoncus porta elit a
</div>
</div>
Column 5
</div>
<div class="data">
consequat fermentum enim, ac sodales nisi consequat vel. Nunc rhoncus porta elit
</div>
</div>
</div>
</body>
</html>
Output:
Experiment-3
AIM: Write a HTML code for making table to containing different op on for different
ques ons:
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>* { margin: 0; padding: 0;
font-family: 'Lato', Arial, Helvetica, sans-serif;
color: #fff; font-size: 20px;
}
html {
height: 100vh;
}
body {
background-color: #19151a;
height: 100%; display:
flex; flex: 1;
}
table { border: 2px

solid #fff; padding:
10px;
} td, th
{ padding:
10px;
} tr:nth-child(even)
{ background-color:
#8a2b92;
} tr {
background-color: #5a165f;
}</style> <link
href="https://fonts.googleapis.com/css2?family=Lato:wght@100;300&display=swap"
rel="stylesheet">
</head>
<body>
<table>
<tr>
<th>
Which is your favourite colour?
</th>
<th>
Who is your national leader?
</th>
<th>
Who has the highest test centuries in India?
</th>
</tr>
<tr>
<td>
Red
</td>
<td>
Sardar Patel
</td>
<td>
Kapil Dev
</td>
</tr>
<tr>
<td>
Green
</td>
<td>
Gandhiji
</td>
<td>
Sachin Tendulkar
</td>
</tr>
<tr>
<td>
Yellow
</td>
<td>
Indiraji
</td>
<td>
Sunil Gawaskar
</td>
</tr>
<tr>
<td>
Blue
</td>
<td>
Nehruji
</td>
<td>
Ajay Jadeja
</td>
</tr>
</table>
</body>
</html>
Output:
Experiment-4
AIM: Write a HTML code to generate following output. Put valida on checks on values
entered by the user using JavaScript like email check and password and confirm
password. Also change background color a er 5 seconds of page load.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Registration Form</title>
<style> body {
background-color: #eee;
}
form {
background-color: #fff;
padding: 20px; margin:
50px auto; width: 400px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
} label {
display: inline-block;
width: 100px; text-
align: right; margin-
right: 10px;
}
input {
padding: 5px;
border-radius:
5px;
border: 1px
solid #ccc;
margin-bottom:
10px;
width: 200px;
} .error {
color: red; font-
style: italic;
} button {
background-color: #4CAF50;
color: white; padding: 10px
20px; border: none;
border-radius: 5px; cursor:
pointer; margin-right:
10px;
} .bottom{
height: 20px; width:
100%; display: flex;
margin-top: 5px;
} button[type="reset"]
{ background-color:
#f44336;
}
</style>
</head>
<body onload="changeBg()">
<form id="registration-form">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required><br>
<label for="confirm-password">Confirm Password:</label>

<input type="password" id="confirm-password" name="confirm-password"
required><br>
<label for="first-name">First Name:</label>

<input type="text" id="first-name" name="first-name" required><br>
<label for="last-name">Last Name:</label>

<input type="text" id="last-name" name="last-name" required><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br>
<label for="phone-no">Phone Number:</label>

<input type="text" id="phone-no" name="phone-no" required><br>
<label for="location">Location:</label>
<input type="text" id="location" name="location" required><br>
<div id="error-message"></div>
<div class="bottom">
<button type="button" onclick="validateForm()">Register</button>
<button type="reset">Reset</button>
</div>
</form>
<script> function validateForm() { let password

= document.getElementById("password").value; let
confirmPassword = document.getElementById("confirmpassword").value;
let email = document.getElementById("email").value;
if (password !== confirmPassword) {
document.getElementById("error-message").innerHTML = "<p
class='error'>Passwords do not match</p>"; return;
}
if (!validateEmail(email)) {
document.getElementById("error-message").innerHTML = "<p
class='error'>Invalid email format</p>"; return;
}
document.getElementById("registration-form").submit();
} function validateEmail(email) {
let emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return emailRegex.test(email);
} function changeBg() { let colors = ["#0000FF",
"#FFFFFF", "#800080", "#FF0000", "#0000FF"]; let i = 0;
setInterval(function() { document.body.style.backgroundColor =
colors[i]; i++; if (i === colors.length) {
i = 0; }
}, 5000);
}
</script>
</body>
</html>
Output
Experiment-5
AIM: Create an html page containing the polynomial expression as follows
a0 + a1x+ a2x 2 + a3 x3
Code :
<!DOCTYPE html>
<html>
<head>
<style> body { background-
color: #f5f5f5; font-family: Arial,
sans-serif; font-size: 18px;
line-height: 1.5; margin: 0;
padding: 0; } #equation {
background-color: #fff; border-radius:
10px; box-shadow: 0 0 10px rgba(0, 0, 0,
0.3); margin: 50px auto; max-
width: 600px; padding: 20px;
text-align: center;
} h1 {
font-size: 24px;
font-weight: bold;
margin-bottom: 20px;
} p {
margin: 0;
}
.sub {
font-size: 14px;
} .sup {
font-size: 14px;
margin-left: 5px;
position: relative;
top: -5px;
}
</style>
</head>
<body>
<div id="equation">
<h1>Experiment 5</h1>
<p>Here is an equation:</p>
<p>a<sub class="sub">0</sub> + a<sub class="sub">1</sub>x + a<sub

class="sub">2</sub>x<sup class="sup">2</sup> + a<sub class="sub">3</sub>x<sup
class="sup">3</sup></p>
</div>
</body>
</html>
Output:
Experiment-6
AIM: Write a HTML code to generate following output:
Code:
<!DOCTYPE html>
<html>
<head>
<title>EXPERIMENT 6 </title>
<style> body {
margin: 0; padding: 0;
} .container {
display: flex; flex-
direction: row; height:
100vh; } .section {
display: flex; justify-
content: center; align-
items: center; }
.section.left { width:
40%; flex-direction:
column;
}
.section.left .inner-section {
height: 100%; width: 100%;
border: 1px solid black;
display: flex; justify-
content: center; align-
items: center;
}
.section.left .inner-section:first-child {
border-bottom: none; height: 60%;
width: 100%;
}
.section.right {
width: 60%;
background-color: lightgray;
}
</style>
</head>
<body>
<div class="container">
<div class="section left">
<div class="inner-section">1</div>
<div class="inner-section">2</div>
</div>
<div class="section right">3</div>
</div>
</body>
</html>
Output:
Experiment-7
AIM: Write a JavaScript program to display a hidden div (e.g. showing stats of a player
when user clicks on his name).
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div>
<h3>Cricket Players</h3>
<ul>
<li><a href="#" onclick="showStats(0)">Virat Kooli</a></li>
<li><a href="#" onclick="showStats(1)">Ben Stokes</a></li>
<li><a href="#" onclick="showStats(2)">AB Kejuliar</a></li>
<li><a href="#" onclick="showStats(3)">R Ashwin</a></li>
<li><a href="#" onclick="showStats(4)">DJ Pritam</a></li>
</ul>
</div>
<div id="stats" style="display:none;"></div>
</body> <script>
var players = [
{ name: "Virat Kooli", runs: 500, wickets: 20, catches: 10 },
{ name: "Ben Stokes", runs: 750, wickets: 10, catches: 5 },
{ name: "AB Kejuliar", runs: 1000, wickets: 15, catches: 20 },
{ name: "R Ashwin", runs: 300, wickets: 25, catches: 12 },
{ name: "DJ Pritam", runs: 200, wickets: 5, catches: 2 },
]; function showStats(playerIndex) { var player =
players[playerIndex]; var statsDiv =
document.getElementById("stats"); statsDiv.innerHTML = "<h3>" +
player.name + " Stats</h3>"; statsDiv.innerHTML += "<p>Runs: " +
player.runs + "</p>"; statsDiv.innerHTML += "<p>Wickets: " +
player.wickets + "</p>"; statsDiv.innerHTML += "<p>Catches: " +
player.catches + "</p>"; if (statsDiv.style.display === "none") {
statsDiv.style.display = "block";
}
}
</script>
</html>
Output:
Experiment-8
AIM: Write a JavaScript program to sort the items of an array.
Code:
let items = [
{ name: "Product A", type: "Type 1", date: "2022-01-01", price: 20.99 },
{ name: "Product B", type: "Type 2", date: "2021-12-31", price: 15.49 },
{ name: "Product C", type: "Type 3", date: "2022-01-15", price: 10.99 },
{ name: "Product D", type: "Type 1", date: "2022-02-01", price: 25.99 },
{ name: "Product E", type: "Type 2", date: "2022-03-01", price: 5.99 },
]; function
sortItemsByPrice(items) {
items.sort(function (a, b) {
return a.price - b.price;
});
console.log(items);
} sortItemsByPrice(items);
Output: Products are sorted based on their price

Experiment-9
AIM: Write a JavaScript program which accept a string as input and swap the case of
each character. For example if you input 'The Quick Brown Fox' the output should be
'tHE qUICK bROWN fOX'.
Code:
const swapCase = (str) => {

let ans = ""; for (const x of
str) { if (x ===
x.toUpperCase()) { ans +=
x.toLowerCase();
} else { ans +=
x.toUpperCase();
} }
return ans;
}; let inputStr = "Delhi Technological
University"; console.log(inputStr); let
swappedStr = swapCase(inputStr);
console.log(swappedStr);
Output:
Experiment-10
AIM: Write a JavaScript func on to hide email addresses to protect from
unauthorized user.
Code:
const hideEmail = (email) => {
let parts = email.split("@");
let username = parts[0]; let
domain = parts[1];
let numHiddenChars = Math.max(0, Math.floor(username.length /
2));
let hiddenUsername =
username.slice(0, 2) +
"*".repeat(numHiddenChars) +
username.slice(2 + numHiddenChars);
return hiddenUsername + "@" +
domain;
}; let email =
"himanshu32288@gmail.com";
console.log(email); let hiddenEmail =
hideEmail(email);
console.log(hiddenEmail);
Output:
Experiment-11
AIM: Write a JavaScript func on to insert a string within a string at a par cular
posi on.
Code:
let originalString = "Hello, world!"; let stringToInsert =

"beautiful "; let position = 7; function
insertString(originalString, stringToInsert, position) { if
(position > originalString.length) { return originalString +
stringToInsert;
} else { return (
originalString.slice(0, position) +
stringToInsert +
originalString.slice(position)
);
} } let newString = insertString(originalString, stringToInsert,
position);
console.log(newString);
Output:
Experiment-12
AIM: Write a JavaScript func on to check whether a given value is hexadecimal
value or not.
Code:
function isHexadecimal(num) { const
hexRegex = /^[0-9A-Fa-f]+$/g;
return hexRegex.test(num);
} let num1 =
"ABC123"; let num2 =
"123XYZ";
console.log(isHexadecimal(num1)); // true
console.log(isHexadecimal(num2)); //
false
Output:
Experiment-13
AIM: Write a JavaScript func on to convert a decimal number to binary,
hexadecimal or octal number.
Code:
const decimalToBinary = (decimalNum) => {
let binaryArr = []; while (decimalNum >
0) { binaryArr.unshift(decimalNum % 2);
decimalNum = Math.floor(decimalNum / 2);
} return
binaryArr.join("");
}; let decimalNum = 42;
console.log("Decimal:", decimalNum); let
binaryNum = decimalToBinary(decimalNum);
console.log("Binary:",
binaryNum);
const decimalToHexadecimal = (decimalNum) => {
let hexadecimalArr = []; let remainder; const
HEX_DIGITS = "0123456789ABCDEF"; while
(decimalNum > 0) { remainder = decimalNum %
16;
hexadecimalArr.unshift(HEX_DIGITS[remainder]);
}
return hexadecimalArr.join("");
}; let hexadecimalNum =
decimalToHexadecimal(decimalNum);
console.log("Hexadecimal:",
hexadecimalNum);
const decimalToOctal = (decimalNum) => {

let octalArr = []; while (decimalNum > 0)
{ octalArr.unshift(decimalNum % 8);
}
return octalArr.join("");
}; let octalNum =
decimalToOctal(decimalNum);
console.log("Octal:", octalNum);
Output:
Experiment-14
AIM: Write a merge sort program in JavaScript.
Code:
const sortArray = (nums) => { if (nums.length <

2) return nums; let mid =
Math.floor(nums.length / 2); let left =
nums.slice(0, mid); let right =
nums.slice(mid); return merge(sortArray(left),
sortArray(right));
}; const merge = (left, right) => {
let sortedArray = []; while
(left.length && right.length) { if
(left[0] <= right[0]) {
sortedArray.push(left.shift());
} else {
sortedArray.push(right.shift());
}
} return [...sortedArray, ...left,
...right];
}; const list
= [
79, 54, 37, 20, 66, 58, 91, 73, 50, 30, 17, 86, 12, 51, 39, 60, 80, 95, 6, 89,
];
const sortedArray = sortArray(list);
console.log("Unsorted list:", list); console.log("Sorted
list:", sortedArray);
Output:
Experiment-15
AIM: Write a JavaScript program to count number of words in string.
Note : -Remove white-space from start and end posi on. -Convert 2 or more spaces to
1. - Exclude newline with a start spacing.
Code:
const countWords = (str) => {
// Remove white-space from start and end position.
str = str.trim();
// Convert 2 or more spaces to 1.

str = str.replace(/ +(?= )/g, "");
// Exclude newline with a start spacing.

str = str.replace(/\n /g, "\n");
// Splitting string into array of words

let wordsArray = str.split(" ");
// Counting number of words let

wordCount = wordsArray.length;
return
wordCount;
}; console.log(" Hello
world");
console.log("words:", countWords(" Hello world"));
Output:

Web Tech File

Uploaded by

Copyright:

Available Formats

Web Tech File

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Tech File

Uploaded by

Copyright:

Available Formats

lO

lOMoAR cPSD| 49115863

in all screen resolution.

4. Write a HTML code to generate following output. Put validation 17-20

5. Create an html page containing the polynomial expression as 21-22

7. Write a JavaScript program to display a hidden div (e.g. showing 26-27

#header a:hover{ text-

<p>Delhi Technological University's <span class="bold">Computer Engineering

<p>DTU's Computer Engineering Department is equipped with modern facilities and

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a massa

table { border: 2px

<label for="confirm-password">Confirm Password:</label>

<label for="first-name">First Name:</label>

<label for="last-name">Last Name:</label>

<label for="phone-no">Phone Number:</label>

<script> function validateForm() { let password

<p>a<sub class="sub">0</sub> + a<sub class="sub">1</sub>x + a<sub

Output: Products are sorted based on their price

const swapCase = (str) => {

let originalString = "Hello, world!"; let stringToInsert =

const decimalToOctal = (decimalNum) => {

const sortArray = (nums) => { if (nums.length <

// Convert 2 or more spaces to 1.

// Exclude newline with a start spacing.

// Splitting string into array of words

// Counting number of words let

You might also like

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.