Scribd
Upload
49 views33 pages

WP File

Uploaded by

dsdevanshsharma14
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
49 views33 pages

WP File

Uploaded by

dsdevanshsharma14
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/ 33

INDEX

S.NO TOPIC DATE SIGNATURE

Create a web page that covers


1. your CV using various HTML
tags (UL, OL, Table, etc.).
Create a web page that displays
brief details of various
2. programming languages using
various types of CSS.
Create a web page using
JavaScript and HTML to
3. demonstrate Simple Calculator
Application.
Create a web page covering the
basic CRUD operations (Create,
4. read, update, delete) that
implements To-do/Grocery lists
using JavaScript and HTML.
Create a JavaScript application
based on various datatypes,
5. statements, keywords and
operators.

Create a JavaScript application


6. with window objects and
document object.

Create a JavaScript application


7. with object creation and by
adding methods of objects.

Create a JavaScript application


8. with loops to incorporate the
concept of iteration.

Create a JavaScript application


9. for random number generation.

1
Build a unit converter
10. application using HTML and
JavaScript.

2
EXPERIMENT 1
Create a web page that covers your CV using various HTML tags (UL, OL,
Table, etc.).
<html>

<head>

<title>CV OF VAISHALI PREMANI</title>

</head>

<body font="times new roman">

<marquee><b>"CV OF VAISHALI PREMANI"</b></marquee>

</div>

<div class="Personal Information">

<h2>Personal Information</h2>

<p><b>Name :</b> VAISHALI PREMANI</p>

<p><b>Date of Birth:</b> 07 DECEMBER, 2003</p>

<p><b>Gender :</b> FEMALE</p>

<p><b>Father's name :</b> RAJESH PREMANI</p>

<p><b>Mother's name :</b> SEJAL PREMANI</p>

<p><b>Nationality :</b> INDIAN</p>

<p><b>Religion :</b> HINDU</p>

<p><b>Adress :</b> A-6/56 Sector-15 Rohini Delhi-110089.</p>

</div>

<div class="Contact">

<h2>Contact</h2>

<p><b>Email id:</b>[email protected]</p>

<p><b>Mobile no :</b>8800XXXXX</p>

</div>

<div class="Skills">

<h2>Skills</h2>

<ul>

<li><b>Programming Languages : Python, C</b></li>

</li>

</ul>

</div>

<div class="Language">

3
<h2>Language</h2>

<ul>

<li>English</li>

<li>Hindi</li>

</ul>

</div>

<div class="Hobbies">

<h2>Hobbies</h2>

<ul>

<li>Learning new things.</li>

<li>Listening music.</li>

<li>Playing Badminton.</li>

</ul>

</div>

</div>

<div class="right">

<div class="name">

</div>

<div class="Objective">

<h2>Objective</h2>

<p>To secure a challenging position in a reputable organization to expand


my learning knowledge and skill.</p></div>

<div class="Education">

<h2>Education</h2>

<table border="1" width="85%">

<tr>

<th>University/college/school </th>

<th> class/year </th>

<th> Board </th>

<th> Passing Year </th>

<th> Marks obtained </th>

<th> Total marks </th>

<th> percentage/cgpa</th>

</tr>
4
<tr>

<td>DR. AKHILESH DAS GUPTA INSTITUTE OF PROFESSIONAL STUDIES </td>

<td>B.tech (AI & ML) </td>

<td> INDRAPRASTHA UNIVERSITY </td>

<th> Appearing </th>

<td> 1971 </td>

<td> 2200 </td>

<td> (Ist year) 9.16 GPA</td>

</tr>

<tr>

<td>ST. ANGEL'S SCHOOL </td>

<td> 12th </td>

<td> CBSE Board </td>

<th> 2022 </th>

<td> 572 </td>

<td> 600 </td>

<td> 95.3% </td>

</tr>

<tr>

<td>ST. ANGEL'S SCHOOL </td>

<td> 10th </td>

<td> CBSE Board </td>

<th> 2020 </th>

<td> 457 </td>

<td> 500 </td>

<td> 91.4% </td>

</tr>

</table>

</ol>

</ul>

</div>

<div class="Declaration">

<h2>Declaration</h2>

<p> I hereby declare that all the above information is true to the best
of my knowledge.
5
</p>

</div>

</div>

</div>

</body>

</html>

6
EXPERIMENT 2
Create a web page that display brief details of various programming languages
using various types of CSS.

<!DOCTYPE html>

<html>

<head>

<title>

</title>

</head>

"Different types of programming language"

<body font= "times new roman">

<marquee><b><u>DIFFERENT</u><u>PRAOGRAMMING</u><u>LANGUAGE</u></b

></marquee>

<imgsrc ="C:\Users\VAISHALI\Downloads\prog.jpeg" width= "900px"

height= "350px">

<nav class="navbar background">

<ul class="nav-list">

<div class="logo">

</div>

<li><a href="#language 1">Procedural programming

language</a></li> language</a></li>

<li><a href="#language 2">Functional Programming

<li><a href="#language 3">object oriented language</a></li>

<li><a href="#language 4">Scripting language</a></li>

<li><a href="#language 5">Logic programming language</a></li>

</ul>

<div class="rightNav">

<input type="text" name="search" id="search">

</nav>

</div>

<button class="btnbtn-sm">Search</button>

<section class="firstsection">

<div class="box-main">
7
<div class="firstHalf">

<h1 class="text-big" id="language 1"> Procedural programming lannguage

</h1>

<p class="text-small">

A procedural language follows a sequence of statements commands in order


to achieve a desired output.

Each series of steps is called a procedure, and a program written in one of these

languages will have one or more procedures within it. Common examples of
procedural languages include:

C and C++, Java, Pascal.

</p>

<imgsrc="C:\Users\VAISHALI\Downloads\procedural.jpeg" width= "300px"

height= "100px">

</div>

</div>

</section>

<section class="secondsection">

<div class="box-main">

<div class="secondHalf">

<h1 class="text-big" id="language 2"> Functional programming languages

</h1>

<p class="text-small">

Rather than focusing on the execution of statements, functional languages


focus on the output of

mathematical functions and evaluations. Each function–a reusable module


of code– performs a specific task

and returns a result. The result will vary depending on what data you
input into the function.

Some popular functional programming languages

include: Scala, Erlang, Haskell, Elixir, F#.

</p>

<imgsrc="C:\Users\VAISHALI\Downloads\scala.jpeg" width= "300px"

height= "100px">

<imgsrc="C:\Users\VAISHALI\Downloads\erlang.jpeg" width= "100px"

height= "100px">

</div>

8
</div>

</section>

<section class="section">

<div class="paras">

<h1 class="sectionTag text-big">Object oriented langauges</h1>

<p class="sectionSub Tag text-small">

This type of language treats a program as a group of objects composed of


data and program elements, known

as attributes and methods. Objects can be reused

</div>

within a program or in other programs. This

makes it a popular language type for complex

programs, as code

is easier to reuse and scale. Some common object-oriented programming


(OOP) languages include:

Java, Python, PHP, C++.

</p>

<div class="thumbnail">

<imgsrc="C:\Users\VAISHALI\Downloads\fun.jpeg"

width= "300px" height= "100px">

</div>

</section>

<section class="section">

<div class="paras">

<h1 class="sectionTag text-big">Scripting languages</h1>

<p class="sectionSubTag text-small">

Programmers use scripting languages to automate repetitive tasks, manage


dynamic web content,

or support processes in larger applications. Some common scripting


languages include: PHP, Ruby, Python, bash.

</p>

</div>

<div class="thumbnail">

<imgsrc="C:\Users\VAISHALI\Downloads\bash.jpeg"

width= "300px" height= "100px">

<imgsrc="C:\Users\VAISHALI\Downloads\php.jpeg" width= "300px"

9
height= "100px">

1
0
</div>

</section>

<section class="section">

<div class="paras">

<h1 class="sectionTag text-big">Logic programming languages</h1>

<p class="sectionSubTag text-small">

Instead of telling a computer what to do, a logic programming language

expresses a series of facts and rules to instruct the computer on how to

make decisions.

Some examples of logic languages include: Prolog, Absys, Datalog, and Alma-0.

</p>

</div>

<div class="thumbnail">

<imgsrc="C:\Users\VAISHALI\Downloads\alma.jpeg"

width= "100px" height= "100px" >

<imgsrc="C:\Users\VAISHALI\Downloads\prolog.jpeg" width= "100px"

height= "100px>

</div>

</section>

<footer class="background">

<p class="text-footer">

Copyright ©-All rights are reserved

</p>

</footer>

</body>

</head>

10
11
EXPERIMENT 3
Create a web page using JavaScript and HTML to demonstrate Simple
Calculator Application.

<!DOCTYPE html>

<html>

<head>

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

<title>calculator using java script</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

<div class="container">

<div class="calculator">

<form>

<div>

<input type="text" name="display">

</div>

<div>

<input type="button" value="AC" onclick="display.value ='' " class="operator">

<input type="button" value="%" onclick="display.value += '/100'"


class="operator">

<input type="button" value="π" onclick="display.value +='3.14' "


class="operator">

<input type="button" value="." onclick="display.value +='.' " class="operator">

</div>

<div>

<input type="button" value="7" onclick="display.value +='7' ">

<input type="button" value="8" onclick="display.value +='8' ">

<input type="button" value="9" onclick="display.value +='9' ">

<input type="button" value="/" onclick="display.value +='/' " class="operator">

</div>

<div>

<input type="button" value="4" onclick="display.value +='4' ">

<input type="button" value="5" onclick="display.value +='5' ">

12
<input type="button" value="6" onclick="display.value +='6' ">

13
<input type="button" value="" onclick="display.value +='' " class="operator">

</div>

<div>

<input type="button" value="1" onclick="display.value +='1' ">

<input type="button" value="2" onclick="display.value +='2' ">

<input type="button" value="3" onclick="display.value +='3' ">

<input type="button" value="-" onclick="display.value +='-' " class="operator">

</div>

<div>

<input type="button" value="00" onclick="display.value +='00' ">

<input type="button" value="0" onclick="display.value +='0' ">

<input type="button" value="=" onclick= "display.value=


eval(display.value)" class="equal" class="operator">

<input type="button" value="+" onclick="display.value += '+'">

</div>

</form>

</div>

</div>

</body>

</html>

CSS STYLE:
*{

margin: 0;

padding: 0;

font-family:'Times New Roman', Times, serif ;

box-sizing: border-box;

.container{ width: 100%; height: 100vh;

background: #e3f9ff; display: flex;

align-items: center; justify-content: center;

14
.calculator{

background: #3a4452; padding:

20px; border-radius: 10px;

.calculator form input{ border: 0;

outline: 0; width: 60px; height:

60px; border-radius: 10px;

box-shadow: -8px -8px 15px rgba(255, 255, 255, 0.1) 5px 5px 15px rgba(0, 0, 0,
0.2); background: transparent;

font-size: 20px; color: #fff; cursor: pointer; margin: 10px;

form .displa

y{ display:

flex;

justify-content: flex-end; margin: 20px 0;

form .display input{ text-align: right;

flex: 1; font-size: 45px; box-shadow: none;

form input.equal{ width: 145 px;

form input.operator{ color: #33ffd8;

15
16
EXPERIMENT 4
Create a web page covering the basic CRUD (Create, Read, Update, delete) that
implements To-Do/Grocery lists using JavaScript and HTML.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>ToDo Grocery List</title>

<link rel="stylesheet" href="styles.css">

</head>

<body>

<div class="container">

<h1><b><center> TO DO Grocery List </center></b></h1>

<div class="form">

<input type="text" id="taskInput" placeholder="Add a task...">

<button onclick="addTask()">Add Task</button>

</div>

<ul id="taskList">

<!-- Tasks will be dynamically added here -->

</ul>

</div>

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

</body>

</html>

body {

font-family: Arial, sans-serif; margin: 0;

padding: 0; display: flex;

justify-content: center; align-items: center; height:

100vh; background-color:rgb(114, 49, 27);

.container {

text-align: center;

17
}

.form {

margin-bottom: 40px;

ul {

list-style: none; padding: 0;

margin: 0;

li {

margin-bottom: 15px; padding:

10px; border: 1px solid black;

button {

padding: 15px 30px; margin-left: 15px; cursor: pointer;

function addTask() {

const taskInput = document.getElementById("taskInput"); const taskList =


document.getElementById("taskList");

if (taskInput.value !== "") {

const li = document.createElement("li"); li.textContent =


taskInput.value; taskList.appendChild(li);

li.onclick = function () { this.parentNode.removeChild(this);

};

taskInput.value = "";

18
EXPERIMENT 5
Create a JavaScript application based on various Data Types, Statements,
Keywords and Operators.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>JavaScript Basics</title>

<style>

body {

font-family: Arial, sans-serif; background-color:burlywood; margin:

0; padding: 20px;

.container {

background-color:white; padding:

20px; border-radius: 5px;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.979);

h1 {

margin-bottom: 20px; color: #333;

p {

margin-bottom: 15px; color: #555;

.output {

margin-top: 20px; padding: 10px; background-color:snow; border-radius: 5px;

</style>

</head>

<body>

<div class="container">

<h1>JavaScript keywords datatypes statements and Operators</h1>

<p>Open the console to see the output.</p>

19
<script>

// Data types

let numberVar = 14; // Number

let stringVar = "Hello, JavaScript!"; // String let booleanVar = true; //

Boolean let arrayVar = [11, 12, 13, 14]; // Array

let objectVar = { name: "Jack", age: 18 }; // Object

// Operators

let addition = 9 + 11; // Addition

let subtraction = 11 - 2; // Subtraction

let multiplication = 16 * 2; // Multiplication let division = 75 / 5; //

Division let remainder = 23 % 3; // Modulus

// Statements let a = 78; let b = 79; let

result; if (a > b) {

result = "a is greater than b";

} else {

result = "b is greater than a";

// Keywords

let greeting = "Hello";

switch (greeting) { case

"Hi": console.log("Hi

there!"); break;

case "Hello": console.log("Hello!"); break;

default: console.log("Greetings!"); break;

// Output

let output = document.createElement('div');

output.classList.add('output'); output.innerHTML = `

<p>Number: ${numberVar}</p>

<p>String: ${stringVar}</p>

<p>Boolean: ${booleanVar}</p>

<p>Array: ${arrayVar}</p>

<p>Object: ${JSON.stringify(objectVar)}</p>

<p>Addition: ${addition}</p>

11
0
<p>Subtraction: ${subtraction}</p>

<p>Multiplication: ${multiplication}</p>

<p>Division: ${division}</p>

<p>Remainder: ${remainder}</p>

<p>Result: ${result}</p>

<p>greeting: ${greeting}</p>

`;

document.body.appendChild(output

);

</script>

</div>

</body>

</html>

20
EXPERIMENT 6
Create a JavaScript application with Window Objects and Document Objects.

A. Document Objects :
<html>

<head>

<title>Document's Properties</title>

</head>

<body>

<h1> Document Object</h1>

<button onclick="myFunction()">CLICK ME</button>

<p id="demo"></p>

<script>

function myFunction() { var title =

document.title; var domain = document.domain; var

body = document.body;

document.getElementById("demo").innerHTML = "the title of the document is : "

+ title

+ "<br>"

+ "domain : "

+ domain

+ "<br>"

+ "body : "

+ body;

</script>

</body>

</html>

B. Window Objects:
<html>

<head>

<title> Window's Properties</title>

21
</head>

22
<body>

<h1>Window Object</h1>

<button onclick="show()">Check</button>

<p id="prop"></p>

<script>

function show()

var h = window.innerHeight; var w = window.innerWidth; var l = window.location;

var c = window.closed; document.getElementById("prop").innerHTML =


"Frame's Height: "

+ h + "<br>"

+ "Frame's Width: "

+ w + "<br>"

+ "Window location:"

+ l

+ "<br>"

+ "Window Closed: "

+ c;

</script>

</body>

</html>

23
EXPERIMENT 7
Create a JavaScript application with Objects Creation and by adding methods of
objects.

<!DOCTYPE html>

<html>

<head>

<title>JavaScript Object Creation</title>

</head>

<body>

<h1><center>Car Information</center></h1>

<center><p id="carInfo"></p></center>

<center><button onclick="displayCarInfo()">Display Car Info</button></center>

<br/>

<center><button onclick="updateCarModel()">Update Model</button><center>

<script>

// Object creation using object literals let car

= { brand: 'Toyota', model: 'Corolla', year:

2020,

// Method to display car information displayInfo: function()

{ return `This ${this.year} ${this.brand} ${this.model}`;

},

// Method to change the car model changeModel: function(newModel) {


this.model = newModel;

return `The model has been updated to ${this.model}`;

};

// Function to display car information function displayCarInfo() {

let carInfoElement = document.getElementById('carInfo'); carInfoElement.innerHTML


= car.displayInfo();

// Function to update car model function updateCarModel() {

let newModel = prompt('Enter the new model:'); if (newModel !== null &&newModel
!== '') {

let updateMessage = car.changeModel(newModel); alert(updateMessage);

}
24
}

25
</script>

</body>

</html>

26
EXPERIMENT 8
Create a JavaScript application with loops to incorporate the concept of
Iteration.

<html>

<head>

<title>JavaScript Loop Example</title>

</head>

<body>

<h1>Multiplication Table</h1>

<table border="1">

<tr>

<th>Number</th>

<th>Multiplier</th>

<th>Result</th>

</tr>

<script>

for (let i = 2; i<= 2; i++) { for (let j = 1; j <= 10; j++) {

document.write(`

<tr>

<td>${i}</td>

<td>${j}</td>

<td>${i * j}</td>

</tr>

`);

</script>

</table>

</body>

</html>

27
28
EXPERIMENT 9
Create a JavaScript application for random number generation.

<!DOCTYPE html>

<html>

<head>

<title>Random Number Generator</title>

</head>

<body>

<div id="container">

<h1><center>Random Number Generator</center></h1>

<p><center>Click the button to generate a random number:</center></p>

<center><button onclick="generateRandomNumber()">Generate Number</button></center>

<center><p id="result"></p></center>

</div>

<script>

function generateRandomNumber() {

// Generate a random number between 1 and 100

var randomNumber = Math.floor(Math.random() * 100) + 1;

// Display the random number

document.getElementById("result").innerHTML = "Random Number: " + randomNumber;

</script>

</body>

</html>

29
EXPERIMENT 10
Built a unit convertor application using HTML and JavaScript.

<!DOCTYPE html>

<html>

<head>

<title>Unit Converter</title>

<link rel="stylesheet" href="styles.css">

</head>

<body>

<div class="converter-container">

<h2>Unit Converter</h2>

<div class="length-converter">

<h3>Length Converter</h3>

<div class="input-container">

<label for="cmInput">Centimeters (cm):</label>

<input type="number" id="cmInput" placeholder="Enter value in cm"


oninput="convertLength()">

</div>

<div class="results">

<p id="kmResult">Kilometers: 0 km</p>

<p id="mResult">Meters: 0 m</p>

<p id="mmResult">Millimeters: 0 mm</p>

</div>

</div>

<div class="temperature-converter">

<h3>Temperature Converter</h3>

<div class="input-container">

<label for="celsiusInput">Celsius (&deg;C):</label>

<input type="number" id="celsiusInput" placeholder="Enter value in


Celsius" oninput="convertTemperature()">

</div>

<div class="results">

<p id="fahrenheitResult">Fahrenheit: 32 °F</p>

<p id="kelvinResult">Kelvin: 273.15 K</p>

21
0
</div>

</div>

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

</body>

</html>

21
1

You might also like