API tools faq
paste
klaudiusmarkus

JavaScript App - concepts

klaudiusmarkus
Apr 26th, 2019 (edited)
153
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 19.76 KB | None | 0 0
raw download clone embed print report
  1. Koncepti koje sam naucio u JavaScriptu
  2.  
  3. 43 mini and full projects
  4.  
  5.  
  6. 1. ImageBlur{
  7.  
  8. e.target.classlist.contains('neka klasa){
  9.  
  10. if true, dodati neku drugu klasu ili ukloniti
  11.  
  12. Vesovic video {
  13.  
  14.  
  15. - basic how to in JS play(), pause(), load()
  16. - find JS documentation za video na mozzila tamo ima i vise od tutorijala
  17. - position absolute, position relative, outline za box
  18. - if(video.paused) napraviti rokadu i dugme za play postaje pause sa setAttribute
  19.  
  20. }
  21.  
  22. }
  23.  
  24.  
  25.  
  26.  
  27. 2. Timer + websiteVisitCount FlorinPop
  28.  
  29. 3. Tip - Calculator CodingAddict {
  30.  
  31. - Option kako uraditi bez HTML kroz JavaScript {
  32. Jedan nacin je selektovati select i putem innerHTML direktno ubaciti
  33. Drugi nacin je napraviti array sa obj koji sadrzi podatke o svakom pojednacnom option
  34. value i sadrzaj
  35. onda napraviti forEach proci kroz objekte i svakom option dodati jedan objekat i to appendovati
  36.  
  37. }
  38.  
  39. - Kako vrednost iz Optiona uzeti i na osnovu njega napraviti procente za racunanje{
  40.  
  41. if else, ako je value = 1 onda procenta iznosi toliko, a u startu je procenat=0
  42. tu let procenat onda ubacis u racunske operacije
  43. }
  44.  
  45.  
  46. }
  47.  
  48.  
  49. 4. FlashCard{medium}{
  50.  
  51. rad sa objektima i to jedan function UI(){} gde radis vecinu stvai i jedan za ono sto dobijes iz inputa function Input(someting, something){}
  52.  
  53. - previousElement or nextElementchild how to display
  54. - EDIT i id, kako koristimo da u program ubacimo id i kasnije da uradimo edit svega toga
  55.  
  56. ovo treba da definisimo najpre
  57. let data = []
  58. let id = 1
  59. nakon sto se forma izvrsi treba da se desi sledeca promena
  60. edit bi trebao da ima dataset i kroz objekat ili sta vec, kada appendujemo formu dataset treda da dobije id
  61. svaki sledeci dobija id uvecan za +1
  62. data.push(question)
  63. id++
  64. prakticno pravimo arr.koji cemo da filtriramo i da izvucemo onaj id koji jeste card gde smo kliknuli
  65. - korak prvi je da edit bude kao i delete i da brisemo card
  66. - drugi da imamo taj id kod sebe preko e.target
  67. - prilikom izvrsenja forme ja trebam ceo objekat da ubacim u arr i onda prilikom edita to filtriram i najdjem kao za react ono sto jeste i ono sto nije jednako sa id
  68.  
  69. - na kraju normalno input polja dobijaju novu vrednost koja je jednaka filteru, gde je najden bas taj id gde se kliknulo
  70. pr.
  71. // specific question
  72. const tempQuestion = data.filter(function(item) {
  73. return item.id === parseInt(id);
  74. });
  75. // rest data
  76. let tempData = data.filter(function(item) {
  77. return item.id !== parseInt(id);
  78. });
  79.  
  80. data = tempData
  81.  
  82. questionInput.value = tempQuestion[0].title;
  83. answerInput.value = tempQuestion[0].answer;
  84.  
  85. }
  86.  
  87.  
  88.  
  89. 5) Modal{very-easy} - DevEd simplified
  90.  
  91. - Kako da koristis data-set, u HTML-u i kako da ga selektujes u JS, das Event i sl
  92. - Kako da koristis scale(0) i scale(1) + mozes i jos neki transform da dodas, efektniji je od opacity i display:none
  93.  
  94.  
  95. 6) Music APP{easy} -DevEd {
  96. - Kada radis ForEach imas i index, koji bi mogao i trebao da koristis, njega mozes da setas i tako da nosis sa sobom vrednosti indexa niza, i onda nekom ili necemo dodelis to, pr. ARR Colors=[a,b,c] ...popuni sa bojama svaki buble koji napravis
  97. - Animation End kako se radi, a radim ga da bih uklonio nesto, kao buble nakon sto oni izvrse neku animaciju da mi ne stoje na strani, niti nabijaju pritisak dole
  98. - Kako koristi audio src, zajedno sa mozzila dokumentacijom. Kliknes da se cuje zvuk
  99.  
  100.  
  101. }
  102.  
  103. 7) MealDB Traversy - medium{
  104.  
  105.  
  106.  
  107. - e.path.find(item) - e.path.find uvek ide sa trazenjem neke klase, kada je nadjes onda u njoj trazis dataset id
  108. - dataset id da se doda template stringa i preko njega da se nadje id za svaki meal
  109. - u jednom API raditi sa vise api call i vise razlicitih zavrsetaka
  110. - kako los api sa prikazom objekta ingredients pretvorit u arr i izlistati,template string zezanje
  111.  
  112.  
  113.  
  114.  
  115.  
  116.  
  117. }
  118.  
  119.  
  120.  
  121. 8) Number Guesser - Traversy Media {
  122.  
  123. - Kako lepo procistiti kod, izdovjiti u funkcije, videti moze li neki if else da postane ternarni operator
  124. - mnosto prosledjivanja vrednosti iz funcije u funkciju
  125. - varijable treba obelezavati sa const uvek ako se ne menjaju
  126. - const pera , zika, marko --- mozes i ovako da postavis samo prva je const, a ostale su odmah ispod i odvajas zarezom
  127. - Mousedown event, window.location.reload() kada se ostvari event
  128. - button.disabled = true
  129.  
  130. }
  131.  
  132. 9) Kviz Net Ninja ->{very-easy} Clear Interval, kako se prakticno postavlja i cemu sluzi, ovde za animaciju prikaza broja ili procenta
  133. Kako se pravi forma za da bi se nasli odgovori, na formu nasadim name, koje koristim da uporedim sa onim sto je stiklirano, a to je value
  134. ScrollTo(pozicija x na ekranu, pozicijaY na ekranu )
  135.  
  136.  
  137. Portfolio Project(Traversy){
  138. - state menagment with boolean i toogle dobijamo velike mogucnosti
  139.  
  140. }
  141.  
  142. 10) MovieSetBooking Traversy -> {}
  143.  
  144. 11) Form Submission DevED {easy
  145.  
  146. - Raditi sa AdjescentpreviousElement, AdjescentNextElement
  147. - Rad u kretanju kroz dokument pomocu JS, gde bukvalno mozes bilo sta da sklonis sa strane putem transform, ako pre toga postavis sve to u absolute position za svaki input, transformom jedan pomeres gore i prikazujes drugi
  148. - Kako pomocu JS preci sa jednog celog inputa na drugi
  149. - return true -> return u JS znaci da se sa tom linijom kod JS zavrsi, tako javascript sa ovim prekida izvrsenje forme na tom mestu i vraca vrednost onoga sto je u formi
  150.  
  151. }
  152.  
  153.  
  154. 12) TypeSpeedGame - Traversy -> {easy
  155.  
  156. SetInterval -> Kako da odbrojavam vreme, gde za svaki sekund postavim tu funkciju i 1000
  157. pre toga moram da imam promenljivu koja prikazuje vreme i onda putem funkcije umanjujem to vreme sve dok je vece od 0 u skaldu sa setInterval 1000
  158. Function Init koja inicira i pokrece celu pricu
  159.  
  160.  
  161. }
  162. 13) BookAPP ObjectJS {easy
  163.  
  164. - Rad sa objektima i to imati 2 objekta, sve ono sto treba da se vrati zajedno iz inputa moze da predstavlja jedan objekta, function UI(){} je drugi objekat za koji pravim prototipe i sve funkcije aplikacije
  165. - Kako proslediti book, prvo uzimanjem svih vrednost iz inputa i povezivanjem sa vecim datim atributima objekta book
  166. - AddEventListener osim objekata samnih daje najvecu strukturu celoj prici, u za svaki listener moramo ponovo da instanciramo objekat
  167.  
  168.  
  169. }
  170.  
  171. 14) Tesetmonial CoddingAddict {easy
  172.  
  173. - Rad sa custom objektom koji sam ja napravio i treba da ga ubacim
  174. - Na klik menjaj objekte koje prikazujes
  175. - Menjam index
  176.  
  177. }
  178.  
  179.  
  180. 15) MigrantAddNumbersGame{easy
  181.  
  182. - logika da vise brojeva budu istovremeno random
  183. - animate css (da bi radilo na racunaru ukljuci animation on windows)
  184. - e.target.innerHTML - vrednost polja za selekciju dobijas ovako
  185.  
  186. }
  187. 16) Countdown Traversy {very-easy
  188.  
  189.  
  190. - Date Object i dokumentacija
  191. - newDate.getTime() - dobijes milisekunde od 1970
  192. - SetInterval(), ClearInterval(), za countdown sve mora da bude u okviru jednog diva postavljeno pa najbolje da day, hour... postavis kroz JS innerHTML
  193.  
  194.  
  195. }
  196.  
  197. 17) Mini Tweet App {easy-medium
  198.  
  199. - Local Storage ( setItem, getItem, removeItem) oslanjaj se na kod u local storagu kod tebe, jer nema dobre dokumentacije na Net-u. Tek na ovom projektu si naucio rad sa Local Storage
  200.  
  201. - Materalize.css
  202. }
  203.  
  204.  
  205. 18) Infinite Scrool{traversyMedia} {easy
  206.  
  207. - Kako merimo udaljenost od vrha stranice i visinu otvorenog prozora, kada dotaknemo dno otvorenog prozora aktiviramo neki dogadjaj ili kreiramo novi element
  208. - Window.onScroll event
  209. - Flexbox, TranslateY(), animation-delay
  210. - Samo zato sto nisam pri kreiranju elementa kroz JavaScript napravio novi div, nije htelo da se prikaze na ekranu
  211.  
  212. }
  213.  
  214. 19) BackgroundSlide Codding Addict {easy
  215.  
  216. - kako napraviti slider u DOM sa backgroundimage
  217. - zajebavanje sa index + i -
  218. - savet -> u style napravi bacground-image:url() i gledaj kako treba da ispadne u JS-u
  219.  
  220.  
  221. }
  222.  
  223. 20) NewYear FlorinPoP{easy
  224.  
  225. - kreiranje pahuljica ( kroz JS kako praviti elemente koji tu nisu bili)
  226. - koriscenje randoma da bi dobio random width, dodavanje animacije kroz JS
  227.  
  228. }
  229.  
  230.  
  231. 21) Search {easy
  232.  
  233. - normalno uporedjivanje celog skupa iz liste sa prvim slovom u inputu
  234. - dobro koristiti CodePen
  235.  
  236.  
  237. }
  238.  
  239.  
  240. 22) Random Dog {easy
  241. - Bootstrap
  242. - API forEach after click on button
  243.  
  244. }
  245.  
  246. 23) ExhangeApi {Traversy} { easy-medium
  247.  
  248.  
  249. - HTML number da znas da je to na ekranu kada klikom menjas broj, input, change
  250. - Exchange API basic use
  251. - Number ima slusaca, kada se menja menja se i vrednost u prikazu ispod njega
  252. - Najvaznije kako dolazis do-> rates, onoga sto sam API daje i pruza vrednost jedne valute, koja automatski postaje vrednost druge valute
  253. - koriscenje za objekte mora da se zna da se resi [],
  254. - switch values na klik, kako zameniti 2 vrednosti u JS
  255.  
  256.  
  257.  
  258.  
  259. }
  260.  
  261.  
  262. 24) FullTODOAPP {
  263.  
  264.  
  265. - Add item
  266. - Edit item
  267. - Delete item
  268. - Search item
  269. - hide item
  270.  
  271. concept - previousElementSibling, nextElementSibling
  272. concept - nodeList pretvoriti u arr pre search
  273. consept - ako je checkbox === true uraditi nesto
  274.  
  275. }
  276.  
  277.  
  278.  
  279. 25) MovieSearch - Coding Garden(easy-medium){
  280.  
  281. - Bootstrap
  282. - movieSearchDb, ne koristi njihov link i api key jer ne radi i losa dokumentacija, samo uzmi SJ link
  283. - reduce u praksi za prikaz podataka na strani
  284. - kako iskoristiti id koji nudi API da bi dobio jedinstven id za svaki film i to onda koristis da bi mogao da klikom na watchLater dodas film na drugom mestu
  285. - u narednom navratu uradi isto sa Materalize.CSS i da sve stane u jednom redu!
  286. .then(nova funkcija) - kako nadovezuje 2 funkcije iako nije api call, da nakon jedne ide druga fun
  287. - dodaj alert
  288. - u Watch Later izbaci dugme - button, ternari operator
  289.  
  290. }
  291.  
  292.  
  293. 26) Simple Calculator very easy {
  294.  
  295. - eval()
  296. - updatovanje stanja, zajednicka funkcija kojoj prosledjujes vrednosti klika
  297. - this.id
  298.  
  299. }
  300.  
  301.  
  302. 27) TypeWritting very easy {
  303.  
  304. - da se tvoj tekst otkucava slovo po slovo
  305.  
  306. }
  307.  
  308.  
  309. 28) Arapin Form Validation easy{
  310.  
  311. - form validacija komplet, samo bez regularnih izraza, jedino za email
  312. - Nema slanja, pre nekog sve bude dobro
  313.  
  314.  
  315. }
  316.  
  317. 29) Weather API easy-medium {
  318.  
  319. - OpenWeather api, gledanje dokumentacije, tacna pozicija browsera
  320. - navigator.location - Geolocation API, kako se sa njim radi
  321. - celzisus to farenhait on click
  322. - Svaki link za api mora da sadrzi u sebi prethodno http://
  323.  
  324. }
  325.  
  326.  
  327. 30) Regex email validation full easy{
  328.  
  329. - koriscenje dataset
  330. - regex mala slova, brojevi,broj karaktera
  331. - celokupna struktura email validacije -> kada radis pravi projekat mozes da pogledas
  332. }
  333.  
  334.  
  335. 31) Simple PasswordAPP veryEasy {
  336.  
  337. - Prvi put rad sa sliderom, slider value ubaciti dinamicno
  338. - Random + for loop -> kako imati odredjeni broj random simbola, povezano sa slider.value
  339. - UI semantic framework
  340. - += append kada, kada je dovoljno samo +
  341. - block scoop, treba imati spolja varijablu da bi mogla da bude unutra i opet spolja izvlacis, jer varijable iz nutra nemaju domet van for loop
  342.  
  343.  
  344. }
  345.  
  346. 32) Navbar CoddingAddict very easy {
  347.  
  348. - toggle classu
  349. - CSS postavke
  350.  
  351.  
  352. }
  353.  
  354. 33) Filter Codding Addict easy {
  355.  
  356. - dataset, data-filter
  357. - search
  358. - on click filtrirati i dobiti sta treba
  359.  
  360.  
  361. }
  362.  
  363. 34) Dice Game Jonas {
  364. - Logika
  365. - State, toggle class
  366. - Kako promeniti koji player igra
  367.  
  368.  
  369. }
  370.  
  371.  
  372. 35) Rock Paper Scissors {
  373.  
  374. - pravljenje rezultata preko proxi
  375. - dom.textContent = value, ne radi definsanje textContenta gore
  376. - logika
  377. - e.target moze iz elementa da pokupi sta hoces
  378.  
  379. }
  380.  
  381.  
  382. 36) {
  383. CourseFormProject - rad sa objektom
  384. - local storage
  385. - dom traversing to get card, then select everything card.querySelector
  386. - koncept da ako dobije neki element iz dom, mozes sve ispod njega da selektujes
  387.  
  388.  
  389.  
  390. }
  391.  
  392. 37) Github FInder Traversy {
  393.  
  394. API
  395. Rad sa vise js fajlova
  396. Rad sa query
  397. Rad sa klasama i bootstrap
  398.  
  399. }
  400.  
  401.  
  402. 38) Modal CoddingAddict {
  403.  
  404.  
  405. e.target.src
  406. backgorundImage postaje slider
  407. punis arr sa slikama
  408. add/remove class show
  409. na klik dobiti tacno taj index slike
  410.  
  411.  
  412. }
  413.  
  414. 39) ColorBoxes ColtSteel
  415. 40) SoundBoard CoddingGarden{
  416. - rad sa lokalnim json
  417. - dinamicno sve prikazati na ekranu, pripremi containere pre JS
  418. - rad sa tonovima, play(), pause() ...
  419.  
  420.  
  421.  
  422.  
  423. }
  424. 41) SpeedTypeGame TravesyMedia {
  425.  
  426. clearInterval
  427. LocalStorage
  428. TranslateY na klick
  429. Rad sa select
  430.  
  431.  
  432. }
  433.  
  434. 42) CustomVideoPlayer Traversy{
  435.  
  436. - rad sa range, onchange event
  437. - On timeupdate, progress.value, video.duration
  438. - play(), pause(), stop(), updateTIme()
  439. - kako koristiti MDN dokumentaciju
  440.  
  441. }
  442. 43) MenuSliderModal Traversy {
  443.  
  444. - toggle button da stavis iznad ikonice da bi lepo izgledala i lepo obuhvatila sto obican height, width ne moze
  445. - body dobija translate X za duzinu navbara, tako se ceo body pomera na desno da se vidi modal
  446. - nav je uvek position fixed, van headera
  447.  
  448. }
  449. 44) Expense tracker Traversy {
  450.  
  451. - LocalStorage getItem na pocetku, pa setItem gde treba
  452. - e.classList.add(-unutra moze da ide i ternarni operato)
  453. - brisanje preko id od transaction preko dugmeta
  454. - kako da efikasno koristim arr transactions da u njega upadne svaka transakcija na input to je kljucno za ceo app
  455.  
  456.  
  457.  
  458.  
  459.  
  460. }
  461. 45) Music Player Traversy{
  462.  
  463.  
  464.  
  465. }
  466. 46) Memory Cards
  467. 47) Lyrics Search {
  468.  
  469. - lyrich.ovh api prost sa losom dokumentacijom
  470. - 3 api calls
  471. - kako na klik getLyrics dobiti novu stranu na ekranu
  472. - pagination, next (url), ako api daje jos informacija mozes ponovo da pravis poziv i menjas novi izgled na ekranu
  473. - novi modern display api information samo sa map plus container je iznad map, mada malo zezanje sa template string
  474.  
  475.  
  476.  
  477.  
  478.  
  479. }
  480. 48) Relaxer App {
  481.  
  482. - SetTimeout, setInterval
  483. - Animacija se uvek izvrsava na container elemnta, ne i na samom elementu
  484. - animation grow, shrink, rotate
  485. - znacaj animation-orgin css
  486.  
  487. }
  488.  
  489.  
  490. 49) TypeChecker easy {
  491.  
  492. - Kako racunati pocetak i kraj nekog perioda, razlika endTime, startTime
  493. - getTime() prevesti u sekunde
  494.  
  495.  
  496. }
  497.  
  498.  
  499. 50) SecretMessage ColtSteel {
  500.  
  501.  
  502. - btoa and atob encoding base64 encoding of string
  503. - input.select() - selektovanje stringa, unosa
  504. - default stanje u slucaju nekog uslova, koje se razlikuje od pocetno prikazanog HTML
  505. - window '#' hash za skrivanje poruke
  506.  
  507.  
  508. }
  509.  
  510. 51) FormValidator sa formom TraversyMedia {
  511.  
  512. - poenta kako dinamicno raditi sa vise inputa i od njih napraviti jedinstveni arr
  513. - poruka za gresku ispod inputa
  514. - Password i confirm Password
  515.  
  516.  
  517.  
  518.  
  519.  
  520. }
  521. 52) DOMSortRichestMan TraversyMedia {
  522.  
  523. - ...spread, kada i kako koristiti
  524. - visestruko pozivanje funkcije, sa svakim pozivom novi ulaz, kako kontrolisati
  525. - sort, filter, map, reduce
  526. - imitacija Reacta, gde treba rucno updatovati DOM
  527.  
  528. }
  529. 53) Hangman Traversy
  530. 54) CarInsurance Arapin
  531. 55) BootstrapModal (Maximilian) easy{
  532.  
  533. - pointer-events:all, pointer-events:none - da mozes preko modala da palis i gasis
  534. - input omogucava da napravis objekat i da prikazes na ekranu, delete single movie
  535. -
  536.  
  537. }
  538.  
  539. 56) MovieBookingLocalStorage{
  540. - localStorage bez arr i sa arr
  541. - e.target
  542. - css perspective on container
  543. - css :not(.neka klasa ).:not(.neka klasa)
  544. - selectIndex => Iz koga vidim koji je broj option index (0,1,2,3)
  545. - local storage treba da se ubaci selectIndex i izvuce napolje, to isto radis i za svaki seat
  546.  
  547.  
  548. }
  549.  
  550.  
  551. 57) Car Dealership CoddingAddict
  552.  
  553. 60) AdvancedTODO Dev Ed course {
  554.  
  555. - LocalStorage, setItem, getItem, removeItem
  556. - splice, indexOF
  557. - transform pri delete item
  558. - koriscenje klasa za filtriranje item
  559. - change select value uraditi nesto na promenu
  560.  
  561.  
  562.  
  563.  
  564.  
  565. }
  566.  
  567.  
  568. 64 Tabs Codding Addict{
  569. - event bubling
  570. - efikasno koriscenje getElementById
  571. - data-id i id
  572. - koncept oduzeti klasu svima sa to klasom i dodeliti samo e.target elementu
  573.  
  574.  
  575.  
  576. }
  577.  
  578.  
  579. 65) JS accordion {
  580.  
  581. - content element
  582. - max height i overflow hidden na content
  583. - posle proveravas njegov max height -> scrollHeight elementa
  584.  
  585.  
  586. }
  587.  
  588.  
  589. 66) ChangeImageBackground on password very easy{
  590.  
  591. - getComputedStyle
  592. - koristiti trikove, mimik vrednosti css kao pocetne u js, da bi je posle dinamicno menjao !
  593.  
  594.  
  595.  
  596. }
  597.  
  598. 67) Pop up {
  599.  
  600. - rad sa narednim i prethodnim indexom
  601. - rad sa src i href
  602. - osnovni koncept popUp je da link vece slike ima u sebi manju sliku, tako da u startu klikom imamo uvecani prikaz
  603.  
  604.  
  605. }
  606.  
  607. 68) Vesovic Challange => {
  608.  
  609. - toggle height, overflow:hidden
  610. - slozeni json sa vise slojeva
  611. - borba sa template prikazom, trim(), json('')
  612.  
  613.  
  614. }
  615.  
  616. 69) Digital Clock + input {
  617.  
  618. - kako instalirati Moment.js
  619. - prikaz i format sa Moment.js tako da ti nikada ne treba rucni data/time
  620. - setAttribute()
  621.  
  622.  
  623. }
  624.  
  625.  
  626. 75) InfiniteScroll Negoe {
  627.  
  628. - Dodatno na standardnu pricu o scrool, kada tako nesto downloaduejs treba da obratis paznju dole na network i da testiras kako radi sa slabijim internetom.
  629. - Mozes za svaku sliku da postavis event onLoad(), pa kada su svi elementi loadivani sto odgovara ukupnom broju koji si na pocetku prevideo onda ready === true i moze da loaduje. Ako ima problema mozes na pocektu da loadiujes manji broj, pa onda da ga poguras da bude veci kasnije
  630.  
  631.  
  632. }
  633.  
  634. Counter(CodingAdditc)
  635.  
  636. - koriscenje JavaScript ugradjenog animate()
  637. - dodavanje svoje DATE na pocetku koju kasnije povecavam, smanjujem i nesto radim sa njom
  638. - obicno u JavaScript kada hoces nesto da brojis i racunas, ti krenes sa let sum = 0; let count=0 i tome slicno zavisi sta brojis
  639.  
  640. Roll-Dice Jonas {
  641. - init() - funkcija tako da nista ne strci u kodu. Sve mora biti u okviru funkcija, pa i samo pocetno stanje koje aktiviras gore prvo na pocetku pre ostatka koda
  642. - state koncept i toogle state slicno Reactu
  643. - na klik promeniti sliku i kako oznaciti slike
  644. }
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!