Dbmschanged

1.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Supermarket</title>
</head>
<body>
<h1>Supermarket</h1>
<nav>
<a href="#products">Products</a>
</nav>
<h2 id="products">Products</h2>
<table border="1">
<tr><th>ID</th><th>Name</th><th>Price</th><th>Stock</th></tr>
<tr><td>1</td><td>Apple</td><td>$1.00</td><td>10</td></tr>
<tr><td>2</td><td>Banana</td><td>$0.50</td><td>20</td></tr>
<tr><td>3</td><td>Orange</td><td>$0.80</td><td>15</td></tr>
</table>
<h2>Check Availability</h2>
<form id="availabilityForm">
<input type="number" id="productId" placeholder="Enter Product ID" required>
<button type="submit">Check</button>
</form>
<p id="availabilityResult"></p>
<script>
const products = [
{ id: 1, name: 'Apple', price: 1.00, stock: 10 },
{ id: 2, name: 'Banana', price: 0.50, stock: 20 },
{ id: 3, name: 'Orange', price: 0.80, stock: 15 }
];
document.getElementById('availabilityForm').addEventListener('submit', function (event) {

event.preventDefault();
const productId = parseInt(document.getElementById('productId').value);
const product = products.find(p => p.id === productId);
const result = document.getElementById('availabilityResult');
result.innerText = product ? `Product: ${product.name}, Price: $${product.price}, Stock: $
{product.stock}` : 'Product not found';
});
</script>
</body>
</html>
2.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Automobile Company</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 10px 20px;
text-align: center;
}
nav {
padding: 10px 20px;
text-align: center;
}
nav a {
color: #fff;
text-decoration: none;
margin-right: 20px;
}
section {
padding: 20px;
}
footer {
color: #fff;
text-align: center;
padding: 10px 0;
}
</style>
</head>
<body>
<header>
<h1>Automobile Company</h1>
</header>
<nav>
<a href="#about">About Us</a>
<a href="#models">Car Models</a>
<a href="#services">Services</a>
<a href="#contact">Contact Us</a>
<a href="https://www.example.com">External Link</a>
</nav>
<section id="about">
<h2>About Us</h2>
<p>Welcome to our Automobile Company. We specialize in marketing and selling a wide
range of cars.</p>
<img src="car1.jpg" alt="Car Image">
</section>
<section id="models">
<h2>Car Models</h2>
<p>Explore our latest car models and find the perfect one for you.</p>
</section>
<section id="services">
<h2>Services</h2>
<p>We offer a range of services including maintenance, financing, and more.</p>
</section>
<section id="contact">
<h2>Contact Us</h2>
<p>Get in touch with us for inquiries, test drives, and more.</p>
</section>
<footer>
<p>© 2024 Automobile Company</p>
</footer>
</body>
</html>
3.
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<h1>Counter App</h1>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
<button onClick={() => setCount(count - 1)}>Decrement</button>
<button onClick={() => setCount(0)}>Reset</button>
</div>
);
}
export default Counter;
4.
<!DOCTYPE html>
<html lang="en">
<head>
<title>KMCH Multi Specialty Hospital</title>
<style>
body {
background-color: #f0f0f0;
margin: 0;
padding: 0;
}
header, nav, section {
color: #fff;
padding: 10px;
text-align: center;
}
nav a {
color: #fff;
margin-right: 20px;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 10px;
}
th, td {
padding: 8px;
border-bottom: 1px solid #ccc;
}
</style>
</head>
<body>
<header><h1>KMCH Multi Specialty Hospital</h1></header>
<nav><a href="#about">About Us</a> | <a href="#services">Services</a> | <a
href="#contact">Contact Us</a></nav>
<section id="about"><h2>About Us</h2><p>Welcome to KMCH Multi Specialty
Hospital.</p></section>
<section id="services">
<h2>Our Services</h2>
<table>
<tr><th>Service</th><th>Description</th></tr>
<tr><td>Cardiology</td><td>Specialized care for heart diseases</td></tr>
<tr><td>Orthopedics</td><td>Treatment of bone and joint disorders</td></tr>
<tr><td>Neurology</td><td>Diagnosis and treatment of neurological disorders</td></tr>
</table>
</section>
<section id="contact"><h2>Contact Us</h2><p>Email:
[email protected]</p><p>Phone: +1 234 567 8901</p></section>
</body>
</html>
5.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="styles.css">
<title>VCET – Home</title>
<style>
.container {
margin: 0 auto;
max-width: 800px;
}
.header, .footer {
background-color: #007bff;
color: white;
text-align: center;
padding: 10px 0;
}
.menu a {
margin: 0 10px;
color: #007bff;
}
.content {
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>Velalar College of Engineering and Technology</h1>
</div>
<div class="menu">
<a href="index.html" style="font-weight: bold;">Home</a>
<a href="about.html">About Us</a>
</div>
<div class="content">
<h2 style="color: #007bff;">Welcome to VCET</h2>
<p>Velalar College of Engineering and Technology (VCET) is a premier institution...</p>
</div>
<div class="footer">
<p>© 2024 VCET. All rights reserved.</p>
</div>
</div>
</body>
</html>
/* styles.css */
.highlight {
Background-color: #ffc107;
}
7.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Registration Form</title>
<style>
body { font-family: Arial, sans-serif; }
h1 { text-align: center; }
form { max-width: 400px; margin: 0 auto; padding: 20px; border: 1px solid #ccc; border-
radius: 5px; background-color: #f9f9f9; }
label { display: block; margin-bottom: 5px; }
input, select, textarea { width: calc(100% - 12px); padding: 8px; margin-bottom: 10px; border:
1px solid #ccc; border-radius: 3px; }
select { width: calc(33.3% - 8px); }
button { background-color: #007bff; color: #fff; border: none; padding: 10px 20px; border-
radius: 3px; cursor: pointer; }
button:hover { background-color: #0056b3; }
</style>
</head>
<body>
<h1>Registration Form</h1>
<form id="registrationForm" onsubmit="return validateForm()">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required><br>
<label for="email">Email ID:</label>
<input type="email" id="email" name="email" required><br>
<label for="phone">Phone Number:</label>
<input type="text" id="phone" name="phone" required><br>
<label for="dobDay">Date of Birth:</label>
<select id="dobDay" name="dobDay" required></select>
<select id="dobMonth" name="dobMonth" required></select>
<select id="dobYear" name="dobYear" required></select><br>
<label>Languages known:</label><br>
<input type="checkbox" id="english" name="languages" value="English">
<label for="english">English</label>
<input type="checkbox" id="tamil" name="languages" value="Tamil">
<label for="tamil">Tamil</label>
<input type="checkbox" id="hindi" name="languages" value="Hindi">
<label for="hindi">Hindi</label>
<input type="checkbox" id="telugu" name="languages" value="Telugu">
<label for="telugu">Telugu</label><br>
<label for="address">Address:</label><br>
<textarea id="address" name="address" rows="4" cols="50" required></textarea><br>
<button type="submit">Register</button>
</form>
<script>
function validateForm() {
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
if (!/^[A-Za-z ]+$/.test(name)) {
alert('Name should contain alphabets and spaces only.');
return false;
}
if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
alert('Invalid email address format.');
return false;
}
return true; // Form is valid
}
</script>
</body>
</html>
8.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Job Registration</title>
</head>
<body>
<form action="#" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br><br>
<label>Gender:</label>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br><br>
<label for="comments">Comments:</label><br>
<textarea id="comments" name="comments" rows="4" cols="50"></textarea><br><br>
<label for="country">Country:</label>
<select id="country" name="country">
<option value="USA">USA</option>
<option value="UK">UK</option>
<option value="Canada">Canada</option>
<option value="Australia">Australia</option>
</select><br><br>
<label for="dob">Date of Birth:</label>

<input type="date" id="dob" name="dob"><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required><br><br>
<input type="checkbox" id="agree" name="agree" required>

<label for="agree">I agree to the terms and conditions</label><br><br>
<input type="submit" value="Submit">

</form>
</body>
</html>
9.
const MusicPlayer = () => {

const [isPlaying, setIsPlaying] = useState(false);
const [volume, setVolume] = useState(50); // Initial volume set to 50
const togglePlay = () => setIsPlaying(!isPlaying);

// const skipTrack = (forward) => {}; // Unused function
const changeVolume = (e) => setVolume(e.target.value);
return (
<div>
<h2>Now Playing: Song Title</h2>
<p>Artist: Artist Name</p>
<audio controls autoPlay={isPlaying}>
<source src="song.mp3" type="audio/mpeg" />
</audio>
<button onClick={togglePlay}>{isPlaying ? 'Pause' : 'Play'}</button>
<input
type="range"
min="0"
max="100"
value={volume}
onChange={changeVolume}
/>
<ul>
<li>Song 1</li>
<li>Song 2</li>
<li>Song 3</li>
{/* Add more songs as needed */}
</ul>
</div>
);
};
export default MusicPlayer;
10.
Order-form.component.html
<h2>Order Form</h2>
<div *ngFor=”let item of items”>
<label>{{ item.name }}</label>
<input type=”number” [(ngModel)]=”item.quantity” (ngModelChange)=”updateTotal()”>
<span>{{ item.price * item.quantity }}</span>
</div>
<h4>Total Price: {{ totalPrice }}</h4>
Order-form.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-order-form',
templateUrl: './order-form.component.html',
styleUrls: ['./order-form.component.css']
})
export class OrderFormComponent {
items = [
{ name: 'Item 1', price: 10, quantity: 0 },
{ name: 'Item 2', price: 20, quantity: 0 },
{ name: 'Item 3', price: 30, quantity: 0 }
];
totalPrice = 0;
updateTotal() {
this.totalPrice = this.items.reduce((total, item) => total + (item.price * item.quantity), 0);
}
}
App.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

import { OrderFormComponent } from './order-form/order-form.component';
@NgModule({
declarations: [
AppComponent,
OrderFormComponent
],
imports: [
BrowserModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
App.component.html
<app-order-form></app-order-form>
12.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Cafeteria Menu</title>
</head>
<body>
<h1>Cafeteria Menu</h1>
<ul>
<li>Breakfast
<ul>
<li>Scrambled Eggs - $5</li>
<li>Pancakes - $6</li>
<li>Fruit Bowl - $4</li>
</ul>
</li>
<li>Lunch
<ul>
<li>Grilled Chicken Salad - $8</li>
<li>Pasta with Marinara Sauce - $7</li>
<li>Veggie Wrap - $6</li>
</ul>
</li>
<li>Dinner
<ul>
<li>Steak with Mashed Potatoes - $12</li>
<li>Vegetarian Pizza - $10</li>
<li>Shrimp Alfredo - $14</li>
</ul>
</li>
<li>Drinks
<ol>
<li>Coffee - $2</li>
<li>Tea - $2</li>
<li>Soft Drinks - $1.5</li>
</ol>
</li>
<li>Desserts
<ul>
<li>Chocolate Cake - $4</li>
<li>Ice Cream Sundae - $3</li>
<li>Fruit Tart - $5</li>
</ul>
</li>
</ul>
</body>
</html>
13.
Layout-switcher.component.html
<button (click)=”toggleLayout()”>Toggle Layout</button>
<div *ngIf=”isGrid; else listView”>
<!—Grid layout content here
<div style=”border: 1px solid #ccc; padding: 10px; margin: 10px; display: inline-block;”>
Item 1
</div>
<div style=”border: 1px solid #ccc; padding: 10px; margin: 10px; display: inline-block;”>
Item 2
</div>
</div>
<ng-template #listView>
<!—List layout content here
<div style=”border: 1px solid #ccc; padding: 10px; margin: 10px;”>
Item 1
</div>
<div style=”border: 1px solid #ccc; padding: 10px; margin: 10px;”>
Item 2
</div>
</ng-template>
Layout-switcher.component.ts
Import { Component } from ‘@angular/core’;
@Component({
Selector: ‘app-layout-switcher’,
templateUrl: ‘./layout-switcher.component.html’,
styleUrls: [‘./layout-switcher.component.css’]
})
Export class LayoutSwitcherComponent {
isGrid: boolean = true;
toggleLayout() {
this.isGrid = !this.isGrid;
}
}
App.component.html
<app-layout-switcher></app-layout-switcher>
14.
<!DOCTYPE html>
<html>
<head>
<title>CGPA Calculator</title>
</head>
<body>
<h1>CGPA Calculator</h1>
<table border="1">
<tr>
<th>Subject</th>
<th>Credits</th>
<th>Grade</th>
</tr>
<tr>
<td>Subject 1</td>
<td>3</td>
<td>
<select name="Grade">
<option value="O">O</option>
<option value="A+">A+</option>
<option value="A">A</option>
<option value="B+">B+</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</td>
</tr>
<tr>
<td>Subject 2</td>
<td>4</td>
<td>
<select name="Grade">
<option value="O">O</option>
<option value="A+">A+</option>
<option value="A">A</option>
<option value="B+">B+</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</td>
</tr>

</table>
<h2>CGPA is: 0.00</h2>
<script>
const gradeSelects = document.querySelectorAll('select[name="Grade"]');
function calculateCGPA() {
let totalCredits = 0;
let totalGradePoints = 0;
gradeSelects.forEach(select => {
const selectedGrade = select.value;
const credits = parseInt(select.parentNode.previousElementSibling.textContent);
let gradePoint;
switch(selectedGrade) {
case "O":
gradePoint = 10;
break;
case "A+":
gradePoint = 9;
break;
case "A":
gradePoint = 8;
break;
case "B+":
gradePoint = 7;
break;
case "B":
gradePoint = 6;
break;
case "C":
gradePoint = 5;
break;
default:
gradePoint = 0;
}
totalGradePoints += gradePoint * credits;

totalCredits += credits;
});
const cgpa = totalGradePoints / totalCredits;

const cgpaDisplay = document.querySelector('h2');
cgpaDisplay.textContent = "CGPA is: " + cgpa.toFixed(2);
}
gradeSelects.forEach(select => {
select.addEventListener('change', calculateCGPA);
});
</script>
</body>
</html>
15.
App.js
function App() {
const [isAuthenticated, setIsAuthenticated] = useState(false);
return (
<div>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
{isAuthenticated ? (
<>
<a href="/profile">Profile</a>
<button onClick={() => setIsAuthenticated(false)}>Logout</button>
</>
):(
<button onClick={() => setIsAuthenticated(true)}>Login</button>
)}
</nav>
<main>
<h1>Welcome to the site</h1>
{isAuthenticated ? <p>You are logged in!</p> : <p>Please log in.</p>}
</main>
</div>
);
}
export default App;
App.css
Nav {
Display: flex;
Gap: 10px;
}
Button {
Cursor: pointer;
}

Dbmschanged

Uploaded by

Copyright:

Available Formats

Dbmschanged

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

Dbmschanged

Uploaded by

Copyright:

Available Formats

1.

document.getElementById('availabilityForm').addEventListener('submit', function (event) {

export default Counter;

<label for="dob">Date of Birth:</label>

<input type="checkbox" id="agree" name="agree" required>

<input type="submit" value="Submit">

const MusicPlayer = () => {

const togglePlay = () => setIsPlaying(!isPlaying);

export default MusicPlayer;

import { AppComponent } from './app.component';

totalGradePoints += gradePoint * credits;

const cgpa = totalGradePoints / totalCredits;

export default App;

You might also like