Kumi
472d36b44f
Added a new index.html file that sets up a basic landing page for Promise Restaurant. It includes a heading, "Place Order" button, and a message div. The "Place Order" button simulates food ordering using JavaScript Promises, displaying success or failure messages based on operation outcomes. Ensures responsiveness and user interaction cues for better UX. Contains basic styles for an aesthetically pleasing UI.
115 lines
No EOL
3.2 KiB
HTML
115 lines
No EOL
3.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Promise Restaurant</title>
|
|
<style>
|
|
body {
|
|
font-family: 'Arial', sans-serif;
|
|
background-color: #f4f4f9;
|
|
color: #333;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100vh;
|
|
margin: 0;
|
|
}
|
|
|
|
h1 {
|
|
color: #4CAF50;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
#orderButton {
|
|
background-color: #4CAF50;
|
|
color: white;
|
|
border: none;
|
|
padding: 15px 30px;
|
|
font-size: 1.2em;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
transition: background-color 0.3s;
|
|
}
|
|
|
|
#orderButton:hover:enabled {
|
|
background-color: #45a049;
|
|
}
|
|
|
|
#orderButton:disabled {
|
|
background-color: #ccc;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
#message {
|
|
margin-top: 20px;
|
|
font-size: 1.2em;
|
|
padding: 10px 20px;
|
|
border-radius: 5px;
|
|
border: 1px solid #ddd;
|
|
background-color: #fff;
|
|
width: 60%;
|
|
max-width: 500px;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
#message.error {
|
|
border-color: #e74c3c;
|
|
color: #e74c3c;
|
|
}
|
|
|
|
#message.success {
|
|
border-color: #4CAF50;
|
|
color: #4CAF50;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Promise Restaurant</h1>
|
|
<button id="orderButton">Place Order</button>
|
|
<div id="message">Please place your order!</div>
|
|
|
|
<script>
|
|
document.getElementById('orderButton').addEventListener('click', () => {
|
|
const messageDiv = document.getElementById('message');
|
|
const orderButton = document.getElementById('orderButton');
|
|
|
|
messageDiv.innerHTML = 'Processing your order...';
|
|
messageDiv.className = '';
|
|
orderButton.disabled = true;
|
|
|
|
const Restaurant = new Promise((resolve, reject) => {
|
|
const currentHour = new Date().getHours();
|
|
const kitchenOpen = currentHour >= 11 && currentHour < 23;
|
|
|
|
if (!kitchenOpen) {
|
|
reject("Sorry, the kitchen is closed. We cannot prepare your food.");
|
|
return;
|
|
}
|
|
|
|
console.log("Order received. Preparing your food...");
|
|
|
|
const preparationTime = Math.floor(Math.random() * 10000);
|
|
|
|
setTimeout(() => {
|
|
resolve("Your food is ready! Enjoy your meal.");
|
|
}, preparationTime);
|
|
});
|
|
|
|
Restaurant
|
|
.then(message => {
|
|
messageDiv.innerHTML = message;
|
|
messageDiv.className = 'success';
|
|
})
|
|
.catch(error => {
|
|
messageDiv.innerHTML = error;
|
|
messageDiv.className = 'error';
|
|
})
|
|
.finally(() => {
|
|
orderButton.disabled = false;
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |