main.html 6.39 KB
<!DOCTYPE html>
<html lang="ko">
  <head>
    <script src="main.js"> </script>
    <meta charset="UTF-8">
    <title>날씨에 따른 음악 추천 사이트</title>
    <script src="http://code.jquery.com/jquery-1.11.0.js"></script>
        <script>
            // 콜백 함수를 이용할 시 반드시 이 스크립트가 밑의 스크립트보다 먼저 실행돼야 함
            function useGps() {
                var userLat = document.getElementById('latitude').innerText.trim(); // trim으로 공백을 제거하고 실제 값만 불러오기
                console.log(userLat);
                var userLng = document.getElementById('longitude').innerText.trim(); // trim으로 공백을 제거하고 실제 값만 불러오기
                console.log(userLng);

                const APIKEY = "ea903679a6e5a44da75a971c0231f4f4"; 
                fetch("https://api.openweathermap.org/data/2.5/weather?lat=" + userLat + "&lon=" + userLng + "&appid=" + APIKEY + "&units=metric")
                .then(res => res.json())
                .then(function(jsonObject) {
                    //if(!error&&response.statusCode==200)
                    //request는 string으로 받아오기 때문에 JSON형태로 바꿔준다.
                    //var jsonObject = JSON.parse();
                    var LocationName = jsonObject.name; //지역 이름
                    var WeatherCondition = jsonObject.weather[0].main; //현재 날씨 
                    var Temp = jsonObject.main.temp; //현재 기온
                    //console.log(body);
                    console.log(LocationName);
                    console.log(WeatherCondition);
                    console.log(Temp);
            })
        } </script>
        <script>
            $(function() {
                if (navigator.geolocation) {
                    navigator.geolocation.getCurrentPosition(function(pos) {
                        $('#latitude').html(pos.coords.latitude);
                        $('#longitude').html(pos.coords.longitude);
                       // useGps(); // GPS 정보를 모두받아온 뒤에 코드를 실행함
                        useGps();
                     });
                }
                else {
                    alert('이 브라우저에서는 안됩니다');
                }
            });
        </script>
    <style>
      #container {
        width:600px;
        margin:10px auto;
      }
      body {
        background: url('https://png.pngtree.com/thumb_back/fh260/back_our/20200630/ourmid/pngtree-purple-background-picture-image_340659.jpg') left top no-repeat fixed;
        background-size: cover;
      }
    </style>
    <link rel="stylesheet" href="http://localhost:3000/main.css">
  </head>
  <body> 
    <div id="container">
      <h1>'프로그램명'을 방문해주셔서 감사합니다.</h1>
      
      <fieldset>
        <legend>현재 시각 정보</legend>   
        <div style="text-align: center;">
          <span id="clock" style="color:greenyellow; font-size: 100px;">clock</span>
          <span id="apm" style="color:greenyellow; font-size: 50px;"  >ampm</span>
        </div>
        <script>
          var Target = document.getElementById("clock");
          var Target_apm = document.getElementById("apm");
          function clock() {
              var time = new Date();
              var hours = time.getHours();
              var minutes = time.getMinutes();
              var seconds = time.getSeconds();
              var AmPm ="AM";
              if(hours > 12){   
                  var AmPm ="PM";
                  hours %= 12;
              }
              Target.innerText = 
              `${hours < 10 ? `0${hours}` : hours}:${minutes < 10 ? `0${minutes}` : minutes}:${seconds < 10 ? `0${seconds}` : seconds}`;
              Target_apm.innerText = `${AmPm}`;
          }
          clock();
          setInterval(clock, 1000); // 1초마다 실행
        </script>
      </fieldset>

      <fieldset>
        <legend>현재 내 위치 정보</legend>
        <div><input type="button" value="현재 내 위치 검색"></div><br><!-- 검색 버튼 누르면 팝업으로 위치 서비스 동의 버튼 뜨게 하기 -->
        <div><input type="button" value="현재 내 위치 검색"></div><br>
          <li>위도:<span id="latitude"></span></li>
          <li>경도:<span id="longitude"></span></li>
          <li>위치:<span id="LocationName"></span></li>
          <li>날씨:<span id="WeatherCondition"></span></li>
          <li>기온:<span id="Temp"></span></li>
        <!-- 검색 버튼 누르면 팝업으로 위치 서비스 동의 버튼 뜨게 하기 -->
      </fieldset>

      <fieldset>
        <legend>추천 음악 정보</legend>
        <div><input type="button" value="음악 추천 받기"></div><br>
        <!-- <iframe id="video1" width="450" height="280" src="" frameborder="0" allowtransparency="true" allowfullscreen></iframe>
        <a href="#" id="playvideo">Play button</a>
        <script>
          var userLat = 37;
          var userLng = 127;
          fetch("http://localhost:3000/music")
            .then(res => res.json())
            .then(function(data) {
              $("#playvideo").click(function(){
              $("#video1")[0].src += data.link;
           });
            })
       
        </script> -->

        <h4>추천 음악 1</h4>
        <iframe width="942" height="530" src="https://www.youtube.com/embed/vnS_jn2uibs" title="YouTube video player" frameborder="0" 
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe><br>
        <h4>추천 음악 2</h4>
        <iframe width="942" height="530" src="https://www.youtube.com/embed/P6gV_t70KAk" title="YouTube video player" frameborder="0" 
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe><br>
      </fieldset>
      
      

      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <!-- 공간확보 -->

      <footer>
        <div>
          <p><b>developed by 강희주, 진재영, 김재욱</b></p>
          <address>Contact for more information. 010-2400-6771</address>
          <img style="width: 30%; height: 30%; float: right;" src="https://blog.kakaocdn.net/dn/bjsDsi/btqxXJM3JKe/WAK7xHbOm7kxyVqRIvoOaK/img.jpg" alt="경희대 마크">
        </div>
      </footer>

    </div>           
  </body>
</html>