prgrms-web-devcourse · sonsurim · Sep 8, 2021 · Sep 11, 2021 · Sep 11, 2021 · Sep 11, 2021
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,10 @@
+{
+	"singleQuote": true,
+	"semi": true,
+	"useTabs": true,
+	"tabWidth": 2,
+	"trailingComma": "all",
+	"printWidth": 80,
+	"bracketSpacing": true,
+	"arrowParens": "avoid"
+}
diff --git a/01/colors/data/constant.js b/01/colors/data/constant.js
@@ -0,0 +1,13 @@
+const COLOR_CHIP = [
+  "#e74c3c",
+  "#f1c40f",
+  "#2ecc71",
+  "#1abc9c",
+  "#00a8ff",
+  "#5352ed",
+  "#34495e",
+  "#9b59b6",
+  "#7f8c8d",
+];
+
+export { COLOR_CHIP };
diff --git a/01/colors/index.html b/01/colors/index.html
@@ -0,0 +1,16 @@
+<!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="./src/css/style.css" />
+    <title>Colors</title>
+  </head>
+  <body>
+    <div class="container">
+      <div class="click-btn">Click Me!</div>
+    </div>
+    <script src="./src/js/index.js" type="module"></script>
+  </body>
+</html>
diff --git a/01/colors/src/css/style.css b/01/colors/src/css/style.css
@@ -0,0 +1,28 @@
+body {
+  margin: 0;
+  overflow: hidden;
+  font-size: 17px;
+  color: #333;
+}
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100vw;
+  height: 100vh;
+}
+
+.click-btn {
+  cursor: pointer;
+  padding: 8px 12px;
+  user-select: none;
+  border-radius: 4px;
+  border: 1px solid #333;
+}
+.click-btn:hover {
+  color: #fff;
+  background-color: #333;
+}
+.click-btn-focus {
+  box-shadow: 0 0 0 0.2rem rgb(52 58 64 / 50%);
+}
diff --git a/01/colors/src/js/index.js b/01/colors/src/js/index.js
@@ -0,0 +1,16 @@
+import { COLOR_CHIP } from "../../data/constant.js";
+
+const $container = document.querySelector(".container");
+const $clickBtn = document.querySelector(".click-btn");
+
+window.addEventListener("click", (e) => {
+  const isClickBtn = e.target.classList.contains("click-btn");
+  const randomNum = Math.ceil(Math.random() * 8);
+
+  if (isClickBtn) {
+    $clickBtn.classList.add("click-btn-focus");
+    $container.style.backgroundColor = COLOR_CHIP[randomNum];
+  } else {
+    $clickBtn.classList.remove("click-btn-focus");
+  }
+});
diff --git a/01/hex-colors/index.html b/01/hex-colors/index.html
@@ -0,0 +1,33 @@
+<!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="./src/css/style.css" />
+    <title>Hex Colors</title>
+  </head>
+  <body>
+    <div class="container">
+      <div class="row">
+        <div class="col title">
+          CLICK THE BUTTON BELLOW TO GENERATE A RANDOM GRADIENT
+        </div>
+        <div class="col title">HEX COLOR COMBINATION</div>
+      </div>
+      <div class="row">
+        <div class="col title">
+          background: linear-gradient(to right,
+          <span class="colorFrom">#52838b</span> ,
+          <span class="colorTo">#17725d</span>);
+        </div>
+      </div>
+      <div class="row">
+        <div class="col">
+          <button class="click-btn">Click Me</button>
+        </div>
+      </div>
+    </div>
+    <script src="./src/js/index.js" type="module"></script>
+  </body>
+</html>
diff --git a/01/hex-colors/src/css/style.css b/01/hex-colors/src/css/style.css
@@ -0,0 +1,61 @@
+body {
+  margin: 0;
+  overflow: hidden;
+  font-size: 10px;
+}
+.container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100vw;
+  height: 100vh;
+  font-size: 2.3rem;
+}
+.row {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.row:nth-child(2) {
+  margin: 10rem 0 0 0;
+}
+.title {
+  color: #333;
+  text-transform: uppercase;
+  animation: colorchange 5s infinite alternate;
+}
+.click-btn {
+  padding: 10px 15px;
+  border: none;
+  border-radius: 5px;
+  background-color: #f8f9fa;
+  font-size: 20px;
+}
+
+@keyframes colorchange {
+  0% {
+    color: #ffffff;
+  }
+
+  20% {
+    color: #cccccc;
+  }
+
+  40% {
+    color: #999999;
+  }
+
+  60% {
+    color: #666666;
+  }
+
+  80% {
+    color: #333333;
+  }
+
+  100% {
+    color: #000000;
+  }
+}
diff --git a/01/hex-colors/src/data/constant.js b/01/hex-colors/src/data/constant.js
@@ -0,0 +1,20 @@
+const COLOR_CODE = [
+  "0",
+  "1",
+  "2",
+  "3",
+  "4",
+  "5",
+  "6",
+  "7",
+  "8",
+  "9",
+  "A",
+  "B",
+  "C",
+  "D",
+  "E",
+  "F",
+];
+
+export { COLOR_CODE };
diff --git a/01/hex-colors/src/js/index.js b/01/hex-colors/src/js/index.js
@@ -0,0 +1,24 @@
+import { COLOR_CODE } from "../data/constant.js";
+
+const $btn = document.querySelector(".click-btn");
+const $colorFrom = document.querySelector(".colorFrom");
+const $colorTo = document.querySelector(".colorTo");
+
+$btn.addEventListener("click", () => {
+  let random_index = 0;
+
+  let colorFrom = "";
+  let colorTo = "";
+
+  for (let i = 0; i < 6; i++) {
+    random_index = Math.floor(Math.random() * COLOR_CODE.length);
+    colorFrom += COLOR_CODE[random_index];
+
+    random_index = Math.floor(Math.random() * COLOR_CODE.length);
+    colorTo += COLOR_CODE[random_index];
+  }
+
+  document.body.style.background = `linear-gradient(to right, #${colorFrom}, #${colorTo})`;
+  $colorFrom.textContent = colorFrom;
+  $colorTo.textContent = colorTo;
+});
diff --git a/01/quote/index.html b/01/quote/index.html
@@ -0,0 +1,20 @@
+<!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="./src/css/style.css" />
+    <title>Quote Generator</title>
+  </head>
+  <body>
+    <div class="container">
+      <div class="box">
+        <div class="quote"></div>
+        <div class="author"></div>
+      </div>
+      <button class="click-btn">Generatoe Quote</button>
+    </div>
+  </body>
+  <script src="./src/js/index.js" type="module"></script>
+</html>
diff --git a/01/quote/src/api/api.js b/01/quote/src/api/api.js
@@ -0,0 +1,13 @@
+export const getQuote = async () => {
+  try {
+    const res = await fetch(`https://free-quotes-api.herokuapp.com/`);
+
+    if (!res.ok) {
+      throw new Error("API Call Fail");
+    }
+
+    return await res.json();
+  } catch (e) {
+    alert(e.message);
+  }
+};
diff --git a/01/quote/src/css/style.css b/01/quote/src/css/style.css
@@ -0,0 +1,47 @@
+body {
+  background: radial-gradient(ellipse at center, #06bdc1, #68469f);
+  height: 100vh;
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: 100vw;
+  height: 100vh;
+}
+.box {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-self: center;
+  width: 65vw;
+  height: 18vh;
+  padding: 12vh 0;
+  font-size: 25px;
+  text-align: center;
+  background-color: #f4edea;
+  border: 10px solid #06bdc1;
+  border-radius: 10px;
+  box-shadow: 0px 2px 6px 0px rgb(0 0 0 / 90%);
+}
+.author {
+  margin-top: 3vh;
+}
+.click-btn {
+  align-self: center;
+  margin-top: 20px;
+  padding: 10px;
+  font-size: 15px;
+  color: #fff;
+  border: none;
+  border-radius: 4px;
+  background-color: #17a2b8;
+  cursor: pointer;
+}
+.click-btn:focus {
+  color: #fff;
+  background-color: #138496;
+  border-color: #117a8b;
+  box-shadow: 0 0 0 0.2rem rgb(58 176 195 / 50%);
+}
diff --git a/01/quote/src/js/index.js b/01/quote/src/js/index.js
@@ -0,0 +1,15 @@
+import { getQuote } from "../api/api.js";
+
+const $clickBtn = document.querySelector(".click-btn");
+const $quote = document.querySelector(".quote");
+const $author = document.querySelector(".author");
+
+async function fetchQuote() {
+  const res = await getQuote();
+  const { quote, author } = res;
+
+  $quote.textContent = `"${quote}"`;
+  $author.textContent = `- ${author} -`;
+}
+
+$clickBtn.addEventListener("click", (e) => fetchQuote());
diff --git a/02/carousel/index.html b/02/carousel/index.html
@@ -0,0 +1,30 @@
+<!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="./src/assets/css/reset.css" />
+		<link rel="stylesheet" href="./src/assets/css/fontello.css" />
+		<link rel="stylesheet" href="./src/assets/css/style.css" />
+		<title>Image Carousel</title>
+	</head>
+	<body>
+		<div class="container">
+			<div class="carousel">
+				<div class="carousel-inner">
+					<div class="carousel-arrow arrow-left" data-act="prev">
+						<i class="demo-icon icon-left-open" data-act="prev"></i>
+					</div>
+					<div class="carousel-arrow arrow-right" data-act="next">
+						<i class="demo-icon icon-right-open" data-act="next"></i>
+					</div>
+				</div>
+				<div class="carousel-indicators-container">
+					<div class="carousel-indicators"></div>
+				</div>
+			</div>
+		</div>
+	</body>
+	<script src="./src/js/index.js" type="module"></script>
+</html>