This section allows you to view all posts made by this member. Note that you can only see posts made in areas you currently have access to.
Messages - efko
1
« on: 09 November 2025, 22:20:30 »
Spoiler for modalV1 JS :
import { correctName } from "./helper.js";
import { createProduct } from "./api.js";
const createProductNameInput = document.getElementById("name");
const createProductPriceInput = document.getElementById("price");
const createProductImageUrlInput = document.getElementById("image");
const createProductDescriptionInput = document.getElementById("description");
const createProductCharacteristicKeyInput = document.getElementById(
"characteristics-key"
);
const createProductCharacteristicValueInput = document.getElementById(
"characteristics-value"
);
const errorParagraph = document.createElement("p");
const createProductBtn =
document.getElementsByClassName("create-product-btn")[0];
const articleContainer = document.getElementsByTagName("article")[0];
const newProduct = {
name: null,
price: -1,
image: null,
description: null,
characteristics: {},
};
articleContainer.addEventListener("click", function (event) {
const clickedElement = event.target;
console.log(clickedElement);
if (
clickedElement.matches(".delete-btn") ||
clickedElement.matches("svg") ||
clickedElement.matches("path")
) {
const span = clickedElement.closest(".key-value-span");
const key = span.innerText.split(": ")[0];
delete newProduct.characteristics[key];
console.log(newProduct);
span.remove();
}
});
function setUpListeners() {
removeEventListeners();
createProductNameInput.addEventListener("blur", validation.productName);
createProductPriceInput.addEventListener("blur", validation.productPrice);
createProductImageUrlInput.addEventListener(
"blur",
validation.productImageUrl
);
createProductDescriptionInput.addEventListener(
"blur",
validation.productDesctiption
);
createProductCharacteristicKeyInput.addEventListener(
"blur",
validation.productCharacteristicKey
);
createProductCharacteristicValueInput.addEventListener(
"blur",
validation.productCharacteristicValue
);
createProductBtn.removeEventListener("click", createNewProduct);
createProductBtn.addEventListener("click", createNewProduct);
function createNewProduct(event) {
if (
newProduct.name &&
newProduct.price &&
newProduct.image &&
newProduct.description
) {
createProduct(newProduct, "http://localhost:3000/products");
articleContainer.innerHTML = "";
}
resetInputs();
}
}
function removeEventListeners() {
createProductNameInput.removeEventListener("blur", validation.productName);
createProductPriceInput.removeEventListener("blur", validation.productPrice);
createProductImageUrlInput.removeEventListener(
"blur",
validation.productImageUrl
);
createProductDescriptionInput.removeEventListener(
"blur",
validation.productDesctiption
);
createProductCharacteristicKeyInput.removeEventListener(
"blur",
validation.productCharacteristicKey
);
createProductCharacteristicValueInput.removeEventListener(
"blur",
validation.productCharacteristicValue
);
}
const validation = {
productName: function (event) {
removeErrorMsg();
const nameInputValue = event.target.value.trim();
if (nameInputValue.length > 3) {
newProduct.name = correctName(nameInputValue);
// console.log(newProduct);
} else {
renderError(createProductNameInput, "Product name is not correct.");
}
},
productPrice: function (event) {
removeErrorMsg();
const priceInputValue = parseFloat(event.target.value);
// console.log(priceInputValue);
if (priceInputValue > 0 && priceInputValue < 10000) {
newProduct.price = priceInputValue;
// console.log(newProduct);
} else {
renderError(
createProductPriceInput,
"Product price is not in defined range."
);
// console.log("Product price is not in defined range.");
}
},
productImageUrl: function (event) {
removeErrorMsg();
const imageInputValue = event.target.value;
const allowedProtocols = ["www", "http://", "https://"];
const allowedExtensions = [".png", ".jpg", ".jpeg"];
let isCorrectProtocol = false;
let isCorrectExtension = false;
for (const protocol of allowedProtocols) {
if (imageInputValue.startsWith(protocol)) {
isCorrectProtocol = true;
}
}
for (const extension of allowedExtensions) {
if (imageInputValue.endsWith(extension)) {
isCorrectExtension = true;
}
}
if (isCorrectExtension && isCorrectProtocol) {
newProduct.image = imageInputValue;
// console.log(newProduct);
} else {
renderError(createProductImageUrlInput, "Url is not valid!");
// console.log("Url is not valid!");
}
},
productDesctiption: function (event) {
removeErrorMsg();
const descriptionInputValue = event.target.value;
if (
descriptionInputValue.length > 20 &&
descriptionInputValue.length < 200
) {
newProduct.description = descriptionInputValue;
// console.log(newProduct);
} else {
renderError(
createProductDescriptionInput,
"Description is not defined well!"
);
// console.log("Description is not defined well!");
}
},
productCharacteristicKey: function (event) {
const keyInputValue = event.target.value.trim();
handleNewCharacteristics(
keyInputValue,
createProductCharacteristicValueInput.value
);
},
productCharacteristicValue: function (event) {
const valueInputValue = event.target.value.trim();
handleNewCharacteristics(
createProductCharacteristicKeyInput.value,
valueInputValue
);
},
};
function handleNewCharacteristics(key, value) {
removeErrorMsg();
if (key && value) {
createCharacteristicsElement(key, value);
newProduct.characteristics[key] = value;
resetCharacteristics();
console.log(newProduct);
} else {
renderError(articleContainer, "Key or value is not defined!");
}
function resetCharacteristics() {
createProductCharacteristicKeyInput.value = "";
createProductCharacteristicValueInput.value = "";
}
}
function createCharacteristicsElement(key, value) {
const spanEl = `
<span class="key-value-span"
>${key}: ${value}
<div class="delete-btn">
<svg
width="15px"
height="15px"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g
id="SVGRepo_tracerCarrier"
stroke-linecap="round"
stroke-linejoin="round"
></g>
<g id="SVGRepo_iconCarrier">
<g id="Menu / Close_MD">
<path
id="Vector"
d="M18 18L12 12M12 12L6 6M12 12L18 6M12 12L6 18"
stroke="#000000"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
></path>
</g>
</g>
</svg>
</div>
</span>`;
articleContainer.insertAdjacentHTML("beforeend", spanEl);
}
function resetInputs() {
createProductNameInput.value = "";
createProductPriceInput.value = "";
createProductImageUrlInput.value = "";
createProductDescriptionInput.value = "";
createProductCharacteristicKeyInput.value = "";
createProductCharacteristicValueInput.value = "";
}
function renderError(element, msg) {
errorParagraph.classList.add("errParagraph");
errorParagraph.innerText = msg;
element.insertAdjacentElement("afterend", errorParagraph);
}
function removeErrorMsg() {
errorParagraph.remove();
}
export { setUpListeners };
//ZADATAK:
//napisati drugi nacin za kreiranje karakteristika u newProduct.characteristic, tako da se pri kliku na dugme "create product" , pokupe sve vrednosti i tek tad dodaju u objekat
//2.zadatak
//registracija i logovanje
2
« on: 09 November 2025, 22:19:45 »
Spoiler for modal JS :
import { correctName } from "./helper.js";
const createProductNameInput = document.getElementById("name");
const createProductPriceInput = document.getElementById("price");
const createProductImageUrlInput = document.getElementById("image");
const createProductDescriptionInput = document.getElementById("description");
const createProductCharacteristicKeyInput = document.getElementById(
"characteristics-key"
);
const createProductCharacteristicValueInput = document.getElementById(
"characteristics-value"
);
const articleContainer = document.getElementsByTagName("article")[0];
const newProduct = {
name: null,
price: -1,
image: null,
description: null,
characteristics: {},
};
articleContainer.addEventListener("click", function (event) {
const clickedElement = event.target;
console.log(clickedElement);
if (
clickedElement.matches(".delete-btn") ||
clickedElement.matches("svg") ||
clickedElement.matches("path")
) {
const span = clickedElement.closest(".key-value-span");
const key = span.innerText.split(": ")[0];
delete newProduct.characteristics[key];
console.log(newProduct);
span.remove();
}
});
createProductNameInput.addEventListener("blur", function (event) {
const nameInputValue = correctName(event.target.value.trim());
if (nameInputValue.length > 3) {
newProduct.name = nameInputValue;
console.log(newProduct);
} else {
console.log("Product name input is empty.");
}
});
createProductPriceInput.addEventListener("blur", function (event) {
const priceInputValue = parseFloat(event.target.value);
console.log(priceInputValue);
if (priceInputValue > 0 && priceInputValue < 10000) {
newProduct.price = priceInputValue;
console.log(newProduct);
} else {
console.log("Product price is not in defined range.");
}
});
createProductImageUrlInput.addEventListener("blur", function (event) {
const imageInputValue = event.target.value;
const allowedProtocols = ["www", "http://", "https://"];
const allowedExtensions = [".png", ".jpg", ".jpeg"];
let isCorrectProtocol = false;
let isCorrectExtension = false;
for (const protocol of allowedProtocols) {
if (imageInputValue.startsWith(protocol)) {
isCorrectProtocol = true;
}
}
for (const extension of allowedExtensions) {
if (imageInputValue.endsWith(extension)) {
isCorrectExtension = true;
}
}
if (isCorrectExtension && isCorrectProtocol) {
newProduct.image = imageInputValue;
console.log(newProduct);
} else {
console.log("Url is not valid!");
}
});
createProductDescriptionInput.addEventListener("blur", function (event) {
const descriptionInputValue = event.target.value;
if (descriptionInputValue.length > 20 && descriptionInputValue.length < 200) {
newProduct.description = descriptionInputValue;
console.log(newProduct);
} else {
console.log("Description is not defined well!");
}
});
createProductCharacteristicKeyInput.addEventListener("blur", function (event) {
const keyInputValue = event.target.value.trim();
handleNewCharacteristics(
keyInputValue,
createProductCharacteristicValueInput.value
);
});
createProductCharacteristicValueInput.addEventListener(
"blur",
function (event) {
const valueInputValue = event.target.value.trim();
handleNewCharacteristics(
createProductCharacteristicKeyInput.value,
valueInputValue
);
}
);
function handleNewCharacteristics(key, value) {
if (key && value) {
createCharacteristicsElement(key, value);
newProduct.characteristics[key] = value;
resetCharacteristics();
console.log(newProduct);
}
function resetCharacteristics() {
createProductCharacteristicKeyInput.value = "";
createProductCharacteristicValueInput.value = "";
}
}
function createCharacteristicsElement(key, value) {
const spanEl = `
<span class="key-value-span"
>${key}: ${value}
<div class="delete-btn">
<svg
width="15px"
height="15px"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g
id="SVGRepo_tracerCarrier"
stroke-linecap="round"
stroke-linejoin="round"
></g>
<g id="SVGRepo_iconCarrier">
<g id="Menu / Close_MD">
<path
id="Vector"
d="M18 18L12 12M12 12L6 6M12 12L18 6M12 12L6 18"
stroke="#000000"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
></path>
</g>
</g>
</svg>
</div>
</span>`;
articleContainer.insertAdjacentHTML("beforeend", spanEl);
}
function resetInputs() {
createProductNameInput.value = "";
createProductPriceInput.value = "";
createProductImageUrlInput.value = "";
createProductDescriptionInput.value = "";
createProductCharacteristicKeyInput.value = "";
createProductCharacteristicValueInput.value = "";
}
3
« on: 09 November 2025, 22:19:08 »
4
« on: 09 November 2025, 22:18:17 »
Spoiler for style CSS :
Spoiler for style SCSS :
5
« on: 09 November 2025, 22:17:01 »
Spoiler for main JS :
import { truncateData, debaunce } from "./helper.js";
import { fetchData } from "./api.js";
import { setUpListeners } from "./modal-v1.js";
const containerProducts =
document.getElementsByClassName("container-section")[0];
const searchInput = document.getElementById("search-input");
const url = "http://localhost:3000/products";
function renderProducts(products) {
products = filterData(products);
containerProducts.innerHTML = products
.map((product) => {
return `
<div class="product">
<img class="product-img" src="${product.image}" alt="${
product.name
}" />
<div class="product-info">
<h2 class="product-name">${product.name}</h2>
<h4 class="product-price">${product.price} $</h4>
<p class="product-description">${truncateData(
product.description
)}</p>
<p class="product-characteristics">${
product.characteristics
? getCharacteristics(product.characteristics)
: "No additional attributes."
}</p>
</div>
</div>`;
})
.join("");
function getCharacteristics(obj) {
let template = "";
for (const [key, value] of Object.entries(obj)) {
//[['color', 'Cloudy White'], ['capacity', '512 GB']]
template += `<p>${key}: ${value}</p>`;
}
return template;
}
}
function filterData(data) {
const searchValue = searchInput.value.toLowerCase().trim();
const filteredData = data.filter((item) =>
item.name.toLowerCase().includes(searchValue)
);
return filteredData;
}
function searchInputLogic() {
fetchData(renderProducts, url);
}
document.addEventListener("DOMContentLoaded", function () {
fetchData(renderProducts, url);
const debaunceLogic = debaunce(searchInputLogic, 2000);
searchInput.addEventListener("input", function (event) {
debaunceLogic();
});
setUpListeners();
});
6
« on: 09 November 2025, 22:16:16 »
Spoiler for products JSON :
7
« on: 09 November 2025, 22:14:33 »
Spoiler for HTML index :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"
></script>
<link rel="stylesheet" href="style.css" />
<script src="main.js" type="module" defer></script>
</head>
<body>
<header>
<h1>TechPoint</h1>
</header>
<main>
<section class="search-section">
<input type="search" id="search-input" placeholder="Product name" />
</section>
<section class="container-section"></section>
</main>
<footer>
<p>Made with JSON-server !</p>
</footer>
<!-- button -->
<div class="btn-add" data-bs-toggle="modal" data-bs-target="#modal">
<div>
<svg
width="30px"
height="30px"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g
id="SVGRepo_tracerCarrier"
stroke-linecap="round"
stroke-linejoin="round"
></g>
<g id="SVGRepo_iconCarrier">
<path
d="M4 12H20M12 4V20"
stroke="#fff"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
></path>
</g>
</svg>
</div>
</div>
<!-- bootstrap modal -->
<!-- Modal -->
<div
class="modal fade"
id="modal"
tabindex="-1"
aria-labelledby="modalLabel"
aria-hidden="true"
>
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalLabel">Create product</h5>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div class="modal-body container-modal-body">
<input
type="text"
placeholder="Name of product"
id="name"
minlength="3"
/>
<br />
<input
type="number"
min="0"
max="10000"
placeholder="Price"
id="price"
/>
<br />
<input type="url" placeholder="Image url" id="image" />
<br />
<textarea
name="description"
id="description"
placeholder="Description"
></textarea>
<fieldset class="characteristics">
<legend>Characteristics</legend>
<div>
<input type="text" placeholder="Key" id="characteristics-key" />
<input
type="text"
placeholder="Value"
id="characteristics-value"
/>
</div>
</fieldset>
<article></article>
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-secondary"
data-bs-dismiss="modal"
>
Close
</button>
<button type="button" class="btn btn-primary create-product-btn">
Create product
</button>
</div>
</div>
</div>
</div>
</body>
</html>
8
« on: 09 November 2025, 22:11:09 »
9
« on: 09 November 2025, 22:10:31 »
10
« on: 09 November 2025, 22:08:43 »
Spoiler for products JSON :
11
« on: 09 November 2025, 22:07:12 »
12
« on: 09 November 2025, 22:06:11 »
Spoiler for main JS :
import { truncateData, debaunce } from "./helper.js";
import { fetchData } from "./api.js";
const containerProducts =
document.getElementsByClassName("container-section")[0];
const searchInput = document.getElementById("search-input");
const addBtn = document.getElementsByClassName("btn-add")[0];
function renderProducts(products) {
products = filterData(products);
console.log(products);
containerProducts.innerHTML = products
.map((product) => {
return `
<div class="product">
<img class="product-img" src="${product.image}" alt="${
product.name
}" />
<div class="product-info">
<h2 class="product-name">${product.name}</h2>
<h4 class="product-price">${product.price} $</h4>
<p class="product-description">${truncateData(
product.description
)}</p>
<p class="product-characteristics">${
product.characteristics
? getCharacteristics(product.characteristics)
: "No additional attributes."
}</p>
</div>
</div>`;
})
.join("");
function getCharacteristics(obj) {
let template = "";
for (const [key, value] of Object.entries(obj)) {
//[['color', 'Cloudy White'], ['capacity', '512 GB']]
template += `<p>${key}: ${value}</p>`;
}
return template;
}
}
function filterData(data) {
const searchValue = searchInput.value.toLowerCase().trim();
// const array = [];
// for (const item of data) {
// if (item.name.includes(searchValue)) {
// array.push(item);
// }
// }
// return array;
const filteredData = data.filter((item) =>
item.name.toLowerCase().includes(searchValue)
);
return filteredData;
}
function searchInputLogic() {
fetchData(renderProducts);
}
document.addEventListener("DOMContentLoaded", function () {
fetchData(renderProducts);
const debaunceLogic = debaunce(searchInputLogic, 2000);
searchInput.addEventListener("input", function (event) {
debaunceLogic();
});
});
13
« on: 09 November 2025, 22:02:00 »
Spoiler for CSS :
Spoiler for SCSS :
14
« on: 09 November 2025, 22:01:10 »
Spoiler for HTML bootstrap modal :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"
></script>
<link rel="stylesheet" href="style.css" />
<!-- <script src="main.js" type="module" defer></script> -->
<!-- <script src="helper.js" defer></script> -->
<script src="modal.js" defer></script>
</head>
<body>
<header>
<h1>Products</h1>
</header>
<main>
<section class="search-section">
<input type="search" id="search-input" placeholder="Product name" />
</section>
<section class="container-section"></section>
</main>
<footer>
<p>Made with JSON-server !</p>
</footer>
<!-- button -->
<div class="btn-add" data-bs-toggle="modal" data-bs-target="#modal">
<div>
<svg
width="30px"
height="30px"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g
id="SVGRepo_tracerCarrier"
stroke-linecap="round"
stroke-linejoin="round"
></g>
<g id="SVGRepo_iconCarrier">
<path
d="M4 12H20M12 4V20"
stroke="#fff"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
></path>
</g>
</svg>
</div>
</div>
<!-- bootstrap modal -->
<!-- Modal -->
<div
class="modal fade"
id="modal"
tabindex="-1"
aria-labelledby="modalLabel"
aria-hidden="true"
>
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalLabel">Create product</h5>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div class="modal-body container-modal-body">
<input
type="text"
placeholder="Name of product"
id="name"
minlength="3"
/>
<br /><br />
<input
type="number"
min="0"
max="10000"
placeholder="Price"
id="price"
/>
<br /><br />
<input type="url" placeholder="Image url" id="image" />
<br /><br />
<textarea
name="description"
id="description"
placeholder="Description"
></textarea>
<fieldset class="characteristics">
<legend>Characteristics</legend>
<input type="text" placeholder="Key" id="characteristics-key" />
<input
type="text"
placeholder="Value"
id="characteristics-value"
/>
</fieldset>
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-secondary"
data-bs-dismiss="modal"
>
Close
</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</body>
</html>
15
« on: 09 November 2025, 21:57:25 »
Spoiler for main JS :
const searchInput = document.getElementById("country-name");
const searchButton = document.getElementById("search-country");
const countries = document.getElementsByClassName("countries-container")[0];
const cardElement = document.getElementsByClassName("card")[0];
function getData(countryName) {
fetch(`https://restcountries.com/v3.1/name/${countryName}`)
.then(function (response) {
console.log(response);
console.log(typeof response);
if (!response.ok)
throw new Error(`Country not found, status:${response.status}`);
return response.json();
})
.then(function (result) {
console.log(result[0]);
renderCountry(result[0]);
const neigbourCounty = result[0].borders ? result[0].borders[0] : null;
console.log(neigbourCounty);
if (!neigbourCounty) throw new Error("Neighbour country do not exist! ");
return fetch(`https://restcountries.com/v3.1/alpha/${neigbourCounty}`);
})
.then(function (resolve) {
return resolve.json();
})
.then(function (data) {
console.log(data[0]);
renderCountry(data[0], "card-neigbour");
})
.catch(function (error) {
renderError("Something went wrong!", error.message);
});
}
function renderCountry(item, classCard = "") {
const language = Object.values(item.languages)[0];
console.log(language);
const currency = Object.values(item.currencies)[0];
currency.template = `${currency.name},\n
symbol: ${currency.symbol}`;
console.log(currency.template);
const cardEl = `
<div class="card ${classCard}">
<img class="card-img" src="${item.flags.png}" alt="${
item.flags.alt
}" />
<div class="card-info">
<div class="card-main-info">
<h2>${item.name.common}</h2>
<h4>Capital: ${item.capital[0]}</h4>
</div>
<div class="info">
<p>Region: ${item.region}</p>
<p>Population: ${(+item.population / 1000000).toFixed(2)} mil</p>
<p>Language: ${language}</p>
<p>Currency: ${currency.template}</p>
</div>
</div>
</div>`;
countries.insertAdjacentHTML("beforeend", cardEl);
}
searchInput.addEventListener("keyup", function (event) {
if (event.key === "Enter") {
handlerFunction();
}
});
searchButton.addEventListener("click", handlerFunction);
function resetInput() {
searchInput.value = "";
}
function handlerFunction() {
if (searchInput.value.trim()) {
getData(searchInput.value);
resetInput();
} else {
alert("Unesite vrednot u input element!");
}
}
function renderError(message, errMsg) {
countries.innerHTML += `${message} -> ${errMsg}`;
}
//II primer - renderovanje drzava po regionu
function getDataI(region) {
fetch(`https://restcountries.com/v3.1/region/${region}`)
.then((response) => {
if (!response.ok)
throw new Error(`Country not found, status:${response.status}`);
return response.json();
})
.then((result) => {
console.log(result);
for (const state of result) {
renderCountry(state);
}
})
.catch((error) => {
renderError("Something went wrong!", error.message);
});
}
// getDataI("asia");
Spoiler for async-await JS :
const searchInput = document.getElementById("country-name");
const searchButton = document.getElementById("search-country");
const countries = document.getElementsByClassName("countries-container")[0];
const cardElement = document.getElementsByClassName("card")[0];
function renderCountry(item, classCard = "") {
const language = Object.values(item.languages)[0];
const currency = Object.values(item.currencies)[0];
currency.template = `${currency.name},\n
symbol: ${currency.symbol}`;
const cardEl = `
<div class="card ${classCard}">
<img class="card-img" src="${item.flags.png}" alt="${
item.flags.alt
}" />
<div class="card-info">
<div class="card-main-info">
<h2>${item.name.common}</h2>
<h4>Capital: ${item.capital[0]}</h4>
</div>
<div class="info">
<p>Region: ${item.region}</p>
<p>Population: ${(+item.population / 1000000).toFixed(2)} mil</p>
<p>Language: ${language}</p>
<p>Currency: ${currency.template}</p>
</div>
</div>
</div>`;
countries.insertAdjacentHTML("beforeend", cardEl);
}
searchInput.addEventListener("keyup", function (event) {
if (event.key === "Enter") {
handlerFunction();
}
});
searchButton.addEventListener("click", handlerFunction);
function resetInput() {
searchInput.value = "";
}
function handlerFunction() {
if (searchInput.value.trim()) {
fetchData(searchInput.value);
resetInput();
} else {
alert("Unesite vrednot u input element!");
}
}
function renderError(message, errMsg) {
countries.innerHTML += `${message} -> ${errMsg}`;
}
async function fetchData(countryName) {
try {
const response = await fetch(
`https://restcountries.com/v3.1/name/${countryName}`
);
if (!response.ok)
throw new Error(`Country not found, status:${response.status}`);
const result = await response.json();
renderCountry(result[0]);
const neigbourCountry = result[0].borders ? result[0].borders[0] : null;
if (!neigbourCountry) throw new Error("Neighbour country don't exist!");
const neigbourResponse = await fetch(
`https://restcountries.com/v3.1/alpha/${neigbourCountry}`
);
const dataNeighbour = await neigbourResponse.json();
renderCountry(dataNeighbour[0]);
} catch (err) {
renderError("Something went wrong!", err.message);
}
}
//try-catch
// let x = 1;
// const y = 2;
// x = 3;
// // y = 4;
// try {
// let x = 1;
// const y = 2;
// x = 3;
// y = 4;
// } catch (err) {
// console.log(err);
// }
// k = 5;
// console.log(k);
Show Posts