Prompt Details
Model
Chat - GPT-3.5 (gpt-3.5-turbo)
Token size
55 ($0.00010 / call)
Example input
To begin, simply duplicate and insert the prompt. Make use of the new template as a starting point for crafting your own unique story!
Example output
Sure! Here's an example of an interactive calendar using HTML, CSS, and JavaScript with a minimalist design:
HTML:
```html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="calendar">
<h1>Interactive Calendar</h1>
<div class="header">
<button id="today-btn">Today</button>
<h2 id="current-month"></h2>
</div>
<table>
<thead>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
<th>Sat</th>
</tr>
</thead>
<tbody id="calendar-body"></tbody>
</table>
</div>
<script src="script.js"></script>
</body>
</html>
```
CSS (style.css):
```css
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 0;
padding: 0;
}
.calendar {
max-width: 400px;
margin: 20px auto;
padding: 10px;
border: 1px solid #ccc;
}
.calendar h1 {
font-size: 24px;
margin-bottom: 10px;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
#today-btn {
background-color: #4CAF50;
color: white;
border: none;
padding: 5px 10px;
cursor: pointer;
}
#current-month {
font-size: 18px;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 5px;
}
thead {
background-color: #f2f2f2;
}
td {
cursor: pointer;
}
td:hover {
background-color: #f2f2f2;
}
```
JavaScript (script.js):
```javascript
// Get current date
const currentDate = new Date();
// Function to generate the calendar
function generateCalendar() {
const calendarBody = document.getElementById("calendar-body");
const currentMonthElement = document.getElementById("current-month");
// Clear existing calendar
calendarBody.innerHTML = "";
// Get the year and month
const year = currentDate.getFullYear();
const month = currentDate.getMonth();
// Set the text of the current month
currentMonthElement.textContent = new Intl.DateTimeFormat("es", { month: "long", year: "numeric" }).format(currentDate);
// Get the first day of the month
const firstDay = new Date(year, month, 1);
// Determine the number of days in the month
const daysInMonth = new Date(year, month + 1, 0).getDate();
let date = 1;
// Generate calendar rows and cells
for (let i = 0; i < 6; i++) {
const row = document.createElement("tr");
// Generate cells for each day of the week
for (let j = 0; j < 7; j++) {
const cell = document.createElement("td");
// Add the date to the cell
if (i === 0 && j < firstDay.getDay()) {
// Empty cells before the first day
cell.textContent = "";
} else if (date > daysInMonth) {
// Empty cells after the last day
break;
} else {
cell.textContent = date;
if (date === currentDate.getDate() && month === currentDate.getMonth() && year === currentDate.getFullYear()) {
// Highlight current date
cell.classList.add("current-date");
}
date++;
}
// Add event handler for cell click
cell.addEventListener("click", function() {
// Get the selected date
const selectedDate = new Date(year, month, cell.textContent);
// Do something with the selected date
console.log("Fecha seleccionada:", selectedDate);
});
row.appendChild(cell);
}
calendarBody.appendChild(row);
}
}
// Event handler for the "Today" button
const todayBtn = document.getElementById("today-btn");
todayBtn.addEventListener("click", function() {
// Set the current date
currentDate.setDate(new Date().getDate());
generateCalendar();
});
// Generate the initial calendar
generateCalendar();
Remember that this JavaScript code should go inside the <script> tag in your HTML file, preferably at the end of the <body> .
Instant access
Commercial use
Money‑backBy purchasing this prompt, you agree to our terms of service
1
Favorites
23
Views
GPT-3.5-TURBO
💎 Create the website of your dreams! Including your own interactive calendar that works at all times.
💥 You will have everything you need to create it, such as your own html, css and javascript code.
🌟 Workable for any design, GET IT NOW!
...more
Added over 1 month ago
