feature: view after submiting the form, small fix at icons section #16
Conversation
Quoflame77
commented
Sep 21, 2025
Quoflame77
commented
- implementacja widoku po wysłaniu formularza
- widok jest dostosowany do ekranów od 420px w górę
|
|
| const toggleClasses = (elementId: string, className: string): void => { | ||
| if (document.getElementById(elementId) !== null) document.getElementById(elementId)?.classList.toggle(className); | ||
| else return; | ||
| }; |
There was a problem hiding this comment.
- Niepotrzebny podwójny odczyt
DOM. Wywołaj raz, przypisz do zmiennej. - Nazwa
toggleClassessugeruje wiele klas, lepiejtoggleClass
| document.getElementById("formSubmitButton")?.addEventListener("click", (): void => { | ||
| toggleClasses("formSection", "invisible"); | ||
| toggleClasses("form-section-after-send", "invisible"); | ||
| }); | ||
|
|
||
| document.getElementById("secondary-form-button")?.addEventListener("click", (): void => { | ||
| toggleClasses("formSection", "invisible"); | ||
| toggleClasses("form-section-after-send", "invisible"); | ||
| }); |
There was a problem hiding this comment.
Powtarzający się kod
const toggleVisibility = () => {
toggleClass("formSection", "invisible");
toggleClass("form-section-after-send", "invisible");
};
document.getElementById("formSubmitButton").addEventListener("click", toggleVisibility);
document.getElementById("secondary-form-button")?.addEventListener("click", toggleVisibility);opcjonalnie dla czytelności polecam sobie przypisać najpierw element który szukasz w DOM do zmiennej zamiast używać optional chaining
np.
const submitButton = document.getElementById("formSubmitButton");
if (submitButton) btn.addEventListener("click", toggleVisibility);
(...)There was a problem hiding this comment.
btw duży plus za to, że sobie wydzielacie te skrypty do oddzielnych plików
| <Image class="starImage-1" src={starLight} alt="star-1" width={110} /> | ||
| <Image class="starImage-2" src={starLight} alt="star-2" width={110} /> |
There was a problem hiding this comment.
Te elementy są nieznaczące dla użytkownika więc nie muszą mieć alternatywnego tekstu, jak ktoś będzie korzystał z screen-readerów to mu przeczyta alta. W takich przypadkach można wrzucić alt jako empty string. To jest zachowanie zgodne z zasadami WCAG https://www.w3.org/WAI/tutorials/images/decorative/
| <div class="dot dot-light"></div> | ||
| </div> | ||
| <div class="header-wrap"> | ||
| <h2 class="infoTitle">Świetnie, teraz jesteśmy w <br /> kontakcie!</h2> |
|
|
||
| .formTopSectionInput{ | ||
| .formTopSectionInput { | ||
| width: 47%; |
There was a problem hiding this comment.
Dziwna wartość width: 47%. Jak mieliście problem z umiejscowieniem dwóch elementów w obok siebie to lepiej użyć
display: flex i flex-wrap: nowrap, ewentualnie display: flex na parencie i flex: 1 na childrenach, lub użycie grida
