Tydzień 42

Jak skomplikować sobie życie? Wystarczy zrobić coś więcej niż proponuje wykładowca w trakcie kursu. W trakcie kursu Modern Java Script miałem zrobić prosty quiz w consoli, ale stwierdziłem, że jak mam robić quiz, to musi się on normalnie wyświetlać w przeglądarce. Finalnie to co miało mi zająć pół godziny, zajęło niemal 18 godzin.

Oczywiście nauczyłem się przy tym kilku nowych rzeczy, głównie związanych z logiką w Java Script. Dopóki skrypt wykonuje się raz na stronie, to nie napotykamy problemów związanych z obróbką i przechowywaniem danych pomiędzy przeładowaniami strony. Przy tej okazji pierwszy raz zatęskniłem za React.JS. Tam wszystkie elementy odświeżają się wielokrotnie na stronie i nie martwisz się o aktualność danych na których pracuje kod. W Vanilia JS komponenty nie aktualizują się dopóki nie przeładujesz strony. W związku z tym konieczne było wykorzystanie sessionStorage do trzymania gdzieś informacji na temat bieżącego wyniku i ilości zadanych pytań.

Kolejnym wyzwaniem w projekcie było zapewnienie, aby pytania w trakcie quizu nie powtarzały się. Niby prosta pętla sprawdzającą czy w obiekcie znajdują się już numer pytania, który chcemy zadać, ale finalnie trochę się namęczyłem z tym tematem. Kod trzeba było ustawić w pętli, żeby wykonywał się zawsze wtedy, kiedy pytanie się dubluje. Z drugiej strony potrzeba było zabezpieczyć kod przed wykonywaniem się bez końca. Ostatecznie wyszło to tak:

do{
    randomNumber = Math.round(Math.random() * 19);
    testValue = 0;
    for (i=0; i<questionStorageNbr.length; i++){
      if(randomNumber === questionStorageNbr[i]){
        testValue = -1;
      }
    }
    i += 1;
  } while (testValue < 0 && i < 10);
  questionStorageNbr.push(randomNumber);
  sessionStorage.setItem(“QuestionHistory”, questionStorageNbr);
}

Sporym wyzwaniem okazało się również przekazanie wartości z formularza do Java Script. Wcale nie dlatego, że to jakaś skomplikowana funkcja, ale głównie dlatego, że w internecie pełno jest sprzecznych ze sobą informacji na ten temat i musiałem kilka sposobów przetestować, żeby wyłonić ten, który działa:


let answerValue = document.querySelector(‘input[name=”answerX”]:checked’).value;
  if (answerValue == correctAnswerNumber){
    totalScore += 1;
    sessionStorage.setItem(‘SessionTotalScore’, totalScore);
    sessionStorage.setItem(‘TemporaryAnswer’, 1);
  }else{
    sessionStorage.setItem(‘TemporaryAnswer’, 0);
  }
});

Pod względem graficznym projekt nie jest skomplikowany i jedynym know-how jest użycie dodatkowej klasy w CSS ustawiającej właściwość display: none; w powiązaniu z kodem JS dodającym i usuwającym ta klasę z pliku css.

W tym tygodniu na programowaniu spędziłem w sumie 20 godzin, z czego 18 godzin zajęło mi przygotowanie quizu, który jest dostępny pod adresem: FrontendQuiz

No comments
Krzysztof NyrekTydzień 42
read more

Tydzień 27

Projekt “Rozbierz potęgowanie” opublikowany.

W tym tygodniu, choć wielu godzin na programowanie nie udało się wygospodarować, to udało się zakończyć bardzo ważny dla mnie projekt, czyli „Rozbierz Potęgowanie.”

Projekt “Rozbierz Potęgowanie” zacząłem budować w języku Python, ale pojawił się problem z opublikowaniem projektu na stronie WWW. Zacząłem się zastanawiać jak sobie z tym poradzić i szybko okazało się, że można to zrobić w JavaScript. Potrzebowałem tylko trochę wiedzy.

W poprzednim tygodniu rozpocząłem intensywną naukę JS, a w tym tygodniu udało się napisać mechanikę do projektu. Oczywiście jak to młody, zamiast pójść najkrótszą możliwą ścieżką, zacząłem kombinować z funkcjami i napotkałem szereg problemów, które magicznie rozwiązały się, kiedy jednego poranka oświeciło mnie, że można prościej.

Projekt jest i działa, ale jak to z projektami bywa, już jest kilka pomysłów na jego ulepszenie. Pomysły zapisane, ale wrócę do nich nieco później.

Projekt można podejrzeć na moim GitHub: https://dekstryn.github.io/STRIP_EXPOTENCIAL/

W tym tygodniu rozpocząłem kurs zaawansowany z CSS. Kurs jest na Udemy, ale pomimo to daje dużo wartości. Od pierwszej lekcji prezentowane są mega tricki i konkretne zastosowania praktyczne. Wiedza na pewno się przyda, a po zakończeniu tego kursu będę mógł spokojnie dokończyć WTF i ReactJS.

Na przykład, jeżeli chciałbyś wyciąć sobie kształt tła w CSS, to możesz skorzystać ze strony:

https://bennettfeely.com/clippy/

Innym użytecznym źródłem wiedzy na ten tydzień jest wpis na blogu, który zbiera linki do darmowych zdjęć z możliwością wykorzystania ich na stronie WWW

https://www.widzialni.pl/blog/darmowe-zdjecia-na-strone-www/

W tym tygodniu na programowaniu spędziłem 4 godziny, ale radości z zakończenia projektu było co niemiara.

No comments
Krzysztof NyrekTydzień 27
read more