From b8b9f367d97ed4aefbebc2d76b2e10a174a7fe8f Mon Sep 17 00:00:00 2001 From: gyulhana Date: Tue, 7 Sep 2021 19:02:54 +0900 Subject: [PATCH 1/3] initial commit --- button.js | 9 +++++++++ index.html | 13 +++++++++++++ main.css | 30 ++++++++++++++++++++++++++++++ main.js | 30 ++++++++++++++++++++++++++++++ picker.png | Bin 0 -> 15832 bytes 5 files changed, 82 insertions(+) create mode 100644 button.js create mode 100644 index.html create mode 100644 main.css create mode 100644 main.js create mode 100644 picker.png diff --git a/button.js b/button.js new file mode 100644 index 0000000..95648e9 --- /dev/null +++ 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() + }) +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..8739ec3 --- /dev/null +++ b/index.html @@ -0,0 +1,13 @@ + + + + Colors + + + + + +
+ + + \ No newline at end of file diff --git a/main.css b/main.css new file mode 100644 index 0000000..93a11b5 --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/main.js b/main.js new file mode 100644 index 0000000..dc5ce90 --- /dev/null +++ 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++; + } +}) \ No newline at end of file diff --git a/picker.png b/picker.png new file mode 100644 index 0000000000000000000000000000000000000000..2cc6910fe3d8b071be9373a16d9d34809152f3b9 GIT binary patch literal 15832 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 E2Vp-L3jhEB literal 0 HcmV?d00001 From ad154cca4672c4a895d96a8ef847054c4d2c9915 Mon Sep 17 00:00:00 2001 From: gyulhana Date: Thu, 9 Sep 2021 16:20:20 +0900 Subject: [PATCH 2/3] mission 2 : Hex Colors --- m2-gradient/app.js | 45 ++++++++++++++++++++++++++++++++++++++ m2-gradient/button.js | 9 ++++++++ m2-gradient/detail.js | 30 ++++++++++++++++++++++++++ m2-gradient/index.html | 13 +++++++++++ m2-gradient/main.css | 48 +++++++++++++++++++++++++++++++++++++++++ m2-gradient/main.js | 5 +++++ m2-gradient/picker.png | Bin 0 -> 15832 bytes 7 files changed, 150 insertions(+) create mode 100644 m2-gradient/app.js create mode 100644 m2-gradient/button.js create mode 100644 m2-gradient/detail.js create mode 100644 m2-gradient/index.html create mode 100644 m2-gradient/main.css create mode 100644 m2-gradient/main.js create mode 100644 m2-gradient/picker.png diff --git a/m2-gradient/app.js b/m2-gradient/app.js new file mode 100644 index 0000000..cc20a49 --- /dev/null +++ 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() + }) + } + }) +} \ No newline at end of file diff --git a/m2-gradient/button.js b/m2-gradient/button.js new file mode 100644 index 0000000..935cb15 --- /dev/null +++ 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() + }) +} \ No newline at end of file diff --git a/m2-gradient/detail.js b/m2-gradient/detail.js new file mode 100644 index 0000000..fa28f55 --- /dev/null +++ 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 = ` +

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

+ +

+ background: linear-gradient(to ${way}, ${start}, ${end}); +

+ ` + } + + this.render() +} \ No newline at end of file diff --git a/m2-gradient/index.html b/m2-gradient/index.html new file mode 100644 index 0000000..bbdfea6 --- /dev/null +++ b/m2-gradient/index.html @@ -0,0 +1,13 @@ + + + + + Hex Colors + + + + +
+ + + \ No newline at end of file diff --git a/m2-gradient/main.css b/m2-gradient/main.css new file mode 100644 index 0000000..7861d5f --- /dev/null +++ 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); +} \ No newline at end of file diff --git a/m2-gradient/main.js b/m2-gradient/main.js new file mode 100644 index 0000000..3c25277 --- /dev/null +++ b/m2-gradient/main.js @@ -0,0 +1,5 @@ +import App from "./app.js" + +const target = document.querySelector('main') + +new App({ target }) \ No newline at end of file diff --git a/m2-gradient/picker.png b/m2-gradient/picker.png new file mode 100644 index 0000000000000000000000000000000000000000..2cc6910fe3d8b071be9373a16d9d34809152f3b9 GIT binary patch literal 15832 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 E2Vp-L3jhEB literal 0 HcmV?d00001 From 088a8a818d898c785ab299803606d66eb12e19c0 Mon Sep 17 00:00:00 2001 From: gyulhana Date: Sat, 11 Sep 2021 01:06:15 +0900 Subject: [PATCH 3/3] mission 3 : Random Quotes Generator --- m3-quote/api.js | 15 ++++++++++++ m3-quote/app.js | 12 ++++++++++ m3-quote/button.js | 9 +++++++ m3-quote/index.html | 15 ++++++++++++ m3-quote/main.css | 51 ++++++++++++++++++++++++++++++++++++++++ m3-quote/main.js | 5 ++++ m3-quote/quote.png | Bin 0 -> 912 bytes m3-quote/quotedetail.js | 19 +++++++++++++++ 8 files changed, 126 insertions(+) create mode 100644 m3-quote/api.js create mode 100644 m3-quote/app.js create mode 100644 m3-quote/button.js create mode 100644 m3-quote/index.html create mode 100644 m3-quote/main.css create mode 100644 m3-quote/main.js create mode 100644 m3-quote/quote.png create mode 100644 m3-quote/quotedetail.js diff --git a/m3-quote/api.js b/m3-quote/api.js new file mode 100644 index 0000000..d708bba --- /dev/null +++ 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 new file mode 100644 index 0000000..3a0e1e0 --- /dev/null +++ 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 new file mode 100644 index 0000000..be827f2 --- /dev/null +++ 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 new file mode 100644 index 0000000..ddbe7b0 --- /dev/null +++ b/m3-quote/index.html @@ -0,0 +1,15 @@ + + + + Quote Generator + + + + + + +
+
+ + + \ No newline at end of file diff --git a/m3-quote/main.css b/m3-quote/main.css new file mode 100644 index 0000000..c5704bb --- /dev/null +++ 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 new file mode 100644 index 0000000..50e9540 --- /dev/null +++ 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 new file mode 100644 index 0000000000000000000000000000000000000000..6bc4302b9043c67a3b5e5229988530de6567e43b GIT binary patch literal 912 zcmeAS@N?(olHy`uVBq!ia0vp^1|ZDA0wn)(8}a}tmUKs7M+SzC{oH>NS%G|oWRD45dJguM!v-tY$DUh!@P+6=(yLU`q0KcVYP7-hXC4kjGiz z5n0T@z<2|M8GpqrD*_6#mw5WRvOi^)<1ytr?8^5Ls433V#W5t}@Z0GJvxNf%j@9qJ zxnzlE=TWoV#krbdYeaOtdYXa+*1Ot>XmY%=zYx6lg(ufludizNT=u?L7%s@Vk=;>O zWUZ1%mDe7LgB@mSQeF1(}gNH}%UGd|bwki(oZPsCQs8Pqq1 zo%?*y_>^M71a-Nc`5ap`UObL@wpz(c$l{FBHuV*Lt&&HDRd$^7XRVxiDQx0*WA|gC zaSvtRpA3AW`+8ot@ky1yq8CyEKJ1%tby2(B${=l#t4y8;qn~aT+v~dg!BvePj<;FPt9dO?QVv+S$FjyZ z>Cjv)wzsS9887LKeaya%seJb8kos!Dv>iJt*E@Q~TK=3Zv&{MDn%qh09?uKEMwt9O zEXKjY)aalf0Ho?&4?LPBcJ4vzhOMhU&zbd`|B|)AB4*}Sm+t94`LF-S{-*w?8vXd@ znU{g-ltHz`HKHUXu_Vlzz`7#dlb8e16}=o*+<85n%n^fVMj zLvDUbW?Cg~4UO+(Ujj8qf@}!RPb(=;EJ|f4FE7{2%*!rLPAo{(%P&fw{mw=TsEEPS L)z4*}Q$iB}CD?M+ literal 0 HcmV?d00001 diff --git a/m3-quote/quotedetail.js b/m3-quote/quotedetail.js new file mode 100644 index 0000000..8d25c5f --- /dev/null +++ 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(); +}