https://dogstagram-app.netlify.app/assets/doggo.js

1const dogs = `https://dog.ceo/api/breeds/image/random/6`;
2const names = `https://randomuser.me/api/`;
3
4const postsContainer = document.getElementById('posts-container');
5
6// Fetch Dog API
7async function getPosts() {
8    const response = await fetch(dogs);
9    const data = await response.json();
10    return data;
11}
12
13// Fetch Fake User API
14async function getUser() {
15    const response = await fetch(names);
16    const data = await response.json();
17
18    const profilePic = data.results[0].picture.thumbnail;
19    const first = data.results[0].name.first;
20    const last = data.results[0].name.last;
21    const profileName = `${first} ${last}`;
22
23    const patterns = [
24        `${first}${last}`, `${first}_${last}`, `${first}.${last}`,
25        `${first}${last}${Math.floor(Math.random()*99)}`,
26        `${first.charAt(0)}${last}`, `_${first}_${last}_`,
27        `${first}${Math.floor(Math.random()*999)}`, `${first}_${Math.floor(Math.random()*999)}`,
28        `${last}${first}`, `${last}_${first}`
29    ];
30    const profileUsername = patterns[Math.floor(Math.random() * patterns.length)];
31
32    return [profilePic, profileUsername, profileName];
33}
34
35// Create a post element
36function createPost({ profilePic, username, fullName, imageUrl, likes, breedTags }) {
37    const postElement = document.createElement('div');
38    postElement.classList.add('post');
39
40    postElement.innerHTML = `
41        <div class="post-header">
42            <div class="post-profile-img">
43                <img src="${profilePic}" id="profile-image" alt="Fictional profile picture of ${username}">
44            </div>
45            <div class="post-profile-txt">
46                <h4>@${username} &nbsp;<span class="time-stamp">⚬ ${Math.floor(Math.random() * 23) + 1}h</span></h4>
47            </div>
48        </div>
49        <div class="post-body">
50            <img src="${imageUrl}" id="post-image" alt="A Dogstagram randomly generated image via the Dog API, showing: ${breedTags.replace(/#/g, '')}. ">
51            <div class="mx-1 my-1">
52                <div class="row">
53                    <p class="sharing h2"><i class="fas fa-heart"></i></p>
54                    <p class="sharing h2"><i class="fas fa-comment-dots"></i></p>
55                    <p class="sharing h2"><i class="fas fa-paper-plane"></i></p>
56                </div>
57                <div class="like row">
58                    <h4 class="like-count">${likes} likes</h4>
59                </div>
60                <div class="like row">
61                    <strong>${username}</strong> &nbsp; ${breedTags}
62                </div>
63            </div>
64        </div>
65    `;
66
67    postsContainer.appendChild(postElement);
68}
69
70// Generate hashtags for a dog
71function getBreed(url) {
72    const [http, blank, domain, breeds, breed, image] = url.split("/");
73    const adjectives1 = [
74        "#dogstagram", "#dog", "#doggo", "#pupper", "#puppylove", "#puppy", "#InstaDog",
75        "#FluffyDog", "#HappyPup", "#CuteDog", "#FurryFriend", "#Pawsome", "#TailWag", "#DogLife",
76        "#PlayfulPup", "#CuddleBuddy", "#DogsofInstagram", "#InstaPuppy", "#FurBaby", "#BarkHappy",
77        "#DogMood", "#DogSquad", "#WoofWoof", "#Pupperazzi", "#DogVibes", "#DogLover", "#PuppyEyes",
78        "#DogsOfTheWorld", "#FetchTime", "#SnugglePup", "#DogAdventures"
79    ];
80    const adjectives2 = [
81        "#Adopt", "#Rescue", "#Foster", "#ShelterDog", "#AdoptDontShop", "#DogTraining", "#DogCare",
82        "#RescueDog", "#RescueDogsOfInstagram", "#PuppyRescue", "#DogLoversUnite", "#PetAdoption",
83        "#SaveDogs", "#DogRehab", "#PuppyLife", "#DogWellness", "#DogHealth", "#FosterPup",
84        "#DogSitting", "#DogCommunity", "#DogsAreFamily", "#FureverHome", "#DogSupport", "#PawFriends"
85    ];
86
87    const rand1 = adjectives1[Math.floor(Math.random() * adjectives1.length)];
88    const rand2 = adjectives2[Math.floor(Math.random() * adjectives2.length)];
89
90    if(breed.includes("-")) {
91        const b = breed.split("-");
92        return `#${b[1]} #${b[0]} ${rand1} ${rand2}`;
93    } else {
94        return `#${breed} ${rand1} ${rand2}`;
95    }
96}
97
98// Heart toggle and like increment
99document.addEventListener('click', function(e){
100    if(e.target.classList.contains('fa-heart')){
101        const heart = e.target;
102        heart.classList.toggle('liked-heart');
103
104        const likeCountEl = heart.closest('.post-body').querySelector('.like-count');
105        let currentLikes = parseInt(likeCountEl.textContent);
106        if(heart.classList.contains('liked-heart')){
107            currentLikes += 1;
108        } else {
109            currentLikes -= 1;
110        }
111        likeCountEl.textContent = `${currentLikes} likes`;
112    }
113});
114
115// Double-click image to like
116document.addEventListener('dblclick', function(e){
117    if(e.target.id === 'post-image'){
118        const heartIcon = e.target.closest('.post-body').querySelector('.fa-heart');
119        if(!heartIcon.classList.contains('liked-heart')){
120            heartIcon.classList.add('liked-heart');
121            const likeCountEl = heartIcon.closest('.post-body').querySelector('.like-count');
122            let currentLikes = parseInt(likeCountEl.textContent);
123            likeCountEl.textContent = `${currentLikes + 1} likes`;
124        }
125    }
126});
127
128// Load posts
129async function showPosts() {
130    const posts = await getPosts();
131    for (let i = 0; i < posts.message.length; i++) {
132        const profile = await getUser();
133        const likes = Math.floor(Math.random() * 999) + 1;
134
135        createPost({
136            profilePic: profile[0],
137            username: profile[1],
138            fullName: profile[2],
139            imageUrl: posts.message[i],

140            likes,
141            breedTags: getBreed(posts.message[i])
142        });
143    }
144}
145
146// Show Jager first
147async function showJagerPost() {
148    createPost({
149        profilePic: "https://avatars.githubusercontent.com/u/35354742?v=4",
150        username: "TheKicker",
151        fullName: "TheKicker",
152        imageUrl: "assets/images/Jager.png",
153        likes: Math.floor(Math.random() * 999) + 1,
154        breedTags: "#DutchShepherd #AmericanStaffordshire #Terrier #Dogstagram #Woof"
155    });
156}
157
158// Loader
159const loader = document.querySelector('.loader');
160function showLoading(){
161    loader.classList.add('show');
162    setTimeout(()=>{
163        loader.classList.remove('show');
164        showPosts();
165    }, 1500);
166}
167
168window.addEventListener('scroll', () => {
169    const { scrollTop, scrollHeight, clientHeight } = document.documentElement;
170    if(scrollTop + clientHeight >= scrollHeight - 5){
171        showLoading();
172    }
173});
174
175// Modal
176function openModal() { document.getElementById("myModal").style.display = "block"; }
177function closeModal() { document.getElementById("myModal").style.display = "none"; }
178
179// Initial load
180(async function init(){
181    await showJagerPost();
182    await showPosts();
183})();