42cabi · jihyunk03 · Aug 16, 2024 · Aug 17, 2024 · Aug 17, 2024 · Aug 17, 2024
diff --git a/v1/frontend/HTML+CSS+JS_LV_1_Todo_List_마스터하기/images/done_btn.svg b/v1/frontend/HTML+CSS+JS_LV_1_Todo_List_마스터하기/images/done_btn.svg
diff --git a/v1/frontend/HTML+CSS+JS_LV_1_Todo_List_마스터하기/images/enter_btn.svg b/v1/frontend/HTML+CSS+JS_LV_1_Todo_List_마스터하기/images/enter_btn.svg
diff --git a/v1/frontend/HTML+CSS+JS_LV_1_Todo_List_마스터하기/images/show_all_btn.svg b/v1/frontend/HTML+CSS+JS_LV_1_Todo_List_마스터하기/images/show_all_btn.svg
diff --git a/v1/frontend/HTML+CSS+JS_LV_1_Todo_List_마스터하기/images/show_done_btn.svg b/v1/frontend/HTML+CSS+JS_LV_1_Todo_List_마스터하기/images/show_done_btn.svg
diff --git a/v1/frontend/HTML+CSS+JS_LV_1_Todo_List_마스터하기/images/show_todo_btn.svg b/v1/frontend/HTML+CSS+JS_LV_1_Todo_List_마스터하기/images/show_todo_btn.svg
diff --git a/v1/frontend/HTML+CSS+JS_LV_1_Todo_List_마스터하기/images/todo_btn.svg b/v1/frontend/HTML+CSS+JS_LV_1_Todo_List_마스터하기/images/todo_btn.svg
diff --git a/v1/frontend/HTML+CSS+JS_LV_1_Todo_List_마스터하기/images/trash_btn.svg b/v1/frontend/HTML+CSS+JS_LV_1_Todo_List_마스터하기/images/trash_btn.svg
diff --git a/v1/frontend/HTML+CSS+JS_LV_1_Todo_List_마스터하기/index.html b/v1/frontend/HTML+CSS+JS_LV_1_Todo_List_마스터하기/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width"/>
+    <title>TODO List</title>
+    <link href="style.css" rel="stylesheet"/>
+  </head>
+  <body>
+    <div id="root" class="flex-col">
+      <header>
+        <p id="title">TODO LIST</p>
+      </header>
+      <main>
+        <article class="flex-row">
+          <input id="input-text" type="text" placeholder="Write down your todo-list" maxlength="30" size="100">
+          <button id="add-todo" type="button">
+            <img src="./images/enter_btn.svg" alt="enter button">
+          </button>
+        </article>
+        <section>
+          <div id="btn-list">
+            <button id="show-all">
+              <img src="images/show_all_btn.svg" alt="all list">
+            </button>
+            <button id="show-todo">
+              <img src="images/show_todo_btn.svg" alt="todo list">
+            </button>
+            <button id="show-done">
+              <img src="images/show_done_btn.svg" alt="done list">
+            </button>
+          </div>
+          <ul id="todo-list" class="flex-col"></ul>
+        </section>
+      </main>
+    </div>
+    <script src="todo.js"></script>
+  </body>
+</html>
diff --git a/v1/frontend/HTML+CSS+JS_LV_1_Todo_List_마스터하기/reset.css b/v1/frontend/HTML+CSS+JS_LV_1_Todo_List_마스터하기/reset.css
@@ -0,0 +1,65 @@
+/* http://meyerweb.com/eric/tools/css/reset/
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+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;
+  box-sizing: border-box;
+}
+/* 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;
+}
+
+/* Button reset */
+button {
+  background: none;
+  border: none;
+  padding: 0;
+  box-shadow: none;
+  border-radius: 0;
+  cursor: pointer;
+  font: inherit;
+  color: inherit;
+  outline: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
diff --git a/v1/frontend/HTML+CSS+JS_LV_1_Todo_List_마스터하기/style.css b/v1/frontend/HTML+CSS+JS_LV_1_Todo_List_마스터하기/style.css
@@ -0,0 +1,169 @@
+@import url("https://fonts.googleapis.com/css2?family=Do+Hyeon&family=Noto+Sans+KR:[email protected]&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Do+Hyeon&family=Inter:[email protected]&family=Noto+Sans+KR:[email protected]&display=swap");
+@import url("reset.css");
+
+/* all */
+:root {
+  --primary-color: #D5CCFF;
+  --secondary-color: #F4F2FF;
+  --title-color: #2B1887;
+  --line-color: #2B1887;
+  --done-color: #7B7B7B;
+  --header-height: 130px;
+  --article-height: 50px;
+}
+
+html, body, #root {
+  display: flex;
+  flex-direction: column;
+
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+  background-color: var(--primary-color);
+}
+
+/* row, col setting */
+.flex-row {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
+
+.flex-col {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+/* header */
+header {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: var(--header-height);
+
+  font-family: "Inter", sans-serif;
+  font-size: 50px;
+  font-weight: 700;
+  color: var(--title-color);
+}
+
+/* main */
+main {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+
+  width: 100%;
+  height: calc(100% - var(--header-height));
+
+  font-family: "Inter", sans-serif;
+  font-size: 20px;
+}
+
+/* todo-input */
+article {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  width: 70%;
+  height: var(--article-height);
+}
+
+#input-text {
+  width: calc(100% - 50px);
+  height: 40px;
+  background-color: var(--secondary-color);
+  border-radius: 15px;
+  border: 0px;
+  padding-left: 15px;
+}
+
+#add-todo {
+  justify-content: center;
+  align-items: center;
+  margin: 0 10px;
+  width: 40px;
+  height: 40px;
+
+  img {
+    width: 30px;
+    height: 30px;
+  }
+}
+
+/* section for todo list */
+section {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  width: 100%;
+  height: calc(100% - var(--article-height));
+}
+
+/* button-list */
+#btn-list {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+
+  width: 70%;
+
+  img {
+    width: 40px;
+    height: 40px;
+    margin: 5px;
+  }
+}
+
+/* todo-list */
+#todo-list {
+  width: 70%;
+  height: 80%;
+  border-radius: 15px;
+  background-color: var(--secondary-color);
+  overflow-y: scroll;
+}
+
+#todo-list > li {
+  width: 95%;
+  align-items: center;
+  margin: 5px;
+
+  button {
+    background-position: center;
+    background-repeat: no-repeat;
+    width: 32px;
+    height: 32px;
+    margin: 5px;
+  }
+
+  .todo-btn {
+    background-image: url("images/todo_btn.svg");
+  }
+
+  .done-btn {
+    background-image: url("images/done_btn.svg");
+  }
+
+  .trash-btn {
+    background-image: url("images/trash_btn.svg");
+  }
+
+  .completed {
+    text-decoration: line-through;
+    color: var(--done-color);
+  }
+
+  span {
+    flex-grow: 1;
+    text-align: left;
+    font-size: 20px;
+  }
+}