Smart-Meal/explore.js at main · Ricardo-21/Smart-Meal · 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
74
75
document.addEventListener('DOMContentLoaded', () => {
    let recipeContainer = document.querySelector(".recipe");
    //Firebase
    dbRef.ref("users/").on("child_added", snap => {
        let user = snap.val();
        if(user.posts){
            let posts = Object.keys(user.posts).map(key => user.posts[key]);
            posts.forEach((dish, index) => {
                if(index === 0){
                    makePost(dish, dish.title, recipeContainer, true, dish.id, 'e', '',dish.img)
                }
                else{
                    makePost(dish, dish.title, recipeContainer, true, dish.id, 'e','', dish.img)
                }
            });
        }

        window.addEventListener('scroll', () => {
            let currentY = window.pageYOffset;

            let posts = document.querySelectorAll('.post-cont');

            posts.forEach((post, index) => {
                var element = post;
                var position = element.getBoundingClientRect();

                // checking whether fully visible
                if(position.top >= 0 && position.bottom <= window.innerHeight) {
                    // console.log('Element is fully visible in screen', post);
                    element.firstChild.style.opacity = 1;
                }

            })


        })
    });

    //JSON server
    // fetch('http://localhost:3000/posts')
    // .then(res => res.json())
    // .then(data => {
    //     console.log(data);
    //     data.forEach((dish, index) => {

    //         if(index === 0){
    //             makePost(dish, dish.title, recipeContainer, true, dish.id, 'e')
    //         }
    //         else{
    //             makePost(dish, dish.title, recipeContainer, true, dish.id,'e')
    //         }
    //     });

    //     window.addEventListener('scroll', () => {
    //         let currentY = window.pageYOffset;

    //         let posts = document.querySelectorAll('.post-cont');

    //         posts.forEach((post, index) => {
    //             var element = post;
    //             var position = element.getBoundingClientRect();

    //             // checking whether fully visible
    //             if(position.top >= 0 && position.bottom <= window.innerHeight) {
    //                 // console.log('Element is fully visible in screen', post);
    //                 element.firstChild.style.opacity = 1;
    //             }

    //         })


    //     })
    // })

})