Przejdźmy od razu do rzeczy, chciałbym aby w liście li znajdowała się cyfra, zwykła numeracja. Nie zrobimy tego w js, php tylko w czystym css.
<ul>
<li>lista</li>
<li>lista</li>
<li>lista</li>
...
</ul>Użyjemy css
ul {
list-style: none;
counter-reset: section;
}
li:before {
padding-right: 10px;
counter-increment: section;
content: counter(section);
}Oczywiście poprzednio było HEX na RGB to oczywiście logiczne jest aby też podać i konwersję w drugą stronę 😉
function rgbToHex(rgb) {
let hex = Number(rgb).toString(16);
if(hex.length < 2) {
hex = '0' + hex;
}
return hex;
}
function colorHex(r,g,b) {
return rgbToHex(r) + rgbToHex(g) + rgbToHex(b);
}A wywołanie to zwyczajne przekazanie funkcji trzech liczb na które składa się kolot rgb(0, 161, 255).
console.log(colorHex(0, 161,255));
// => w wyniku otrzymujemy #00a1ffTeraz coś małego ale jakże przydatnego. Konwersja HEX koloru np. #00a1ff na RGB.
function hexTorgb(fullhex) {
const hex = fullhex.substring(1,7);
return {
R: parseInt(hex.substring(0,2), 16),
G: parseInt(hex.substring(2,4), 16),
B: parseInt(hex.substring(4,6), 16)
}
}A wywołanie to zwyczajne przekazanie stringa do funkcji.
console.log(hexTorgb('#00a1ff'));
// => {R: 0, G: 161, B: 255 } w wyniku mamy obiektOczywiście nic nie stoi na przeszkodzie aby modyfikować tą funkcję.
Od razu odpowiem - NIE JUSTUJE SIĘ TEKSTU na stronach www.
Już tłumaczę dlaczego, tego nie powinno się robić.
Obecnie wszystkie strony powinny być RWD (responsive web design), czyli najprościej tłumacząc szerokość stron jak i elementy stron dostosowują się do urządzeń automatycznie.
Justify bardzo dobrze się sprawdzało jeszcze kilka lat temu gdy nikt nie wiedział co to RWD i strony budowało się na szkielecie 'table' ach te czasy 😉
Większość użytkowników ma określony cel przeglądając witrynę. Na przykład jeden użytkownik może chcieć przeglądać katalog produktów tylko po to, aby zobaczyć, co masz w sklepie. Nie jest mu potrzebny kod js w zakładce "pokaż recenzje" bo tam po prostu nie trafi. Więc serwowanie kodu z całej witryny mija się z celem.
Jeżeli chcesz tworzyć szybkie witryny, musisz przesłać jak najmniej JavaScript do przeglądarek. Pobieranie pakietu JavaScript wymaga nie tylko czasu, ale przeglądarka musi także wyodrębnić kod i przeanalizować go, co również zajmuje dużo czasu.
Powolne działanie witryny sprawia, że użytkownicy odchodzą, optymalny czas ładowania strony to maksymalnie 2-3s. Takie podejście serwowania kodu w małych paczkach jest również dobre dla SEO - Google bardzo lubi szybkie strony ;).
To co powinieneś zrobić, to wysłać tyko JavaScript, którego użytkownik potrzebuje do przeglądania i interakcji z odwiedzanymi stronami. W ten sposób witryna ładuje się znacznie szybciej.