it practical file(21570006)
it practical file(21570006)
(CORE SUBJECT)
(DISCIPLINE SPECIFIC ELECTIVE)
PRACTICAL FILE
Submitted to:-
MRS. SWEETY KATARIA (Teacher In-charge)
-----------------------------------------------
PRACTICAL 1
Display your systems IP Address, Subnet mask using ipconfig, and find out the network
address and the maximum number of systems possible on your network and range of IP
addresses available to these systems.
//CODE
OUTPUT:
//CODE
header {
background-color: red;
color:yellow;
text-align: center;
padding: 20px;
}
h1 {
font-size: 24px;
}
section {
margin: 20px;
padding: 20px;
background-color: pink;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
h2 {
color: #007BFF;
}
p {
margin-bottom: 15px;
}
</style>
</head>
<body>
<header>
<h1>About Me</h1>
</header>
<section>
<h2>Personal Information</h2>
<p>Name: Kashish Madan</p>
<p>Course: BSC. (H) Computer Science</p>
<p>Address: New Delhi, India</p>
</section>
<section>
<h2>Hobbies</h2>
<p>I enjoy dancing,reading and drawing. Also, I am fond of music.</p>
</section>
<section>
<h2>My Plans</h2>
<p>I plan to complete my graduation and then pursue MSC.</p>
</section>
</body>
</html>
OUTPUT:
PRACTICAL 4
Create an HTML page with the sole purpose to show multiplication tables of 2
to 10 (row-wise) created by JavaScript. Initially, the page is blank. With help of
set Interval() function print a row every 5 seconds in different colours and
increasing font size.
//CODE
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min
.js"></script>
</head>
<body>
<h2>Multiplication Tables</h2>
<br /><br /><br />
<div id="result"></div>
<script>
var num1=2;
var num2=10;
var row=1;
var fontSize=100;
var interval;
const color = ["#FFC1CF", "#CD5C5C",
"E2A0FF","#E9967A","#40E0D0","#eaac8b","#b56576","#","#CCCCFF","#e8e8e4","#5a1
89a","#b1a7a6","#4361ee","#7209b7","#c4fff9","#1f7a8c","#f4845f","#eae0d5","#a
eb4a9","#a6808c"];
var table = document.createElement('table');
table.setAttribute('class', 'table table-hover');
if(row==1){
var tr = document.createElement('tr');
for(var num=num1;num<=num2;num++){
var td = document.createElement('td');
var textNode=document.createTextNode('Table of '+num);
td.appendChild(textNode);
tr.appendChild(td);
}
table.appendChild(tr);
document.body.appendChild(table);
}
interval=setInterval(multiplicationTable,1000);
function multiplicationTable() {
console.log(num1+" "+num2+" "+row);
var tr = document.createElement('tr');
for(num=num1;num<=num2;num++){
var td = document.createElement('td');
var textNode=document.createTextNode(num*row);
td.appendChild(textNode);
tr.appendChild(td);
tr.style.backgroundColor = color[row];
td.style.fontSize = fontSize+'%';
fontSize+=0.5;
}
table.appendChild(tr);
row++;
if(row>20){
console.log("row is"+row);
clearInterval(interval);
}
}
</script>
</body>
</html>
OUTPUT:
//CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Style Changer</title>
<style>
.button-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
button {
padding: 10px;
margin: 5px;
cursor: pointer;
}
#output-paragraph {
font-size: 18px;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<p id="output-paragraph">Create an HTML page with a paragraph written on
it and under which 9
buttons are placed in a
3X3 grid. The first row is for buttons labeled with colors names Red, Green,
and Blue, the
second row with numbers 10, 20, 30, and the third row with different font
names. Click event
of each of the buttons should make the appropriate change in the style of
paragraph.</p>
<div class="button-grid">
<button onclick="changeColor('red')">Red</button>
<button onclick="changeColor('green')">Green</button>
<button onclick="changeColor('blue')">Blue</button>
<button onclick="changeFontSize(10)">10</button>
<button onclick="changeFontSize(20)">20</button>
<button onclick="changeFontSize(30)">30</button>
<button onclick="changeFontFamily('Arial, sans-serif')">Arial</button>
<button onclick="changeFontFamily('Times New Roman, serif')">Times New
Roman</button>
<button onclick="changeFontFamily('Courier New, monospace')">Courier
New</button>
</div>
<script>
const outputParagraph = document.getElementById("output-paragraph");
function changeColor(color) {
outputParagraph.style.color = color;
}
function changeFontSize(fontSize) {
outputParagraph.style.fontSize = `${fontSize}px`;
}
function changeFontFamily(fontFamily) {
outputParagraph.style.fontFamily = fontFamily;
}
</script>
</body>
</html>
OUTPUT:
BUTTON COLOUR CHANGE
FONT SIZE CHANGES
//CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Pet Information Form</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: plum;
margin: 0;
padding: 0;
}
h1 {
text-align: center;
color: red;
}
form {
max-width: 400px;
margin: 0 auto;
background-color: yellow;
border: 1px solid grey;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
padding: 20px;
}
label {
display: block;
margin-top: 10px;
}
input[type="text"] {
width: 100%;
padding: 10px;
margin-top: 5px;
}
input[type="submit"] {
background-color: green;
color: #fff;
padding: 10px 20px;
border: none;
cursor: pointer;
margin-top: 10px;
}
input[type="submit"]:hover {
background-color: antiquewhite;
}
</style>
</head>
<body>
<h1>Pet Information Form</h1>
<form id="pet-form">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="age">Age:</label>
<input type="text" id="age" name="age" required>
<label for="weight">Weight:</label>
<input type="text" id="weight" name="weight" required>
<label for="type">Type:</label>
<input type="text" id="type" name="type" required>
<script>
const petForm = document.getElementById("pet-form");
const pet = {
name,
age,
weight,
type,
likes
};
OUTPUT:
PRACTICAL 7
Store JSON data of few pets that you created in previous practical in a JSON
file (copy from console output of previous program to a .json file). Using
AJAX, load data from the file and display it in a presentable way using HTML
and CSS.
//CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pets Information</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
.container {
width: 60%;
margin: 0 auto;
}
h1 {
font-size: 24px;
color: #333;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ccc;
padding: 10px;
}
th {
background-color: #4CAF50;
color: white;
}
</style>
</head>
<body>
<div class="container">
<h1>Pets Information</h1>
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>Weight (lbs)</th>
<th>Type</th>
<th>Likes</th>
</tr>
<tbody id="petTable"></tbody>
</table>
</div>
<script>
// Load and display pet data from JSON file
const petTable = document.getElementById('petTable');
Pets .json
[
{
"name": "Fluffy",
"age": 4,
"weight": 456,
"type": "dog",
"likes": "food"
}
]
OUTPUT:
PRACTICAL 8
Create a plain HTML page for B.Sc. Hons CS course, mentioning details like fee, eligibility
criteria, papers with names and credits, and future possibilities after the course. A button for
styling should be there at bottom of the page. On clicking on this button JavaScript should
redesign the complete page using jQuery in a nice presentable way.
//CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>B.Sc. Hons Computer Science</title>
<style>
/* Default styles for the initial HTML */
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
font-family: Arial, sans-serif;
background-color: whitesmoke;
}
.button {
padding: 10px 20px;
background-color: yellowgreen;
color: white;
border: none;
border-radius: 10px;
cursor: pointer;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<h1>Bachelor of Science (Hons) in Computer Science</h1>
<h2>Details:</h2>
<p><strong>overview:</strong>The Bsc in cs is a bachelor's degree that
teaches the student about computer programming,development,maintenance and
more.This degree teaches student to view computers as a science and takes them
deep
into all the aspects involved in computer systems.Computer science
is the subject for students who have a deep love and understanding of
computers.<br>
however,it;s important to know about a course before you decide to
enroll.In the following
article,you will find information like
eligbility,syllabus,fee,careers,jobs and
more that will help you realise the potential of the B.sc in
computer science degree course.
</p>
<p><strong>Fee:</strong> Rs. 30030.The B.Sc in CS is an important
degree course that also includes a lot of practical work.
The fee range for this course is high because it is being
provided by government-run institutes and private institutes as
well. Hence,the wide range. Currenttly,the fee for B.sc in computer science
degree course range from INR 1lahks to
INR 7lakhs. </p>
<p><strong>Eligibility Criteria:</strong> Aspirants seeking admission
into this course should have 10+2 from a recognized board/university.in which
pcm marks will be calculated with one more subject
<h2>Kalindi College UG Selection Criteria</h2>
<li>Admission will be based on the marks secured in the qualifying
examination.</li>
<li>Cut-off marks will be uploaded on the website of the college
(http://kalindi.du.ac.in).</li>
<li>Eligible candidates should have to present themselves for admission along
with required documents.</li>
<li>Document verification and online payment of programme fee will confirm
admission.</li>
</p>
<div id="div1">
<h2><b>Paper name with Credits</b></h2>
<h3>First SEM</h3>
<table id="t1" border="1px solid black" style="text-
align:center;position:relative">
<tr>
<th>Paper</th>
<th>Credits</th>
</tr>
<tr>
<td>CSA</td>
<td>10.00</td>
</tr>
<tr>
<td>C++</td>
<td>10.00</td>
</tr>
<tr>
<td>AECC-English</td>
<td>8.00</td>
</tr>
<tr>
<td>GE-1</td>
<td>9.00</td>
</tr>
</table>
<h3>Second SEM</h3>
<table id="t2" border="1px solid black" style="text-
align:center;position:relative">
<tr>
<th>Paper</th>
<th>Credits</th>
</tr>
<tr>
<td>Discrete Structure</td>
<td>9.00</td>
</tr>
<tr>
<td>Java </td>
<td>8.00</td>
</tr>
<tr>
<td>Environmental Studies</td>
<td>10.00</td>
</tr>
<tr>
<td>GE-2</td>
<td>9.00</td>
</tr>
</table>
<h3>Third SEM</h3>
<table id="t3" border="1px solid black" style="text-
align:center;position:relative">
<tr>
<th>Paper</th>
<th>Credits</th>
</tr>
<tr>
<td>Data Structure</td>
<td>9.00</td>
</tr>
<tr>
<td>Computer Networking</td>
<td>9.00</td>
</tr>
<tr>
<td>Operating System</td>
<td>9.00</td>
</tr>
<tr>
<td>Web design and development</td>
<td>10.00</td>
</tr>
<tr>
<td>GE-3</td>
<td>7.00</td>
</tr>
</table>
<h3>Fourth SEM</h3>
<table id="t4" border="1px solid black" style="text-
align:center;position:relative">
<tr>
<th>Paper</th>
<th>Credits</th>
</tr>
<tr>
<td>Design and Analysis of algorithm</td>
<td>9.00</td>
</tr>
<tr>
<td>Software Engineering</td>
<td>10.00</td>
</tr>
<tr>
<td>DBMS</td>
<td>10.00</td>
</tr>
<tr>
<td>Android Programming</td>
<td>10.00</td>
</tr>
<tr>
<td>GE-4</td>
<td>9.00</td>
</tr>
</table>
<h3>Fifth SEM</h3>
<table id="t5" border="1px solid black" style="text-
align:center;position:relative">
<tr>
<th>Paper</th>
<th>Credits</th>
</tr>
<tr>
<td>Internet Technology</td>
<td>10.00</td>
</tr>
<tr>
<td>Theory of computation</td>
<td>10.00</td>
</tr>
<tr>
<td>Micropricessor</td>
<td>10.00</td>
</tr>
<tr>
<td>Data Analysis and Visualization</td>
<td>10.00</td>
</tr>
</table>
<h3>Sixth SEM</h3>
<table id="t6" border="1px solid black" style="text-
align:center;position:relative">
<tr>
<th>Paper</th>
<th>Credits</th>
</tr>
<tr>
<td>Artificial Intelligence</td>
<td>10.00</td>
</tr>
<tr>
<td>Computer Graphics</td>
<td>9.00</td>
</tr>
<tr>
<td>Machine Language</td>
<td>10.00</td>
</tr>
<tr>
<td>Data Mining</td>
<td>10.00</td>
</tr>
</table>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$('#styleButton').on('click', function() {
// jQuery code to restyle the page
$('.container').css({
'max-width': '120%',
'margin': '20px auto',
'padding': '30px',
'background-color': 'teal',
'border': '10px solid #ccc',
'border-radius': '10px'
});
$('h1, h2, p').css('color', '#333');
$('button').css({
'background-color': 'teal',
'color': 'orange',
'margin-top': '40px'
});
});
</script>
</body>
</html>
OUTPUT:
BUTTON TO CHANGE THE STYLE OF PAGE
PRACTICAL 9
Create an HTML page for an image gallery which shows the use of
BOOTSTRAP to rearrange and resize its contents on resizing the browser.
//CODE
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></scrip
t >
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></sc
ript>
</head >
<body style="background-color: rgba(33, 215, 251, 0.875);">
<div class="container">
<b><h1 style="text-align:center; font-family: 'Times New Roman', Times, serif;
color: brown;">Image Gallery</h1></b>
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<a href="C:\Users\Kashish\Desktop\bsc hons cs\cs sem 5\sunflower.jpg"
target="_blank">
<img src="C:\Users\Kashish\Desktop\bsc hons cs\cs sem 5\sunflower.jpg"
alt="Lights" style="width:100%">
<div class="caption">
<p>flower 1</p>
</div>
</a>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<a href="C:\Users\Kashish\Desktop\bsc hons cs\cs sem
5\image3.webp" target="_blank">
<img src="C:\Users\Kashish\Desktop\bsc hons cs\cs sem
5\image3.webp" alt="Nature" style="width:100%; height: 270px;">
<div class="caption">
<p>flower 2</p>
</div>
</a>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<a href="C:\Users\Kashish\Desktop\bsc hons cs\cs sem 5\lotus.jpg"
target="_blank">
<img src="C:\Users\Kashish\Desktop\bsc hons cs\cs sem 5\lotus.jpg"
alt="Fjords" style="width:100%">
<div class="caption">
<p>flower 3</p>
</div>
</a>
</div>
</div>
</div>
</div>
</body>
</html >
OUTPUT:
On clicking the image link, images get resized
//CODE
const http = require('http');
{port}/`);
});
OUTPUT:
PRACTICAL 11
Create index.html file containing two forms for SignIn and SignUp.
Submitting SignIn form should search for credentials in mysql database
using server created in previous practical. On successful signin, a welcome
page should be displayed. Submitting SignUp form should insert new entry
for credentials in mysql database using server created in previous practical.
On successful signup, user should be returned back to index.html.
-----------------------------------------------------------------------------------------