반응형 디자인 2-5

디자인호텔스

결과

탭 메뉴를 클릭하면 해당 메뉴에 해당하는 비디오 목록들이 바뀐다.

HTML (탭 메뉴의 구성)

<div class="section3-tabMenu">
				   <ul>
					  <li><a href="javascript:" class="tabmenuBt addTap">all</a></li>
					  <li><a href="javascript:" class="tabmenuBt">beach</a></li>
					  <li><a href="javascript:" class="tabmenuBt">city</a></li>
					  <li><a href="javascript:" class="tabmenuBt">mountain</a></li>
					  <li><a href="javascript:" class="tabmenuBt">alterative</a></li>
					  <li><a href="javascript:" class="tabmenuBt">rejuvenate</a></li>
				   </ul>
</div>

script

let tabs=$('.section3-tabMenu > ul > li');
let tabContents=$('.section3-gallery-wrap > div');

tabs.on('click',function(){
    let tg=$(this);
    let i=tg.index();
    tabs.find('>a').removeClass('addTap');
    tg.find('>a').addClass('addTap');
    tabContents.css('display','none');
    tabContents.eq(i).css('display','block');
});

click 함수를 사용하여 변수 tabs와 tabContents를 사용하였다.
li 의 하위 find'a' 태그를 찾아 removeClass 'addTap' 이라는 클래스를 지우고 this 의 하위 'a'에게 addClass를 사용하여 클래스를 추가한다. 그외의 div 는 display를 none 하고 eq(i) 번째는 block한다.

---

날씨 API

오픈웨더 open weather 를 이용하여 날씨 API 적용

1. 적용방법

URL : https://openweathermap.org/

1. 구글에 'open weather'를 검색한다.

2. 회원가입을 한다.

3. 가입을 하고 로그인을 하고 피로필을 클릭하면 메뉴가 나온다. 'My API keys' 를 클릭

4. API keys를 복사한다.

5. API 메뉴에서 상황에 맞는 cdn을 가져온다.

6. seoul을 검색한다.

7. 주소창 끝부분의 숫자는 국가 코드이다. 끝7자리 숫자를 복사하여 가져온 cdn에 국가코드로 생각되는 부분에 넣어준다.

8. json viewer 를 크롬 확장프로그램에서 'jsonviewer' 를 검색하여 해당 프로그램을 설치한다.

9. 복사해두었던 키와 getJON 을 호출한다.

$.getJSON('http://api.openweathermap.org/data/2.5/forecast?id=1835848&appid=a27ee811235befb550b2e05254a85809&units=metric', function(data){

2. 적용

결과

HTML

<div id="wrap">
        <h1>weather api</h1>
        <h2>날씨예보</h2>
        <div class="currentTemp">현재: </div>
        <div class="currentLowTemp">최저온도: </div>
        <div class="currentHightTemp">최고온도: </div>
        <div class="currentIcon">아이콘: </div>
    </div>

script

$.getJSON('http://api.openweathermap.org/data/2.5/forecast?id=1835848&appid=a27ee811235befb550b2e05254a85809&units=metric', function(data){
        let $currentTemp=data.list[0].main.temp;
        let $currentLowTemp=data.list[0].main.temp_min;
        let $currentHightTemp=data.list[0].main.temp_max;
        let $weatherIcoon=data.list[0].weather[0].icon;

        let $now=new Date(Date.now());
        alert($now);
        let $month=$now.getMonth()+1;
        alert($month);
        let $currentDate=$now.getFullYear()+ '년' + $month + '월' + $now.getDate() + '일';
        
        $('.currentTemp').append($currentTemp);
        $('.currentLowTemp').append($currentLowTemp);
        $('.currentHightTemp').append($currentHightTemp);
        $('h2').prepend($currentDate);
        //$('.currentIcon').append($weatherIcoon); 
        $('.currentIcon').append('<img src="http://openweathermap.org/img/wn/'+ $weatherIcoon +'@2x.png" alt=""><img/>');

아이콘 코드를 찾아 넣어준다. 위 변수들의 경로는 json의 경로이다.
ex) $currentTemp=data.list[0].main.temp;