Skip to content

Palsa131/hex colors gradient #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
Open

Palsa131/hex colors gradient #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
7e49247
feat: 버튼 클릭 시 배경색 임의의 linear-gradient 색상으로 변경 하도록 구현
Feb 2, 2022
db7b6dc
안내 문구, 현재 배경색상 정보 문구 추가
Feb 2, 2022
531a1db
bugfix: 16진수로 변환한 결과값이 1자리 인 경우 앞에 0 추가하도록 수정
Feb 2, 2022
7aaaec1
typo: button의 onClick 보기 편하도록 줄바꿈 수정
Feb 2, 2022
98bbe74
fix: this.render에 들어있지 않아도 되는 요소 분리
Feb 2, 2022
a96b1b2
style: text에 css animation적용
Feb 2, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 14 additions & 0 deletions palsa131/HexColorsGradient/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="./src/main.css" rel="stylesheet">
<title>HexColorsGradient</title>
</head>
<body>
<main id="app"></main>
<script src="./src/main.js" type="module"></script>
</body>
</html>
48 changes: 48 additions & 0 deletions palsa131/HexColorsGradient/src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
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');
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);

this.render = ()=>{
backgroundInfoTextEl.textContent = `background: linear-gradient(to right, ${this.state.linearGradient[0]}, ${this.state.linearGradient[1]});`
}

const button = new Button({
targetEl,
initialState:{
value: 'Change!!'
},
onClick: ()=>{
const linearGradient = Array(2).fill(0)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

랜덤 16진수를 만드는 함수가 따로 있더라구요..!

const randomHexColor = () => `#${Math.round(Math.random() * 0xffffff).toString(16)}`;

참고하면 좋을것 같습니다!

.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);
},
})

this.render();
}

18 changes: 18 additions & 0 deletions palsa131/HexColorsGradient/src/Button.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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)
}
49 changes: 49 additions & 0 deletions palsa131/HexColorsGradient/src/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
body{
margin:0;
font-size: 16px;
}
#app{
width: 100vw;
height: 100vh;
display:flex;
flex-direction: column;
justify-content: center;
}
#app > button{
border-width: 1px;
border-radius: 4px;
padding: 0.25rem 0.75rem;
align-self: center;
background-color: #fff;
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%);
}
.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 }
}
5 changes: 5 additions & 0 deletions palsa131/HexColorsGradient/src/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import App from './App.js'

const targetEl = document.querySelector('#app')

new App({targetEl})