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 4 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>Ramdon Color</title>
Copy link
Member

Choose a reason for hiding this comment

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

깨알같은 부분이지만.. title에 오타가 있군요!

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

랜돈 컬러 ㅋㅋㅋ 매의 눈 감사합니다~~ 변경해서 반영하겠습니다

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.

3a0b1b7

<link rel="stylesheet" href="style.css" />
</head>
<body>
<button id="button">Click Me!</button>
Copy link
Member

@AlangGY AlangGY Sep 13, 2021 •
edited
Loading

Choose a reason for hiding this comment

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

혹시 button에 class가 아닌 id 값을 넣으신 특별한 이유가 있을까요?
저는 정말 고유한 상황 ( 유일한 값 데이터) 이 아니라면, 이런 상황에서 class를 사용하는 편이라, id를 선택하신 이유가 궁금합니다.
해당 구현에는 button이 한개 뿐이기에 영향이 없겠지만,
id에는 조금 더 고유한 값을 넣는것이 좋다고 알고있어요. css에서 해당 id값을 선택자로 하여 다루고 계시는데, 이상황에서 만약 button이 여러개라면, button의 css속성을 일괄적으로 다루는데 어려움이 있지 않을까 싶습니다. 그렇기때문에 저는 css 재사용성 부분에 있어 class를 사용하는 것이 더 적합하지 않을까 생각했습니다.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

이번 프로젝트에서는 버튼이 하나인 게 명확해서 id 속성을 선택했습니다.

하지만 말씀하신 대로 재사용성을 고려하면 class 속성을 사용하는 게 더 적합하다는 것에 저도 동의합니다! 다음에도 같은 상황이 오면 class를 사용하는 게 확장 가능성 측면에서 더 낫다는 생각이 드네요ㅎㅎ

수정해서 반영하겠습니다!

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

fa66e54

<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.getElementById('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