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: 29 July 2026, 16:53:24 »
Welcome to the forum
Not sure how many PS players are here on forum. Join our Discord and official TQ Discord, you should have better chance to find someone there.
Also eventually you can search for topics where playstation console was mentioned, check member profile and contact. If you are unable to send personal message atm since you have new forum account, you could find few members and use @name (like this
@gothrock ) so they can see you. This is especially good if someone is not active on forum for some time, but is using email if email notification is turned on on profile.
2
« on: 20 July 2026, 21:56:22 »
Happy birthday
3
« on: 26 June 2026, 12:51:40 »
Weird, next year is 10 years of tqfans and it doesn't look like that to me at all.
4
« on: 01 January 2026, 12:05:15 »
Happy New Year and holidays wishes you TitanQuestFans community.
5
« on: 21 November 2025, 20:06:11 »
Provera znanja - test 14.10.2025.
1 Koji selector u CSS-u bira sve elemente /<p>/na stranici?
b. p 2. Izaberite jedan odgovor:
a. .nazivKlase b. @nazivKlase
c. %nazivKlase
d. #nazivKlase
3. Koja od sledećih vrednosti ne postoji za /position/svojstvo?
a. relative
b. absolute
c. centered d. fixed
4. Izaberite jedan odgovor:
a. position: absolute;
b. float: left;
c. display: inline; d. display: block;
5. Kako da selektujemo sve /<div>/elemente sa klasom box?
d. div.box 6. Izaberite jedan odgovor:
a. Povećava font
b. Postavlja element iznad ili ispod drugih c. Menja poziciju elementa
d. Rotira element
7. Koja je razlika između em i rem jedinica u CSS-u?
a. rem je relativan na root, em na roditelja 8. Izaberite jedan odgovor:
a. <script src="stil.css">
b. <link rel="stylesheet" href="stil.css">
Tačno c. <css src="stil.css">
d. <style href="stil.css">
9. Izaberite jedan odgovor:
a. align-content
b. text-align
c. justify-content d. align-items
6
« 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
7
« 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 = "";
}
8
« on: 09 November 2025, 22:19:08 »
9
« on: 09 November 2025, 22:18:17 »
Spoiler for style CSS :
Spoiler for style SCSS :
10
« 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();
});
11
« on: 09 November 2025, 22:16:16 »
Spoiler for products JSON :
12
« 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>
13
« on: 09 November 2025, 22:11:09 »
14
« on: 09 November 2025, 22:10:31 »
15
« on: 09 November 2025, 22:08:43 »
Spoiler for products JSON :
Show Posts
