1.vanilla js로 할 일 목록 만들기
2.vanilla js로 내 위치의 날씨 만들기
<!DOCTYPE html> <html> <head> <style> body { margin: 0; padding: 0; overflow: hidden; font-family: Arial, sans-serif; background-color: #f5f5f5; } #background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; transition: background-image 1s; } #clock { font-size: 72px; font-weight: bold; color: #333; margin-top: 50vh; transform: translateY(-50%); text-align: center; } #welcome { margin-top: -30px; text-align: center; } #nameInput, #whatToDo { padding: 8px; font-size: 24px; } #greeting { font-size: 24px; margin-top: 10px; text-align: center; color: white; } #to-do { margin-top: 10px; text-align: center; color: white; } button { padding: 10px 20px; font-size: 18px; background-color: #333; color: #fff; border: none; cursor: pointer; } #weather { font-size: 24px; margin-top: 10px; text-align: center; color: white; } #weather-icon { font-size: 48px; margin-bottom: 10px; } </style> </head> <body> <div id="background"> <div id="clock"></div><br> <div id="welcome"> <input id="nameInput" type="text" name="name" placeholder="이름을 입력하세요" onkeypress="enterKey(event)"> <button onclick="addToWelcome()">입력</button> </div> <div id="greeting"></div> <div id="to-do"> <input type="text" id="whatToDo" name="whatToDo" placeholder="할 일을 입력하세요" onkeypress="enterKey1(event)"> <button onclick="addToList()">추가</button> <h2>오늘 할 일</h2> <ul id="ToDoList"></ul> </div> <div id="weather"></div> </div> <script> //배경이미지zone // 이미지 URL 배열 var imageUrls = [ "./img/img1.jpg", "./img/img2.jpg", "./img/img3.jpg", "./img/img4.jpg", "./img/img5.jpg", "./img/img6.jpg", "./img/img7.jpg", ]; // 배경 이미지 변경 함수 function changeBackground() { var randomIndex = Math.floor(Math.random() * imageUrls.length); var imageUrl = imageUrls[randomIndex]; document.getElementById("background").style.backgroundImage = "url('" + imageUrl + "')"; } // 초기 배경 이미지 설정 changeBackground(); // 일정 간격으로 배경 이미지 변경 setInterval(changeBackground, 5000); // 5초마다 변경 (1000ms = 1초) //실시간시계zone var target = document.getElementById("clock"); function clock(){ var time = new Date(); var hours = time.getHours(); var minutes = time.getMinutes(); var seconds = time.getSeconds(); document.getElementById("clock").innerHTML = `${hours} : ${minutes} : ${seconds}`; } clock(); setInterval(clock, 1000); //이름 입력 zone function addToWelcome(){ var name = document.getElementById("nameInput").value; console.log(document.getElementById("nameInput").value); var greeting = document.getElementById("greeting"); //시간대 별로 인사말이 바뀌도록 해볼까? greeting.textContent = `좋은 아침입니다. ${name}님` //칸 입력 받았으면 비워주기 document.getElementById("nameInput").value = ""; } //엔터 쳐도 들어가게 function enterKey(event){ console.log(window.event.keyCode); if(window.event.keyCode == 13){ addToWelcome(); } } //to-do list zone function addToList(){ //whatToDo 아이디로 받은 값을 whatToDo 변수에 넣어줌. var whatToDo = document.getElementById("whatToDo").value; console.log(document.getElementById("whatToDo").value); //li 요소로 표시할 거란 걸 ToDoList에 넣어줌 var ToDoItem = document.createElement("li"); // 이 부분이 필요한지 : 필요함 //변수 ToDoList에 담긴 요소의 텍스트 콘텐츠를 ToDoItem.textContent = whatToDo; var ToDoList = document.getElementById("ToDoList"); console.log(document.getElementById("ToDoList")); ToDoList.appendChild(ToDoItem); document.getElementById("whatToDo").value = ""; } //엔터 쳐도 들어가게 function enterKey1(event){ console.log(window.event.keyCode); if(window.event.keyCode == 13){ addToList(); } } //날씨 불러오기 const weather = document.getElementById("weather"); const API_KEY = 'ac0f0082e2252339da426aa31b5af2c8'; function getWeather(lat, lon){ console.log(lat, lon); fetch( ).then(function (response) { console.log(response); return response.json(); }).then(function (json){ console.log(json); const temp = json.main.temp; const humidity = json.main.humidity; const weatherIcon = json.weather[0].icon; console.log(temp); console.log(humidity); weather.innerHTML = `${temp.toFixed(1)}°C / ${humidity}%`; }) } function handleGeoSuccess(pos){ // console.log(pos); const latitude = pos.coords.latitude; const longitude = pos.coords.longitude; // console.log(latitude); // console.log(longitude); getWeather(latitude, longitude); } function handleGeoError(){ console.log("error"); } // 초기화 // page load 될 때 가장 먼저 실행 function init(){ navigator.geolocation.getCurrentPosition(handleGeoSuccess, handleGeoError); } init(); </script> </body> </html>
완성 화면
더 구현해야 할 것
1. 시계~날씨까지 전체적인 블록 위로 올리기
본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.
#IT개발캠프 #React #개발자부트캠프 #리액트 #리액트캠프 #부트캠프 #스나이퍼팩토리 #웅진씽크빅 #유데미 #인사이드아웃 #프로젝트캠프 #프로젝트캠프후기