My Melody Kawaii

JAVASCRIPT

스쳐가는 명언들 속에 내 명언을 찾아보자

younajeong 2023. 4. 15. 16:11

“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”

- Frederick Philips Brooks
Mythical Man-Month 저자
728x90

자바스크립트 - 마무리문제

 

10초동안 스쳐가는 명언들을 스크립트를 사용해서 풀어보는 마무리 문제입니다.

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>명언 미션</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            background-image: url(img/Frame\ 79.jpg);
        }
        #result {
            width: 100%;
            height: 100vh;
            display:inline-block;
            align-items: center;
            font-size: 25px;
            color: #fff;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
    </style>
</head>
<body>
    <div id="result">
        <div class="quote"></div>
        <div class="author"></div>
    </div>
</body>
<script>
    //선택자
    const Result = document.querySelector("#result")
    const Quote = Result.querySelector(".quote")
    const Author = Result.querySelector(".author")

    const dataresult = (value) => {
        fetch("./dummy01.json")
    .then(response => response.json())
    .then(items => {
        const rendomIndex = Math.floor(Math.random() * items.length);
        Quote.textContent = items[rendomIndex].quote;
        Author.textContent = items[rendomIndex].author;
    })

    .catch((err) => console.log(err));

    };

    dataresult();
    setInterval(dataresult, 10000);

</script>
</html>

마무리문제

  • 먼저 새로운 폴더 안에 js파일과 html파일을 만들어 주었습니다.
  • html파일에 선택자 Result,Quote,Author을 querySelector로 선택자를 만들어 주었습니다.
  • fetch를 사용해서 js파일을 불러온 후 items라고 지정 후 json데이터를 파싱했습니다.
  • Math()메서드를 사용해서 json데이터에 무작위 인용구를 선택하였습니다.
  • 마지막으로 선택된 인용구와 저자를 textContent로 업데이트 하고 
  • dataresult()를 호출해서 페이지가 로드될 때 무작위 인용구를 선택하도록 하였고 
  • setInterval(dataresult, 10000)를 사용해서 10초마다 새 인용구를 업데이트 하도록 설정하였습니다.
  • CSS는 style태그를 사용해서 필요한 속성들으 부여해 주었습니다.

 

 

<완성본>