moretall vaniljs todolist #1

SeonghoJin · 2020-05-04T14:43:31Z

이렇게 하면 되는건가여? 풀리퀘처음해보네요 ㅎㅎ

Tetramad

load함수의 사용 방식이 인상적이었습니다. 👍
localStorage 사용 방법에 대해서 많이 배워갑니다. 제가 찾던 저장 방식이네요. 😀
다만, 코드 스타일에 일관성이 없는 것은 용서할 수 없습니다. 😠
쌍따옴표(") 관련 버그는 수정해주시기 바랍니다. 🔧
todoMVC 내용은 제거하시고 올려주셨으면 합니다!

Tetramad · 2020-05-11T03:51:19Z

Vanila.js/CSS/index.css

@@ -0,0 +1,56 @@
+


첫 줄을 비워두시는 이유가 있을까요?

아무도 보지 않은 것이라고 생각해서 엉망진창으로 코딩했네요..

Tetramad · 2020-05-11T04:02:47Z

Vanila.js/CSS/index.css

+html{
+    text-align: center;
+    font-style:italic;
+}
+
+input{
+    width : 400px;
+    height : 50px;
+    font-size : x-large;
+}
+
+main{
+    display:inline-block;
+    width : 400px;
+}
+
+input::placeholder{
+    font-style:italic;
+    font-size: x-large;
+    font-weight : bold;
+}
+#createToDo{
+	border: none;
+	margin : 0px;
+    box-shadow: 0 5px 10px rgba(0,0,0,0.5);
+}
+
+#contents{
+    padding :0px;
+    text-align: center;
+    margin : 0px;
+}
+
+.content{
+    box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
+    text-align:left;
+    display: inline-block;
+    position: relative;
+    width : 400px;
+    height : 50px;
+
+}
+
+.content h1{
+
+    margin : 0px
+}
+
+.destory{
+    position : absolute;
+    top : 13px;
+    right :10px;
+    font-weight: inherit;
+    color: #cc9a9a;
+}


♻️ CSS property 표기의 일관성이 떨어지는 것 같습니다.

property: value

property : value

property:value

위 세 가지 중 하나만 사용하시는 것을 권장합니다.
직접 맞추기 힘드시다면 Prettier 확장 프로그램을 추천해드립니다.
code style을 맞춰주는 툴은 항상 편합니다! 👍

좋은 정보감사합니다 ㅎㅎ

prettier 저도 알아갑니다 총총...

seki님 말씀 메모메모

Tetramad · 2020-05-11T04:03:32Z

Vanila.js/CSS/index.css

+}
+
+.content h1{
+


가독성과 무관한 빈 줄은 제거해주세요.

Tetramad · 2020-05-11T04:07:29Z

Vanila.js/JS/index.js

+function enterkey(){
+    let input = document.getElementById("createToDo");
+
+    if(window.event.keyCode == 13){


KeyboardEvent.keyCode는 deprecated된 기능입니다.

Tetramad · 2020-05-11T04:08:10Z

Vanila.js/JS/index.js

+    let input = document.getElementById("createToDo");
+
+    if(window.event.keyCode == 13){
+        console.log(input.value);


디버깅을 위한 console.log는 PR전에 제거해 주세요!

Tetramad · 2020-05-11T04:34:27Z

Vanila.js/JS/index.js

+    let button = document.createElement("button");
+
+    button.setAttribute("class","destory");
+    button.setAttribute("onclick", "remove(" +"\""+val+"\""+")")


event object를 사용하는 것이 더 좋을 것 같습니다.

Suggested change

button.setAttribute("onclick", "remove(" +"\""+val+"\""+")")

button.setAttribute("onclick", remove)

🔧할 일 이름에 쌍따옴표(")가 들어가면 동작하지 않는 문제가 있습니다.

Tetramad · 2020-05-11T04:35:46Z

Vanila.js/index.html

+<html>
+	<head>
+		<meta charset="utf-8">
+		<link rel = "stylesheet" href = "CSS/index.css">
+		<title>vanilaToDoList</title>
+
+	</head>
+	<body>
+		<header>
+			<div>
+				<h1>
+					Seongho's vanilaToDoList
+				</h1>
+			</div>
+		</header>
+		<main>
+			<div>
+				<input onkeyup = "enterkey()" id = "createToDo" placeholder="Enter to save your task" autofocus>
+			</div>
+			<ul id = "contents">
+			</ul>
+		</main>
+		<footer>
+			<div>
+
+			</div>
+		</footer>
+		<script src = "JS/index.js"></script>
+	</body>
+</html>


원래 HTML 작성하실 때 탭을 사용하시나요?
아니라면 위랑 동일하게 Prettier 사용을 권장합니다.

leaf-upper · 2020-05-11T06:14:39Z

MVC패턴을 이용해서 구현하셨는데 정말 고생하신것 같습니다. 바닐라 JS에서 이렇게까지 할 수 있다는게 놀랍고, 직접 css짜신게 seki님과 마찬가지로 정말 대단하신것 같습니다!

SeonghoJin · 2020-05-11T06:52:19Z

아이고, 제가 정리하지않고 올린것이라서 vanilajs안에 todoMVC라는 내용도 들어가버리게되었습니다. ㅜㅜ 죄송합니다.. 풀리퀘란 것이 이렇게 진행되는거였군요.

PParkJy

수고 많으셨습니다!!

PParkJy · 2020-05-12T14:42:27Z

Vanila.js/.vscode/tasks.json

+{
+    // See https://go.microsoft.com/fwlink/?LinkId=733558
+    // for the documentation about the tasks.json format
+    "version": "2.0.0",
+    "tasks": [
+        {
+            "label": "openHtml",
+            "type": "shell",
+            "command": "index.html",
+            "problemMatcher": []
+        }
+    ]
+}


이 파일의 역할은 무엇인가욥??

Visual Studio Code 기능 중 하나인 Task에 관련된 파일입니다. 자주 사용하는 명령어를 포맷에 맞게 등록해두면 [Tasks>Task 이름]으로 바로 실행하게 해줍니다.

PParkJy · 2020-05-12T14:42:44Z

Vanila.js/CSS/index.css

+html{
+    text-align: center;
+    font-style:italic;
+}
+
+input{
+    width : 400px;
+    height : 50px;
+    font-size : x-large;
+}
+
+main{
+    display:inline-block;
+    width : 400px;
+}
+
+input::placeholder{
+    font-style:italic;
+    font-size: x-large;
+    font-weight : bold;
+}
+#createToDo{
+	border: none;
+	margin : 0px;
+    box-shadow: 0 5px 10px rgba(0,0,0,0.5);
+}
+
+#contents{
+    padding :0px;
+    text-align: center;
+    margin : 0px;
+}
+
+.content{
+    box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
+    text-align:left;
+    display: inline-block;
+    position: relative;
+    width : 400px;
+    height : 50px;
+
+}
+
+.content h1{
+
+    margin : 0px
+}
+
+.destory{
+    position : absolute;
+    top : 13px;
+    right :10px;
+    font-weight: inherit;
+    color: #cc9a9a;
+}


prettier 저도 알아갑니다 총총...

PParkJy · 2020-05-12T14:45:05Z

Vanila.js/index.html

+
+			</div>
+		</footer>
+		<script src = "JS/index.js"></script>


index.js를 html 시작 부분이 아니라 뒷 부분에 사용하신 이유가 있으신가요?

mywnajsldkf

vanila.js는 처음인데 궁금하네요! 잘 봤습니다.

mywnajsldkf · 2020-05-13T03:04:38Z

Vanila.js/CSS/index.css

+html{
+    text-align: center;
+    font-style:italic;
+}
+
+input{
+    width : 400px;
+    height : 50px;
+    font-size : x-large;
+}
+
+main{
+    display:inline-block;
+    width : 400px;
+}
+
+input::placeholder{
+    font-style:italic;
+    font-size: x-large;
+    font-weight : bold;
+}
+#createToDo{
+	border: none;
+	margin : 0px;
+    box-shadow: 0 5px 10px rgba(0,0,0,0.5);
+}
+
+#contents{
+    padding :0px;
+    text-align: center;
+    margin : 0px;
+}
+
+.content{
+    box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
+    text-align:left;
+    display: inline-block;
+    position: relative;
+    width : 400px;
+    height : 50px;
+
+}
+
+.content h1{
+
+    margin : 0px
+}
+
+.destory{
+    position : absolute;
+    top : 13px;
+    right :10px;
+    font-weight: inherit;
+    color: #cc9a9a;
+}


seki님 말씀 메모메모

mywnajsldkf · 2020-05-13T03:05:17Z

Vanila.js/JS/index.js

+        if(localStorage.getItem(input.value) == null && input.value != "")
+        {    
+            localStorage.setItem(input.value,JSON.stringify(input.value));
+            draw(makecontent(input.value));
+        }


이 부분 이해가 잘 가지 않는데 설명 부탁드립니다!

moretall vaniljs todolist

b9b6b10

Tetramad requested changes May 11, 2020

View reviewed changes

Tetramad requested review from HodaeSsi, PParkJy, Parkhyunseo, Tetramad, leaf-upper, loin3 and mywnajsldkf and removed request for Tetramad May 11, 2020 04:39

PParkJy reviewed May 12, 2020

View reviewed changes

mywnajsldkf reviewed May 13, 2020

View reviewed changes

	button.setAttribute("onclick", "remove(" +"\""+val+"\""+")")
	button.setAttribute("onclick", remove)

		}

		.content h1{

moretall vaniljs todolist #1

Are you sure you want to change the base?

moretall vaniljs todolist #1

Uh oh!

Conversation

SeonghoJin commented May 4, 2020

Uh oh!

Tetramad left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

leaf-upper commented May 11, 2020

Uh oh!

SeonghoJin commented May 11, 2020

Uh oh!

PParkJy left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mywnajsldkf left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Tetramad left a comment •

edited

Loading