Skip to content

Commit

Permalink
Tanias Calendar
Browse files Browse the repository at this point in the history
  • Loading branch information
taniaPya committed Dec 3, 2024
1 parent b99ac40 commit 6d964b8
Show file tree
Hide file tree
Showing 4 changed files with 84 additions and 61 deletions.
64 changes: 32 additions & 32 deletions src/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -14,38 +14,38 @@
</head>
<body>
<h1>Calendar</h1>
<div class="month">
<div class="day"></div>
<div class="day"></div>
<div class="day"></div>
<div class="day"></div>
<div class="day"></div>
<div class="day"></div>
<div class="day"></div>
<div class="day"></div>
<div class="day"></div>
<div class="day"></div>
<div class="day"></div>
<div class="day"></div>
<div class="day"></div>
<div class="day"></div>
<div class="day"></div>
<div class="day"></div>
<div class="day"></div>
<div class="day"></div>
<div class="day"></div>
<div class="day"></div>
<div class="day"></div>
<div class="day"></div>
<div class="day"></div>
<div class="day"></div>
<div class="day"></div>
<div class="day"></div>
<div class="day"></div>
<div class="day"></div>
<div class="day"></div>
<div class="day"></div>
<div class="day"></div>
<div class="calendar calendar--start-day-sun calendar--month-length-31">
<div class="calendar__day"></div>
<div class="calendar__day"></div>
<div class="calendar__day"></div>
<div class="calendar__day"></div>
<div class="calendar__day"></div>
<div class="calendar__day"></div>
<div class="calendar__day"></div>
<div class="calendar__day"></div>
<div class="calendar__day"></div>
<div class="calendar__day"></div>
<div class="calendar__day"></div>
<div class="calendar__day"></div>
<div class="calendar__day"></div>
<div class="calendar__day"></div>
<div class="calendar__day"></div>
<div class="calendar__day"></div>
<div class="calendar__day"></div>
<div class="calendar__day"></div>
<div class="calendar__day"></div>
<div class="calendar__day"></div>
<div class="calendar__day"></div>
<div class="calendar__day"></div>
<div class="calendar__day"></div>
<div class="calendar__day"></div>
<div class="calendar__day"></div>
<div class="calendar__day"></div>
<div class="calendar__day"></div>
<div class="calendar__day"></div>
<div class="calendar__day"></div>
<div class="calendar__day"></div>
<div class="calendar__day"></div>
</div>
</body>
</html>
68 changes: 43 additions & 25 deletions src/styles/main.scss
Original file line number Diff line number Diff line change
@@ -1,43 +1,61 @@
@import './utils/variables';

.month {
body {
display: flex;
flex-wrap: wrap;
gap: 1px;
width: $width-calendar;
margin: auto;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
}

.day {
background-color: #eee;
width: $width-square;
height: $width-square;
border: 1px solid black;
box-sizing: border-box;

.calendar {
font-family: Arial, sans-serif;
font-size: 30px;
text-align: center;
line-height: 100px;
display: flex;
flex-wrap: wrap;
gap: 1px;
width: $width-calendar;
margin: auto;

@for $i from 1 through $month-length {
&:nth-child(#{$i})::before {
content: '#{$i}';
@each $name, $number in $week-day {
&--start-day-#{$name} > :first-child {
margin-left: (($number - 1) * $width-square) + ($number - 1);
}
}

&:first-child {
margin-left: $margin-first-day;
&--month-length-28 > :nth-last-child(-n + 3) {
display: none;
}

&:nth-last-child(-n + 2) {
&--month-length-29 > :nth-last-child(-n + 2) {
display: none;
}

&:hover {
cursor: pointer;
background-color: #ffbfcb;
transform: translateY(-20px);
transition-duration: 0.5s;
&--month-length-30 > :nth-last-child {
display: none;
}

&__day {
background-color: #eee;
width: $width-square;
height: $width-square;
border: 1px solid black;
box-sizing: border-box;

text-align: center;
line-height: $width-square;

@for $i from 1 through $month-length {
&:nth-child(#{$i})::before {
content: '#{$i}';
}
}

&:hover {
cursor: pointer;
background-color: #ffbfcb;
transform: translateY(-20px);
transition-duration: 0.5s;
}
}
}
7 changes: 7 additions & 0 deletions src/styles/utils/mixins.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
.calendar {
@each $name, $number in $week-day {
&--start-day--#{name} {
margin-left: (($number - 1) * $width-square) + ($number - 1);
}
}
}
6 changes: 2 additions & 4 deletions src/styles/utils/variables.scss
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
$width-square: 100px;
$width-calendar: ($width-square * 7) + 10px;
$start-day: 7;
$margin-first-day: (($start-day - 1) * $width-square) + ($start-day - 1);
$month-length: 29;
$days-no: 31 - $month-length;
$week-day: ('mon' 1, 'tue' 2, 'wed' 3, 'thu' 4, 'fri' 5, 'sat' 6, 'sun' 7);
$month-length: 31;

0 comments on commit 6d964b8

Please sign in to comment.