캘린더와 함께 간단한 할 일을 메모할 수 있는 사이트를 만들어보자 생각한 지 언....(기억 안남)
그래서 이번에 프로젝트도 끝났겠다, 프론트엔드 멘토에서 얻은 의욕을 여기에 써보자는 생각이 들었다.
리액트로 구현을 할까, 바닐라JS로 구현을 할까 고민을 했지만
기본적인 자바스크립트에 익숙치 않은 상태에서 리액트로 들어갔던 것이 내심 불안했던 지라 이번에는 바닐라 JS로 구현해보기로 마음 먹었다!
우선 디자인부터 만들어보자!
원래는 프론트엔드 멘토에 있던 시안을 기반으로 만들어보려고 했는데, 조금 더 단순하고 깔끔한 디자인으로 만들고 싶어서 내가 처음부터 새로 만들어봤다!!
구성은 아주 간단하다.
- 이번 달을 확인할 수 있는 캘린더 부분
- 선택한 날짜의 일정을 확인하고 등록할 수 있는 사이드 바
기본적인 HTML과 CSS를 사용할 것이고, JS도 Vanila JavaScript를 사용할 것이다.
그렇다면 UI부터 바로 만들어보자!
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Calender ToDo</title>
<link rel="stylesheet" href="./styles//index.css" />
</head>
<body>
<main>
<div class="calendar-container">
<div class="calendar-container-box">
<div class="nav">
<button class="nav-btn go-prev"></button>
<button class="today"></button>
<button class="nav-btn go-next"></button>
</div>
<div class="calender">
<div class="days">
<div class="day sun">SUN</div>
<div class="day">MON</div>
<div class="day">TUE</div>
<div class="day">WED</div>
<div class="day">THU</div>
<div class="day">FRI</div>
<div class="day">SAT</div>
</div>
<div class="dates"></div>
</div>
</div>
</div>
<div class="todo-container">
<div class="todo-today-work">
<div class="todo-today"></div>
<ol class="todo-list-container">
</ol>
</div>
<form class="todo-input-container">
<input class="todo-input" type="text" placeholder="할 일을 입력해 주세요." />
</form>
</div>
</main>
<script type="module" src="/js/index.js"></script>
</body>
</html>
@import "./reset.css";
body {
font-size: 1.3rem;
}
body::after {
width: 100%;
height: 100%;
content: "";
background: url("/assets/grid-pattern.jpg");
background-size: cover;
opacity: 0.2;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
main {
width: fit-content;
display: flex;
border: solid 0.1rem #d9d9d9;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
}
/** calender **/
.calendar-container {
border-right: solid 0.1rem #d9d9d9;
}
.calendar-container-box {
padding: 2rem 3rem;
text-align: center;
}
.nav {
margin-bottom: 1.5rem;
}
.nav-button {
width: 1rem;
height: 1rem;
background-repeat: no-repeat;
background-size: contain;
color: rgba(0, 0, 0, 0);
}
.today {
min-width: 8rem;
margin: 0 1rem;
}
.go-prev {
background-image: url("/assets/left-button.svg");
background-position: center;
}
.go-next {
background-image: url("/assets/right-button.svg");
background-position: center;
}
.days {
display: flex;
}
.day {
width: calc(100% / 7);
padding: 0.3rem 2.2rem;
border: 0.1rem solid #d9d9d9;
text-align: center;
font-size: 1.2rem;
}
.day.sun {
color: #ff7a7a;
}
.dates {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
font-size: 1.1rem;
max-height: 48rem;
min-height: 48rem;
}
.date {
text-align: left;
min-height: 8rem;
padding: 0.8rem;
border: 0.1rem solid #d9d9d9;
color: #000000;
}
.date.prev {
color: #d9d9d9;
}
/* todo container */
.todo-container {
width: 25rem;
padding: 1.5rem;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.todo-today-work {
display: flex;
flex-direction: column;
gap: 1rem;
}
.todo-today {
font-size: 1.3rem;
font-weight: 600;
color: #56a4ff;
}
.todo-list-container {
max-height: 40.5rem;
overflow: scroll;
}
.todo-list-container::-webkit-scrollbar {
display: none;
}
.todo-todo {
position: relative;
padding-left: 0;
display: flex;
justify-content: start;
align-items: center;
gap: 0.7rem;
padding: 0.2rem;
}
#check-button {
background-repeat: no-repeat;
background-position: center;
width: 1.5rem;
height: 1.5rem;
}
#check-button.process {
background-image: url("/assets/empty-icon.svg");
}
#check-button.done {
background-image: url("/assets/check-icon.svg");
}
.todo-delete-button {
background-image: url("/assets/delete.svg");
background-repeat: no-repeat;
width: 0.7rem;
height: 0.7rem;
position: absolute;
bottom: 1rem;
right: 0.5rem;
}
#process-text {
text-decoration: none;
color: #000000;
}
#process-text.complete {
text-decoration-line: line-through;
color: #d9d9d9;
}
.todo-input-container {
width: 100%;
}
.todo-input {
width: 100%;
position: relative;
padding: 1rem 1.3rem;
border: solid 0.1rem #d9d9d9;
border-radius: 2rem;
outline-color: #56a4ff;
font-size: 1.2rem;
}
.todo-input::placeholder {
font-size: 1.2rem;
}피그마 시안대로 HTML과 CSS를 짰고,
달력 안에 들어갈 날짜와 할일 목록에 들어갈 할 일 등은 JS를 통해서 추가해줄 예정이기 때문에 비워놓았다.
원래, 날짜 불러오는 부분까지 이번 포스팅에 담으려고 했는데 그렇게 되면 생각보다 너무 길어질 것 같아서 포스팅을 크게 UI, 캘린더 JS 로직, Todo 등록 JS 로직으로 나눠서 업로드 하려고 한다.
'💡뚝딱뚝딱 만들어보자 ~! :) > [Vanila JS] Calender Todo' 카테고리의 다른 글
| [Vanila JS] Calender Todo - Calender Logic (0) | 2024.05.25 |
|---|
