분홍분홍 코딩 프로젝트

Issue 1. 새로고침 시 todo list의 기존 데이터가 신규 데이터에 덮어씌워지는 문제가 발생했다. ... const arr = []; ... 전역변수인 이 코드때문에 새로고침하면 기존 배열 안의 데이터가 초기화가 된다.. 나의 시도 시도1) 새로운 배열을 만들어 arr 변수의 데이터를 복사하여 todo 리스트를 저장하는 함수(saveTodo)의 인자값으로 넘겨준다. (((실패))) arr 초기화되면 newArr도 초기화됌.(이게 이전의 복사본을 잃어버리는 얕은 복사인가..!) 얕은 복사, 깊은 복사에 대해 한번 정리해야겠다. const newArr = arr; saveTodo(newArr); 시도2) application 이 실행될 때 const arr =[] 덕분에 다시 빈 배열에 값을 담게된..

만들고 싶은 것 태그를 오디오 파일과 연결 키를 눌렀을 때 css효과 주기 css효과 없애기 html data-key : div와 audio를 하나로 묶어주는 속성 (자판 별 key값은 keycode.info에서 확인) kbd : 키보드 입력, 음성 입력 등 임의의 장치를 사용한 사용자의 입력을 나타낸다. A clap S hihat D kick F openhat G boom H ride J snare K tom L tink Javascript window 객체에서 key가 눌렸을 때 함수 실행(audio play + css효과) key에 변형이 일어났을 때 각각의 key에 변형을 없애는 함수 실행. CSS transition : 전환 효과, 지속 시간; *hover을 이용해 길이 연장, 단축되는 시간 조..

구현할 것 내가 있는 곳의 경도와 위도 불러오기. 그 경도와 위도에 맞는 날씨 정보를 API에서 불러오기. 앞으로.. CSS를 이용하여 반짝뽀짝하게 만들기 다른 날씨 정보도 가져와보기. 만드는 방법 LS에 coords 정보의 유무에 따라 if문을 만든다. ( 1 ) 정보가 없을 때 -> 위도와 경도를 구해주는 함수 실행. ① 자신의 현재 위치를 가져오는 메소드 실행 navigator.geolocation.getCurrentPosition(Success 일 떄 함수1, Error 일 떄 함수2) ② 함수 1 -> latitude와 longitude를 구해주어 LS에 저장하는 함수 실행. *LS에 저장할 땐 어떻게? object 화! ③ 받아 온 lat, lon을 이용하여 API에서 데이터를 얻어올 함수 실..

화면 전환에 초점을 맞추어 만든 슬라이더. 좌우 버튼 같은 제어장치는 없지만 각 div 마다 다양한 이미지나 배경을 주면 여러모로 쓸모가 많을 것 같다. 배운 것 opacity(불투명성)와 z-index의 차이점. opacity는 각 속성을 0,1로 설정했을 떄 뒤에 오는 것이 겹쳐보이지 않는다. 아예 가린다는 말이다. 0,1 사이의 값으로 설정하면 흐릿하게 보이게 해주겠지. z-index는 택도 없다. 그냥 무대뽀다. nth-child( ) 는 형제 태그안에서 순서에 따라 선택시켜준다. ( ) 안에 even, odd를 넣을 수 있음. Javascript내에서 동일한 클라스 네임을 가진 아이들 중에 첫 번째 것을 선택하고 싶다면 .class_name : first-child See the Pen eYBy..

쉽다고 생각했는데 2시간이 걸린 Lv.1의 slider. 앞 날이 걱정되지만 어쩌랴. 조막만한 근자감이라도 갖고 헤쳐나가야지. 오늘도 고생했다. 내일 바로 Lv.2의 slider와 다른 프로젝트를 하나 더 만들 생각이다. todoList가 생각보다 진도가 안 나간다. 진득히 시간을 가져야하나. 앞으로.. html, css 숙달해야해 좀 더 복잡한 javascript 시도하기 만들 것. 양 옆으로 넘어가는 2개의 버튼을 JS로 제어해보기. 사진들이 한 자리에서만 나타나게 하기. 핵심 [html] - container > (slider+img) + prevBtn + nextBtn [css] - container와 같은 크기로 사진들을 맞추기 - absolute로 겹치기 - .showing 에 블록과 z-in..

만들고 싶은 것 1. 랜덤 숫자 출력 2. 무작위로 배경 드러내기 만드는 순서 1. 랜덤 숫자 만들기. 2. 추출된 숫자로 image 찝어내기. 3. body 전체에 image 보이게 하기 시작 genRandom( ) 함수에 숫자를 만들겁니다. 그 숫자를 이용하여 drawImage함수에서 무작위 이미지를 뽑아 올 계획이죠. function init(){ const randomNumber = genRandom(); drawImage(randomNumber); } init(); 1. 랜덤 숫자 만들기 필수 개념 Math.random( ) Math.ceil(소수점 올림) Math.floor(소수점 내림) console.log(Math.random()); // 0~1 사이의 아무 숫자나 출력 console.lo..