프로젝트48 [나만의 Home Page] 갤러리 구현하기 이미지 주소를 입력하면 화면에 드러내는 갤러리를 만들었다. 그리고 버튼을 통해 갤러리 속 사진을 확인할 수 있고, 삭제할 수도 있다. 동기부여 할 수 있는 사진, 가고 싶은 곳, 외우고 싶은 개념 등 원하는 사진을 볼 수 있어 좋다. 기술 - 입력받은 이미지 주소를 js 파일의 links 배열과 localStorage에 저장한다. - 현재 보이는 이미지를 저장한 글로벌 변수 chosenImg를 정의한다. - chosenImg를 활용하여, 버튼의 클릭에 따라 이미지를 삭제하거나 배열에 저장된 순서대로 이미지를 표시한다. - 새로 고침할 때, 이미지를 삭제할 때 Math를 이용하여 랜덤으로 이미지를 표시한다. 디버깅 함 1. 이미지에도 border-radius를 설정했다. 2. 아래처럼 input-form을.. 2023. 1. 29. [나만의 Home Page] 할 일 목록 만들기 할 일을 입력하면 목록에 추가된다. 그리고 옆의 x 버튼을 누르면 해당 할 일이 삭제된다. 기술 - 할 일 목록을 localStorage에 저장한다. - 할 일 목록을 localStorage에서 불러온다. - 할 일은 createElement(), appendChild()를 통해 화면에 나타낸다. - 할 일은 Date.now()를 이용하여 고유한 id를 만든다. - x버튼이 눌리면 event.target.parentElement를 이용해 해당 li 요소를 없앤다. - filter()를 통해 할 일 목록에서 해당 내용도 삭제하고, localStorage도 수정한다. https://github.com/soaringwave/html-JS-css/commit/16a8b0504cc183e4fa4cb6e4feeae.. 2023. 1. 29. [나만의 Home Page] 날짜, 시간, 온도, 날씨, 지역 표시하기 특정 칸에 현재 정보를 나타낸다. 기술 - Date 객체를 활용하여 현재 날짜와 시간 정보를 불러왔다. - https://openweathermap.org/api의 API를 활용하여 사용자가 있는 곳의 날씨 정보를 불러왔다. - 미리 색을 저장해서 랜덤 배경색을 설정하는 함수를 만들어 활용했다. 디버깅 함 1. 내가 설정한 문구가 없는 경우에도 새로운 문구를 추가할 수 있도록 수정했다. 디버깅 필요함 - input-form의 배치를 수정해야 한다. - submit 같은 반응이 있을 때 transition으로 매끄럽게 변경하면 좋다. https://github.com/soaringwave/html-JS-css/commit/c77a92b9c3c71cd16ee011aa5c2f1df321de0986 2023. 1. 28. [나만의 Home Page] 나만의 문구 보이기 랜덤으로 내가 저장한 문구와 추가 정보가 표시되도록 만들었다. 기술 - input을 통해 사용자로부터 문구와 추가 정보를 입력받는다. - 문구와 추가 정보를 저장한 배열 myQuotes를 localStorage에 저장한다. - localStorage에 저장된 myQuotes를 불러와 myQuotes와 동기화한다. - Math.random()을 이용해 랜덤으로 문구와 추가 정보를 화면에 나타낸다. 디버깅 필요함 - 명언 색깔을 랜덤으로 설정해서 보이고 싶다. - 개발자가 저장한 문구뿐만 아니라 사용자가 입력한 문구도 보이고 싶어서 추가할 수 있도록 만들었다. 또 기능은 간소화하고자 삭제 기능은 추가하지 않았다. 그러니 localStorage에서 myQuotes를 삭제한다면 아무것도 보이지 않는다. 비어있어.. 2023. 1. 27. 이전 1 ··· 4 5 6 7 8 9 10 ··· 12 다음
