2k21 CS 40 GAURAV

INTERNET TECHNOLOGIES
PRACTICAL FILE
SUBMITTED BY - Gaurav
COURSE – B.SC(H) WITH CS
YEAR – 3RD
SEMESTER – 5TH
ROLL NO. – 2K21/CS/40
SUBMITTED TO – MRS. PARUL MA’AM
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.
Network Address:
To determine the network address, we perform a bitwise AND operation between the IP address and
the subnet mask.
 IP Address (binary): 11000000.10101000.00101011.00101010
 Subnet Mask (binary): 11111111.11111111.11111111.00000000
Performing bitwise AND:

 Network Address (binary): 11000000.10101000.00101011.00101010
Converting back to decimal:

 Network Address: 192.168.43.42
Maximum number of systems:

The subnet mask specifies that the last 8 bits of the IP address are used for hosts. Since the subnet mask
is 255.255.255.0, the mask is a /24 mask. This means 24 bits are used for the network and 8 bits are used
for hosts.
2^8 (number of bits used for hosts) - 2 (reserved addresses for network address and broadcast address) =
256 - 2 = 254
Hence , maximum system on the network are 254.
Available IP address range:

 Start address: 192.168.43.1
 End address: 192.168.43.254
Hence available IP address range is: 192.168.43.1 - 192.168.43.254.
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.
Network Address:
To determine the network address, we perform a bitwise AND operation between the IP address and
the subnet mask.
 IP Address (binary): 11000000.10101000.00101011.00101010
 Subnet Mask (binary): 11111111.11111111.11111111.00000000
Performing bitwise AND:

 Network Address (binary): 11000000.10101000.00101011.00101010
Converting back to decimal:

 Network Address: 192.168.43.42
Maximum number of systems:

The subnet mask specifies that the last 8 bits of the IP address are used for hosts. Since the subnet mask
is 255.255.255.0, the mask is a /24 mask. This means 24 bits are used for the network and 8 bits are used
for hosts.
2^8 (number of bits used for hosts) - 2 (reserved addresses for network address and broadcast address) =
256 - 2 = 254
Hence , maximum system on the network are 254.
Available IP address range:

 Start address: 192.168.43.1
 End address: 192.168.43.254
Hence available IP address range is: 192.168.43.1 - 192.168.43.254.
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.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About me </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>About Me</h1>
</header>
<main>
<div class="card">
<div class="info">
<h2>Personal Description</h2>
<p> "I am a dedicated individual with a profound interest in coding,
currently pursuing a Computer Science Honors degree. Proficient in the MERN stack, I have
delved into the realm of web development. My repertoire includes various programming
languages such as C++, Java, and Python. I approach opportunities with an open mind and
eagerness to learn, readily embracing new challenges. Beyond the screen, I am known for my
amiable nature and enthusiasm for forging connections. While I do confess to moments of
silliness and occasional procrastination, my inherent drive and a penchant for showcasing
my skills set me apart."</p>
</div>
</div>
<div class="card">
<div class="info">
<h2>Course</h2>
<p>BSC CS (Hons.)</p>
</div>
</div>
<div class="card">
<div class="info">
<h2>Hobbies</h2>
<p>"Outside the realm of academia and technology, I find solace and
inspiration in a diverse array of hobbies. Music serves as a profound source of relaxation
for me, with a particular affinity for both listening and, despite my modest vocal
abilities, indulging in singing. Embracing the challenges that come my way, I am an avid
enthusiast of coding, constantly seeking to broaden my skill set and engage with complex
problems head-on. I approach each endeavor with an unwavering determination, often
choosing the path less trodden as a means to challenge and push the boundaries of my
capabilities. Moreover, fostering new connections and expanding my social circle brings me
immense joy, as I relish the opportunity to make meaningful connections and forge
friendships."</p>
</div>
</div>
<div class="card">
<div class="info">
<h2>Address</h2>
<p>Khekra(Baghpat) , UttarPradesh</p>
</div>
</div>
<div class="card">
<div class="plans">
<h2>Plans</h2>
<p>"My aspirations span a diverse spectrum, reflecting both personal and
professional ambitions. Striving for a balanced life, I am committed to enhancing not only
my intellectual prowess in the coding realm but also my physical well-being by dedicating
time to sculpting and strengthening my physique. I harbor a resolute desire to secure a
high-caliber coding position, aspiring even to explore opportunities abroad, should they
align with my career goals. Concurrently, an innate drive to reciprocate the boundless
support and sacrifices made by my parents fuels my determination to contribute
significantly to their happiness and well-being. This phase of my life marks a pivotal
juncture, where I aim to translate aspirations into tangible achievements, honoring the
foundation laid by my family."</p>
</div>
</div>
</main>
<footer>
<p>© 2023 Gaurav</p>
</footer>
</body>
</html>
CSS:
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
header {
background-color: #333;
color: #fff;
text-align: center;
padding: 20px 0;
}
main {
width: 80%;
margin: 20px auto;
display: flex;
flex-direction: column;
align-items: center;
}
.card {
background-color: #fff;
padding: 20px;
margin-bottom: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 90%; /* Adjust width as needed */
}
.info, .plans {
text-align: center;
}
h2 {
}
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px 0;
position: fixed;
bottom: 0;
width: 100%;
}
OUTPUT:
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.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Multiplication Tables</title>
<style>
table {
border-collapse: collapse;
}
td {
border: 1px solid black;
padding: 8px;
text-align: center;
}
</style>
</head>
<body>
<table id="multiplicationTable"></table>
<script>
let currentNumber = 2;
let currentRow = 1;
let tableElement = document.getElementById('multiplicationTable');
function generateRow() {
if (currentRow <= 10) {
let row = tableElement.insertRow();
for (let i = 1; i <= 10; i++) {
let cell = row.insertCell();
let product = currentNumber * i;
cell.textContent = product;
cell.style.fontSize = `${12 + currentRow}px`;
cell.style.color = getRandomColor();
}
currentRow++;
currentNumber++;
}
}
function getRandomColor() {
const letters = '0123456789ABCDEF';
let color = '#';
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
let interval = setInterval(generateRow, 5000);
setTimeout(() => {
clearInterval(interval);
}, 50000); // Stop after 10 rows
</script>
</body>
</html>
OUTPUT:
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.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Style Changer</title>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 5px;
}
button {
padding: 8px;
cursor: pointer;
}
p {
font-size: 18px;
}
</style>
</head>
<body>
<p id="targetParagraph">This is a sample paragraph.</p>
<div class="grid-container">
<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="changeFontFamily('Arial')">Arial</button>
<button onclick="changeFontFamily('Times New Roman')">Times New Roman</button>
<button onclick="changeFontFamily('Courier')">Courier</button>
</div>
<script>
function changeColor(color) {
document.getElementById('targetParagraph').style.color = color;
}
function changeFontSize(size) {
document.getElementById('targetParagraph').style.fontSize = size + 'px';
}
function changeFontFamily(font) {
document.getElementById('targetParagraph').style.fontFamily = font;
}
</script>
</body>
</html>
OUTPUT:
6. Create a form that takes data about a pet. The form must be well designed
and should accept the pet’s name, age, weight, type, 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.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pet Information</title>
<link rel="stylesheet" href="sixth.css">
</head>
<body>
<div class="container">
<h2>Pet Information Form</h2>
<form id="petForm">
<label for="name">Pet's Name:</label>
<input type="text" id="name" name="name" required>
<label for="age">Age:</label>
<input type="number" id="age" name="age" required>
<label for="weight">Weight (in kg):</label>

<input type="number" id="weight" name="weight" required>
<label for="type">Type:</label>
<select id="type" name="type" required>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
<option value="bird">Bird</option>
<option value="other">Other</option>
</select>
<label for="likes">What it likes most:</label>

<input type="text" id="likes" name="likes" required>
<input type="submit" value="Submit">

</form>
</div>
<script>
document.getElementById('petForm').addEventListener('submit', function(event) {
event.preventDefault();
const name = document.getElementById('name').value;

const age = parseInt(document.getElementById('age').value);
const weight = parseFloat(document.getElementById('weight').value);
const type = document.getElementById('type').value;
const likes = document.getElementById('likes').value;
// Create Pet object

const pet = {
name: name,
age: age,
weight: weight,
type: type,
likes: likes
};
// Log Pet object and its JSON equivalent

console.log('Pet Object:', pet);
console.log('JSON:', JSON.stringify(pet));
});
</script>
</body>
</html>
CSS:
body {
margin: 0;
display: flex;
justify-content: center;
height: 100vh;
}
.container {
padding: 40px;
border-radius: 8px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
max-width: 350px;
margin: auto;
}
h2 {
text-align: center;
}
form {
margin-top: 20px;
}
label,
input,
select {
display: block;
width: 100%;
box-sizing: border-box;
}
input[type="text"],
input[type="number"],
select {
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
}
input[type="submit"] {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #45a049;
}
OUTPUT:
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.
HTML/CSS/JS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com"
crossorigin>
<link href="https://fonts.googleapis.com/css2?
family=Quicksand:wght@300;400;500&display=swap" rel="stylesheet">
<style>body {
height: 100%;
width: 100%;
background: rgb(130, 234, 240);
margin: 0;
display: flex;
}
.Form-area{
position: relative; /* Add relative positioning to the body */
width: 100%;
height: 100vh;
display: flex;
flex-direction: row;
}
.sec-1{
width: 39%;
height: 80%;
background: url("./steptodown.com103975\ $1$.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin: 0;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
box-shadow: 0px 0px 10px rgb(71, 69, 69);
clip-path: inset(-10px 0px -10px -10px);
}
.sec-2{
width: 51%;
height: 80%;
background-color: white;
margin: 0;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
box-shadow: 0px 0px 10px rgb(71, 69, 69);
}
.form-items{
margin-top: 50px;
margin-left: 50px;
}
.sec-2 h1{
color: rgb(33,35,61);
font-size: 50px;
font-family: 'Quicksand', sans-serif;
}
.sec-2 label{
font-size: 25px;
font-weight: 500;
}
input, select{
margin-top: 10px;
height: 40px;
border: 1px solid rgba(33, 35, 61, 0.695);
width: 80%;
font-size: 20px;
color: rgb(33,35,61);
font-weight: 500;
}
.container{
position: relative;
display: flex;
}
.row{
display: flex;
}
.set{
width: 50%;
}
.set-like{
width: 100%;
}
.set-like input{
width: 90%;
}
.row-like{
width: 100%;
}
button {
position: absolute;
bottom: -125px; /* Adjust as needed */
transform: translateX(-50%);
border: none;
width: 250px;
height: 50px;
font-size: 20px;
color: azure;
font-weight: 500;
background-color: rgb(55, 72, 137);
border-radius: 2px;
z-index: 1;
}
#submit{
left: 20%;
}
#ajax{
left: 80%;
bottom: 50px;
}
#show-ajax{
width: 90%;
height: 100%;
margin-left: 5%;
margin-right: 5%;
padding: 40px;
padding-top: 0px;
background-color: white;
}
.card{
border: 1px solid black;
padding: 20px;
}
#show-ajax h1{
color: rgb(33,35,61);
font-size: 50px;
}
#show-ajax label{
font-size: 30px;
font-weight: 500;
}
#show-ajax .set{
display: flex;
}
#show-ajax span{
color: rgb(33,35,61);
font-size: 20px;
padding-top: 5px;
padding-left: 5px;
}
</style>
</head>
<body>
<div class="Form-area">
<div class="sec-1"></div>
<div class="sec-2">
<div class="form-items">
<h1>Pet Data Collection Form</h1>
<form onsubmit="getData(event)">
<div class="row">
<div class="set">
<label for="name">Pet's Name</label>
<br/>
<input type="text" id="name"
placeholder="Name" required>
<br/>
</div>
<div class="set">
<label for="age">Age(in months)</label>
<br/>
<input type="number" id="age"
placeholder="Age" required>
<br/>
</div>
</div>
<div class="row">
<div class="set">
<label for="weight">Weight(in KG)</label>
<br/>
<input type="number" id="weight"
placeholder="Weight" required>
<br/>
</div>
<div class="set">
<label for="type">Type</label>
<br/>
<select id="type" name="type" required>
<option value="Dog">Dog</option>
<option value="Cat">Cat</option>
<option value="Bird">Bird</option>
<option value="Other">Other</option>
</select><br>
</div>
</div>
<div class="row-like">
<div class="set-like">
<label for="likes">Favourite
Thing</label><br/>
<input type="text" id="likes"
placeholder="What it likes most" required>
</div>
</div>
<button id="submit" type="submit">Submit</button>
</div>
</form>
<button id="ajax" onclick="ajax()">Show Data</button>
</div>
</div>
</div>
<div id="show-ajax">
<h1>Pets Data</h1>
<div id="elements"></div>
</div>
<script>
function getData(event) {
event.preventDefault();
const petData = {
name: document.getElementById("name").value,
age: document.getElementById("age").value,
weight: document.getElementById("weight").value,
type: document.getElementById("type").value,
likes: document.getElementById("likes").value,
};
document.getElementById("name").value="";
document.getElementById("age").value="";
document.getElementById("weight").value="";
document.getElementById("type").value="";
document.getElementById("likes").value="";
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
console.log('Data sent successfully');
} else {
console.error('Error sending data:', xhr.status);
}
}
};
xhr.open('POST', '/addPet', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify(petData));
}
function ajax(){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
document.getElementById('elements').innerHTML =
xhr.responseText;
} else {
console.error('Error fetching data:', xhr.status);
}
}
};
xhr.open('GET', '/pet', true);
xhr.send();
}
</script>
</body>
</html>
SERVER.js:
// server.js
const http = require('http');
const fs = require('fs');
const path = require('path');
const PORT = 3000;

let petDetails;
let resultString = "";
const server = http.createServer((req, res) => {
const { method, url } = req;
if (method === 'GET' && url === '/pet') {

fs.readFile(path.join(__dirname, 'pet.json'), 'utf8', (err, data)
=> {
if (err) {
console.error(err);
res.writeHead(500, { 'Content-Type': 'text/plain' });
res.end('Error reading data');
return;
}
res.writeHead(200, { 'Content-Type': 'application/json' });

// res.end(data);
petDetails = JSON.parse(data);
petDetails.pets.forEach(obj => {
resultString += `<div class="card">
<div class="row">
<div class="set">
<label>Name</label>
<span>${obj.name}</span>
</div>
<div class="set">
<label>Age(in months)</label>
<span>${obj.age}</span>
</div>
</div>
<div class="row">
<div class="set">
<label>Weight(in kg)</label>
<span>${obj.weight}</span>
</div>
<div class="set">
<label>Type</label>
<span>${obj.type}</span>
</div>
</div>
<div class="row">
<div class="set">
<label>Fav Thing</label>
<span>${obj.likes}</span>
</div>
</div>
</div>`
});
res.end(resultString);
});
} else if (req.url === '/' || req.url === '/index.html') {
const filePath = path.join(__dirname, 'index.html');
fs.readFile(filePath, (err, data) => {
if (err) {
res.end('Internal Server Error');
return;
}
res.writeHead(200, { 'Content-Type': 'text/html' });
res.end (data);
});
}else if (req.method === 'POST' && req.url === '/addPet') {
let body = '';
req.on('data', (chunk) => {
body += chunk;
});
req.on('end', () => {
try {
const newData = JSON.parse(body);
const filePath = path.join(__dirname, 'pet.json');

fs.readFile(filePath, 'utf8', (err, data) => {
if (err) {
console.error(err);
res.end('Error reading data');
return;
}
const existingData = JSON.parse(data);

existingData.pets.push(newData);
fs.writeFile(filePath, JSON.stringify(existingData, null,

2), (err) => {
if (err) {
console.error(err);
res.end('Error writing data');
return;
}

res.end('Data added successfully');
});
});
} catch (error) {
console.error(error);
res.end('Invalid data');
}
});
}else{
res.end('Not Found');
}
});
server.listen(PORT, () => {
console.log(`Server is running on port ${PORT}`);
});
PET.json:
{
"pets": [
{
"name": "Charlie",
"age": "22",
"weight": "12",
"type": "Dog",
"likes": "Turkey"
},
{
"name": "Alex",
"age": "12",
"weight": "4",
"type": "Cat",
"likes": "Fish"
}
]
}
OUTPUT:
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.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>B.Sc. Hons CS Course</title>
<link rel="stylesheet" href="eight.css">
</head>
<body>
<h1>B.Sc. Hons Computer Science Course</h1>
<div class="details">
<h2>Course Details</h2>
<p><strong>Fee:</strong> Rs. 50000 per year </p>
<p><strong>Eligibility Criteria:</strong> passed class 12th and qualifying marks in
cuet</p>
<h3>Papers with Names and Credits</h3>
<ul>
<li>Programming fundamentals using C++ -- 6 credits </li>
<li>Computer System ARchitecture -- 6 credits </li>
<li>General Elective I -- </li>
<li>Discrete Structure --6 credits </li>
<li>Database Management System -- 6 credits </li>
<li>General Elective II -- </li>
<li>Object Oriented Programming using C++ -- 6 credits </li>
<li>Data Structure -- 6 credits </li>


</ul>
<h3>Future Possibilities</h3>
<p>After completing this course, students can pursue careers in software
development, data analysis, system architecture, and more.</p>
</div>
<button id="styleButton">Style Page</button>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="eight.js"></script>
</body>
</html>
CSS:
body {
margin: 0;
padding: 0;
}
.container {
max-width: 800px;
margin: 20px auto;
padding: 20px;
border-radius: 8px;
text-align: center;
}
h1 {
color: #333;
}
button {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
.details {
text-align: left;
}
.details ul {
padding: 0;
list-style: none;
}
.details li {
margin-bottom: 5px;
}
JAVASCRIPT:
$(document).ready(function() {
$('#styleButton').click(function() {
$('.container').css({
'background-color': '#f9f9f9',
'padding': '40px',
'border': '1px solid #ccc'
});
$('h1').css({
'color': '#555',
'font-size': '32px',
'margin-bottom': '20px'
});
$('.details').css({
'text-align': 'left',
'font-size': '16px'
});
$('button').css({
'background-color': '#555',
'padding': '12px 24px',
'font-size': '14px',
'border-radius': '20px',
'cursor': 'pointer'
});
});
});
OUTPUT:
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.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Image Gallery</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
rel="stylesheet">
<style>
img{
}
.gallery {
margin-top: 20px;
}
.gallery img {
width: 100%;
height: auto;
transition: transform 0.3s ease-in-out;
}
.gallery img:hover {
transform: scale(1.1);
}
</style>
</head>
<body>
<h1 class="text-center">Bootstrap Image Gallery</h1>
<div class="row gallery">

<div class="col-md-4 col-sm-6">
<img src="https://picsum.photos/400/300" alt="Image 1">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></
script>
</body>
</html>
OUTPUT:
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:
// server.js
const PORT = 10000;

if (req.url === '/') {

res.end('<h1>Hello world, This is my Node.js server<h1/>');
}else{
}
});
console.log(`Server is running on port ${PORT}`);
});
OUTPUT:
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.
HTML/CSS:
<!DOCTYPE html>
<html>
<head>
<title>Sign up/login</title>
<link href="https://fonts.googleapis.com/css2?family=Jost:wght@500&display=swap"
rel="stylesheet">
<style>
body{
margin: 0;
padding: 0;
display: flex;
min-height: 100vh;
font-family: 'Jost', sans-serif;
background: linear-gradient(to bottom, #0f0c29, #302b63, #24243e);
}
.main{
width: 350px;
height: 500px;
background: red;
overflow: hidden;
background:
url("https://doc-08-2c-docs.googleusercontent.com/docs/securesc/68c90smiglihng9534mvqmq194
6dmis5/fo0picsp1nhiucmc0l25s29respgpr4j/
1631524275000/03522360960922298374/03522360960922298374/1Sx0jhdpEpnNIydS4rnN4kHSJtU1EyWka?
e=view&authuser=0&nonce=gcrocepgbb17m&user=03522360960922298374&hash=tfhgbs86ka6divo3llbvp
93mg4csvb38") no-repeat center/ cover;
border-radius: 10px;
box-shadow: 5px 20px 50px #000;
}
#chk{
display: none;
}
.signup{
position: relative;
width:100%;
height: 100%;
}
label{
color: #fff;
font-size: 2.3em;
display: flex;
margin: 60px;
font-weight: bold;
cursor: pointer;
transition: .5s ease-in-out;
}
input{
width: 60%;
height: 20px;
background: #e0dede;
display: flex;
margin: 20px auto;
padding: 10px;
border: none;
outline: none;
border-radius: 5px;
}
button{
width: 60%;
height: 40px;
margin: 10px auto;
display: block;
color: #fff;
background: #573b8a;
font-size: 1em;
font-weight: bold;
margin-top: 20px;
outline: none;
border: none;
border-radius: 5px;
transition: .2s ease-in;
cursor: pointer;
}
button:hover{
background: #6d44b8;
}
.login{
height: 460px;
background: #eee;
border-radius: 60% / 10%;
transform: translateY(-180px);
transition: .8s ease-in-out;
}
.login label{
color: #573b8a;
transform: scale(.6);
}
#chk:checked ~ .login{
transform: translateY(-500px);
}
#chk:checked ~ .login label{
transform: scale(1);
}
#chk:checked ~ .signup label{
transform: scale(.6);
}
</style>
</head>
<body>
<div class="main">
<input type="checkbox" id="chk" aria-hidden="true">
<div class="signup">
<form id="signup-form" onsubmit="signupDetails()" action="/signup"
method="post">
<label for="chk" aria-hidden="true">Sign up</label>
<input type="text" name="name" placeholder="Name" required="">
<input type="email" name="email" placeholder="Email" required="">
<input type="password" name="pswd" placeholder="Password" required="">
<button type="submit">Sign up</button>
</form>
</div>
<div class="login">
<form onsubmit="loginDetails()" action="/welcome" method="post">
<label for="chk" aria-hidden="true">Login</label>
<input type="email" name="email" placeholder="Email" required="">
<input type="password" name="pswd" placeholder="Password" required="">
<button type="submit">Login</button>
</form>
</div>
</div>
</body>
</html>
SERVER.js:
const mysql = require('mysql2');
const fs = require('fs');
const path = require('path');
const { log } = require('console');
const PORT = 3000;
const connection = mysql.createConnection({

host: 'localhost',
user: 'root',
password: 'Danish@2004',
database: 'userdb'
});
connection.connect((err) => {
if (err) {
console.error('Error connecting to MySQL:', err);
return;
}
console.log('Connected to MySQL');
});

if (method === 'POST' && url === '/signup') {

let body = '';
body += chunk.toString();
});
req.on('end', () => {
const formData = new URLSearchParams(body);
const formDataObject = {};
for (const [key, value] of formData) {
formDataObject[key] = value;
}
const { email, pswd, name } = formDataObject;
const insertQuery = `INSERT INTO users (email, password, name) VALUES ('${email}',
'${pswd}', '${name}')`;
connection.query(insertQuery, (err, result) => {
if (err) {
res.end('Error in signup. Please try again.');
console.log(err);
return;
}
const signupMessage = 'Signup Successfull. Redirecting to login page...';
const redirectHTML = `
<html>
<head>
<meta http-equiv="refresh" content="5;URL='/'" />
</head>
<body>
<p>${signupMessage}</p>
</body>
</html>
`;

res.end(redirectHTML);
});
});
} else if (url === '/') {
const filePath = path.join(__dirname, 'index.html');
fs.readFile(filePath, (err, data) => {
if (err) {
res.end('Internal Server Error');
return;
}
res.end(data);
});
}else if (method === 'POST' && url === '/welcome') {
let body = '';
body += chunk.toString();
});
req.on('end', () => {
const formData = new URLSearchParams(body);
const formDataObject = {};
for (const [key, value] of formData) {
formDataObject[key] = value;
}
const { email, pswd } = formDataObject;
const selectQuery = `SELECT * FROM users WHERE email='${email}' AND password='$

{pswd}'`;
connection.query(selectQuery, (err, result) => {
if (err) {
res.end('<h1>Error in login. Please try again.<h1/>');
return;
}
if (result.length === 1) {
const welcomeMessage = 'Welcome to the Home Page';
const welcomeHTML = `
<html>
<head>
<meta http-equiv="refresh" content="URL='/'" />
</head>
<body>
<h1>${welcomeMessage}</h1>
</body>
</html>
`;

res.end(welcomeHTML);
} else {
const errorMessage = 'Invalid credentials. Redirecting to login page...';
const redirectHTML = `
<html>
<head>
<meta http-equiv="refresh" content="5;URL='/'" />
</head>
<body>
<p>${errorMessage}</p>
</body>
</html>
`;

res.end(redirectHTML);
}
});
});
} else {
}
});
console.log(`Server running on port ${PORT}`);
});
OUTPUT:

2k21 CS 40 GAURAV

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

2k21 CS 40 GAURAV

Uploaded by

Copyright:

Available Formats

INTERNET TECHNOLOGIES

Performing bitwise AND:

Converting back to decimal:

Maximum number of systems:

Available IP address range:

Performing bitwise AND:

Converting back to decimal:

Maximum number of systems:

Available IP address range:

let interval = setInterval(generateRow, 5000);

<label for="weight">Weight (in kg):</label>

<label for="likes">What it likes most:</label>

<input type="submit" value="Submit">

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

// Create Pet object

// Log Pet object and its JSON equivalent

const PORT = 3000;

if (method === 'GET' && url === '/pet') {

res.writeHead(200, { 'Content-Type': 'application/json' });

const filePath = path.join(__dirname, 'pet.json');

const existingData = JSON.parse(data);

fs.writeFile(filePath, JSON.stringify(existingData, null,

res.writeHead(200, { 'Content-Type': 'text/plain' });

<div class="row gallery">

const PORT = 10000;

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

if (req.url === '/') {

const PORT = 3000;

const connection = mysql.createConnection({

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

if (method === 'POST' && url === '/signup') {

const { email, pswd, name } = formDataObject;

res.writeHead(200, { 'Content-Type': 'text/html' });

const { email, pswd } = formDataObject;

const selectQuery = `SELECT * FROM users WHERE email='${email}' AND password='$

res.writeHead(200, { 'Content-Type': 'text/html' });

res.writeHead(200, { 'Content-Type': 'text/html' });

You might also like