EJS 템플릿을 사용해서 To Do List 만들기를 해보았다.
아직 데이터 베이스를 배우기 전이라
입력한 아이템은 저장되지 않는다.
또 원하는 아이템 리스트가
기본인 home 과 work 두 개만 가능하다.
내가 원하는 아이템 리스트를 만들어 거기에 아이템을 입력하고
아이템 리스트를 지우게 할 수는 없다.
다음 강의에서 설명이 나오길 바란다..
app.js
const express = require("express");
const bodyParser = require("body-parser");
const date = require(__dirname + "/date.js");
const app = express();
app.set('view engine', 'ejs');
app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static("public"));
const items = ["Buy Food", "Cook Food", "Eat Food"];
const workItems = [];
const day = "";
app.get("/", function(req, res) {
const day = date.getDate()
res.render('index', { listTitle: day, newListItems: items });
});
app.post("/", function(req, res) {
const item = req.body.newItem;
if (req.body.list === "Work") {
workItems.push(item);
res.redirect("/work");
} else {
items.push(item);
res.redirect("/");
}
});
app.get("/work", function(req, res) {
res.render("index", { listTitle: "Work List", newListItems: workItems });
});
app.get("/about", function(req, res) {
res.render("about");
});
app.listen(3000, function() {
console.log("server is running on port 3000");
});
date.js
exports.getDate = function() {
const today = new Date();
const options = {
weekday: 'long',
month: 'long',
day: 'numeric'
};
return today.toLocaleDateString("en-US", options);
}
exports.getDay = function() {
const today = new Date();
const options = {
weekday: 'long'
};
return today.toLocaleDateString("en-US", options);
}
index.ejs
<%- include("header") -%>
<div class="box" id="heading">
<h1>
<%= listTitle %>
</h1>
</div>
<div class="box">
<% for (var i=0; i<newListItems.length; i++){ %>
<div class="item">
<input type="checkbox">
<p>
<%= newListItems[i] %>
</p>
</div>
<% } %>
<form class="item" action="/" method=post>
<input type="text" name="newItem" placeholder="New Item" autocomplete="off">
<button type="submit" name="list" value=<%=listTitle %>>+</button>
</form>
</div>
<%- include("footer") -%>
about.ejs
<%- include("header") -%>
<h2>
This is the about page</h2>
<p>lsdkjsdfl lskdfjsldf k sldkfjsldkf sldkfjsld f sldkfj sldfk lsdkjfs sldkfj slskdjfs dsldkfj </p>
<%- include("footer") -%>
styles.css
html {
background-color: #E4E9FD;
background-image: -webkit-linear-gradient(65deg, #A683E3 50%, #E4E9FD 50%);
min-height: 1200px;
font-family: 'helvetica neue';
}
h1 {
color: #fff;
padding: 10px;
}
.box {
max-width: 400px;
margin: 50px auto;
background: white;
border-radius: 5px;
box-shadow: 5px 5px 15px -5px rgba(0, 0, 0, 0.3);
}
#heading {
background-color: #A683E3;
text-align: center;
}
.item {
min-height: 70px;
display: flex;
align-items: center;
border-bottom: 0.5px solid #dbcbf7;
}
.item:last-child {
border-bottom: 0;
}
input:checked+p {
text-decoration: line-through;
text-decoration-color: #A683E3;
}
input[type="checkbox"] {
margin: 20px
}
p {
margin: 0;
padding: 20px;
font-size: 20px;
font-weight: 200;
color: #00204a;
}
form {
text-align: center;
margin-left: 20px;
}
button {
min-height: 50px;
width: 50px;
border-radius: 50%;
border-color: transparent;
background-color: #7c3fe6;
color: #fff;
border-width: 0;
font-size: 2rem;
}
input[type="text"] {
text-align: center;
height: 60px;
top: 10px;
border-style: none;
background: transparent;
font-size: 20px;
font-weight: 200;
width: 313px;
}
input[type="text"]:focus {
outline: none;
box-shadow: inset 0 -3px 0 0 #A683E3;
}
::placeholder {
color: rgb(199, 197, 197);
opacity: 1;
}
footer {
color: #8e5fdf;
background-color: rgba (0, 0, 0, 0.5);
text-align: center;
}
header.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/styles.css">
<title>To Do List</title>
</head>
<body>
footer.ejs
</body>
<footer>
Copyright 2021 Hanoona Tistory
</footer>
</html>
'Node.js > EJS (Embedded JavaScript Templating' 카테고리의 다른 글
| [블로그 2] home, about, contact 페이지 만들기 (0) | 2021.11.07 |
|---|---|
| [블로그 1] 기본 세팅 (0) | 2021.11.07 |
| To Do List 11 ] Refactoring (0) | 2021.11.03 |
| To Do List 10 ] module | exports | 다른 파일에 있는 function과 data 불러오는 법 (0) | 2021.11.03 |
| To Do List 9 ] Templating VS Layouts | header.ejs footer.ejs 따로 빼서 연결 (0) | 2021.11.02 |
댓글