Skip to content

Commit 1b8a8f0

Browse files
sahandghavidelsahandghavidel
committed
fix month calender project
1 parent 85196e3 commit 1b8a8f0

File tree

4 files changed

+110
-129
lines changed

4 files changed

+110
-129
lines changed

‎projects/month-calender/index.html

+4-12
Original file line numberDiff line numberDiff line change
@@ -2,21 +2,14 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
56
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>Calendar</title>
7+
<title>Month Calender</title>
78
<link rel="stylesheet" href="style.css" />
8-
<link
9-
rel="stylesheet"
10-
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css"
11-
/>
12-
<link
13-
href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap"
14-
rel="stylesheet"
15-
/>
169
</head>
1710
<body>
1811
<div class="container">
19-
<div class="calendar">
12+
<div class="calender">
2013
<div class="month">
2114
<div class="date">
2215
<h1></h1>
@@ -35,7 +28,6 @@ <h1></h1>
3528
<div class="days"></div>
3629
</div>
3730
</div>
38-
39-
<script src="script.js"></script>
31+
<script src="index.js"></script>
4032
</body>
4133
</html>

‎projects/month-calender/index.js

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
const monthEl = document.querySelector(".date h1");
2+
const fullDateEl = document.querySelector(".date p");
3+
const daysEl = document.querySelector(".days");
4+
5+
const monthInx = new Date().getMonth();
6+
const lastDay = new Date(new Date().getFullYear(), monthInx + 1, 0).getDate();
7+
const firstDay = new Date(new Date().getFullYear(), monthInx, 1).getDay() - 1;
8+
9+
10+
const months = [
11+
"January",
12+
"February",
13+
"March",
14+
"April",
15+
"May",
16+
"June",
17+
"July",
18+
"August",
19+
"September",
20+
"October",
21+
"November",
22+
"December",
23+
];
24+
25+
monthEl.innerText = months[monthInx];
26+
fullDateEl.innerText = new Date().toDateString();
27+
28+
let days = "";
29+
30+
for (let i = firstDay; i > 0; i--) {
31+
days += `<div class="empty"></div>`;
32+
}
33+
for (let i = 1; i <= lastDay; i++) {
34+
if (i === new Date().getDate()) {
35+
days += `<div class="today">${i}</div>`;
36+
} else {
37+
days += `<div>${i}</div>`;
38+
}
39+
}
40+
41+
daysEl.innerHTML = days;

‎projects/month-calender/script.js

-42
This file was deleted.

‎projects/month-calender/style.css

+65-75
Original file line numberDiff line numberDiff line change
@@ -1,97 +1,87 @@
1-
* {
2-
margin: 0;
3-
padding: 0;
4-
box-sizing: border-box;
5-
font-family: sans-serif;
1+
*{
2+
margin: 0;
3+
padding: 0;
4+
font-family: sans-serif;
5+
box-sizing: border-box;
66
}
77

8-
.container {
9-
width: 100%;
10-
height: 100vh;
11-
background-color: salmon;
12-
color: lightgray;
13-
display: flex;
14-
justify-content: center;
15-
align-items: center;
8+
.container{
9+
width: 100%;
10+
height: 100vh;
11+
background-color: salmon;
12+
display: flex;
13+
justify-content: center;
14+
align-items: center;
1615
}
1716

18-
.calendar {
19-
width: 450px;
20-
height: 520px;
21-
background-color: black;
22-
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.4);
23-
border-radius: 10px;
17+
.calender{
18+
background-color: black;
19+
color: lightgray;
20+
width: 450px;
21+
height: 520px;
22+
border-radius: 10px;
23+
box-shadow: 4px 4px 8px rgba(0, 0, 0, .4);
2424
}
2525

26-
.month {
27-
width: 100%;
28-
height: 120px;
29-
background-color: lightseagreen;
30-
display: flex;
31-
justify-content: center;
32-
align-items: center;
33-
padding: 0 20px;
34-
text-align: center;
35-
border-radius: 10px 10px 0 0;
26+
.month{
27+
width: 100%;
28+
height: 120px;
29+
background-color: lightseagreen;
30+
display: flex;
31+
justify-content: center;
32+
align-items: center;
33+
text-align: center;
34+
border-radius: 10px 10px 0 0;
3635
}
3736

38-
.month i {
39-
font-size: 25px;
40-
cursor: pointer;
37+
.month h1{
38+
font-size: 30px;
39+
font-weight: 400;
40+
text-transform: uppercase;
4141
}
4242

43-
.month h1 {
44-
font-size: 30px;
45-
font-weight: 400;
46-
text-transform: uppercase;
47-
letter-spacing: 2px;
48-
margin-bottom: 1px;
43+
.month p{
44+
font-size: 16px;
4945
}
5046

51-
.month p {
52-
font-size: 16px;
53-
54-
}
55-
56-
.weekdays {
57-
width: 100%;
58-
height: 50px;
59-
display: flex;
47+
.weekdays{
48+
width: 100%;
49+
height: 50px;
50+
display: flex;
6051
}
6152

62-
.weekdays div {
63-
font-size: 15px;
64-
font-weight: bold;
65-
letter-spacing: 1px;
66-
width: 100%;
67-
display: flex;
68-
align-items: center;
69-
justify-content: center;
53+
.weekdays div{
54+
font-size: 15px;
55+
font-weight: bold;
56+
letter-spacing: 1px;
57+
width: 100%;
58+
display: flex;
59+
align-items: center;
60+
justify-content: center;
7061
}
7162

72-
.days {
73-
width: 100%;
74-
display: flex;
75-
flex-wrap: wrap;
76-
padding: 2px;
63+
.days{
64+
width: 100%;
65+
display: flex;
66+
flex-wrap: wrap;
67+
padding: 2px;
7768
}
7869

79-
.days div {
80-
font-size: 14px;
81-
margin: 3px;
82-
width: 57.5px;
83-
height: 50px;
84-
display: flex;
85-
justify-content: center;
86-
align-items: center;
70+
.days div{
71+
font-size: 14px;
72+
margin: 3px;
73+
width: 57.5px;
74+
height: 50px;
75+
display: flex;
76+
justify-content: center;
77+
align-items: center;
8778
}
8879

89-
.days div:hover:not(.empty) {
90-
border: 2px solid gray;
91-
cursor: pointer;
80+
.days div:hover:not(.empty){
81+
border: 2px solid gray;
82+
cursor: pointer;
9283
}
9384

94-
.today {
95-
background-color: lightseagreen;
96-
97-
}
85+
.today{
86+
background-color: lightseagreen;
87+
}

0 commit comments

Comments
 (0)