# PAYBACK Review
## HTML

<h2>Twoja przyszłość zaczyna się dziś.</br>Zadbaj o nią!</h2>

Zamiast używania ``<br />`` śmiało można wrzucić te dwie części w paragrafy np:

<h2>
	<p>Twoja przyszłość zaczyna się dziś.</p>
	<p>Zadbaj o nią!</p>
</h2>

Łatwiej wtedy kontrolować paddingi/marginy pomiędzy wierszami.

<form name="kontakt_form" action="">

Wkradła Ci się polsko brzmiąca klasa, pamiętajmy że nie piszemy dla PKP, to samo w atrybutach **id** i **name** w ``<input />``

<section class="footer_section">

Nie wiem do końca gdzie to będzie wklejane, ale podejrzewam, że śmiało można tu użyć tagu ``<footer>``.

Teoretycznie cała sekcja **form_section** mogła by być artykułem ``<article>``, zauważ że jest to część, która śmiało mogłaby istnieć w internecie bez reszty :) Hierarchia nagłówków jest zachowana ok, wtedy dodatkowo **info__paragraph** mógłby być stopką ``<footer>`` dla artykułu :)

## CSS
Wszystko ok, ale dalej polecam zapoznanie się z BEM - trzeba myśleć o późniejszym utrzymaniu i łatwości rozszerzania kodu.

Zerknij na button:

.main_button {
  font-size: 15px;
  color: white;
  font-family: "PAYBACK";
  background-color: #0046aa;
  box-shadow: inset 0 -2px 0 0 #002e79;
  border-radius: 2px;
  padding: 13px;
  text-align: center;
}

W przypadku gdybyś chciał zrobić takiego samego buttona, ale z innym kolorem możesz się bawić selektorami, ale łatwiejsze będzie stworzenie czegoś takiego:

.button {
	font-size: 15px;
	color: white;
	font-family: "PAYBACK";
	/* itp */

	/* i tu śmiało rozszerzamy jego możliwości przez modyfikatory */

	&--main { /* albo primary, jak zwał tak zwał */
		background-color: #0046aa;
		box-shadow: inset 0 -2px 0 0 #002e79;
	}

	/* i bez problemu robimy inne właściwości */

	&--secondary {
		color: red;
	}

}

Wtedy używanie go w HTML sprowadza się do klas: **button button—main**.

Sumując to wszystko, do głównej klasy sprowadzasz wszystkie elementy wspólne, które na pewno będą występować, potem je modyfikujesz.

## JS
Haha, coś na co mam uczulenie. Śmiało możesz używać **const** zamiast **let** jeśli wartość się nie zmienia. Nawet w przypadku obiektów czy tablic polecam używać **const** ponieważ i tak będziesz mógł dodawać do nich właściwości (bo zmienna to tylko referencja w pamięci), a będziesz miał pewność, że nic przez przypadek nie nadpiszę twojego kodu.

Funkcje do walidacji można rozbić na mniejszą, bo kłóci się trochę z zasadą **single responsibility principle**, tj i waliduje dane i manipuluje elementami DOM.

firstName.addEventListener('focus', (event) => {  
        event.target.parentNode.classList.remove("error"); 
});
lastName.addEventListener('focus', (event) => {  
    event.target.parentNode.classList.remove("error"); 
});
phoneNumber.addEventListener('focus', (event) => {  
    event.target.parentNode.classList.remove("error"); 
});
paybackNumber.addEventListener('focus', (event) => {  
    event.target.parentNode.classList.remove("error"); 
});

Podejrzewam, że można to uzyskać za pomocą **Event Delegation** - bo co gdybyś chciał dodać kolejnego inputa? Wiąże się to z dodaniem następnych linii kodu, które obsłużą Ci focus i blur :)