From 45138eda58d4fd30e6fe813616e3fac3b831d34f Mon Sep 17 00:00:00 2001 From: kimbangg Date: Thu, 9 Sep 2021 01:47:57 +0900 Subject: [PATCH 1/7] =?UTF-8?q?=20#=20feat=20:=201=EB=B2=88=20=EC=83=89?= =?UTF-8?q?=EA=B9=94=20=EB=B3=80=EA=B2=BD=20=EA=B3=BC=EC=A0=9C(=EA=B8=B0?= =?UTF-8?q?=EB=8A=A5=20=EA=B5=AC=ED=98=84)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .gitignore | 112 +++++++++++++++++++++++++++++++++++++ .prettierrc.json | 10 ++++ 1-Colors/index.html | 18 ++++++ 1-Colors/src/css/style.css | 20 +++++++ 1-Colors/src/js/App.js | 19 +++++++ 1-Colors/src/main.js | 7 +++ package.json | 16 ++++++ 7 files changed, 202 insertions(+) create mode 100644 .gitignore create mode 100644 .prettierrc.json create mode 100644 1-Colors/index.html create mode 100644 1-Colors/src/css/style.css create mode 100644 1-Colors/src/js/App.js create mode 100644 1-Colors/src/main.js create mode 100644 package.json diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..4b48d59 --- /dev/null +++ b/.gitignore @@ -0,0 +1,112 @@ +# MACBOOK Default File +.DS_Store + +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +lerna-debug.log* + +# Diagnostic reports (https://nodejs.org/api/report.html) +report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json + +# Runtime data +pids +*.pid +*.seed +*.pid.lock + +# Directory for instrumented libs generated by jscoverage/JSCover +lib-cov + +# Coverage directory used by tools like istanbul +coverage +*.lcov + +# nyc test coverage +.nyc_output + +# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) +.grunt + +# Bower dependency directory (https://bower.io/) +bower_components + +# node-waf configuration +.lock-wscript + +# Compiled binary addons (https://nodejs.org/api/addons.html) +build/Release + +# Dependency directories +node_modules/ +jspm_packages/ + +# TypeScript v1 declaration files +typings/ + +# TypeScript cache +*.tsbuildinfo + +# Optional npm cache directory +.npm + +# Optional eslint cache +.eslintcache + +# Microbundle cache +.rpt2_cache/ +.rts2_cache_cjs/ +.rts2_cache_es/ +.rts2_cache_umd/ + +# Optional REPL history +.node_repl_history + +# Output of 'npm pack' +*.tgz + +# Yarn Integrity file +.yarn-integrity + +# dotenv environment variables file +.env +.env.test + +# parcel-bundler cache (https://parceljs.org/) +.cache + +# Next.js build output +.next + +# Nuxt.js build / generate output +.nuxt +dist + +# Gatsby files +.cache/ +# Comment in the public line in if your project uses Gatsby and *not* Next.js +# https://nextjs.org/blog/next-9-1#public-directory-support +# public + +# vuepress build output +.vuepress/dist + +# Serverless directories +.serverless/ + +# FuseBox cache +.fusebox/ + +# DynamoDB Local files +.dynamodb/ + +# TernJS port file +.tern-port + +# others +node_modules +yarn.lock +   \ No newline at end of file diff --git a/.prettierrc.json b/.prettierrc.json new file mode 100644 index 0000000..138f45f --- /dev/null +++ b/.prettierrc.json @@ -0,0 +1,10 @@ +{ + "printWidth": 100, + "tabWidth": 2, + "singleQuote": true, + "trailingComma": "all", + "bracketSpacing": true, + "semi": false, + "useTabs": false, + "endOfLine": "lf" +} diff --git a/1-Colors/index.html b/1-Colors/index.html new file mode 100644 index 0000000..36f1921 --- /dev/null +++ b/1-Colors/index.html @@ -0,0 +1,18 @@ + + + + + + + Auto Complete Editor + + + + + +
+ + + + + \ No newline at end of file diff --git a/1-Colors/src/css/style.css b/1-Colors/src/css/style.css new file mode 100644 index 0000000..8767fdf --- /dev/null +++ b/1-Colors/src/css/style.css @@ -0,0 +1,20 @@ +#app { + width: 100%; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; +} + +.color-btn { + background-color: transparent; + border: 2px solid; + border-radius: 8px; + width: 80px; + height: 30px; + font-size: 15px; +} + +.color-btn:hover { + background-color: #e6e6e6; +} diff --git a/1-Colors/src/js/App.js b/1-Colors/src/js/App.js new file mode 100644 index 0000000..bf2e42b --- /dev/null +++ b/1-Colors/src/js/App.js @@ -0,0 +1,19 @@ +export default function App({ $target }) { + const $button = document.createElement('button') + $button.className = 'color-btn' + $button.innerText = 'Click me' + $target.appendChild($button) + + $button.addEventListener('click', (e) => { + colorChange() + }) +} + +function colorChange() { + const color = ['#FC5C7D', '#6A82FB', '#38ef7d', '#fffbd5'] + + let num = Math.floor(Math.random() * color.length) + + const $background = document.getElementById('app') + $background.style.backgroundColor = color[num] +} diff --git a/1-Colors/src/main.js b/1-Colors/src/main.js new file mode 100644 index 0000000..7c7b3a8 --- /dev/null +++ b/1-Colors/src/main.js @@ -0,0 +1,7 @@ +import App from './js/App.js' + +const $app = document.querySelector('#app') + +new App({ + $target: $app, +}) diff --git a/package.json b/package.json new file mode 100644 index 0000000..2c3a1b3 --- /dev/null +++ b/package.json @@ -0,0 +1,16 @@ +{ + "scripts": { + "start": "node main.js", + "lint": "eslint *.js", + "lint:fix": "eslint --fix *.js" + }, + "devDependencies": { + "eslint": "^7.32.0", + "eslint-config-airbnb-base": "^14.2.1", + "eslint-config-google": "^0.14.0", + "eslint-config-prettier": "^8.3.0", + "eslint-plugin-import": "^2.24.0", + "eslint-plugin-prettier": "^3.4.0", + "prettier": "^2.3.2" + } +} From 2f8ade843f26f10e1c4c038c87c710e58cd0c626 Mon Sep 17 00:00:00 2001 From: kimbangg Date: Thu, 9 Sep 2021 13:12:11 +0900 Subject: [PATCH 2/7] =?UTF-8?q?=20#=20refactor=20:=20=EC=A4=91=EB=B3=B5=20?= =?UTF-8?q?=EC=BD=94=EB=93=9C=20=EC=A0=9C=EA=B1=B0=20=EB=B0=8F=20CSS=20?= =?UTF-8?q?=EC=A0=95=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 1-Colors/src/css/style.css | 4 +++- 1-Colors/src/js/App.js | 18 ++++++++---------- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/1-Colors/src/css/style.css b/1-Colors/src/css/style.css index 8767fdf..d8de305 100644 --- a/1-Colors/src/css/style.css +++ b/1-Colors/src/css/style.css @@ -8,8 +8,10 @@ .color-btn { background-color: transparent; - border: 2px solid; + border: 3.5px solid; border-radius: 8px; + color: gray; + outline: none; width: 80px; height: 30px; font-size: 15px; diff --git a/1-Colors/src/js/App.js b/1-Colors/src/js/App.js index bf2e42b..78f8dcb 100644 --- a/1-Colors/src/js/App.js +++ b/1-Colors/src/js/App.js @@ -1,19 +1,17 @@ export default function App({ $target }) { + const $background = document.getElementById('app') const $button = document.createElement('button') $button.className = 'color-btn' $button.innerText = 'Click me' $target.appendChild($button) - $button.addEventListener('click', (e) => { - colorChange() + $button.addEventListener('click', () => { + onColorChange() }) -} - -function colorChange() { - const color = ['#FC5C7D', '#6A82FB', '#38ef7d', '#fffbd5'] - let num = Math.floor(Math.random() * color.length) - - const $background = document.getElementById('app') - $background.style.backgroundColor = color[num] + function onColorChange() { + const colors = ['#FC5C7D', '#6A82FB', '#38ef7d', '#fffbd5', 'eee8aa', '#ffdab9', '#fffaf0'] + let num = Math.floor(Math.random() * colors.length) + $background.style.backgroundColor = colors[num] + } } From 9a5f087acd138fdc3b16139a435c18afde2ed2b4 Mon Sep 17 00:00:00 2001 From: kimbangg Date: Fri, 10 Sep 2021 00:58:58 +0900 Subject: [PATCH 3/7] =?UTF-8?q?=20#=20feat=20:=202-Hex=20Color=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 2-Hex_Color/index.html | 20 +++++ 2-Hex_Color/src/css/reset.css | 129 ++++++++++++++++++++++++++++++ 2-Hex_Color/src/css/style.css | 75 +++++++++++++++++ 2-Hex_Color/src/js/App.js | 62 ++++++++++++++ 2-Hex_Color/src/js/Background.js | 16 ++++ 2-Hex_Color/src/js/Description.js | 32 ++++++++ 2-Hex_Color/src/main.js | 7 ++ 2-Hex_Color/src/utils/Constant.js | 29 +++++++ 2-Hex_Color/src/utils/document.js | 2 + 9 files changed, 372 insertions(+) create mode 100644 2-Hex_Color/index.html create mode 100644 2-Hex_Color/src/css/reset.css create mode 100644 2-Hex_Color/src/css/style.css create mode 100644 2-Hex_Color/src/js/App.js create mode 100644 2-Hex_Color/src/js/Background.js create mode 100644 2-Hex_Color/src/js/Description.js create mode 100644 2-Hex_Color/src/main.js create mode 100644 2-Hex_Color/src/utils/Constant.js create mode 100644 2-Hex_Color/src/utils/document.js diff --git a/2-Hex_Color/index.html b/2-Hex_Color/index.html new file mode 100644 index 0000000..9df0995 --- /dev/null +++ b/2-Hex_Color/index.html @@ -0,0 +1,20 @@ + + + + + + + Hex Colors gradient + + + + + + +
+ + + + + + diff --git a/2-Hex_Color/src/css/reset.css b/2-Hex_Color/src/css/reset.css new file mode 100644 index 0000000..5bca465 --- /dev/null +++ b/2-Hex_Color/src/css/reset.css @@ -0,0 +1,129 @@ +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; +} +body { + line-height: 1; +} +ol, +ul { + list-style: none; +} +blockquote, +q { + quotes: none; +} +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} +input:focus { + outline: none; +} +a { + color: inherit; + text-decoration: none; +} diff --git a/2-Hex_Color/src/css/style.css b/2-Hex_Color/src/css/style.css new file mode 100644 index 0000000..7f515a4 --- /dev/null +++ b/2-Hex_Color/src/css/style.css @@ -0,0 +1,75 @@ +@import 'reset.css'; + +:root { + --left: white; + --right: white; + --font: black; + --direction: to left; +} + +html, +body { + width: 100%; + height: 100vh; + overflow: hidden; +} + +#app { + width: 100%; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; + background: linear-gradient(var(--direction), var(--left), var(--right)); + -webkit-animation: colorchange 8s linear infinite alternate; +} + +@-webkit-keyframes colorchange { + 0% { + color: white; + } + 30% { + color: gray; + } + 60% { + color: darkgray; + } + 100% { + color: black; + } +} + +.description { + width: 900px; + font-size: 45px; + font-weight: bold; + margin-left: 3%; +} + +.subDescription { + width: 800px; + font-size: 45px; + font-weight: bold; + margin-left: 7.5%; +} + +.gradient { + width: 900px; + font-size: 35px; + font-weight: bold; + margin: 7% 0% 0% 7%; +} + +.color_btn { + margin: 3% 0% 0% 43%; + width: 90px; + height: 50px; + font-weight: bold; + background: transparent; + border: 4px solid black; + border-radius: 4px; +} + +.color_btn:hover { + background-color: var(--left); +} diff --git a/2-Hex_Color/src/js/App.js b/2-Hex_Color/src/js/App.js new file mode 100644 index 0000000..897bb49 --- /dev/null +++ b/2-Hex_Color/src/js/App.js @@ -0,0 +1,62 @@ +import { leftOption, rightOption, directOption } from '../utils/Constant.js' +import Background from './Background.js' +import Description from './Description.js' + +export default function App({ $target }) { + this.state = { + left: 'white', + right: 'white', + direction: 'to right', + } + + const { left, right, direction } = this.state + + const description = new Description({ + $target, + initialState: { + left, + right, + direction, + }, + onChangeColor: () => { + const colorNum = Math.floor(Math.random() * leftOption.length) + const direcNum = Math.floor(Math.random() * directOption.length) + + const selectedLeft = leftOption[colorNum] + const selectedRight = rightOption[colorNum] + const selectedDirection = directOption[direcNum] + + this.setState({ + left: selectedLeft, + right: selectedRight, + direction: selectedDirection, + }) + }, + }) + + const background = new Background({ + $target, + initialState: { + left, + right, + direction, + }, + }) + + this.setState = (nextState) => { + this.state = nextState + + const { left, right, direction } = this.state + description.setState({ + left, + right, + direction, + }) + + background.setState({ + left, + right, + direction, + }) + } +} diff --git a/2-Hex_Color/src/js/Background.js b/2-Hex_Color/src/js/Background.js new file mode 100644 index 0000000..0dc603b --- /dev/null +++ b/2-Hex_Color/src/js/Background.js @@ -0,0 +1,16 @@ +import { $setProperty } from '../utils/document.js' + +export default function Background({ $target, initialState }) { + this.state = initialState + + this.setState = (nextState) => { + this.state = nextState + this.render() + } + + this.render = () => { + $setProperty($target, '--left', this.state.left) + $setProperty($target, '--right', this.state.right) + $setProperty($target, '--direction', this.state.direction) + } +} diff --git a/2-Hex_Color/src/js/Description.js b/2-Hex_Color/src/js/Description.js new file mode 100644 index 0000000..16773af --- /dev/null +++ b/2-Hex_Color/src/js/Description.js @@ -0,0 +1,32 @@ +export default function Description({ $target, initialState, onChangeColor }) { + const $itemDiv = document.createElement('div') + $target.appendChild($itemDiv) + + this.state = initialState + + this.setState = (nextState) => { + this.state = nextState + this.render() + } + + this.render = () => { + const { left, right, direction } = this.state + + $itemDiv.innerHTML = ` +

CLICK THE BUTTON BELLOW TO GENERATE

+

A RANDOM HEX COLOR COMBINATION

+

background liner-gradient(${direction}, ${left}, ${right})

+ + ` + } + + this.render() + + $itemDiv.addEventListener('click', (e) => { + const { className } = e.target + + if (className === 'color_btn') { + onChangeColor() + } + }) +} diff --git a/2-Hex_Color/src/main.js b/2-Hex_Color/src/main.js new file mode 100644 index 0000000..7c7b3a8 --- /dev/null +++ b/2-Hex_Color/src/main.js @@ -0,0 +1,7 @@ +import App from './js/App.js' + +const $app = document.querySelector('#app') + +new App({ + $target: $app, +}) diff --git a/2-Hex_Color/src/utils/Constant.js b/2-Hex_Color/src/utils/Constant.js new file mode 100644 index 0000000..ce99761 --- /dev/null +++ b/2-Hex_Color/src/utils/Constant.js @@ -0,0 +1,29 @@ +export const leftOption = [ + '#2193b0', + '#bdc3c7', + '#12c2e9', + '#1f4037', + '#8360c3', + '#E94057', + '#007991', +] +export const rightOption = [ + '#6dd5ed', + '#2c3e50', + '#f64f59', + '#99f2c8', + '#2ebf91', + '#F27121', + '#78ffd6', +] +export const directOption = [ + 'to right', + 'to left', + 'to top', + 'to bottom', + '45deg', + '90deg', + '75deg', + '15deg', + '60deg', +] diff --git a/2-Hex_Color/src/utils/document.js b/2-Hex_Color/src/utils/document.js new file mode 100644 index 0000000..c0c2ded --- /dev/null +++ b/2-Hex_Color/src/utils/document.js @@ -0,0 +1,2 @@ +export const $setProperty = ($target, startPoint, color) => + $target.style.setProperty(startPoint, color) From ec9a82b27c2b4141cb88025cf057e66d04dfc26a Mon Sep 17 00:00:00 2001 From: kimbangg Date: Fri, 10 Sep 2021 00:59:17 +0900 Subject: [PATCH 4/7] =?UTF-8?q?=20#=20fix=20:=201-Color=20=ED=99=94?= =?UTF-8?q?=EB=A9=B4=20=EC=97=90=EB=9F=AC=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 1-Colors/index.html | 3 ++- 1-Colors/src/css/style.css | 7 +++++++ 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/1-Colors/index.html b/1-Colors/index.html index 36f1921..1022c2c 100644 --- a/1-Colors/index.html +++ b/1-Colors/index.html @@ -4,7 +4,8 @@ - Auto Complete Editor + Random Color Change + diff --git a/1-Colors/src/css/style.css b/1-Colors/src/css/style.css index d8de305..97f38c1 100644 --- a/1-Colors/src/css/style.css +++ b/1-Colors/src/css/style.css @@ -1,3 +1,10 @@ +html, +body { + width: 100%; + height: 100vh; + overflow: hidden; +} + #app { width: 100%; height: 100vh; From e06f76f001fcc2205bce78fdb89fbae08fc7fe1a Mon Sep 17 00:00:00 2001 From: kimbangg Date: Fri, 10 Sep 2021 19:24:29 +0900 Subject: [PATCH 5/7] =?UTF-8?q?=20#=20feat=20:=203=20-=20Quote=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 3-Quote/index.html | 26 ++++++++ 3-Quote/src/css/reset.css | 129 +++++++++++++++++++++++++++++++++++++ 3-Quote/src/css/style.css | 59 +++++++++++++++++ 3-Quote/src/js/App.js | 15 +++++ 3-Quote/src/main.js | 7 ++ 3-Quote/src/service/api.js | 13 ++++ 6 files changed, 249 insertions(+) create mode 100644 3-Quote/index.html create mode 100644 3-Quote/src/css/reset.css create mode 100644 3-Quote/src/css/style.css create mode 100644 3-Quote/src/js/App.js create mode 100644 3-Quote/src/main.js create mode 100644 3-Quote/src/service/api.js diff --git a/3-Quote/index.html b/3-Quote/index.html new file mode 100644 index 0000000..d447afc --- /dev/null +++ b/3-Quote/index.html @@ -0,0 +1,26 @@ + + + + + + + + + + + + + +
+
+

+

+
+ +
+ + + + + + diff --git a/3-Quote/src/css/reset.css b/3-Quote/src/css/reset.css new file mode 100644 index 0000000..5bca465 --- /dev/null +++ b/3-Quote/src/css/reset.css @@ -0,0 +1,129 @@ +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; +} +body { + line-height: 1; +} +ol, +ul { + list-style: none; +} +blockquote, +q { + quotes: none; +} +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} +input:focus { + outline: none; +} +a { + color: inherit; + text-decoration: none; +} diff --git a/3-Quote/src/css/style.css b/3-Quote/src/css/style.css new file mode 100644 index 0000000..4f755b9 --- /dev/null +++ b/3-Quote/src/css/style.css @@ -0,0 +1,59 @@ +@import 'reset.css'; + +html, +body { + width: 100%; + height: 100vh; + overflow: hidden; +} + +.app { + width: 100%; + height: 100vh; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + background: linear-gradient(to right, #5d52a2, #3683b0, #5d52a2); +} + +.quote_wrapper { + width: 90%; + height: 42%; + display: flex; + flex-direction: column; + align-items: center; + border: 10px solid #06bdc1; + border-radius: 4px; + background-color: #f4edea; +} + +.quote_text { + width: 750px; + margin-top: 14.5%; + margin-left: 5%; + font-size: 26px; + line-height: 150%; + text-align: center; +} + +.quote_author { + margin-top: 5%; + font-size: 25px; +} + +button { + width: 140px; + height: 40px; + font-size: 16px; + margin-top: 3%; + color: white; + border: none; + border-radius: 4px; + background-color: #17a2b8; + outline: none; +} + +button:hover { + background-color: #138799; +} diff --git a/3-Quote/src/js/App.js b/3-Quote/src/js/App.js new file mode 100644 index 0000000..ea1852c --- /dev/null +++ b/3-Quote/src/js/App.js @@ -0,0 +1,15 @@ +import { request } from '../service/api.js' + +export default function App({ $target }) { + const $app = document.querySelector('.app') + const $text = document.querySelector('.quote_text') + const $author = document.querySelector('.quote_author') + const $button = document.querySelector('button') + + $button.addEventListener('click', async (e) => { + const { quote, author } = await request() + $text.innerText = '"' + quote + '"' + + $author.innerText = author ? '- ' + author : 'anonymous' + }) +} diff --git a/3-Quote/src/main.js b/3-Quote/src/main.js new file mode 100644 index 0000000..7c7b3a8 --- /dev/null +++ b/3-Quote/src/main.js @@ -0,0 +1,7 @@ +import App from './js/App.js' + +const $app = document.querySelector('#app') + +new App({ + $target: $app, +}) diff --git a/3-Quote/src/service/api.js b/3-Quote/src/service/api.js new file mode 100644 index 0000000..833839a --- /dev/null +++ b/3-Quote/src/service/api.js @@ -0,0 +1,13 @@ +export const request = async () => { + try { + const res = await fetch('https://free-quotes-api.herokuapp.com/') + + if (!res.ok) { + throw new Error('Fail to fetch API data') + } + + return await res.json() + } catch (e) { + alert(e.message) + } +} From 10170c0ecc4f61ad07fc83d2fe37acc87039e035 Mon Sep 17 00:00:00 2001 From: kimbangg Date: Fri, 10 Sep 2021 19:24:52 +0900 Subject: [PATCH 6/7] =?UTF-8?q?=20#=20feat=20:=20=EB=9E=9C=EB=8D=A4=20?= =?UTF-8?q?=EB=B3=80=EC=88=98=EB=AA=85=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 2-Hex_Color/src/js/App.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/2-Hex_Color/src/js/App.js b/2-Hex_Color/src/js/App.js index 897bb49..e2f0623 100644 --- a/2-Hex_Color/src/js/App.js +++ b/2-Hex_Color/src/js/App.js @@ -19,12 +19,12 @@ export default function App({ $target }) { direction, }, onChangeColor: () => { - const colorNum = Math.floor(Math.random() * leftOption.length) - const direcNum = Math.floor(Math.random() * directOption.length) + const colorRandomNum = Math.floor(Math.random() * leftOption.length) + const direcRandomNum = Math.floor(Math.random() * directOption.length) - const selectedLeft = leftOption[colorNum] - const selectedRight = rightOption[colorNum] - const selectedDirection = directOption[direcNum] + const selectedLeft = leftOption[colorRandomNum] + const selectedRight = rightOption[colorRandomNum] + const selectedDirection = directOption[direcRandomNum] this.setState({ left: selectedLeft, From b492841a9fcf90b99e8cb7154195d5fb104f98b4 Mon Sep 17 00:00:00 2001 From: kimbangg Date: Fri, 10 Sep 2021 19:26:20 +0900 Subject: [PATCH 7/7] =?UTF-8?q?=20#=20feat=20:=20quote=5Ftext=20=ED=81=AC?= =?UTF-8?q?=EA=B8=B0=20=EC=A1=B0=EC=A0=95:?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 3-Quote/src/css/style.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/3-Quote/src/css/style.css b/3-Quote/src/css/style.css index 4f755b9..579767e 100644 --- a/3-Quote/src/css/style.css +++ b/3-Quote/src/css/style.css @@ -18,7 +18,7 @@ body { } .quote_wrapper { - width: 90%; + width: 60%; height: 42%; display: flex; flex-direction: column; @@ -30,7 +30,7 @@ body { .quote_text { width: 750px; - margin-top: 14.5%; + margin-top: 12%; margin-left: 5%; font-size: 26px; line-height: 150%;