Scribd
Upload
11 views15 pages

Web Assignment 5

This document is an HTML template demonstrating various web development concepts including styling with CSS, creating lists, tables, and a simple calculator using JavaScript. It features a responsive layout with horizontal and vertical navigation bars, as well as interactive elements like alerts and a dynamic table generator. The document is structured with sections for headings, paragraphs, lists, and a calculator, showcasing practical applications of web technologies.

Uploaded by

sarthakagg5678
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
11 views15 pages

Web Assignment 5

This document is an HTML template demonstrating various web development concepts including styling with CSS, creating lists, tables, and a simple calculator using JavaScript. It features a responsive layout with horizontal and vertical navigation bars, as well as interactive elements like alerts and a dynamic table generator. The document is structured with sections for headings, paragraphs, lists, and a calculator, showcasing practical applications of web technologies.

Uploaded by

sarthakagg5678
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
You are on page 1/ 15

<!

DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>Web Development Concepts Demo</title>

<link href="https://cdnjs.cloudflare.com/ajax/libs/fontawesome/6.0.0/css/all.min.css"
rel="stylesheet">

<style>

/* Reset and Base Styles */

*{

margin: 0;

padding: 0; box-sizing:

border-box;

body {

font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

line-height: 1.6; color: #333;

/* Heading Styles */ h1,

h2, h3 { color: #2c3e50;

margin: 20px 0; font-family:

'Georgia', serif;

}
h1 { font-size: 2.5em; }

h2 { font-size: 2em; } h3

{ font-size: 1.5em; }

/* Paragraph Styles */

p{

margin-bottom: 15px;

font-size: 1.1em; color:

#444;

/* List Styles */

.fancy-list { list-

style: none;

padding-left: 20px;

.fancy-list li {

margin: 10px 0;

padding-left: 25px;

position: relative;

.fancy-list li::before {

content: '➤'; position:

absolute; left: 0;

color: #3498db;
}

/* Ordered List */ .custom-

ordered { list-style: none;

counter-reset: custom-counter;

.custom-ordered li { counter-

increment: custom-counter; margin:

10px 0; padding-left: 35px;

position: relative;

.custom-ordered li::before {

content: counter(custom-counter);

background: #3498db; color: white;

width: 25px; height: 25px;

border-radius: 50%; display: flex;

align-items: center; justify-content:

center; position: absolute; left: 0;

/* Hoverable Table */

.hover-table { width: 100%;

border-collapse: collapse;

margin: 20px 0;

}
.hover-table th {

background: #3498db;

color: white; font-weight:

bold; padding: 12px;

text-align: left;

.hover-table td { padding:

12px; border-bottom: 1px solid

#ddd;

.hover-table tr:nth-child(even) {

background: #f9f9f9;

.hover-table tr:hover { background:

#f1f1f1; cursor: pointer;

/* Horizontal Nav Bar */

.horizontal-nav {

background: #2c3e50;

padding: 15px; margin-

bottom: 20px;

}
.horizontal-nav ul {

list-style: none; display:

flex; justify-content:

center; flex-wrap: wrap;

.horizontal-nav li {

margin: 5px 15px;

.horizontal-nav a { color:

white; text-decoration:

none; padding: 5px 10px;

border-radius: 3px;

transition: background 0.3s;

.horizontal-nav a:hover {

background: #3498db;

/* Vertical Nav Bar */

.vertical-nav { width:

200px; background:

#2c3e50; padding:

20px 0; position: fixed;


left: 0; top: 0;

height: 100%;

.vertical-nav ul {

list-style: none;

.vertical-nav li {

margin: 10px 0;

.vertical-nav a {

color: white; text-

decoration: none;

padding: 10px 20px; display:

block;

transition: background 0.3s;

.vertical-nav a:hover {

background: #3498db;

/* 2-Column Layout */

.container { max-

width: 1200px;
margin: 0 auto;

padding: 20px;

.two-column { display: grid;

grid-template-columns: 1fr 1fr;

gap: 20px; margin: 20px 0;

/* Calculator */ .calculator {

background: #f8f9fa; padding: 20px;

border-radius: 10px; box-shadow: 0 0

10px rgba(0,0,0,0.1); }

.calculator input {

width: 100%; padding:

10px; margin: 5px 0;

border: 1px solid #ddd;

border-radius: 5px;

.calculator button {

background: #3498db;

color: white; border:

none; padding: 10px

20px; margin: 5px;


border-radius: 5px;

cursor: pointer;

.calculator button:hover {

background: #2980b9;

/* Responsive Design */

@media (max-width: 768px) { .two-

column { grid-template-columns: 1fr;

.vertical-nav {

width: 100%;

height: auto;

position: static;

.horizontal-nav ul { flex-

direction: column; align-items:

center;

.horizontal-nav li {

margin: 5px 0;

}
}

</style>

</head>

<body>

<!-- Horizontal Nav -->

<nav class="horizontal-nav">

<ul>

<li><a href="#home">Home</a></li>

<li><a href="#about">About</a></li>

<li><a href="#services">Services</a></li>

<li><a href="#contact">Contact</a></li>

</ul>

</nav>

<div class="container">

<!-- Headings and Paragraphs -->

<h1>Web Development Demo</h1>

<p>This is a demonstration of various web development concepts including HTML, CSS,


and JavaScript.</p>

<div class="two-column">

<div>

<!-- Lists -->

<h2>Custom Lists</h2>

<h3>Unordered List</h3>

<ul class="fancy-list">

<li>Custom bullet points</li>

<li>Styled with CSS</li>


<li>Hover effects</li>

</ul>

<h3>Ordered List</h3>

<ol class="custom-ordered">

<li>Custom numbers</li>

<li>Styled with CSS</li>

<li>Circular background</li>

</ol>

</div>

<div>

<!-- Table -->

<h2>Hoverable Table</h2>

<table class="hover-table">

<thead>

<tr>

<th>Header 1</th>

<th>Header 2</th>

<th>Header 3</th>

</tr>

</thead>

<tbody>

<tr>

<td>Data 1</td>

<td>Data 2</td>

<td>Data 3</td>

</tr>
<tr>

<td>Data 4</td>

<td>Data 5</td>

<td>Data 6</td>

</tr>

<tr>

<td>Data 7</td>

<td>Data 8</td>

<td>Data 9</td>

</tr>

</tbody>

</table>

</div>

</div>

<!-- Calculator -->

<h2>Calculator</h2>

<div class="calculator">

<input type="number" id="num1" placeholder="Enter first number">

<input type="number" id="num2" placeholder="Enter second number">

<div>

<button onclick="calculate('add')">Add</button>

<button onclick="calculate('subtract')">Subtract</button>

<button onclick="calculate('multiply')">Multiply</button>

<button onclick="calculate('divide')">Divide</button>

<button onclick="calculate('power')">Power</button>

</div>

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

<!-- Dynamic Table Generator -->

<h2>4x4 Table Generator</h2>

<button onclick="generateTable()">Generate Table</button>

<div id="tableContainer"></div>

</div>

<script>

// Alert, Confirm, Prompt Demo

function showDialogs() {

alert("This is an alert!");

let confirmed = confirm("This is a confirm dialog. Click OK or Cancel");

if (confirmed) { let name = prompt("This is a prompt. Enter your

name:"); if (name) alert("Hello, " + name + "!");

// Calculator Functions function calculate(operation) { let

num1 = parseFloat(document.getElementById('num1').value); let

num2 = parseFloat(document.getElementById('num2').value); let

result;

if (isNaN(num1) || isNaN(num2)) {

document.getElementById('result').textContent = "Please enter valid numbers";

return;

}
switch(operation) {

case 'add':

result = num1 + num2;

break;

case 'subtract':

result = num1 - num2;

break; case 'multiply':

result = num1 * num2;

break;

case 'divide':

if (num2 === 0) {

document.getElementById('result').textContent = "Cannot divide by zero";

return;

result = num1 /

num2; break;

case 'power':

result = Math.pow(num1, num2);

break;

document.getElementById('result').textContent = `Result: ${result}`;

// Generate 4x4 Table function

generateTable() { let table =


document.createElement('table');

table.className = 'hover-table';

for (let i = 0; i < 4; i++) { let row =

document.createElement('tr');

for (let j = 0; j < 4; j++) { let cell = i === 0 ?


document.createElement('th') :
document.createElement('td');

cell.textContent = `${i},${j}`;

row.appendChild(cell);

table.appendChild(row);

let container = document.getElementById('tableContainer');

container.innerHTML = ''; container.appendChild(table);

</script>

</body>

</html>
Name-Sarthak Aggarwal

Class-V-C

University number-2200290100141

Roll number-8

You might also like