자바스크립트 : 마무리 문제를 풀어 봅시다 4탄

이번 마무리 문제는 명언이 10초에 한번씩 랜덤으로 바뀌는 스크립트를 짜는 것입니다.

---

CSS

 * {
    margin: 0;
    padding: 0;
    /* background-color: #000; */
}
body {
    background-image: url(https://images.unsplash.com/photo-1496264057429-6a331647b69e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1171&q=80);
    background-size: cover;
    background-repeat: no-repeat;
}
body::before {
    content: '';
    position: absolute;
    left: 0;top: 0;
    width: 100%;
    height: 100vh;
    z-index: -1;
    background-color: rgba(0, 0, 0, 0.4);

}
.result__wrap {
    font-family: "GmarketSans";
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
#result {
    /* width: 800px; */
    line-height: 2;
}
.quote {
    font-size: 35px;
}
.author {
    font-size: 25px;
}

• * 선택자는 웹페이지의 모든 요소에 대해 마진과 패딩을 0으로 설정합니다. 주석 처리된 background-color 속성은 현재 비활성화되어 있습니다.
• body 선택자는 Unsplash의 URL을 사용하여 배경 이미지를 설정합니다. background-size 속성은 이미지를 배경의 전체 영역에 덮도록 "cover"로 설정되고, background-repeat 속성은 이미지가 반복되지 않도록 "no-repeat"으로 설정됩니다.
• body::before 선택자는 가상 요소를 생성하여 본문 요소의 왼쪽 상단에 절대 위치로 배치합니다. 뷰포트 높이의 100%인 너비와 높이를 가지며, z-index를 -1로 설정하여 페이지의 다른 요소들 뒤에 배치됩니다. background-color 속성은 반투명한 검은색 (rgba(0, 0, 0, 0.4))으로 가상 요소의 색상을 설정하여 오버레이 효과를 만듭니다.
• .result__wrap 클래스는 결과 컨텐츠를 감싸는 래퍼 요소의 글꼴 패밀리, 너비, 높이, 정렬을 설정합니다. 결과 컨텐츠를 수직 및 수평으로 가운데로 정렬하기 위해 플렉스박스를 사용하며, 텍스트 색상은 흰색으로 설정됩니다.
• #result 선택자는 결과 컨텐츠의 글꼴 크기와 줄 간격을 설정합니다. 결과는 인용문과 저자로 구성되어 있습니다.

---

HTML

<div class="result__wrap">
    <div id="result">
        <div class="quote">dddd</div>
        <div class="author">dddd</div>
    </div>
</div>

• .result__wrap 클래스: 이 클래스는 결과 컨텐츠를 감싸는 래퍼 요소를 나타냅니다. 이 래퍼 요소는 CSS에서 정의된 스타일을 적용받아, 화면 가운데에 정렬되는 효과를 가지게 됩니다.
• #result 아이디: 이 아이디는 결과 컨텐츠를 나타내는 요소입니다. .result__wrap 클래스로 감싸진 내부에 위치하며, 인용문과 저자를 포함한 결과 컨텐츠의 스타일을 적용하기 위해 사용됩니다.
• .quote 클래스: 이 클래스는 인용문을 나타내는 요소입니다. 텍스트 내용이 "dddd"로 설정되어 있습니다.
• .author 클래스: 이 클래스는 저자를 나타내는 요소입니다. 텍스트 내용이 "dddd"로 설정되어 있습니다.

---

SCRIPT

<script>
    const mainResult = document.querySelector("#result");
    const resultQuote = mainResult.querySelector(".quote");
    const resultAuthor = mainResult.querySelector(".author");

    let resultAll = [];

    const dataresult = (value) => {
        fetch("json/dummy01.json")
        .then(res => res.json())
        .then(items => {
            const randomIndex = Math.floor(Math.random() * items.length);
            // const forPhrase = {
            //     quote: items[0].quote,
            //     author: items[0].author
            // };
            resultQuote.textContent = items[randomIndex].quote;
            resultAuthor.textContent = "- "+items[randomIndex].author;
        })

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

    dataresult();
    setInterval(dataresult, 10000);


    // console.log(items);

</script>

• const mainResult = document.querySelector("#result");: #result 아이디를 가진 요소를 mainResult 변수에 할당합니다. 이 요소는 결과 컨텐츠를 나타내는 부분입니다.
• const resultQuote = mainResult.querySelector(".quote");: mainResult 변수에서 .quote 클래스를 가진 요소를 resultQuote 변수에 할당합니다. 이 요소는 인용문을 나타내는 부분입니다.
• const resultAuthor = mainResult.querySelector(".author");: mainResult 변수에서 .author 클래스를 가진 요소를 resultAuthor 변수에 할당합니다. 이 요소는 저자를 나타내는 부분입니다.
• const dataresult = (value) => { ... }: dataresult 함수를 정의합니다. 이 함수는 JSON 데이터를 가져와 결과 컨텐츠의 내용을 변경하는 역할을 수행합니다.
• fetch("json/dummy01.json"): fetch 함수를 사용하여 json/dummy01.json 경로의 JSON 데이터를 가져옵니다.
• .then(res => res.json()): fetch 함수의 결과로 받아온 응답(response) 객체를 JSON 형태로 변환합니다.
• .then(items => { ... }): JSON 데이터를 성공적으로 변환하면, 변환된 데이터(items)를 활용하여 결과 컨텐츠의 내용을 변경하는 로직을 수행합니다.
• resultQuote.textContent = items[randomIndex].quote;: resultQuote 변수를 통해 .quote 클래스를 가진 요소의 텍스트 내용을 items 배열에서 랜덤으로 선택한 인용문으로 변경합니다.
• resultAuthor.textContent = "- " + items[randomIndex].author;: resultAuthor 변수를 통해 .author 클래스를 가진 요소의 텍스트 내용을 items 배열에서 랜덤으로 선택한 저자로 변경합니다. 저자 앞에는 "-" 문자를 추가하여 표시합니다.
• .catch((err) => console.log(err));: 데이터 가져오기에 실패한 경우 발생한 에러를 콘솔에 출력합니다.
• dataresult();: dataresult 함수를 호출하여 초기에 결과 컨텐츠의 내용을 설정합니다.
• setInterval(dataresult, 10000);: 10초마다 dataresult 함수를 호출하여 결과 컨텐츠의 내용을 업데이트합니다.

---