한 걸음씩

[요구사항] 초기값은 0 DECREASE 버튼을 누르면 1씩 감소 INCREASE 버튼을 누르면 1씩 증가 RESET 버튼을 누르면 0으로 초기화 // index.html Counter 0 DECREASE RESET INCREASE // app.js const count = document.querySelector('span') const decre = document.querySelector('button:first-child') const reset = document.querySelector('button:nth-of-type(2)') const incre = document.querySelector('button:last-child') function onReset(){ count.textCont..

[요구사항] 버튼을 클릭할 때마다 배경색이 랜덤으로 지정되고 무슨 색상인지 화면에 표시하기 // index.html Color Flipper Hex Background Color : #ffffff CLICK ME body의 배경색 초기색상은 #ffffff으로 지정해 준다. // app.js const body = document.querySelector('body') const hex = document.querySelector('nav div:first-child') const btn = document.querySelector('button') const colorText = document.querySelector('.color-text') const colors = [0, 1, 2, 3, 4, 5..

TMI. 이전에 투두리스트를 만들고 깃허브에 업로드를 했었는데 로컬 스토리지에 저장은 되지만 불러오기를 구현을 못했었는데 코드를 짤 때 할 일을 생성하는 코드와 할 일을 화면에 보여주는 코드를 하나의 함수에 작성해서 로컬 스토리지에서 불러오려면 거의 코드를 새로 짜야하는 상황이었다. 간단히 말해 함수 분리를 잘못해서 구현을 못한 것... 그래서 다시 새로 구현했다. // index.html To Do List 이전 투두리스트 만들었을 때는 input태그와 button 태그 전부 따로 만들었고 이벤트 리스너도 각각 만들어줬어야했는데 이번에는 form태그를 사용했다. form 태그는 input에서 text를 입력하고 enter만으로 서버에 데이터를 보내기 때문에 편리하다. // index.js const t..

▷ Date 시간을 가져오는 방법은 객체, 반복문을 다룰 줄 알면 굉장히 간단하다. // Date const dateElement = document.querySelector('.date') function todayIsDate(){ let today = new Date() // Date 객체 생성 const year = today.getFullYear() // 년도 const date = today.getDate() // 일 const month = today.getMonth() + 1 // 월 const day = today.getDay() // 요일 // 요일을 객체로 변환 // 왜? getDay로 받아오면 요일을 0부터 6까지 숫자로 받아오기 때문 dayObj = { 0 : 'Sun', 1 : '..

2023.06.30 - [JS] - [JS] Canvas [JS] Canvas ▷ canvas HTML 태그를 사용하려면 body 안에 canvas 태그를 아래와 같이 넣어줘야 한다. // index.html ▷ css 파일에서 canvas 사이즈를 정하고 테두리를 만들어 준다. // styles.css canvas{ width: 700; height: 700; bord winter17.tistory.com 코드에 대한 설명은 모두 주석에! // index.html Fill Clear Erase // 여기서부터 코드 확인하기 Add Photo Save 1. 위의 링크와 비교해서 달라진 점은 태그 구조가 바뀌었다. → css 작업할 때 편하게 작업하고 스타일을 이쁘게 만들기 위해서 2. 파일을 열어서 이미..