Embedded Files
Q. Create a website for a music festival. The website should contain a login page, list all the music events and have a feedback form at the end.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Music Festival</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Login Page -->
<div id="login-page" class="page">
<h2>Login to Music Festival</h2>
<form id="login-form">
<input type="text" id="username" placeholder="Username" required><br>
<input type="password" id="password" placeholder="Password" required><br>
<button type="submit">Login</button>
</form>
<p id="login-error" style="color: red;"></p>
</div>
<!-- Music Events Page (hidden initially) -->
<div id="events-page" class="page" style="display:none;">
<h2>Music Festival Events</h2>
<!-- Events Table -->
<table id="events-table">
<thead>
<tr>
<th>Event Name</th>
<th>Date</th>
<th>Location</th>
</tr>
</thead>
<tbody>
<!-- Event rows will go here -->
</tbody>
</table>
<!-- Feedback Form -->
<h3>Give Your Feedback</h3>
<form id="feedback-form">
<textarea id="feedback" placeholder="Enter your feedback here..." required></textarea><br>
<button type="submit">Submit Feedback</button>
</form>
</div>
<script src="scripts.js"></script>
</body>
</html>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
.page {
padding: 20px;
}
h2 {
color: #333;
}
input, textarea {
padding: 10px;
margin: 10px 0;
width: 100%;
max-width: 400px;
}
button {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
table {
width: 100%;
max-width: 800px;
margin-top: 20px;
border-collapse: collapse;
margin: 0 auto;
}
th, td {
padding: 10px;
border: 1px solid #ddd;
text-align: center;
}
th {
background-color: #f2f2f2;
}
#feedback {
width: 100%;
max-width: 600px;
height: 100px;
resize: none;
}
// Dummy login credentials
const users = {
'user1': 'password1',
'user2': 'password2',
};
// Music Events List
const events = [
{ name: 'Rock Fest', date: '2024-12-15', location: 'Stadium A' },
{ name: 'Jazz Night', date: '2024-12-16', location: 'Arena B' },
{ name: 'EDM Party', date: '2024-12-17', location: 'Park C' },
{ name: 'Classical Concert', date: '2024-12-18', location: 'Hall D' },
];
// Event listener for login form
document.getElementById('login-form').addEventListener('submit', function(event) {
event.preventDefault();
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
// Check if login credentials are valid
if (users[username] && users[username] === password) {
document.getElementById('login-page').style.display = 'none';
document.getElementById('events-page').style.display = 'block';
displayEvents();
} else {
document.getElementById('login-error').innerText = 'Invalid username or password!';
}
});
// Function to display events in a table
function displayEvents() {
const tableBody = document.getElementById('events-table').getElementsByTagName('tbody')[0];
events.forEach(event => {
const row = tableBody.insertRow();
const cell1 = row.insertCell(0);
const cell2 = row.insertCell(1);
const cell3 = row.insertCell(2);
cell1.innerHTML = event.name;
cell2.innerHTML = event.date;
cell3.innerHTML = event.location;
});
}
// Event listener for feedback form
document.getElementById('feedback-form').addEventListener('submit', function(event) {
event.preventDefault();
const feedback = document.getElementById('feedback').value;
if (feedback) {
alert('Thank you for your feedback!');
document.getElementById('feedback').value = ''; // Clear feedback
} else {
alert('Please enter some feedback.');
}
});
Page updated
Google Sites
Report abuse