🎨 Scroll-blog

kirin.log·2021년 3월 14일

🪐 logic

html 내 input을 생성, 블로그 리스트는 js로 구성 예정(감싸는 div만 생성해주기)
fetch함수로 item을 받아온다(getPost()).
받아온 item들을 각각 html태그로 구성해서(showPost()) innerHTML해준다.
fetch의 limit은 5로 제한(5개까지만 화면에 보이기)하고, page는 1로 규정(1페이지부터)한다.
loading dot이 페이지가 추가되면 3초 후에 보이도록 css 적용한 함수 생성

🚀 html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <link rel="stylesheet" href="index.css" />
        <title>My Blog</title>
    </head>
    <body>
        <h1>My Blog</h1>
        <div class="filter-container">
            <input type="text" id="filter" class="filter" placeholder="Filter posts..." />
        </div>

        <div id="posts-container">
            <!--js로 생성한 contents 들어갈 부분-->
        </div>

        <div class="loader">
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
        </div>
        <script src="index.js"></script>
    </body>
</html>

🚀 css
@import url("https://fonts.googleapis.com/css?family=Roboto&display=swap");

* {
    box-sizing: border-box;
}

body {
    background-color: #296ca8;
    color: #fff;
    font-family: "Roboto", sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
    padding-bottom: 100px;
}

h1 {
    margin-bottom: 0;
    text-align: center;
}

.filter-container {
    margin-top: 20px;
    width: 80vw;
    max-width: 800px;
}

.filter {
    width: 100%;
    padding: 12px;
    font-size: 16px;
}

/* js */
.post {
    position: relative;
    background-color: #4992d3;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    border-radius: 3px;
    padding: 20px;
    margin: 40px 0;
    display: flex;
    width: 80vw;
    max-width: 800px;
}

.post .post-title {
    margin: 0;
}

.post .post-body {
    margin: 15px 0 0;
    line-height: 1.3;
}

.post .post-info {
    margin-left: 20px;
}

.post .number {
    position: absolute;
    top: -15px;
    left: -15px;
    font-size: 15px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    color: #296ca8;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 7px 10px;
}

/* loading */
.loader {
    opacity: 0;
    display: flex;
    position: fixed;
    bottom: 50px; /*position이 fixed일때, 기본적으로 최상단 최좌측에 위치. bottom의 값을 주면 해당 값만큼 bottom에서 위치하게 됨 */
    transition: opacity 0.3s ease-in;
}

.loader.show {
    opacity: 1;
}

.circle {
    background-color: #fff;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin: 5px;
    animation: bounce 0.5s ease-in infinite;
    /* animation 이름, duration(지속기간), 속도(ease-in : 처음을 느리게), infinite(무한반복) */
}

.circle:nth-of-type(2) {
    animation-delay: 0.1s;
}

.circle:nth-of-type(3) {
    animation-delay: 0.2s;
}

@keyframes bounce {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

🚀 js
"use strict";

const postsContainer = document.getElementById("posts-container");
const loading = document.querySelector(".loader");
const filter = document.getElementById("filter"); // input

let limit = 5;
let page = 1;

// Fetch posts from API
async function getPosts() {
    const res = await fetch(`https://jsonplaceholder.typicode.com/posts?_limit=${limit}&_page=${page}`);

    const data = await res.json();

    return data;
}

// Show posts in DOM
async function showPosts() {
    const posts = await getPosts();

    // forEach : 주어진 함수를 배욜 요소 각각에 대해 실행
    posts.forEach((post) => {
        const postEl = document.createElement("div");
        postEl.classList.add("post");
        postEl.innerHTML = `
     		 <div class="number">${post.id}</div>
     		 <div class="post-info">
      		    <h2 class="post-title">${post.title}</h2>
      		    <p class="post-body">${post.body}</p>
    		 </div>
    `;

        postsContainer.appendChild(postEl);
    });
}

// Show loader & fetch more posts
function showLoading() {
    loading.classList.add("show");

    setTimeout(() => {
        loading.classList.remove("show");

        setTimeout(() => {
            page++;
            showPosts();
        }, 300);
    }, 1000);
}

// Filter posts by input
function filterPosts(e) {
    const term = e.target.value.toUpperCase();
    const posts = document.querySelectorAll(".post");

    posts.forEach((post) => {
        const title = post.querySelector(".post-title").innerText.toUpperCase();
        const body = post.querySelector(".post-body").innerText.toUpperCase();

        if (title.indexOf(term) > -1 || body.indexOf(term) > -1) {
            post.style.display = "flex";
        } else {
            post.style.display = "none";
        }
    });
}

// Show initial posts
showPosts();

window.addEventListener("scroll", () => {
    const { scrollTop, scrollHeight, clientHeight } = document.documentElement;

    if (scrollTop + clientHeight >= scrollHeight - 5) {
        showLoading();
    }
});

filter.addEventListener("input", filterPosts);

kirin.log

boma91@gmail.com

이전 포스트

전개연산자(spread) vs 나머지 매개변수

다음 포스트

🎨 Scroll-blog

🪐 logic

전개연산자(spread) vs 나머지 매개변수

🎨 Calculator

0개의 댓글