Scribd
Upload
7 views5 pages

Website

Website using html and css

Uploaded by

Mohd Shayaan
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
7 views5 pages

Website

Website using html and css

Uploaded by

Mohd Shayaan
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/ 5

Website using Html and Css

Html Code-:
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>Abhay's Juice & Shake Corner</title>

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

</head> <body>

<div class="container">

<h1>Welcome to Abhay's Juice & Shake Corner</h1>

<form id="orderForm">

<label for="name">Name:</label>

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

<label for="phone">Phone Number:</label>

<input type="tel" id="phone" name="phone" pattern="[0-9]{10}"


required placeholder="1234567890">

<label for="drink">Choose your drink:</label>

<select id="drink" name="drink" required>

<option value="juice">Juice</option>

<option value="shake">Shake</option>
</select>

<label for="flavor">Choose your flavor:</label>

<select id="flavor" name="flavor" required>

<option value="mango">Mango</option>

<option value="strawberry">Strawberry</option>

<option value="banana">Banana</option>

<option value="chocolate">Chocolate</option>

</select> <button type="submit">Place Order</button>

</form> <div id="tokenMessage"></div>

<script>

const prices = {

juice: { mango: 50.00, strawberry: 50.00, banana: 30.00,chocolate: 30.


},

shake: { mango:149.00,strawberry: 159.00,banana: 109.00,chocolate:


149.0 } };

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

event.preventDefault(); const name =


document.getElementById('name').value

const phone = document.getElementById('phone').value;

const drink = document.getElementById('drink').value;

const flavor = document.getElementById('flavor').value;

const price = prices[drink][flavor];


const tokenId = 'A' + Math.floor(Math.random() * 100);

document.getElementById('tokenMessage').innerText = `Thank you, $


{name}! Your ${drink} (${flavor}) order has been placed. The total bill
amount is Rs-${price.toFixed(2)}. Your token ID is ${tokenId}. We will
contact you at ${phone} when your order is ready.`; });

</script> </body> </html>

Css Code-:
body {

font-family: Arial, sans-serif;

background-color: #f8f9fa;

color: #333;

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

margin: 0; }

.container {

background-color: #fff;

padding: 20px;

border-radius: 10px;

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

text-align: center;}
h1 { color: #28a745;}

form { margin-top: 20px;}

label {

display: block;

margin: 10px 0 5px; }

input, select, button {

width: 100%;

padding: 10px;

margin-bottom: 20px;

border: 1px solid #ddd;

border-radius: 5px;}

button {

background-color: #28a745;

color: #fff;

border: none;

cursor: pointer;}

button:hover { background-color: #218838; }

#tokenMessage {

margin-top: 20px;

font-weight: bold;

color: #17a2b8; }
Output -:

You might also like