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..6c77b70 --- /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 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]; +} \ 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; +} 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; +} 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; +} 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)