HTML & JavaScript Mini Projects
1. Display a Calendar by Getting the Year from User
<!DOCTYPE html>
<html>
<head>
<title>Calendar by Year</title>
</head>
<body>
<h2>Enter a Year to Display Calendar</h2>
<input type="number" id="yearInput" placeholder="e.g., 2025" />
<button onclick="generateCalendar()">Show Calendar</button>
<div id="calendar"></div>
<script>
function generateCalendar() {
const year = parseInt([Link]('yearInput').value);
const calendarDiv = [Link]('calendar');
[Link] = '';
const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
"Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
for (let m = 0; m < 12; m++) {
let date = new Date(year, m, 1);
let table = `<h3>${months[m]}</h3><table border='1'><tr>
<th>Sun</th><th>Mon</th><th>Tue</th>
<th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th></tr><tr>`;
let day = [Link]();
for (let i = 0; i < day; i++) table += "<td></td>";
while ([Link]() === m) {
table += `<td>${[Link]()}</td>`;
if ([Link]() === 6) table += "</tr><tr>";
[Link]([Link]() + 1);
}
table += "</tr></table>";
[Link] += table;
}
}
</script>
</body>
</html>
2. Change Background Color on Every Click
<!DOCTYPE html>
<html>
<head>
<title>Change Background Color</title>
</head>
<body onclick="changeColor()" style="text-align:center;">
<h2>Click anywhere to change background color</h2>
<script>
function changeColor() {
const colors = ['lightblue', 'lightgreen', 'orange', 'pink',
'gray', 'yellow'];
[Link] =
colors[[Link]([Link]() * [Link])];
}
</script>
</body>
</html>