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

무과장·2023년 6월 20일

CSS JavaScript html

[유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프

목록 보기

11/18

📝숙제 :

1.vanilla js로 배경이미지 랜덤 변경
2.vanilla js로 인사 만들기
3.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 {
      padding: 8px;
      font-size: 24px;
    }
    #greeting {
      font-size: 24px;
      margin-top: 10px;
      text-align: center;
      color: white;
    }
    button {
      padding: 10px 20px;
      font-size: 18px;
      background-color: #333;
      color: #fff;
      border: none;
      cursor: pointer;
    }
  </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>
  <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();
            }
        } 
  </script>
</body>
</html>