Ocenicie mój projekt w HTML CSS i JavaScript?

Question

Witam, oto jeden z moich pierwszych projektów stron internetowych - symulator rzutów kośćmi do gry. Chciałbym prosić o ocenę - co jest dobrze, co mogłoby być lepiej itd. Z góry dziękuję. 

kostki.html

style.css

kostki.js

Answer 1

Co tak na pierwszy rzut oka zauważyłem:
1. Skrypty JS można dołączyć na końcu body
2. onclick vs https://developer.mozilla.org/pl/docs/Web/API/Element/addEventListener
3. type="text/css" nie trzeba dodawać w

	<link rel="stylesheet" type="text/css" href="style.css" />

4. W JS warto sobie deklarować na początku skryptu odwołania do elementów HTML, a nie robić to za każdym razem od nowa.
5. Co do skryptu to jeszcze: https://scotch.io/tutorials/understanding-scope-in-javascript
6. Z tego co pamiętam to textContent jest szybsze niż innerHTML 

Comments

Dzięki za odpowiedź. Co masz na myśli w punkcie 4, bo ja w JS jestem jeszcze trochę zielony? Te getElementById()? Jeśli tak, to jak takie odwołania zrobić?

---

let element = document.getElementById("element");

//pozniej jak chcesz zmienic tekst w tym elemencie to odwolujesz sie tak
element.textContent = "Tekst";

Answer 2

1. Angielskie nazewnictwo
2. Zamiast id wystarczy class
3. div style clear both? Od tego mamy css. Jesteśmy w XXI wieku! HTML5
4. Brak tagów html5 (header, footer, section, article)
5. Zamiast getElementById możesz dać getElementsByTagName (https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByTagName)

 

Comments

2. id zrobiłem na potrzeby skryptu JS

3. Mnie tak nauczyli, jak ty byś to zrobił?

4. Czy tagi HTML5 są konieczne na tak prostej stronie?

W każdym razie dzięki za feedback :)

---

1. Nie jest to jakiś super obowiązek, ale miły i przydatny zwyczaj. Warto pisać po angielsku i wprowadź to w życie.

2. Jeśli chcesz do danego elementu odwołać się w JS i HTML, to należy to zrobić tak:

<div class="name" id="name">

Wtedy w pliku .css odwołujesz się do klasy, a nie id. Do id w CSS się nigdy nie należy odwoływać. 

Tak naprawdę możesz się odwołać w JS również do klasy, np:

document.querySelector(".nazwaKlasy")

Jednak tego głównie używamy, kiedy mamy jakichś elementów wiele na stronie i chcemy do nich przypisać np. jakieś zdarzenie. Dobrze zauważyłeś to w przypadku: 

<div class="kosc" id="kosc1"></div>
	<div class="kosc" id="kosc2"></div>

Klasy się powtarzają (tak powinno być), a id są unikatowe.

4. Bardziej przyczepiłbym się o brak nagłówka <h1>. Jest on najważniejszy i musi być na każdej stronie. 

<div id="tytul">
		Symulator rzutu kośćmi
	</div>
	Ten div Ci niepotrzebny. Zrób tak:

<h1 class="title"> Symulator ... </h1>

5.  Mariusz08 Ale po co w tym przypadku? 

---

Zamiast getElementById możesz dać getElementsByTagName 

Lepiej korzystać z

document.querySelector()

//lub

document.querySelectorAll()

//lub w razie potrzeby Array.prototype z:

[...document.querySelectorAll()]