[유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 프론트엔드 19일차(과제 제출)

무과장·2023년 6월 22일
1
post-thumbnail

📝숙제 :

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 #개발자부트캠프 #리액트 #리액트캠프 #부트캠프 #스나이퍼팩토리 #웅진씽크빅 #유데미 #인사이드아웃 #프로젝트캠프 #프로젝트캠프후기

profile
느리더라도 꾸준히 확실하게.

0개의 댓글