본문 바로가기

바닐라 JS4

Vanilla JS. 로또 추첨기(while) + 추가ver. for 하라는 공부는 안하고 로또 추첨기를 만들고 있는 내가 레전드 먼저, 버튼을 눌러서 번호가 출력되게 html파일에 기본적인 기능만 세팅을 해줍니다. START 그 다음에 app.js파일에 const start = document.querySelector("#start"); const result = document.querySelector("#result"); start.addEventListener("click", startLotto); start와 result를 불러와서 변수로 설정 한 후에 click 이벤트를 수신하고 startLotto 함수를 트리거하는 start에 이벤트 리스너를 추가합니다. function startLotto() { const lottoNumbers = []; }; startLo.. 2023. 3. 1.
Vanilla JS. D-day(feat. fixed) * 노마드코더 강의를 보고 만든 고정된 날짜 값에 대한 디데이를 만들었다가, 고정된 값이 아닌 입력값을 기반으로 만들어 보면 어떨까해서 유동적으로 입력값을 넣으면 계산되는 디데이 계산기도 만들어 보았다.(이건 다음 시간에) * 오늘은 고정된 값에 대한 것만 업로드. 2023 크리스마스 const clock = document.querySelector("#clock"); function Dday() { const target = new Date("2023-12-25"); // 고정된 날짜 값 const today = new Date(); // 현재 시간 const diff = target - today; const d = Math.floor(diff / (1000*60*60*24)); /* 처음 봤을 때 .. 2023. 1. 10.
Vanilla JS. select box (feat. link)_수정 * 드롭다운 메뉴를 만들려다가 현실에 타협하고 셀렉트 박스를 만들어봤습니다. (조만간에 다시 도전) =Select Link= 네이버 구글 유튜브 const select = document.querySelector(".select"); /* function selectLink() { const selectLink = document.querySelector(".select"); window.open(selectLink.value); } */ //이게 기존이었는데, 생각해보니까 전연변수에 select를 선언해놨는데 따로 만들 필요가 없었네요. function selectLink() { window.open(select.value); } select.addEventListener("change", select.. 2023. 1. 9.
Vanilla JS. background color random change(feat. gradation) * 버튼을 눌리면 정해진 색깔들을 랜덤으로 조합해 배경화면 색깔이 변화면서 그라데이션 효과를 대각선으로 주게 만들었습니다. Change const colorChange = document.querySelector("#btn"); function changeHandle() { const colors = [ "#ef5777", "#575fcf", "#4bcffa", "#34e7e4", "#0be881", "#f53b57", "#3c40c6", "#0fbcf9", "#00d8d6", "#05c46b", "#ffc048", "#ffdd59", "#ff5e57", "#d2dae2", "#485460", "#ffa801", "#ffd32a", "#ff3f34" ] const changeColors = colors[.. 2023. 1. 6.

티스토리툴바