-
Random HEX COLOR CODE 만들기TodayILearned/javascript 2021. 1. 25. 23:58
book.vanillacoding.co/starter-kit/step-4/mini-web-projects/background-changer
Background Changer
기간: 최대 3일
book.vanillacoding.co
를 참고하여 작성한 코드임을 밝힙니다.
Random HEXCOLOR CODE
CODE
HTML
더보기<!DOCTYPE html> <head> <meta charset="utf-8"> <title>Random color</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1 class="js_code code">What is this color?</h1> <form> <input type="button" value="CLICK ME"> </form> <script src="code.js"></script> </body>CSS
더보기body { display: flex; align-items: center; flex-direction: column; }javascript
const CODE = document.querySelector(".js_code"), INPUT = document.querySelector("input"), BODY = document.body; function getRandom(min,max){ return Math.floor(Math.random() * (max-min+1) + min); //Math.random() 함수는 0~1의 실수를 생성하며 1을 생성하지는 않는다, } function handleClick(){ const HEXCODE = [ CODE.innerText = `#` + getRandom(100000,999999) ] BODY.style.backgroundColor = `${HEXCODE}` } function getCode(event){ INPUT.addEventListener("click",handleClick); } function init(){ getCode(); } init();배운것 / 사용한것
javascript random 함수
innerText
addEventListner
Error/ETC.
추가적으로 알파벳이 들어가는 랜덤함수도 작성해야겠다.
'TodayILearned > javascript' 카테고리의 다른 글
The Complete JavaScript Course 2021(1) (0) 2021.06.22 랜덤한 알파벳과 숫자가 나오는 HEX CODE 작성하기 (0) 2021.01.29 airbnb JavaScript Style Guide 적용하여 코드 수정하기 (0) 2021.01.27 노마드 코딩 Momentum clone coding(1) (0) 2021.01.08 querySelector (0) 2020.12.23