IT Practicals (21013570042)

College of Vocational Studies
University of Delhi
INTERNET
TECHNOLOGIES
SUBMITTED BY: SUBMIT

NAME- Ishant Tomer TED
ROLL NO.-21013570042
COURSE-BSc CS hons. TO:
MS. Parul
Chachra
PRACTI
Practical 1
CALS
Q: 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.
Answer:
The network address is: 192.168.1

The maximum number of systems possible on the network: 254(Excluding network address and
broadcast address)
The range of IP addresses available to these systems: 192.168.1.1 to
192.168.1.254(Excluding network address and broadcast address)
Practical 2
Q: 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.
Answer:
Practical 3
Q: Create an HTML page that shows information about you, your course, hobbies, address and
your plans. Use CSS for styling of HTML pages so that it looks nice.
Ans:
./index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<title>Document</title>
</head>
<body>
<div class="container">
<h1>About Me</h1>
<p>Name: John Doe</p>
<p>Age: 24</p>
<h2>Course</h2>
<p>Bachelors of Science(Honors)<br>
Computer Science</p>
<p>Delhi University</p>
<h2>My Hobbies</h2>
<p>1. Video Games</p>
<p>2. Music</p>
<p>3. Basketball</p>
<h2>My Address</h2>
<p>123 Maple Street Anytown, PA 17101</p>
<h2>My Plans</h2>
<p>Plan A</p>
<p>Plan B</p>
<p>Plan C</p>
</div>
</body>
</html>
./style.css
body { font-family: Arial, sans-

serif; margin: 0; padding: 0;
background-color: #333; color:
#f0f0f0;
}
.container { width: 80%; margin: 20px auto; padding:

20px; background-color: #444; border-radius:
10px; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0,
0.75);
}
h1,
h2 {
color: #fff;
}
p {
color: #ccc;
}
Output:
Practical 4
Q: 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 the setInterval function print
a row every 5 seconds in di erent colors and increasing font size.
Ans:
<!DOCTYPE html>
<html>
<head>
scale=1.0">
<style> body { font-family: Arial,
sans-serif; margin: 0; padding: 0;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div id="content"></div>
<script>
var i = 2;
var colorArray = ['red', 'orange', 'yellow', 'green', 'blue',
'indigo', 'violet'];
var fontSize = 14;
function printTable() {
var contentDiv = document.getElementById('content');
var table = ''; for (var j = 1; j <= 10; j++) {
table += i + ' x ' + j + ' = ' + i * j + '<br>';
}
var p = document.createElement('p');
p.style.color = colorArray[(i - 2) % colorArray.length];
p.style.fontSize = fontSize + 'px';
p.innerHTML = table;
contentDiv.appendChild(p);
if (i < 10) {
i++;
fontSize += 2;
}
else {
clearInterval(interval);
}
var interval = setInterval(printTable, 5000);

</script>
</body>
</html>
Output:
Practical 5
Q: Explain setInterval function and setTimeout function with the help of an example.
Ans:
SetInterval and SetTimeout are built-in JavaScript functions that allow you to execute code at
speciofied time intervals.
1. SetInterval: This function is used to repeatedly execute a specified function at set time
intervals, in milliseconds. The function continues to run until it is stopped with
clearInterval.
Example:
let count = 0; let intervalId = setInterval(function() { count+

+;
console.log("This message will print every second. Count: "
+ count);
if(count === 5) { clearInterval(intervalId); // This will stop
the interval after 5 seconds
}
}, 1000);
In this example, the message "This message will print every second. Count: X" will be printed to
the console every second. After 5 seconds, the interval is cleared and the message will stop
printing.
2. setTimeout: This function is used to execute a specified function once after a set amount
of time, in milliseconds. Example:
setTimeout(function() { console.log("This message will print

after 5 seconds"); }, 5000);
In this example, the message "This message will print after 5 seconds" will be printed to the
console once, 5 seconds after the setTimeout function is called.
In both cases, the time is specified in milliseconds, so 1000 milliseconds is equal to 1 second.
Practical 6
Q: 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 the paragraph.
Ans:
<!DOCTYPE html>
<html>
<head>
scale=1.0">
<style>
.button-grid { display: grid; grid-
template-columns: repeat(3, 1fr);
gap: 10px;
}
button { padding:
10px;
}
</style>
</head>
<body>
<p id="styledParagraph">This is a paragraph that will be styled
by the buttons below.</p>
<div class="button-grid">
<button
onclick="document.getElementById('styledParagraph').style.color='red'"
>Red</button>
<button
onclick="document.getElementById('styledParagraph').style.color='green
'">Green</button>
<button
onclick="document.getElementById('styledParagraph').style.color='
blue' ">Blue</button>
<button
onclick="document.getElementById('styledParagraph').style.fontSize='10
px'">10</button>
<button
px'">20</button>
<button
px'">30</button>
<button
onclick="document.getElementById('styledParagraph').style.fontFamily='
Arial'">Arial</button>
<button
MV Boli'">MV Boli</button>
<button
Times New Roman'">Times New
Roman</button>
</div>
</body>
</html>
Output:
Practical 7
Q: 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 logs that object and
equivalent JSON on the console.
Ans:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Practical 7</title>
<style type="text/css">
.container{ width: 60%;
margin: auto; border:
1px solid black;
border-radius: 8px;
padding: 50px;
}
.btn-submit{ border-radius:
5px; color: white;
background:
greenyellow; font-
weight: bold; font-
size: 1rem; margin:
20px;
}
@media(width<=575){
.container{ widt
h: 84%;
}
}
</style>
</head>
<body>
<h1>Pet's Information</h1>
<hr>
<label for="name">Pet's Name: </label>
<input type="text" name="name"><br><br>
<label for="age">Age: </label>
<input type="number" name="age">
<label for="weight">Weight: </label>
<input type="number" name="weight" class=""><br><br>
<label for="type">Pet type: </label>
<input type="text" name="type"><br><br>
<label for="likes">Likes: </label>
<input type="text" name="likes"><br>
<button class="btn-submit" onclick="display()">Submit</button>
</div>
<script type="text/javascript">
function display(){
// event.preventDafault();
var pet = {};
var input_fields = document.getElementsByTagName('input');
for (var i = 0; i < input_fields.length; i++)
{ pet[input_fields[i].name] = input_fields[i].value;
}
console.log(pet);
</script>
</body>
</html>
Output:
Practical 8
Q: Store JSON data of a 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.
Ans:
./index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
scale=1.0">
<title>PetForm</title>
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/a
ll.min.css"
integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01
SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous"
referrerpolicy="no-referrer" />
</head>
<body>
<main class="container">
<div class="left-container">
<h1>
Pet Survey
</h1>
<img
src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/38816/image-from-raw
pixel-id-542207-jpeg.png">
</div>
<div class="right-container">
<h1>information about your pet</h1>
<header>
<form id="petForm">
<div class="field">
<label for="name">Name</label> <input
type="text" name="name" id="name"
placeholder="Enter your pet's name" required />
</div>
<div class="field">
<label for="age">Age</label>
<input type="number" name="age" id="age"
placeholder="Enter your pet's age" required />
</div>
<div class="field">
<label for="weight">Weight</label>
<input type="number" step="0.01" name="weight"
id="weight" placeholder="Enter your pet's weight"
required />
</div>
<div class="field">
<label for="type">Type</label>
<select name="type" id="type" required>
<option value="" disabled
selected>Select
your pet type</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
<option value="bird">Bird</option>
<option value="other">Other</option>
</select>
</div>
<div class="field">
<label for="likes">Likes</label>
<input type="text" name="likes" id="likes"
placeholder="Enter what your pet likes" required />
</div>
</header>
<footer>
<input type="submit" value="Submit" />
<input type="reset" value="Reset" />
</footer>
</form>
</div>
</main>
<script>
document.getElementById('petForm').addEventListener('submit', (e)
=> {
e.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;
const pet = {
name,
age,
weight,
type,
likes,
};
console.log(pet);
console.log(JSON.stringify(pet, null, 2)); });
</script>
</body>
</html>
./style.css
@import url('https://fonts.googleapis.com/css?family=Montserrat');
body, html
{ margin: 0;
padding: 0;
background-
color: #aaa;
}
body { font-family: 'Montserrat', sans-
serif; font-size: 14px; font-weight:
400;
}
main { position:
absolute; top: 0;
bottom: 0; right:
0; left: 0; margin:
auto;
}
.container { display:
flex; flex-
direction: row;
height: 50%; width:
50%;
box-shadow: #444 0px 0px 10px;
}
@media screen and (max-width: 900px) {

.container
{ display: flex;
flex-direction:
row; height: 50%;
width: 80%;
}
}
.left-container,
.right-container { padding-
top: 1em;
}
.left-container { flex: 1; display:
flex; flex-direction: column;
justify-content: space-between;
align-items: center;
background: #444; text-align:
center; padding-top: 1em; font-
weight: 600;
}
.left-container h1 { color:
#fff; display: inline-
block; font-size:
28px; font-weight:
600; margin-top: 2em;
}
.left-container img { max-

width: 200px; filter:
grayscale(1);
}
.right-container
{ flex: 2;
background: #fff;
}
.right-container h1 { text-
align: center; color:
rgba(0, 0, 0, 0.8); font-
size: 28px; font-weight:
600; margin-bottom: 0;
margin-top: 2em;
}
.right-container {
display: flex; flex-direction:
column; justify-content:
space-between; padding-bottom:
5em;
}
.field { width: 80%; margin: 0 auto;

display: grid; grid-template-
columns: 1fr 3fr; align-items:
center; padding: 0.75em;
}
.field label { font-size:

large; font-family:
sans-serif;
}
.field input[type="text"],
.field input[type="number"],
.field select { padding: 0; margin:
0; border: none; border-
bottom: 1px solid; font-size:
large; background-color:
transparent;
}
footer { display: flex; flex-

direction: row; justify-
content: center; align-
items: center;
}
footer input
{ border: none;
padding: 0.7em
2em; border:
2px solid #444;
text-transform:
uppercase;
font-weight:
bolder; margin:
Page 19
0 2em;
background:
transparent;
color: #444;
cursor:
pointer; font-
family:
"Montserrat",
sans-serif;
font-size:
large;
transition-
duration:
500ms;
}
footer input:hover
{ background: #444;
color: #fff;
}
input:focus,
select:focus,
textarea:focus,
button:focus
{ outline: none;
}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0; }
input[type=number] {
-moz-appearance: textfield;
}
20
Page
Output:
Page 21
Practical 9
Q: 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 the bottom of the page. On clicking on this button JavaScript should
redesign the complete page using jQuery in a nice presentable way.
Ans:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style type="text/css">
.container{ width: 70%; margin:
auto; align-items:
center; background-color:
#D5D8DC; padding-bottom:
10px;
}
.info-table{ width: 80%;
margin: auto; border: 3px
solid black; border-
collapse: collapse;
margin-top: 2%; margin-
bottom: 2%;
}
.table-row{ width:
100%; margin:
auto;
}
.table-data{ width: 50%;
border: 2px solid white;
border-collapse:
collapse;
}
</style>
</head>
<body>
Page 22
<div>
<h1 class="heading">B.Sc(Hons) Computer Science</h1>
<table>
<tr>
<td>Fee(per annum):</td>
<td>30455</td>
</tr>
<tr>
<td>Eligibility Criteria:</td>
<td>12th Pass</td>
</tr>
<tr>
<td>Subjects and credit scores</td>
<td>
<table>
<tr>
<th>Subject</th>
<th>Credit score</th>
</tr>
<tr>
<td>IT</td>
<td>6</td>
</tr>
<tr>
<td>TOC</td>
<td>6</td>
</tr>
<tr>
<td>SP</td>
<td>4</td>
</tr>
<tr>
<td>Micro</td>
<td>4</td>
</tr>
</table>
</td>
</tr>
<tr>
Page 23
<td>Future Opportunities</td>
<td>CEO of India</td>
</tr>
</table>
</div>
<button id="btn-style">
Style Page
</button>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"
></script>
<script type="text/javascript">
$(document).ready(function(){
$('#btn-style').click(function(){
$("div").addClass('container');
$("table").addClass('info-table');
$("tr").addClass('table-row');
$("td").addClass('table-data');
$(".heading").css({
"textAlign":'center'
});
});
});
</script>
</body>
</html>
Output:
Page 24
Practical 10
Q: Create an HTML page for an image gallery which shows the use of BOOTSTRAP to rearrange
and resize its contents on resizing the browser.
Ans:
<!DOCTYPE html>
<html>
<head>
scale=1">
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.mi
n.css">
<title>Gallery</title>
</head>
<body>
Page 25
<div class="jumbotron text-center">
<h1>IMAGE GALLERY</h1>
<p>Responsive Image gallery using bootstrap.</p>
</div>
<img class="col-sm-4" src="https://picsum.photos/200/"></img>
</div>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"
></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.
js"></script>
</body>
</html>
Output:
Page 26
Practical 11
Q: 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 the browser.
Ans:
Page 27
./server.js
var http = require('http');
var server = http.createServer(function (req, res)

{ res.writeHead(200, { 'Content-Type': 'text/plain' });
res.end('Hello world, This is my Node.js server');
});
server.listen(10000, function () {
console.log('Server is running on port 10000');
});
Output:
Page 28
Practical12
Q: Create index.html file containing two forms for SignIn and SignUp. Submitting SignIn form
should search for credentials in mysql database using a server created in previous practical. On
successful signin, a welcome page should be displayed. Submitting the SignUp form should
insert a new entry for credentials in the mysql database using the server created in previous
practical. On successful sign up, user should be returned back to index.html (use Node.js for
database connectivity with mysql).
Ans:
./index.html
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<title>Website</title>
</head>
<body>
<form id="signInForm" action="/signin" method="POST">
<h2>Sign In</h2>
<label for="username">Username</label>
<input type="text" name="username" id="username" required>
<label for="password">Password</label>
<input type="password" name="password" id="password" required>
<button type="submit">Sign In</button>
</form>
<form id="signUpForm" action="/signup" method="POST">

<h2>Sign Up</h2>
<label for="username">Username</label>
<input type="text" name="username" id="username" required>
<label for="password">Password</label>
<input type="password" name="password" id="password" required>
Page 29
<button type="submit">Sign Up</button>
</form>
</body>
</html>
./server.js
const http = require('http');

const mysql = require('mysql');
const url = require('url');
const fs = require('fs'); const
port = 3000;
// Create a MySQL connection const

connection = mysql.createConnection({ host:
'localhost', user: 'root', password: '',
database: 'your_database'
});
// Connect to the MySQL database

connection.connect((err) => { if (err) throw
err; console.log('Connected to the
database');
});
// Create an HTTP server const server =

http.createServer((req, res) => { const { pathname,
query } = url.parse(req.url, true);
if (req.method === 'GET') { // Serve the index.html file if

(pathname === '/') { fs.readFile('index.html', (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); }
Page 30
});
}
} else if (req.method === 'POST') {
// Handle form submission for
SignIn if (pathname === '/signin')
{ let body = ''; req.on('data',
(chunk) => { body += chunk;
});
req.on('end', () => { const { username, password } =

JSON.parse(body);
// Perform a database query to check the credentials const query

= `SELECT * FROM users WHERE username =
'${username}' AND password = '${password}'`;
connection.query(query, (err, results) => { if (err)
{ res.writeHead(500, { 'Content-Type': 'text/plain' });
res.end('Internal Server Error');
}
else { if (results.length > 0) {
// Successful SignIn, redirect to the welcome page
res.writeHead(302, { 'Location': '/welcome'
});
res.end();
} else {
// Invalid credentials, display an error message res.writeHead(200,
{ 'Content-Type':
'text/plain' });
res.end('Invalid username or password'); }
}
});
});
}
// Handle form submission for SignUp if
(pathname === '/signup') { let body = '';
req.on('data', (chunk) => { body +=
chunk;
});
Page 31
req.on('end', () => { const { username, password } =
JSON.parse(body);
// Perform a database query to insert the new user

const query = `INSERT INTO users (username, password)
VALUES ('${username}', '${password}')`;
connection.query(query, (err, results) => { if (err) {
res.writeHead(500, { 'Content-Type': 'text/plain'
});
res.end('Internal Server Error');
} else {
// Successful SignUp, redirect back to the
index.html page res.writeHead(302, { 'Location': '/' });
res.end();
}
});
});
}
} })
;
server.listen(port, () => { console.log(`Server

running on port ${port}`);
});
Practical13
Q: Create an HTML page with one input field, one radio button and a text field for display. The
first input field will take a mathematical expression as input. The two radio buttons will be
displayed as SQUARE and DOUBLE. The user selects whichever option, the result of the
mathematical expression as entered by the user, will be squared or doubled and the
corresponding answer should be displayed in the text field.
Ans:
<!DOCTYPE html>
<html>
<head>
Page 32
scale=1.0">
<style> body { font-family: Arial,
sans-serif;
}
form { width: 300px;

margin: 0 auto;
}
label { display:
block; margin:
10px 0;
}
#mathExpression,
#result { width: 100%;
padding: 10px; box-
sizing: border-box;
}
input[type="radio"]
{ margin: 0 10px 0 0;
}
input[type="submit"]
{ background-color:
#4CAF50; color: white;
padding: 10px 20px;
border: none; cursor:
pointer; width: 100%;
margin-top: 10px;
}
input[type="submit"]:hover { background-
color: #45a049;
}
</style>
<title>Math Expression Evaluator</title>
</head>
Page 33
<body>
<form id="calcForm">
<label for="mathExpression">Enter a mathematical
expression:</label>
<input type="text" id="mathExpression" name="mathExpression">
<label for="square">Square:</label>
<input type="radio" id="square" name="option" value="square">
<label for="double">Double:</label>
<input type="radio" id="double" name="option" value="double">
<label for="result">Result:</label>
<input type="text" id="result" name="result" readonly>
<input type="submit" value="Calculate">
</form> <script>
document.querySelector('#calcForm').addEventListener('submit'
,
function (event) {
event.preventDefault();
let expression =
document.querySelector('#mathExpression').value;
let option =
document.querySelector('input[name="option"]:checked').value;
let result; try { let value =
eval(expression); if (option ===
'square') { result = Math.pow(value,
2); } else if (option === 'double')
{ result = value * 2;
} document.querySelector('#result').value =
result;
} catch (error) { alert('Invalid mathematical
expression'); }
});
</script>
</body>
</html>
Output:
Page 34
Practical14
Q: Create a form that takes data from a customer. The form must be well designed and should
accept the customer’s FirstName, LastName, Age, Birthday and FoodPreferences. At the
submission of this form, create a
Customer object in JavaScript using the above values and an equivalent JSON object. Print both
these objects on the console. Using AJAX, displays the data of two customers in a presentable
way.
Ans:
Page 35
<!DOCTYPE html>
<html>
<head>
<title>Customer Form</title>
href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"
/>
<script
src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></scr
ipt> </head>
<body>
<div class="col-sm-6 col-sm-offset-3">
<h1>Customer Form</h1>
<form id="customerForm">
<div class="form-group">
<label for="firstName">First Name</label>
<input type="text" class="form-control" id="firstName"
placeholder="First Name" />
</div>
<label for="lastName">Last Name</label>
<input type="text" class="form-control" id="lastName"
placeholder="Last Name" />
</div>
<label for="age">Age</label>
<input type="number" class="form-control" id="age"
placeholder="Age" />
</div>
<label for="birthday">Birthday</label>
<input type="date" class="form-control"
id="birthday" />
</div>
<label for="foodPreferences">Food Preferences</label>
<input type="text" class="form-control"
Page 36
id="foodPreferences" placeholder="Food Preferences" />
</div>
<button type="submit" class="btn
btn-success">Submit</button>
</form>
</div>
<script>
$(document).ready(function () {
$("#customerForm").submit(function (e) {
e.preventDefault();
// Create JavaScript Object

const customer = { firstName: $
("#firstName").val(), lastName:
$("#lastName").val(), age: $
("#age").val(), birthday: $
("#birthday").val(),
foodPreferences: $
("#foodPreferences").val() };
// Create JSON Object const customerJSON =

JSON.stringify(customer);
// Print objects to console

console.log('JavaScript Object:', customer);
console.log('JSON Object:', customerJSON); });
});
$.ajax({ url: "https://jsonplaceholder.typicode.com/users", //
JSONPlaceholder URL
type: "GET", dataType: "json", success: function
(data) { for (let i = 0; i < 2; i++) { // Display
the data of
the first two customers const customer =
data[i]; const customerDiv =
$("<div></div>").addClass("customer");
customerDiv.append($("<h2></h2>").text(customer.name));
customerDiv.append($("<p></p>").text("Email: " +
customer.email));
Page 37
$("body").append(customerDiv); // Add the
customer div to the body
} }, error: function (jqXHR, textStatus,
errorThrown) { console.log("AJAX Error:",
textStatus); }
});
</script>
</body>
</html>
Output:
Page 38
Page 39

IT Practicals (21013570042)

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 Practicals (21013570042)

Uploaded by

Copyright:

Available Formats

College of Vocational Studies

SUBMITTED BY: SUBMIT

The network address is: 192.168.1

body { font-family: Arial, sans-

.container { width: 80%; margin: 20px auto; padding:

var interval = setInterval(printTable, 5000);

let count = 0; let intervalId = setInterval(function() { count+

setTimeout(function() { console.log("This message will print

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

@media screen and (max-width: 900px) {

.left-container img { max-

.field { width: 80%; margin: 0 auto;

.field label { font-size:

footer { display: flex; flex-

var http = require('http');

var server = http.createServer(function (req, res)

<form id="signUpForm" action="/signup" method="POST">

const http = require('http');

// Create a MySQL connection const

// Connect to the MySQL database

// Create an HTTP server const server =

if (req.method === 'GET') { // Serve the index.html file if

req.on('end', () => { const { username, password } =

// Perform a database query to check the credentials const query

// Perform a database query to insert the new user

server.listen(port, () => { console.log(`Server

form { width: 300px;

// Create JavaScript Object

// Create JSON Object const customerJSON =

// Print objects to console

You might also like