IT Notes

1|Page
Name :- Sahil Dattatray Kshirsagar
Roll no :- 10877
Course :- BSc (hons) computer science
Semester :- V-B
Subject :- IT Practical File
Practical list questions Page number

Question 1 2
Question 2 2
Question 3 4
Question 4 9
Question 5 13
Question 6 16
Question 7 20
Question 8 24
Question 9 26
Question 10 30
Question 11 31
Extra questions
Question 1 41
Question 2 43
Question 3 45
Question 4 50
Question 5 52
Question 6 56
Question 7 57
Question 8 61
Question 9 62
Question 10 63
2|Page
Practical list questions

Question 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.
Question 2. With help of ping, check if you are connected to other systems of your network
and find the route to connect to that system using tracert. List all the processes which are
using ports for TCP protocol.
Output and code ss
3|Page
4|Page
Question 3 Create an HTML page that shows information about you, your course, hobbies,
address, and your plans. Use CSS for styling of HTML page so that looks nice.
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<article class="card">
<div class="thumb1"></div>
<div class="infos">
<h2 class="title">prashant mishra <span class="flag"></span></h2>
<h3 class="date">Bsc hons computer science</h3>
<h3 class="seats">footbaal badminton coding</h3>
<p class="txt">
5|Page
a/56 indra puri colony<br>

rajabazar bailey road <br>
patna
</p>
<h3 class="details">paeceful life</h3>
</div>
</article>
<article class="card">
<div class="thumb2"></div>
<div class="infos">
<h2 class="title">sahil kshirsagar<span class="flag"></span></h2>
<h3 class="date">Bsc hons computer science</h3>
<h3 class="seats">sports vc singing</h3>
<p class="txt">
Bandra West,<br>
Mumbai - Western Mumbai,<br>
Maharashtra
</p>
<h3 class="details">adventour</h3>
</div>
</article>
</div>
</body>
</html>
Style.css
*{
box-sizing: border-box;
}
html, body {
font-size: 100%;
}
body {
padding: 0;
margin: 0;
background: #9945b5;
background: url("bk23.jpg");
}
.container{
display: flex;
flex-direction: row;
6|Page
flex-wrap: wrap;
justify-content: space-evenly;
align-items: center;
}
article.card {
width: 350px;
height: 350px;
margin: 50px;
border-radius: 3px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
overflow: hidden;
}
article.card .thumb1 {
width: auto;
height: 260px;
background: url("pb.jpg") no-repeat center;
background-size: cover;
border-radius: 3px;
}
article.card .thumb2 {
width: auto;
height: 260px;
background: url("sb.jpg") no-repeat center;
border-radius: 3px;
}
article.card .infos {
width: auto;
height: 350px;
position: relative;
padding: 14px 24px;
background: #000000;
transition: 0.4s 0.15s cubic-bezier(0.17, 0.67, 0.5, 1.03);
}
article.card .infos .title {
position: relative;
margin: 10px 0;
letter-spacing: 3px;
color: #ffffff;
font-family: "Grotesque Black", sans-serif;
font-size: 1rem;
text-transform: uppercase;
text-shadow: 0 0 0px #afbcca;
}
7|Page
article.card .infos .flag {

position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
width: 45px;
height: 30px;
background: url("Screenshot\ $69$.png") no-repeat top right;
background-size: 100% auto;
display: inline-block;
}
article.card .infos .date, article.card .infos .seats {
margin-bottom: 10px;
font-size: 0.85rem;
color: rgba(255, 255, 255, 0.7);
font-family: "Grotesque", sans-serif;
}
article.card .infos .seats {
display: inline-block;
padding-bottom: 24px;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
opacity: 0;
}
article.card .infos .txt {
font-family: "Merriweather", sans-serif;
line-height: 2;
font-size: 0.95rem;
color: rgba(246, 249, 253, 0.7);
opacity: 0;
}
article.card .infos .details {
position: absolute;
left: 0;
left: 0;
bottom: 0;
margin: 10px 0;
padding: 20px 24px;
color: rgb(0, 0, 0);
text-shadow: 6px solid black;
font-family: "Grotesque Black", sans-serif;
font-size: 0.9rem;
8|Page
cursor: pointer;
opacity: 0;
}
article.card:hover .infos {
transform: translateY(-260px);
background: transparent;
color: #090808;
}
article.card:hover .thumb1{
}
article.card:hover .thumb2{
}
article.card:hover .infos .seats, article.card:hover .infos .txt, article.card:hover .infos
.details {
opacity: 1;
color: black;
}
article.card:hover .infos .date{
color: black;
}
article.card:hover .infos .title{
color: black;
}
Output ss
9|Page
question 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 setInterval
function print a row every 5 seconds in different colors and increasing font size.
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Multiplication Tables</title>
10 | P a g e
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<style>
.multiplication-table {
margin: 10px;
transition: font-size 0.5s, background-color 0.5s;
}
.multiplication-table th, .multiplication-table td {

border: 1px solid #dddddd;
text-align: center;
padding: 10px;
width: 40px;
}
</style>
</head>
<body>
<div id="multiplicationTablesContainer"></div>
<script>
function generateRandomColor() {
const letters = '0123456789ABCDEF';
let color = '#';
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
function generateMultiplicationTable(factor, columns, fontSize, bgColor) {

let tableHtml = `<table class="multiplication-table" style="font-size: ${fontSize}px;
background-color:
${bgColor};"><tr><th></th></tr><tr><th></th></tr><tr><th></th></tr><tr><th></th></tr><
tr><th></th></tr><tr><th></th></tr><tr><th></th></tr><tr><th></th></tr><tr><th></th></
tr><tr><th></th></tr>`;
for (let i = 1; i <= 10; i++) {
tableHtml += `<tr><td>${factor} x ${i} = ${factor * i}</td></tr>`;
}
tableHtml += `</table>`;
return tableHtml;
}
const totalTables = 10;

let currentTable = 2;
let fontSize = 16; // Initial font size
function displayNextTable() {
11 | P a g e
if (currentTable > totalTables) {

clearInterval(intervalId); // Stop the interval when all tables are displayed
} else {
const bgColor = generateRandomColor();
const tableHtml = generateMultiplicationTable(currentTable, 10, fontSize, bgColor);
$('#multiplicationTablesContainer').append(tableHtml);
currentTable++;
fontSize += 2; // Increase font size for the next table
}
}
// Set interval to append tables every 5000 milliseconds (5 seconds)

const intervalId = setInterval(displayNextTable, 5000);
</script>
</body>
</html>
Output ss
12 | P a g e
13 | P a g e
Question 5. 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.
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Button Grid</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
#button-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-top: 20px;
}
.button {
14 | P a g e
padding: 10px 20px;

font-size: 16px;
background-color: #3498db;
color: #fff;
border: none;
cursor: pointer;
}
/* Add initial styles for the paragraph */

#paragraph {
color: black; /* Default color */
font-size: 16px; /* Default font size */
font-family: Arial, sans-serif; /* Default font family */
}
</style>
</head>
<body>
<h1>Button Grid Example</h1>

<p id="paragraph">Lorem ipsum dolor sit amet consectetur adipisicing elit...</p>
<div id="button-grid">
<button class="button" onclick="changeColor('red')">Red</button>
<button class="button" onclick="changeColor('green')">Green</button>
<button class="button" onclick="changeColor('blue')">Blue</button>
<button class="button" onclick="changeFontSize(10)">10</button>
<button class="button" onclick="changeFont('Arial')">Arial</button>
<button class="button" onclick="changeFont('Times New Roman')">Times New
Roman</button>
<button class="button" onclick="changeFont('Courier New')">Courier New</button>
</div>
<script>
function changeColor(color) {
document.getElementById('paragraph').style.color = color;
}
function changeFontSize(fontSize) {
document.getElementById('paragraph').style.fontSize = fontSize + 'px';
}
function changeFont(font) {
document.getElementById('paragraph').style.fontFamily = font;
}
</script>
</body>
15 | P a g e
</html>
Output ss
16 | P a g e
Question 6. Create a form that takes data about a pet. The form must be well designed and
should accept the , and what it likes most. At the submission of this form create a Pet object
in JavaScript filled with these values and log that object and equivalent JSON on the console.
P6.html
<!DOCTYPE html>
<html lang="en">
<head>
17 | P a g e

<title>Pet Data Form</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f2f2f2;
}
.container {
max-width: 400px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.form-group {
}
label {
font-weight: bold;
display: block;
}
input[type="text"],
input[type="number"] {
width: 100%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 3px;
}
button {
background-color: #007bff;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 3px;
cursor: pointer;
}
</style>
</head>
18 | P a g e
<body>
<h2>Pet Data Form</h2>
<form id="petForm">
<div class="form-group">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
</div>
<label for="age">Age:</label>
<input type="number" id="age" name="age" required>
</div>
<label for="weight">Weight (kg):</label>
<input type="number" id="weight" name="weight" required>
</div>
<label for="type">Type:</label>
<input type="text" id="type" name="type" required>
</div>
<label for="likes">What it likes most:</label>
<input type="text" id="likes" name="likes" required>
</div>
<button type="button" onclick="submitform()">Submit</button>

</form>
</div>
<script>
/* document.getElementById("petForm").addEventListener("submit", function (event) {

event.preventDefault(); // Prevent the form from actually submitting.
const name = document.getElementById("name").value;

const age = document.getElementById("age").value;
const weight = document.getElementById("weight").value;
const type = document.getElementById("type").value;
const likes = document.getElementById("likes").value;
// Create a JavaScript object

const pet = {
19 | P a g e
name: name,
age: parseInt(age),
weight: parseFloat(weight),
type: type,
likes: likes
};
// Log the object and equivalent JSON to the console

console.log("Pet Object:", pet);
console.log("JSON Equivalent:", JSON.stringify(pet));
// You can further process the 'pet' object as needed.

});*/
/*function formSubmit(){
const form=document.getElementById("petForm");
const formData = new formData(form);
var pet={}
formData.array.forEach((value,key) => {
pet[key]=value;
});
console.log(pet)
}*/
function submitform() {
event.preventDefault();
var form = document.getElementById("petForm");
// console.log(form);
var formchild = form.firstElementChild;
// console.log(formchild);
var childinput = formchild.lastElementChild;
// console.log(childinput);
var id = childinput.id;
var value = document.getElementById(id).value;
var pet = {};
pet[0] = value;
//console.log(pet);
for (var i = 1; i < form.childElementCount - 1; i++) {
formchild = formchild.nextElementSibling;
childinput = formchild.lastElementChild;
var id = childinput.id;
var value = document.getElementById(id).value;
pet[i] = value;
}
console.log(pet);
console.log(JSON.stringify(pet))
}
</script>
20 | P a g e
</body>
</html>
Output ss
question 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.
Data.json
[
{
"name": "tp1",
"age": "10",
"weight": "20",
"type": "gs",
"likes": "sleeping"
},
{
"name": "tp1",
"age": "10",
"weight": "20",
"type": "gs",
"likes": "sleeping"
},
{
21 | P a g e
"name": "tp1",
"age": "10",
"weight": "20",
"type": "gs",
"likes": "sleeping"
},
{
"name": "tp1",
"age": "10",
"weight": "20",
"type": "gs",
"likes": "sleeping"
},
{
"name": "tp1",
"age": "10",
"weight": "20",
"type": "gs",
"likes": "sleeping"
},
{
"name": "tp1",
"age": "10",
"weight": "20",
"type": "gs",
"likes": "sleeping"
}
]
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pets Information</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 20px;
text-align: center;
}
22 | P a g e
h1 {
color: #333;
}
.pet-container {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 20px;
margin-top: 20px;
}
.pet-card {
border: 1px solid #ddd;
border-radius: 8px;
overflow: hidden;
width: 250px;
transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.pet-card:hover {
transform: scale(1.05);
}
.pet-card h2 {
color: #fff; /* White text color for contrast */
margin-bottom: 0;
}
.pet-card p {
color: #eee; /* Light gray text color for contrast */
margin: 5px 0;
}
</style>
</head>
<body>
<h1>Pets Information</h1>
<div id="petData" class="pet-container">


</div>
<script>
// Function to generate a random vibrant color
function getRandomColor() {
23 | P a g e
var letters = '0123456789ABCDEF';

var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
// Function to load JSON data using AJAX

function loadPetsData() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var pets = JSON.parse(xhr.responseText);
displayPets(pets);
}
};
xhr.open("GET", "data.json", true);
xhr.send();
}
// Function to display pets data

function displayPets(pets) {
var petContainer = document.getElementById("petData");
pets.forEach(function(pet) {
var petCard = document.createElement("div");
petCard.className = "pet-card";
petCard.innerHTML = `
<h2>${pet.name}</h2>
<p>Age: ${pet.age}</p>
<p>Weight: ${pet.weight}</p>
<p>Type: ${pet.type}</p>
<p>Likes: ${pet.likes}</p>
`;
petCard.style.backgroundColor = getRandomColor();
petContainer.appendChild(petCard);
});
}
// Load pets data when the page is loaded

window.onload = function() {
loadPetsData();
};
</script>
</body>
</html>
24 | P a g e
Output ss
Question 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.
Index.html
<!DOCTYPE html>
<html>
<head>
<title>B.Sc. Hons Computer Science</title>
</head>
<body>
<h1>Bachelor of Science (B.Sc. Hons) in Computer Science</h1>
<h2>Course Details</h2>
<p><strong>Fee:</strong> &#8377 27000 per year</p>
<p><strong>Eligibility Criteria:</strong> Minimum 12th-grade education with a focus
on mathematics and computer
science subjects.</p>
<p><strong>Papers with Names and Credits:</strong></p>
25 | P a g e
<ul>
<li>Introduction to Computer Science (4 credits)</li>
<li>Data Structures and Algorithms (4 credits)</li>
<li>Database Management (4 credits)</li>
<li>Web Development (4 credits)</li>
<li>Artificial Intelligence (4 credits)</li>
</ul>
<h2>Future Possibilities</h2>
<p>After completing this course, you can pursue various career options such as
software development, data
analysis, network administration, and more.</p>
<p>Click the button below to style the page:</p>
<button id="styleButton">Style Page</button>
</div>
<script>
// jQuery function to style the page on button click
$(document).ready(function () {
$("#styleButton").click(function () {
$("body").css({
"font-family": "Arial , sans-serif",
"margin": "0",
"padding": "0",
"background-color": "#f2f2f2",
});
$(".container").css({
"max-width": "900px",
"margin": "0 auto",
"padding": "20px",
"background-color": "#fff",
"border-radius": "5px",
"box-shadow": "0 0 10px rgba(0, 0, 0, 0.1)",
});
$("button").css({
"background-color": "#007bff",
"color": "#fff",
"border": "none",
"padding": "10px 20px",
"border-radius": "3px",
"cursor": "pointer",
});
});
});
</script>
</body>
26 | P a g e
</html>
Output ss
Question 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.
Index.html
<!DOCTYPE html>
<html lang="en">
27 | P a g e
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
.container1 {
max-width: 400px;
margin: 0 auto;
padding: 20px;
border-radius: 5px;
}
.image-container {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
gap: 10px;
max-width: 100%;
margin: 0 auto;
padding: 20px;
border-radius: 5px;
background-color: rgb(0, 0, 0);
transition: background-color 0.5s;
}
.image-container img {
max-width: 100%;
height: auto;
transition: box-dow 0.5s;
}
</style>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-
T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous"
/>
</head>
<body>
<div class="container1 container">
<input type="number" placeholder="enter number of imaages" id="input" />
28 | P a g e
</div>
<div class="image-container container" id="imagecontainer"></div>

<script>
document.addEventListener("DOMContentLoaded", function () {
var inele = document.getElementById("input");
var imgcon = document.getElementById("imagecontainer");
inele.addEventListener("input", function () {
event.preventDefault();
var inval = inele.value;
console.log(inval);
imgcon.innerHTML = "";
for (var i = 0; i < inval; i++) {
var image = document.createElement("img");
image.src = "https://picsum.photos/200?random=" + i;
image.alt = "Image " + (i + 1);
imgcon.appendChild(image);
image.addEventListener("mouseover", () => {
$('.image-container').css({ "background-color": "rgb(89, 91, 93)" });
$("img").css({
transform: "scale(0.9,0.9)",
"box-shadow": "5px 5px 10px rgba(0, 0, 0, 0.5)",
});
});
image.addEventListener("mouseout", () => {
$('.image-container').css({ "background-color": "rgb(0, 0, 0)" });
$("img").css({
transform: "scale(0.9,0.9)",
"box-shadow": "5px 5px 10px rgba(255, 255, 255, 0.5)",
});
});
}
});
});
</script>
</body>
</html>
Output ss
29 | P a g e
30 | P a g e
Question 10 Create an HTTP server using Node.js which handles requests on port 10000 or a
free port beyond 10000. Modify the server in such a way that opening localhost:10000 will
display “hello world ,this is my node.js server “ on browser
Server.js
const http = require('http');
const PORT = 10000;
const server = http.createServer((req, res) => {

res.writeHead(200, {'Content-Type': 'text/plain'});
res.end('hello world, this is my Node.js server\n');
});
server.listen(PORT, () => {
console.log(`Server running at http://localhost:${PORT}/`);
});
Output ss
31 | P a g e
Question 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.
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>SignInUp</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<main class="container" id="container">
<div class="form-container sign-up-container">
<form action="http://localhost:3000/signup" method="POST">
<h1>Sign Up</h1>
<input type="text" name="name" placeholder="Name" />
<input type="email" name="email" placeholder="Email" />
32 | P a g e
<input type="password" name="password" placeholder="Password" />

<a href="#">You agree to T&C</a>
<button type="submit">Sign Up</button>
</form>
</div>
<div class="form-container sign-in-container">
<form action="http://localhost:3000/signin" method="POST">
<h1>Sign in</h1>
<input type="email" name="email" placeholder="Email" />
<input type="password" name="password" placeholder="Password" />
<a href="#">Forgot your password?</a>
<button type="submit">Sign In</button>
</form>
</div>
<div class="overlay-container">
<div class="overlay">
<div class="overlay-panel overlay-left">
<h1>Already Have An Account? 👀</h1>
<p>Sign in to access your dashboard</p>
<button class="ghost" id="signIn">Sign In</button>
</div>
<div class="overlay-panel overlay-right">
<h1>Hey There 👋</h1>
<p>Create an account with us and get access to your dashboard</p>
<button class="ghost" id="signUp">Sign Up</button>
</div>
</div>
</div>
</div>
<script src="./script.js"></script>
</body>
</html>
Script.js
const signUpButton = document.getElementById('signUp');
const signInButton = document.getElementById('signIn');
const container = document.getElementById('container');
signUpButton.addEventListener('click', () => {
container.classList.add("right-panel-active");
});
signInButton.addEventListener('click', () => {
33 | P a g e
container.classList.remove("right-panel-active");
});
Style.css
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,800');
*{
box-sizing: border-box;
}
body {
background: #f6f5f7;
display: flex;
flex-direction: column;
font-family: 'Montserrat', sans-serif;
height: 100vh;
margin: 0;
padding: 0;
}
h1 {
font-weight: bold;
margin: 0;
}
h2 {
text-align: center;
}
p{
font-size: 14px;
font-weight: 100;
line-height: 20px;
letter-spacing: 0.5px;
margin: 20px 0 30px;
}
span {
font-size: 12px;
}
a{
color: #333;
34 | P a g e
font-size: 14px;
text-decoration: none;
margin: 15px 0;
}
button {
border-radius: 20px;
border: 1px solid #07070A;
background-color: #07070A;
color: #ffffff;
font-size: 12px;
font-weight: bold;
padding: 12px 45px;
transition: transform 80ms ease-in;
}
button:active {
transform: scale(0.95);
}
button:focus {
outline: none;
}
button.ghost {
background-color: transparent;
border-color: #ffffff;
}
form {
background-color: #ffffff;
display: flex;
padding: 0 50px;
height: 100%;
text-align: center;
}
form h1 {
margin-bottom: 0.33em;
}
input {
35 | P a g e
background-color: #eee;
border: none;
padding: 12px 15px;
margin: 8px 0;
width: 100%;
}
.container {
box-shadow: 0 14px 28px rgba(0,0,0,0.22), 0 10px 10px rgba(0,0,0,0.22);
position: relative;
overflow: hidden;
width: 768px;
max-width: 100%;
min-height: 480px;
border-radius: 100px;
}
.form-container {
position: absolute;
top: 0;
height: 100%;
transition: all 0.6s ease-in-out;
}
.sign-in-container {
left: 0;
width: 50%;
z-index: 2;
}
.container.right-panel-active .sign-in-container {
transform: translateX(100%);
}
.sign-up-container {
left: 0;
width: 50%;
opacity: 0;
z-index: 1;
}
.container.right-panel-active .sign-up-container {
opacity: 1;
z-index: 5;
animation: show 0.6s;
36 | P a g e
@keyframes show {
0%, 49.99% {
opacity: 0;
z-index: 1;
}
50%, 100% {
opacity: 1;
z-index: 5;
}
}
.overlay-container {
position: absolute;
top: 0;
left: 50%;
width: 50%;
height: 100%;
overflow: hidden;
transition: transform 0.6s ease-in-out;
z-index: 100;
}
.container.right-panel-active .overlay-container{
transform: translateX(-100%);
}
.overlay {
background: #24272B;
background: linear-gradient(to right, #07070A, #24272B);
background-repeat: no-repeat;
background-position: 0 0;
color: #ffffff;
position: relative;
left: -100%;
height: 100%;
width: 200%;
transform: translateX(0);
}
.container.right-panel-active .overlay {
}
37 | P a g e
.overlay-panel {
position: absolute;
display: flex;
padding: 0 40px;
text-align: center;
top: 0;
height: 100%;
width: 50%;
}
.overlay-left {
transform: translateX(-20%);
}
.container.right-panel-active .overlay-left {
}
.overlay-right {
right: 0;
}
.container.right-panel-active .overlay-right {
}
.social-container {
margin: 20px 0;
}
.social-container a {
border: 1px solid #DDDDDD;
border-radius: 50%;
display: inline-flex;
margin: 0 5px;
height: 40px;
width: 40px;
}
38 | P a g e
footer {
background-color: #222;
color: #fff;
font-size: 14px;
bottom: 0;
position: fixed;
left: 0;
right: 0;
text-align: center;
z-index: 999;
}
footer p {
margin: 10px 0;
}
footer i {
color: red;
}
footer a {
color: #3c97bf;
text-decoration: none;
}
Server.js
const http = require('http');
const url = require('url');
const fs = require('fs');
const path = require('path');
const querystring = require('querystring');
const mysql = require('mysql2');
const cors = require('cors');
// Replace these details with your MySQL database configuration

const dbConfig = {
host: 'localhost',
user: 'root',
password: '2004',
database: 'details',
insecureAuth: true,
};
const connection = mysql.createConnection(dbConfig);

39 | P a g e
// Create a simple in-memory array to store user data

const users = [];
// Create a table for users in the database

connection.query(`
CREATE TABLE IF NOT EXISTS users (
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(255) NOT NULL,
email VARCHAR(255) NOT NULL,
password VARCHAR(255) NOT NULL
)
`);
const server = http.createServer((req, res) => {

const parsedUrl = url.parse(req.url);
const pathname = parsedUrl.pathname;
if (pathname === '/' && req.method === 'GET') {

const indexPath = path.join(__dirname, 'public', 'index.html');
fs.readFile(indexPath, 'utf8', (err, data) => {

if (err) {
res.writeHead(500, { 'Content-Type': 'text/plain' });
res.end('Internal Server Error');
} else {
res.writeHead(200, { 'Content-Type': 'text/html' });
res.end(data);
}
});
} else if (pathname === '/signup' && req.method === 'POST') {
let data = '';
req.on('data', chunk => {
data += chunk;
});
req.on('end', () => {
const { name, email, password } = querystring.parse(data);
// Check if the email is already registered

if (users.some(user => user.email === email)) {
res.writeHead(409, { 'Content-Type': 'application/json' });
res.end(JSON.stringify({ message: 'Email is already registered' }));
} else {
// Insert the user into the in-memory array (and database in a real application)
users.push({ name, email, password });
40 | P a g e
connection.query('INSERT INTO users (name, email, password) VALUES (?, ?, ?)', [name,
email, password], (error, results) => {
if (error) {
res.end(JSON.stringify({ message: 'Internal Server Error' }));
} else {
res.end(JSON.stringify({ message: 'User created successfully' }));
}
});
}
});
} else if (pathname === '/signin' && req.method === 'POST') {
let data = '';
req.on('data', chunk => {
data += chunk;
});
req.on('end', () => {
const { email, password } = querystring.parse(data);
// Check if the user exists

const user = users.find(user => user.email === email && user.password === password);
if (user) {
res.end(JSON.stringify({ message: 'Sign in successful', user }));
} else {
res.end(JSON.stringify({ message: 'Invalid email or password' }));
}
});
} else {
res.end(JSON.stringify({ message: 'Not Found' }));
}
});
const port = 3000;

server.listen(port, () => {
console.log(`Server is running on port ${port}`);
});
Output ss
41 | P a g e
Extra practical questions

1 take an array from input and print the sorted array with bubble sort
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
42 | P a g e
</head>
<body>
<input id="inp" type="number" placeholder="enter a number" />
<button id="btn" type="submit">submit</button>
<button id="sortout">show sorted array on console</button>
<script>
var arr = [];
var k = 0;
function bubbleSort(arr1) {
var i, j;
var len = arr1.length;
var isSwapped = false;
for (i = 0; i < len; i++) {

isSwapped = false;
for (j = 0; j < len - i - 1; j++) {

if (arr1[j] > arr1[j + 1]) {
var temp = arr1[j];
arr1[j] = arr1[j + 1];
arr1[j + 1] = temp;
isSwapped = true;
}
}
// IF no two elements were swapped

// by inner loop, then break
if (!isSwapped) {
break;
}
}
// Print the array

console.log(arr1);
}
var ele = document.getElementById("btn");
ele.addEventListener("click", function () {
var val = document.getElementById("inp").value;
arr[k] = val;
k++;
document.getElementById("inp").value = "";
console.log(arr);
});
var sor = document.getElementById("sortout");
sor.addEventListener("click", function () {
43 | P a g e
bubbleSort(arr);
});
</script>
</body>
</html>
Output ss
2 digital clock on document

Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Digital clock</title>
</head>
<script>
function clock(){
let time=new Date()
let hours=time.getHours()
let minuits=time.getMinutes()
let seconds=time.getSeconds()
var pid=hours+":"+minuits+":"+seconds;
44 | P a g e
document.getElementById("timing").innerHTML=pid;
}
setInterval(clock,1000);
</script>
<body>
<p id="timing">
</p>
</body>
</html>
Output ss
45 | P a g e
3 div slider on clicking one div para inside it becomes visible and all other div closes if a div
with para visible is clicked it hides the para
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Toggle Paragraphs</title>
<style>
46 | P a g e
.div {
height: 40px;
font-size: 20px;
background-color: #3498db; /* Blue */
color: #fff; /* White */
transition: all 2s;
cursor: pointer;
box-shadow: 5px 5px 10px #2c3e50; /* Darker Blue */
margin: 15px;
text-shadow: 2px 2px 3px #000000; /* Slightly Darker Blue */
}
.div.active {
height: 160px;
font-size: 30px;
background-color: black; /* Red */
color: #e74c3c;
box-shadow: 5px 5px 10px #c0392b; /* Darker Red */
transition: all 2s;
text-shadow: 2px 2px 2px #922b21; /* Slightly Darker Red */
}
p {
box-shadow: -5px -5px 10px #717779; /* Gray */
background-color: #181616; /* Dark Gray */
height: 90px;
text-shadow: 2px 2px 2px #000; /* Black */
}
</style>
</head>
<body>
<div id="1" class="div">div1
<p class="para">para1</p>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$('p').hide();
47 | P a g e
$('.div').click(function() {
var isParagraphVisible = $(this).find('.para').is(':visible');
// Hide all paragraphs

$('.para').hide(2000);
// Reset the style for all divs

$('.div').removeClass('active');
if (!isParagraphVisible) {
$(this).find('.para').show(2000);
$(this).addClass('active');
}
});
});
</script>
</body>
</html>
Output ss
48 | P a g e
49 | P a g e
50 | P a g e
4 get data from form and create dynamic table

Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#1 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.grid-item {
border: 1px solid black;
padding: 8px;
}
</style>
</head>
<body>
<div id="1"></div>
<div id="inputArea">
<input type="text" id="name" placeholder="Name">
<input type="text" id="email" placeholder="Email">
<input type="text" id="phone" placeholder="Phone Number">
<input type="text" id="gender" placeholder="Gender">
51 | P a g e
<button id="submitButton">Submit</button>
</div>
<script>
var ele = document.getElementById("1");
var inputArea = document.getElementById("inputArea");
function submitForm() {
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
var phone = document.getElementById("phone").value;
var gender = document.getElementById("gender").value;
createGridItem("Name:", name);
createGridItem("Email:", email);
createGridItem("Phone Number:", phone);
createGridItem("Gender:", gender);
document.getElementById("name").value = "";
document.getElementById("email ").value = "";
document.getElementById("phone").value = "";
document.getElementById("gender").value = "";
}
function createGridItem(label, value) {

var gridItem = document.createElement("div");
gridItem.classList.add("grid-item");
gridItem.textContent = label + " " + value;
ele.appendChild(gridItem);
}
document.getElementById("submitButton").addEventListener("click",
submitForm);
</script>
</body>
</html>
Output
52 | P a g e
5 image slider
Index.html
<!DOCTYPE html>
<html>
<head>
<title>
IMAGE MOVE
</title>
<style type="text/css">
button{
53 | P a g e
background-color: black;
color: white;
padding: 8px;
}
</style>
</head>
<body>
<img src="https://picsum.photos/200" id="i1">
<div class="button">
<button id="start" onclick="begin()">START</button>
<button id="stop" onclick="stop()">STOP</button>
</div>
<script type="text/javascript">
var a=document.getElementById('start');
var b=document.getElementById('stop');
var image=document.getElementById('i1');
var margin=0;
var interval;
function begin()
{
clearInterval(interval);
interval=setInterval(function(){
if(margin >= window.innerWidth - image.width){
margin=0;
}
image.style.marginLeft = margin+ "px";
margin+=5;
},10);
}
function stop(){
clearInterval(interval);
}
</script>
</body>
</html>
Output ss
54 | P a g e
55 | P a g e
56 | P a g e
6 image zoom
Index.html
<html>
<head>
<title>Image Zoom</title>
<style type="text/css">
div{
border: 2px solid black;
padding: 10px;
}
p{
text-align:center;
}
img{
padding-left: 500px;
}
</style>
</head>
<body>
<div>
<p>Move over the image to zoom in and out of the Image to zoom out</p>
<img src="https://picsum.photos/200" id="img" >
</div>
<script type="text/javascript">
var image=document.getElementById('img');
image.onmouseover=function(){
image.style.height="400px";
image.style.width="350px";
}
57 | P a g e
image.onmouseout=function(){
image.style.height="200px";
image.style.width="150px";
}
</script>
</body>
</html>
Output ss
7 types of input in html

58 | P a g e
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
display: flex;
height: 100vh;
margin: 0;
}
.form-container {
border: 2px solid #3498db;
padding: 20px;
width: 400px;
}
label {
display: block;
font-weight: bold;
}
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
textarea,
select {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
transition: background-color 0.3s, color 0.3s;
}
input[type="text"]:hover,
input[type="password"]:hover,
input[type="email"]:hover,
input[type="number"]:hover,
59 | P a g e
textarea:hover,
select:hover {
color: #333;
}
input[type="radio"],
input[type="checkbox"] {
margin-right: 5px;
}
.button-group {
margin-top: 20px;
}
.button-group button {
margin-right: 10px;
padding: 10px 20px;
background-color: #3498db;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s, color 0.3s;
}
.button-group button:hover {
background-color: #258cd1;
}
</style>
</head>
<body>
<div class="form-container">
<form>
<label for="name">Question 1:</label>
<input type="text" id="name" name="name" placeholder="Answer 1">
<label for="email">Question 2:</label>

<input type="email" id="email" name="email" placeholder="Answer
2">
<label>Question 3:</label>
<div class="radio-group">
<input type="radio" id="radio1" name="question3"
value="option1">
<label for="radio1">Option 1</label>
<input type="radio" id="radio2" name="question3"
value="option2">
60 | P a g e
<label for="radio2">Option 2</label>

</div>
<label>Question 4:</label>
<div class="checkbox-group">
<input type="checkbox" id="checkbox1" name="question4"
value="option1">
<label for="checkbox1">Option 1</label>
<input type="checkbox" id="checkbox2" name="question4"
value="option2">
<label for="checkbox2">Option 2</label>
</div>
<label for="country">Question 5:</label>

<select id="country" name="question5">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>
<label for="message">Question 6:</label>

<textarea id="message" name="question6" rows="4"
placeholder="Answer"></textarea>
<div class="button-group">
<button type="submit">Submit</button>
<button type="reset">Reset</button>
</div>
</form>
</div>
</body>
</html>
Output ss
61 | P a g e
8 sibling count of paragraph

Index.html
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div id="div1">
<p>para 1</p>
<p>para 2</p>
<p>para 3</p>
<p>para 4</p>
<div>divc 1</div>
<div>divc 2</div>
<div>divc 3</div>
</div>
<p>op1</p>
<p>op2</p>
<script>
var ele = document.getElementById("div1");
// Find the div with id "div1"

var div1 = document.getElementById("div1");
// Find the first paragraph inside div1

62 | P a g e
var firstPara = div1.firstElementChild;
// Initialize a counter for sibling paragraphs

var siblingCount = 0;
// Loop through the child nodes of div1

for (var i = 0; i < div1.childNodes.length; i++) {
var child = div1.childNodes[i];
// Check if the child node is a paragraph and not the first paragraph
itself
if (child.nodeName === 'P' && child !== firstPara) {
siblingCount++;
}
}
// Print the count

console.log("Number of sibling paragraphs: " + siblingCount);
</script>
</body>
</html>
Output ss
9 regular expression matching

Index.html
<!DOCTYPE html>
63 | P a g e
<html lang="en">
<head>
</head>
<body>
<script>
console.log(1)
var pn = "+917979097007"
const re = /[+91][0-9]{10}/;
console.log(pn.match(re));
var ea="pkmpkm123@gmail.com"
const re1=/([a-z0-9])+@[a-z]+[.][a-z]+([.][a-z]+)*/i;
console.log(ea.match(re1));
</script>
</body>
</html>
Output ss
10 stack push pop

Index.html
<html>
<head>
</head>
<body>
64 | P a g e
<form>
Enter the value : <input type="text" id="inp">
<input type="button" value="Push" id="push">
<input type="button" value="Pop" id="pop"><br><br>
<textarea value="" rows="20" cols="40" id="output"></textarea>
</form>
<script>
let arr = [];
document.getElementById("push").addEventListener("click",(e)=>{
getVal=document.getElementById("inp").value;
arr.push(getVal);
document.getElementById("output").value=arr;
document.getElementById("inp").value=null;
})
document.getElementById("pop").addEventListener("click",(e)=>{
getVal=document.getElementById("inp").value;
arr.pop();
document.getElementById("output").value=arr;
document.getElementById("inp").value=null;
})
</script>
</body>
</html>

IT Notes

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

IT Notes

Uploaded by

Copyright:

Available Formats

1|Page

Name :- Sahil Dattatray Kshirsagar

Course :- BSc (hons) computer science

Subject :- IT Practical File

Practical list questions Page number

Practical list questions

a/56 indra puri colony<br>

article.card .infos .flag {

.multiplication-table th, .multiplication-table td {

function generateMultiplicationTable(factor, columns, fontSize, bgColor) {

const totalTables = 10;

if (currentTable > totalTables) {

// Set interval to append tables every 5000 milliseconds (5 seconds)

padding: 10px 20px;

/* Add initial styles for the paragraph */

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<button type="button" onclick="submitform()">Submit</button>

/* document.getElementById("petForm").addEventListener("submit", function (event) {

const name = document.getElementById("name").value;

// Create a JavaScript object

// Log the object and equivalent JSON to the console

// You can further process the 'pet' object as needed.

<div id="petData" class="pet-container">

var letters = '0123456789ABCDEF';

// Function to load JSON data using AJAX

// Function to display pets data

// Load pets data when the page is loaded

<div class="image-container container" id="imagecontainer"></div>

const PORT = 10000;

const server = http.createServer((req, res) => {

<input type="password" name="password" placeholder="Password" />

// Replace these details with your MySQL database configuration

const connection = mysql.createConnection(dbConfig);

// Create a simple in-memory array to store user data

// Create a table for users in the database

const server = http.createServer((req, res) => {

if (pathname === '/' && req.method === 'GET') {

fs.readFile(indexPath, 'utf8', (err, data) => {

// Check if the email is already registered

// Check if the user exists

const port = 3000;

Extra practical questions

var isSwapped = false;

for (i = 0; i < len; i++) {

for (j = 0; j < len - i - 1; j++) {

// IF no two elements were swapped

// Print the array

2 digital clock on document

// Hide all paragraphs

// Reset the style for all divs

4 get data from form and create dynamic table

function createGridItem(label, value) {

7 types of input in html

<label for="email">Question 2:</label>

<label for="radio2">Option 2</label>

<label for="country">Question 5:</label>

<label for="message">Question 6:</label>

8 sibling count of paragraph

// Find the div with id "div1"

// Find the first paragraph inside div1

var firstPara = div1.firstElementChild;

// Initialize a counter for sibling paragraphs

// Loop through the child nodes of div1