웹개발 종합반 프로젝트 - 04 날씨&즐겨찾기

날씨는 도시이름을 검색하고, 최대 4개의 도시까지만 등록되게 하려고 계획했었다.

처음에는 일출/일몰, 최대/최저기온 등 모든걸 나타내고 싶었지만, 

카드의 크기에 맞게 필요한 정보만 나타내게 되었다.

새로배운 내용은 ajax의 error처리 이다.

여기서는 도시이름이 검색에 안나올경우, 즉 url로 카드를 못 가져올 경우, error 처리가 된다.

        function addCard() {
                // 카드의 총 갯수를 제한한다.
            curCardCount++;
            if (curCardCount === maxCardCount + 1) {
                alert('The maximum number of cards is 4. ')
                curCardCount = 4;
                return
            }

            // 검색의 값을  가져오고, 값을 url의 도시이름부분에 끼워준다.
            let searchData = $('#weatherSearch-ID').val();
            url = "https://api.openweathermap.org/data/2.5/weather?q=" + searchData + "&appid=3de474db76b0433d7c350250d3e62508"

            // 검색 후, 검색창을 빈칸으로 만들어준다.
            searchData = $('#weatherSearch-ID').val(" ");

			// API 가져오기
            $.ajax({
                type: "GET",
                url: url, // url은 위에서 만든 새 url을 넣어준다.
                data: {},
                success: function (response) {
                    let aboutTemp = response['main'];

                    let cityName = response['name'];
                    let currentTemp = aboutTemp['temp'];
                    let feelTemp = aboutTemp['temp_max'];
                    let humidityTemp = aboutTemp['humidity'];
                    let windSpeed = response['wind']['speed'];
                    let icon = response['weather']

                    // Time Calculator
                    let timezone = response['timezone']
                    let d = new Date((new Date().getTime()) + timezone * 1000)

                    let html_temp = `<div class="weather-card">
                                    <div class="weather-header">
                                        <img width=32px src="http://openweathermap.org/img/w/${icon[0].icon}.png"/>
                                        <h5 id="city-name">${cityName}</h5>
                                        <button>DELETE</button>
                                    </div>
                                    <div class="weather-main">
                                        <div id="curTime">Current Time: ${d.toISOString().replace("T", " ").replace(/\..*/, "")}</div>
                                        <div id="curTemp">Current Temperature: ${Math.floor(currentTemp - 273.15)}°</div>
                                        <div id="feelTemp">Feel Temperature: ${Math.floor(feelTemp - 273.15)}</div>
                                        <div id="wind">Wind: ${windSpeed} m/s</div>
                                        <div id="humidity">humidity: ${humidityTemp} %</div>
                                    </div>
                                </div>`

                    $('#weather-cards-container').append(html_temp);

                },
                // 만약 도시이름이 없는경우, 
                error: function () {
                    alert('CITY NAME IS WRONG')
                    window.location.reload();
                }
            })

        }

다음은 즐겨찾기 부분이다.

즐겨찾기는 일단 bootstrap의 modal을 사용했다.

먼저 html 코드이다.

 <!-- Favourite -->
            <div class="favourite-box">
                <div class="jumbotron">
                    <h1 class="display-10">My Favourite Links</h1>
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
                        Add
                    </button> <!-- 모달 꺼내는 버튼 -->
                    <hr class="my-4">
                    <div id="favourite-content-id" class="favourite-content-box">
                        <!-- Favourites Contents will be added here-->
                    </div>

                    <!-- 모달시작부분 -->
                    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog"
                         aria-labelledby="exampleModalLabel" aria-hidden="true">
                          <!-- modal-dialog-centered를 추가시 화면 중앙에 나온다 -->
                        <div class="modal-dialog modal-dialog-centered" role="document">
                            <div class="modal-content">
                                <div class="modal-header"><h5 class="modal-title" id="exampleModalLabel">Modal
                                    title</h5>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                            aria-hidden="true">&times;</span></button>
                                </div>
                                <div class="modal-body">
                                    <h4>URL:</h4>
                                    <h5>**Do Not Re-Write https://**</h5>
                                    <input id="addLinkID" type="text" value="https://">
                                </div>
                                <div class="modal-footer">
                                 	<!-- data-dismiss="modal" 이걸 달아주면 버튼 누르고나서 모달이 사라진다. -->
                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                    <button onclick="AddFavourites()" type="button" class="btn btn-primary"
                                            data-dismiss="modal">Add
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

다음은 자바스크립트이다

        let currentFavCount = 0;
        let maxFavCount = 10;

        function AddFavourites() {
            // url에 검색 링크를 가져온다. 대소문자 모두 소문자로 취급
            let url = $('#addLinkID').val().toLowerCase();
            console.log(url)


            currentFavCount++;
            if (currentFavCount <= maxFavCount) {
                let html_temp = `
                                <div class="favFlex">
                                    <a href="${url}"  target="_blank" class="favourite-content blocked">
                                    // 링크의 favicon을 가져온다. 
                                    //onerror="this.onerror=null; this.src="주소:
                                    // 이건, 링크를 가져오기 실패했을때의 대체이미지
                                    <img id="news-logo" width=30px
                                    src="http://www.google.com/s2/favicons?domain=${url}"
                                    onerror="this.onerror=null; this.src='https://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/No_image_available.svg/1024px-No_image_available.svg.png';">
                                    </a>
                                    <button>delete</button>
                                </div>`
                $('#favourite-content-id').append(html_temp);
                $('#addLinkID').val("https://");
            } else {
                alert('Max Favourites Links are 10 only')
            }

        }

즐겨찾기 아이콘 위에 마우스를 올려놓으면 tool tip이 나오게 한 후의 코드이다.

       // FAVOURITE
        let currentFavCount = 0;
        let maxFavCount = 10;

        function AddFavourites() {
            // to get favicon from the link that user clicks
            let url = $('#addLinkID').val().toLowerCase();
            console.log(url)


            currentFavCount++;
            if (currentFavCount <= maxFavCount) {
                let html_temp = `
                                <div class="favFlex">
                                    <a href="${url}"  target="_blank" class="favourite-content blocked">
                                    <img data-toggle="tooltip" data-placement="bottom" title="${url}"
                                    id="news-logo" width=30px
                                    src="http://www.google.com/s2/favicons?domain=${url}"
                                    onerror="this.onerror=null; this.src='https://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/No_image_available.svg/1024px-No_image_available.svg.png';">
                                    </a>
                                    <button>delete</button>
                                </div>`
                $('#favourite-content-id').append(html_temp);
                $('#addLinkID').val("https://");
            } else {
                alert('Max Favourites Links are 10 only')
            }

        }


        // Tool Tip
        $(function () {
            $('[data-toggle="tooltip"]').tooltip()
        })

 

날씨와, 즐겨찾기를 진행하면서, 궁금했던 점은 없는거같다.

현재 진행상황

-모달의 모습

-전체모습