토이프로젝트라고하기 민망하지만..!
드디어 뭔가를 만들어보았다!!!
매일 아침 무슨 색 옷을 입을지 고민하는 사람들을 위한
오늘의 옷 컬러 추천 페이지~!~!~!~!
,,! 가 될 수 도 있는 아주 단순한 기능을 구현해보았다.
유데미 강의 중 버튼을 클릭할때마다 백그라운드 컬러가 달라지는 연습시간이 있었는데, 아주 살짝 바꿔서 옷 색상이 변하는 기능으로 수정해보았다.
하고싶었던 것들
- 버튼 클릭할때마다 옷 색깔을 랜덤하게 변경 & rgb값 보여주기
- 옷 색깔에 따라 배경색과 글씨색 바꾸기
1. 랜덤한 색 부여하기
const makeRandColor = () => {
const r = Math.floor(Math.random() * 255);
const g = Math.floor(Math.random() * 255);
const b = Math.floor(Math.random() * 255);
return `rgb(${r},${g},${b})`;
}-> rgb 값에 랜덤한 수를 부여하여 색상을 변경하였다.
-> 이렇게 하니까 랜덤한 색으로 바꾸는 것은 가능했지만, 구린 색도 나와서.. 아쉬웠다. 색상을 미리 저장해서 랜덤하게 해볼까 생각했지만 미래의 나에게 패스 ㅎ_ㅎ
2. 배경 및 글씨 색 바꾸기
const makeRandColor = () => {
const r = Math.floor(Math.random() * 255);
const g = Math.floor(Math.random() * 255);
const b = Math.floor(Math.random() * 255);
if(r+g+b < 200){
h1.style.color = 'black';
p.style.color = 'black';
document.body.style.backgroundColor = '#a7c5eb';
} else {
h1.style.color = 'white';
p.style.color = 'white';
document.body.style.backgroundColor = '#1e212d';
return `rgb(${r},${g},${b})`;
}-> rgb값이 0에 가까울수록 어두운 색이므로, rgb값의 합이 200보다 작으면 배경색을 밝게 글씨는 어둡게 만들었다.
->딱히 .. 예뻐보이지는 않는다. 으흠 그냥 다크모드전환이 가능한 기능을 넣는 것이 더 좋았을 것 같다.
3. 버튼을 클릭할때 변화주기
const button = document.querySelector('button');
const h1 = document.querySelector(`h1`);
const p = document.querySelector('p');
button.addEventListener('click', function(){
const newColor = makeRandColor();
document.getElementById('icon').setAttribute('style', `color : ${newColor}`)
p.innerText = `${newColor}입니다!`;
h1.innerText = '오늘의 pick은';
}) -
innerText로 클릭할때마다 rgb값이 바뀌는 것을 보여주었다.
-> html에 쓰지 않아도 화면에 보이는 게 신기했다. 자바스크립트만능설이 이런 곳에서 나오는 건가..! 제발 만능적인 기능을 다 구현할 수 있는 실력이 되고싶다...아허ㅏ넣미나어ㅣ나ㅓ -
가장 오랜 시간이 걸렸던 아이콘 색상 변경하기!!!
-> 티셔츠 이미지는 Font Awesome에서 가져온 아이콘인데, 유일하게 querySelector를 사용하지 못했다. 아직까지도 왜 실패했는지 이유를 모르겠다..const icon = document.querySelector('#icon'); icon.style.color = '옷색깔!!!'이런 식으로 색상을 바꾸고 싶었는데 아무리 해도 적용이 되지 않아서 getElementById로 속성을 변경했다. 혹시나 정의한 icon이 잘못된건가 싶어서 콘솔로그로 출력해도 보았는데 아무 문제가 없었다. 왜때문에 틀렸는지 아무도 몰라~~ 나도 몰라~~ 모르면 안되는데에~~왜 안된건지 알고싶다..
