[Project1~3/박규란] Colors, Hex Colors, Quotes #5
Conversation
gyulhana
changed the title
gyulhana
changed the title
| colorBtn.addEventListener('click', () => { | ||
| onClick() | ||
| }) | ||
| } |
There was a problem hiding this comment.
- github에 올린 파일 끝에 ⛔ 요런 모양의 아이콘이 뜨는 이유는 마지막 줄을 개행을 하지 않아서 그런 건데요. 파일 끝에는 항상 개행을 해야한다고 해요. EOL(End of Line) 혹은 EOF(End of File)라고 하더라고요. 자세한 내용은 이 링크를 참고해보셔요.
There was a problem hiding this comment.
오오 항상 그 의미가 뭐지?!! 하고 궁금했었는데 경희님 덕에 알아갑니다! 감사해요❤
| <head> | ||
| <title>Colors</title> | ||
| <meta charset="utf-8"> | ||
| <link rel="shortcut icon" href="picker.png"> |
There was a problem hiding this comment.
파비콘 추가까지...! 규란님의 세심함에 감탄하고 갑니다 👍
| const picker = () => { | ||
| const hexString = '0123456789abcdef' | ||
| const pickIndex = () => Math.floor(Math.random() * 16) | ||
| const hexColorCode = () => { | ||
| let temp = '#' | ||
| for (let i = 0; i < 6; i++){ | ||
| const index = pickIndex() | ||
| temp += hexString[index] | ||
| } | ||
| return temp; | ||
| } | ||
| return hexColorCode(); | ||
| } |
There was a problem hiding this comment.
- 랜덤 색상 코드 생성하는 함수 보고 이렇게도 할 수 있구나 하고 인사이트를 얻어 갑니다! 저는 16777215까지 난수를 만들고 16진수로 바꿔주는 방식을 사용해서 6자리보다 작은 자리수의 난수가 반환되는 경우도 생기더라고요. 규란님 방식은 꼭 6자리가 나오니까 더 깔끔하게 코드 구현이 가능한 것 같네요!
| new ColorBtn({ | ||
| $target, | ||
| onClick: () => { | ||
| if (egg === 101) confirm("🎉 You've already clicked 100 times!\nDo you want to continue picking colors?") |
There was a problem hiding this comment.
앗, 이스터 에그를 숨겨 놓으셨군요 ㅎㅎㅎ 센스 넘치시네요 👍
| import { request } from "./api.js"; | ||
|
|
||
| export default function QuoteDetail({ target }) { | ||
| const quotearea = document.createElement("div"); |
There was a problem hiding this comment.
변수명 quotearea을 quoteArea와 같이 카멜 케이스로 작성해주면 더 좋을 것 같습니다! 👍
There was a problem hiding this comment.
오 세심하게 봐주시다니 감사합니다! 다음엔 멋진 변수 컨벤션으로 돌아오겠습니다. 꼼꼼한 피드백 감사해요!
| width: 98vw; | ||
| height: 98vh; |
There was a problem hiding this comment.
width와 height를 100이 아닌 98로 지정해주신 이유가 궁금합니다, 규란님!
There was a problem hiding this comment.
아 저도 이 부분이 궁금한데^_ㅠ 100으로 줘버리니까 갑자기 화면이 넘치는지 스크롤이 생겨버리더라고요 도대체 왜 그런 걸까요? 경희님 이유를 아시나요..? 이 지점에서 역시나 아직 CSS 부족한 부분이 많다는 걸 느끼게 되는 계기였습니다.
There was a problem hiding this comment.
body의 내장 스타일이 margin이 8px로 설정되어 있어서 스크롤이 생기는 것 같아요. 그런 기본적으로 내장되어 있는 스타일 때문에 레이아웃이 어그러지는 경우가 많아서 reset.css 같은 걸 이용해서 기본 스타일을 초기화해주곤 하는데요. 저는 요즘엔 귀찮아서 전체 선택자로 margin과 padding 정도만 0으로 초기화해서 씁니당..! 규란님 코드에선 우선 body만 margin: 0으로 초기화해주셔도 100vw, 100vh로 썼을 때 스크롤 안 생길 거예요!
🌈 Colors | 구현 화면
👩💻 구현 내용
display: grid;속성을 이용하여 구현버튼이 클릭 될 때마다 colorPicker함수가 실행 되어 난수 값을 생성하며
이를 통해 생성된 Hex Color Code를 body 영역의 background-color 값으로 부여한다.
🌈 Hex Colors | 구현 사이트
https://hex-colors-gradient.vercel.app/
📝 Random Quotes Generator | 구현 사이트
https://random-quotes-generator-mu.vercel.app/
