.your_search_results:
"; + return fetch(endpoint) + .then((response) => response.json()) + .then((data) => { + let promises = []; + for (let i = 0; i < 10; i++) { + let symbol = data[i].symbol; + let imageUrl = ""; + let promise = fetch( + `https://stock-exchange-dot-full-stack-course-services.ew.r.appspot.com/api/v3/company/profile/${data[i].symbol}` + ) + .then((response) => response.json()) + .then((data) => { + let changesNegPoz = + data.profile.changesPercentage > 0 + ? "text-success" + : "text-danger"; + const pEls = resultsDiv.querySelectorAll("div p"); + pEls[i].textContent = `Change: ${data.profile.changesPercentage}%`; + pEls[i].classList.add(changesNegPoz); + if (data.profile.changesPercentage > 0) { + pEls[i].innerHTML += ` ▲`; + } else if (data.profile.changesPercentage < 0) { + pEls[i].innerHTML += ` ▼`; + } + imageUrl = data.profile.image; + + const imgEl = resultsDiv.querySelector( + `img[data-symbol="${symbol}"]` + ); + if (imgEl) { + if (imageUrl) { + imgEl.src = imageUrl; + } else { + return; + } + } + const firstPEl = resultsDiv.querySelectorAll("p"); + if (firstPEl) { + firstPEl.textContent = `Changes Percentage: ${data.profile.changesPercentage}%`; + firstPEl.classList.add(changesNegPoz); + const triangleIcon = document.createElement("span"); + triangleIcon.classList.add("triangle"); + triangleIcon.classList.add( + data.profile.changesPercentage > 0 ? "positive" : "negative" + ); + firstPEl.appendChild(triangleIcon); + } + }) + .catch((error) => (imgEl.style.display = "none")); //how to bring it to work ); + promises.push(promise); + resultsDiv.innerHTML += ` + + `; + } + return Promise.all(promises); + }) + .catch((error) => console.log(error)); +} + +autoSearchDebounce = () => { + clearTimeout(timeout); + timeout = setTimeout(async () => { + showLoader(); + await getNameAndSymbol(searchBoxValue.value); + hideLoader(); + }, 500); +}; + +bothFunctions = () => { + autoSearchDebounce(); +}; + +searchButton.addEventListener("click", autoSearchDebounce, queryAddress); +searchBoxValue.addEventListener("keyup", autoSearchDebounce); diff --git a/js/script_milestone1.js b/js/script_milestone1.js new file mode 100644 index 0000000..c95185d --- /dev/null +++ b/js/script_milestone1.js @@ -0,0 +1,41 @@ +let searchBoxValue = document.getElementById("searchBox"); +const searchButton = document.getElementById("searchButton"); +const resultsDiv = document.getElementById("resultsDiv"); +showLoader = () => { + document.getElementById("loading").style.display = "unset"; +}; +hideloader = () => { + document.getElementById("loading").style.display = "none"; +}; +endpointFunction = () => { + showLoader(); + let endpoint = + "https://stock-exchange-dot-full-stack-course-services.ew.r.appspot.com/api/v3/search?query=" + + searchBoxValue.value + + "&limit=10&exchange=NASDAQ"; + async function getNameAndSymbol() { + await fetch(endpoint) + .then((response) => response.json()) + .then((data) => { + console.log(data); + console.log(data.length); + resultsDiv.innerHTML = ""; + for (let i = 0; i < 10; i++) { + resultsDiv.innerHTML += `${data[i].name}, (${data[i].symbol})`; + } + }) + .catch((error) => console.log("error")); + } + hideloader(); + getNameAndSymbol(); +}; + +searchButton.addEventListener("click", endpointFunction); + +/*Questions! +1. Why isn't searchButton.addEventListener working while being in the beginning of the page? +2. How can I make endpointFunction more lovely, what can I get rid of? +3. How to work with showLoader and hideloader functions in a better way? + + +*/ diff --git a/js/searchForm.js b/js/searchForm.js new file mode 100644 index 0000000..998862a --- /dev/null +++ b/js/searchForm.js @@ -0,0 +1,43 @@ +class SearchForm { + constructor(searchBox, searchButton, loader) { + this.searchBox = searchBox; + this.searchButton = searchButton; + this.loader = loader; + this.timeout = 0; + + this.searchButton.addEventListener("click", () => { + this.autoSearchDebounce(); + this.queryAddress(); + }); + this.searchBox.addEventListener("keyup", () => this.autoSearchDebounce()); + } + + showLoader() { + this.loader.style.display = "unset"; + } + + hideLoader() { + this.loader.style.display = "none"; + } + + queryAddress() { + window.location.search = `query=${this.searchBox.value}`; + } + + autoSearchDebounce() { + clearTimeout(this.timeout); + this.timeout = setTimeout(async () => { + this.showLoader(); + await searchResults.getNameAndSymbol(this.searchBox.value); + this.hideLoader(); + }, 500); + } +} + +document.addEventListener("DOMContentLoaded", () => { + const searchBox = document.getElementById("searchBox"); + const searchButton = document.getElementById("searchButton"); + const loader = document.getElementById("loading"); + + new SearchForm(searchBox, searchButton, loader); +}); diff --git a/js/searchResults.js b/js/searchResults.js new file mode 100644 index 0000000..14a3dc2 --- /dev/null +++ b/js/searchResults.js @@ -0,0 +1,80 @@ +class SearchResults { + constructor(resultsDiv, baseUrl) { + this.resultsDiv = resultsDiv; + this.baseUrl = baseUrl; + } + + highlightText(text, query) { + const regex = new RegExp(`(${query})`, "gi"); + return text.replace(regex, "$1"); + } + + async getNameAndSymbol(name) { + let endpoint = `${this.baseUrl}/search?query=${name}&limit=10&exchange=NASDAQ`; + this.resultsDiv.innerHTML = "