[ 2주차 기본 과제 ] 레트로 TodoList 🎮 / 딜리버블밖에 없는 velog 💙 + JS

week1/cloneVelog/style.css

@@ -153,7 +153,7 @@ article > div.subDescription {
 }
 
 hr {
-  margin: 0 0;
+  margin: 0;
   border-style: none;
   border-top: 0.3px solid gray;
 }
@@ -185,7 +185,7 @@ div.editorDiv span {
   color: black;
 }
 
-div.likesDiv {
+footer.articleFooter {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -200,18 +200,18 @@ img.likesIcon {
 
 @media screen and (max-width: 1024px) {
   body {
-    width: 720px;
+    width: 80%;
   }
   article {
-    width: 350px;
+    width: 45%;
   }
 }
 
 @media screen and (max-width: 720px) {
   body {
-    width: 432px;
+    width: 80%;
   }
   article {
-    width: 432px;
+    width: 100%;
   }
 }

week1/cloneVelog/velog.html

@@ -46,10 +46,10 @@ <h4>딜리버블과 함께하는 행복앱잼</h4>
               <img class="editor roundImg" src="assets/profile.jpeg" />
               <p>by <span>choichoijin</span></p>
             </div>
-            <div class="likesDiv">
+            <footer class="articleFooter">
               <img class="likesIcon" src="assets/likes.svg" />
               <span>107</span>
-            </div>
+            </footer>
           </div>
         </article>
         <article>
@@ -63,10 +63,10 @@ <h4>딜리버블과 함께하는 행복앱잼</h4>
               <img class="editor roundImg" src="assets/profile.jpeg" />
               <p>by <span>choichoijin</span></p>
             </div>
-            <div class="likesDiv">
+            <footer class="articleFooter">
               <img class="likesIcon" src="assets/likes.svg" />
               <span>107</span>
-            </div>
+            </footer>
           </div>
         </article>
         <article>
@@ -80,10 +80,10 @@ <h4>딜리버블과 함께하는 행복앱잼</h4>
               <img class="editor roundImg" src="assets/profile.jpeg" />
               <p>by <span>choichoijin</span></p>
             </div>
-            <div class="likesDiv">
+            <footer class="articleFooter">
               <img class="likesIcon" src="assets/likes.svg" />
               <span>107</span>
-            </div>
+            </footer>
           </div>
         </article>
         <article>
@@ -97,10 +97,10 @@ <h4>딜리버블과 함께하는 행복앱잼</h4>
               <img class="editor roundImg" src="assets/profile.jpeg" />
               <p>by <span>choichoijin</span></p>
             </div>
-            <div class="likesDiv">
+            <footer class="articleFooter">
               <img class="likesIcon" src="assets/likes.svg" />
               <span>107</span>
-            </div>
+            </footer>
           </div>
         </article>
         <article>
@@ -114,10 +114,10 @@ <h4>딜리버블과 함께하는 행복앱잼</h4>
               <img class="editor roundImg" src="assets/profile.jpeg" />
               <p>by <span>choichoijin</span></p>
             </div>
-            <div class="likesDiv">
+            <footer class="articleFooter">
               <img class="likesIcon" src="assets/likes.svg" />
               <span>107</span>
-            </div>
+            </footer>
           </div>
         </article>
         <article>
@@ -131,10 +131,10 @@ <h4>딜리버블과 함께하는 행복앱잼</h4>
               <img class="editor roundImg" src="assets/profile.jpeg" />
               <p>by <span>choichoijin</span></p>
             </div>
-            <div class="likesDiv">
+            <footer class="articleFooter">
               <img class="likesIcon" src="assets/likes.svg" />
               <span>107</span>
-            </div>
+            </footer>
           </div>
         </article>
       </section>

week1/todoList/style.css

@@ -64,7 +64,7 @@ section > h2 {
   font-size: 30px;
 }
 
-div.inputArea {
+fieldset.inputArea {
   display: flex;
   position: absolute;
   bottom: 15px;

week1/todoList/todo.html

@@ -42,10 +42,10 @@ <h2>❗️To-do List</h2>
             <img src="deleteIcon.svg" />
           </li>
         </ul>
-        <div class="inputArea">
+        <fieldset class="inputArea">
           <input type="text" placeholder="할 일을 입력해주세요" />
           <button class="addButton"><img src="addIcon.svg" /></button>
-        </div>
+        </fieldset>
       </section>
       <section class="doneSection">
         <h2>❗️Done List</h2>
@@ -59,10 +59,10 @@ <h2>❗️Done List</h2>
             <img src="deleteIcon.svg" />
           </li>
         </ul>
-        <div class="inputArea">
+        <fieldset class="inputArea">
           <input type="text" placeholder="한 일을 입력해주세요" />
           <button class="addButton"><img src="addIcon.svg" /></button>
-        </div>
+        </fieldset>
       </section>
     </main>
     <footer>

week2/cloneVelog/main.js

@@ -0,0 +1,24 @@
+const $ = (selector) => document.querySelector(selector);
+const $$ = (selector) => document.querySelectorAll(selector);
+
+function attachToggleEvent() {
+  const selectTerm = $(".selectTerm");
+  const term = $(".term");
+  const termOptionList = $(".termOptionList");
+  const termOptions = $$(".termOption");
+
+  selectTerm.addEventListener("click", () => {
+    termOptionList.classList.toggle("hidden");
+  });
+  termOptionList.addEventListener("click", (e) => {
+    termOptions.forEach((option) => {
+      option.classList.remove("colorGreen");
+    });
+    term.innerText = e.target.innerText;
+    e.target.classList.add("colorGreen");
+  });
+}
+
+window.onload = () => {
+  attachToggleEvent();
+};

week2/cloneVelog/reset.css

@@ -0,0 +1,124 @@
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
+}
+body {
+  line-height: 1;
+}
+ol,
+ul {
+  list-style: none;
+}
+blockquote,
+q {
+  quotes: none;
+}
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: "";
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}