Skip to content

[Project2/조민철] Hex colors gradient #7

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 4 commits into
base: JSmini_datalater
Choose a base branch
from
Open

[Project2/조민철] Hex colors gradient #7

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ab58942
[02] Set up
datalater Sep 7, 2021
917df84
Change background
datalater Sep 7, 2021
31e9c5a
Use relative path instead of absolute one
datalater Sep 8, 2021
46f7258
fix: Error of generated hex color length less than 6
datalater Sep 14, 2021
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
18 changes: 18 additions & 0 deletions 02-hex-colors-gradient/.eslintrc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
module.exports = {
env: {
browser: true,
es2021: true,
},
extends: [
'airbnb-base',
],
plugins: [
'html',
],
parserOptions: {
ecmaVersion: 12,
sourceType: 'module',
},
rules: {
},
};
2 changes: 2 additions & 0 deletions 02-hex-colors-gradient/.gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
node_modules
.vscode
23 changes: 23 additions & 0 deletions 02-hex-colors-gradient/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
# TIL

## 랜덤 색상값 추출 방법 변경

이전:

* 10진수 rgba 사용
* rbga의 개별 값을 모두 랜덤으로 추출

```js
const randomColorValue = () => Math.floor(Math.random() * 256);

const randomColor = () => `rgba(${randomColorValue()}, ${randomColorValue()}, ${randomColorValue()}`;
```

변경:

- 16진수 hex color 사용
- 전체 값(`256**3`)에서 한번에 랜덤으로 추출

```js
const randomHexColor = () => `#${Math.floor(Math.random() * (256 ** 3)).toString(16)}`;
```
21 changes: 21 additions & 0 deletions 02-hex-colors-gradient/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
<!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" />
<title>02 Hex Colors Gradient</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="guide-message">
CLICK THE BUTTON BELLOW TO GENERATE A RANDOM GRADIENT HEX COLOR
COMBINATION
</div>
<div>
<div class="current-style"></div>
<button id="button">Click Me</button>
</div>
<script src="./main.js"></script>
</body>
</html>
24 changes: 24 additions & 0 deletions 02-hex-colors-gradient/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
const INITIAL_BODY_BACKGROUND = 'linear-gradient(to right, #ffffff, #ffffff)';

const $body = document.querySelector('body');
$body.style.background = INITIAL_BODY_BACKGROUND;

const $currentStyle = document.querySelector('.current-style');
$currentStyle.textContent = $body.style.background;

const $button = document.getElementById('button');

const randomHexColor = () => `#${Math.floor(Math.random() * (256 ** 3)).toString(16)}`;
Copy link
Member

Choose a reason for hiding this comment

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

256**3(16 ** 6) 으로도 6자리수의 16진수값을 생성할수 있겠네요! 저는 2번 프로젝트에서도 동일하게 r,g,b를 따로 처리했었습니다.

Copy link
Collaborator Author

@datalater datalater Sep 14, 2021 •
edited
Loading

Choose a reason for hiding this comment

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

넵 이번에는 rgb를 합친 전체 색상에 차례대로 인덱스를 붙인다고 생각하고 랜덤으로 인덱스를 선택하는 방식으로 처리해보았습니다ㅎㅎ

index color
0 #000000
1 #000001
... #...
256 ** 3 -1 #ffffff

그런데 지금 보니 이게 # 뒤에 16진수 값이 6자리가 안 만들어질 수도 있겠네요!!!! 수정해서 반영하겠습니다.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

46f7258

Copy link
Collaborator Author

@datalater datalater Sep 14, 2021 •
edited
Loading

Choose a reason for hiding this comment

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

제 예상과 다른 값이 발생하네요.

저는 256**3 = 16777216에 Math.random()을 곱하면 Math.random()의 최대값은 1미만이니까 절대 16777216은 안 나올줄 알았는데 아래와 같은 예외 케이스가 발생하네요

예외 케이스:

Math.floor(16777216 * 0.99999999999999999).toString(16)
// '1000000'

일단 원인을 좀 더 알아보고 코드를 수정하도록 하겠습니다.


$button.addEventListener('click', () => {
const currentColor = `linear-gradient(to right, ${randomHexColor()}, ${randomHexColor()})`;
$body.style.background = currentColor;
$currentStyle.textContent = currentColor;
});

const $guideMessage = document.querySelector('.guide-message');

setInterval(() => {
$guideMessage.classList.toggle('change-color');
$currentStyle.classList.toggle('change-color');
}, 2000);
Copy link
Member

Choose a reason for hiding this comment

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

애니메이션이 아니더라도 setInterval과 transition으로 애니메이션과 같은 효과를 줄수 있군요! 한가지 또 배워갑니다 ㅎ

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

오 애니메이션으로 하셨군요? 참고하러 보러가겠습니다 😀

Loading