Skip to content

Commit 6782074

Browse files
AsmrProg-YTAsmrProg-YT
committed
Adding Day #70
1 parent 3fb070c commit 6782074

File tree

6 files changed

+323
-1
lines changed

6 files changed

+323
-1
lines changed

‎Day #70 - Event Calendar/README.md

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
# Day #70
2+
3+
### Calendar With Events
4+
In this tutorial ([Open in YouTube](https://youtu.be/QiVoPKzylck)), we'll dive deep into the world of JavaScript and demonstrate how to build a dynamic calendar that not only displays dates but also allows users to add, edit, and delete events with ease. 💻🌟
5+
<br>
6+
You'll learn how to leverage the power of JavaScript to handle user interactions, manipulate the DOM, and manage event data effectively. We'll cover topics such as event listeners, DOM manipulation, date handling, and more, providing you with the essential knowledge to create a fully functional event calendar from scratch.
7+
<br>
8+
Whether you're building a personal planner, scheduling app, or integrating a calendar into your website, this tutorial has got you covered. So grab your favorite coding tools, fire up your text editor, and let's dive into the world of JavaScript event calendars together! 🔥 Don't forget to like, share, and subscribe for more awesome tutorials! 🚀
9+
10+
# Screenshot
11+
Here we have project screenshot :
12+
13+
![screenshot](screenshot.png)

‎Day #70 - Event Calendar/index.html

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link rel="stylesheet" href="style.css">
8+
<title>Event Calendar App | AsmrProg</title>
9+
</head>
10+
11+
<body>
12+
13+
<div class="planner">
14+
<h1>Event Calendar</h1>
15+
<div id="calendar" class="calendar-grid"></div>
16+
</div>
17+
18+
<button class="add-task-btn" onclick="showAddTaskModal()">Add Task</button>
19+
20+
<div id="addTaskModal" class="modal">
21+
<div class="modal-content">
22+
<span class="close" onclick="closeAddTaskModal()">&times;</span>
23+
<h2>Add Task</h2>
24+
<input type="date" id="task-date">
25+
<input type="text" id="task-desc" placeholder="Task Description" autocomplete="off">
26+
<button onclick="addTask()">Add Task</button>
27+
</div>
28+
</div>
29+
30+
31+
<script src="script.js"></script>
32+
</body>
33+
34+
</html>

‎Day #70 - Event Calendar/screenshot.png

91.3 KB
Loading

‎Day #70 - Event Calendar/script.js

+110
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
// Function to call generate calendar on load
2+
window.onload = function () {
3+
generateCalendar();
4+
};
5+
6+
// Function to generate the calendar
7+
function generateCalendar() {
8+
const calendar = document.getElementById('calendar');
9+
10+
// Create a new Date object to get the current date, month, and year
11+
const currentDate = new Date();
12+
const month = currentDate.getMonth();
13+
const year = currentDate.getFullYear();
14+
15+
// Calculate the first and last day of the month
16+
const firstDayOfMonth = new Date(year, month, 1);
17+
const lastDayOfMonth = new Date(year, month + 1, 0);
18+
19+
// Calculate the day of the week of the first day of the month
20+
const firstDayOfWeek = firstDayOfMonth.getDay();
21+
const totalDays = lastDayOfMonth.getDate();
22+
23+
// Add blank div elements for the days before the first day of the month
24+
for (let i = 0; i < firstDayOfWeek; i++) {
25+
let blankDay = document.createElement("div");
26+
calendar.appendChild(blankDay);
27+
}
28+
29+
// Add div elements for each day of the month
30+
for (let day = 1; day <= totalDays; day++) {
31+
let daySquare = document.createElement("div");
32+
daySquare.className = "calendar-day";
33+
daySquare.textContent = day;
34+
daySquare.id = `day-${day}`;
35+
calendar.appendChild(daySquare);
36+
}
37+
}
38+
39+
// Function to show the add task modal
40+
function showAddTaskModal() {
41+
document.getElementById('addTaskModal').style.display = 'block';
42+
}
43+
44+
// Function to close the add task modal
45+
function closeAddTaskModal() {
46+
document.getElementById('addTaskModal').style.display = 'none';
47+
}
48+
49+
// Function to delete a task
50+
function deleteTask(taskElement) {
51+
// Confirmation dialog to confirm deletion
52+
if (confirm("Are you sure you want to delete this task?")) {
53+
// If user confirms, remove the task element from its parent
54+
taskElement.parentNode.removeChild(taskElement);
55+
}
56+
}
57+
58+
// Function to edit a task
59+
function editTask(taskElement) {
60+
// Prompt user to edit the task description, with current description as default
61+
const newTaskDesc = prompt("Edit your task:", taskElement.textContent);
62+
// Check if user entered a new task description and it's not empty
63+
if (newTaskDesc !== null & newTaskDesc.trim() !== "") {
64+
// Update task element's text content with the new description
65+
taskElement.textContent = newTaskDesc;
66+
}
67+
}
68+
69+
// Function to add a task
70+
function addTask() {
71+
// Get task date and description from input fields
72+
const taskDate = new Date(document.getElementById('task-date').value);
73+
const taskDesc = document.getElementById('task-desc').value.trim();
74+
75+
// Validate task date and description
76+
if (taskDesc && !isNaN(taskDate.getDate())) {
77+
// Get calendar days
78+
const calendarDays = document.getElementById('calendar').children;
79+
// Iterate through calendar days
80+
for (let i = 0; i < calendarDays.length; i++) {
81+
const day = calendarDays[i];
82+
// Check if day matches task date
83+
if (parseInt(day.textContent) === taskDate.getDate()) {
84+
// Create task element
85+
const taskElement = document.createElement("div");
86+
taskElement.className = "task";
87+
taskElement.textContent = taskDesc;
88+
89+
// Add event listener for right-click to delete task
90+
taskElement.addEventListener("contextmenu", function (event) {
91+
event.preventDefault(); // Prevent default context menu
92+
deleteTask(taskElement); // Call deleteTask function
93+
});
94+
95+
// Add event listener for regular click to edit task
96+
taskElement.addEventListener('click', function () {
97+
editTask(taskElement); // Call editTask function
98+
});
99+
100+
// Append task element to day element
101+
day.appendChild(taskElement);
102+
break;
103+
}
104+
}
105+
closeAddTaskModal(); // Close add task modal
106+
} else {
107+
// Alert if invalid date or task description
108+
alert("Please enter a valid date and task description!");
109+
}
110+
}

‎Day #70 - Event Calendar/style.css

+164
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
2+
3+
*{
4+
margin: 0;
5+
padding: 0;
6+
font-family: 'Roboto', sans-serif;
7+
}
8+
9+
body{
10+
height: 100%;
11+
background-color: #f0f0f0;
12+
}
13+
14+
.planner{
15+
text-align: center;
16+
padding-top: 20px;
17+
padding-bottom: 60px;
18+
}
19+
20+
.calendar-grid{
21+
display: grid;
22+
grid-template-columns: repeat(7, 1fr);
23+
gap: 10px;
24+
padding: 20px;
25+
}
26+
27+
.add-task-btn{
28+
position: fixed;
29+
bottom: 20px;
30+
left: 50%;
31+
transform: translateX(-50%);
32+
color: #fff;
33+
background-color: #212121;
34+
padding: 10px 48px;
35+
border: none;
36+
border-radius: 20px;
37+
cursor: pointer;
38+
transition: all 0.3s ease;
39+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
40+
}
41+
42+
.calendar-day{
43+
display: flex;
44+
flex-direction: column;
45+
align-items: center;
46+
background-color: #fff;
47+
color: #c4c4c4;
48+
padding: 15px;
49+
border-radius: 8px;
50+
min-height: 70px;
51+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
52+
}
53+
54+
.task{
55+
background-color: #212121;
56+
color: #fff;
57+
padding: 12px;
58+
margin-top: 10px;
59+
border-radius: 4px;
60+
text-align: center;
61+
word-break: break-word;
62+
font-size: 0.8em;
63+
width: 88%;
64+
cursor: pointer;
65+
transition: all 0.3s ease;
66+
}
67+
68+
.task:hover,
69+
.modal-content button:hover,
70+
.add-task-btn:hover{
71+
background-color: #424242;
72+
}
73+
74+
.modal{
75+
display: none;
76+
position: fixed;
77+
z-index: 1;
78+
left: 0;
79+
top: 0;
80+
width: 100%;
81+
height: 100%;
82+
overflow: auto;
83+
background-color: rgba(0, 0, 0, 0.7);
84+
}
85+
86+
.modal-content{
87+
background-color: #fff;
88+
margin: 15% auto;
89+
padding: 20px;
90+
border: 1px solid #888;
91+
width: 300px;
92+
border-radius: 14px;
93+
text-align: center;
94+
}
95+
96+
.close{
97+
color: #aaa;
98+
float: right;
99+
font-size: 28px;
100+
font-weight: bold;
101+
text-decoration: none;
102+
cursor: pointer;
103+
transition: all 0.3s ease;
104+
}
105+
106+
.close:hover,
107+
.close:focus{
108+
color: #000;
109+
}
110+
111+
input[type="date"],
112+
input[type="text"]{
113+
width: 100%;
114+
padding: 10px;
115+
margin: 10px 0;
116+
display: inline-block;
117+
border: 1px solid #ccc;
118+
border-radius: 10px;
119+
outline: none;
120+
box-sizing: border-box;
121+
}
122+
123+
.modal-content button{
124+
background-color: #212121;
125+
color: #fff;
126+
padding: 10px 48px;
127+
margin: 8px 0;
128+
border: none;
129+
border-radius: 14px;
130+
cursor: pointer;
131+
transition: all 0.3s ease;
132+
}
133+
134+
@media screen and (max-width: 1200px) {
135+
136+
.calendar-grid{
137+
grid-template-columns: repeat(5, 1fr);
138+
}
139+
140+
}
141+
142+
@media screen and (max-width: 992px) {
143+
144+
.calendar-grid{
145+
grid-template-columns: repeat(3, 1fr);
146+
}
147+
148+
}
149+
150+
@media screen and (max-width: 768px) {
151+
152+
.calendar-grid{
153+
grid-template-columns: repeat(2, 1fr);
154+
}
155+
156+
}
157+
158+
@media screen and (max-width: 576px) {
159+
160+
.calendar-grid{
161+
grid-template-columns: repeat(1, 1fr);
162+
}
163+
164+
}

‎README.md

+2-1
Original file line numberDiff line numberDiff line change
@@ -79,8 +79,9 @@ Here we have list of projects:
7979
67. Captcha App
8080
68. JSON Parser
8181
69. Form Validation
82+
70. Calendar With Events
8283

83-
## Where is rest 31 Projects
84+
## Where is rest 30 Projects
8485

8586
We create a project each 3 days with voting on our <a href="https://youtube.com/@AsmrProg" target="_blank">Youtube</a> channel.
8687
You can vote for upcoming projects on our channel **community** page :wink:

0 commit comments

Comments
 (0)