Merge pull request #8 from limkhl/JSmini_limkhl

limkhl · web-flow · commit 51fa8bf9cb33 · 2021-09-20T20:48:11.000+09:00
[Project1~3/임경희] Colors, Hex colors gradient, Random quote generator
diff --git a/project1-colors/index.html b/project1-colors/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="ko">
+  <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" />
+    <title>랜덤 색상 생성기</title>
+    <link rel="stylesheet" href="./src/style.css" />
+  </head>
+  <body>
+    <main id="app"></main>
+    <script src="./src/main.js" type="module"></script>
+  </body>
+</html>
diff --git a/project1-colors/src/Button.js b/project1-colors/src/Button.js
@@ -0,0 +1,15 @@
+export default function Button({ $target, onClick }) {
+  const $button = document.createElement("button");
+  $target.append($button);
+  $button.textContent = "Click Me!";
+
+  $button.addEventListener("click", (e) => {
+    const generateRandomColorCode = () => {
+      const randomHex = Math.floor(Math.random() * 16777215).toString(16);
+      return randomHex.length < 6
+        ? `${"0".repeat(6 - randomHex.length)}${randomHex}`
+        : randomHex;
+    };
+    onClick(generateRandomColorCode());
+  });
+}
diff --git a/project1-colors/src/main.js b/project1-colors/src/main.js
@@ -0,0 +1,10 @@
+import Button from "./Button.js";
+
+const $app = document.querySelector("#app");
+
+new Button({
+  $target: $app,
+  onClick: (colorCode) => {
+    $app.style.backgroundColor = `#${colorCode}`;
+  },
+});
diff --git a/project1-colors/src/style.css b/project1-colors/src/style.css
@@ -0,0 +1,31 @@
+* {
+  margin: 0;
+  padding: 0;
+}
+
+#app {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  background-color: transparent;
+}
+
+button {
+  padding: 10px 15px;
+  background-color: transparent;
+  border-radius: 5px;
+  cursor: pointer;
+  outline: 0;
+  color: rgb(52, 58, 64);
+  font-size: 16px;
+  border: 1px solid rgb(52, 58, 64);
+  transition: all 0.2s;
+  box-shadow: 0px 0px 0px 5px rgb(255, 255, 255, 0.8);
+}
+
+button:hover {
+  color: white;
+  font-weight: 500;
+  background-color: rgb(52, 58, 64);
+}
diff --git a/project2-HexColorsGradient/index.html b/project2-HexColorsGradient/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="ko">
+  <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" />
+    <title>그라데이션 생성기</title>
+    <link rel="stylesheet" href="./src/style.css" />
+  </head>
+  <body>
+    <main id="app"></main>
+    <script src="./src/main.js" type="module"></script>
+  </body>
+</html>
diff --git a/project2-HexColorsGradient/src/Button.js b/project2-HexColorsGradient/src/Button.js
@@ -0,0 +1,24 @@
+export default function Button({ $target, onClick }) {
+  const $button = document.createElement("button");
+  $target.append($button);
+  $button.textContent = "Click Me!";
+
+  $button.addEventListener("click", (e) => {
+    const generateRandomDirection = () => {
+      return Math.floor(Math.random() * 2) === 0 ? `right` : `left`;
+    };
+
+    const generateRandomColorCode = () => {
+      const randomHex = Math.floor(Math.random() * 16777215).toString(16);
+      return randomHex.length < 6
+        ? `${"0".repeat(6 - randomHex.length)}${randomHex}`
+        : randomHex;
+    };
+
+    onClick(
+      generateRandomDirection(),
+      generateRandomColorCode(),
+      generateRandomColorCode()
+    );
+  });
+}
diff --git a/project2-HexColorsGradient/src/Sign.js b/project2-HexColorsGradient/src/Sign.js
@@ -0,0 +1,28 @@
+export default function Sign({ $target }) {
+  const $signContainer = document.createElement("div");
+  $target.append($signContainer);
+
+  this.state = {
+    direction: "right",
+    colorCode: {
+      start: "ffffff",
+      end: "ffffff",
+    },
+  };
+
+  this.setState = (nextState) => {
+    this.state = nextState;
+    this.render();
+  };
+
+  this.render = () => {
+    const { direction, colorCode } = this.state;
+
+    $signContainer.innerHTML = /* html */ `
+      <h1>아래에 있는 버튼을 클릭해서<br />랜덤 그라데이션 조합을 만들어보세요.</h1>
+      <h2>background: linear-gradient(to ${direction}, #${colorCode.start}, #${colorCode.end})</h2>
+    `;
+  };
+
+  this.render();
+}
diff --git a/project2-HexColorsGradient/src/main.js b/project2-HexColorsGradient/src/main.js
@@ -0,0 +1,18 @@
+import Button from "./Button.js";
+import Sign from "./Sign.js";
+
+const $app = document.querySelector("#app");
+
+const signBoard = new Sign({ $target: $app });
+
+new Button({
+  $target: $app,
+  onClick: (direction, startColor, endColor) => {
+    $app.style.background = `linear-gradient(to ${direction}, #${startColor}, #${endColor})`;
+    signBoard.setState({
+      ...signBoard.state,
+      direction,
+      colorCode: { start: startColor, end: endColor },
+    });
+  },
+});
diff --git a/project2-HexColorsGradient/src/style.css b/project2-HexColorsGradient/src/style.css
@@ -0,0 +1,68 @@
+@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap");
+
+* {
+  margin: 0;
+  padding: 0;
+  font-family: "Noto Sans KR", sans-serif;
+}
+
+:root {
+  --text-start-color: rgb(52, 58, 64);
+  --text-end-color: white;
+  --button-color: white;
+  --button-hover-color: rgb(52, 58, 64);
+  --button-font-color: rgb(52, 58, 64);
+  --button-border-color: rgb(52, 58, 64);
+}
+
+#app {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  background-color: transparent;
+}
+
+#app div {
+  text-align: center;
+  animation: 3s ease-in-out 1s infinite alternate changeFontColor;
+  color: var(--text-start-color);
+}
+
+#app h1 {
+  margin-bottom: 100px;
+}
+
+#app h2 {
+  margin-bottom: 30px;
+}
+
+button {
+  padding: 10px 15px;
+  background-color: var(--button-color);
+  border-radius: 5px;
+  cursor: pointer;
+  outline: 0;
+  color: var(--button-font-color);
+  font-size: 16px;
+  border: 1px solid var(--button-border-color);
+  transition: all 0.2s;
+  box-shadow: 0px 0px 0px 5px rgb(255, 255, 255, 0.8);
+}
+
+button:hover {
+  color: white;
+  font-weight: 500;
+  background-color: var(--button-hover-color);
+}
+
+@keyframes changeFontColor {
+  from {
+    color: var(--text-start-color);
+  }
+
+  to {
+    color: var(--text-end-color);
+  }
+}
diff --git a/project3-RandomQuoteGenerator/index.html b/project3-RandomQuoteGenerator/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="ko">
+  <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" />
+    <title>랜덤 명언 뽑기</title>
+    <link rel="stylesheet" href="./src/style.css" />
+  </head>
+  <body>
+    <main id="app"></main>
+    <script src="./src/main.js" type="module"></script>
+  </body>
+</html>
diff --git a/project3-RandomQuoteGenerator/src/App.js b/project3-RandomQuoteGenerator/src/App.js
@@ -0,0 +1,23 @@
+import { request } from "./api.js";
+import Button from "./Button.js";
+import QuoteBox from "./QuoteBox.js";
+
+export default function App({ $target }) {
+  const quoteBox = new QuoteBox({ $target });
+  new Button({
+    $target,
+    onClick: async () => {
+      const generatedQuoteSet = await request();
+      const quote = `"${generatedQuoteSet.quote.replace("\uFFFD", "'")}"`;
+      const author = generatedQuoteSet.author
+        ? `- ${generatedQuoteSet.author}`
+        : ``;
+
+      quoteBox.setState({
+        ...quoteBox.state,
+        quote,
+        author,
+      });
+    },
+  });
+}
diff --git a/project3-RandomQuoteGenerator/src/Button.js b/project3-RandomQuoteGenerator/src/Button.js
@@ -0,0 +1,9 @@
+export default function Button({ $target, onClick }) {
+  const $button = document.createElement("button");
+  $target.append($button);
+  $button.textContent = "Generate Quote";
+
+  $button.addEventListener("click", (e) => {
+    onClick();
+  });
+}
diff --git a/project3-RandomQuoteGenerator/src/QuoteBox.js b/project3-RandomQuoteGenerator/src/QuoteBox.js
@@ -0,0 +1,25 @@
+export default function QuoteBox({ $target }) {
+  const $box = document.createElement("div");
+  $target.append($box);
+  $box.className = "quoteContainer";
+
+  this.state = {
+    quote: "",
+    author: "",
+  };
+
+  this.setState = (nextState) => {
+    this.state = nextState;
+    this.render();
+  };
+
+  this.render = () => {
+    const { quote, author } = this.state;
+    $box.innerHTML = /* html */ `
+      <p class="quoteArea">${quote}</p>
+      <p class="authorArea">${author}</p>
+    `;
+  };
+
+  this.render();
+}
diff --git a/project3-RandomQuoteGenerator/src/api.js b/project3-RandomQuoteGenerator/src/api.js
@@ -0,0 +1,14 @@
+export const API_END_POINT = "https://free-quotes-api.herokuapp.com/";
+
+export const request = async () => {
+  try {
+    const res = await fetch(API_END_POINT);
+
+    if (!res.ok) {
+      throw new Error("API 호출 에러");
+    }
+    return await res.json();
+  } catch (e) {
+    console.error(e.message);
+  }
+};
diff --git a/project3-RandomQuoteGenerator/src/main.js b/project3-RandomQuoteGenerator/src/main.js
@@ -0,0 +1,5 @@
+import App from "./App.js";
+
+const $app = document.querySelector("#app");
+
+new App({ $target: $app });
diff --git a/project3-RandomQuoteGenerator/src/style.css b/project3-RandomQuoteGenerator/src/style.css
