vidflow/script.js at main · Natalia-Timote/vidflow · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
const containerVideos = document.querySelector('.videos__container');

async function searchShowVideos() {
    try {
        const search = await fetch("http://localhost:3000/videos");
        const videos = await search.json();

        videos.forEach((video) => {
            if(video.categoria == "") {
                throw new Error('Vídeo sem categoria');
            }
            containerVideos.innerHTML += `
                <li class="videos__item">
                        <iframe src="${video.url}" title="${video.titulo}" frameborder="0" allowfullscreen></iframe>
                        <div class="description-video">
                            <img class="img-channel" src="${video.imagem}" alt="Logo do canal">
                            <h3 class="title-video">${video.titulo}</h3>
                            <p class="title-channel">${video.descricao}</p>
                            <p class="categoria" hidden>${video.categoria}</p>
                        </div>
                    </li>
                `;
        })
    } catch(error) {
        containerVideos.innerHTML = `<p>Houve um erro ao carregar os vídeos: ${error}.</p>`;
    }
}

searchShowVideos();

const searchBar = document.querySelector('.search__input');

searchBar.addEventListener('input', filterSearch);

function filterSearch() {
    const videos = document.querySelectorAll('.videos__item');

    if(searchBar.value != "") {
        for(let video of videos) {
            let title = video.querySelector('.title-video').textContent.toLowerCase();
            let filterValue = searchBar.value.toLowerCase();

            if(!title.includes(filterValue)) {
                video.style.display = 'none';
            } else {
                video.style.display = 'block';
            }
        }
    } else {
        video.style.display = 'block';
    }
}

const categoryBtn = document.querySelectorAll('.superior__item');

categoryBtn.forEach((button) => {
    let categoryName = button.getAttribute('name');
    button.addEventListener('click', () => filterByCategory(categoryName));
});

function filterByCategory(filter) {
    const videos = document.querySelectorAll('.videos__item');
    for(let video of videos) {
        let category = video.querySelector('.categoria').textContent.toLowerCase();
        let filterValue = filter.toLowerCase();

        if(!category.includes(filterValue) && filterValue != 'tudo') {
            video.style.display = 'none';
        } else {
            video.style.display = 'block';
        }
    }
}