From 7e49247672a4764a28694fa16d16eb6fa4a88d65 Mon Sep 17 00:00:00 2001 From: Jeong Ho Date: Wed, 2 Feb 2022 21:34:06 +0900 Subject: [PATCH 1/6] =?UTF-8?q?feat:=20=EB=B2=84=ED=8A=BC=20=ED=81=B4?= =?UTF-8?q?=EB=A6=AD=20=EC=8B=9C=20=EB=B0=B0=EA=B2=BD=EC=83=89=20=EC=9E=84?= =?UTF-8?q?=EC=9D=98=EC=9D=98=20=20linear-gradient=20=EC=83=89=EC=83=81?= =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=EB=B3=80=EA=B2=BD=20=ED=95=98=EB=8F=84?= =?UTF-8?q?=EB=A1=9D=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- palsa131/HexColorsGradient/index.html | 14 ++++++++++ palsa131/HexColorsGradient/src/App.js | 15 ++++++++++ palsa131/HexColorsGradient/src/Button.js | 18 ++++++++++++ palsa131/HexColorsGradient/src/main.css | 35 ++++++++++++++++++++++++ palsa131/HexColorsGradient/src/main.js | 5 ++++ 5 files changed, 87 insertions(+) create mode 100644 palsa131/HexColorsGradient/index.html create mode 100644 palsa131/HexColorsGradient/src/App.js create mode 100644 palsa131/HexColorsGradient/src/Button.js create mode 100644 palsa131/HexColorsGradient/src/main.css create mode 100644 palsa131/HexColorsGradient/src/main.js diff --git a/palsa131/HexColorsGradient/index.html b/palsa131/HexColorsGradient/index.html new file mode 100644 index 0000000..9c3ddee --- /dev/null +++ b/palsa131/HexColorsGradient/index.html @@ -0,0 +1,14 @@ + + + + + + + + HexColorsGradient + + +
+ + + \ No newline at end of file diff --git a/palsa131/HexColorsGradient/src/App.js b/palsa131/HexColorsGradient/src/App.js new file mode 100644 index 0000000..ed79256 --- /dev/null +++ b/palsa131/HexColorsGradient/src/App.js @@ -0,0 +1,15 @@ +import Button from "./Button.js" +export default function App({targetEl}){ + + const button = new Button({ + targetEl, + initialState:{ + value: 'Change!!' + }, + onClick: ()=>{ + const linearGradient = Array(2).fill(0).map(()=> Array(3).fill(0).map(()=>Math.floor(Math.random() * 256).toString(16)).join('')) + targetEl.style.background = `linear-gradient(to right,#${linearGradient[0]},#${linearGradient[1]})`; + }, + }) +} + diff --git a/palsa131/HexColorsGradient/src/Button.js b/palsa131/HexColorsGradient/src/Button.js new file mode 100644 index 0000000..0e82456 --- /dev/null +++ b/palsa131/HexColorsGradient/src/Button.js @@ -0,0 +1,18 @@ +export default function Button({targetEl, initialState, onClick}){ + const elButton = document.createElement('button') + + this.state = initialState + + this.setState = (nextState)=>{ + this.state = nextState + this.render() + } + + elButton.textContent = this.state.value + + elButton.addEventListener('click',onClick) + + this.render = ()=>{} + + targetEl.appendChild(elButton) +} \ No newline at end of file diff --git a/palsa131/HexColorsGradient/src/main.css b/palsa131/HexColorsGradient/src/main.css new file mode 100644 index 0000000..b3c8736 --- /dev/null +++ b/palsa131/HexColorsGradient/src/main.css @@ -0,0 +1,35 @@ +body{ + margin:0; + font-size: 16px; +} +#app{ + width: 100vw; + height: 100vh; + display:flex; + justify-content: center; +} +#app > button{ + border-width: 1px; + border-radius: 4px; + padding: 0.25rem 0.75rem; + align-self: center; + background-color: inherit; + color: #343a40; + border-color: #343a40; + cursor: pointer; + line-height: 1.5; + text-align: center; + font-weight: 400; + font-size: 1rem; + box-shadow: none; +} +#app > button:hover{ + background-color: #343a40; + color: white; + transition: ease-out,background-color .15s + ease-in-out,border-color .15s + ease-in-out,box-shadow .15s; +} +#app > button:focus{ + box-shadow: 0 0 0 0.2rem rgb(52 58 64 / 50%);; +} \ No newline at end of file diff --git a/palsa131/HexColorsGradient/src/main.js b/palsa131/HexColorsGradient/src/main.js new file mode 100644 index 0000000..1bf1d73 --- /dev/null +++ b/palsa131/HexColorsGradient/src/main.js @@ -0,0 +1,5 @@ +import App from './App.js' + +const targetEl = document.querySelector('#app') + +new App({targetEl}) \ No newline at end of file From db7b6dcd4df2f85001389eee76941934a997c35e Mon Sep 17 00:00:00 2001 From: Jeong Ho Date: Wed, 2 Feb 2022 21:43:07 +0900 Subject: [PATCH 2/6] =?UTF-8?q?=EC=95=88=EB=82=B4=20=EB=AC=B8=EA=B5=AC,=20?= =?UTF-8?q?=ED=98=84=EC=9E=AC=20=EB=B0=B0=EA=B2=BD=EC=83=89=EC=83=81=20?= =?UTF-8?q?=EC=A0=95=EB=B3=B4=20=EB=AC=B8=EA=B5=AC=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- palsa131/HexColorsGradient/src/App.js | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/palsa131/HexColorsGradient/src/App.js b/palsa131/HexColorsGradient/src/App.js index ed79256..cace2a9 100644 --- a/palsa131/HexColorsGradient/src/App.js +++ b/palsa131/HexColorsGradient/src/App.js @@ -1,5 +1,25 @@ import Button from "./Button.js" export default function App({targetEl}){ + + this.state ={ + linearGradient: ['#ffffff','#ffffff'], + }; + + this.setLinearGradient = (nextState)=>{ + this.state.linearGradient = nextState; + this.render(); + } + + const guideTextEl = document.createElement('h1'); + const backgroundInfoTextEl = document.createElement('h2'); + + this.render = ()=>{ + guideTextEl.textContent = 'CLICK THE BUTTON BELLOW TO GENERATE A RANDOM GRADIENT HEX COLOR COMBINATION' + backgroundInfoTextEl.textContent = `background: linear-gradient(to right, ${this.state.linearGradient[0]}, ${this.state.linearGradient[1]});` + + targetEl.appendChild(guideTextEl); + targetEl.appendChild(backgroundInfoTextEl); + } const button = new Button({ targetEl, @@ -9,7 +29,10 @@ export default function App({targetEl}){ onClick: ()=>{ const linearGradient = Array(2).fill(0).map(()=> Array(3).fill(0).map(()=>Math.floor(Math.random() * 256).toString(16)).join('')) targetEl.style.background = `linear-gradient(to right,#${linearGradient[0]},#${linearGradient[1]})`; + this.setLinearGradient(linearGradient); }, }) + + this.render(); } From 531a1db8c7cc1258941be1fe485464d5a84c86a6 Mon Sep 17 00:00:00 2001 From: Jeong Ho Date: Wed, 2 Feb 2022 21:50:24 +0900 Subject: [PATCH 3/6] =?UTF-8?q?bugfix:=2016=EC=A7=84=EC=88=98=EB=A1=9C=20?= =?UTF-8?q?=EB=B3=80=ED=99=98=ED=95=9C=20=EA=B2=B0=EA=B3=BC=EA=B0=92?= =?UTF-8?q?=EC=9D=B4=201=EC=9E=90=EB=A6=AC=20=EC=9D=B8=20=EA=B2=BD?= =?UTF-8?q?=EC=9A=B0=20=EC=95=9E=EC=97=90=200=20=EC=B6=94=EA=B0=80?= =?UTF-8?q?=ED=95=98=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- palsa131/HexColorsGradient/src/App.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/palsa131/HexColorsGradient/src/App.js b/palsa131/HexColorsGradient/src/App.js index cace2a9..108816f 100644 --- a/palsa131/HexColorsGradient/src/App.js +++ b/palsa131/HexColorsGradient/src/App.js @@ -27,7 +27,12 @@ export default function App({targetEl}){ value: 'Change!!' }, onClick: ()=>{ - const linearGradient = Array(2).fill(0).map(()=> Array(3).fill(0).map(()=>Math.floor(Math.random() * 256).toString(16)).join('')) + const linearGradient = Array(2).fill(0).map(()=> Array(3).fill(0) + .map((value)=>{ + value = Math.floor(Math.random() * 256).toString(16) + if (value.length === 2) return value; + return '0' + value; + }).join('')) targetEl.style.background = `linear-gradient(to right,#${linearGradient[0]},#${linearGradient[1]})`; this.setLinearGradient(linearGradient); }, From 7aaaec11d912174218fb66fcbe65b2edf4ba34c6 Mon Sep 17 00:00:00 2001 From: Jeong Ho Date: Wed, 2 Feb 2022 21:53:39 +0900 Subject: [PATCH 4/6] =?UTF-8?q?typo:=20button=EC=9D=98=20onClick=20?= =?UTF-8?q?=EB=B3=B4=EA=B8=B0=20=ED=8E=B8=ED=95=98=EB=8F=84=EB=A1=9D=20?= =?UTF-8?q?=EC=A4=84=EB=B0=94=EA=BF=88=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- palsa131/HexColorsGradient/src/App.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/palsa131/HexColorsGradient/src/App.js b/palsa131/HexColorsGradient/src/App.js index 108816f..9ed8fb0 100644 --- a/palsa131/HexColorsGradient/src/App.js +++ b/palsa131/HexColorsGradient/src/App.js @@ -27,12 +27,14 @@ export default function App({targetEl}){ value: 'Change!!' }, onClick: ()=>{ - const linearGradient = Array(2).fill(0).map(()=> Array(3).fill(0) + const linearGradient = Array(2).fill(0) + .map(()=> Array(3).fill(0) .map((value)=>{ value = Math.floor(Math.random() * 256).toString(16) if (value.length === 2) return value; return '0' + value; - }).join('')) + }) + .join('')) targetEl.style.background = `linear-gradient(to right,#${linearGradient[0]},#${linearGradient[1]})`; this.setLinearGradient(linearGradient); }, From 98bbe7464db3095c83286e8f3f16d1b9042a7c61 Mon Sep 17 00:00:00 2001 From: Jeong Ho Date: Wed, 2 Feb 2022 21:56:28 +0900 Subject: [PATCH 5/6] =?UTF-8?q?fix:=20this.render=EC=97=90=20=EB=93=A4?= =?UTF-8?q?=EC=96=B4=EC=9E=88=EC=A7=80=20=EC=95=8A=EC=95=84=EB=8F=84=20?= =?UTF-8?q?=EB=90=98=EB=8A=94=20=EC=9A=94=EC=86=8C=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- palsa131/HexColorsGradient/src/App.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/palsa131/HexColorsGradient/src/App.js b/palsa131/HexColorsGradient/src/App.js index 9ed8fb0..4eabe20 100644 --- a/palsa131/HexColorsGradient/src/App.js +++ b/palsa131/HexColorsGradient/src/App.js @@ -11,14 +11,15 @@ export default function App({targetEl}){ } const guideTextEl = document.createElement('h1'); + guideTextEl.textContent = 'CLICK THE BUTTON BELLOW TO GENERATE A RANDOM GRADIENT HEX COLOR COMBINATION' + const backgroundInfoTextEl = document.createElement('h2'); + + targetEl.appendChild(guideTextEl); + targetEl.appendChild(backgroundInfoTextEl); this.render = ()=>{ - guideTextEl.textContent = 'CLICK THE BUTTON BELLOW TO GENERATE A RANDOM GRADIENT HEX COLOR COMBINATION' backgroundInfoTextEl.textContent = `background: linear-gradient(to right, ${this.state.linearGradient[0]}, ${this.state.linearGradient[1]});` - - targetEl.appendChild(guideTextEl); - targetEl.appendChild(backgroundInfoTextEl); } const button = new Button({ From a96b1b2bf6df35626c0973558f5493ddfc9766d0 Mon Sep 17 00:00:00 2001 From: Jeong Ho Date: Wed, 2 Feb 2022 22:09:52 +0900 Subject: [PATCH 6/6] =?UTF-8?q?style:=20text=EC=97=90=20css=20animation?= =?UTF-8?q?=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- palsa131/HexColorsGradient/src/App.js | 4 +++- palsa131/HexColorsGradient/src/main.css | 18 ++++++++++++++++-- 2 files changed, 19 insertions(+), 3 deletions(-) diff --git a/palsa131/HexColorsGradient/src/App.js b/palsa131/HexColorsGradient/src/App.js index 4eabe20..2920418 100644 --- a/palsa131/HexColorsGradient/src/App.js +++ b/palsa131/HexColorsGradient/src/App.js @@ -11,10 +11,12 @@ export default function App({targetEl}){ } const guideTextEl = document.createElement('h1'); + guideTextEl.className = 'gradientText' guideTextEl.textContent = 'CLICK THE BUTTON BELLOW TO GENERATE A RANDOM GRADIENT HEX COLOR COMBINATION' const backgroundInfoTextEl = document.createElement('h2'); - + backgroundInfoTextEl.className = 'gradientText' + targetEl.appendChild(guideTextEl); targetEl.appendChild(backgroundInfoTextEl); diff --git a/palsa131/HexColorsGradient/src/main.css b/palsa131/HexColorsGradient/src/main.css index b3c8736..32c71b5 100644 --- a/palsa131/HexColorsGradient/src/main.css +++ b/palsa131/HexColorsGradient/src/main.css @@ -6,6 +6,7 @@ body{ width: 100vw; height: 100vh; display:flex; + flex-direction: column; justify-content: center; } #app > button{ @@ -13,7 +14,7 @@ body{ border-radius: 4px; padding: 0.25rem 0.75rem; align-self: center; - background-color: inherit; + background-color: #fff; color: #343a40; border-color: #343a40; cursor: pointer; @@ -31,5 +32,18 @@ body{ ease-in-out,box-shadow .15s; } #app > button:focus{ - box-shadow: 0 0 0 0.2rem rgb(52 58 64 / 50%);; + box-shadow: 0 0 0 0.2rem rgb(52 58 64 / 50%); +} +.gradientText { + text-align: center; + align-self: center; + animation: color-change 5s infinite alternate; +} +@keyframes color-change { + 0% { color: #fff } + 20% { color: #ccc } + 40% { color: #999 } + 60% { color: #666 } + 80% { color: #333 } + 100% { color: #fff } } \ No newline at end of file