Kuba - problemy jakie mi się trafiły, rozwiązania i drobne porady

1. Ucząc się rozmieszczania elementów na stronie warto divy i inne elementy w wazie testów zapakowac w border. Dzięki temu będziemy mogli zauważyć co gdzie leży z czym na styczność i czy ruszyliśmy np. samym divem czy jego zawartością względem niego.

2. Flexbox to coś dzięki czemu ustawianie elementów na stronie w większości przypadków daje dużo więcej możliwości niż m.in. grid.

3. Warto pamiętać o sprawdzaniu wszystkiego co się robi. Bardzo lubię to wykonywać właśnie m. in. border lub zwracaniem jakiegoś oczekiwanego wyniku( mówiąc wyniku wcale nie chodzi tu o wynik matematyczny, lecz choćby wartość jakiejś nadpisywanej zmiennej) funkcją wbudowaną jak return, consol.log() lub po prostu wpisując w jakiś element text z np. w.w. zmienną coś w stylu dajmy na to document.getElementById('#idelementu').innerHTML = variable;.

4. Będąc przy funkcjach, potrzebowałem troszkę więcej czasu żeby to w jakimkolwiek stopniu przyswoić. Patrzyłem długie chwilę na wiele przykłądów w internecie, które wyszukiwałem po najprostych frazach np. how to hide and show again password js. Dla mnie ważne jest zrozumienie tego, nie tylko przekopiowanie, oczywistym jest że zanim zaczne stosować te metody/ funkcje samodzielnie będę musiał pare razy wrócić do tego przykładu i na nim się wzorować. Ale polecam rozplanować to na części. Odwoływać się będę do mojego zadania w tym linku. https://codepen.io/jeyson94/pen/QORegy

Kod w nich może byś aktualizowany i może nie być odzwierciedleniem tego co che wytłumaczyć ale w razie pytań mam dużo linków z komentarzami Mateusza któredużo mi pomogły (do mnie trzeba łopatologicznie jak do chłopa). Biorąc na celownik funkcje odpowiedzialną za pokazywanie passwordu po zaznaczenia checkboxa.

> function showPass(){      /\*deklaracja\*/
>
>

> var haslo = document.getElementById('haslo');
>
>

> if (document.getElementById('check').checked){
>
>

> haslo.setAttribute('type','text');
>
>

> }else{
>
>

> haslo.setAttribute('type','password');}
>
>

> zadeklarujmy funkcje - myślę że na początku nie ważne w jaki sposób ważne by działało później będzie się to optymalizować. czy to będzie standardowa deklaracja powyżej pokazana czy deklaracja "anonimowa" zawarta w zmiennej np. var showPass = funkction(){}; nie ma znaczenia trzeba to zrobić. Dobra to mamy deklaracje można sobie to napisać w /\*\*/ czy jak ja to robiłem przepisywałem całą funkcje ją i rozkładając na czynniki.
>
>

Dalej nie mając na tyle widzy by to odpowiednio opisać robiłęm to po swojemu tak jak to rozumiałem. var pws = document.getElementById('haslo');
no tak ta linikja daje mi zmienną pws a w niej operacje wykonywaną na elemencie o id haslo. no dobra tylko jaka to operacja? patrząc dalej możeby ją zobaczyć.

> if (document.getElementById('check').checked){
>
>

> pws.setAttribute('type','text');}
>
>

> else{
>
>

> pws.setAttribute('type','password');}
>
>

Widzimy tu if. no dobra to Jeżeli element o id check jest (checked) zaznaczony ustaw atrybut zmiennej pws a co za tym idzie i elementu o id haslo na text czyli już nie pokazuje kropek tylko zwykły ciąg znaków. i else czyli jezeli stan checkboxa jest inny niz zaznaczony zrob odwrotnie. Tak po chłopsku.

5. Kolejną rzeczą która sprawiała mi problemy to podpięcie guzika pod daną funkcję.. najprościej w html dodać <button onclick="funckcja()">, ale cóż nie mogłoby być tak kolorowo. Polecam ten sposób tylko w początkowych fazach, szybko łatwo sprawdzamy działanie tego całego monstrum. Ale jednak dobrą i polecaną praktyką przez programistów m.in Mateusza jest dołączenie "nasłuchu" na dany element w js. Dzięki temu możemy kazać funkcji wykonać się już po załadowaniu strony lub innych wyzwalaczach. Ja miałem problem podłączyć przycisk. dodając document.addEventListener("click", funkcja); wszystko załączało się już po kliknięciu na pole tekstowe.. rozumiecie klikając na pole tekstowe login by wpisać login pokazywał mi się juz rezultat akcji podpiętej pod przycisk. także trzeba było poradzić się mentora pogrzebać w internetach i dowiedzieć się czemu tak jest. Nadałem przyciskowi id. id="SingIn". zrobiłem zmienną ele. var ele = document.querySelector('#SingIn'); - pozwolio mi to posługiwać się zmienną która reprezentowała przycisk.. -> tak właśnie to rozumiem. następnie po dalszych poradach i researchu nałożyłem nasłuch na przycisk używając zmiennej, ele.addEventListener("click" function(){}). Udało się po wielkich bólach.

6. Dochodzimy do Tablic asopcyjnych. Pierwszy z błędów jaki mnie spotkał dobrze opisał sam Mateusz link do kodu z bardzo dobrym komentarzem Mateusza tutaj https://codepen.io/jeyson94/pen/Wdegbg . Dzięki niemu nie będę się nad tym wywodził sporo. w skrócie chciałem do tablicy numerycznej zapisać zmienne "tekstowe" i odwrotnie potem chciałem je wyciągnąć... Mam nadzieje że to klasyczny błąd nowicjusza :D..