Scribd
Upload
7 views30 pages

WP Prog

The document outlines a series of experiments focused on web development using HTML, CSS, and JavaScript. Each experiment includes an aim and corresponding code to create various web applications, such as a CV webpage, a programming languages overview, a simple calculator, and a to-do list application. The document serves as a practical guide for implementing basic web development concepts and functionalities.

Uploaded by

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

WP Prog

The document outlines a series of experiments focused on web development using HTML, CSS, and JavaScript. Each experiment includes an aim and corresponding code to create various web applications, such as a CV webpage, a programming languages overview, a simple calculator, and a to-do list application. The document serves as a practical guide for implementing basic web development concepts and functionalities.

Uploaded by

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

INDEX

[Link]. NAME OF EXPERIMENT DATE OF CHECKED SIGNATURE/


EXPERIMENT DATE REMARKS

CREATE A WEB PAGE THAT COVERS


1) YOUR CV USING VARIOUS HTML
TAGS(UL,OL,TABLE etc.)

CREATE A WEB PAGE THAT DISPLAYS


2) BRIEF DETAILS OF VARIOUS
PROGRAMMING LANGUAGES USING
VARIOUS TYPES OF CSS.

CREATE A WEBPAGE USING JAVASRIPT


3) AND HTML TO DEMONSTRATE SIMPLE
CALCULATOR APPLICATION.

CREATE A WEB PAGE COVERING THE


4) BASIC CRUD OPERATIONS (CREATE,
READ,UPDATE,DELETE)THAT
IMPLEMENTS TO-DO/ GROCERY LISTS
USING JAVA SCRIPT AND HTML.

CREATE A JAVA SCRIPTAPPLICATIONS


5) BASED ON VARIOUS DATA TYPES,
STATEMENTS, KEYWORDS AND
OPERATORS.

CREATE A JAVA SCRIPT APPLICATIONS


6) WITH WINDOWS OBJECTS AND
DOCUMENT OBJECT.

CREATE A JAVA SCRIPT APPLICATIONS


7) WITH OBJECTS CREATION AND BY
ADDING METHODS OF OBJECTS.
CREATE A JAVA SCRIPT APPLICATION
8) WITH LOOPS TO INCORPORATE THE
CONCEPT OF ITERATION.

CREATE A JAVA SCRIPT APPLICATION


9) FOR RANDOM NUMBER GENERATION.

BUILD A UNIT CONVERTOR


10) APPLICATIONUSING HTML AND JAVA
SCRIPT.
EXPERIMENT-1

AIM- CREATE A WEB PAGE THAT COVERS YOUR CV USING VARIOUS HTML TAGS(UL,OL,TABLE etc.)
CODE-

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rishabh Jain - CV</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #d2b48c;
color: #3e2723;
margin: 0;
padding: 20px;
}
.container {
max-width: 800px;
margin: auto;
padding: 20px;
background-color: #f5f5f5;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
border-radius: 8px;
}
h1 {
font-family: "Bernard MT Condensed", sans-serif;
color: #3e2723;
text-align: center;
font-size: 2em;
margin: 0;
}
h2 {
color: #5d4037;
font-family: "Book Antiqua", serif;
font-size: 1.2em;
margin-bottom: 5px;
}
ul, ol {
margin: 10px 0;
padding-left: 20px;
}
.section-title {
color: #5d4037;
border-bottom: 2px solid #8d6e63;
padding-bottom: 5px;
margin-bottom: 10px;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 10px;
}
th, td {
text-align: left;
padding: 8px;
border-bottom: 1px solid #ddd;
}
</style>
</head>
<body>
<div class="container">

<h1>Rishabh Jain</h1>
<p style="text-align:center; font-family: 'Lucida Console', monospace; color:#795548;">
[Link] Student in AI and DS<br>
Email: <a href="[Link]
</p>
<h2 class="section-title">Education</h2>
<ul>
<li>College: Dr Akhilesh Das Gupta Institute Of Professional Studies</li>
<li>Schooling (till Xth): Darbari Lal D.A.V Model School</li>
<li>Till XIIth: Bal Vidya Model School</li>
</ul>

<h2 class="section-title">Skills</h2>
<ol>
<li>Graphic Designing</li>
<li>Programming Languages: HTML, CSS, C</li>
<li>Idea Development and Research Skills</li>
</ol>

<h2 class="section-title">Experience</h2>
<table>
<tr>
<th>Position</th>
<th>Company</th>
<th>Duration</th>
</tr>
<tr>
<td>Outreaching Intern</td>
<td>Go Digital Agency</td>
<td>2 Months</td>
</tr>
</table>

<h2 class="section-title">Projects</h2>
<ul>
<li><strong>NFC Payment Card Prototype Design</strong> – Built concept model of contactless transaction card
using NodeMCU & RFID.</li>
<li><strong>CreoVault Studio</strong> – Built digital service showcase for agency clients.</li>
<li><strong>[Link]</strong> – Designed an AI-based emergency detection system for vehicles.</li>
</ul>
<h2 class="section-title">Achievements</h2>
<ul>
<li>Presented Startup Concept at IIT Roorkee, IIT Kharagpur and SRCC.</li>
<li>Selected as Class Representative for maintaining discipline and academic support in school.</li>
</ul>

</div>
</body>
</html>
EXPERIMENT- 2
AIM- CREATE A WEB PAGE THAT DISPLAYS BRIEF DETAILS OF VARIOUS PROGRAMMING LANGUAGES USING
VARIOUS TYPES OF CSS.

CODE-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Programming Languages Overview</title>
<style>
body {
background-color: #e0f7fa;
font-family: Arial, sans-serif;
color: #2e2e2e;
margin: 0;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
}
.container {
width: 90%;
max-width:800px;
background-color:#ffffff;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 4px 12px rgba(0,0, 0, 0.2);
display: grid;
grid-template-columns:1fr 1fr 1fr;
gap: 20px;
text-align: center;
}
.card {
padding: 10px;
border-radius: 8px;
background-color: #f1f8e9;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}
.card img {
width: 80px;
height: 80px;
object-fit: contain;
margin: 10px auto;
display: block;
}
h2 {
font-size: 1.2em;
color: #00796b;
}
p{
font-size: 0.9em;
color: #424242;
}
</style>
</head>
<body>
<div class="container">
<div class="card">
<h2>Python</h2>
<img src="[Link] alt="Python Logo">
<p>Python is a high-level, versatile language used in web development, data science, and AI. It features simple
syntax, making it beginner-friendly. Basic Syntax: <code>print("Hello, World!")</code>.</p>
</div>
<div class="card">
<h2>JavaScript</h2>
<img src="[Link] alt="JavaScript Logo">
<p>JavaScript is a powerful language for web development, enabling dynamic, interactive web pages. Popular for
front-end and back-end with [Link]. Basic Syntax: <code>[Link]("Hello, World!")</code>.</p> </div>

<div class="card">
<h2>C++</h2>
<img src="[Link] alt="C++ Logo">
<p>C++ is a compiled, high-performance language used in system programming, game development, and embedded
systems. Basic Syntax: <code>std::cout<< "Hello, World!";</code>.</p>
</div>
</div>
</body>
</html>
EXPERIMENT-3
AIM- CREATE A WEBPAGE USING JAVASRIPT AND HTML TO DEMONSTRATE SIMPLE CALCULATOR APPLICATION.

CODE-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Calculator</title>
<style>
/* General page styling */
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
display: flex;
justify-content: center; align-
items: center; height: 100vh;
margin: 0;
}
/* Calculator container styling */
.calculator {
background-color: #333;
border-radius: 10px; padding:
20px;
box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.2);
}
/* Display styling */
#display {
background-color: #222;
color: white;

font-size: 2em;
border: none;

padding: 10px;
text-align right;
margin-bottom:20px;
width: 100%;
border-radius: 5px;
}
/* Button grid styling */
.button-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
/* Button styling */
.button {
background-color: #444;
color: white;
font-size: 1.5em;
padding: 20px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
/* Specific button colors */
.[Link] { background-
color: #007bff;
}
.[Link]:hover {
background-color: #0056b3;
}
.[Link] {
background-color: #555;
}
.[Link]:hover {
background-color: #777;
}
.[Link] {
background-color: #000;
}
.[Link]:hover {
background-color: #333;
}
/* Equal button style */
.[Link] { grid-
column: span 2;
}
</style>
</head>
<body>
<!-- Calculator structure -->
<div class="calculator">
<!-- Display area -->
<input type="text" id="display" disabled>
<!-- Buttons area -->
<div class="button-grid">
<button class="button grey" onclick="clearDisplay()">C</button>
<button class="button grey" onclick="deleteDigit()">←</button>
<button class="button grey" onclick="appendOperator('/')">÷</button>
<button class="button grey" onclick="appendOperator('*')">×</button>

<button class="button" onclick="appendNumber(7)">7</button>


<button class="button" onclick="appendNumber(8)">8</button>
<button class="button" onclick="appendNumber(9)">9</button>
<button class="button grey" onclick="appendOperator('-')">-</button>

<button class="button" onclick="appendNumber(4)">4</button>


<button class="button" onclick="appendNumber(5)">5</button> <button
class="button" onclick="appendNumber(6)">6</button>
<button class="button grey" onclick="appendOperator('+')">+</button>

<button class="button" onclick="appendNumber(1)">1</button>


<button class="button" onclick="appendNumber(2)">2</button> <button class="button"
onclick="appendNumber(3)">3</button>
<button class="button black equal" onclick="calculate()">=</button>

<button class="button" onclick="appendNumber(0)">0</button>


<button class="button blue equal" onclick="appendOperator('.')">.</button>
</div> </div>
<script>
// Function to append numbers to the display
function appendNumber(number) { let display =
[Link]('display'); [Link] +=
number;
}
// Function to append operators to the display
function appendOperator(operator) { let display
= [Link]('display'); [Link] +=
operator;
}
// Function to clear the display
function clearDisplay() {
[Link]('display').value = '';
}
// Function to delete the last digit or operator
function deleteDigit() {
let display = [Link]('display'); [Link]
= [Link](0, -1);
}
// Function to calculate the expression in the display
function calculate() {
let display = [Link]('display');
try {
[Link] = eval([Link]); // Evaluate the expression
} catch (error) {
[Link] = 'Error'; // Display error if invalid expression
}
}
</script> </body>
</html>
EXPERIMENT-4
AIM-CREATE A WEB PAGE COVERING THE BASIC CRUD OPERATIONS(CREATE, READ,UPDATE,DELETE) THAT
IMPLEMENTS TO-DO/ GROCERY LISTS USING JAVA SCRIPT AND HTML.

CODE-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To-Do/Grocery List</title>
<style>
body {
background-color: #1a1a1a;
color: #f5f5f5;
font-family: Arial, sans-serif;
display: flex;
justify-content:center;
align-items:center;
height: 100vh;
margin: 0;
}
.container {
background-color: #333;
padding: 20px; border-
radius: 10px; width: 90%;
max-width: 500px;
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.5);
}
h1 {
text-align center;

color: #ffcc00;

font-weight: bold;
margin-bottom: 20px;

input, button {
padding:10px;
margin:5px0;
border:none;
border-radius: 5px;
}
input[type="text"] {
width: calc(100% - 22px);
}
button {
cursor: pointer;
color: #333;
background-color: #ffcc00;
}
ul {
list-style: none;
padding: 0;
}
li {
background-color: #444;
padding: 10px;
margin: 5px 0;
border-radius: 5px;
display: flex;
justify-content: space-between;
align-items: center;
}
.actions button {
background-color:#ff5722;
color: white;
margin-left: 5px;
}
</style>
</head>
<body>

<div class="container">
<h1>To-Do / Grocery List</h1>
<input type="text" id="itemInput" placeholder="Add new item...">
<button onclick="addItem()">Add Item</button>
<ul id="itemList"></ul>
</div>

<script> let
items = [];

function displayItems() {
const list = [Link]('itemList');
[Link] = ''; [Link]((item, index) => {
[Link] += `
<li>
<span>${item}</span>
<div class="actions">
<button onclick="editItem(${index})">Edit</button>
<button onclick="deleteItem(${index})">Delete</button>
</div>
</li>’;
});
}

function addItem() {
const input = [Link]('itemInput');
if ([Link]()) { [Link]([Link]());
[Link] = ''; displayItems();
}
}

function editItem(index) {
const newItem = prompt("Update item:", items[index]);
if (newItem) {
items[index] = [Link](); displayItems();
}
}
function deleteItem(index) {
[Link](index,1);
displayItems();
}

displayItems();
</script>

</body>
</html>
EXPERIMENT-5

AIM-CREATE A JAVA SCRIPT APPLICATIONS BASED ON VARIOUS DATA TYPES, STATEMENTS, KEYWORDS AND
OPERATORS.
CODE-
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Data Types and Operators Example</title>
</head>
<body>
<h2>JavaScript Application: Data Types, Statements, Keywords and Operators</h2>
<pre id="output"></pre>

<script>
// Output area
let result = "";
// ===== DATA TYPES =====
let num = 25; // Number
let name = "Ayush"; // String
let isStudent = true; // Boolean
let numbers = [10, 20, 30]; // Array
let person = {name: "Ayush", age: 21}; // Object
let nothing = null; // Null
let unknown; // Undefined

result += "=== DATA TYPES ===\n";


result += "Number: " + num + "\n";
result += "String: " + name + "\n";
result += "Boolean: " + isStudent + "\n";
result += "Array: " + numbers + "\n";
result += "Object: " + [Link](person) + "\n";
result += "Null: " + nothing + "\n";
result += "Undefined: " + unknown + "\n\n";

// ===== OPERATORS =====


let a = 10, b = 5;
result += "=== OPERATORS ===\n";
result += "Arithmetic: a + b = " + (a + b) + "\n";
result += "Comparison: a > b = " + (a > b) + "\n";
result += "Logical: (a > b && b > 0) = " + (a > b && b > 0) + "\n";
result += "Assignment: a += 5 → " + (a += 5) + "\n\n";

// ===== STATEMENTS =====


result += "=== STATEMENTS ===\n";

// if-else
if (num > 20) {
result += "if-else: Number is greater than 20\n";
} else {
result += "if-else: Number is 20 or less\n";
}

// switch
switch (b) {
case 1: result += "switch: b is 1\n"; break;
case 5: result += "switch: b is 5\n"; break;
default: result += "switch: b is something else\n";
}

// loop
result += "Loop (for): ";
for (let i = 0; i < 3; i++) {
result += i + " ";
}
result += "\n\n";
// ===== FUNCTIONS (keyword: function, return) =====
function multiply(x, y) {
return x * y;
}
result += "=== FUNCTION ===\n";
result += "multiply(4, 5) = " + multiply(4, 5) + "\n";

// Show output
[Link]("output").innerText = result;
</script>
</body>
</html>
EXPERIMENT-6
AIM-CREATE A JAVA SCRIPT APPLICATIONS WITH WINDOWS OBJECTS AND DOCUMENT OBJECT.
CODE-

<!DOCTYPE html>
<html>
<head>
<title>Window and Document Object Example</title>
<script>
// Function using Window object
function showWindowInfo() {
// window object properties
alert("Window width: " + [Link] + "px\n" +
"Window height: " + [Link] + "px\n" +
"Current URL: " + [Link]);
}

// Function using Document object


function changeDocument() {
// document object properties and methods
[Link]("heading").innerHTML = "Document Object Modified!";
[Link] = "lightyellow";
[Link] = "Document Updated";
}
</script>
</head>
<body>
<h1 id="heading">Welcome to JavaScript Window & Document Example</h1>
<button onclick="showWindowInfo()">Show Window Info</button>
<button onclick="changeDocument()">Change Document</button>
</body>
</html>
EXPERIMENT-8
AIM- CREATE A JAVA SCRIPT APPLICATION WITH LOOPS TO INCORPORATE THE CONCEPT OF ITERATION.
CODE-
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Loops Example</title>
</head>
<body>
<h2>JavaScript Application with Loops</h2>
<p id="output"></p>

<script>
let text = "";

// FOR loop (prints numbers 1 to 5)


text += "<b>Using FOR loop:</b><br>";
for (let i = 1; i <= 5; i++) {
text += "Number: " + i + "<br>";
}

// WHILE loop (prints even numbers up to 10)


text += "<br><b>Using WHILE loop:</b><br>";
let j = 2;
while (j <= 10) {
text += "Even Number: " + j + "<br>";
j += 2;
}

// DO-WHILE loop (prints numbers until 5)


text += "<br><b>Using DO-WHILE loop:</b><br>";
let k = 1;
do {
text += "Value: " + k + "<br>";
k++;
} while (k <= 5);

// Display the result in the webpage


[Link]("output").innerHTML = text;
</script>
</body>
</html>
EXPERIMENT-9
AIM-CREATE A JAVA SCRIPT APPLICATION FOR RANDOM NUMBER GENERATION.
CODE-
<!DOCTYPE html>
<html>
<head>
<title>Random Number Generator</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 100px;
}
#box {
margin-top: 20px;
font-size: 30px;
font-weight: bold;
color: #2c3e50;
}
button {
padding: 10px 25px;
font-size: 18px;
cursor: pointer;
}
</style>
</head>
<body>

<h1>Random Number Generator</h1>

<label>Enter Min Value: </label>


<input type="number" id="min"><br><br>

<label>Enter Max Value: </label>


<input type="number" id="max"><br><br>

<button onclick="generateRandom()">Generate</button>

<div id="box"></div>

<script>
function generateRandom() {
let min = parseInt([Link]("min").value);
let max = parseInt([Link]("max").value);

if (isNaN(min) || isNaN(max) || min > max) {


[Link]("box").innerHTML = "Please enter valid numbers!";
return;
}

let random = [Link]([Link]() * (max - min + 1)) + min;


[Link]("box").innerHTML = "Random Number: " + random;
}
</script>

</body>
</html>
EXPERIMENT-10
AIM- BUILD A UNIT CONVERTOR APPLICATIONUSING HTML AND JAVA SCRIPT.
CODE-
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Simple Unit Converter</title>
<style>
body { font-family: Arial; padding: 20px; }
input, select { padding: 5px; margin: 5px 0; }
#result { margin-top: 10px; font-weight: bold; }
</style>
</head>
<body>
<h2>Simple Unit Converter</h2>

<label>Enter Value:</label><br>
<input type="number" id="value" placeholder="Enter number"><br><br>

<label>Convert From:</label><br>
<select id="fromUnit">
<option value="m">Meters</option>
<option value="km">Kilometers</option>
<option value="cm">Centimeters</option>
</select><br><br>

<label>Convert To:</label><br>
<select id="toUnit">
<option value="m">Meters</option>
<option value="km">Kilometers</option>
<option value="cm">Centimeters</option>
</select><br><br>

<button onclick="convert()">Convert</button>

<div id="result"></div>

<script>
function convert() {
let value = parseFloat([Link]('value').value);
let from = [Link]('fromUnit').value;
let to = [Link]('toUnit').value;

if (isNaN(value)) {
[Link]('result').innerText = "Please enter a valid number";
return;
}

// Convert everything to meters first


let inMeters;
if (from === "m") inMeters = value;
else if (from === "km") inMeters = value * 1000;
else if (from === "cm") inMeters = value / 100;

// Convert meters to target


let finalValue;
if (to === "m") finalValue = inMeters;
else if (to === "km") finalValue = inMeters / 1000;
else if (to === "cm") finalValue = inMeters * 100;

[Link]('result').innerText = "Result: " + finalValue + " " + to;


}
</script>
</body>
</html>
EXPERIMENT-7
AIM- CREATE A JAVA SCRIPT APPLICATIONS WITH OBJECTS CREATION AND BY ADDING METHODS OF OBJECTS.
CODE-

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Object Example</title>
</head>
<body>
<h2>JavaScript Object Creation with Methods</h2>
<p id="result"></p>

<script>
// Object creation
let car = {
brand: "Maruti",
model: "Swift",
year: 2020,
speed: 0,

// Method to display car details


displayDetails: function() {
return "Brand: " + [Link] + "<br>Model: " + [Link] + "<br>Year: " + [Link];
},

// Method to increase speed


accelerate: function(value) {
[Link] += value;
return "Car accelerated to " + [Link] + " km/h";
},
// Method to apply brake
brake: function(value) {
[Link] -= value;
if ([Link] < 0) [Link] = 0;
return "Car slowed down to " + [Link] + " km/h";
}
};

// Using object methods


let details = [Link]();
let run1 = [Link](40);
let run2 = [Link](15);

// Displaying output in browser


[Link]("result").innerHTML = details + "<br>" + run1 + "<br>" + run2;
</script>
</body>
</html>

You might also like