1. ejs 파일 만들기
ejs 뷰 엔진을 이용할 예정이다.
views 파일 안에 todo.ejs, todo-edit.ejs 파일을 만들어준다.(error.ejs도 대충 코드 넣어서 만들어놔야 오류가 안난다.)
구글링을 참조해서 만들었다.
views/todo.ejs
<!DOCTYPE html>
<html>
<head>
<title>TODO</title>
<link rel="stylesheet" type="text/css" href="/public/stylesheets/todo.css">
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel='stylesheet' href='//cdn.jsdelivr.net/npm/font-kopub@1.0/kopubdotum.min.css'>
</head>
<body>
<div class="home">
<button type="button" id="img" onclick="location.href='/'">
<img src="../public/images/home.png" width="70">
</button>
</div>
<h1 class="main-text">TODO LIST</h1>
<hr><br>
<form action="/todo/write" method="post" class="form-box">
<input type="text" class="text-box" placeholder="Enter todo" name="content" autocomplete="off">
<button type="submit" class="btn">Write</button>
</form>
<br>
<ul class="list-box">
<%
var date = "";
var next_date = "";
todoTasks.forEach(tasks => {
date = (tasks.date).substring(0, 10);
if(date != next_date){
next_date = date;
%>
<li>
<div class="date"><%= date %></div>
</li>
<% } %>
<li class="todo-item">
<div class="todo-item-content" id="content"> <%= tasks.content %>   </div>
<div class="edit-btn">
<button type="button" id="img" onclick="location.href='/todo/edit/<%= tasks._id %>'"><img src="../public/images/submit.png" width="20px"></button>
<button type="button" id="img" onclick="location.href='/todo/remove/<%= tasks._id %>'"><img src="../public/images/remove.png" width="20px"></button>
</div>
</li>
<% }); %>
</ul>
</body>
</html>views/todo-edit.ejs
<!DOCTYPE html>
<html>
<head>
<title>TODO EDIT</title>
<link rel="stylesheet" type="text/css" href="/public/stylesheets/todo.css">
</head>
<body>
<div class="home">
<button type="button" id="img" onclick="location.href='/'">
<img src="../public/images/home.png" width="70">
</button>
</div>
<h1 class="main-text">TODO LIST</h1>
<hr><br>
<form action="/todo/write" method="post" class="form-box">
<input type="text" class="text-box" placeholder="Enter todo" name="content">
<button type="submit" class="btn">Write</button>
</form>
<br>
<ul class="list-box">
<%
var date = "";
var next_date = "";
todoTasks.forEach(tasks => {
date = (tasks.date).substring(0, 10);
if(date != next_date){
next_date = date;
%>
<li>
<div class="date"><%= date %></div>
</li>
<% } if(tasks._id == idTask) { %>
<li class="todo-item">
<form action="/todo/update/<%= tasks._id %>" method="post">
<input type="text" value="<%= tasks.content %>" name="content" id="edit-box" autocomplete="off">
<button type="submit" id="img">
<img src="/public/images/submit.png" width="25px">
</button>
<button type="button" id="img" onclick="location.href='/todo'">
<img src="/public/images/remove.png" width="20px">
</button>
</form>
</li>
<% } else { %>
<li class="todo-item">
<div class="todo-item-content"> <%= tasks.content %>   </div>
<div class="edit-btn">
<button type="button" id="img" onclick="location.href='/edit/<%= tasks._id %>'">
<img src="/public/images/submit.png" width="20px">
</button>
<button type="button" id="img" onclick="location.href='/remove/<%= tasks._id %>'">
<img src="/public/images/remove.png" width="20px">
</button>
</div>
</li>
<% }}); %>
</ul>
</body>
</html>꾸미고 싶다면 bootstrap 을 이용하여 예쁘게 꾸미면 된다.
첫 todo 프로젝트이지만 여기서 더 나아가 다른 사람들과 개별적인 나의 프로젝트를 만들 예정이다.
타이머를 넣어보는 작업 중이다.
'개인 프로젝트' 카테고리의 다른 글
| Step 2. MongoDB 연결 및 기본 코드 변경 (0) | 2022.10.03 |
|---|---|
| Step1-1 nodeJS에서 mongoDB 사용 (0) | 2022.09.27 |
| Step1. To_Do 웹 만들기 구상 및 설계 (2) | 2022.09.22 |
댓글