Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Calendar #3989

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Calendar #3989

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b99ac40
My calendar
taniaPya Dec 1, 2024
6d964b8
Tanias Calendar
taniaPya Dec 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 34 additions & 1 deletion src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,43 @@
<title>Calendar</title>
<link
rel="stylesheet"
href="styles/index.scss"
href="styles/main.scss"
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The href attribute is linking to a .scss file (styles/main.scss). Browsers cannot directly interpret SCSS files. You should link to the compiled CSS file instead, such as styles/main.css.

/>
</head>
<body>
<h1>Calendar</h1>
<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>
61 changes: 61 additions & 0 deletions src/styles/main.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
@import './utils/variables';
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ensure that the file ./utils/variables exists and contains the necessary variable definitions, such as $width-calendar, $width-square, $week-day, and $month-length. Without these definitions, the SCSS will not compile correctly.


body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
}

.calendar {
font-family: Arial, sans-serif;
font-size: 30px;
display: flex;
flex-wrap: wrap;
gap: 1px;
width: $width-calendar;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The variable $width-calendar is used here. Make sure it is defined in the imported variables file, otherwise, this will cause a compilation error.

margin: auto;

@each $name, $number in $week-day {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The loop uses $week-day. Ensure that $week-day is a map or list defined in the variables file, as it is used to dynamically generate styles.

&--start-day-#{$name} > :first-child {
margin-left: (($number - 1) * $width-square) + ($number - 1);
}
}

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

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

&--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 {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The loop uses $month-length. Ensure that $month-length is defined in the variables file, as it is used to dynamically generate styles for each day of the month.

&: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
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
.calendar {
@each $name, $number in $week-day {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ensure that the variable $week-day is defined and accessible in this context. It should be a map or list that provides the necessary data for the @each loop to function correctly.

&--start-day--#{name} {
margin-left: (($number - 1) * $width-square) + ($number - 1);
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The variable $width-square is used here. Make sure it is defined and accessible in this context, otherwise, this will cause a compilation error.

}
}
}
4 changes: 4 additions & 0 deletions src/styles/utils/variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
$width-square: 100px;
$width-calendar: ($width-square * 7) + 10px;
$week-day: ('mon' 1, 'tue' 2, 'wed' 3, 'thu' 4, 'fri' 5, 'sat' 6, 'sun' 7);
$month-length: 31;
Loading