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

Jump to bottom

[1주차] 최지원 미션 제출합니다. #3

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

[1주차] 최지원 미션 제출합니다. #3

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
2174809
feat: 기본 UI 구현
jiwonnchoi Sep 5, 2024
3556734
feat: 입력창 토글 기능 구현
jiwonnchoi Sep 6, 2024
1434121
feat: 할 일 추가 함수 구현
jiwonnchoi Sep 6, 2024
8ec025d
feat: 토글, 삭제 함수 구현
jiwonnchoi Sep 6, 2024
e3313a3
feat: 날짜 및 현재시각 표기
jiwonnchoi Sep 6, 2024
a254567
feat: 로컬스토리지 데이터 처리 구현
jiwonnchoi Sep 6, 2024
3152ab0
feat: 반응형 구현
jiwonnchoi Sep 6, 2024
4de67aa
style: 클래스명 수정 및 rem 단위 변환
jiwonnchoi Sep 6, 2024
8f7e29b
feat: 공통 기능 함수화
jiwonnchoi Sep 6, 2024
c08b6fa
feat: 전체, 완료된 항목 개수 표기 추가
jiwonnchoi Sep 6, 2024
86260ea
feat: 입력창 애니메이션 추가
jiwonnchoi Sep 6, 2024
3d0989b
fix: 스타일 수정 및 주석 추가
jiwonnchoi Sep 7, 2024
ca4e76e
chore: 버셀 배포
jiwonnchoi Sep 7, 2024
3d044fe
refactor: 아이콘 png에서 svg로 변경
jiwonnchoi Sep 10, 2024
28d46e6
refactor: 현재시각 1초지연 방지
jiwonnchoi Sep 10, 2024
970222b
refactor: did 네이밍 done으로 변경
jiwonnchoi Sep 10, 2024
cd12e36
refactor: addTodoItem의 input값 캐싱
jiwonnchoi Sep 10, 2024
780ce6d
refactor: deleteItem 중복호출 수정
jiwonnchoi Sep 11, 2024
a8f23ca
refactor: 전역 스타일 추가
jiwonnchoi Sep 11, 2024
eb9f93e
refactor: toggleForm 로직 분리 및 불리언 추가
jiwonnchoi Sep 11, 2024
9ef7e0e
refactor: 버튼생성 이벤트를 상위에 위임하도록 수정
jiwonnchoi Sep 11, 2024
f6d8336
fix: 배열 각 항목에 고유id 추가
jiwonnchoi Sep 11, 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
25 changes: 24 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,30 @@
</head>

<body>
<div class="container"></div>
<div class="container">
<div class="nav boxStyle">
<span class="intro mentStyle">당신의 할 일을 작성해보세요 ✏️</span>
<span class="showInput mentStyle">입력창 불러오기</span>
</div>

<div class="contents boxStyle">
<div class="todo">
<div class="todoTop">
<span class="mentStyle">What I have to do</span>
<span class="inputBox boxStyle">
<input class="input" />
<span class="submitBtn">작성하기</span>
</span>
</div>
<ul class="todoList"></ul>
</div>

<div class="did">
<div class="mentStyle">What I did</div>
<ul class="didList"></ul>
</div>
</div>
</div>
</body>
<script src="script.js"></script>
</html>
64 changes: 64 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,65 @@
/* 본인의 디자인 감각을 최대한 발휘해주세요! */
.container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
}

.nav {
width: 600px;
height: 50px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px;
margin-bottom: 20px;
}

.contents {
width: 600px;
display: flex;
flex-direction: column;
padding: 20px;
}

.todoTop {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}

.inputBox {
width: 300px;
height: 30px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 10px;
}

.input {
width: 70%;
border: transparent;
}

.submitBtn {
color: #85b6ff;
Copy link
Collaborator

@jinnyleeis jinnyleeis Sep 8, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

#85b6ff,#458fff 이 두 색상을 계속해서 사용해주셨는데,
재사용되는 색상을 CSS 전역 변수로 정의해서 이용하는 방법을 제안드려요!

공식 문서에 나와있듯이, :root 클래스에 선언해서 HTML 문서 전체에서 이를 활용할 수 있도록 할 수 있으니 한 번 참고해보시면 좋을 것 같습니다!
https://developer.mozilla.org/ko/docs/Web/CSS/Using_CSS_custom_properties

:root {
--primary-color: #85b6ff;
--secondary-color: #458fff;
}

...
.today {
color: var(--primary-color);
font-family: "Pretendard";
font-weight: 300;
font-size: 0.938rem;
}
...

font-family: "Pretendard";
font-weight: 600;
font-size: 18px;
}

.mentStyle {
color: #458fff;
font-family: "Pretendard";
font-weight: 600;
font-size: 18px;
}

.boxStyle {
border-radius: 30px;
border: 1px solid #85b6ff;
}