Scribd
Upload
79 views40 pages

ITPractical (2102048)

The document details 5 practical assignments completed by a student. It includes using ipconfig and tracert, creating HTML/CSS pages with details about themselves, using JavaScript to print multiplication tables, and styling text with buttons.

Uploaded by

email4ishan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
79 views40 pages

ITPractical (2102048)

The document details 5 practical assignments completed by a student. It includes using ipconfig and tracert, creating HTML/CSS pages with details about themselves, using JavaScript to print multiplication tables, and styling text with buttons.

Uploaded by

email4ishan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 40

Name=》Randhir kumar

Roll no =》2102048
Subject=》information technology
Submitted to=》praveen kumar
Semester =》5th [3rd year]

Practical 1
Display your systems IP Address, Subnet mask using ipconfig, and find out the network address
and the maximum number of systems possible on your network and range of IP addresses
available to these systems.

● System IP Address: 192.168.43.165

● Subnet mask: 255.255.255.0

● Network ID: 192.168.43.0

● Broadcast ID: 192.168.43.255

● Maximum number of system possible on the network: 254

● Range of IP addresses: 192.168.43.0 to 192.168.43.255


● Class type: c

Practical 2
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.
’
Practical 3
Html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-
scale=1.0" />
<title>About me</title>
<link rel="stylesheet" href="./main.css" />
</head>

<body>
<header class="tophead">
<p class="tophead-intro">Hi I'm</p>
<h1 class="tophead-heading">Randhir kumar</h1>
</header>
<section class="about-section">
<h1>About me</h1>
<p>
I'm a final year student of Bsc (Hons.) Computer Science at
Bhaskar Acharya College Of Applied Science, University of Delhi.
</p>
</section>

<section class="hobbies-section">
<h1>My Hobbies</h1>
<p>I love listening to music, watching anime, tv series and
reading manga.</p>
</section>

<section class="course-section">
<h1>My Course</h1>
<p>
<br>Things that I have learnt so far:
<div class="course-list">
<ul>
<li>C++</li>
<li>Java </li>
<li>DSA</li>
<li>Python</li>
<li>Computer Networks</li>
<li>Operating System</li>

</ul>
</div>
</p>
</section>

<section class="plan-section">
<h1>My Plans</h1>
<p>I will do M.Ca after compliting graduation.Along with, i will
do my CDS prepration.</p>
</section>

<footer class="content-footer">
<p>Say hi to me:</p>
<ul class="social">
<li>
<a class="css-is-deranged" href="#"
>Github</a
>
</li>
<li>
<a class="css-is-deranged" href="#"
>Twitter</a
>
</li>
</ul>
</footer>
</body>
</html>

CSS code :
body {
color: #222222;
font-size: 1em;
font-family: "Open Sans", "Helvetica Neue", sans-serif;
}

.content-footer,
.tophead-heading,
.tophead-intro {
text-align: center;
}

.tophead {
padding: 6em 0;
border-top: solid 1em #8f2456;
}

.tophead-intro {
margin-bottom: 1.0em;
font-family: "Gentium Book Basic", Georgia, serif;
font-size: 20em;
}

.tophead-heading {
color: #f16363;
margin-top: -0.2em;
font-family: "Open Sans", "Helvetica Neue", sans-serif;
font-weight: bold;
font-size: 8em;
letter-spacing: -0.02em;
text-transform: uppercase;
}

.about-section,
.hobbies-section,
.course-section,
.plan-section {
max-width: 38em;
margin-left: auto;
margin-right: auto;
margin-top: 2em;
}

.about-section > p,
.hobbies-section > p,
.course-section,
.plan-section > p,
.content-footer > p {
font-weight: 300;
letter-spacing: 0.05em;
}

section > h1 {
margin-top: 2em;
}

.content-footer,
.tophead-heading,
.tophead-intro {
text-align: center;
}

.tophead {
padding: 6em 0;
background-size: cover;
background-repeat: no-repeat;
border-top: solid 1em #ffcf33;
}

.tophead-intro {
margin-bottom: 0.1em;
font-family: "Gentium Book Basic", Georgia, serif;
font-size: 2em;
}

.tophead-heading {
margin-top: -0.2em;
font-family: "Open Sans", "Helvetica Neue", sans-serif;
font-weight: bold;
font-size: 6em;
letter-spacing: -0.02em;
text-transform: uppercase;
}
.about-section > p,
.hobbies > p,
.content-footer > p {
font-weight: 300;
letter-spacing: 0.05em;
}

h2 {
font-family: "Gentium Book Basic", Georgia, serif;
font-size: 1.2em;
font-weight: bold;
}

.about-section,
.hobbies-section,
.course-section,
.plan-section {
max-width: 38em;
margin-left: auto;
margin-right: auto;
margin-top: 2em;
}
.content-footer {
margin: 50px 0;
padding: 20px 0;
text-align: center;
background-color: #73a8c2;
text-decoration: none;
}
.social > li {
display: inline-block;
margin: 0 5px }
.content-footer > p {
color: #f7ede1;
}
a {
font-weight: bold;
text-decoration: none;
color: #f16363;
}

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


.tophead {
padding: 8em 0;
}
.tophead-heading {
font-size: 8em;
}
.content-footer {
padding: 2em 2.5em;
}
}
Output :
Practical 4
Html code :
<!--
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.
https://sudiptog81-it-mul-tables.netlify.app
-->

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Multiplication Tables</title>
<link rel="stylesheet" href="./style.css">
</head>

<body>
<main id="main">
</main>

<script src="./script.js"></script>
</body>

</html>

JavaScript Code:
const mainEl = document.getElementById('main');
var i = 2;
var j = 1;
var t = 1;

var colors = ['#E74C3C', '#3498DB', '#27AE60', '#8E44AD', '#000000'];

setInterval(() => {
if (j > 10) {
i++;
j = 1;
}

if (i > 10) return;

const child = document.createElement('p');


child.innerHTML = `${i} * ${j} = ${i * j}`;
child.style.color = colors[(j - 1) % 5];
child.style.fontSize = `${t}rem`;
mainEl.appendChild(child);
window.scrollTo(0, document.body.scrollHeight);

j++;
t += 0.05;
}, 5e3);

CSS Code:
body {
font-family: monospace;
}

p {
margin: 0;
}

Output:
Practical 5
Html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-
scale=1.0" />
<title>Style Paragraph</title>
<link rel="stylesheet" href="style.css" />
<script defer src="script.js"></script>
</head>
<body>
<h1>Click the buttons below to style the paragraph.</h1>
<p class="paragraph">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit eos
mollitia
expedita sint quidem id, ut hic eum, asperiores amet quaerat
autem quasi
unde sequi molestias itaque atque explicabo assumenda! Lorem
ipsum dolor
sit, amet consectetur adipisicing elit. Velit sed, et eum enim a
odit
ullam quo in nesciunt consequatur reiciendis tempora minima quasi
laborum,
recusandae laudantium, consectetur libero mollitia. Lorem ipsum
dolor sit,
amet consectetur adipisicing elit. Commodi magnam quas aperiam
fuga illum,
molestias adipisci deserunt voluptatibus doloribus aliquid. Illo
quia sit
necessitatibus deleniti saepe possimus cum perferendis earum?
</p>

<div class="container">
<button class="el el--1">Red</button>
<button class="el el--2">Green</button>
<button class="el el--3">Blue</button>
<button class="el el--4">10</button>
<button class="el el--5">20</button>
<button class="el el--6">30</button>
<button class="el el--7">Sans-serif</button>
<button class="el el--8">Cursive</button>
<button class="el el--9">Monospace</button>
</div>
</body>
</html>

JavaScript code:
const btnRed = document.querySelector(".el--1");
btnRed.addEventListener("click", function () {
var textEl = document.querySelector(".paragraph");
console.log(textEl.textContent);
if (textEl.classList.contains("green-text")) {
textEl.classList.remove("green-text");
}

if (textEl.classList.contains("blue-text")) {
textEl.classList.remove("blue-text");
}

textEl.classList.add("red-text");
});

const btnGreen = document.querySelector(".el--2");


btnGreen.addEventListener("click", function () {
var textEl = document.querySelector(".paragraph");
console.log(textEl.textContent);
if (textEl.classList.contains("red-text")) {
textEl.classList.remove("red-text");
}

if (textEl.classList.contains("blue-text")) {
textEl.classList.remove("blue-text");
}

textEl.classList.add("green-text");
});

const btnBlue = document.querySelector(".el--3");


btnBlue.addEventListener("click", function () {
var textEl = document.querySelector(".paragraph");
console.log(textEl.textContent);
if (textEl.classList.contains("red-text")) {
textEl.classList.remove("red-text");
}

if (textEl.classList.contains("green-text")) {
textEl.classList.remove("green-text");
}

textEl.classList.add("blue-text");
});

const btn10 = document.querySelector(".el--4");


btn10.addEventListener("click", function () {
var textEl = document.querySelector(".paragraph");
console.log(textEl.textContent);
if (textEl.classList.contains("md-text")) {
textEl.classList.remove("md-text");
}

if (textEl.classList.contains("large-text")) {
textEl.classList.remove("large-text");
}

textEl.classList.add("small-text");
});

const btn20 = document.querySelector(".el--5");


btn20.addEventListener("click", function () {
var textEl = document.querySelector(".paragraph");
console.log(textEl.textContent);
if (textEl.classList.contains("small-text")) {
textEl.classList.remove("small-text");
}

if (textEl.classList.contains("large-text")) {
textEl.classList.remove("large-text");
}

textEl.classList.add("md-text");
});

const btn30 = document.querySelector(".el--6");


btn30.addEventListener("click", function () {
var textEl = document.querySelector(".paragraph");
console.log(textEl.textContent);
if (textEl.classList.contains("small-text")) {
textEl.classList.remove("small-text");
}

if (textEl.classList.contains("md-text")) {
textEl.classList.remove("md-text");
}

textEl.classList.add("large-text");
});

const btnSans = document.querySelector(".el--7");


btnSans.addEventListener("click", function () {
var textEl = document.querySelector(".paragraph");
console.log(textEl.textContent);
if (textEl.classList.contains("cursive-text")) {
textEl.classList.remove("cursive-text");
}

if (textEl.classList.contains("monospace-text")) {
textEl.classList.remove("monospace-text");
}

textEl.classList.add("sans-serif-text");
});

const btnCursive = document.querySelector(".el--8");


btnCursive.addEventListener("click", function () {
var textEl = document.querySelector(".paragraph");
console.log(textEl.textContent);
if (textEl.classList.contains("sans-serif-text")) {
textEl.classList.remove("snas-serif-text");
}

if (textEl.classList.contains("monospace-text")) {
textEl.classList.remove("monospace-text");
}

textEl.classList.add("cursive-text");
});
const btnMonospace = document.querySelector(".el--9");
btnMonospace.addEventListener("click", function () {
var textEl = document.querySelector(".paragraph");
console.log(textEl.textContent);
if (textEl.classList.contains("sans-serif-text")) {
textEl.classList.remove("sans-serif-text");
}

if (textEl.classList.contains("cursive-text")) {
textEl.classList.remove("cursive-text");
}

textEl.classList.add("monospace-text");
});

CSS Code:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

html {
font-size: 62.5%;
}

body {
background-color: #f7f7f7;
width: 120rem;
margin: 0 auto;
}

h1 {
font-family: sans-serif;
font-weight: normal;
color: palevioletred;
font-size: 28px;
width: 700px;
margin: 40px auto;
text-align: center;
}

.paragraph {
border: 3px solid #228b22;
padding: 20px;
font-size: 18px;
margin: 40px auto;
font-family: serif;
}

.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
/* grid-template-rows: 1fr 1fr 1fr; */
gap: 20px;
padding: 40px 50px;
}

.el {
cursor: pointer;
font-family: sans-serif;
padding: 1.6rem 3.2rem;
text-transform: uppercase;
font-weight: bold;
background-color: #333;
color: #f7f7f7;
border: none;
transition: all 0.4s;
font-size: 1.8rem;
}

.el:focus {
box-shadow: 0 0 0 0.8rem rgba(217, 119, 242, 0.877);
}

.el--1:hover {
background-color: #f03e3e;
}

.el--2:hover {
background-color: #37b24d;
}

.el--3:hover {
background-color: #1c7ed6;
}

.el--4:hover {
background-color: #222;
}

.el--5:hover {
background-color: #222;
}
.el--6:hover {
background-color: #222;
}

.el--7:hover {
background-color: #223;
}

.el--8:hover {
background-color: #222;
}

.el--9:hover {
background-color: #222;
}

.red-text {
color: #f03e3e;
}

.green-text {
color: #37b24d;
}

.blue-text {
color: #1c7ed6;
}

.small-text {
font-size: 10px;
}

.md-text {
font-size: 20px;
}

.large-text {
font-size: 30px;
}

.sans-serif-text {
font-family: sans-serif;
}

.cursive-text {
font-family: cursive;
}
.monospace-text {
font-family: monospace;
}
Output:

Practical 6
Html code:
<!--
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.
https://sudiptog81-it-pet-form.netlify.app
-->

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>PetForm</title>
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/
all.min.css"

integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01S
wNsOMqvEBFlcgUa6xLiPY/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-
rawpixel-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>

CSS Code:
@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: 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;
}
Output:

Practical 7
Html code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Practical 7</title>
<style type="text/css">
#pet-data{
border: 1px solid black;
border-radius: 10px;
border-collapse: collapse;
}
td{
border: 1px solid black;
border-collapse: collapse;
}
#btn-fetch{
margin-top: 20px;
font-size: 24px;
font-weight: bold;
background-color: black;
color: white;
border-radius: 8px;
}
</style>
</head>
<body>
<!-- <table id="pet-data">
<thead>
<tr>
<td>ID</td>
<td>Title</td>
<td>Body</td> -->
<!-- <td>Type</td>
<td>Likes</td> -->
<!-- </tr>
</thead>
<tbody id="content">
</tbody>
</table> -->

<div id="content">

</div>

<button id="btn-fetch">Fetch Data</button>


<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script type="text/javascript">
// $("#btn-fetch").click(function(){
// $.ajax({
// type: "Get",
// url: "https://jsonplaceholder.typicode.com/posts",
// dataType: "json",
// success: function(result){
// console.log(result);
// }
// });
// });
var btnFetch = document.getElementById('btn-fetch');
var content = document.getElementById('content');

btnFetch.addEventListener('click', ()=>{
const xhr = new XMLHttpRequest();

xhr.open("GET",'/pet.json',true);

xhr.onload = ()=>{
console.log(xhr.responseText);
renderHtml(JSON.parse(xhr.responseText));
}

xhr.send();

});

function renderHtml(data){
content.innerHTML = "";
for (var i = 0; i <= data.length; i++) {
let p = document.createElement('p');
let htmlpart = "";
htmlpart += data[i].name+" is a "+data[i].type+" with age
"+data[i].age+" years and weight "+data[i].weight+"kg and likes
"+data[i].likes;
p.innerHTML = htmlpart;
content.append(p);
// console.log(tr);
htmlpart="";
}

</script>

</body>
</html>

Json code:
[
{
"name":"Pluto",
"age":3,
"weight":12,
"type":"Pavellion",
"likes":"eating, playing with ball"
},
{
"name":"Hulk",
"age":4,
"weight":22,
"type":"German Sefford",
"likes":"Biting, eating flesh"
},
{
"name":"Jerry",
"age":2.5,
"weight":8,
"type":"cat",
"likes":"sleeping"
},
{
"name":"Tom",
"age":0.5,
"weight":0.7,
"type":"Mouse",
"likes":"running, eating cheese"
},
{
"name":"Chiku",
"age":1,
"weight":1.2,
"type":"Rabbit",
"likes":"running, eating carrot"
}
]

Output:

Practical 8
Hmtl code:
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>Practical 8</title>
<style type="text/css">
.container {
width: 70%;
margin: auto;
align-items: center;
background-color: #D9CAB3;
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>
<div>
<h1 class="heading">Bsc Hons Computer Science</h1>
<table>
<tr>
<td>Fee</td>
<td>25644</td>
</tr>
<tr>
<td>Eligibility Criteria</td>
<td>10-12 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>DAV</td>
<td>4</td>
</tr>
<tr>
<td>DIP/Micro</td>
<td>4</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>Future Opportunities</td>
<td>Bohot scope h isme</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:

After clicking on Style page button:

Practical 9
Html code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min
.css">
<title>Practical 9</title>
<style type="text/css">
/*img{
margin: 20px;
}*/
</style>
</head>
<body>

<div class="jumbotron text-center">


<h1>IMAGE GALLERY</h1>
<p>Responsive Image gallery using bootstrap.</p>
</div>
<div class="container">
<img class="col-sm-4" src="https://picsum.photos/200/"></img>
<img class="col-sm-4" src="https://picsum.photos/200/"></img>
<img class="col-sm-4" src="https://picsum.photos/200/"></img>
<img class="col-sm-4" src="https://picsum.photos/200/"></img>
<img class="col-sm-4" src="https://picsum.photos/200/"></img>
<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.j
s"></script>

</body>
</html>

Output:
Practical 10
Java Script code:
var http = require('http');

http.createServer((request,response)=>{
response.write("Hello World, This is my Node.js server");
response.end();
})
.listen(10000,()=>console.log('server started at port 10000'));

Output:
Practical 10
Html code:
<!--
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.
https://sudiptog81-it-signin-signup.netlify.app/
-->

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>SignInUp</title>
<link rel="stylesheet" href="./style.css">
</head>

<body>
<main class="container" id="container">
<div class="form-container sign-up-container">
<form action="#">
<h1>Sign Up</h1>
<input type="text" placeholder="Name" />
<input type="email" placeholder="Email" />
<input type="password" placeholder="Password" />
<a href="#">You agree to T&C</a>
<button>Sign Up</button>
</form>
</div>
<div class="form-container sign-in-container">
<form action="#">
<h1>Sign in</h1>
<input type="email" placeholder="Email" />
<input type="password" placeholder="Password" />
<a href="#">Forgot your password?</a>
<button>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>
Java Script code:
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', () => {
container.classList.remove("right-panel-active");
});
Output:

After clicking on Sign Up button:

You might also like