Skip to content

[Project1/조민철] Colors #6

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

[Project1/조민철] Colors #6

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
13d7dd1
Set up
datalater Sep 6, 2021
346be0f
Add a button to change background color randomly
datalater Sep 6, 2021
d8ff78d
Make subdirectory for project
datalater Sep 7, 2021
03b312e
Use relative path
datalater Sep 8, 2021
3a0b1b7
Fix typo
datalater Sep 14, 2021
fa66e54
refactor: use class attribute in button
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
15 changes: 15 additions & 0 deletions 01-colors/.eslintrc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
module.exports = {
env: {
browser: true,
es2021: true,
},
extends: [
'airbnb-base',
],
parserOptions: {
ecmaVersion: 12,
sourceType: 'module',
},
rules: {
},
};
2 changes: 2 additions & 0 deletions 01-colors/.gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
node_modules/
.vscode
0 README.md → 01-colors/README.md
View file
Open in desktop
File renamed without changes.
14 changes: 14 additions & 0 deletions 01-colors/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" />
<title>Ramdom Color</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<button class="click-button">Click Me!</button>
<script src="./main.js"></script>
</body>
</html>
11 changes: 11 additions & 0 deletions 01-colors/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
const $button = document.querySelector('.click-button');

const $body = document.querySelector('body');

const randomColorValue = () => Math.floor(Math.random() * 256);
Copy link
Member

Choose a reason for hiding this comment

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

제가 알기로는, Math.random()은 0이상 1미만의 난수를 생성하는것으로 알고있습니다.
그렇기 때문의 Math.random()*256으로는 256이라는 숫자는 나올수 없을거에요.
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Math/random
해당 MDN 문서 참고해보셔도 좋을것같아요.

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.

아, 이게 최대값이 255여서 난수 0~1미만으로 곱셈한 결과가 최소값 0부터 최대 255까지 나오도록 256으로 했습니다.

Copy link
Member

Choose a reason for hiding this comment

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

앗...! 그렇네요ㅋㅋ 잠시 최대값이 256이라고 생각했습니다.


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

$button.addEventListener('click', () => {
$body.style.backgroundColor = randomColor();
});
Loading