prgrms-web-devcourse · goumi1009 · Sep 7, 2021 · Sep 12, 2021 · Sep 12, 2021 · Sep 13, 2021
diff --git a/Colors/index.html b/Colors/index.html
@@ -0,0 +1,16 @@
+<!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" />
+    <link rel="stylesheet" href="style.css" />
+    <title>Colors</title>
+  </head>
+  <body>
+    <div class="container">
+      <button type="button">Click Me!</button>
+    </div>
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/Colors/script.js b/Colors/script.js
@@ -0,0 +1,12 @@
+const colors = ['SpringGreen', 'DarkGreen', 'SlateBlue', 'Salmon', 'Gold', 'DarkKhaki', 'BlueViolet', 'OliveDrab', 'LightSteelBlue', 'Chocolate', 'SandyBrown', 'AliceBlue'];
+const buttonElement = document.querySelector('button');
+
+buttonElement.addEventListener('click', e => {
+  const containerElement = e.target.closest('.container');
+  containerElement.style.backgroundColor = randomColor(colors);
+})
+
+const randomColor = (colors) => {
+  const randomNum = Math.floor(Math.random() * colors.length);
+  return colors[randomNum];
+}
diff --git a/Colors/style.css b/Colors/style.css
@@ -0,0 +1,30 @@
+body {
+  margin: 0;
+  padding: 0;
+}
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100vw;
+  height: 100vh;
+  background-color: AliceBlue;
+}
+
+.container button {
+  padding: 16px 32px;
+  border: 1px solid #000;
+  border-radius: 3px;
+  background: transparent;
+  font-size: 18px;
+}
+
+.container button:focus {
+  outline: 0;
+  box-shadow: 0px 0px 0px 3px rgba(0, 0, 0, 0.3);
+}
+
+.container button:hover {
+  background-color: #000;
+  color: #fff;
+}
diff --git a/Hex-Colors-Gradient/index.html b/Hex-Colors-Gradient/index.html
@@ -0,0 +1,21 @@
+<!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" />
+    <link rel="stylesheet" href="style.css" />
+    <title>Hex Colors</title>
+  </head>
+  <body>
+    <div class="container">
+      <h1>CLICK THE BUTTON BELLOW TO GENERATE A RANDOM GRADIENT<br />HEX COLOR COMBINATION</h1>
+      <h2>
+        background: linear-gradient(to right, <span class="hexcode-1">#052c0e</span>,
+        <span class="hexcode-2">#532724</span>)
+      </h2>
+      <button type="button">Click Me!</button>
+    </div>
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/Hex-Colors-Gradient/script.js b/Hex-Colors-Gradient/script.js
@@ -0,0 +1,19 @@
+const buttonElement = document.querySelector('button');
+const colorElement1 = document.querySelector('.hexcode-1');
+const colorElement2 = document.querySelector('.hexcode-2');
+
+buttonElement.addEventListener('click', (e) => {
+  const containerElement = e.target.closest('.container');
+  const color1 = randomColor();
+  const color2 = randomColor();
+
+  colorElement1.textContent = color1;
+  colorElement2.textContent = color2;
+
+  containerElement.style.background = `linear-gradient(to right, ${color1}, ${color2})`
+})
+
+const randomColor = () => {
+  let color = '#' + Math.floor(Math.random() * 16777215).toString(16)
+  return color
+}
diff --git a/Hex-Colors-Gradient/style.css b/Hex-Colors-Gradient/style.css
@@ -0,0 +1,58 @@
+* {
+  margin: 0;
+  padding: 0;
+}
+.container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100vw;
+  height: 100vh;
+  background: linear-gradient(to right, rgb(5, 44, 14), rgb(83, 39, 36));
+  text-align: center;
+}
+
+.container h1 {
+  margin-bottom: 8vh;
+  font-size: 2.5vw;
+  line-height: 1.2;
+  animation: textColor 5s infinite alternate;
+}
+
+.container h2 {
+  margin-bottom: 3vh;
+  font-size: 2vw;
+  font-weight: normal;
+  animation: textColor 5s infinite alternate;
+}
+
+@keyframes textColor {
+  10% {
+    color: #000;
+  }
+  50% {
+    color: #fff;
+  }
+  100% {
+    color: #000;
+  }
+}
+
+.container button {
+  padding: 16px 32px;
+  border: 1px solid #000;
+  border-radius: 3px;
+  background: #fff;
+  font-size: 18px;
+}
+
+.container button:focus {
+  outline: 0;
+  box-shadow: 0px 0px 0px 3px rgba(0, 0, 0, 0.3);
+}
+
+.container button:hover {
+  background-color: #000;
+  color: #fff;
+}
diff --git a/QuoteGenerator/index.html b/QuoteGenerator/index.html
@@ -0,0 +1,17 @@
+<!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" />
+    <link rel="stylesheet" href="style.css" />
+    <title>Quote Generator</title>
+  </head>
+  <body>
+    <div class="container">
+      <div class="card"></div>
+      <button type="button" class="btn-generate">Generator Quote</button>
+    </div>
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/QuoteGenerator/script.js b/QuoteGenerator/script.js
@@ -0,0 +1,40 @@
+const API_END_POINT = 'https://free-quotes-api.herokuapp.com';
+
+const request = async () => {
+  try {
+    const res = await fetch(`${API_END_POINT}`);
+    if (res.ok) {
+      return await res.json();
+    }
+    throw new Error('API 호출 오류');
+  } catch (e) {
+    alert(e.message);
+  }
+}
+
+const cardElement = document.querySelector('.card');
+const quoteElement = document.createElement('p');
+quoteElement.className = 'quote';
+const authorElement = document.createElement('p');
+authorElement.className = 'author';
+const buttonElement = document.querySelector('.btn-generate');
+
+const loadQuote = async () => {
+  const quoteText = await request();
+  quoteElement.textContent = quoteText.quote;
+  authorElement.textContent = quoteText.author;
+}
+
+buttonElement.addEventListener('click', () => {
+  loadQuote()
+  cardElement.appendChild(quoteElement);
+  cardElement.appendChild(authorElement);
+})
+
+
+
+
+
+
+
+
diff --git a/QuoteGenerator/style.css b/QuoteGenerator/style.css
@@ -0,0 +1,70 @@
+@import url("https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap");
+
+* {
+  padding: 0;
+  margin: 0;
+}
+
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  width: 100vw;
+  height: 100vh;
+  background: radial-gradient(circle, rgba(17, 200, 155, 1) 0%, rgba(49, 20, 129, 1) 100%);
+}
+
+.container .card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 60vw;
+  height: 40vh;
+  margin-bottom: 3vh;
+  border: 8px solid #16e790;
+  border-radius: 10px;
+  background-color: #fff;
+  box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.75);
+}
+
+.container p:first-child::before,
+.container p:first-child::after {
+  content: '"';
+}
+
+.container p:last-child::before {
+  content: "- ";
+}
+
+.container p {
+  width: 95%;
+  margin-bottom: 20px;
+  font-size: 24px;
+  text-align: center;
+}
+
+.container p:last-child {
+  font-style: italic;
+  font-family: "Dancing Script", cursive, serif;
+}
+
+.container button {
+  padding: 10px 20px;
+  border-radius: 3px;
+  border: 0;
+  background-color: #7332e7;
+  font-size: 16px;
+  color: #fff;
+  cursor: pointer;
+}
+
+.container button:focus {
+  outline: none;
+  box-shadow: 0px 0px 0px 4px rgba(255, 255, 255, 0.3);
+}
+
+.container button:hover {
+  background-color: #5e18db;
+}
diff --git a/README.md b/README.md
@@ -5,6 +5,18 @@
     - [Project1/리아] 프로젝트명
     - 예) [Project1/리아] Colors
 
+## 2회차(~9/21)
+### Project 4 The message
+![image](https://user-images.githubusercontent.com/64760270/133061934-b99e60d5-fc6f-4705-a9a4-02015d728f4e.png)
+### Project 5 Counter
+![image](https://user-images.githubusercontent.com/64760270/133061971-6eaa17ab-cd0e-4aec-b1b4-2e998f8d8548.png)
+### Project 6 Image carousel
+![image](https://user-images.githubusercontent.com/64760270/133062053-5786ef19-7375-4481-9e7f-a871ee563d54.png)
+### Project 7 Digital clock
+![image](https://user-images.githubusercontent.com/64760270/133062123-f6177858-f738-4a66-b2d2-000c43787276.png)
+
+
+
 ## 1회차(~9/12)
 ### Project 1 Colors
 ![image](https://user-images.githubusercontent.com/64760270/132218819-23e9edb1-9596-4a31-9618-5e7e6adeecb0.png)