Skip to content

[Project1~3/이경미] Colors, Hex-Colors-Gradient, Quote Generator #15

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

[Project1~3/이경미] Colors, Hex-Colors-Gradient, Quote Generator #15

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
f0c7052
project1 colors 추가
goumi1009 Sep 7, 2021
07c5fc0
HexColorsGradient
goumi1009 Sep 12, 2021
20bc236
Quote Generator
goumi1009 Sep 12, 2021
33a955c
Update README.md
rt-mingming Sep 13, 2021
aac9afe
Merge branch 'prgrms-web-devcourse:main' into JSmini-goumi1009
goumi1009 Sep 16, 2021
15c4b9c
Merge branch 'JSmini-goumi1009' of https://github.com/goumi1009/FE-JS…
goumi1009 Sep 16, 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
16 changes: 16 additions & 0 deletions Colors/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<!DOCTYPE html>
<html lang="ko">
<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 rel="stylesheet" href="style.css" />
<title>Colors</title>
</head>
<body>
<div class="container">
<button type="button">Click Me!</button>
</div>
<script src="script.js"></script>
</body>
</html>
12 changes: 12 additions & 0 deletions Colors/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
const colors = ['SpringGreen', 'DarkGreen', 'SlateBlue', 'Salmon', 'Gold', 'DarkKhaki', 'BlueViolet', 'OliveDrab', 'LightSteelBlue', 'Chocolate', 'SandyBrown', 'AliceBlue']
const button = document.querySelector('button')

button.addEventListener('click', e => {
const containerElement = e.target.closest('.container')
containerElement.style.backgroundColor = randomColor(colors)
Copy link
Member

@gyulhana gyulhana Sep 15, 2021 •
edited
Loading

Choose a reason for hiding this comment

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

document.body.style.backgroundColor = randomColor(colors)

라고 쓸 수도 있었을 것 같은데 container라는 클래스를 가진 div를 따로 생성하고 closest를 통해 요소를 선택하신 이유가 있는지 궁금합니다!

Copy link
Collaborator Author

@goumi1009 goumi1009 Sep 15, 2021 •
edited
Loading

Choose a reason for hiding this comment

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

아 그러네요... 퍼블리셔하면서 생긴 습관 같아요. body에 직접 스타일을 주게 되면 후에 변경이나 추가 해야 하는 상황에서 난감한 일을 몇번 격었더니 body는 그냥 페이지가 그려지는 공간이라고 생각하고 그냥 두게 되더라고요.
하지만 지금 같은 상황에서는 그냥 body에 style 입히는 것도 좋았겠네요! 좋은 질문 감사합니다!
덕분에 생각없이 쓰는 코드에 대해 생각해보게 되었습니다! 😁👍

})

const randomColor = (colors) => {
const randomNum = Math.floor(Math.random() * colors.length)
return colors[randomNum]
}
30 changes: 30 additions & 0 deletions Colors/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
body {
margin: 0;
padding: 0;
}
.container {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
background-color: AliceBlue;
}

.container button {
padding: 16px 32px;
border: 1px solid #000;
border-radius: 3px;
background: transparent;
font-size: 18px;
}

.container button:focus {
outline: 0;
box-shadow: 0px 0px 0px 3px rgba(0, 0, 0, 0.3);
}

.container button:hover {
background-color: #000;
color: #fff;
}