Week 3 and Week 4

Department of Computer Science
A.M.U. Aligarh
Session 2021-22
Week 3
&
Week 4
CSM – 3371
Lab Course – III
Submitted by
Name: Sarim
Hussain
Enroll no.: GI -
4145
Week #3
Q 1# Create a table to show your class time table.
• Use tables to provide layout to your HTML page describing your college
infrastructure.
• Use <span> and <div> tags to provide a layout to the above page instead of
a table layout.
Solution:
Code (Part A):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Question 1 | Time Table</title>
<style>
*{
text-align: center;
}
th {
min-width: 160px;
}
</style>
</head>
<body>
<h1>MCA 3rd Sem Time Table</h1>
<table border="1px">
<tr>
<th><sub>Day</sub>\<sup>Period</sup></th>
<th>II</th>
<th>III</th>
<th>IV</th>
<th>V</th>
<th>VI</th>
<th>VII</th>
<th>VIII</th>
</tr>
<tr>
<td>Monday</td>
<td>-----</td>
<td colspan="2">Networking</td>
<td>Microprocessor</td>
<td>OS</td>
<td>-----</td>
<td>-----</td>
</tr>
<tr>
<td>Tuesday</td>
<td>-----</td>
<td colspan="2">Networking</td>
<td colspan="2">Software Engineering</td>
<td>-----</td>
<td>-----</td>
</tr>
<tr>
<td>Wednesday</td>
<td>-----</td>
<td>OS</td>
<td>Microprocessor</td>
<td colspan="2">Lab</td>
<td colspan="2">Web based prog.</td>
</tr>
<tr>
<td>Thursday</td>
<td>-----</td>
<td>-----</td>
<td>Discrete Maths</td>
<td colspan="2">Software Engg.</td>
<td colspan="2">Web based prog.</td>
</tr>
<tr>
<td>Friday</td>
<td>-----</td>
<td>Discrete Maths</td>
<td>OS</td>
<td>-----</td>
<td>-----</td>
</tr>
<tr>
<td>Saturday</td>
<td>OS</td>
<td>-----</td>
<td>-----</td>
<td>-----</td>
<td>-----</td>
</tr>
</table>
</body>
</html>
Output (Part A):
Code (Part B):

<!DOCTYPE html>
<html lang="en">
<head>
<title>Question 1 Part B</title>
<style>
.main-div{
border: 1px solid black;
}
.main-div div{
border: 1px solid black;
height: 30px;
}
.main-div div span{
display: inline-block;
min-width: 164px;
font-size: larger;
}
</style>
</head>
<body>
<h1>MCA 3rd Sem Time Table</h1>
<div class="main-div" border>
<div>
<span><sub>Day</sub>\<sup>Period</sup></span>
<span>II</span>
<span>III</span>
<span>IV</span>
<span>V</span>
<span>VI</span>
<span>VII</span>
<span>VIII</span>
</div>
<div>
<span>Monday</span>
<span>-----</span>
<span colspan="2">Networking</span>
<span>Microprocessor</span>
<span>OS</span>
<span>-----</span>
<span>-----</span>
</div>
<div>
<span>Tuesday</span>
<span>-----</span>
<span colspan="2">Networking</span>
<span colspan="2">Software Engg.</span>
<span>-----</span>
<span>-----</span>
</div>
<div>
<span>Wednesday</span>
<span>-----</span>
<span>OS</span>
<span>Microprocessor</span>
<span colspan="2">Lab</span>
<span colspan="2">Web based prog.</span>
</div>
<div>
<span>Thursday</span>
<span>-----</span>
<span>-----</span>
<span>Discrete Maths</span>
<span colspan="2">Software Engg.</span>
<span colspan="2">Web based prog.</span>
</div>
<div>
<span>Friday</span>
<span>-----</span>
<span>Discrete Maths</span>
<span>OS</span>
<span>-----</span>
<span>-----</span>
</div>
<div>
<span>Saturday</span>
<span>OS</span>
<span>-----</span>
<span>-----</span>
<span>-----</span>
<span>-----</span>
</div>
</div>
</body>
</html>
Output (Part B):
Q 2# Use frames such that page is divided into 3 frames 20% on left to show
contents of pages, 60% in center to show body of page, remaining on right to
show remarks. Embed Audio and Video into your HTML web page.
Solution:
Code:
<html>
<head>
<title>Document1</title>
</head>
<body bgcolor="aqua">
<h1>Contents</h1>
<p><br>Embed Audio</br>
<br>Embed Video</br>
</body>
</html>
<html>
<head>
<style>h1{
text-align: center;
}
</style>
</head>
<body bgcolor="Fuchsia">
<h1><style>{text-align: center; }</style>Audio and Video</h1>
<br><audio src="C:\Users\Downloads\amutarana.mp3" controls></audio>
<br>This is Audio file</br>
<br><video width="600" controls>
<source src="C:\Users\Downloads\AMU Tarana _ Aligarh Muslim University
_ Official Video _ AMUDMC.mp4" type="video/mp4">
<source src="C:\Users\Downloads\AMU Tarana _ Aligarh Muslim University
_ Official Video _ AMUDMC.mp4" type="video/ogg">
</video></br>
<br>This is video file</br>
</body>
</html>
<html>
<head>
</head>
<body bgcolor="LightPink">
<h1>Remarks</h1>
</body>
</html>
<html>
<head>
<title>Frame</title>
</head>
<frameset cols="20%,60%,20%">
<frame src="Document1.html">
</frameset>
</html>
Output:
Q 3# Create a webpage with HTML describing your department use paragraph

and list tags.
• Apply various colours to suitably distinguish key words, also apply font
styling like italics, underline and two other fonts to words you find
appropriate, also use header tags.
• Create links on the words e.g. ―Wi-Fi and ―LAN to link them to Wikipedia
pages.
• Insert an image and create a link such that clicking on image takes user to
other page.
• Change the background colour of the page; At the bottom create a link to
take user to the top of the page.
Solution:
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Week 3 | Ques 3</title>
<style>
p{
font-family: "Courier New", Courier, monospace;
}
body {
background-color: lightgreen;
}
</style>
</head>
<body>
<header>
<div id="top"></div>
<h1><u> Department Of Computer Science</u></h1>
<i> <h3>Aligarh Muslim University, Aligarh</h3></i>
</header>
<p>
The Department of Computer Science, AMU is one of the oldest and
pioneer
departments of Computer Science and Information Technology in India. The
Department is one of the growing departments of computer science in India,
which has been witnessed by various reputed ranking agencies such as
Times
Higher, India today, NIRF etc. It came into the existence in the year 1971
with the installation of IBM1130 Computing System, under the umbrella of
Computer Centre and later blossomed into an independent department
known
as "Department of Computer Science" in the year 1988. In the year 1980,
VAX11/780 system was purchased from DEC (USA) and installed at the
centre,
which is one of the first computer systems in India. The approval of two
new programmes, a three year Master of Computer Science and
Applications
(MCA) and one year Post Graduate Diploma in Computer Science
Applications
(PGDCA) by the standing committee of the UGC in the year 1982 and the
formal introduction of these courses from the session 1983-84, were one of
the major landmarks in the development of Computer Science department.
</p>
The Department offers various programmes like
<ul>
<li>Ph.D.</li>
<li>M.C.A</li>
<li>M.Sc. in (Cyber Security & Digital Forensics)</li>
<li>B.Sc. (Hons.) Computer Applications</li>
<li>P.G.E.D.P.</li>
<li>P.G.D.C.P.</li>
</ul>
<p>
The Department also is fully equipped with
<a href="https://en.wikipedia.org/wiki/Wi-Fi">WiFi</a> and
<a href="https://en.wikipedia.org/wiki/Local_area_network">LAN</a> for
the
students.
</p>
<a href="https://www.amu.ac.in/department/computer-science">
<img src="./compSciDept.jpg" alt="Comp Sci Dept Img" />
</a>
<br />
<br />
<a href="#top">Go To Top</a>
</body>
</html>
Output:
Week #4
Q 1# Develop static pages (using only HTML) of an online book store, the
pages should resemble: www.amazon.com, the website should consist the
following pages, home page, registration and user login, user profile page,
books catalogue, shopping cart, payment by credit card, order confirmation.
Solution:
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home Page | Week 4 | Question 1</title>
</head>
<body>
<h1>Online Book Store</h1>
<header>
<nav>
<ul>
<li><a href="#">Home Page</a></li>
<li>
<a href="./Q1Reg and UserLogin.html">Registration / User Login</a>
</li>
<li><a href="./Q1UserProfile.html">User Profile</a></li>
<li><a href="./Q1BooksCatalog.html">Books Catalog</a></li>
<li><a href="./Q1ShoppingCart.html">Shopping Cart</a></li>
<li><a href="./PaymentByCard.html">Payment</a></li>
<li><a href="./Q1OrderConfirmation.html">Order
Confirmation</a></li>
</ul>
</nav>
</header>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Registration and User Login</title>
</head>
<body>
<h1>Welcome to the Registration / User Login Page</h1>
<form action="submit">
E - Mail : <input type="email" />
<br />
<br />
Password: <input type="password" />
<br />
<br />
<button>Sign Up / Login</button>
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Books Catalog</title>
</head>
<body>
<h1>Books Catalog</h1>
<h2>We have many different types of books to choose from:</h2>
<ul>
<li>In Search of Lost Time by Marcel Proust ·</li>
<li>Ulysses by James Joyce ·</li>
<li>Don Quixote by Miguel de Cervantes</li>
<li>One Hundred Years of Solitude by Gabriel Garcia Marquez</li>
<li>The Great Gatsby by F. Scott Fitzgerald</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Order Confirmation</title>
</head>
<body>
<h1>Your Order has been confirmed!</h1>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Shopping Cart</title>
</head>
<body>
<img
src="data:image/png”
alt=""
/>
<h1><i>Your cart is empty</i></h1>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>User Profile Page</title>
</head>
<body>
<img src="https://cdn.pixabay.com/photo/2020/07/01/12/58/icon-
5359553_1280.png" alt="User Image" width="150px">
<h1>Welcome User</h1>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Payment By Credit Card</title>
</head>
<body>
<h1>Welcome to the payment gateway</h1>
<form action="submit">
Card Number: <input type="number">
<br> <br>
C V V: <input type="password">
<br> <br>
O T P: <input type="password">
<br> <br>
<button>Pay</button>
</form>
</body>
</html>
Output:
Q 2# Write an HTML page that contains a selection box with a list of 5
countries, when the user selects a country, its capital should be printed next to
the list; Add CSS to customize the properties of the font of the capital (color,
bold and font size).
Solution:
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Week 2 | Question 2</title>
<style>
body {
font-size: 1.5rem;
}
select {
font-size: 16px;
padding: 5px;
}
#capital {
color: red;
font-weight: bold;
font-size: 32px;
}
</style>
</head>
<body>
<h4>Week 4, Question 2</h4>
<label for="country">Choose a country:</label>
<select name="country" id="selectBox">
<option value="New Delhi">India</option>
<option value="Kabul">Afghanistan</option>
<option value="Budapest">Hungary</option>
<option value="Riyadh">Saudi Arabia</option>
<option value="Abu Dhabi">United Arab Emirates</option>
</select>
<br />
<br />
<button id="button">Get Capital</button>
<br />
<br />
Capital is: <span id="capital">New Delhi</span>
</body>
<script>
const btn = document.getElementById("button");
// const btn = window;
btn.addEventListener("click", () => {
const select = document.getElementById("selectBox");
const capital = document.getElementById("capital");
capital.innerText = select.options[select.selectedIndex].value;
});
</script>
</html>
Output:
Q 3# Write a java script program to test the first character of a string is
uppercase or not. Write a pattern that matches e-mail addresses.
Solution:
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
h3 {
background-color: aqua;
}
</style>
</head>
<body>
Enter a String to check for First Character:
<input type="text" id="input" />
<br />
<br />
<button id="btn">Check for First Character</button>
<br />
<br />
<div id="result"></div>
<br />
<br />
Enter an e-mail address to check: <input type="text" id="input2" />
<br />
<br />
<button id="btn2">Validate E-Mail</button>
<br />
<br />
<div id="result2"></div>
</body>
<script>
const input = document.getElementById("input");
const result = document.getElementById("result");
const btn = document.getElementById("btn");
btn.addEventListener("click", () => {
const inputValue = input.value;
const firstChar = inputValue.charAt(0);
if (firstChar == firstChar.toLowerCase()) {
result.innerText = "First Character is Lower Case";
} else {
result.innerText = "First Character is Upper Case";
}
});
const btn2 = document.getElementById("btn2");

const res2 = document.getElementById("result2");
btn2.addEventListener("click", () => {
const emailInput = document.getElementById("input2").value;
if (emailInput.includes("@") && emailInput.includes(".")) {
res2.innerText = "Valid Email";
} else {
res2.innerText = "Email Not Valid";
}
});
</script>
</html>
Output:
Q 4# Write a java script program which compute, the average marks of the
following students then this average is used to determine the corresponding
grade.
Solution:
Code:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
Enter Marks of Subject 1: <input id="sub1" type="number" /><br /><br />
<button id="computeButton">Compute</button>
<h3>
Your average marks are: <span id="average-marks"></span>
<br />
Your grade is: <span id="grade"></span>
</h3>
</body>
<script>
const computeButton = document.getElementById("computeButton");
computeButton.addEventListener("click", () => {
const marksSub1 = parseInt(document.getElementById("sub1").value);
const total = marksSub1 + marksSub2 + marksSub3 + marksSub4 +

marksSub5;
console.log(total);
const avg = total / 5;
const avgMarks = document.getElementById("average-marks");

avgMarks.innerText = avg;
const grade = document.getElementById("grade");

if (avg >= 90) grade.innerText = "A+";
else if (avg >= 80) grade.innerText = "A";
else if (avg >= 70) grade.innerText = "B";
else if (avg >= 60) grade.innerText = "C";
else if (avg >= 50) grade.innerText = "D";
else if (avg >= 40) grade.innerText = "E";
else grade.innerText = "F";
});
</script>
</html>
Output:
Q 5# To design the scientific calculator and make event for each button using
java script.
Solution:
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Scientific Calculator using HTML, CSS and Js</title>
<style>
*{
font-size: 24px;
}
</style>
<script>
function backspace(calc) {
size = calc.display.value.length;
calc.display.value = calc.display.value.substring(0, size - 1);
}
function calculate(calc) {
if (calc.display.value.includes("!")) {
n = Number(calc.display.value.substring(0, size - 1));
f = 1;
for (i = 2; i <= n; i++) f = f * i;
calc.display.value = f;
} else if (calc.display.value.includes("%")) {
n = Number(calc.display.value.substring(0, size - 1));
calc.display.value = n / 100;
} else {
calc.display.value = eval(calc.display.value);
}
}
</script>
</head>
<body>
<div class="title">Scientific Calculator</div>
<form name="calc">
<table id="calc" border="2">
<tr>
<td colspan="5">
<input
id="btn"
name="display"
onkeypress="return event.charCode >= 48
&& event.charCode <= 57"
type="text"
/>
</td>
</tr>
<tr>
<td>
<input
id="btn"
type="button"
value="1"
OnClick="calc.display.value+='1'"
/>
</td>
<td>
<input
id="btn"
type="button"
value="2"
/>
</td>
<td>
<input
id="btn"
type="button"
value="3"
/>
</td>
<td>
<input
id="btn"
type="button"
value="C"
OnClick="calc.display.value=''"
/>
</td>
<td>
<input
id="btn"
type="button"
value="<-"
OnClick="backspace(this.form)"
/>
</td>
<td>
<input
id="btn"
type="button"
value="="
OnClick="calculate(this.form)"
/>
</td>
</tr>
<tr>
<td>
<input
id="btn"
type="button"
value="4"
/>
</td>
<td>
<input
id="btn"
type="button"
value="5"
/>
</td>
<td>
<input
id="btn"
type="button"
value="6"
/>
</td>
<td>
<input
id="btn"
type="button"
value="-"
OnClick="calc.display.value='-'"
/>
</td>
<td>
<input
id="btn"
type="button"
value="%"
OnClick="calc.display.value+='%'"
/>
</td>
<td>
<input
id="btn"
type="button"
value="cos"
OnClick="calc.display.value='Math.cos('"
/>
</td>
</tr>
<tr>
<td>
<input
id="btn"
type="button"
value="7"
/>
</td>
<td>
<input
id="btn"
type="button"
value="8"
/>
</td>
<td>
<input
id="btn"
type="button"
value="9"
/>
</td>
<td>
<input
id="btn"
type="button"
value="*"
OnClick="calc.display.value+='*'"
/>
</td>
<td>
<input
id="btn"
type="button"
value="n!"
OnClick="calc.display.value+='!'"
/>
</td>
<td>
<input
id="btn"
type="button"
value="sin"
OnClick="calc.display.value='Math.sin('"
/>
</td>
</tr>
<tr>
<td>
<input
id="btn"
type="button"
value="."
OnClick="calc.display.value+='.'"
/>
</td>
<td>
<input
id="btn"
type="button"
value="0"
/>
</td>
<td>
<input
id="btn"
type="button"
value=","
OnClick="calc.display.value+=','"
/>
</td>
<td>
<input
id="btn"
type="button"
value="+"
OnClick="calc.display.value+='+'"
/>
</td>
<td>
<input
id="btn"
type="button"
value="/"
OnClick="calc.display.value+='/'"
/>
</td>
<td>
<input
id="btn"
type="button"
value="tan"
OnClick="calc.display.value='Math.tan('"
/>
</td>
</tr>
<tr>
<td>
<input
id="btn"
type="button"
value="E"
OnClick="calc.display.value+='Math.E'"
/>
</td>
<td>
<input
id="btn"
type="button"
value="pi"
OnClick="calc.display.value+='Math.PI'"
/>
</td>
<td>
<input
id="btn"
type="button"
value="^"
OnClick="calc.display.value+='Math.pow('"
/>
</td>
<td>
<input
id="btn"
type="button"
value="("
OnClick="calc.display.value+='('"
/>
</td>
<td>
<input
id="btn"
type="button"
value=")"
OnClick="calc.display.value+=')'"
/>
</td>
<td>
<input
id="btn"
type="button"
value="log"
OnClick="calc.display.value='Math.log('"
/>
</td>
</tr>
<tr>
<td>
<input
id="btn"
type="button"
value="sqrt"
OnClick="calc.display.value+='Math.sqrt('"
/>
</td>
<td>
<input
id="btn"
type="button"
value="ln2"
OnClick="calc.display.value+='Math.LN2'"
/>
</td>
<td>
<input
id="btn"
type="button"
value="ln10"
OnClick="calc.display.value+='Math.Log10'"
/>
</td>
<td>
<input
id="btn"
type="button"
value="l2e"
OnClick="calc.display.value+='Math.LOG2E'"
/>
</td>
<td>
<input
id="btn"
type="button"
value="l10e"
OnClick="calc.display.value+='Math.log10'"
/>
</td>
<td>
<input
id="btn"
type="button"
value="exp"
OnClick="calc.display.value='Math.exp('"
/>
</td>
</tr>
</table>
</form>
</body>
</html>
Output:

Week 3 and Week 4

Uploaded by

Document Information

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

Week 3 and Week 4

Uploaded by

Copyright:

Available Formats

Department of Computer Science

Code (Part B):

Q 3# Create a webpage with HTML describing your department use paragraph

const btn2 = document.getElementById("btn2");

const total = marksSub1 + marksSub2 + marksSub3 + marksSub4 +

const avgMarks = document.getElementById("average-marks");

const grade = document.getElementById("grade");

You might also like