본문 바로가기

전체 글116

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. modal * 노마드코더 영상을 참고하여 만들었습니다. 열기 I'm a modal ❌ const openModal = document.querySelector("#btn"); const modal = document.querySelector(".modal"); const overLay = modal.querySelector(".modal_overlay"); const close = modal.querySelector("button"); function openHandle() { modal.classList.remove("hidden"); } function closeHandle() { modal.classList.add("hidden"); } // const openHandle = () => { // modal.c.. 2023. 1. 7.
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.

티스토리툴바