[1주차]유세은 미션 제출합니다. by SeieunYoo · Pull Request #2 · CEOS-Developers/vanilla-todo-15th

SeieunYoo · 2022-03-17T07:12:38Z

안녕하세요 CEOS 15기 유세은 입니다. 자바스크립트에 대해서 알고있다고 생각했는데 저의 자만이었습니다 ...ㅠㅠ
깃헙을 이용해서 기능 단위로 커밋해본적이 없어서 처음에는 많이 헤맸습니다.. 제대로 과제를 한 건지 잘 모르겠네요 흑흑
프짱님께서 하신 디자인과 유사하게 만들어봤습니다 깃헙에 대해서 많이 몰랐는데 이번에 많이 배워갑니다 세상엔 어려운 게 너무 많네 yo.. 피드백 마구 해주시면 감사하겠습니다

vercel 배포 : https://vanilla-todo-15th-seieunyoo.vercel.app/

추가적 기능

1.배경화면 랜덤으로 변경
2. 투두가 0개가 되면 과제 끝!이 나옴

어려운 부분(헷갈리는 부분..)

변수이름을 짓는 부분( 직관적으로 짓는 게 어려웠습니다)
투두 개수 카운팅
-> 리스트를 이동시킬때 리스트 안에 있는 삭제 이벤트도 같이 이동이 돼서 완료한 목록의 삭제 이벤트가 일어났을 때 카운팅이 제대로 되지 않더라구요 .. 그래서 새로운 함수를 만들어서 구현했는데 다른 좋은 방법이 있을까요?!

다음에는 애니메이션이나 다른 걸 추가해서 완성도 있게 만들어보고 싶습니다 ! 이번에 깃헙을 이용하거나 프레셔, vercel을 이용하는 등등 다양한 걸 배웠습니다 flex아주 좋은 속성인 것 같습니다

Key Question

1.DOM은 무엇인가요?

-dom이란 일종이 문서로서 html과 같은 것이고 j/s를 이용해서 다룰 수 있습니다!

HTML (tag) Element를 JavaScript로 생성하는 방법은 어떤 것이 있고, 어떤 방법이 가장 적합할까요?

-createelement를 이용해서 태그를 생성할 수 있고 appendchild를 라는 것을 통해서 태그를 추가할 수 있습니다! createelement로 태그를 만들고 이미 만들어진 태그에 추가하기 위해 appendchild를 이용하면 좋을 것 같습니다

3.Semantic tag에는 어떤 것이 있으며, 이를 사용하는 이유는 무엇일까요?

-semantic tag란 header,article 태그 등등과 같이 이름이 명확해서 그 의도가 분명한 태그들입니다.( 잘 몰라서 구글의 힘을 빌렸습니다..) 일반 div,span과 다르게 이름에서부터 쓰임새를 알 수 있다는 점에서 복잡한 코드나 다른 사람들과 코드를 공유할 때 유용할 것 같습니다. 이번 과제에서는 div,span만 썼는데 semantic tag를 이용했다면 더 정확하지 않았을까 생각이 드네요

Flexbox Layout은 무엇이며, 어떻게 사용하나요?

-복잡한 레이아웃을 만들때 flex 속성을 이용할 수 있습니다. 컨테이너와 아이템으로 이루어져 있고 컨테이너는 상위 개념(?)으로 display:flex 속성을 이용하고 flex-direction를 통해 가로나 세로 맞추는 것을 선택할 수 있습니다. 아이템에서는 flex:숫자 를 통해서 비율을 정할 수 있습니다. flex-shrink,grow를 통해서 얼마나 작아질지 커질지 정할 수 있습니다.

JavaScript가 다른 언어들에 비해 주목할 만한 점에는 어떤 것들이 있나요?
배우기 쉽다는 점..? 접근성이 좋은 거 같습니다.
코드에서 주석을 다는 바람직한 방법은 무엇일까요?

다른 사람들이 봐도 직관적으로 어떤 역할, 기능을 수행하는 구나 알 수 있게 하는 것입니다.

itsnowkim

안녕하세요 세은님 프론트 운영진 김현재입니다 반갑습니다~

우선 첫 과제 일등으로 제출해주신 점 정말 감동입니다...

전체적으로 코드도 깔끔하고, 가독성 있게 작성해 주셔서 정말 좋았고,
고민의 흔적이 많이 보여서 즐거운 마음으로 읽었습니다!

세은님 코드에서 가장 인상적인 부분 두 가지를 뽑자면,

font 설정과, backgroundColor 를 random 으로 하신 점
classList를 이용하여 css 를 적용한 점
입니다.

전체적으로 많은 것을 시도해보신 것 같아서 너무 좋았고,
앞으로 진행될 과제에서 세은님의 코드가 정말 기대가 됩니다.

과제 수고하셨습니다~!~!

itsnowkim · 2022-03-17T14:07:44Z

index.html

+        <div class = "toDoBox">
+            <div id = todo-list>
+                  <div class ="title-font">✍️To Do<span id = "toDoInfo" >(0)</span></div>
+                  <div id ="finishtoDo" class ="hidden">과제끝!!!🤟</div>


이모지 귀여워요

itsnowkim · 2022-03-17T14:11:33Z

script.js

+    let firstColor = colors[Math.floor(Math.random() * colors.length)];
+    let secondColor = colors[Math.floor(Math.random() * colors.length)];
+
+    document.body.style.background = `linear-gradient(${firstColor}, ${secondColor})`;


random 함수를 이용하여 앞에서 지정한 color 중 임의의 값을 가져왔네요!
저는 디자인쪽으로는 걸음마 수준이라 이런 아이디어를 볼 때마다 신기해요
멋집니다!

칭찬 감사합니다~~ 저도 아직 css 너무 어렵습니다 ...ㅠ

맞아요 새로고침할 때마다 바뀌는 그라데이션이 아주 예쁘네요 👍🏻

itsnowkim · 2022-03-17T14:20:54Z

script.js

+    const toDoButton = document.getElementById("toDoButton");
+    const toDo = document.getElementById("toDo");
+    const toDoList = document.getElementById("todo-list");
+    const toDoInfo = document.getElementById("toDoInfo");
+    const doneList = document.getElementById("done-list");
+    const doneInfo = document.getElementById("doneInfo");
+    const finishtoDo = document.getElementById("finishtoDo");


변수들을 한 것에 모아 가독성을 높인 부분 정말 좋다고 생각합니다.
다만 getElementById를 해서 가져올 때 네이밍컨벤션
을 참고해서 작성해 주시면 좋을 것 같습니다!

더 가독성 있게 바꿔보겠습니다 ! 좋은 자료 감사합니다

현재 님이 걸어 주신 링크에는 나와 있지 않은 것 같은데, HTML 태그의 id/class 이름은 보통 kebab-case로 짓습니다!

Suggested change

const toDoButton = document.getElementById("toDoButton");

const toDo = document.getElementById("toDo");

const toDoList = document.getElementById("todo-list");

const toDoInfo = document.getElementById("toDoInfo");

const doneList = document.getElementById("done-list");

const doneInfo = document.getElementById("doneInfo");

const finishtoDo = document.getElementById("finishtoDo");

const toDoButton = document.getElementById("todo-button");

const toDo = document.getElementById("todo");

const toDoList = document.getElementById("todo-list");

const toDoInfo = document.getElementById("todo-info");

const doneList = document.getElementById("done-list");

const doneInfo = document.getElementById("done-info");

const finishtoDo = document.getElementById("finish-todo");

itsnowkim · 2022-03-17T14:36:06Z

script.js

+      }
+
+    function deleteToDo(event) {
+        toDoNum--;


toDoNum 변수가 0 보다 작아질 경우 음수가 되는 오류가 있습니다!

헉 조금 더 고민해보겠습니다!!ㅠㅠ

itsnowkim · 2022-03-17T14:50:44Z

script.js

+        }
+
+        function moveToDo(event) {
+            deleteToDo(event);


완료한 목록 -> 해야하는 목록으로 다시 위로 올라갈 때도 고려해야 할 것 같습니다!

헉,, 한쪽만 가는 걸로 생각했습니다,, 더 고민하겠습니다!!

itsnowkim · 2022-03-17T14:52:12Z

script.js

+            removeList.appendChild(removeItem); 
+            removeList.appendChild(deleteButton);
+            doneList.appendChild(removeList);


아주 좋습니다!

itsnowkim · 2022-03-17T14:59:38Z

script.js

+            doneList.appendChild(removeList);
+
+
+            doneNum++;


이 부분 또한 앞서 말했던 것처럼 두 가지 경우에 따른 분기 처리를 해야 할 것 같아요~

아직 부족한 부분이 많네요 감사합니다 ㅠㅠ!

itsnowkim · 2022-03-17T15:08:10Z

script.js

+
+      }
+
+      function makeToDo(newTodo) {


이 함수는 더할 나위 없이 좋네요...
감동의 눈물 흘리는중입니다...ㅜ후ㅜㅠㅠㅠㅠ

정말 깔끔하네요 구굳

itsnowkim · 2022-03-17T15:08:45Z

style.css

+@font-face {
+    font-family: 'SuncheonB';
+    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2202-2@1.0/SuncheonB.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}


폰트를 설정하신 것 정말 멋지네요...
혹시 어려운 부분 없으셨나요?
저는 저번 프로젝트를 할 때 처음 폰트 적용을 했는데, 첫 과제부터 많은 것을 시도해 보신 것 같아서
정말 뿌듯합니다...!

예쁜 폰트를 찾느라 힘들었슴니다 .....

itsnowkim · 2022-03-17T15:13:21Z

style.css

+.hidden{
+     display : none;
+}


JS에서 class를 추가, 삭제하여 css를 적용한 점이 창의적이고 좋았습니다!
저 또한 배울 점이 많았습니다!

유익한 리뷰 감사합니다 현재님 ! 뿌듯합니다 ^.^ 하지만 부족한 부분이 너무 많이 보이네요..ㅠㅠ

S-J-Kim

안녕하세요 세은님

프론트엔드 멘토 김선종입니다.

깔끔한 코드가 인상적이었다는 생각이 드네요. 제가 하고싶었던 말들은 대부분 현재님께서 해주셔서 크게 코멘트 드릴게 없었네요. 다만 앞으로 참고하시면 좋을만한 몇가지 사항들을 코멘트로 남겨보았습니다.

과제 하느라 고생하셨습니다

S-J-Kim · 2022-03-17T17:16:34Z

index.html

+        <div class = "inputBox">
+             <div class ="toDoList title-font">❗투두리스트❗</div>
+             <div class ="toDoInput">
+                 <input id ="toDo" placeholder="할 일을 입력하세요"></input>
+                 <i id ="toDoButton" class="fa-solid fa-plus"></i>
+            </div>
+        </div>
+
+        <div class = "toDoBox">
+            <div id = todo-list>
+                  <div class ="title-font">✍️To Do<span id = "toDoInfo" >(0)</span></div>
+                  <div id ="finishtoDo" class ="hidden">과제끝!!!🤟</div>
+            </div>
+        </div>
+
+        <div class = "doneBox">
+            <div id = done-list>
+                <div class ="title-font">👻Done<span id = "doneInfo" >(0)</span></div>
+
+          </div>
+        </div>
+    </div>


Suggested change

<div class = "inputBox">

<div class ="toDoList title-font">❗투두리스트❗</div>

<div class ="toDoInput">

<input id ="toDo" placeholder="할 일을 입력하세요"></input>

<i id ="toDoButton" class="fa-solid fa-plus"></i>

</div>

</div>

<div class = "toDoBox">

<div id = todo-list>

<div class ="title-font">✍️To Do<span id = "toDoInfo" >(0)</span></div>

<div id ="finishtoDo" class ="hidden">과제끝!!!🤟</div>

</div>

</div>

<div class = "doneBox">

<div id = done-list>

<div class ="title-font">👻Done<span id = "doneInfo" >(0)</span></div>

</div>

</div>

</div>

<div class = "input-box">

<div class ="todo-list title-font">❗투두리스트❗</div>

<div class ="todo-input">

<input id ="todo" placeholder="할 일을 입력하세요"></input>

<i id ="todo-button" class="fa-solid fa-plus"></i>

</div>

</div>

<div class = "todo-box">

<div id = "todo-list">

<div class ="title-font">✍️To Do<span id = "todo-info" >(0)</span></div>

<div id ="finish-todo" class ="hidden">과제끝!!!🤟</div>

</div>

</div>

<div class = "done-box">

<div id = done-list>

<div class ="title-font">👻Done<span id = "done-info" >(0)</span></div>

</div>

</div>

</div>

보통 HTML의 클래스, id 네이밍은 kebab-case를 사용하는게 일반적입니다!

변수가 훨씬 깔끔해진 것 같습니다 !!! 가독성이 더 좋아진 것 같습니당

S-J-Kim · 2022-03-17T17:19:03Z

index.html

+        <div class = "toDoBox">
+            <div id = todo-list>
+                  <div class ="title-font">✍️To Do<span id = "toDoInfo" >(0)</span></div>
+                  <div id ="finishtoDo" class ="hidden">과제끝!!!🤟</div>


Suggested change

<div id ="finishtoDo" class ="hidden">과제끝!!!🤟</div>

<div id ="finishtoDo" hidden>과제끝!!!🤟</div>

이런 식으로 attribute로 element를 숨길 수도 있답니다.

조언 감사합니다 그대로 반영하겠습니다!!

S-J-Kim · 2022-03-17T17:20:03Z

index.html

+        </div>
+    </div>
+
+    <script src ="script.js"></script>


사소한 부분이지만, script 태그는 body 밖에 있는것이 좋습니다.

항상 바디 안쪽에 써왔습니다 ,,, 좋은 정보 감사합니닷

S-J-Kim · 2022-03-17T17:20:41Z

script.js

@@ -0,0 +1,114 @@
+const colors = [


컬러셋을 미리 정의해두는 거 아주 좋은 방법입니다.

어떤 색깔로 넣을까 고민해봤슴니다,,^-^

S-J-Kim · 2022-03-17T17:23:33Z

script.js

+    var toDoNum = 0;
+    var doneNum = 0;


Suggested change

var toDoNum = 0;

var doneNum = 0;

let toDoNum = 0;

let doneNum = 0;

ES6의 등장 이후로 var는 써야할 필요도, 써서도 안되는 예약어입니다! 거의 모든 상황에서 var는 let/const로 대체가 가능합니다. var가 가지는 특징들(특히 함수 범위 스코프 라던지)이 다른 프로그래밍 언어의 변수와는 조금 다르기 때문에 정확하게 알고 사용하지 않으면 예상 못한 버그를 초래할 수 있기 때문이에요.

!!! 앞으로 var은 지양하겠습니다 ..... 그것도 모르고 var만 썼네요 ,,

S-J-Kim · 2022-03-17T17:26:35Z

script.js

+      }
+
+    function deleteToDo(event) {
+        toDoNum--;


현재님께서 말씀하신 대로, toDoNum이 음수로 넘어가는 문제가 있는데 이렇게 해결해볼 수 있겠죠?

Suggested change

toDoNum--;

toDoNum = toDoNum =< 0 ? 0 : toDoNum--

감사합니다 !!!ㅠㅠ 음수로 넘어가는 거를 어떻게 할까 고민했는데 삼항 연산자로 쉽게 해결되네요! 사실 삼항 연산자를 잘 사용하지 않았는데 이번에 다시 알아갑니다 bbb

S-J-Kim · 2022-03-17T17:29:24Z

script.js

+
+      }
+
+      function makeToDo(newTodo) {


정말 깔끔하네요 구굳

Co-authored-by: Seon-Jong Kim <30287999+S-J-Kim@users.noreply.github.com>

chaaerim

세은님 안녕하세요!! 😆 1주차 스터디 코드리뷰파트너를 맡게 된 김채림입니다.
저도 아직 부족한 부분이 많아서 감히 리뷰를 하기 조심스럽지만 열심히 작성해주신 코드 너무 잘봤습니다!
특히 랜덤으로 배경 설정한 부분 너무 예뻐요 ㅎㅎ(다음엔 어떤 배경색이 나올까 궁금해서 새로고침 여러 번 해봤어요. . .🥰)
직관적인 변수명과 깔끔한 코드 덕분에 코드 읽기도 수월했던 것 같습니다.
다른 분들도 리뷰를 너무 잘 달아주셔서 제가 별로 코멘트 드릴 점이 없었던 것 같습니다. 저도 다음에는 세은님처럼 폰트 적용도 해봐야겠어요!!!

chaaerim · 2022-03-19T13:31:01Z

style.css

+    height: 100vh;
+    justify-content: center;
+    align-items: center;
+    margin: 0;


전체 화면에서 봤을 때 투두 박스가 가운데로 오게 하기 위해서 margin: 0 auto;로 변경해주시면 좋을 것 같습니다!

왜 가운데로 오지 않을까 고민했는데 감사합니다!

chaaerim · 2022-03-19T13:43:04Z

index.html

+             <div class ="todo-list title-font">❗투두리스트❗</div>
+             <div class ="todo-input">
+                 <input id ="todo" placeholder="할 일을 입력하세요"></input>
+                 <i id ="todo-button" class="fa-solid fa-plus"></i>


세은님 덕분에 <i>태그에 대해서 찾아보았습니다! 저도 시맨틱 태그를 더 잘 활용할 수 있도록 해야겠어요 😆 이 부분에 <form>을 사용하시면 엔터키로도 투두를 추가하도록 구현할 수 있을 것 같습니다!

삭제 아이콘을 <i> 태그를 이용하여 만드신 점이 인상깊네요.

또한 채림 님 말씀처럼 <form> 태그 안에 <input> 태그가 1개 존재하는 경우에는 엔터키로도 할일 추가가 가능하답니다!

chaaerim · 2022-03-19T14:17:44Z

script.js

+            const removeItem = event.target;
+            const deleteButton = document.createElement("span");
+            deleteButton.innerText = "❌";
+
+            removeList.style.color ="grey";
+
+            removeList.appendChild(removeItem); 
+            removeList.appendChild(deleteButton);
+            doneList.appendChild(removeList);


혹시 이부분에서

const removeItem=event.target.parentElement

로 해서 deleteButton을 다시 안만들고

removeList.appendChild(removeItem)

만 하는 방법은 안되는걸까요?!

todo에서 만든 버튼 기능(todonum 감소)이 계속 done으로 넘어갈때 똑같이 적용되더라구요 ㅠㅠ 그래서 따로 구현했습니다 왜 이럴까요 ..?!

chaaerim

위에 잘 반영되지 않은 리뷰가 있어서 몇 가지 추가해봤습니다!

chaaerim · 2022-03-19T14:46:00Z

style.css

+.inputBox{
+
+    flex: 0.3;
+    border-bottom: 1px solid grey;
+
+}
+
+.toDoList{
+   margin: 10px;
+}
+.toDoBox{
+    margin-top: 20px;
+    flex: 0.5;
+    border-bottom: 1px solid grey;
+}
+
+.doneBox{
+    margin: 20px;
+    flex: 0.5;
+
+}
+
+#finishtoDo{
+    margin-top: 30px;
+    font-size: 30px;
+}
+
+.hidden{
+     display : none;
+}


css에서 toDoBox와 doneBox 에 overflow도 함께 설정해주시면 투두 목록이 많아졌을 때 범위를 넘어가는 부분을 해결할 수 있을 것 같아요!!

chaaerim · 2022-03-19T14:47:52Z

script.js

+    function finish(){
+        if(toDoNum === 0){
+          finishtoDo.classList.remove("hidden");
+
+        }
+
+        else{
+          finishtoDo.classList.add("hidden");
+        }
+
+
+      }


과제를 다하면 끝을 알려주는 센스... 투두리스트에 완전 적합한 부분이라고 생각합니다 !!!!!!

corinthionia

안녕하세요 세은 님 🙌🏻

우선 세은 님께서 가장 먼저 과제를 제출해 주시고, 또 배경 그라데이션이 바뀌도록 구현해 주신 것을 보며 감탄을 금치 못했습니다. 앞으로 세은 님께서 다음 과제를 어떤 식으로 만들어 주실지 정말 기대가 되네요 😊 앞서 다른 분들이 좋은 코멘트를 많이 달아 주셔서 제가 남길 내용은 몇 가지 없었지만 한번 확인해 보시고 스터디 시간 전까지 미구현인 기능들은 최대한 구현해 보시길 바랄게요!

과제하시느라 고생 많으셨고 스터디 시간에 뵙겠습니다~

corinthionia · 2022-03-19T16:22:09Z

script.js

+    let firstColor = colors[Math.floor(Math.random() * colors.length)];
+    let secondColor = colors[Math.floor(Math.random() * colors.length)];
+
+    document.body.style.background = `linear-gradient(${firstColor}, ${secondColor})`;


맞아요 새로고침할 때마다 바뀌는 그라데이션이 아주 예쁘네요 👍🏻

corinthionia · 2022-03-19T16:24:03Z

script.js

+    const toDoButton = document.getElementById("toDoButton");
+    const toDo = document.getElementById("toDo");
+    const toDoList = document.getElementById("todo-list");
+    const toDoInfo = document.getElementById("toDoInfo");
+    const doneList = document.getElementById("done-list");
+    const doneInfo = document.getElementById("doneInfo");
+    const finishtoDo = document.getElementById("finishtoDo");


현재 님이 걸어 주신 링크에는 나와 있지 않은 것 같은데, HTML 태그의 id/class 이름은 보통 kebab-case로 짓습니다!

Suggested change

const toDoButton = document.getElementById("toDoButton");

const toDo = document.getElementById("toDo");

const toDoList = document.getElementById("todo-list");

const toDoInfo = document.getElementById("toDoInfo");

const doneList = document.getElementById("done-list");

const doneInfo = document.getElementById("doneInfo");

const finishtoDo = document.getElementById("finishtoDo");

const toDoButton = document.getElementById("todo-button");

const toDo = document.getElementById("todo");

const toDoList = document.getElementById("todo-list");

const toDoInfo = document.getElementById("todo-info");

const doneList = document.getElementById("done-list");

const doneInfo = document.getElementById("done-info");

const finishtoDo = document.getElementById("finish-todo");

corinthionia · 2022-03-19T16:26:51Z

index.html

+             <div class ="todo-list title-font">❗투두리스트❗</div>
+             <div class ="todo-input">
+                 <input id ="todo" placeholder="할 일을 입력하세요"></input>
+                 <i id ="todo-button" class="fa-solid fa-plus"></i>


삭제 아이콘을 <i> 태그를 이용하여 만드신 점이 인상깊네요.

또한 채림 님 말씀처럼 <form> 태그 안에 <input> 태그가 1개 존재하는 경우에는 엔터키로도 할일 추가가 가능하답니다!

corinthionia · 2022-03-19T16:40:02Z

script.js

+            const removeList = document.createElement("div");
+            const removeItem = event.target;
+            const deleteButton = document.createElement("span");
+            deleteButton.innerText = "❌";
+
+            removeList.style.color ="grey";
+
+            removeList.appendChild(removeItem); 
+            removeList.appendChild(deleteButton);
+            doneList.appendChild(removeList);


지금 상황에선 채림 님 말씀처럼 moveToDo 함수를 아래와같이 작성하면 삭제 버튼을 또 만들 필요는 없어 보입니다

Suggested change

const removeList = document.createElement("div");

const removeItem = event.target;

const deleteButton = document.createElement("span");

deleteButton.innerText = "❌";

removeList.style.color ="grey";

removeList.appendChild(removeItem);

removeList.appendChild(deleteButton);

doneList.appendChild(removeList);

function moveToDo(event) {

deleteToDo(event);

const removeList = document.createElement('div');

const removeItem = event.target.parentElement;

removeList.style.color = 'grey';

removeList.appendChild(removeItem);

doneList.appendChild(removeList);

doneNum++;

doneInfo.innerText = `(${doneNum})`;

}

corinthionia · 2022-03-19T16:42:55Z

script.js

+        const toDoItem = document.createElement("span");
+        const deleteButton = document.createElement("span");
+
+        li.style.margin= "10px"; 


현재 js 파일과 css 파일이 나누어져 있으니 스타일 관련 코드는 css 파일에 작성해 주시는 게 더 좋을 것 같습니다!

poodlepoodle

안녕하세요 세은님, CEOS 15기 프론트로 함께 활동하게 된 최어진입니다!!
우선 가장 먼저 제출하신 것에 놀랐습니다.
저는 항상 과제나 시험이나 한 번도 1등으로 제출해 본 적이 없거든요.......
사실 너무 고치고 싶은 습관인데 세은님께서 스터디 때 노하우 전수해주시면 좋겠어요....
아니면 정신차리라고 꿀밤 세 대 때려주시면 감사히 받겠습니다 👊🏻👊🏻👊🏻

저는 프론트 개발자는 개발자이긴 하지만 디자인적인 감각을 가지고 있으면 좋다고 생각하는데
미리 컬러셋을 정하신 부분이나, 이모지나 이스터에그 같은 부분들이
세은님을 통해 제가 생각하는 이상적인 프론트 개발자의 모습을 비추어 볼 수 있었습니다ㅎㅎ
앞으로의 스터디에서도 이런 부분에서 많이 배워가도록 노력할게요!!

poodlepoodle · 2022-03-20T07:13:16Z

index.html

+        <div class = "todo-box">
+            <div id = "todo-list">
+                  <div class ="title-font">✍️To Do<span id = "todo-info" >(0)</span></div>
+                  <div id ="finish-todo" class ="hidden">과제끝!!!🤟</div>


갑자기 **과제끝!!!**이 튀어나와서 놀랐네요ㅋㅋㅋㅋㅋㅋ
개인적으로 이런 이스터에그를 넣기 좋아하는 사람으로써 너무 인상깊었습니다ㅎㅎㅎㅎ

YoommY2 added 11 commits March 17, 2022 13:26

전체 레이아웃 완성

6842819

세부 레이아웃 완성

df81986

배경화면 랜덤으로 바뀜

e493253

입력 후 리스트 작성

79da2a0

x를 누르면 리스트 삭제

91ca0ff

리스트 이동

57d667f

done리스트에서 삭제 구현

2fc1649

todo list가 다 끝나면 과제 끝 알림 표시!

48f306b

리스트를 쓰거나 지울때마다 finish 함수 사용

cc18576

빠진 부분 구현..!

9458a87

f

0786f81

corinthionia self-requested a review March 17, 2022 07:27

itsnowkim reviewed Mar 17, 2022

View reviewed changes

S-J-Kim reviewed Mar 17, 2022

View reviewed changes

SeieunYoo and others added 3 commits March 19, 2022 01:18

Update index.html

78de47b

Co-authored-by: Seon-Jong Kim <30287999+S-J-Kim@users.noreply.github.com>

Update script.js

865b6ad

Co-authored-by: Seon-Jong Kim <30287999+S-J-Kim@users.noreply.github.com>

Update script.js

5e6ee06

Co-authored-by: Seon-Jong Kim <30287999+S-J-Kim@users.noreply.github.com>

chaaerim reviewed Mar 19, 2022

View reviewed changes

corinthionia reviewed Mar 19, 2022

View reviewed changes

YoommY2 added 2 commits March 20, 2022 15:55

modified: kebab-case, let

1f4d90a

modified: error todonum,donenum negative

a0da707

poodlepoodle reviewed Mar 20, 2022

View reviewed changes

YoommY2 added 4 commits March 20, 2022 16:24

modified: center display, enter submit

f8402fb

modified: overflow

18183c3

Update Example

b4e3b7d

Update

b0a8ba6

	<div id ="finishtoDo" class ="hidden">과제끝!!!🤟</div>
	<div id ="finishtoDo" hidden>과제끝!!!🤟</div>

Conversation

SeieunYoo commented Mar 17, 2022

추가적 기능

어려운 부분(헷갈리는 부분..)

Uh oh!

itsnowkim 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!

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!

S-J-Kim 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!

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!

itsnowkim left a comment •

edited

Loading

corinthionia Mar 19, 2022 •

edited

Loading

chaaerim Mar 19, 2022 •

edited

Loading

chaaerim left a comment •

edited

Loading