Show Posts

1

Javascript / Testovi

« 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

2

Javascript / Java Script 17 Dan 28 MODAL

« on: 09 November 2025, 22:14:33 »

Spoiler for HTML index:

3

Javascript / Java Script 16 Dan 27 MODAL

« on: 09 November 2025, 22:01:10 »

Spoiler for HTML bootstrap modal:

4

Javascript / Java Script 15 Dan 26 ASYNC , AWAIT, EVENT-LISTENERS

« on: 09 November 2025, 21:52:28 »

Spoiler for HTML:

Code: [Select]


<!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 rel="stylesheet" href="style.css" />
    <!-- <script src="main.js" defer></script> -->
     <script src="async-await.js" defer></script>
  </head>

  <body>
    <header>
      <h1>Explore the World 🌎</h1>
    </header>

    <main>
      <div class="search-container">
        <input
          type="text"
          id="country-name"
          placeholder="Enter a country name ..."
        />
        <button id="search-country">Search country</button>
      </div>

      <section class="countries-container">
        <!-- <div class="card">
          <img src="" alt="" />

          <div class="card-info">
            <div class="card-main-info">
              <h3>Name:</h3>
              <h4>Capital:</h4>
            </div>
            <div class="info">
              <p>Region:</p>
              <p>Population:</p>
              <p>Language:</p>
              <p>Currency:</p>
            </div>
            <button class="get">Get</button>
          </div> -->
        </div>
      </section>
      
    </main>

    <footer>
      <p>exploretheworld.com</p>
    </footer>
  </body>
</html>

Spoiler for HTML:

5

Javascript / Java Script 9 Dan 20 Iteracija kroz objekte

« on: 09 November 2025, 08:26:44 »

Iteracija kroz objekte

Spoiler for JS:

Code: (main JS) [Select]


//iteracija kroz objekte

//objekti nisu iterabilne strukture

//iteracija kroz kljuceve objekta
//for- in petlja

const ana = {
  ime: "Ana",
  prezime: "Antic",
  godine: 22,
};

for (const kljuc in ana) {
  console.log(typeof kljuc); //"string"

  console.log("kljuc je:", kljuc, ",vrednost za kljuc je:", ana[kljuc]);
}

//II nacin - koriscenjem metoda

//Object.keys(objekat)
//niz sa kljucevima

const kljucevi = Object.keys(ana);
console.log(kljucevi); //['ime', 'prezime', 'godine']

kljucevi.forEach((key) =>
  console.log(
    `Svojstvo objekta je: ${key}, a vrednost za dato svojstvo je: ${ana[key]}`
  )
);

//Object.values(objekat)
//metoda vraca niz vrednosti

const vrednosti = Object.values(ana);

console.log(vrednosti); //['Ana', 'Antic', 22]

vrednosti.forEach((value) => {
  console.log(typeof value);
  console.log(value);
});

//Object.entries(objekat)
//metoda vraca niz nizova

const paroviKljucVrednost = Object.entries(ana);
console.log(paroviKljucVrednost);

paroviKljucVrednost.forEach(([kljuc, vrednost]) => {
  console.log(`${kljuc}:${vrednost}`);
});

//iteracija for -of petljom (sa metodom Object.entries)

for (const [key, value] of paroviKljucVrednost) {
  console.log(key, value);
}

//iteracija kroz ugnjezdene objekte

const korisnik = {
  ime: "Dunja",
  adresa: {
    ulica: "Glavna 15",
    grad: "Nis",
  },
};

for (const kljuc in korisnik.adresa) {
  console.log(`kljuc:${kljuc}, vrednost: ${korisnik.adresa[kljuc]}`);
}

//vezba
//napravite objekat, sa ugnjezdenim objektom, metodu po zelji, proci kroz objekat i ispisati parove kljuc: vrednost
let osoba = {
  ime: "David",
  prezime: "Milenkovic",
  godine: 21,
  horoskop: {
    znak: "Bik",
    podznak: "Rak",
    mesec: "Rak",
  },
  predstaviSe: function () {
    console.log(
      "Ja sam " +
        this.ime +
        " " +
        this.prezime +
        " i imam " +
        this.godine +
        " i znak mi je " +
        this.horoskop.znak
    );
  },
};

for (const key in osoba) {
  //   console.log(`${key}: ${osoba[key]}`);
  if (typeof osoba[key] === "object") {
    for (const innerKey in osoba[key]) {
      if (innerKey === "podznak") {
        continue;
      }
      console.log(innerKey);
    }
  }
}

console.log(typeof osoba.predstaviSe);
console.log(typeof osoba.horoskop);

//ukoliko zelimo da prodjemo kroz obj(horoskop)

for (const key in osoba.horoskop) {
  console.log(key);
}
//vezba
//napraviti objekat porodica
//otac , majka, 2 deteta
//ime, prezime, godine
//treba da ispisete imena svih clanova
//izracunate prosecnu starost porodice

let porodica = {
  otac: {
    ime: "Goran",
    prezime: "Milenkovic",
    godine: 52,
  },
  majka: {
    ime: "Zvezdana",
    prezime: "Milenkovic",
    godine: 53,
  },
  dete1: {
    ime: "David",
    prezime: "Milenkovic",
    godine: 21,
  },
  dete2: {
    ime: "Elena",
    prezime: "Milenkovic",
    godine: 23,
  },
};

for (const clan in porodica) {
  console.log(porodica[clan].ime);
}
let brojClanova = 0;
let ukupnoGodina = 0;

for (const clan in porodica) {
  console.log(porodica[clan].godine);
  ukupnoGodina += porodica[clan].godine;
  brojClanova++;
}

const prosek = ukupnoGodina / brojClanova;
console.log(prosek); //37.25

//vezba
//napisite funkciju koja vraca objekat gde su zamenjeni kljucevi i vrednosti

// {ime:"Pera", zanimanje:'Bankar'}
// {Pera:"ime", Bankar: 'zanimanje'}

const pera = {
  ime: "Pera",
  zanimanje: "Bankar",
};

function obrniKljucVrednost() {
  const newObj = {};

  for (const [key, value] of Object.entries(pera)) {
    //[["ime", "pera"], ["zanimanje", "bankar"]]
    newObj[value] = key;
  }

  return newObj;
}

console.log(obrniKljucVrednost(pera));

Spoiler for Hiden:

6

Javascript / Java Script 8 Dan 19 Nizovi nastavak vezbanje i OBJEKTI

« on: 09 November 2025, 07:06:20 »

Spoiler for HTML:

Code: [Select]


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="main.js" defer></script>
  </head>
  <body></body>
</html>

Spoiler for JS:

Code: (main JS) [Select]


const num = [2, 5, 7, 11, 85];

const zbir = num.reduce((acc, el) => {
  console.log(acc);
  return acc + el;
});

console.log(zbir);

///vezba
/// napisati funkciju koja ce vratiti najduzu rec iz niza

const najduza = ["ukras", "casa", "pivo", "tekila"];
function najduzaRec(niz) {
  const najduza = niz.reduce((acc, curr) =>
    acc.length > curr.length ? acc : curr
  );
  return najduza;
}
console.log(najduzaRec(najduza));

///vezba
/// napisati funkciju koja vraca sve reci iz niza koje pocinju velikim slovom

let a = ["marija", "Petar", "Aleksandar", "slavica", "blagosavija"];
function velikoSlovo(niz) {
  return niz.filter((el) => el[0] === el[0].toUpperCase());
}
console.log(velikoSlovo(a));


///  II nacin

/// kada niz ima razlicite tipove podataka
let niz1 = [
  "marija",
  "Petar",
  "Aleksandar",
  "slavica",
  "blagosavija",
  false,
  null,
  undefined,
  125,
];



//// sve elemente pretvaramo u string ,a zatim vrsimo filtriranje

function velikoSlovo(niz) {
  return niz
    .map((el) => String(el))
    .filter((el) => el[0] === el[0].toUpperCase());
}



//// kada zelimo iz niza koji ima razlicite tipove vrednosti da radimo samo sa stringovima

function velikoSlovoIII(niz) {
  return niz
    .filter((el) => {
      strEl = typeof el === "string";

      console.log(strEl);

      return strEl;
    })
    .filter((el) => el[0] === el[0].toUpperCase());
}

console.log(velikoSlovoIII(niz1));

Spoiler for Hiden:

7

Javascript / Java Script 7 Dan 18 Nizovi nastavak METODE , DESTRUKTUIRANJE , SET-ovi

« on: 09 November 2025, 05:32:49 »

Spoiler for HTML:

Code: [Select]


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script src="main.js"></script>
  </body>
</html>

Spoiler for JS:

Code: (main JS) [Select]


//metoda forEach()
//sintaksa

// array.forEach(function(element, index, array){
//     //blok naredbi
// })

//index i array -opcioni
//koristimo kada zelimo da prodjemo kroz ceo niz

//ne podrzava continue i break

//ne pravi novi niz,
//ne modifikuje postojeci
//ne vraca nista

// const names = ["Maja", "Sara", "Minja", "Vanja"];

// const newNames = [];
// const x = names.forEach((el) => {
//   el = el + "***";
//   newNames.push(el);
//   console.log(el);
// });

// console.log(names);
// console.log(newNames);

// console.log(x); -//undefined

const num = [25, 58, 59, 87, 89, 89, 39, 15];

// num.forEach((el, i, arr) => {
//   console.log(el, i, arr);
// });

//Primer

//mnozenje svih vrednosti niza
// let res = 1;
// num.forEach((el) => {
//   res *= el;
// });

// console.log(res); //58954814850

//map()
//kreira novi niz
//transformisemo elemente postojeceg niza

// array.map(function(element, index, array){
//     //blok koda
// })

// const newNum = num.map((el, i, arr) => {
// //   console.log(`element ${el} - pozicija ${i}, u nizu ${arr}`);

// });

const newNum = num.map((el) => el * 2);

console.log(newNum);

//filter()
//vraca novi niz
//duzina novog niza bice ili ista ili manja od orginalnog niza
//koristimo kada zelimo da izbacimo elemente koji ne zadovoljavaju uslov

//sintaksa

// array.filter((element, index, arr) => {
//   //vraca elemente koji "prolaze uslov"
// });

const filtered = num.filter((el) => el % 3 === 0);
console.log(filtered);

//vezba
const names = ["Maja", "Sara", "Minja", "Vanja", "Nevena", "Iva", "Eva"];
//vratiti samo elemente cija je duzina manja od 4
const namesShorterThan4 = names.filter((el) => el.length < 4);

console.log(namesShorterThan4);

//vezba
//naci parne brojeve
// const num = [25, 58, 59, 87, 89, 89, 39, 15];

// const parni = num.filter(function (el) {
//   return el % 2 === 0;
// });

//arr function -dodatak
// const parni = num.filter((el) => el % 4 === 0).map((el) => el * 3);

// console.log(parni);

//reduce()
//metoda vraca jednu vrednost

//sintaksa

// array.reduce((accumulator, currentValue, currentIndex, array) => {
//   //naredba koja treba da se izvrsi
// }, initialValue);

//akumulator - akumulirana vrednost ("nosi" rezultat izmedju itecija)
//initialValue - pocetna vrednost akumulatora

//primer -sabiranje
const zbir = num.reduce((acc, el) => acc + el, 0);

console.log(zbir); //461

//primer - mnozenje

// const proizvod = num.reduce((acc, curr) => acc * curr, 1);

const proizvod = num.reduce(function (acc, el) {
  //   console.log(acc, el);
  return acc * el;
}, 1);

console.log(proizvod); //34488566687250

//Primer - naci najveci broj u nizu
// const num = [25, 58, 59, 87, 89, 89, 39, 15];

const maxValue = num.reduce((acc, curr) => (curr > acc ? curr : acc));

console.log(maxValue);

//Primer - sastavii string od niza

const stringOfNames = names.reduce((acc, curr) => acc + " " + curr, "> ");

console.log(stringOfNames);

//some()
//ukoliko bar jedan element zadovolji uslov - metod vraca true

//true/false

const arrayNums = [3, 12, 156, 87, 197, 258];

const daLiSadrziParanBroj = arrayNums.some(function (el, i, arr) {
  return el % 2 === 0;
});

console.log(daLiSadrziParanBroj); //true

//every()
//svi elementi moraju da zadovolje uslov - metoda vraca true

const deljiviSa3 = arrayNums.every((el) => el % 3 === 0);

console.log(deljiviSa3); //false

//specijalni slucaj
//metoda every() - za svaki prazan niz vraca true - vakua istinitost
const prazanNiz = [];

const rez = prazanNiz.every((num) => num > 0); //true
console.log(rez);

//find()
//vraca prvi element koji zadovoljava uslov
//ukoliko ni jedan element ne zadovoljava uslov, metod vraca udefined

//primer

const veciOd100 = arrayNums.find((el) => el > 100);

console.log(veciOd100); //156

//findIndex()

//vraca index za element

//array.findIndex((el,i, arr){
//logika
//})

//Primer
//index prvog parnog broja

const indexParnog = arrayNums.findIndex((el) => el % 2 === 0);
console.log(indexParnog); //1

//Primer

const veciOd1000 = arrayNums.findIndex((el) => el > 1000);
console.log(veciOd1000); //-1

//reverse()

const obrnutiNiz = arrayNums.reverse();
console.log(obrnutiNiz);

//flat()

//sintaksa
//array.flat([depth]) // podRAzumevana vrednost za dubinu je 1

const ugnjezdeniNiz = [1, 2, 3, [4, 5]];
console.log(ugnjezdeniNiz);

const elNaIndex3 = ugnjezdeniNiz[3];
console.log(elNaIndex3); //[4, 5]

const flatedArray = ugnjezdeniNiz.flat(); //[1, 2, 3, 4, 5]
console.log(flatedArray);

const ugnjezdeniNiz1 = [2, 7, 14, [56, 48, [48, 72]]];

const flatedArray1 = ugnjezdeniNiz1.flat(2); //[2, 7, 14, 56, 48, 48, 72]
console.log(flatedArray1);

//primer

const ugnjezdeniNiz2 = [5, 8, 9, [1, [2, 3, 7, [4, 8, [15, 75, [5]]]]]];

const flatNiz = ugnjezdeniNiz2.flat(Infinity); //[5, 8, 9, 1, 2, 3, 7, 4, 8, 15, 75, 5]
console.log(flatNiz);

//DESTRUKTUIRANJE NIZOVA

const arr = [2, 3, 4];

const prvi = arr[0];
const drugi = arr[1];
const treci = arr[2];

//II nacin  - destrukturiranje niza

let [x, y, z] = arr;

console.log(x, y, z);

console.log(arr); // [2, 3, 4]

const [el1, , el3] = arr;
console.log(el1, el3);

//zamena vrednosti promenljivih

let privremena = x;
x = z;
z = privremena;

console.log(x, z); //4,2

//II nacin- primenom destrukturiranja

[x, z] = [z, x];

console.log(x, z); //2,4

//ugnjezdeno destrukturiranje

const nested = [2, 4, [5, 6]];

// const [k, , l] = nested;
// console.log(k, l);

// const [k, l, [m, n]] = nested;

//const [k, l, m, n] = nested; // 2 4 (2) [5, 6] undefined
//console.log(k, l, m, n);

//definisanje "podrazumevane" vrednosti

const [k = -1, l = -1, m = -1, n = -1] = nested;
console.log(k, l, m, n);

//Primer 2

const voce = ["jabuka", "kruska", "breskva"];

const [v1 = "none", v2 = "none", v3 = "none", v4 = "none"] = voce;

console.log(v1, v2, v3, v4);

//operator spread(...)
//const nested = [2, 4, [5, 6]];

const newNested = [...nested, 56, 89];
console.log(newNested);

const newArr = [2, 5, ...arr]; //[2, 5, 2, 3, 4]
console.log(newArr);

const noviNiz = [...arr, ...nested]; //[2, 3, 4, 2, 4, Array(2)]
console.log(noviNiz);

//Primer
const restaurantMenu = ["pizza", "pasta"];

const newMenu = [...restaurantMenu, "gnocchi"];

console.log(newMenu);

//plitka kopija niza

const restaurantMenuCopy = [...restaurantMenu];
console.log(restaurantMenuCopy);

restaurantMenuCopy[0] = "Pie";

console.log(restaurantMenuCopy);
console.log(restaurantMenu);

//"duboko" kopiranje niza

const brojevi = [2, 5, 6, 8, [7, 12]];

// const brojeviCopy = [...brojevi];

// console.log(brojevi);
// console.log(brojeviCopy);

// brojeviCopy[4][0] = 63;

// console.log(brojevi);
// console.log(brojeviCopy);

//I nacin - "duboko kopiranje" -JSON.stringify

const deepCopyBrojevi = JSON.parse(JSON.stringify(brojevi));
deepCopyBrojevi[4][0] = 125;

console.log(brojevi);
console.log(deepCopyBrojevi);

//II nacin -koriscenje metode structuredClone()

const deepCopyBrojevi1 = structuredClone(brojevi);

deepCopyBrojevi1[4][1] = 1587;

console.log(brojevi);
console.log(deepCopyBrojevi1);

//spread operator u stringu

const letters = "Ucim JS";

const newLetters = [...letters, " ", "n", "o", "w"];

console.log(newLetters);

//Primer

function ispisiSlova(a, b, c, d) {
  console.log(a, b, c, d);
}
const name = "Maja";

ispisiSlova(...name);

//Ii primer

// function makePizza(ing1, ing2, ing3) {
//   return `Pizza made with ${ing1}, ${ing2}, and ${ing3}`;
// }
// const ingredians = [
//   prompt("Unesite prvi sastojak za pizzu"),
//   prompt("Unesite drugi sastojak za pizzu"),
//   prompt("Unesite treci sastojak za pizzu"),
// ];

// const pizza = makePizza(...ingredians);

// console.log(pizza);

//Vezba
//izracunati zbir svih vrednosti iz oba niza
//koristeci metode

const niz1 = [5, 7, 12, 89, [658, 35, [87]]];

const niz2 = [67, 78, [4, 5, [987, 1, -3, [-200]]]];

const zbirNizova = [...niz1, ...niz2]
  .flat(Infinity)
  .reduce((acc, curr) => acc + curr, 0);
console.log(zbirNizova);

//Rest operator (...)

function ispisiPodatke(ime, prezime, ...ostalo) {
  console.log(ime);
  console.log(prezime);
  console.log(ostalo);
}

ispisiPodatke("Marija", "Pendic", 34, "profesor", "web-developer");

//SET-ovi

//skupovi jedinstvenih vrednosti

//Primer

const menu = ["pizza", "pasta", "eggs", "risotto", "eggs", "pasta"];

const uniqueMenu = new Set(menu);

console.log(uniqueMenu);

//kreiranje seta

const lettersSet = new Set("Hello"); //{'H', 'e', 'l', 'o'}
console.log(lettersSet);

//has() -true/false
//proverava da li se neki element nalazi u setu

console.log(uniqueMenu.has("pizza")); //true
console.log(uniqueMenu.has("bread")); //false

//add()

uniqueMenu.add("bread");
uniqueMenu.add("bread");
console.log(uniqueMenu);

//delete()

console.log(uniqueMenu.delete("pasta")); //true
console.log(uniqueMenu.delete("garlic bread")); //false

//ne mozemo uzeti vrednosti iz seta pomocu indexa

console.log(uniqueMenu[1]); //undefined

//brisanje svih elemenata seta
//clear()

// uniqueMenu.clear();
// console.log(uniqueMenu);

//duzina seta - size()

console.log(uniqueMenu.size); //4

//prolazak kroz setove

for (const meal of uniqueMenu) {
  console.log(meal);
}

//konvertovanje setova u niz

//I nacin

const newRestaurantMenu = [...uniqueMenu];
console.log(newRestaurantMenu);

//nacin
const newRestaurantMenu2 = Array.from(uniqueMenu);
console.log(newRestaurantMenu2);

//sortiranje seta

const brojeviSet = new Set([10, 11, 55, 11, 74, 10, 8]);
console.log(brojeviSet);

//sortiranje po rastucem poretku
const sortiraniNizRastuci = [...brojeviSet].sort((a, b) => a - b);
console.log(sortiraniNizRastuci);

//sortiranje po opadajem poretku
const sortiraniNizOpadajuci = [...brojeviSet].sort((a, b) => b - a);
console.log(sortiraniNizOpadajuci);

//sort() metoda
//a-b >0  => a ide ispred b
//a-b<0 => b ide ispred a
//a -b=0 => ostaju na istom mestu

// vezba

//napravite niz brojeva
//poredjajte brojeve po opadajucem poretku, ali tako da brojevi budu jedninstveni

//vezba2
const slova = "Hello world";

//treba da se poredjaju slova unazad, da imamo samo jedinstvene vrednosti
// const slova = "Hello world";
const setLetters = new Set(slova);
const sortedLetters = [...setLetters].reverse();
console.log(sortedLetters);

//sortiranje slova
const sorted = [...slova].sort((a, b) => b - a);
console.log(sorted);

8

command prompt windows 10 how to navigate folders - ai

Html: play audio without controls? - https://stackoverflow.com/questions/1866376/html-play-audio-without-controls
do i need audio controls in html to be displayed on page

css how to add transparency when mouse not over image
https://www.w3schools.com/css/css_image_transparency.asp

why my div container won't be on center but its on left - ai

Quote from: ai

need html and css done, 3 country flag images to be set sticky horizontaly on center of the screen, image size should be equal to width which will be adjusted when i add my images, on click on the flag it should display name of country and redirect to additional page which i will add later. around flags i want to add image which will fly around flags

Code: [Select]

This solution uses
HTML, CSS, and a small amount of JavaScript to achieve all the specified requirements. It includes three flags centered horizontally, made "sticky" to a certain position, and an image that flies around them. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Country Flags</title>
    <style>
        /* General body styling for context */
        body {
            height: 200vh; /* Adds scroll to test sticky position */
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: flex-start; /* Aligns to the top initially, sticky handles the rest */
            padding-top: 100px; /* Space from the top */
            background-color: #f0f0f0;
        }

        /* Container for the flags, positioned sticky */
        .flag-container {
            display: flex;
            justify-content: center;
            /* Sticky positioning: stick at 20px from the top of the viewport */
            position: sticky; 
            top: 20px; 
            z-index: 10;
            background: white; /* Optional: adds a background to the sticky container */
            padding: 10px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }

        /* Styling for individual flag wrappers (including the name on click) */
        .flag-wrapper {
            position: relative; /* Needed for positioning the name popup */
            cursor: pointer;
            margin: 0 10px; /* Space between flags */
            width: 150px; /* Default width for flags, adjust as needed */
            height: auto;
        }

        .flag-wrapper img {
            width: 100%; /* Image width is equal to the wrapper width */
            height: auto;
            display: block;
        }

        /* Styling for the country name display */
        .country-name {
            display: none; /* Hidden by default, shown via JavaScript */
            position: absolute;
            bottom: 100%; /* Position above the flag */
            left: 50%;
            transform: translateX(-50%);
            background-color: #333;
            color: white;
            padding: 5px 10px;
            border-radius: 4px;
            white-space: nowrap;
            margin-bottom: 5px;
        }

        /* --- Flying Image Animation --- */
        .flying-image {
            position: absolute;
            width: 50px; /* Size of the flying image */
            height: 50px;
            animation: orbit 5s linear infinite; /* Animation name, duration, timing, repeat */
            z-index: 5;
            /* Positioning relative to the body or main container, adjust 'top' and 'left' values to center the orbit path around the flag group */
            top: 100px; 
            left: 50%;
            transform-origin: 0 0; /* Center of rotation is not the image itself, but the center of the orbit */
        }

        @keyframes orbit {
            0% {
                transform: rotate(0deg) translate(-200px) rotate(0deg); /* Orbits at a radius of 200px */
            }
            100% {
                transform: rotate(360deg) translate(-200px) rotate(-360deg);
            }
        }
    </style>
</head>
<body>

    <div class="flag-container">
        <!-- Flying image element -->
        <img src="https://picsum.photos/id/237/50/50" alt="Flying image" class="flying-image"> <!-- Placeholder for the flying image -->

        <!-- Flag 1 -->
        <div class="flag-wrapper" onclick="handleFlagClick('USA', 'usa-page.html')">
            <img src="https://flagcdn.com/us.svg" alt="USA Flag">
            <span class="country-name" id="name-usa">USA</span>
        </div>

        <!-- Flag 2 -->
        <div class="flag-wrapper" onclick="handleFlagClick('Canada', 'canada-page.html')">
            <img src="https://flagcdn.com/ca.svg" alt="Canada Flag">
            <span class="country-name" id="name-canada">Canada</span>
        </div>

        <!-- Flag 3 -->
        <div class="flag-wrapper" onclick="handleFlagClick('UK', 'uk-page.html')">
            <img src="https://flagcdn.com/gb.svg" alt="UK Flag">
            <span class="country-name" id="name-uk">UK</span>
        </div>
    </div>

    <script>
        function handleFlagClick(countryName, redirectPage) {
            // Display the country name temporarily (optional as we are redirecting immediately)
            console.log("Clicked on: " + countryName);

            // Redirect to the additional page
            window.location.href = redirectPage;
        }
        
        // Optional: you could modify the JS to show the name on hover or something else if the redirect wasn't immediate.
    </script>

</body>
</html>

Spoiler for Hiden:

9

Javascript / Java Script 6 Dan 17 FUNKCIJE - NIZOVI - FOR PETLJA - nastavak

« on: 02 November 2025, 22:23:19 »

Spoiler for HTML:

Code: [Select]


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script src="main.js"></script>
  </body>
</html>

Spoiler for main JS:

Code: [Select]


//String je niz karaktera

const word = "Hello";
const word1 = "Programiranje je zabavno!";

console.log(word[0]);
console.log(word[word.length - 1]);

for (let i = 0; i < word1.length; i++) {
  console.log(word1[i]);
}

//Vezba
//sortirajte sve brojeve u nizu od najmanjeg do najveced
//             0  1   2  ....
const array = [857, 1, 17, 0, -5, 187, -28, 352];

const privremenaProm = array[0]; //857
// console.log(privremenaProm);
array[0] = array[1];
array[1] = privremenaProm;
console.log(array);

//[1,17,0,-5,187,-28,352,857]
//[0,17,-5 ,-28, 187,1, 352, 857]
//[-5,17,-28,0,187,1,352,857]
//[-5,-28,0,17, 187,1,352,857]
//[-28,-5,0,17,187, 1,352,857]
//[-28,-5,0,1,17,187,352,857]

// for (let i = 0; i < array.length; i++) {
//   //i[0]=857
//   for (let j = 0; j < array.length; j++) {
//     // j[0]=857, j[1]=1
//     if (array[i] < array[j]) {
//       let temp = array[1]; //1
//       array[1] = array[0];
//       array[0] = temp;
//     }
//   }
// }

console.log(array);

//duzina stringa
const airline = "Jat Srbija";

const duzinaStringa = airline.length;
console.log(duzinaStringa);

console.log(airline[3]); //prazan string

//indexOf()
//vraca prvo pojavljivanje karaktera
console.log(airline.indexOf("a")); //1
console.log(airline.indexOf("s")); //-1
console.log(airline.indexOf("S")); //4

//lastIndexOf() - poslednje pojavljivanje vrednosti

console.log(airline.lastIndexOf("a")); //9
console.log(airline.indexOf("Srbija")); //4
console.log(airline.indexOf("bija")); //6
console.log(airline.indexOf("jat")); //-1
console.log(airline.indexOf("Jat")); //0

//slice()
//pravi novi string

//ukoliko imamo jedan index u metodi, metoda vraca od tog indexa do kraja stringa
const podstring = airline.slice(4);
console.log(podstring); //Srbija

console.log(airline.slice(2, 7)); //t Srb
//ukljucuje prvi index, ali ne ukljucuje drugi index
//vratice 7-2 karattera

const deoStringa = airline.slice(0, airline.indexOf(" ")); // od 0 - 3(ne ukljucujuci)
console.log(deoStringa); //Jat

const deoStringa1 = airline.slice(airline.indexOf("S"));
console.log(deoStringa1); //Srbija

const deoStringa2 = airline.slice(airline.indexOf("S"), -1); //Srbij
console.log(deoStringa2);

// //Marko Markovic

// const name= userResponse.slice(0, userResponse.indexOf(" ")) //Marko
// const lastName=userResponse.slice(userResponse.indexOf(' ')+1) //Markovic

const str = 'Everything"s fine';

const str2 = `Everything's fine`;

//Primer
// A B C   D E F //A12 , B17

function isMiddleSeat(seat) {
  const seatMark = seat.slice(0, 1);

  if (seatMark === "B" || seatMark === "E") {
    console.log(`It's a middle seat`);
  } else {
    console.log(`It's not a middle seat`);
  }
}

isMiddleSeat("F17");
isMiddleSeat("E23");

//II nacin

function isNearWindowsSeat(seat) {
  const seatMark = seat.slice(0, 1);

  if (seatMark.includes("A") || seatMark.includes("F")) {
    console.log(`Your seat is next to the window`);
  } else {
    console.log(`We are sorry`);
  }
}

isNearWindowsSeat("F28");
isNearWindowsSeat("D32");

//typeOf array

//Objekti : nizove i objekte
console.log(typeof array);

//primitivne vrednosti : string, number, boolean, bigInt, null, undefined,symbol

//.toLowerCase() i toUpperCase

const passanger = "aleXandar"; //Alexadar

const passangerToLower = passanger.toLowerCase(); //alexandar
console.log(passangerToLower);

const passangerCorrect =
  passangerToLower[0].toUpperCase() + passangerToLower.slice(1); //  A +  lexandar

console.log(passangerCorrect); //Alexandar

//funkcija za korigovanje unesenih imena

function correctName(name) {
  const nameToLower = name.toLowerCase();
  const nameCorrect = nameToLower[0].toUpperCase() + nameToLower.slice(1);

  return nameCorrect;
}

console.log(correctName("sANja")); //Sanja
console.log(correctName("milaN")); //Milan

//trim()
//Primer 2
//al.smic@yahoo.com
//AL.SimIC@yahoo.com

const emailAddress = "    AL.SimIC@yahoo.com     ";

const mailToLower = emailAddress.toLowerCase();
console.log(mailToLower);

const correctEmail = mailToLower.trim();
console.log(correctEmail);

//II nacin - lancanje metoda

const correctEmail1 = emailAddress.toLowerCase().trim();
console.log(correctEmail1);

//trimStart() i trimEnd()

//replace() -menja samo prvo pojavljivanje

const text = "Zdravo svete, svete, svete!!!";

const noviText = text.replace("svete", "narode");
console.log(noviText);

//replaceAll()- menja sva pojavljivanja

const noviText1 = text.replaceAll("svete", "narode");
console.log(noviText1);

//II nacin
const tekst = "Ujutru prvo kafa. Kafa je odlicna";

const noviTekst = tekst.replaceAll("kafa", "caj"); //Ujutru prvo caj. Kafa je odlicna
console.log(noviTekst);

const noviTekst1 = tekst.replaceAll(/kafa/gi, "caj");
console.log(noviTekst1);

//g- globalna zamena
//i- ignorisi razliku izmedju malih i velikoh slova

//Boolean metode
//includes()

//startsWith() i endsWith()

const recenica = "Volim da ucim JS";

console.log(recenica.startsWith("ucim")); //false
console.log(recenica.startsWith("volim")); //false
console.log(recenica.startsWith("Volim")); //true
console.log(recenica.endsWith("da")); //false
console.log(recenica.endsWith("JS")); //true

//Primer

function proveraPrtljagaAviona(item) {
  const prtljag = item.toLowerCase();

  if (prtljag.includes("noz") || prtljag.includes("pistolj")) {
    console.log("Nije Vam dozvoljen ulazak u avion");
  } else {
    console.log("Dobrodosli!");
  }
}

proveraPrtljagaAviona("masna");
proveraPrtljagaAviona("NOz");
proveraPrtljagaAviona("PiStOlj");

//II nacin

function proveraPrtljagaAvionaII(item) {
  //   const correctName = item.toLowerCase();
  const correctItem = correctName(item);
  console.log(correctItem);

  const zabranjeneStvari = [
    "Noz",
    "Pistolj",
    "bBomba",
    "Parfem",
    "Alkohol",
    "Exploziv",
  ];

  for (let i = 0; i < zabranjeneStvari.length; i++) {
    if (zabranjeneStvari[i] === item) {
      return `Zabranjeno ukrcavanje!`;
    }
  }
  return `Dobrodosli!`;
}

console.log(proveraPrtljagaAvionaII("masna"));
console.log(proveraPrtljagaAvionaII("pistoLJ"));

//split() -stvara niz elemenata

const message = "Ovo je neka poruka";

const nizReci = message.split(" "); //['Ovo', 'je', 'neka', 'poruka']
console.log(nizReci);

//Primer

const podaci = "Marija, Cavic, 38";

const nizPodataka = podaci.split(", "); // ['Marija', 'Cavic', '38']
console.log(nizPodataka);

console.log(podaci.split("a")); //['M', 'rij', ', C', 'vic, 38']

//Primer
const korisnickiUnos = "Marija Pendic";

const niz = korisnickiUnos.split(" ");

// const [firstName, lastName] = korisnickiUnos.split(" ");
// console.log(firstName, lastName);

//join() -spajanje elemenata niza u string

const podaciNew = nizPodataka.join("+");
console.log(podaciNew);

console.log(nizPodataka.join(" "));

console.log(nizPodataka.join(", "));

console.log(nizPodataka.join(" new "));

//Primer

function velikaSlovaSvakeReci(tekst) {
  const delovi = tekst.split(" ");
  console.log(delovi);
  let noviNiz = [];

  for (let i = 0; i < delovi.length; i++) {
    const bigLetter = correctName(delovi[i]);
    console.log(bigLetter);
    noviNiz.push(bigLetter);
  }
  return noviNiz.join(" ");
}

const result = velikaSlovaSvakeReci("Danas je divan dan!");
console.log(result);

console.log(velikaSlovaSvakeReci("volim Da ucim JS"));

//padStart() i padEnd()

const msg = `Go to the gate 23!`;
const msgLength = msg.length;
console.log(msgLength);

const newMsg = msg.padStart(25, "*");
console.log(newMsg.length, newMsg);

const newMsgEnd = msg.padEnd(35, "+");
console.log(newMsgEnd.length, newMsgEnd);

//vezba
//funkcija koja maskira brojeve kreditne kartice , zelimo da vidimo samo poslednja 4 broja
// **************3567
//***3567
//3567

function maskCreditCard(number) {
  const str = number + "";
  console.log(str);

  const duzinaZaVracanje = str.length;
  const last4 = str.slice(-4);

  const final = last4.padStart(duzinaZaVracanje, "*");
  return final;
}

console.log(maskCreditCard(2587566225885552));
console.log(maskCreditCard(365856));
console.log(maskCreditCard(5896));

// II nacin

function maskNumbers(num) {
  let numString = num.toString();
  let maskedString = "";
  for (let i = 0; i < numString.length; i++) {
    if (i > numString.length - 1 - 4) {
      maskedString += numString[i];
    } else {
      maskedString += "*";
    }
  }
  return maskedString;
}
console.log(maskNumbers(1234));
console.log(maskNumbers("56345478"));
console.log(maskNumbers("638406483638490504837"));

//repeat() -ponavljanje stringa odredjeni broj puta

const rec = "ucionica ";
const ponovi10Puta = rec.repeat(10);
console.log(ponovi10Puta);

//Primer

function planesInLine(n) {
  console.log(`There is ${n} planes in line ! ${"✈".repeat(n)}`);
}

planesInLine(10);

planesInLine(3);

//for-of
//kraca, citljivija, direktan pristup vrednostima
//nemamo pristup indeksima

//sintaksa

// for(const element of niz){
//     //blik naredbi koji se izvrsava
// }

const arr = [50, 78, 96];

for (const num of arr) {
  console.log(num);
}

console.log(recenica); //Volim da ucim JS

for (const slovo of recenica) {
  console.log(slovo);
}

Spoiler for JS:

10

Javascript / Java Script 5 Dan 16 FUNKCIJE nastavak

« on: 02 November 2025, 21:35:34 »

FUNKCIJE NASTAVAK OD PRETHODNOG DANA, ceo main JS

Spoiler for HTML:

Code: [Select]


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- <script src="main.js" defer></script> -->
    <script src="nizovi.js" defer></script>
  </head>
  <body></body>
</html>

Spoiler for main JS:

Code: [Select]


"use strict";

// FUNKCIJE NASTAVAK OD PRETHODNOG DANA

const result = calcAge(2025, 2000);
console.log(result);

// const result1 = calcAge2(2025, 2023);
// console.log(result1);

const x = 20;
const y = 7;
let z;

const deljenje = x / y;
console.log(deljenje);

const modul = x % y;
console.log(modul); //ostatak pri celobrojnom deljenju (6)

console.log(4 % 2); //0
console.log(3 % 2); //1

//funkcija u funkciji

function kvadratBrojeva(n) {
  return n * n;
}

function zbirKvadrata(a, b, c) {
  return kvadratBrojeva(a) + kvadratBrojeva(b) + kvadratBrojeva(c);
}

const zbirKvadrataRezultat = zbirKvadrata(8, 5, 3);
console.log(zbirKvadrataRezultat);

//vezba
//izracunati kalorije u obroku
//banana, jaja
const KALORIJE_BANANA = 100;
const KALORIJE_JAJE = 300;

function kalorijeJedneStavke(kolicina, tipStavke) {
  let kalorijePoJedinici = 0;
  if (tipStavke === "banana") {
    kalorijePoJedinici = KALORIJE_BANANA;
  } else if (tipStavke === "jaje") {
    kalorijePoJedinici = KALORIJE_JAJE;
  }

  return kolicina * kalorijePoJedinici;
}
function ukupneKalorijeObroka(kolicinaBanana, kolicinaJaja) {
  const kalorijeOdBanana = kalorijeJedneStavke(kolicinaBanana, "banana");
  const kalorijeOdJaja = kalorijeJedneStavke(kolicinaJaja, "jaje");

  return kalorijeOdBanana + kalorijeOdJaja;
}

const ukupneKalorijeRezultat = ukupneKalorijeObroka(2, 5);
console.log(ukupneKalorijeRezultat);

const ukupneKalorijeRezultat2 = ukupneKalorijeObroka(5, 10);

//II nacin
function ukupnoKalorija(brBanana, kalBababa, brJaja, kalJaja) {
  const total = kal(brBanana, kalBababa) + kal(brJaja, kalJaja);
  return total;
}
function kal(brojNamirnica, kal) {
  return brojNamirnica * kal;
}
let resultUkupno = ukupnoKalorija(2, 345, 3, 3434);
console.log(resultUkupno);

//function declaration- deklaracija funkcije
function calcAge(now, birthYear) {
  return now - birthYear;
}

const res1 = calcAge(2025, 1985);
console.log(res1);

//function expression - funkcijski izraz
//anonimna funkcija
const calcAge2 = function (now, birthYear) {
  return now - birthYear;
};

console.log(calcAge2);

const res2 = calcAge2(2025, 1991);
console.log(res2);

//primer
const pozdrav = function (name) {
  return `Zdravo ${name}`;
};

console.log(pozdrav("Sanja"));

//function expression -II nacin
//arrow funkcije

//return je implicitno definisan ukoliko imamo jedan red naredbi u telu funkcije
const calcAge3 = (now, birthYear) => now - birthYear;

const res3 = calcAge3(2025, 1998);
console.log(res3);

//primer arrow function
///return se izvrsava implicitno
const sayHi = () => `Hi!`;

console.log(sayHi());

//Primer

const add = (a, b) => {
  const zbir = a + b;
  return zbir;
};

//Vezba
//napisati arrow funkciju koja ce u zavisnosti od godine rodjenja vratiti koliko je godina ostalo do penzije
//u penziju se ide sa 65 godina
const calcAge4 = (now, yearOfBirth) => {
  const brojGodinaOsobe = now - yearOfBirth;
  const brojGodinaDoPenzije = 65 - brojGodinaOsobe;
  return brojGodinaDoPenzije;
};
const rezultat = calcAge4(2025, 1988);
console.log(rezultat);

//Vezba 2
//arrow funkcijom napisati program koji ce faktorijel nekog broja !5=1*2*3*4*5
const faktorijel = (n) => {
  if (n < 0) {
    return `Faktorijel nije definisan za negativne brojeve.`;
  }
  let rezultat = 1;
  for (let i = n; i > 0; i--) {
    rezultat *= i;
  }
  return rezultat;
};
const rez = faktorijel(5);
const rez1 = faktorijel(10);
console.log(rez);
console.log(rez1);

"use strict";

// FUNKCIJE NASTAVAK OD PRETHODNOG DANA

const result = calcAge(2025, 2000);
console.log(result);

// const result1 = calcAge2(2025, 2023);
// console.log(result1);

const x = 20;
const y = 7;
let z;

const deljenje = x / y;
console.log(deljenje);

const modul = x % y;
console.log(modul); //ostatak pri celobrojnom deljenju (6)

console.log(4 % 2); //0
console.log(3 % 2); //1

//funkcija u funkciji

function kvadratBrojeva(n) {
return n * n;
}

function zbirKvadrata(a, b, c) {
return kvadratBrojeva(a) + kvadratBrojeva(b) + kvadratBrojeva(c);
}

const zbirKvadrataRezultat = zbirKvadrata(8, 5, 3);
console.log(zbirKvadrataRezultat);

//vezba
//izracunati kalorije u obroku
//banana, jaja
const KALORIJE_BANANA = 100;
const KALORIJE_JAJE = 300;

function kalorijeJedneStavke(kolicina, tipStavke) {
let kalorijePoJedinici = 0;
if (tipStavke === "banana") {
kalorijePoJedinici = KALORIJE_BANANA;
} else if (tipStavke === "jaje") {
kalorijePoJedinici = KALORIJE_JAJE;
}

return kolicina * kalorijePoJedinici;
}
function ukupneKalorijeObroka(kolicinaBanana, kolicinaJaja) {
const kalorijeOdBanana = kalorijeJedneStavke(kolicinaBanana, "banana");
const kalorijeOdJaja = kalorijeJedneStavke(kolicinaJaja, "jaje");

return kalorijeOdBanana + kalorijeOdJaja;
}

const ukupneKalorijeRezultat = ukupneKalorijeObroka(2, 5);
console.log(ukupneKalorijeRezultat);

const ukupneKalorijeRezultat2 = ukupneKalorijeObroka(5, 10);

//II nacin
function ukupnoKalorija(brBanana, kalBababa, brJaja, kalJaja) {
const total = kal(brBanana, kalBababa) + kal(brJaja, kalJaja);
return total;
}
function kal(brojNamirnica, kal) {
return brojNamirnica * kal;
}
let resultUkupno = ukupnoKalorija(2, 345, 3, 3434);
console.log(resultUkupno);

//function declaration- deklaracija funkcije
function calcAge(now, birthYear) {
return now - birthYear;
}

const res1 = calcAge(2025, 1985);
console.log(res1);

//function expression - funkcijski izraz
//anonimna funkcija
const calcAge2 = function (now, birthYear) {
return now - birthYear;
};

console.log(calcAge2);

const res2 = calcAge2(2025, 1991);
console.log(res2);

//primer
const pozdrav = function (name) {
return `Zdravo ${name}`;
};

console.log(pozdrav("Sanja"));

//function expression -II nacin
//arrow funkcije

//return je implicitno definisan ukoliko imamo jedan red naredbi u telu funkcije
const calcAge3 = (now, birthYear) => now - birthYear;

const res3 = calcAge3(2025, 1998);
console.log(res3);

//primer arrow function
///return se izvrsava implicitno
const sayHi = () => `Hi!`;

console.log(sayHi());

//Primer

const add = (a, b) => {
const zbir = a + b;
return zbir;
};

//Vezba
//napisati arrow funkciju koja ce u zavisnosti od godine rodjenja vratiti koliko je godina ostalo do penzije
//u penziju se ide sa 65 godina
const calcAge4 = (now, yearOfBirth) => {
const brojGodinaOsobe = now - yearOfBirth;
const brojGodinaDoPenzije = 65 - brojGodinaOsobe;
return brojGodinaDoPenzije;
};
const rezultat = calcAge4(2025, 1988);
console.log(rezultat);

//Vezba 2
//arrow funkcijom napisati program koji ce faktorijel nekog broja !5=1*2*3*4*5
const faktorijel = (n) => {
if (n < 0) {
return `Faktorijel nije definisan za negativne brojeve.`;
}
let rezultat = 1;
for (let i = n; i > 0; i--) {
rezultat *= i;
}
return rezultat;
};
const rez = faktorijel(5);
const rez1 = faktorijel(10);
console.log(rez);
console.log(rez1);

11

Javascript / Java Script 14 Dan 25 Promisi - uvod iz prethodnog dana

« on: 31 October 2025, 02:21:24 »

Uvod radjeno Dan 24

Spoiler for HTML:

Code: [Select]

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="main.js" defer></script>
  </head>
  <body></body>
</html>

Spoiler for JS:

Code: (main JS) [Select]


// const promise = new Promise((resolve, reject) => {
//   const x = 10;
//   const y = 3;

//   if (x === y) {
//     resolve({ status: "uspesno realizovan promise", statusCode: 200 });
//   } else {
//     reject({
//       reason: "Page not found",
//       statusCode: 404,
//     });
//   }
// });

// console.log(promise);
//AJAX poziv

function getData() {
  const data = fetch("https://jsonplaceholder.typicode.com/todos/1")
    .then((resolve) => {
      console.log(resolve);
      return resolve.json();
    })
    .then((result) => console.log(result));

  console.log(data);
}

getData();

//zivotni ciklus promisa:
// 1.pending -pocetno stanje, pre nego sto se ijedna vrednost vrati
//2.settled: fulfilled, rejected

// const promise = new Promise((resolve, reject) => {
// const x = 10;
// const y = 3;

// if (x === y) {
// resolve({ status: "uspesno realizovan promise", statusCode: 200 });
// } else {
// reject({
// reason: "Page not found",
// statusCode: 404,
// });
// }
// });

// console.log(promise);
//AJAX poziv

function getData() {
const data = fetch("https://jsonplaceholder.typicode.com/todos/1")
.then((resolve) => {
console.log(resolve);
return resolve.json();
})
.then((result) => console.log(result));

console.log(data);
}

getData();

//zivotni ciklus promisa:
// 1.pending -pocetno stanje, pre nego sto se ijedna vrednost vrati
//2.settled: fulfilled, rejected

12

Javascript / Java Script 13 Dan 24 EXECUTION CONTEXT, SCOPE

« on: 30 October 2025, 00:27:12 »

EXECUTION CONTEXT, SCOPE CHAIN, VARIABLE SCOPE - radjeno pred kraj Dan 23

Spoiler for HTML:

Code: [Select]


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="main.js" defer></script>
  </head>
  <body></body>
</html>

Spoiler for main JS:

Code: [Select]


"use strict";
const firstName = "Marija";

const firstFun = () => {
  let x = 10;

  const y = secondFun(5);
  x = x + y;

  return x;
};

function secondFun(a) {
  let z = 20;
  return z + a;
}

const funCall = firstFun();

//execution context: variable environment (promenljive, deklaracija funkcija i objekat argumenata), scope chain, this keyword

const num = 20;

function saberi(a) {
  return a + num;
}

const result = saberi(10);
console.log(result);

// dve faze: faza kreiranja i faza izvrsavanja

//bez obzira na velicinu projekta imamo jedan globalni execution context

//scope -okruzenje u kojem je odredjena promenljiva "vidljiva".

//3 vrste scope-a: globalni, function scope, block scope.

function outerFunction() {
  let h = 5;

  function inner() {
    let k = 20;
    console.log(h);
  }
  inner();
  //   console.log(k);
}

outerFunction();

// console.log(k);

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="main.js" defer></script>
</head>
<body></body>
</html>

"use strict";
const firstName = "Marija";

const firstFun = () => {
let x = 10;

const y = secondFun(5);
x = x + y;

return x;
};

function secondFun(a) {
let z = 20;
return z + a;
}

const funCall = firstFun();

//execution context: variable environment (promenljive, deklaracija funkcija i objekat argumenata), scope chain, this keyword

const num = 20;

function saberi(a) {
return a + num;
}

const result = saberi(10);
console.log(result);

// dve faze: faza kreiranja i faza izvrsavanja

//bez obzira na velicinu projekta imamo jedan globalni execution context

//scope -okruzenje u kojem je odredjena promenljiva "vidljiva".

//3 vrste scope-a: globalni, function scope, block scope.

function outerFunction() {
let h = 5;

function inner() {
let k = 20;
console.log(h);
}
inner();
// console.log(k);
}

outerFunction();

// console.log(k);

13

Javascript / Java Script 11 Dan 22 OBJEKTI DOM EVENT domaci KNJIGE

« on: 29 October 2025, 23:54:08 »

DOM EVENT domaci za Dan 21 OBJEKTI KNJIGE

Spoiler for ZADATAK:

Domaci-objekti
Zahtevi:
Prikaz podataka o knjigama: Napišite metodu koja vraća niz naslova svih
knjiga dostupnih u biblioteci.
Filtriranje dostupnih knjiga: Napišite metodu koja vraća sve knjige koje
imaju više od 3 primerka dostupnih u biblioteci.
Provera statusa članstva: Napišite metodu koja proverava da li je
određeni član biblioteke sa zadatim memberId još uvek aktivan.
Dodavanje nove knjige: Napišite metodu koja dodaje novu knjigu u
biblioteku. Metoda treba da prihvati parametre
za bookId, title, author, genres, i copies. Nakon dodavanja knjige, metoda
treba da ažurira objekat library.
Ažuriranje broja primeraka: Napišite metodu koja ažurira broj primeraka
knjige sa zadatim bookId. Ako knjiga već postoji u biblioteci, funkcija treba
da poveća broj primeraka za zadatu vrednost. Ako knjiga ne postoji,
funkcija treba da vrati poruku da knjiga nije pronađena.
Transformacija podataka o članovima: Napišite metodu koja kreira novi
niz objekata sa podacima o članovima, ali samo
sa memberId i name poljima.
Ukupno primeraka knjiga: Napišite metodu koja vraća ukupan broj
primeraka svih knjiga u biblioteci.
Prikaz aktivnih članova: Napišite metodu koja vraća niz imena svih
članova čije je članstvo aktivno.
Proveravanje knjiga koje nisu vraćene: Napišite metodu koja vraća niz
naslova knjiga koje nisu vraćene u biblioteku.
Kreiranje novog objekta sa određenim podacima: Napišite metodu koja
vraća novi objekat sa informacijama o biblioteci, ali samo sa podacima
o name, location, i broju članova sa aktivnim članstvom.
Dodatni zahtevi (nisu obavezni):
Loš način korišćenja metoda: Metode koje imaju parametre dodatno
proširite logikom u slučaju lošeg prosleđivanja argumenta ili izostanka
istog.
Nedostatak podataka: Ukoliko zahtevamo neki podatak koji ne postoji,
nemojte samo da vratite praznu listu, objekat ili slično.
U nastavku je objekat sa kojim cete raditi.
const library = {
name: "Central City Library",
location: {
street: "Library Avenue 5",
city: "Metropolis",
state: "NY",
postalCode: "10001",
},
books: [
{
bookId: "B001",
title: "JavaScript: The Good Parts",
author: "Douglas Crockford",
genres: ["Programming", "Technology"],
copies: 5,
borrowed: [
{ memberId: "M001", date: "2023-07-14", returned: false },
{ memberId: "M002", date: "2023-07-20", returned: true },
],
},
{
bookId: "B002",
title: "Clean Code",
author: "Robert C. Martin",
genres: ["Programming", "Best Practices"],
copies: 3,
borrowed: [{ memberId: "M003", date: "2023-08-01", returned: true }],
},
{
bookId: "B003",
title: "The Pragmatic Programmer",
author: "Andrew Hunt",
genres: ["Programming", "Development"],
copies: 4,
borrowed: [],
},
],
members: [
{
memberId: "M001",
name: "John Doe",
email: "john.doe@example.com",
membershipActive: true,
},
{
memberId: "M002",
name: "Jane Smith",
email: "jane.smith@example.com",
membershipActive: false,
},
{
memberId: "M003",
name: "Emily Johnson",
email: "emily.johnson@example.com",
membershipActive: true,
},
],

Code: [Select]


const library = {
name: "Central City Library",
location: {
street: "Library Avenue 5",
city: "Metropolis",
state: "NY",
postalCode: "10001",
},
books: [
{
bookId: "B001",
title: "JavaScript: The Good Parts",
author: "Douglas Crockford",
genres: ["Programming", "Technology"],
copies: 5,
borrowed: [
{ memberId: "M001", date: "2023-07-14", returned: false },
{ memberId: "M002", date: "2023-07-20", returned: true },
],
},
{
bookId: "B002",
title: "Clean Code",
author: "Robert C. Martin",
genres: ["Programming", "Best Practices"],
copies: 3,
borrowed: [{ memberId: "M003", date: "2023-08-01", returned: true }],
},
{
bookId: "B003",
title: "The Pragmatic Programmer",
author: "Andrew Hunt",
genres: ["Programming", "Development"],
copies: 4,
borrowed: [],
},
],
members: [
{
memberId: "M001",
name: "John Doe",
email: "john.doe@example.com",
membershipActive: true,
},
{
memberId: "M002",
name: "Jane Smith",
email: "jane.smith@example.com",
membershipActive: false,
},
{
memberId: "M003",
name: "Emily Johnson",
email: "emily.johnson@example.com",
membershipActive: true,
},
],

Spoiler for HTML:

Code: [Select]


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="main.js" defer></script>
  </head>
  <body></body>
</html>

Spoiler for main JS:

Code: [Select]


"use strict";
const library = {
  name: "Central City Library",
  location: {
    street: "Library Avenue 5",
    city: "Metropolis",
    state: "NY",
    postalCode: "10001",
  },
  books: [
    {
      bookId: "B001",
      title: "JavaScript: The Good Parts",
      author: "Douglas Crockford",
      genres: ["Programming", "Technology"],
      copies: 5,
      borrowed: [
        { memberId: "M001", date: "2023-07-14", returned: false },
        { memberId: "M002", date: "2023-07-20", returned: true },
      ],
    },
    {
      bookId: "B002",
      title: "Clean Code",
      author: "Robert C. Martin",
      genres: ["Programming", "Best Practices"],
      copies: 3,
      borrowed: [{ memberId: "M003", date: "2023-08-01", returned: true }],
    },
    {
      bookId: "B003",
      title: "The Pragmatic Programmer",
      author: "Andrew Hunt",
      genres: ["Programming", "Development"],
      copies: 4,
      borrowed: [],
    },
  ],
  members: [
    {
      memberId: "M001",
      name: "John Doe",
      email: "john.doe@example.com",
      membershipActive: true,
    },
    {
      memberId: "M002",
      name: "Jane Smith",
      email: "jane.smith@example.com",
      membershipActive: false,
    },
    {
      memberId: "M003",
      name: "Emily Johnson",
      email: "emily.johnson@example.com",
      membershipActive: true,
    },
  ],
  allBooksTitles: function () {
    return this.books.map((book) => book.title);

    //II nacin
    //     function filteredByTitle(book) {
    //       return book.title;
    //     }
    //     return this.books.map(filteredByTitle);
  },
  moreThanThreeBookCopies: function (n) {
    // I nacin - vraca ceo obj book
    // return this.books
    //   .filter((book) => book.copies > n)

    //I nacin - vraca samo naslove
    // return this.books
    //   .filter((book) => book.copies > n)
    //   .map((book) => book.title);

    //II nacin

    const result = [];
    for (let book of this.books) {
      if (book.copies > n) {
        result.push(book);
      }
    }
    return result;
    // return result.map((book) => book.title);
  },
  isMemberActiv: function (id) {
    const member = this.members.find((clan) => clan.memberId === id);
    console.log(member);

    if (member) {
      return `Is membership active for member ${member.name}: ${member.membershipActive}`;
    } else {
      return `This member is not found!`;
    }
  },
  addNewBook(bookId, title, author, genres, copies) {
    return this.books.push({
      bookId: bookId,
      title: title,
      author: author,
      genres: genres,
      copies: copies,
      borrowed: [],
    });
  },
  updateBookCopies: function (id, numOfCopies) {
    const book = this.books.find((book) => book.bookId === id);
    book ? (book.copies += numOfCopies) : alert("Book is not found!");
  },
  transformedMembers() {
    return this.members.map((member) => {
      return {
        userId: member.memberId,
        userName: member.name,
      };
    });
  },
  allBooksCopies() {
    // return this.books
    //   .map((book) => book.copies)
    //   .reduce((acc, curr) => acc + curr, 0);

    //II nacin
    let zbir = 0;
    for (const book of this.books) {
      zbir += book.copies;
    }
    return zbir;
  },
  getAllActiveMembers: function () {
    return this.members
      .filter((member) => member.membershipActive)
      .map((member) => member.name);
  },
  getAllUnreturnedBooks() {
    const result = [];
    // this.books.forEach((book) => {
    //   if (book.borrowed.length) {
    //     book.borrowed.forEach((obj) => {
    //       if (!obj.returned) result.push(book.title);
    //     });
    //   }
    // });
    // return result;

    //II nacin

    for (const book of this.books) {
      if (book.borrowed.length) {
        for (const obj of book.borrowed) {
          if (obj.returned) {
            console.log(book.title, "is returned");
          } else {
            result.push(book.title);
          }
        }
      }
    }
    return result;
  },
  getLibraryInfo: function () {
    return {
      libraryName: this.name,
      libraryLocation: this.location,
      activeMembers: this.getAllActiveMembers().length,
    };
  },
};

console.log(library.allBooksTitles());
console.log(library.moreThanThreeBookCopies(3));
console.log(library.isMemberActiv("M003"));
library.addNewBook("B005", "How to write C", "John Simons", ["Programming"], 8);
console.log(library);
library.updateBookCopies("B002", 5);
console.log(library);
console.log(library.transformedMembers());
console.log(library.allBooksCopies());
console.log(library.getAllActiveMembers());
console.log(library.getAllUnreturnedBooks());
console.log(library.getLibraryInfo());

"use strict";
const library = {
name: "Central City Library",
location: {
street: "Library Avenue 5",
city: "Metropolis",
state: "NY",
postalCode: "10001",
},
books: [
{
bookId: "B001",
title: "JavaScript: The Good Parts",
author: "Douglas Crockford",
genres: ["Programming", "Technology"],
copies: 5,
borrowed: [
{ memberId: "M001", date: "2023-07-14", returned: false },
{ memberId: "M002", date: "2023-07-20", returned: true },
],
},
{
bookId: "B002",
title: "Clean Code",
author: "Robert C. Martin",
genres: ["Programming", "Best Practices"],
copies: 3,
borrowed: [{ memberId: "M003", date: "2023-08-01", returned: true }],
},
{
bookId: "B003",
title: "The Pragmatic Programmer",
author: "Andrew Hunt",
genres: ["Programming", "Development"],
copies: 4,
borrowed: [],
},
],
members: [
{
memberId: "M001",
name: "John Doe",
email: "john.doe@example.com",
membershipActive: true,
},
{
memberId: "M002",
name: "Jane Smith",
email: "jane.smith@example.com",
membershipActive: false,
},
{
memberId: "M003",
name: "Emily Johnson",
email: "emily.johnson@example.com",
membershipActive: true,
},
],
allBooksTitles: function () {
return this.books.map((book) => book.title);

//II nacin
// function filteredByTitle(book) {
// return book.title;
// }
// return this.books.map(filteredByTitle);
},
moreThanThreeBookCopies: function (n) {
// I nacin - vraca ceo obj book
// return this.books
// .filter((book) => book.copies > n)

//I nacin - vraca samo naslove
// return this.books
// .filter((book) => book.copies > n)
// .map((book) => book.title);

//II nacin

const result = [];
for (let book of this.books) {
if (book.copies > n) {
result.push(book);
}
}
return result;
// return result.map((book) => book.title);
},
isMemberActiv: function (id) {
const member = this.members.find((clan) => clan.memberId === id);
console.log(member);

if (member) {
return `Is membership active for member ${member.name}: ${member.membershipActive}`;
} else {
return `This member is not found!`;
}
},
addNewBook(bookId, title, author, genres, copies) {
return this.books.push({
bookId: bookId,
title: title,
author: author,
genres: genres,
copies: copies,
borrowed: [],
});
},
updateBookCopies: function (id, numOfCopies) {
const book = this.books.find((book) => book.bookId === id);
book ? (book.copies += numOfCopies) : alert("Book is not found!");
},
transformedMembers() {
return this.members.map((member) => {
return {
userId: member.memberId,
userName: member.name,
};
});
},
allBooksCopies() {
// return this.books
// .map((book) => book.copies)
// .reduce((acc, curr) => acc + curr, 0);

//II nacin
let zbir = 0;
for (const book of this.books) {
zbir += book.copies;
}
return zbir;
},
getAllActiveMembers: function () {
return this.members
.filter((member) => member.membershipActive)
.map((member) => member.name);
},
getAllUnreturnedBooks() {
const result = [];
// this.books.forEach((book) => {
// if (book.borrowed.length) {
// book.borrowed.forEach((obj) => {
// if (!obj.returned) result.push(book.title);
// });
// }
// });
// return result;

//II nacin

for (const book of this.books) {
if (book.borrowed.length) {
for (const obj of book.borrowed) {
if (obj.returned) {
console.log(book.title, "is returned");
} else {
result.push(book.title);
}
}
}
}
return result;
},
getLibraryInfo: function () {
return {
libraryName: this.name,
libraryLocation: this.location,
activeMembers: this.getAllActiveMembers().length,
};
},
};

console.log(library.allBooksTitles());
console.log(library.moreThanThreeBookCopies(3));
console.log(library.isMemberActiv("M003"));
library.addNewBook("B005", "How to write C", "John Simons", ["Programming"], 8);
console.log(library);
library.updateBookCopies("B002", 5);
console.log(library);
console.log(library.transformedMembers());
console.log(library.allBooksCopies());
console.log(library.getAllActiveMembers());
console.log(library.getAllUnreturnedBooks());
console.log(library.getLibraryInfo());

14

Javascript / Java Script 12 Dan 23 OBJEKTI nastavak

« on: 29 October 2025, 23:32:36 »

Zadatak LISTA FILMOVA, nastavak dan 22/domaci

Spoiler for LISTA FILMOVA:

Code: (HTML) [Select]


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="main.js" defer></script>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="main">
      <p>UNESI SVOJ FILM</p>
      <input type="text" />
      <button class="unesiDugme">UNESI</button>
      <div class="mainbody">
        <div class="container movielist">
          <h4>HOCU DA GLEDAM</h4>
          <ul class="wanttowatch"></ul>
          <button class="btnclearmovie">CLEAR MOVIE LIST</button>
        </div>
        <div class="container watchedlist">
          <h4>ODGLEDANI 😘</h4>
          <ul class="watched"></ul>
          <button class="btnclearwatch">CLEAR WATCHED LIST</button>
        </div>
      </div>
    </div>
  </body>
</html>

Spoiler for LISTA FILMOVA:

Code: (CSS) [Select]


.container {
  width: 50%;
  /* height: 60%;*/
  background-color: antiquewhite;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.main {
  width: 60vw;
  height: 90vh;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
p {
  margin: 0;
}
.mainbody {
  display: flex;
  gap: 10px;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: rgb(180, 133, 224);
}
ul {
  padding: 0;
  margin: 0;
  width: 100%;
}
ul li {
  list-style: none;
  width: 100%;
  text-align: center;
}
.btnclear {
  padding: 10px;
  margin: 20px;
}

Spoiler for LISTA FILMOVA:

Code: (main JS) [Select]


const inputVrednost = document.getElementsByTagName("input")[0];
const dugmeUnesi = document.getElementsByClassName("unesiDugme")[0];
const wishList = document.getElementsByClassName("wanttowatch")[0];
const watchedList = document.getElementsByClassName("watched")[0];
const bttnClearListMovie = document.getElementsByClassName("btnclearmovie")[0];
const bttnClearListWatchwd =
  document.getElementsByClassName("btnclearwatch")[0];
function pravljenjeClanaListe() {
  if (inputVrednost.value.trim() && inputVrednost.value !== "0") {
    const listElement = document.createElement("li");
    const checkButton = document.createElement("button");
    listElement.innerText = inputVrednost.value;
    checkButton.innerText = "MOVE";
    checkButton.classList.add("checkButton");
    listElement.appendChild(checkButton);
    wishList.appendChild(listElement);
    checkButton.addEventListener("click", function (event) {
      const listElement2 = document.createElement("li");
      const deleteButton = document.createElement("button");
      listElement2.innerText = this.parentElement.innerText.slice(0, -4);
      deleteButton.innerText = "Delete";
      deleteButton.classList.add("checkButton");
      listElement2.appendChild(deleteButton);
      watchedList.insertAdjacentElement("afterbegin", listElement2);
      this.parentElement.remove();
      deleteButton.addEventListener("click", function (event) {
        this.parentElement.remove();
      });
    });
  } else {
    alert("NIJE DOBRO UNET PODATAK");
  }
}
dugmeUnesi.addEventListener("click", function (event) {
  pravljenjeClanaListe();
});
inputVrednost.addEventListener("keyup", function (event) {
  if (event.key === "Enter") {
    pravljenjeClanaListe();
  }
});
bttnClearListMovie.addEventListener("click", function (event) {
  wishList.innerHTML = "";
});
bttnClearListWatchwd.addEventListener("click", function (event) {
  watchedList.innerHTML = "";
});

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="main.js" defer></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="main">
<p>UNESI SVOJ FILM</p>
<input type="text" />
<button class="unesiDugme">UNESI</button>
<div class="mainbody">
<div class="container movielist">
<h4>HOCU DA GLEDAM</h4>
<ul class="wanttowatch"></ul>
<button class="btnclearmovie">CLEAR MOVIE LIST</button>
</div>
<div class="container watchedlist">
<h4>ODGLEDANI 😘</h4>
<ul class="watched"></ul>
<button class="btnclearwatch">CLEAR WATCHED LIST</button>
</div>
</div>
</div>
</body>
</html>

CSS

.container {
width: 50%;
/* height: 60%;*/
background-color: antiquewhite;
display: flex;
flex-direction: column;
align-items: center;
}
.main {
width: 60vw;
height: 90vh;
display: flex;
flex-direction: column;
gap: 20px;
}
p {
margin: 0;
}
.mainbody {
display: flex;
gap: 10px;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: rgb(180, 133, 224);
}
ul {
padding: 0;
margin: 0;
width: 100%;
}
ul li {
list-style: none;
width: 100%;
text-align: center;
}
.btnclear {
padding: 10px;
margin: 20px;
}

main JS

const inputVrednost = document.getElementsByTagName("input")[0];
const dugmeUnesi = document.getElementsByClassName("unesiDugme")[0];
const wishList = document.getElementsByClassName("wanttowatch")[0];
const watchedList = document.getElementsByClassName("watched")[0];
const bttnClearListMovie = document.getElementsByClassName("btnclearmovie")[0];
const bttnClearListWatchwd =
document.getElementsByClassName("btnclearwatch")[0];
function pravljenjeClanaListe() {
if (inputVrednost.value.trim() && inputVrednost.value !== "0") {
const listElement = document.createElement("li");
const checkButton = document.createElement("button");
listElement.innerText = inputVrednost.value;
checkButton.innerText = "MOVE";
checkButton.classList.add("checkButton");
listElement.appendChild(checkButton);
wishList.appendChild(listElement);
checkButton.addEventListener("click", function (event) {
const listElement2 = document.createElement("li");
const deleteButton = document.createElement("button");
listElement2.innerText = this.parentElement.innerText.slice(0, -4);
deleteButton.innerText = "Delete";
deleteButton.classList.add("checkButton");
listElement2.appendChild(deleteButton);
watchedList.insertAdjacentElement("afterbegin", listElement2);
this.parentElement.remove();
deleteButton.addEventListener("click", function (event) {
this.parentElement.remove();
});
});
} else {
alert("NIJE DOBRO UNET PODATAK");
}
}
dugmeUnesi.addEventListener("click", function (event) {
pravljenjeClanaListe();
});
inputVrednost.addEventListener("keyup", function (event) {
if (event.key === "Enter") {
pravljenjeClanaListe();
}
});
bttnClearListMovie.addEventListener("click", function (event) {
wishList.innerHTML = "";
});
bttnClearListWatchwd.addEventListener("click", function (event) {
watchedList.innerHTML = "";
});

15

Javascript / Java Script 10 Dan 21 DOM SELECTION elemenata

« on: 26 October 2025, 23:13:33 »

Code: (HTML) [Select]

<!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 rel="stylesheet" href="style.css" />
    <!-- <script src="main.js" defer></script> -->
    <!-- <script src="traversing.js" defer></script> -->
    <!-- <script src="variousSelectors.js" defer></script> -->
    <!-- <script src="attributesModification.js" defer></script> -->
    <!-- <script src="styleModification.js" defer></script> -->
    <!-- <script src="addingRemovingMoving.js" defer></script> -->
    <script src="event.js" defer></script>
  </head>
  <body>
    <header>
      <h1>Ucimo DOM</h1>
      <nav>
        <ul>
          <li><a href="#about">About</a></li>
          <li><a href="#projects">Projects</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <section id="about" class="sec aboutSec">
        <h2>About</h2>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero nemo
          amet reiciendis autem. Hic reiciendis earum eveniet ullam, nemo sit
          sequi suscipit ex placeat commodi praesentium delectus consequuntur
          impedit perspiciatis.
        </p>
        <ul>
          <li>HTML</li>
          <li>CSS</li>
          <li>JS</li>
        </ul>
      </section>

      <section id="projects" class="sec projectSec">
        <h2>Projects</h2>
        <article class="default-article">
          <h2>Project 1</h2>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam
            doloribus tempore eius cupiditate, atque quos nostrum eligendi unde
            saepe, itaque commodi hic iste laboriosam est provident ut
            voluptates, voluptatem necessitatibus!
          </p>
        </article>

        <article class="default-article">
          <h2>Project 2</h2>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa
            tenetur sint ab nobis nesciunt quae neque, necessitatibus omnis quod
            animi. Earum molestias eos mollitia beatae fuga dolorem, totam
            voluptatem? Deserunt.
          </p>
        </article>
      </section>
      <button class="addProject">Add project</button>
      <button class="deleteProject">Delete project</button>

      <section id="contact" class="sec constactSec">
        <h2>Contact</h2>
        <form>
          <label for="name">Name</label><br />
          <input type="text" id="name" name="ime" />
          <br /><br />
          <label for="">Email</label><br />
          <input type="email" id="email" name="email" />
          <br /><br />
          <label for="message">Message</label><br />
          <textarea name="message" id="message" name="message"></textarea>
          <br /><br />
          <button type="submit">Submit</button>
        </form>
      </section>
    </main>
    <footer>
      <p>DOM manipulation</p>
    </footer>
  </body>
</html>

Code: (SELECTION JS) [Select]

//DOM -document Object Model
//DOM API- metode i propertiji koji nam omogucavaju da radimo sa DOM-om

console.log(document);

//"Dohvatanje " elemenata DOM-a

I nacin
const sectionAbout = document.getElementById("about");
console.log(sectionAbout);
------

//null vrednost dobijamo kada ne mozemo da pronadjemo element
const unknownElement = document.getElementById("xxx");
console.log(unknownElement); //null
------

// HTML Collection je nesto slicno nizovima 
const sectionProjects = document.getElementsByClassName("projectSec")[0];
console.log(sectionProjects); //HTMLCollection
------

//II primer Ako u html dodamo 2 klase koje imaju pre imena sec (sec ProjectSec), dobijamo u HTML Collection sve koje imaju sec i [0] za prvi, [1] za drugi, ili bez ovog u zagradama za sve
const sections = document.getElementsByClassName("sec");
console.log(sections);
------

// HTML collection za header element
const headerElement = document.getElementsByTagName("header"); //HTMLCollection
console.log(headerElement);
------

// Dobija se NODE LIST kada logujemo prazno, mora da se stavi [0] da bi se uhvatio element
const inputEl = document.getElementsByName("email");
console.log(inputEl); // NodeList

//Da li postoji vise elemenata
if (inputEl.length > 0) {
}

if (sectionAbout !== null) { // da li je section postoji
}
-------

// Da bismo pristupili DOM-u uvek mora = document.
// daje nam h1 element
const h1Element = document.querySelector("header > h1");
console.log(h1Element);
------

// header i h1 su sestrinski elementi ispod body
const h1Element1 = document.querySelector("body > header > h1");
console.log(h1Element1);
------

// dobijaju se NODE list svih sekcija section i koliko elemenata trenutno ima
const allSections = document.querySelectorAll("main > section"); //NodeList
console.log(allSections);

// dobija se sekcija projects jer je poslednja sekcija
console.log(allSections[allSections.length - 1]);

//DOM -document Object Model
//DOM API- metode i propertiji koji nam omogucavaju da radimo sa DOM-om

console.log(document);

//"Dohvatanje " elemenata DOM-a

I nacin
const sectionAbout = document.getElementById("about");
console.log(sectionAbout);
------

//null vrednost dobijamo kada ne mozemo da pronadjemo element
const unknownElement = document.getElementById("xxx");
console.log(unknownElement); //null
------

// HTML Collection je nesto slicno nizovima
const sectionProjects = document.getElementsByClassName("projectSec")[0];
console.log(sectionProjects); //HTMLCollection
------

//II primer Ako u html dodamo 2 klase koje imaju pre imena sec (sec ProjectSec), dobijamo u HTML Collection sve koje imaju sec i [0] za prvi, [1] za drugi, ili bez ovog u zagradama za sve
const sections = document.getElementsByClassName("sec");
console.log(sections);
------

// HTML collection za header element
const headerElement = document.getElementsByTagName("header"); //HTMLCollection
console.log(headerElement);
------

// Dobija se NODE LIST kada logujemo prazno, mora da se stavi [0] da bi se uhvatio element
const inputEl = document.getElementsByName("email");
console.log(inputEl); // NodeList

//Da li postoji vise elemenata
if (inputEl.length > 0) {
}

if (sectionAbout !== null) { // da li je section postoji
}
-------

// Da bismo pristupili DOM-u uvek mora = document.
// daje nam h1 element
const h1Element = document.querySelector("header > h1");
console.log(h1Element);
------

// header i h1 su sestrinski elementi ispod body
const h1Element1 = document.querySelector("body > header > h1");
console.log(h1Element1);
------

// dobijaju se NODE list svih sekcija section i koliko elemenata trenutno ima
const allSections = document.querySelectorAll("main > section"); //NodeList
console.log(allSections);

// dobija se sekcija projects jer je poslednja sekcija
console.log(allSections[allSections.length - 1]);

Forum	Live Projects	Live Projects	TitanQuest	Information
Live Chat	Legion of Champions Mod - Bumbleguppy	Titanomachy Mod - sauruz	Challenges	Registration Agreement
Forum Rules	Deities Mod - nargil66	Soulvizier AERA - soa	AE downloads and guides	Privacy Policy
Discord	Hamunaptra Mod - Prosoro	[MOD] Glorious - Morgul	IT downloads and guides	Contact
Time Zone on Profile	Shadow Champions Mod - WNG	Dream World Mod - DrGray
	[MOD] Enhanced Gameplay 2 (EE) - nargil66

Topics - efko

Javascript / Testovi

Javascript / Java Script 17 Dan 28 MODAL

Javascript / Java Script 16 Dan 27 MODAL

Javascript / Java Script 15 Dan 26 ASYNC , AWAIT, EVENT-LISTENERS

Javascript / Java Script 9 Dan 20 Iteracija kroz objekte

Javascript / Java Script 8 Dan 19 Nizovi nastavak vezbanje i OBJEKTI

Javascript / Java Script 7 Dan 18 Nizovi nastavak METODE , DESTRUKTUIRANJE , SET-ovi

Javascript / Info

Javascript / Java Script 6 Dan 17 FUNKCIJE - NIZOVI - FOR PETLJA - nastavak

Javascript / Java Script 5 Dan 16 FUNKCIJE nastavak

Javascript / Java Script 14 Dan 25 Promisi - uvod iz prethodnog dana

Javascript / Java Script 13 Dan 24 EXECUTION CONTEXT, SCOPE

Javascript / Java Script 11 Dan 22 OBJEKTI DOM EVENT domaci KNJIGE

Javascript / Java Script 12 Dan 23 OBJEKTI nastavak

Javascript / Java Script 10 Dan 21 DOM SELECTION elemenata