Scribd
Upload
20 views

Dbmschanged

Uploaded by

jhoshikathangaraju2005
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
20 views

Dbmschanged

Uploaded by

jhoshikathangaraju2005
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/ 16

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>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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 {
background-color: #444;
padding: 10px 20px;
text-align: center;
}
nav a {
color: #fff;
text-decoration: none;
margin-right: 20px;
}
section {
padding: 20px;
}
footer {
background-color: #333;
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>
<img src="car2.jpg" alt="Car Image">
</section>
<section id="services">
<h2>Services</h2>
<p>We offer a range of services including maintenance, financing, and more.</p>
<img src="car3.jpg" alt="Car Image">
</section>
<section id="contact">
<h2>Contact Us</h2>
<p>Get in touch with us for inquiries, test drives, and more.</p>
<img src="car4.jpg" alt="Car Image">
</section>
<footer>
<p>&copy; 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>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KMCH Multi Specialty Hospital</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
}
header, nav, section {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
nav a {
color: #fff;
text-decoration: none;
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">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VCET – Home</title>
<style>
.container {
font-family: Arial, sans-serif;
margin: 0 auto;
max-width: 800px;
}
.header, .footer {
background-color: #007bff;
color: white;
text-align: center;
padding: 10px 0;
}
.menu a {
margin: 0 10px;
text-decoration: none;
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>&copy; 2024 VCET. All rights reserved.</p>
</div>
</div>
</body>
</html>

/* styles.css */
.highlight {
Background-color: #ffc107;
}

7.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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.
import React, { useState } from 'react';

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>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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>
<!-- Add more subjects as needed -->
</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
import React, { useState } from 'react';

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;
}

You might also like