prgrms-web-devcourse · gyulhana · Sep 7, 2021 · Sep 7, 2021 · Sep 9, 2021 · Sep 10, 2021
diff --git a/button.js b/button.js
@@ -0,0 +1,9 @@
+export default function ColorBtn ({ $target, onClick }) {
+  const colorBtn = document.createElement('button')
+  colorBtn.innerText = 'Pick Colors!'
+  $target.appendChild(colorBtn)
+
+  colorBtn.addEventListener('click', () => {
+    onClick()
+  })
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Colors</title>
+    <meta charset="utf-8">
+    <link rel="shortcut icon" href="picker.png">
+    <link rel="stylesheet" href="main.css">
+  </head>
+  <body>
+    <main></main>
+    <script src="main.js" type="module"></script>
+  </body>
+</html>
diff --git a/m2-gradient/app.js b/m2-gradient/app.js
@@ -0,0 +1,45 @@
+import ClickBtn from "./button.js"
+import Detail from "./detail.js"
+
+export default function App ({ target }) {
+
+  const picker = () => {
+    const hexString = '0123456789abcdef'
+    const pickIndex = () => Math.floor(Math.random() * 16)
+    const hexColorCode = () => {
+      let temp = '#'
+      for (let i = 0; i < 6; i++){
+        const index = pickIndex()
+        temp += hexString[index]
+      }
+      return temp;
+    }
+    return hexColorCode();
+  }
+
+  const way = () => {
+    const ways = ['right', 'left']
+    const pickIndex = () => Math.floor(Math.random() * 2)
+    return ways[pickIndex()]
+  }
+
+  const detail = new Detail({
+    target,
+    initialState: {
+      way: 'right',
+      start: '#ffffff',
+      end: '#ffffff'
+    }
+  })
+
+  new ClickBtn({
+    target,
+    onClick: () => {
+      detail.setState({
+        way: way(),
+        start: picker(),
+        end: picker()
+      })
+    }
+  })
+}
diff --git a/m2-gradient/button.js b/m2-gradient/button.js
@@ -0,0 +1,9 @@
+export default function ClickBtn ({ target, onClick }) {
+  const clickBtn = document.createElement('button')
+  clickBtn.innerText = 'Click Me'
+  target.appendChild(clickBtn)
+
+  clickBtn.addEventListener('click', () => {
+    onClick()
+  })
+}
diff --git a/m2-gradient/detail.js b/m2-gradient/detail.js
@@ -0,0 +1,30 @@
+export default function Detail ({ target, initialState }) {
+  const detail = document.createElement('div')
+  target.appendChild(detail)
+
+  this.state = initialState
+  this.setState = (nextState) => {
+    this.state = nextState
+    this.render()
+  }
+
+  this.render = () => {
+    const { way, start, end } = this.state
+    document.body.style.background = `
+    linear-gradient(to ${way}, ${start}, ${end})
+    `
+
+    detail.innerHTML = `
+    <p class="descript">
+    CLICK THE BUTTON BELLOW TO GENERATE 
+    A RANDOM GRADIENT HEX COLOR COMBINATION
+    </p>
+
+    <p class="gradientColor">
+      background: linear-gradient(to ${way}, ${start}, ${end});
+    </p>
+    `
+  }
+
+  this.render()
+}
diff --git a/m2-gradient/index.html b/m2-gradient/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Hex Colors</title>
+    <link rel="shortcut icon" href="picker.png">
+    <link rel="stylesheet" href="main.css">
+  </head>
+  <body>
+    <main></main>
+    <script src="main.js" type="module"></script>
+  </body>
+</html>
diff --git a/m2-gradient/main.css b/m2-gradient/main.css
@@ -0,0 +1,48 @@
+main {
+  width: 98vw;
+  height: 98vh;
+  display: grid;
+  justify-content: center;
+  align-content: center;
+}
+
+div {
+  text-align: center;
+}
+
+.descript, .gradientColor {
+  width: 58vw;
+  font-size: 35px;
+  justify-self: center;
+  font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+  -webkit-animation:colorchange 8s linear infinite alternate;
+}
+
+  @-webkit-keyframes colorchange {
+  0% {
+    color: white;
+  }   
+  30% {
+    color: gray;
+  }
+  60% {
+    color: darkgray;
+  }
+  100% {
+    color: black;
+  }
+}
+
+button {
+  transition : all 0.5s ease;
+  border: none;
+  font-size: 1rem;
+  padding: 0.7rem;
+  border-radius: 5px;
+  justify-self: center;
+}
+
+button:hover {
+  cursor:pointer;
+  background-color: rgb(197, 196, 196);
+}
diff --git a/m2-gradient/main.js b/m2-gradient/main.js
@@ -0,0 +1,5 @@
+import App from "./app.js"
+
+const target = document.querySelector('main')
+
+new App({ target })
diff --git a/m2-gradient/picker.png b/m2-gradient/picker.png
diff --git a/m3-quote/api.js b/m3-quote/api.js
@@ -0,0 +1,15 @@
+const API_URL = "https://free-quotes-api.herokuapp.com";
+
+export const request = async () => {
+  try {
+    const res = await fetch(API_URL);
+    const result = await res.json();
+
+    if (!res.ok) {
+      throw new Error("api error!");
+    }
+    return result;
+  } catch (error) {
+    console.log(error.message);
+  }
+};
diff --git a/m3-quote/app.js b/m3-quote/app.js
@@ -0,0 +1,12 @@
+import GenerateBtn from "./button.js";
+import QuoteDetail from "./quotedetail.js";
+
+export default function App({ target }) {
+  const quoteDetail = new QuoteDetail({ target });
+  new GenerateBtn({
+    target,
+    onClick: () => {
+      quoteDetail.render();
+    },
+  });
+}
diff --git a/m3-quote/button.js b/m3-quote/button.js
@@ -0,0 +1,9 @@
+export default function GenerateBtn({ target, onClick }) {
+  const nextButton = document.createElement("button");
+  target.appendChild(nextButton);
+  nextButton.innerText = "▶";
+
+  nextButton.addEventListener("click", () => {
+    onClick();
+  });
+}
diff --git a/m3-quote/index.html b/m3-quote/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Quote Generator</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
+    <link rel="shortcut icon" href="quote.png">
+    <link rel="stylesheet" href="main.css">
+  </head>
+  <body>
+    <main>
+    </main>
+    <script src="main.js" type="module"></script>
+  </body>
+</html>
diff --git a/m3-quote/main.css b/m3-quote/main.css
@@ -0,0 +1,51 @@
+body {
+  font-family: "Times New Roman", Times, serif;
+  height: 98vh;
+  background: #80e5ff;
+  display: grid;
+  justify-content: center;
+  align-content: center;
+  align-items: center;
+}
+
+main {
+  width: 50vw;
+  height: 40vh;
+  border-radius: 37px;
+  background: linear-gradient(to right, #55ddff, #72ffec);
+  box-shadow: -31px 31px 62px #6dc3d9, 31px -31px 62px #93ffff;
+  padding: 150px 70px 70px 70px;
+  display: grid;
+  grid-template-rows: repeat(3, 1fr);
+  justify-content: center;
+  align-content: center;
+}
+
+.quote,
+.author {
+  width: 50vw;
+  text-align: center;
+  font-size: 3.4vh;
+  align-self: center;
+}
+
+.author {
+  font-size: 2.3vh;
+  font-style: italic;
+}
+
+button {
+  transition: all 0.2s ease-in-out;
+  background: transparent;
+  color: white;
+  border: none;
+  align-self: end;
+  justify-self: end;
+  text-align: center;
+  font-size: 3vh;
+}
+
+button:hover {
+  color: rgba(0, 47, 255, 0.644);
+  cursor: pointer;
+}
diff --git a/m3-quote/main.js b/m3-quote/main.js
@@ -0,0 +1,5 @@
+import App from "./app.js";
+
+const target = document.querySelector("main");
+
+new App({ target });
diff --git a/m3-quote/quote.png b/m3-quote/quote.png
diff --git a/m3-quote/quotedetail.js b/m3-quote/quotedetail.js
@@ -0,0 +1,19 @@
+import { request } from "./api.js";
+
+export default function QuoteDetail({ target }) {
+  const quotearea = document.createElement("div");
+  const authorarea = document.createElement("div");
+  quotearea.className = "quote";
+  authorarea.className = "author";
+  target.appendChild(quotearea);
+  target.appendChild(authorarea);
+
+  this.render = async () => {
+    const randomQuote = await request();
+    const { quote, author } = randomQuote;
+    quotearea.innerText = `${quote.replace(/\uFFFD/g, "-")}`;
+    authorarea.innerText = `by. ${author.length > 0 ? author.replace(/\uFFFD/g, "-") : "Unknown"}`;
+  };
+
+  this.render();
+}
diff --git a/main.css b/main.css
@@ -0,0 +1,30 @@
+body {
+  margin: 0;
+  padding: 0;
+  background-color: black;
+}
+
+main {
+  width: 98vw;
+  height: 98vh;
+  display: grid;
+  justify-content: center;
+  align-content: center;
+}
+
+button {
+  transition : all 0.4s ease-out;
+  background: rgba(255, 255, 255, 0.342);
+  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.37);
+  backdrop-filter: blur( 20px );
+  border-radius: 10px;
+  border: 1px solid rgba( 255, 255, 255, 0.18 );
+  font-size: 20px;
+  padding: 5px 10px 5px 10px;
+  color: white;
+}
+
+button:hover {
+  background: rgba(14, 14, 14, 0.85);
+  cursor: pointer;
+}
diff --git a/main.js b/main.js
@@ -0,0 +1,30 @@
+import ColorBtn from "./button.js";
+
+const body = document.querySelector('body')
+const $target = document.querySelector('main')
+let egg = 0;
+
+const colorPicker = () => {
+  let targetColor = '#'
+  const hex = '0123456789abcdef'
+
+  const pickIndex = () => Math.floor( Math.random() * 16 );
+
+  for (let i = 0; i < 6; i++) {
+    const index = pickIndex();
+    targetColor += hex[index];
+  }
+
+  return targetColor;
+}
+
+new ColorBtn({
+  $target, 
+  onClick: () => {
+    if (egg === 101) confirm("🎉 You've already clicked 100 times!\nDo you want to continue picking colors?")
+    const color = colorPicker();
+    console.log(color);
+    body.style.backgroundColor = color;
+    egg++;
+  }
+})
diff --git a/picker.png b/picker.png