웹개발 종합반 프로젝트 - 01 헤더

프로젝터의 헤더에는 날짜, 명언, 인사말이 들어간다.

 

처음에 세운 목표는 아래와 같다.

- 틀만들기
- 날짜: js Date -> setinterval 함수로 매초마다 실행시켜서 시간 변화주기
- 로그인인사: 로그인 기능을 만든 후 다시 생각하기.
- 짧은명언: api가져와서 db 넣고 랜덤뽑아주기
- 틀: 명언나오고 아래에 (author)
- 파이썬 flask로 서버 post -> quote_give, author_give

 

만들다 보니, JQuery를 쓰기 때문에 SetInterval() 을 사용하지 않아도 되는걸 알았다.

 - 연/월/일 얻어오는 함수

        // When Load the Window
        $(document).ready(function () {
            getDate();
        });

        // Date for Header
        function getDate() {
            const now = new Date();
            const year = now.getFullYear();
            const month = now.getMonth() + 1;
            const date = now.getDate();

            const html_temp = `<div id="date">${year}/${month}/${date}</div>`
            $("#date").append(html_temp)
        }

명언 API를 받아와서 DB에 넣자 라고 별 생각없이 기계처럼 생각했었지만, 

만들다보니 DB에 굳이 안넣고, 페이지 restart할때마다 랜덤으로 주는게 나을거 같았다.

 - 명언 api 얻어오기

중간에 author가 null인 경우가 있어서, 그럴때는 Unknown 이라는 이름을 주었다.

		// Quote API
        const settings = {
            "async": true,
            "crossDomain": true,
            "url": "https://type.fit/api/quotes",
            "method": "GET"
        }
        $.ajax(settings).done(function (response) {
            const data = JSON.parse(response);
            const todaysQuote = data[Math.floor(Math.random() * data.length)];

            let html_temp = ``
            if (todaysQuote['author'] != null) {
                html_temp = `<h5>${todaysQuote['text']}</h5>
                                <span>- ${todaysQuote['author']}</span>`
            } else {
                html_temp = `<h5>${todaysQuote['text']}</h5>
                                <span>- Unknown</span>`
            }

            $('#quote').append(html_temp)
        });

그 외에 새로 배운게 있다면 기본 css 레이아웃이다.

Flex와 Div로도 충분히 레이아웃이 가능하다.

border 혹은 background-color, f12의 inspection으로 계속 div 등등의 범위를 보면서 틀을 잡으니까 편하다.

 

궁금한점: 이러한 API를 JQuery로 어떻게 가져오는가? 

- 결국 해결 못하고, 다른 API를 사용하게 됬다..

이 API 출처 -  advice slip api

{
	slip: {
		id: 39,
		advice: "Never run a marathon in Crocs."
			}
}

 

현재 진행 상황