Cześć,
generalnie w kodzie jest sporo błędów, ale postaram się podać Ci kilka moich subiektywnych wskazówek:
1 - nie twórz zmiennych globalnych. Poczytaj o modułach, ale na początku nauki o IIFE (tzw. natychmiastowe wyrażenia funkcyjne). Zamkniesz wtedy w zakresie IIFE wszystkie swoje zmienne.
2 - Twój kod:
const $ = function(el) {
return document.querySelector(el);
}
można zapisać również np. poprzez zbindowanie metody querySelector, ale raczej proponowałbym querySelectorAll:
const $ = document.querySelectorAll.bind(document);
3 - staraj się robić angielskie nazwy zmiennych i funkcji, ale o ile jeszcze wersję PL można by na początku dopuścić, o tyle nazwa "koloruj" jest błędna - nic nie mówi o tym co funkcja robi, co koloruje? po co? gdzie? Ty ustawiasz w niej kolor dla header, więc może lepiej np. nazwa setHeaderColor ?
4 - Co to za metoda "add" dla obiektu zwracanego metodą querySelector? Działa Ci ten kod prawidłowo? Metoda add z tego co pamiętam chyba jest w jQuery (ale nie jestem pewien teraz na 100% bo dawno nie używałem jQuery).
5 - j.w. ale z właściością "value". w vanilla JS raczej musiałbyć użyć innerHTML albo textContent (dla węzła tekstowego).
6 -strasznie mieszasz... raz pobierasz referencje po ID, za chwilę po klasie, a jeszcze gdzie indziej po typie elementu... W tak małym projekcie proponuję używać jednolitej zasady.
7 - nie musisz używać zdarzenia DomContentLoaded, w zupełności wystarczy podpięcie skryptu przez znacznikiem </body> albo nadanie mu atrybutu async lub defer (w zależności co robi).
To tak na szybko, pewnie inni dadzą Ci jeszcze parę cennych uwag. Działaj i twórz dalej, powodzenia :)