forked from faizbolt555/life-Calendar
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Prototype_ver1.0.html
133 lines (111 loc) · 4.04 KB
/
Prototype_ver1.0.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Life Calendar Sample</title>
<style>
/* CSS 코드 */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.container {
max-width: 1000px;
margin: 20px auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
.calendar {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}
.month {
margin-bottom: 20px;
}
.month-name {
font-weight: bold;
text-align: center;
}
.days {
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-gap: 5px;
}
.day {
border: 1px solid #ccc;
padding: 10px;
text-align: center;
cursor: pointer; /* 커서를 변경하여 클릭 가능하게 만듭니다 */
}
.day:hover {
background-color: #f0f0f0;
}
.legend {
margin-top: 20px;
}
.legend-item {
margin-bottom: 5px;
}
</style>
</head>
<body>
<div class="container">
<h1>Life Calendar</h1>
<div class="calendar"></div>
<hr>
<div class="legend">
<h2>색상 설명</h2>
<div class="legend-item" style="color: red;">빨강: 이 날이 가장 기쁨</div>
<div class="legend-item" style="color: orange;">주황: 이 날은 기쁨</div>
<div class="legend-item" style="color: green;">초록: 이 날이 평범함</div>
<div class="legend-item" style="color: skyblue;">하늘색: 이 날이 우울함</div>
<div class="legend-item" style="color: blue;">파랑: 이 날이 가장 슬픔</div>
</div>
</div>
<script>
// JavaScript 코드
document.addEventListener("DOMContentLoaded", function() {
const calendarDiv = document.querySelector('.calendar');
// Create months of the year
const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
months.forEach(month => {
const monthElement = document.createElement('div');
monthElement.classList.add('month');
calendarDiv.appendChild(monthElement);
const monthName = document.createElement('div');
monthName.classList.add('month-name');
monthName.textContent = month;
monthElement.appendChild(monthName);
const daysElement = document.createElement('div');
daysElement.classList.add('days');
monthElement.appendChild(daysElement);
// Get number of days in the month
const monthIndex = months.indexOf(month);
const daysInMonth = new Date(2022, monthIndex + 1, 0).getDate();
// Create days of the month
for (let i = 1; i <= daysInMonth; i++) {
const dayElement = document.createElement('div');
dayElement.classList.add('day');
dayElement.textContent = i;
daysElement.appendChild(dayElement);
// Add click event listener to each day
dayElement.addEventListener('click', function() {
// Prompt user to choose a color
const color = prompt("Choose a color for your mood (e.g., red, blue, green):");
// Prompt user to choose brightness
const brightness = prompt("Choose the brightness of your mood (e.g., very bright, bright, normal, dark, very dark):");
// Change background color of the clicked day
dayElement.style.backgroundColor = color;
// Display mood based on brightness
alert("You were " + brightness + " on this day.");
});
}
});
});
</script>
</body>
</html>