[자바스크립트] 명언 나오게 하기 : 무작위 10개

명언 나오는 화면 만들기

자바스크립트를 이용하여 json파일에 저장된 명언 10개가 무작위로 추출되어 보여지는 화면을 만들어 보았습니다.

 

 

완성화면

 

.✈ .  HTML

    <div class="wrap">
        <div class="container">
            <p class="sentence"></p>
            <p class="speaker"></p>
        </div>
    </div>

 

.✈ .  CSS

@font-face {
    font-family: 'Cafe24Shiningstar';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.1/Cafe24Shiningstar.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
* {
    margin: 0;
    padding: 0;
    color: #34190e;
    background-color: #9fb6be;
}
.wrap {
    width:100%;
    margin: 100px auto;

}
.container {
    width:1000px;
    margin: 0 auto;
    text-align: center;
    
}
.sentence {
    width: 900px;
    margin: 60px auto;
    font-size: 60px;
    font-family: 'Cafe24Shiningstar';
}
.speaker {
    font-size: 50px;
    font-family: 'Cafe24Shiningstar';
}
.speaker::before {
    content:' - ';
}

 

.✈ . JAVASCRIPT 

        let order = 0
        const dataQuestion = () => {
            const random = Math.floor(Math.random()*30)
            order = random 
            fetch("json/dummy01.json")
            .then(res => res.json())
            .then(items => {
                document.querySelector(".container .sentence").innerHTML=items.quotes[order].quote
                document.querySelector(".container .speaker").innerHTML=items.quotes[order].author
            });
        };
        dataQuestion()
        setInterval(dataQuestion,15000)

 01. 명언이 저장된 json파일 fetch()함수로 불러오기