날짜, 위경도, 구글글꼴

2021. 1. 25. 09:40

<!DOCTYPE html>
<html>
    <head>
        <title>title</title>
    </head>
    <body>
        <div id="current_datetime">
        </div>
    </body>
    <script>
        function current_datetime() {
            var today = new Date();
        var year = today.getFullYear()
        var month = today.getMonth() + 1
        var day = today.getDate()

        var hh = today.getHours();
        var mi = today.getMinutes();
        var ss = today.getSeconds();

        document.getElementById("current_datetime").innerHTML = year + '-' 
        + month + '-' + day + ' ' + hh + ':' + mi + ':' + ss
        }
    
    
    setInterval(current_datetime,1000);

    if ("geolocation" in navigator) {
        navigator.geolocation.getCurrentPosition(getweather);
    }

    function getweather(position) {
        var latitude = position.coords.latitude;
        var longitude = position.coords.longitude;
        console.log('latitude= ' + latitude);
        console.log('longitude= '+ longitude);
        var apiKey = "e5d4ba22d1c0aae4130753ea87c69eec";  
    }
    </script>
</html>

- bootstrap 다운

-b4치면

- b4-$ 누르면

<!doctype html>
<html lang="en">
  <head>
    <title>Title</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  </head>
  <body>
      
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

여기서 slim 지우기, jquery 버전 바꾸기

jquery.com/

jQuery

What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.

jquery.com

- 구글에서 기상정보 가져오기

- .temp 는 class #cityname은 id

<!doctype html>
<html lang="en">
  <head>
    <title>Title</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  </head>
  <body>
      <div id="cityname">
      </div>
      <div class="temp">
      </div>  

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

<script>
    if ("geolocation" in navigator) {
        navigator.geolocation.getCurrentPosition(getweather);
    }

    function getweather(position) {
        var latitude = position.coords.latitude;
        var longitude = position.coords.longitude;
        console.log('latitude = ' + latitude);
        console.log('longitude = ' + longitude);

        var apiKey = "e5d4ba22d1c0aae4130753ea87c69eec";

         $.getJSON("http://api.openweathermap.org/data/2.5/weather?lat=" + latitude + "&lon=" + longitude + "&appid=" + apiKey, function(data) {
        console.log(data);
        var city_name = data["name"];
        
        var country_name = data["sys"]["country"];
        var weather_description = data["weather"][0]["description"];
        var temp = data["main"]["temp"] - 273;
        var icon = data["weather"][0]["icon"]

        console.log(icon);

        $("#cityname").html(city_name + " &#40;" + country_name + "&#41; " + "has " + weather_description);
        $(".temp").html(temp + '&deg;' + 'C');
       

      });
    }    
 </script>

- 이미지 추가

<!doctype html>
<html lang="en">
  <head>
    <title>Title</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  </head>
  <body>
      <div id="cityname">
      </div>
      <div class="temp">
      </div>  
      <img class="myicon">

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

<script>
    if ("geolocation" in navigator) {
        navigator.geolocation.getCurrentPosition(getweather);
    }

    function getweather(position) {
        var latitude = position.coords.latitude;
        var longitude = position.coords.longitude;
        console.log('latitude = ' + latitude);
        console.log('longitude = ' + longitude);

        var apiKey = "e5d4ba22d1c0aae4130753ea87c69eec";

         $.getJSON("http://api.openweathermap.org/data/2.5/weather?lat=" + latitude + "&lon=" + longitude + "&appid=" + apiKey, function(data) {
        console.log(data);
        var city_name = data["name"];
        
        var country_name = data["sys"]["country"];
        var weather_description = data["weather"][0]["description"];
        var temp = data["main"]["temp"] - 273;
        var icon = data["weather"][0]["icon"]

        console.log(icon);

        $("#cityname").html(city_name + " &#40;" + country_name + "&#41; " + "has " + weather_description);
        $(".temp").html(temp + '&deg;' + 'C');
        var srcinfo = 'http://openweathermap.org/img/wn/' + icon + '@2x.png'
        $(".myicon").attr('src', srcinfo);
      });
    }    
 </script>

-글꼴 바꾸기

fonts.google.com/

Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Gamja+Flower&display=swap" rel="stylesheet">

copy한 것을 </head> 윗 줄에 넣기

font-family: 'Gamja Flower', cursive;

copy한 것을 <body> 원하는 곳에 넣기

'mongodb' 카테고리의 다른 글

mysql (0)	2021.01.25
flex box (0)	2021.01.25
몽고디비- 로그인 수정중 (0)	2021.01.22
몽고디비 - 날씨, 온도표시 (0)	2021.01.22
몽고디비 7일차 - book_store 시간, 검색기능 추가 (0)	2021.01.22

.

날짜, 위경도, 구글글꼴

'mongodb' 카테고리의 다른 글

+ Recent posts

티스토리툴바