https://newsapi.surge.sh/list_folder/src/list.js

1(function () {
2    function $class(cl) {
3        return document.getElementsByClassName(cl);
4    }
5
6    function $(selector) {
7        return document.querySelector(selector);
8    }
9
10    function checkStatus(response) {
11        if (response.status === 200) {
12            return Promise.resolve(response);
13        } else {
14            return Promise.reject(new Error(response.statusText));
15        }
16    }
17
18    function getJSON(response) {
19        return response.json();
20    }
21
22    const general = "https://newsapi.org/v2/everything?q=general&pagesize=100&apiKey=8720fdbbd7504665a4e56dfa042a5d4c";
23
24    let getWhole = [[], [], [], [], [], [], [], [], [], [], [], [], [], [], [], [], [], [], [], []];
25    let getNewsArr = [];
26    let filterArr = new Array(100);
27    let tempData = [];
28    let filterWholeArr = [];
29    let pageCounter = 1;
30    let checkUrl = "general";
31    let imgCounter = 1;
32
33    function fillNewsArr(data, br, i, counter) {
34        if (data.articles[br + counter].author === null) { data.articles[br + counter].author = "Unknown" };
35        getWhole[i][br] = {
36            title: data.articles[br + counter].title,
37            img: data.articles[br + counter].urlToImage,
38            author: data.articles[br + counter].author,
39            content: data.articles[br + counter].content,
40            date: data.articles[br + counter].publishedAt.split("T")[0],
41            link: data.articles[br + counter].url,
42            rate: Math.floor(Math.random() * 10 + 1),
43            id: imgCounter
44        }
45        imgCounter++;
46    }
47
48    function setDataInHtml(data, pageCounter) {
49        let counter = 0;
50        for (let i = 0; i < 20; i++) {
51            for (let br = 0; br < 5; br++) {
52                $class("img" + (br + 1))[0].innerHTML = "";
53                $class("info" + (br + 1))[0].innerHTML = "";
54                fillNewsArr(data, br, i, counter);
55                $class("img" + (br + 1))[0].insertAdjacentHTML("afterbegin", `<img src="${getWhole[pageCounter - 1][br].img}" alt="News${br}" class="img img${getWhole[pageCounter - 1][br].id}">`);
56                $class("info" + (br + 1))[0].insertAdjacentHTML("afterbegin", `<p>Title: "${getWhole[pageCounter - 1][br].title}"</p> <br> <p>Author: "${getWhole[pageCounter - 1][br].author}"</p> <br> <p>Date: "${getWhole[pageCounter - 1][br].date}"</p> <br> <p>Rate: "${getWhole[pageCounter - 1][br].rate}"</p>`);
57            }
58            counter += 5;
59        }
60        fillFilterArr();
61    }
62
63    function fillFilterArr() {
64        let counter = 0;
65        for (let i = 0; i < 20; i++) {
66            for (let j = 0; j < 5; j++) {
67                filterArr[counter] = getWhole[i][j];
68                counter++;
69            }
70        }
71    }
72
73    function whichBtn(elem, counter, input, i) {
74        if (elem.toLowerCase().includes(input)) {
75            tempData[counter] = filterArr[i];
76            return true;
77        } else {
78            return false;
79        }
80    }
81
82    function filter() {
83        event.preventDefault();
84        tempData = [];
85        let userInp = $class("search-bar")[0].value.toLowerCase();
86        let titleBtn = $class("title-btn")[0];
87        let authorBtn = $class("author-btn")[0];
88        let counter = 0;
89        for (let i = 0; i < filterArr.length; i++) {
90            if (userInp === "") {
91                return;
92            }
93            if (titleBtn.checked) {
94                if (whichBtn(filterArr[i].title, counter, userInp, i)) {
95                    counter++;
96                }
97                checkUrl = "title";
98            } else if (authorBtn.checked) {
99                if (whichBtn(filterArr[i].author, counter, userInp, i)) {
100                    counter++;
101                }
102                checkUrl = "author";
103            } else {
104                if (whichBtn(filterArr[i].date, counter, userInp, i)) {
105                    counter++;
106                }
107                checkUrl = "date";
108            }
109        }
110        if (tempData.length === 0) {
111            alert("Nema rezultata za unijeti izraz!");
112            return;
113        }
114        tempToWhole();
115        setFilterArr();
116    }
117

118    function filterByRate() {
119        tempData = [];
120        checkUrl = "rates";
121        let counter = 0;
122        for (let i = 0; i < filterArr.length; i++) {
123            if (Number(event.target.value) <= filterArr[i].rate) {
124                tempData[counter] = filterArr[i];
125                counter++;
126            }
127        }
128        tempToWhole();
129        setFilterArr();
130    }
131
132    function tempToWhole() {
133        let counter = 0;
134        filterWholeArr = [];
135        let num = Math.ceil(tempData.length / 5);
136        if (num > 5) {
137            num = 5;
138        }
139        for (let i = 0; i < num; i++) {
140            let arr = [];
141            for (let j = 0; j < 5; j++) {
142                if (tempData[counter] !== undefined) {
143                    arr[j] = tempData[counter];
144                    arr[j].id = counter;
145                }
146                counter++;
147            }
148            filterWholeArr.push(arr);
149        }
150    }
151
152    function setFilterArr() {
153        let num = Math.ceil(tempData.length / 5);
154        for (let br = 0; br < 5; br++) {
155            if (pageCounter > num) {
156                alert("Nema vise stranica!");
157                break;
158            }
159            $class("img" + (br + 1))[0].innerHTML = "";
160            $class("info" + (br + 1))[0].innerHTML = "";
161            if (filterWholeArr[pageCounter - 1][br] !== undefined) {
162                $class("img" + (br + 1))[0].insertAdjacentHTML("afterbegin", `<img src="${filterWholeArr[pageCounter - 1][br].img}" alt="News${br}" "class="img img${filterWholeArr[pageCounter - 1][br].id}">`);
163                $class("info" + (br + 1))[0].insertAdjacentHTML("afterbegin", `<p>Title: "${filterWholeArr[pageCounter - 1][br].title}"</p> <br> <p>Author: "${filterWholeArr[pageCounter - 1][br].author}"</p> <br> <p>Date: "${filterWholeArr[pageCounter - 1][br].date}"</p> <br> <p>Rate: "${filterWholeArr[pageCounter - 1][br].rate}"</p>`);
164            }
165        }
166    }
167
168    function fetchIt(url, pageCounter) {
169        if (isNaN(pageCounter)) {
170            pageCounter = 1;
171        }
172        fetch(url)
173            .then(checkStatus)
174            .then(getJSON)
175            .then(function (data) {
176                setDataInHtml(data, pageCounter);
177            })
178            .catch(function (error) {
179                alert("Doslo je do greske!");
180            });
181    }
182
183    function firstFetch() {
184        pageCounter = 1;
185        fetchIt(general, pageCounter);
186        $class("prev")[0].style.visibility = "";
187        $class("next")[0].style.visibility = "";
188    }
189
190    $class("submit")[0].addEventListener("click", function () {
191        filter();
192    });
193
194    function pages() {
195        if (event.target.innerHTML === "Prev") {
196            pageCounter--;
197        } else if (event.target.innerHTML === "Next") {
198            pageCounter++;
199        } else {
200            pageCounter = Number(event.target.innerHTML);
201        }
202        if (pageCounter <= 1) {
203            pageCounter = 1;
204            $class("prev")[0].style.visibility = "hidden";
205            $class("next")[0].style.visibility = "";
206        } else if (pageCounter >= 5) {
207            pageCounter = 5;
208            $class("next")[0].style.visibility = "hidden";
209            $class("prev")[0].style.visibility = "";
210        } else {
211            $class("prev")[0].style.visibility = "";
212            $class("next")[0].style.visibility = "";
213        }
214        imgCounter -= 100;
215    }
216
217    $class("pages-inner")[0].addEventListener("click", function () {
218        pages();
219        if (checkUrl === "general") {
220            fetchIt(general, pageCounter)
221        } else {
222            setFilterArr();
223        }
224    });
225
226    $class("menu")[0].addEventListener("click", function () {
227        $class("menu")[0].classList.toggle("change");
228        $class("mobile")[0].classList.toggle("active");
229        $class("search")[0].classList.toggle("search-active");
230    });
231
232    $class("rates")[0].addEventListener("mouseup", filterByRate);
233
234    $(".columns").addEventListener("click", function (event) {
235        if (event.target.classList.contains("img")) {
236            let x = parseInt(event.target.className.match(/\d+/g));
237            getModalData(filterArr, x);
238        }
239    });

240
241    function getModalData(array, x) {
242        $(".modal").classList.remove("modal-out");
243        $(".modal").classList.add("modal-in");
244        $(".wrapper").classList.add("blocked");
245        $("body").classList.add("modal-open");
246        $(".modal").id = "in";
247        $(".modal").style.display = "block";
248        $(".modalTitle").innerText = array[x - 1].title;
249        if (array[x - 1].author !== null && array[x - 1].author !== "") {
250            $(".modalAuthor").innerHTML = `Author: ${array[x - 1].author}<span class="modalDate">Date: ${array[x - 1].date}</span>`;
251        }
252        else {
253            $(".modalAuthor").innerHTML = `Author: Unknown<span class="modalDate">Date: ${array[x - 1].date}</span>`;
254        }
255        $(".modalImg").src = `${array[x - 1].img}`;
256        if (array[x - 1].content === null) {
257            $(".modalContent").innerText = "No content. Sorry!";
258        }
259        else {
260            $(".modalContent").innerText = array[x - 1].content.split("[")[0];
261        }
262        $(".modalLink").innerHTML = `<a href="${array[x - 1].link}" target="_blank">Click Here for More</a>`;
263    }
264
265    function closeModal() {
266        $(".modal").classList.remove("modal-in");
267        $(".modal").classList.add("modal-out");
268        $(".wrapper").classList.remove("blocked");
269        $("body").classList.remove("modal-open");
270        $(".modal").id = "out";
271        let modalOut = setInterval(function () {
272            $(".modal").style.display = "none";
273        }, 1000);
274        clearInterval(modalOut);
275    }
276
277    $(".close").addEventListener("click", function () {
278        closeModal();
279    });
280
281    firstFetch();
282})();