prgrms-web-devcourse · minsgy · Sep 6, 2021 · Sep 6, 2021 · Sep 7, 2021 · datalater
diff --git a/Colors/Colors.gif b/Colors/Colors.gif
diff --git a/Colors/README.md b/Colors/README.md
@@ -0,0 +1,5 @@
+## Colors
+
+### DEMO
+
+<img src="./Colors.gif" />
diff --git a/Colors/assets/index.css b/Colors/assets/index.css
@@ -0,0 +1,24 @@
+.main-container {
+  background-color: white;
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.color-event-button {
+  background-color: transparent;
+  border: 1px solid black;
+  color: black;
+  border-radius: 5px;
+  padding: 14px 12.5px;
+  font-size: 20px;
+  transition: all 0.15s;
+}
+
+.color-event-button:hover {
+  background-color: black;
+  color: white;
+  padding: 15px 12.5px;
+}
diff --git a/Colors/assets/reset.css b/Colors/assets/reset.css
@@ -0,0 +1,129 @@
+/* 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;
+}
+/* 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;
+}
diff --git a/Colors/index.html b/Colors/index.html
@@ -0,0 +1,15 @@
+<!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="./assets/reset.css" />
+    <link rel="stylesheet" href="./assets/index.css" />
+    <title>Document</title>
+  </head>
+  <body>
+    <main id="App"></main>
+    <script src="./src/main.js" type="module"></script>
+  </body>
+</html>
diff --git a/Colors/src/components/App.js b/Colors/src/components/App.js
@@ -0,0 +1,40 @@
+import Button from "./Button.js";
+
+const COLOR_LIST = [
+  "Orangered",
+  "Blue",
+  "Yellow",
+  "Green",
+  "Orange",
+  "Cyan",
+  "DodgerBlue",
+  "Violet",
+  "Navy",
+  "Purple",
+  "YellowGreen",
+  "OrangeRed",
+  "SlateBlue",
+  "Salmon",
+  "Crimson",
+  "HotPink",
+  "Magenta",
+];
+
+export default function App({ $target }) {
+  const $main = document.createElement("div");
+  $main.className = "main-container";
+  $target.appendChild($main);
+
+  let ColorListIndex = 0;
+
+  new Button({
+    $target: $main,
+    text: "Click Me!",
+    onClick: () => {
+      if (ColorListIndex > COLOR_LIST.length - 1) {
+        ColorListIndex = 0;
+      }
+      $main.style.backgroundColor = COLOR_LIST[ColorListIndex++];
+    },
+  });
+}
diff --git a/Colors/src/components/Button.js b/Colors/src/components/Button.js
@@ -0,0 +1,9 @@
+export default function Button({ $target, text, onClick }) {
+  const $button = document.createElement("button");
+  $button.className = "color-event-button";
+  $target.appendChild($button);
+  $button.textContent = text;
+  $button.addEventListener("click", (e) => {
+    onClick();
+  });
+}
diff --git a/Colors/src/main.js b/Colors/src/main.js
@@ -0,0 +1,4 @@
+import App from "./components/App.js";
+const $app = document.querySelector("#App");
+
+new App({ $target: $app });
diff --git a/Hex-Colors-Gradient/README.md b/Hex-Colors-Gradient/README.md
@@ -0,0 +1,5 @@
+## Colors
+
+### DEMO
+
+<img src="./hex-colors.gif" />
diff --git a/Hex-Colors-Gradient/assets/index.css b/Hex-Colors-Gradient/assets/index.css
@@ -0,0 +1,41 @@
+.main-container {
+  background: linear-gradient(to right, #ffffff, #ffffff);
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  justify-content: center;
+  align-items: center;
+}
+
+.background-text {
+  font-size: 45px;
+  animation: 2s linear 1.5s infinite alternate colorChange;
+  margin: 5vh;
+}
+
+.color-event-button {
+  background-color: transparent;
+  border: 1px solid black;
+  color: black;
+  border-radius: 5px;
+  padding: 14px 12.5px;
+  font-size: 20px;
+  transition: all 0.15s;
+}
+
+.color-event-button:hover {
+  background-color: black;
+  color: white;
+  padding: 15px 12.5px;
+}
+
+@keyframes colorChange {
+  from {
+    color: #000000;
+  }
+  to {
+    color: #ffffff;
+  }
+}