Author Topic: JS projekat geografija  (Read 1905 times)

0 Members and 1 Guest are viewing this topic.

Offline efko

  • Administrator
  • Full Member
  • *
  • Topic Author
  • Posts: 1040
  • Country: cs
  • Karma: +18/-1
  • Gender: Male
    • View Profile
    • Awards
  • Time Zone: +1
JS projekat geografija
« on: 29 May 2020, 05:36:55 »
OSVEZIVANJE

Link ka JS i QA parovima :slightly_smiling_face:
Kartica JS + QA :smile:
https://docs.google.com/spreadsheets/d/19uKbHYcBjlMM36u3FeMJifKgnn9WJgrSC8Ao0lR_Vro/edit?usp=sharing

Ovo je link ka folderu u kome se nalaze planovi rada i zahtevi :slightly_smiling_face:
https://drive.google.com/open?id=1mw61tGUsdi_YQhvbsU6xnB-ggfYIdMTI

Da li neko moze da prosledi link ka video materijalu

https://photos.app.goo.gl/7xV3XVFPXARXuyQL9







discord: efko#5979
╚►They say "Before you die your whole life flashes before your eyes…". Make it worth watching. It's true, even for a blind man... ◄╝
              ╚►It is said some lives are linked across time, connected by an ancient calling that echoes through the ages ◄╝

Offline efko

  • Administrator
  • Full Member
  • *
  • Topic Author
  • Posts: 1040
  • Country: cs
  • Karma: +18/-1
  • Gender: Male
    • View Profile
    • Awards
  • Time Zone: +1
Re: JS projekat geografija
« Reply #1 on: 29 May 2020, 05:37:28 »
https://drive.google.com/drive/folders/1yih5el2Nph34O1nVca4UXOGAI9vscYC1  - JS kurs


Još jednom vas pozdravljam u ovoj lepoj situaciji gde su se spojile sve generacije polaznika kurseva Razvoja veb stranica u Nišu

Prve dve nedelje su koncipirane da se prve dve generacije koje su učile PHP uhodaju u JS sintaksu, a da se treća generacija podseti sintakse, da biste posle toga mogli samostalno da odradite novi projekat,
Za prve dve generacije je od važnosti sledeći link: https://drive.google.com/drive/folders/1yih5el2Nph34O1nVca4UXOGAI9vscYC1?usp=sharing
Ovde vam se nalaze materijali sa trećeg kursa IT Bootcampa. U toku naredne dve nedelje je vaš zadatak da pogledate određene oblasti koje ćemo obnavljati u nekom danu. Posebno obratite pažnju i na fajl - Gradivo po danima JS, gde ćete naći linkove ka video fajlovima, koje bi bilo idealno da odslušate pre svakog časa.
white_check_markeyesraised_hands


Za ponedeljak je predviđeno da pogledate sledeće oblasti:
Js osnovne komande
Js upravljačke strukture (if, switch, while, for, funkcije)
Nizovi
Objekti
Foreach petlja i nizovi objekata
Ove oblasti ćemo provežbati kroz par zadataka u ponedeljak. Idealno bi bilo da, ukoliko budete naišli na neke probleme, u uključenje u ponedeljak postavite sva pitanja.


Ovo su kratke smernice šta vam je potrebno od alata da instalirate do sutra (i čemu je koji od njih namenjen):
Slack: Ova grupa je namenjena vama i vašoj međusobnoj komunikaciji.
 Zoom: Instalirajte aplikaciju na svom računaru i koristićemo je za sastanke kada ćemo diskutovati i zadavati zadatke. Dakle, Stefan i ja nećemo biti aktivni na Slack-u već Isključivo na Zoom-u možete da postavljate pitanja u terminima od 11h do 13h ponedeljkom, sredom i petkom. Link ka Zoom sastanku će biti poslat putem Slack grupe.
VS Code: Editor koji ćemo koristiti za kodiranje.
       Obavezna ekstenzija za VS Code je Live Server, opcione (poželjne) ekstenzije su Material Icon Theme i Monokai++.
Nadam se da sam sve obuhvatila


/1. Ispisati sva korisnička imena korisnika koji imaju natprosečan broj godina
//2 Ispisati samo prvi blog korisnika koji imaju natprosečan broj godina
//3. Ispisati podatke korisnika koji ima najviše blogova

Pozdrav svima! :slightly_smiling_face:
Za sutra je u planu rad sledećih "oblasti":
DOM
Events
Timing Events
Na linku koji ste ranije dobili to su folderi: 18, 19 i 22, pa možete pogledati osnovne koncepte.

Stil.css za Quiz projekat

Code: [Select]
.intro, .finish {
    padding: 10px 0;
    text-align: center;
}

.text {
    width: 90%;
    padding: 0 15px;
    margin: 0 auto;
}

.text h2 {
    color: blue;
    font-size: 4.5rem;
    font-weight: bold;
    line-height: 1.2;
}

.quiz {
    padding: 10px 0;
    background-color: #005ce6;
}

.question {
    margin: 50px 0;
}

.question p {
    margin: 10px 20px;
    color: gainsboro;
    font-size: 2.2em;
}

.check {
    margin: 20px 40px;
    color: gainsboro;
    font-size: 1.6em;
}

Današnji video fajlovi: https://photos.app.goo.gl/a29NdQoohZjHDLbj6

Sutra ćemo raditi jedan projekat za DOM, kako bi svi to uvežbali kako valja.
I trebalo bi da otpočnemo firebase, tako da možete svi da napravite nalog za firebase za sutra.

Code: [Select]
  {  box-sizing: border-box;
}
body{
    font-size: 20px;
}
h1{
    color: lightsalmon;
    padding: 10px;
    text-shadow: 5px 5px 5px rgb(243, 198, 180);
}
ul{
    padding: 0px;
}
li{
    list-style: none;
    background-color: rgb(243, 198, 180);
    color: rgb(236, 88, 30);
    width: 300px;
    padding: 10px;
    margin: 10px;
    border: 1px solid lightsalmon;
}
input{
    margin: 10px;
    padding: 10px;
    border: 1px solid lightsalmon;
}
input[type='text']{
    width: 300px;
    font-size: 20px;
    color: rgb(236, 88, 30);
}
input:focus{
    outline: none;
    box-shadow: 0 0 10px lightsalmon;
}

Code: [Select]
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>To Do Lista</title>
</head>
<body>
    <h1>Lista za kupovinu</h1>
    <ul>
        <li>Jabuke</li>
        <li>Tresnje</li>
        <li>Jagode</li>
    </ul>
    <!-- <script src="js/script.js"></script> -->
    <script src="js/script1.js"></script>
</body>
</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>To do list</title>
        <link rel="stylesheet" href="./style.css" />
    </head>
    <body>
        <h1>Lista za kupovinu</h1>
        <ul>
            <li>Breskva</li>
            <li>Jabuka</li>
            <li>Narandza</li>
        </ul>
        <script src="./script1.js"></script>
    </body>
</html>

Code: [Select]
db.collection("customers").get()
.then(function(querySnapshot) {
querySnapshot.forEach(function(doc) {
console.log(doc.id, " => ", doc.data());
});
})
.catch(function(error) {
console.log("Error getting documents: ", error);
});
Ostali, imate domaci koji je zadala Jelena, i pogledajte detaljnije prezentaciju sa bazama

Stefane imas sa strane 4 hidden u Chrome-u
Mozda ti je tu problem


Maj 8

Ovo je link ka današnjim video materijalima
https://photos.app.goo.gl/fuEoeQsCfwobfDj6A
Ovo je link ka folderu gde su postavljeni kodovi:
https://drive.google.com/open?id=1M19-E7tlaHk7zyc7uFDG0F_ojFXFOgZM
Podsećam vas da do ponedeljka nabavite/pozajmite slušalice sa mikrofonom :headphones: +:microphone: = :blush: da biste mogli glasovno da se uključujete, pošto nam ovaj čet na Zoom-u otežava rad (ne važi jedino za Zoranu da ne bi probudila dete, ona može da piše pa će neko preneti informaciju ukoliko ne vidimo na vreme :smile: ).
Za ponedeljak imate da pogledate lekciju 24 Validacija forme i da dopunite ToDo listu tako da se onemogući unos praznina.
Takođe, pogledajte CRUD za firebase (create/update/delete dokumenata u bazi) i probajte da uradite ove operacije.
Ovaj čet možete koristiti za međusobnu podršku, tako da slobodno komunicirajte da biste se što bolje upoznali i savladali gradivo. Ona pitanja na koja ne budete uspeli da odgovorite ovde, možete da postavite u našim "uključenjima". :blush:
Ova nedelja je bila dosta intenzivna, nadamo se da ste uspeli da se uklopite i da uhvatite korak. Verujemo da je već sada zanimljivo, a od naredne nedelje nas očekuju još zanimljiviji projekti.
Pozdrav svima do ponedeljka!

« Last Edit: 29 May 2020, 05:47:34 by efko »
discord: efko#5979
╚►They say "Before you die your whole life flashes before your eyes…". Make it worth watching. It's true, even for a blind man... ◄╝
              ╚►It is said some lives are linked across time, connected by an ancient calling that echoes through the ages ◄╝

Offline efko

  • Administrator
  • Full Member
  • *
  • Topic Author
  • Posts: 1040
  • Country: cs
  • Karma: +18/-1
  • Gender: Male
    • View Profile
    • Awards
  • Time Zone: +1
Re: JS projekat geografija
« Reply #2 on: 29 May 2020, 06:14:32 »
Maj 10

Je l moze neko kad uradi "domaci" da pusti deo koda ovde?

Code: [Select]
inputNewTask.addEventListener("keyup", (e) => {
    if (e.keyCode == 13) {
        let liNewTask = document.createElement("li");
        let inputText = inputNewTask.value;
        const regexp = /^\S*$/;
        if (inputText == "") {
            alert("Ne mozes uneti prazan string u listu");
        } else if (!regexp.test(inputText)) {
            alert("Unos ne sme sadrzate, space i tab karaktere");
        } else {
            liNewTask.textContent = inputText;
            if (radioAppend.checked) {
                ulTask.append(liNewTask);
            } else {
                ulTask.prepend(liNewTask);
            }
            inputNewTask.value = "";
        }
    }
});
Ja sam ovo za validaciju odradio ovako, a ovo ostalo imas u imas u prezentaciji onoj za firebase

ee ja cu mozda malo da kasnim sutra, treba da budem kod zeleznicke oko 10h, mislim da stizem na vreme ali ko ga zna

Code: [Select]
inputNewTask.addEventListener( 'keyup', (e) => {
    if( e.keyCode == 13 ){
        console.log('kliknuto');
        let liNewTask = document.createElement('li');
        let inputText = inputNewTask.value;
        if( inputText.trim().length == 0 ){
            alert('String ne sme da bude prazan!');
        }else{
            liNewTask.textContent = inputText;
            if (radioAppend.checked) {
                ulTasks.append(liNewTask);
            }
            else {
                ulTasks.prepend(liNewTask);
            }
        }
        inputNewTask.value = '';
    }
});


11 Maj

evo dva odlicna resursa za regex
https://www.youtube.com/watch?v=r6I-Ahc0HB4&list=PL4cUxeGkcC9g6m_6Sld9Q4jzqdqHd2HiD
https://www.youtube.com/watch?v=7DG3kCDx53c
ovaj drugi lik ima cudan fetis prema unicorn-ima ali je ok predavac..

Code: [Select]
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ITBootcamp</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div>
        <header>
            <h1>ITBootcamp Chat</h1>
            <nav>
                <h2>Choose a chatroom</h2>
                <div>
                    <button id="general" class="btn">#general</button>
                    <button  id="js" class="btn">#js</button>
                    <button  id="test" class="btn">#test</button>
                    <button  id="homework" class="btn">#homework</button>
                </div>
            </nav>
         </header>
        <section>
            <ul>
                <!-- Poruke -->
            </ul>
        </section>
        <footer>
            <form id="formNewMessage">
                <input type="text" name="inputMessage" id="inputMessage" placeholder="Your message...">
                <input type="submit" value="Send" id="btnSend" class="btn">
            </form>
            <form id="formUpdateUsername">
                <input type="text" name="inputUsername" id="inputUsername" placeholder="New username...">
                <input type="submit" value="Update username" id="btnUpdateUsername" class="btn">
            </form>
            <div id="divUpdatedUsername"></div>
        </footer>
    </div>
    <!-- The core Firebase JS SDK is always required and must be listed first -->
    <script src="https://www.gstatic.com/firebasejs/7.12.0/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.12.0/firebase-firestore.js"></script>
    <!-- TODO: Add SDKs for Firebase products that you want to use
        https://firebase.google.com/docs/web/setup#available-libraries -->
    <script>
    // Your web app's Firebase configuration
    var firebaseConfig = {
        apiKey: "AIzaSyCsFzh26KMJOHv4oOH6kKdHInedKPCEAAo",
        authDomain: "itbootcamp-osnazivanje.firebaseapp.com",
        databaseURL: "https://itbootcamp-osnazivanje.firebaseio.com",
        projectId: "itbootcamp-osnazivanje",
        storageBucket: "itbootcamp-osnazivanje.appspot.com",
        messagingSenderId: "362629757491",
        appId: "1:362629757491:web:8fe2685b8e8142c3770146",
        measurementId: "G-PWFVHZSJC2"
    };
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
    let db = firebase.firestore();
    </script>
    <!-- Povezivanje sa eksternim js fajlovima -->
    <script src="app.js" type="module"></script>
</body>
</html>
11:08
/* Opšta podešavanja */
*{
    box-sizing: border-box;
}
body{
    margin: 0px;
    padding: 0px;
    text-align: center;
    color: purple;
}
.btn{
    width: 200px;
    height: 40px;
    font-size: 18px;
    border: 0px;
    border-radius: 5px;
    background-color: purple;
    color: white;
}
.btn:hover{
    background-color: rgb(70,9,70);
    cursor: pointer;
}
form{
    margin: 5px;
    width: 100%;
}
input{
    font-size: 20px;
    height: 30px;
    width: 400px;
    border-radius: 5px;
}
input:focus{
    outline-width: 0px;
    border: 3px solid purple;
    border-radius: 5px;
}
.btn:focus{
    outline-width: 0px;
}
/* Pozicioniranje: header, footer, ul */
header, footer, ul{
    position: absolute;
    /* Postaviti centralno */
    left: 0;
    right: 0;
    overflow: hidden;
}
header{
    top: 0;
    height: 25%;
}
footer{
    bottom: 0;
    height: 20%;
}
ul{
    list-style-type: none;
    font-size: 20px;
    /* Pozicioniranje ispod top sekcije i iznad bottom sekcije */
    top: 25%;
    bottom: 20%;
    /* ul centralno postavljena, ali tekst levo poravnat */
    text-align: left;
    width: 80%;
    margin: 0 auto;
    /* dodamo skrolovanje poruka */
    overflow-y: auto;
    /* prelom bilo koje reči bez razmaka */
    word-wrap: break-word;
}
ul>li{
    /* width: 60%; */
    background-color: thistle;
    margin-bottom: 10px;
    margin-right: 5px;
    padding: 20px;
    /* border-radius: 0px 20px 20px 20px; */
}
/* .me{
    margin-left: auto;
    background-color: bisque !important;
    border-radius: 20px 0px 20px 20px !important;
} */
.username{
    font-weight: bold;
}
.date{
    color: grey;
}
#divUpdatedUsername{
    font-size: 20px;
}
#spanNewUsername{
    font-weight: bold;
}
/*
.btn-selected{
    background-color: rgb(50, 10, 50);
    color: bisque;
} */
/* Tablet i mobilni telefon */
@media only screen and (max-width: 850px) {
    h1, h2{
        font-size: 20px;
    }
    button.btn, input{
        width: 45%;
        font-size: 15px !important;
        margin-bottom: 3px !important;
        padding: 0px !important;
    }
    ul{
        font-size: 16px !important;
        width: 100% !important;
    }
    ul>li{
        padding: 10px;
    }
}
discord: efko#5979
╚►They say "Before you die your whole life flashes before your eyes…". Make it worth watching. It's true, even for a blind man... ◄╝
              ╚►It is said some lives are linked across time, connected by an ancient calling that echoes through the ages ◄╝

Offline efko

  • Administrator
  • Full Member
  • *
  • Topic Author
  • Posts: 1040
  • Country: cs
  • Karma: +18/-1
  • Gender: Male
    • View Profile
    • Awards
  • Time Zone: +1
Re: JS projekat geografija
« Reply #3 on: 29 May 2020, 06:20:12 »
11 Maj

Zadaci za sredu (13.maj 2020. god)
Kada se klikne na dugme Send da se u bazu podataka doda poruka koja je uneta u input polje za poruku (uraditi to u app.js fajlu)
Kada se klikne na dugme Update username  (uraditi to u app.js fajlu)
Da se pozove napravljen metod za promenu korisničkog imena
U index.html stranici u footer-u ispod formi dodati div sa id-em divUpdatedUsername i kada se klikne na dugme Udate username u ovom div-u ispisati username koji je korisnik upravo uneo npr. "Your name was updated to ..."
Prethodno navedeni div treba da se prikazuje na ekranu samo 3 sekunde, nakon čega nestaje sa ekrana (igra ulogu neke notifikacije)
:+1:
9

1:26
U sredu ću vam pokazati kako bi trebalo da izgleda kod za ove zadatke, proćićemo ga zajedno i prokomentarisati ali ga nećemo kucati od nule.
Budite slobodni da postavljate pitanja ili dajete predloga ukoliko imate neko jednostavnije rešenje/obrazloženje.
Takođe, do srede pogledajte kod od danas i "naoružajte se pitanjima" šta biste voleli da pojasnimo

Možemo li da dobijemo današnji kod?
Postavljen je na onom linku koji sam vam poslala :)
Ne znam da li je Slack izbisao taj link i poruku, evo šaljem opet:
https://drive.google.com/open?id=1M19-E7tlaHk7zyc7uFDG0F_ojFXFOgZM
Izgleda da je bio izbrisao, bas sam gledala gde si to poslala ranije

Ukoliko se nekom pojavljivala greska "firebase is not a function", kao sto je meni, morala sam da dodam ovo i onda radi:
Code: [Select]
<script src="https://www.gstatic.com/firebasejs/7.14.3/firebase-firestore.js"></script>
Da li neko ima resenje za sledeci problem:
Code: [Select]
error.ts:166 Uncaught FirebaseError: Function Query.where() requires a valid third argument, but it was undefined.
Ovo se desilo kad sam dodala ovo, pre toga je sve radilo:
getChats(callback){
        this.chats
        .where('room', '==', this.room)
        .orderBy('created_at')
        .onSnapshot( snapshot => {
            snapshot.docChanges().forEach( change => {
                if(change.type == "added") {
                    //dodaj novu poruku
                    callback(change.doc.data());
                }
            })
        });
Ako sklonim <script src="https://www.gstatic.com/firebasejs/7.14.3/firebase-firestore.js"></script>
javlja se opet ona greska da firebase-firestore nije function.
Za taj problem sam probala i (nasla na netu):
Code: [Select]
const firebase = require("firebase");
// Required for side-effects
require("firebase/firestore");

Mislim da ti problem pravi this.room.
Vidi da li ti je dobar geter za njega.
Pošto geška kaže “Treći argument u where”, zato slutim na to


13 Maj

Code: [Select]
//DOM elementi
let cr = new Chatroom('general', 'AA');
let formNewMessage = document.querySelector('#formNewMessage');
let inputMessage = document.querySelector('#inputMessage');
let formUpdateUsername = document.querySelector('#formUpdateUsername');
let inputUsername = document.querySelector('#inputUsername');
let divUU = document.querySelector('#divUpdatedUsername');
:eyes:
1


//Slanje nove poruke
formNewMessage.addEventListener('submit', e => {
    e.preventDefault();
    let textMessage = inputMessage.value;
    cr.addChat(textMessage)
        .then(() => {formNewMessage.reset()})
        .catch(err => console.log(err))
});
//Promena korisničkog imena
formUpdateUsername.addEventListener('submit', e => {
    e.preventDefault();
    let newUsername = inputUsername.value;
    cr.updateUsername(newUsername);
    formUpdateUsername.reset();
    divUU.innerHTML = `Your name was updated to <span id="spanNewUsername">${newUsername}</span>`;
    setTimeout(() => divUU.innerText="", 3000);
});

Code: [Select]
let htmlLI = `<li`;
        if(document.username == localStorage.username){
            htmlLI += ` class="me">`;
        } else {
            htmlLI += `>`;
        }
        htmlLI += ` <span class="username">${document.username}</span>
                    <span class="message">${document.message}</span>
                    <div class="date">${document.created_at.toDate()}</div>
                </li>`;
        this.list.innerHTML += htmlLI;

Šaljem vam uskoro zadatke ovde :smile:
A takođe, zadatke ćete moći da viditi i u onom linku koji delim sa vama

Da vam ne bih i ovde pisala zadatke, šerujem link ka njima.
https://docs.google.com/document/d/1uOS5IDcCJJjAAdSp2gWnuSTv8P2hEn6mR3FjPdRm_t0/edit?usp=sharing

discord: efko#5979
╚►They say "Before you die your whole life flashes before your eyes…". Make it worth watching. It's true, even for a blind man... ◄╝
              ╚►It is said some lives are linked across time, connected by an ancient calling that echoes through the ages ◄╝

Offline efko

  • Administrator
  • Full Member
  • *
  • Topic Author
  • Posts: 1040
  • Country: cs
  • Karma: +18/-1
  • Gender: Male
    • View Profile
    • Awards
  • Time Zone: +1
Re: JS projekat geografija
« Reply #4 on: 29 May 2020, 06:23:15 »
15 Maj

Code: [Select]
let formUpdateColor = document.querySelector('#formUpdateColor');
let inputColor = document.querySelector('#inputColor');

//Promena pozadinske boje
formUpdateColor.addEventListener( 'submit', e => {
    e.preventDefault();
    document.body.style.backgroundColor = inputColor.value;
    localStorage.setItem("bgcolor", inputColor.value);
});

Evo i index.html
<form id="formUpdateColor">
                <input type="color" name="inputColor" id="inputColor" value="#FFFFFF">
                <input type="submit" value="Change color" id="btnChangeColor" class="btn">
            </form>

Pozdrav svima!
Dodati su zadaci za ponedeljak i nalaze se na istom linku:
https://docs.google.com/document/d/1uOS5IDcCJJjAAdSp2gWnuSTv8P2hEn6mR3FjPdRm_t0/edit?usp=sharing
E sada, ovaj 1) zadatak je malo zahtevniji i možda teži za realizaciju jer je firestore pravio neke promene u dohvatanju id-a poruke.
Ukoliko ne možeze da rešite problem drugačije, napravite svoje polje za id gde ćete automatski beležiti njihov id, kako biste mogli da pristupite tom polju.
Druga ideja za rešenje je da imate neki svoj id koji dodajete prilikom dodavanja poruke u bazu.
Treća ideja (najjednostavnija) za rešenje problema je da ne dodajete nikakav dodatni id nego da poruku brišete prema created_at && username. Jer u istom trenutku jedna ista osoba ne može dodati dve različite poruke.
Sve druge ideje su dobrodošle!


Maj 17

Pozdrav! :slightly_smiling_face: Mozda nekome od vas bude zanimljiva moja verzija chat projekta  - sa malo modifikovanim izgledom (grid +  scss) - https://projectit2-904b9.web.app/
https://github.com/JoRan29/ChatroomGrid

Jel zna neko kako napravtiti  da background image bude responsive? Jel izvodljivo to uopste?
Naso bg-size 100%!  Boze...

discord: efko#5979
╚►They say "Before you die your whole life flashes before your eyes…". Make it worth watching. It's true, even for a blind man... ◄╝
              ╚►It is said some lives are linked across time, connected by an ancient calling that echoes through the ages ◄╝

Offline efko

  • Administrator
  • Full Member
  • *
  • Topic Author
  • Posts: 1040
  • Country: cs
  • Karma: +18/-1
  • Gender: Male
    • View Profile
    • Awards
  • Time Zone: +1
Re: JS projekat geografija
« Reply #5 on: 29 May 2020, 06:31:28 »
18 Maj

Code: [Select]
let htmlLI = document.createElement('li');
        if(doc.username == localStorage.username){
            htmlLI.classList.add('me');
        }
        let spanUser = document.createElement("SPAN");
        spanUser.innerText = `${doc.username}`;
        let spanMess = document.createElement("SPAN");
        spanMess.innerText = `${doc.message}`;
        let divDate = document.createElement("DIV");
        divDate.innerText = `${this.formatDate(doc.created_at.toDate())}`;
        let icon = document.createElement('div');
        icon.classList.add('z-index');
        icon.innerHTML = "<i class='fa ${doc.username}' id='${document.message}'> &#xf1f8</i>";
        this.list.appendChild(htmlLI);
        htmlLI.appendChild(spanUser);
        htmlLI.appendChild(spanMess);
        htmlLI.appendChild(divDate);
        htmlLI.appendChild(icon);
        // htmlLI.appendChild('<i class="fa fa-trash-o" aria-hidden="true"></i>');
        //skroll u chatu na dno liste
        this.list.scrollTop = this.list.scrollHeight;

Link ka Google Sheet gde se unose linkovi i korisnička imena:
https://docs.google.com/spreadsheets/d/19uKbHYcBjlMM36u3FeMJifKgnn9WJgrSC8Ao0lR_Vro/edit?usp=sharing

Link ka Google Sheet gde se unose linkovi i korisnička imena:
https://docs.google.com/spreadsheets/d/19uKbHYcBjlMM36u3FeMJifKgnn9WJgrSC8Ao0lR_Vro/edit?usp=sharing

Pozdrav svima. Samo bih vam javio da pitanja postavljate ovde, a ne u privatnim porukama, jer su pitanja koja postavljate na mestu i od interesa su za sve, i dobro je da ih svi vide. Takođe imate priliku i da počnete neku diskusiju na neku temu. Ovo su pitanja koja su stigla do sada:
1. Da li mozemo da koristimo Bootstrap?
Da, to smo se dogovorili na času da je poželjno da koristite Bootstrap.
2. Da li saljemo link do githuba ili samo do repo-a gde je projekat?
Dovoljno je samo do repoa.
3. Da li je atribut korisnik kolekcije pojmovi ustvari username koji cemo koristiti?
Da, upravo taj username koji se unese na početnoj stranici.
Još jednom bih vam napomenuo da ovaj slack kanal služi za VAŠU komunikaciju, a ne da Jelena i ja odgovaramo na privatne poruke. Za to služe uključenja koja imamo

4. Kako cemo u slucaju drzava koje imaju dve reci na primer. Kako transformisati unos?
Transformaciju vršite tako da obrišete razmake u reči, sva slova postavite  u mala, osim prvog slova koje je veliko.
npr. Velika Britanija -> Velikabritanija

Da li mi postavljamo pocetno slovo ili se ono samo generise od pojma koji unosimo (tako sto se od stringa uzme prvo slovo) ili se generise random funkcijom koja nam vraca neko slovo iz niza slova (pa mi onda pisemo pojam na to slovo)?
Postavlja se automatski, tako što se uzme prvo slovo iz stringa.

Da li je neko imao problem da neće da mu radi konekcija na bazu, tj. da ne prijavljuje nikakvu grešku, ali ne čita podatke iz baze. A isti taj upit, radi sa konekcijom na drugu bazu? Znači običan upit, da povuče sve podatke iz baze i console. log-uje ih. Znači nema nikakve greške da prijavljuje
je l mi ove forme moramo da pravimo kao js komponente?
ma jok
u html
to je za upisivanje novih podataka a ne prikazivanje starih
ali kako kad prelazis sa stranice na stranicu
tako da nema potrebe
pa ta forma je uvek na toj pocetnoj strani samo
ili ja nesto nisam dobro razumela

pa na pocetnoj je forma za korisnicko ime
6:02
a na ovoj drugoj stranici
6:02
za unos pojmova

Vanja Bogdanovic  6:03 PM
pise na istoj stranici da se doda
6:03
a ne na novoj
6:03
Na ovoj stranici korisnik može da predloži novi pojam.
6:03
to pise u onom fajlu
6:04
ja to razumela kao da je na istoj stranici

Zvuci kao da treba iz navigacije da se predje na stranicu za dodavanje pojmova
ali onda mora da pravimo stranicu dodavanje_pojmova.html
i preko linka da ih povezemo
ili da ove forme napravimo kao komponente
6:06
i da se promene klikom na dugme u meniju

Vanja Bogdanovic  6:06 PM
mislim da je bolje novu stranicu ako ces tako
6:07
ja sam sve na istoj, necu da menjam sada
Ja sam to resio tako sto sam napraio pop-up modal za korisnicko ime

https://www.youtube.com/watch?v=NeXQEJNWO5w

Pitanje:
Alo uradimo deploy na firebase na nas projekta ali sada sa Stefanovom bazom da li ce raditi? Jer u oviru projekta na Firebase koji je svako od nas otvorio, a u kome smo napravili hosting, nalazi se drugi database ...

Stefan Stanimirović  1:06 PM
Mislim da je bolje za sada da na firebase kacite projekte koji se povezuju na vasu bazu, kada se Jelena i ja povezemo da probamo nesto, da menjamo vase lokalne baze
1:07
A videcemo i neku kopiju ove glavne baze da vam posaljemo da mozete i kod vas na lokalu da probate
1:07
Ali morate prvo da je popunite

discord: efko#5979
╚►They say "Before you die your whole life flashes before your eyes…". Make it worth watching. It's true, even for a blind man... ◄╝
              ╚►It is said some lives are linked across time, connected by an ancient calling that echoes through the ages ◄╝

Offline efko

  • Administrator
  • Full Member
  • *
  • Topic Author
  • Posts: 1040
  • Country: cs
  • Karma: +18/-1
  • Gender: Male
    • View Profile
    • Awards
  • Time Zone: +1
Re: JS projekat geografija
« Reply #6 on: 29 May 2020, 06:41:58 »
21 Maj

iz VS liveservera radi iz firebase serve ne radi....
2:30
reseno... ne treba public u adresi slike...
POGRESNO: /public/img/icon.png
2:30
ISPRAVNO: /img/icon.png
za VS live server je obrnuta situacija..

Da li neko zna kako postaviti validaciju kada je prvo slovo 'Nj', 'Lj' ili 'Dž'? Jer ako unesem npr. Njujork ili Ljubičica računa mi kao da su prva slova N i L a ne Nj i Lj.
Code: [Select]
if(term.split(0,2) === "Nj" || .... ){
pocetnoSlovo =term.slice(0,2)
}
else {
ocetnoSlovo =term.slice(0,1)
}

Da li je neko uspeo da grupise sva dokumenta od jednog korisnika za Hall Of Fame
Ma ja sam resavao probleme od proslog puta, ali nikako ne mogu da nadjem logiku za ovo jer je NoSQL. Nema sum, count, avg, groupby pa mi nije jasno kako moze da se grupisu onda podaci od jednog korisnika
Moras sam da radis i grupisanje i count, ne postoji gotovo resenje za to u firebase

Svakako treba da unosite pojmove u bazu, samo radite onako kako smo se dogovorili. Koristite samo korisničko ime koje vam piše u tabeli. I dobro istestirajte kod vas na lokalu, na server ubacujte tek kada ste proverili dokumente kod vas na lokalu.

12:34
Pa u principu treba sada svi ti dokumenti da se obrisu, jer kada se bude igrala igra, tražiće se dokumenti gde je pocetnoSlovo neko slovo, i nijedan ovakav dokument neće da prođe filter jer sadrži po dva slova.


Ok, nije problem, izbegli smo veću intervenciju nad bazom :smile:
12:40
Pa čekaj, ti i dalje unosiš dokumente sa dva početna slova

Nemoguce

Stefan Stanimirović  12:43 AM
Pa da, vidim dolaze novi dokumenti, a svuda prva dva slova iz pojma pišu

Filip Pešić  12:43 AM
To je ovo sto sam pre toga dodao, ali sada ide u moju bazu vratio sam onaj script deo moj

Najiksrenije se izvinjavam, nije mi bila namera da unesem sa greskom
Sad me strah da probam lokalno
Zašto strah lokalno, tu možeš da radiš šta hoćeš (u svoja četiri zida)
Da "magicno" se ne pojavi tamo
Ako ti je za utehu, barem se prikazuju stvarno prva dva slova pojma, a ne neka random
Trebalo bi da sam resio problem svakako
Mi obojeni zutom u tabeli, ne vidi se kod na github-u?

Stefan Stanimirović  12:58 AM
Ne vidi se. Kod tebe konkretno vidim 3 repositorijuma, u itbootcamp ima 3 fajla

Code: [Select]
Danilo
export function sortByFrequencyAndRemoveDuplicates(array) {
    var frequency = {}, value;
    // compute frequencies of each value
    for(var i = 0; i < array.length; i++) {
        value = array[i];
        if(value in frequency) {
            frequency[value]++;
        }
        else {
            frequency[value] = 1;
        }
    }
    // make array from the frequency object to de-duplicate
    var uniques = [];
    for(value in frequency) {
        if(uniques.length == 5) {
            break;
        }
        else {
            uniques.push(value);
        }
    }
    // sort the uniques array in descending order by frequency
    function compareFrequency(a, b) {
        return frequency[b] - frequency[a];
    }
    return uniques.sort(compareFrequency);
}
Ja sam ovaj bio naso, sortira po frekvenciji

Prezentacija sa sledećeg link-a, slide 13 mislim da je (Napomena, crvenim slovima,  piše na slajdu).
https://drive.google.com/open?id=1WHx7WU3u9Ie0x7QwOxgxCiJGCT88Dt5B


24 Maj

Zbog problema sa brojem zahteva za čitanje iz baze podataka, do daljnjeg OBUSTAVITE rad na "Dvorana slavnih" (Hall of fames) delu aplikacije.
Onemogućite da se pristupi tom delu aplikacije (do daljnjeg) i uradite deploy ove nove verzije.
Zbog navedenog problema, do 9h sutra ujutru neće biti moguće unositi nove unose/pojmove u našu zajedničku bazu podataka.

Evo linka za phpStorm JetBrains 2018
https://drive.google.com/open?id=1hj08rXb7Eax_ZZ6KYApGu1tNyk30EcPL

Moguće da ste već videli, dodat je još jedan kanal #osvezivanje
Kako bi vaši projekti bili što kvalitetniji, pridružuju nam se ljudi sa QA kursa, koji će ih testirati.
Svako sa JS osnaživanja će dobiti po jednu osobu sa QA kursa koja će testirati taj projekat. Sve detaljnije informacije o ovome ćete dobiti na #osvezivanje  kanalu.
Nadamo se da će ovo unaprediti kvalitet rada i kvalitet projekata podići na još viši nivo!

Da li neko moze da postavi neki link za sockete sto je spomenuo Stefan?
https://www.youtube.com/watch?v=jD7FnbI76Hg

https://youtu.be/xVcVbCLmKew
https://youtu.be/nQC7VEIyQPI
https://youtu.be/oYIZDgZH4e8




discord: efko#5979
╚►They say "Before you die your whole life flashes before your eyes…". Make it worth watching. It's true, even for a blind man... ◄╝
              ╚►It is said some lives are linked across time, connected by an ancient calling that echoes through the ages ◄╝

Tags:
 


SimplePortal 2.3.7 © 2008-2024, SimplePortal