From f0c705288eb98abe292f638ff137f4acdc4fd9f1 Mon Sep 17 00:00:00 2001 From: goumi Date: Tue, 7 Sep 2021 23:14:06 +0900 Subject: [PATCH 1/4] =?UTF-8?q?project1=20colors=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Colors/index.html | 16 ++++++++++++++++ Colors/script.js | 12 ++++++++++++ Colors/style.css | 30 ++++++++++++++++++++++++++++++ 3 files changed, 58 insertions(+) create mode 100644 Colors/index.html create mode 100644 Colors/script.js create mode 100644 Colors/style.css diff --git a/Colors/index.html b/Colors/index.html new file mode 100644 index 0000000..b8b3f1c --- /dev/null +++ b/Colors/index.html @@ -0,0 +1,16 @@ + + + + + + + + Colors + + +
+ +
+ + + diff --git a/Colors/script.js b/Colors/script.js new file mode 100644 index 0000000..b371834 --- /dev/null +++ b/Colors/script.js @@ -0,0 +1,12 @@ +const colors = ['SpringGreen', 'DarkGreen', 'SlateBlue', 'Salmon', 'Gold', 'DarkKhaki', 'BlueViolet', 'OliveDrab', 'LightSteelBlue', 'Chocolate', 'SandyBrown', 'AliceBlue'] +const button = document.querySelector('button') + +button.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] +} \ No newline at end of file diff --git a/Colors/style.css b/Colors/style.css new file mode 100644 index 0000000..6efbc72 --- /dev/null +++ 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; +} From 07c5fc0152bfd05e9ad523e0028efaaef9b9783a Mon Sep 17 00:00:00 2001 From: goumi Date: Mon, 13 Sep 2021 01:54:18 +0900 Subject: [PATCH 2/4] HexColorsGradient --- Colors/script.js | 14 ++++---- Hex-Colors-Gradient/index.html | 21 ++++++++++++ Hex-Colors-Gradient/script.js | 19 +++++++++++ Hex-Colors-Gradient/style.css | 58 ++++++++++++++++++++++++++++++++++ 4 files changed, 105 insertions(+), 7 deletions(-) create mode 100644 Hex-Colors-Gradient/index.html create mode 100644 Hex-Colors-Gradient/script.js create mode 100644 Hex-Colors-Gradient/style.css diff --git a/Colors/script.js b/Colors/script.js index b371834..6c77b70 100644 --- a/Colors/script.js +++ b/Colors/script.js @@ -1,12 +1,12 @@ -const colors = ['SpringGreen', 'DarkGreen', 'SlateBlue', 'Salmon', 'Gold', 'DarkKhaki', 'BlueViolet', 'OliveDrab', 'LightSteelBlue', 'Chocolate', 'SandyBrown', 'AliceBlue'] -const button = document.querySelector('button') +const colors = ['SpringGreen', 'DarkGreen', 'SlateBlue', 'Salmon', 'Gold', 'DarkKhaki', 'BlueViolet', 'OliveDrab', 'LightSteelBlue', 'Chocolate', 'SandyBrown', 'AliceBlue']; +const buttonElement = document.querySelector('button'); -button.addEventListener('click', e => { - const containerElement = e.target.closest('.container') - containerElement.style.backgroundColor = randomColor(colors) +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] + const randomNum = Math.floor(Math.random() * colors.length); + return colors[randomNum]; } \ No newline at end of file diff --git a/Hex-Colors-Gradient/index.html b/Hex-Colors-Gradient/index.html new file mode 100644 index 0000000..4163844 --- /dev/null +++ b/Hex-Colors-Gradient/index.html @@ -0,0 +1,21 @@ + + + + + + + + Hex Colors + + +
+

CLICK THE BUTTON BELLOW TO GENERATE A RANDOM GRADIENT
HEX COLOR COMBINATION

+

+ background: linear-gradient(to right, #052c0e, + #532724) +

+ +
+ + + diff --git a/Hex-Colors-Gradient/script.js b/Hex-Colors-Gradient/script.js new file mode 100644 index 0000000..5742bc9 --- /dev/null +++ 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 +} \ No newline at end of file diff --git a/Hex-Colors-Gradient/style.css b/Hex-Colors-Gradient/style.css new file mode 100644 index 0000000..a1df388 --- /dev/null +++ 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; +} From 20bc236208faab7cba5fb057589176fc59b1de29 Mon Sep 17 00:00:00 2001 From: goumi Date: Mon, 13 Sep 2021 04:42:15 +0900 Subject: [PATCH 3/4] Quote Generator --- QuoteGenerator/index.html | 17 ++++++++++ QuoteGenerator/script.js | 40 ++++++++++++++++++++++ QuoteGenerator/style.css | 70 +++++++++++++++++++++++++++++++++++++++ 3 files changed, 127 insertions(+) create mode 100644 QuoteGenerator/index.html create mode 100644 QuoteGenerator/script.js create mode 100644 QuoteGenerator/style.css diff --git a/QuoteGenerator/index.html b/QuoteGenerator/index.html new file mode 100644 index 0000000..60cc964 --- /dev/null +++ b/QuoteGenerator/index.html @@ -0,0 +1,17 @@ + + + + + + + + Quote Generator + + +
+
+ +
+ + + diff --git a/QuoteGenerator/script.js b/QuoteGenerator/script.js new file mode 100644 index 0000000..0f3f311 --- /dev/null +++ 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 new file mode 100644 index 0000000..66ecd9d --- /dev/null +++ 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; +} From 33a955c2db900422c5b39ff9fe2bfb7f36149dec Mon Sep 17 00:00:00 2001 From: YEOJIN <64760270+rt-mingming@users.noreply.github.com> Date: Mon, 13 Sep 2021 18:44:16 +0900 Subject: [PATCH 4/4] Update README.md --- README.md | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/README.md b/README.md index 8e7c12a..e0cf3c4 100644 --- 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)