Skip to content

[1주차] 백승선 과제 제출합니다 #4

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

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

[1주차] 백승선 과제 제출합니다 #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c701ea7
헤더와 메뉴 아이콘 구현
baekseungsun Sep 12, 2025
100c535
메뉴 탭의 기능들과 기타 ui 모두 구현
baekseungsun Sep 12, 2025
9d66d04
style.css 파일을 추가
baekseungsun Sep 12, 2025
d6a102c
메뉴 탭 열고 닫기 구현
baekseungsun Sep 12, 2025
3f2b339
기타 기능 구현
baekseungsun Sep 12, 2025
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
47 changes: 47 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vanilla-todo 백승선</title>
<link rel="stylesheet" href="style.css">
<script defer src="todolist.js"></script>
Copy link

@Jy000n Jy000n Sep 15, 2025

Choose a reason for hiding this comment

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

defer 속성에 대해 새롭게 알게 되었습니다! 저도 다음에 사용해봐야겠습니다:)

</head>
<body>


<header class="header">
<button class="menu">
<div class="menuIcon"></div>
</button>
<h1 class="title">To Do</h1>
</header>

<aside class="menuTab" id="menuTab">
<nav class="menuContent" id="menuContent">
<button id="closeMenu">x</button>
<div class="options">
<button class="lWeek">Last Week</button>
<button class="nWeek">Next Week</button>
</div>
</nav>
</aside>

<div class="dateSelector">
<button class="date" id="yesterday">◀</button>
<button class="today">--</button>
<button class="date" id="tomorrow">▶</button>
</div>
<div class="inputContainer">
<input class="input" placeholder="What is there to do?">
<button class="register">Add</button>
</div>
<div class="list">
<div class="topRowList">
<button class="clearAll">Clear all</button>
<div class="numEvent">To-do: 0</div>
</div>
<ul class="event">
Copy link
Member

@chaeyoungwon chaeyoungwon Sep 14, 2025

Choose a reason for hiding this comment

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

event는 전역 객체와 혼동될 수 있으니, 클래스명은 가급적 의미를 드러내면서도 예약어와 겹치지 않도록 네이밍 해주면 더 안전할 것 같습니다!

</ul>
</div>
</body>
</html>
287 changes: 287 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,287 @@


/*reset*/
body {
margin: 0;
font-family: arial, sans-serif;
background: #e2e8f0;
}

/* Header layout with flexbox */
.header {
display: flex;
align-items: center;
justify-content: center;
background: #0f172a;
color: white;
padding: 14px 16px;
}

.menu {
position: absolute;
left: 16px;
background: none;
border: none;
cursor: pointer;
padding: 8px;
}

.menuIcon,
.menuIcon::before,
.menuIcon::after {
display: block;
width: 24px;
height: 2px;
background: white;
border-radius: 2px;
content: "";
position: relative;
}

.menuIcon::before,
.menuIcon::after {
position: absolute;
left: 0;
}

.menuIcon::before { top: -10px; }
.menuIcon::after { top: 10px; }

.menuTab {
position: fixed;
background: #e2e8f0;
width: 300px;
top: 0; left: 0; bottom: 0;
transform: translateX(-100%);
transition: transform .25s ease;
}

.menuTab.active {
transform: translateX(0);
}

.menuContent {
display: flex;
height: 100%;
flex-direction: column;
gap: 8px;
font-size: 15px;
}

.options {
display: flex;
flex-direction: column;
justify-content: center;
margin-top: 80px;
align-items: center;
gap: 110px;
padding: 20px;

}

.nWeek {
width: 120px;
height: 30px;
font-size: 16px;
border-radius: 10px;
}

.lWeek {
width: 120px;
height: 30px;
font-size: 16px;
border-radius: 10px;
}
Comment on lines +82 to +94
Copy link
Member

@chaeyoungwon chaeyoungwon Sep 13, 2025

Choose a reason for hiding this comment

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

동일한 스타일은 이렇게 묶어주거나, week 버튼 클래스로 통일해도 좋을 거 같습니다!

.nWeek,
.lWeek {
  width: 120px;
  height: 30px;
  font-size: 16px;
  border-radius: 10px;
}


.menuDatePicker{
margin-top: 80px;
margin-left: 88px;
font-size: 16px;
width: 120px;
height: 30px;
border-radius: 10px;

}
Comment on lines +96 to +104
Copy link
Member

@chaeyoungwon chaeyoungwon Sep 13, 2025

Choose a reason for hiding this comment

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

스크린샷 2025-09-14 오전 5 29 40

menuDatePicker에서 텍스트가 조금 잘려보이는 거 같은데 (일이 안보임), 넓이를 조금 더 키워줬어도 좋을 거 같아용


#closeMenu {
position: absolute;
font-size: 30px;
width: 22px;
margin-top: 15px;
margin-left: 20px;
background: none;
border: none;
cursor: pointer;
}
/* Centered title */
.title {
margin: 0;
font-size: 35px;
font-weight: 600;
}

.dateSelector {
display: flex;
align-items: center;
justify-content: center;
background: none;
margin: 30px;
gap: 20px;
}

.date {
font-size: 20px;
background: none;
border: none;
}

.today {
display: flex;
color: #0f172a;
font-size: 20px;
background: none;
border: none;
}

.inputContainer {
display: flex;
justify-content: center;
gap: 20px;
margin: 40px auto;
background: whitesmoke;
border-radius: 20px;
padding-left: 10px;
width: 400px;
height: 50px;
}

.input {
font-size: 23px;
border: none;
outline: none;
background: none;
color: #0f172a;
}

.register {
font-size: 15px;
width: 60px;
height: 25px;
border-radius: 13px;
border: 2px solid black;
cursor: pointer;
background: #0f172a;
color: white;
margin-right: 1px;
margin-top: auto;
margin-bottom: auto;
}

.list {
display: flex;
flex-direction: column;
gap: 6px;
height: 425px;
width: 600px;
Copy link

@Jy000n Jy000n Sep 15, 2025

Choose a reason for hiding this comment

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

.list 에서 width를 600px로 고정해서 그런지, 화면 너비를 줄이면 레이아웃이 잘리는 현상이 발생합니다! %나 rem 단위를 사용하면 조금 더 유동적으로 처리할 수 있을 것 같습니다

margin: 0 auto;
background: whitesmoke;
border: 6px solid #0f172a;
border-radius: 20px;
}

.event {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
font-size: 26px;
padding: 0;
margin: 5px;
max-height: 350px;
overflow-y: auto;
}

.topRowList {
display: flex;
}

.clearAll{
color: #0f172a;
font-size: 20px;
border-radius: 20px;
width: 120px;
margin-top: 5px;
margin-left: 10px;
background: #e2e8f0;
}
Comment on lines +208 to +216
Copy link
Member

@chaeyoungwon chaeyoungwon Sep 13, 2025

Choose a reason for hiding this comment

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

add 버튼처럼 다른 버튼 요소들에도 cursor: pointer; 속성을 적용해주면 더 좋을 것 같아요!

Copy link

@Jy000n Jy000n Sep 15, 2025

Choose a reason for hiding this comment

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

저도 동의하는 부분입니다! 덧붙여서 구체적으로 말씀드리자면, 날짜 앞뒤 버튼, last week, next week, 날짜 선택 부분에서 달력 아이콘, Clear all, done, pin, delete 버튼 정도일 것 같습니다


.numEvent {
line-height: 1.5;
color: #0f172a;
font-size: 18px;
border-radius: 20px;
width: 120px;
margin-top: 5px;
margin-left: auto;
margin-right: 10px;
background: #e2e8f0;
border: 2px solid #0f172a;
padding-left: 20px;
}
.event li {
line-height: 1.5;
display: flex;
padding: 10px 5px;
border: 3px solid #0f172a;
border-radius: 15px;
height: 30px;
width: 550px;
background: #e2e8f0;
}

.delEvent {
background: #0f172a;
color: white;
border: none;
font-size: 16px;
border-radius: 20px;
}

.text {
margin-left: 10px;
margin-right: auto;
font-size: 20px;
}

.pinEvent {
background: none;
color: white;
border: black solid 1px;
font-size: 15px;
border-radius: 20px;
margin-right: 8px;
}

.doneEvent {
background: #0f172a;
color: white;
border: none;
font-size: 15px;
border-radius: 20px;
}

.markDone {
text-decoration: line-through;
text-decoration-color: red;
color: grey;
}

.markPin {
background: red;
}

body.invert {
filter: invert(1);
}


Loading