Strona startowa dla przeglądarki, wyświetlająca potrzebne informacje

Witam,
po długim czasie programowania w wolnym czasie ukończyłem mój projekt. Jest to strona startowa dla przeglądarki, wyświetlająca potrzebne informacje w jednym miejscu. Jest przeznaczona tylko dla laptopów/komputerów więc nawet nie robiłem jej wersji mobilnej. Dodam jeszcze, że jest ona do użytku prywatnego, nie planuję jej udostępniać dla szerszego grona, ale załączę na dole link do live demo. Dane zapisywane są w localstorage i nie są szfrowane z braku takiej potrzeby.

Proszę o ocenę kodu i aplikacji.
Live Demo: https://eyeassistant.000webhostapp.com/
GitHub: https://github.com/zerakot/homepage

Tylko 1265 linijek w main.js? słabiutko.

Czemu nie podzieliłeś tego na mniejsze i bardziej logicznie/funkcjonalnie odseparowane pliki?

A pytań może być sporo do kodu
co np robi ta funkcja - bo wg mnie robi konwersję rozmiaru w bajtach na kilobajty itp itd - a nie to co mowi nazwa "skracaLiczbę" czy "krótkaLiczba"

function shortNumber(num, digits){
    const lookup = [
        { value: 1, symbol: "" },
        { value: 1e3, symbol: "k" },
        { value: 1e6, symbol: "M" },
        { value: 1e9, symbol: "G" },
        { value: 1e12, symbol: "T" },
        { value: 1e15, symbol: "P" },
        { value: 1e18, symbol: "E" }
    ];
    const rx = /\.0+$|(\.[0-9]*[1-9])0+$/;
    var item = lookup.slice().reverse().find(function(item) {
      return num >= item.value;
    });
    return item ? (num / item.value).toFixed(digits).replace(rx, "$1") + item.symbol : "0";
}

@Gouda105: Matko boska. Weź zrób po prostu floor() z logarytmu o podstawie 10 i dostaniesz ile "cyfr" jest w liczbie, i jak jest np 4 to dajesz k, etc. Operacje na stringu, jescze regexami żeby wyczaić rząd wielkości liczby to mega głupia implementacja.

Ani notatnik, ani todo nie działaja :(

Jeśli mogę wiedzieć - co pokazuje konsola? (PPM -> zbadaj -> u góry konsola)

Doprecyzując, mogę wpisać tylko tytuł. Jak kliknę treść to wraca do stanu początkowego

Powodem może być niepoprawna nazwa miasta w pogodzie. Zmieniając Dupa na np Kraków, błąd powinien zniknąć. Zapomniałem dodać obsługi błędów w pogodzie.

tak to jest powód tego errrora.

Ale powód że uznałem że todo i notatki nie działąją jest inny. Oczekujesz zakonczenia wpisywania enterem :D inaczej kasujesz zawartość :D To jest zły XU :P

Na plus: estetyka, prawie vanilla js, działa
Na minus: jquery, brak modularnosci
Tip: większość let można zamienić na const

Bardzo mi się podoba, na plus użycie jQuery i logiczny podział w main.js. Tak właśnie należy pisać skrypty Javy - wszystko w jednym miejscu, pod ręką, a nie latanie po plikach i katalogach.

Jest w tym jakiś zamysł, plan w tym kodzie, ale jednak:

• nieuporządkowanie (wszystko w jednym pliku)
• kod nie spełniający obecnych standardów, przestarzały

HTMLElement.prototype.changeEventListener = function(type, newCallback){

1. Tak ludzie pisali w JS z kilkanaście lat temu, jednak potem zmądrzeli i uświadomili sobie, że zmienianie prototypów obiektów wbudowanych w JS to zła praktyka, bo później łatwo o kolizję nazw chociażby. Wyobraź sobie, co będzie, jeśli za kilka lat dodaliby do przeglądarki funkcję changeEventListener. Musiałbyś zmieniać swój kod.

2. co do klas, w których tworzysz i manipulujesz elementami DOM. Myślę, że to już jest ten etap, kiedy warto użyć frameworka (React, Vue, Angular itp.), bo to przestaje być czytelne przy tysiącu linijek kodu

3. mieszasz kod specyficzny dla danego użycia aplikacji (COVID_DATA_TYPES) z kodem uniwersalnym (np. LOAD_OFFLINE). Wyobraź sobie, że bierzesz ten kod i chcesz użyć za 5 lat. Wtedy covida już nie będzie, a reszta kodu może się przydać. Więc lepiej oddzielać kod uniwersalny, który można użyć w różnych przypadkach, od tego specyficznego, który użyjesz tylko w konkretnym przypadku.

4. w jednej funkcji robisz ileś różnych rzeczy, ale nie robisz enterów: https://github.com/zerakot/homepage/blob/main/main.js#L255
   tutaj można by dodać np. wolną linię po każdej logicznej sekcji (np. kod związany z categoryContainer, kod związany z titleBox)

5. używasz var bez specjalnego powodu, nawet kiedy mógłbyś napisać let czy const.

6. robisz niby klasy, ale wszystko na nic, bo one są niereużywalne. Zamiast tworzyć element DOM w klasie (jeśli chcesz już iść tą drogą) tak, żeby każda instancja klasy miała swój element, to przypisujesz tam na sztywno element:

document.querySelector("#quoteContent").textContent = this.content;

czyli klasa nawet nie "posiada" tych elementów ani nie zapisuje sobie ich, tylko po prostu ustawia globalny #quoteContent. Czyli po co są te klasy?
7. w funkcji showHideConfirmation mógłbyś zwrócić Promise, zamiast robić to na callbacku. Byłoby łatwiej tego używać od zewnątrz.

Nie no, w s umie jak na vanilla js to źle nie jest.

Tylko zrefaktoruj kod tak żeby może nie używał zmiennych globalnych.

Da się to jakoś skonfigurować? W sensie zmienić wygląd/układ, źródła wiadomości/pogody/cytatów, imię (do powitania) itp.? No i to:

Trochę pogrzebowo. Osobiście nie przepadam za ciemnym motywem, ale pewnie jestem w mniejszości. Poza tym spoko.

pewnie jestem w mniejszośc Też mam taką nadzieję :P

Mi się motyw bardzo podoba. No może za wyjątkiem rozwijającego się Witamy Panie Wiktorze! :P

Manna5 napisał(a):

No i to:

No ale co tu zmieniać, taka jest prawda.

Tak ma być?

@somekind: Nie chodzi mi o sam wynik Infinity, a o to, co potem robi się po wciśnięciu gwiazdki. W JavaScripcie wypróbujcie jeszcze to: 1/(0-(1/0)).

Bo to bardzo cienkimi nićmi było napisane.

https://github.com/zerakot/homepage/blob/main/main.js#L892

1. zamianka regexpami stringa, żeby jakoś to zabezpieczyć
2. a potem eval

co może pójść nie tak?

To się powinno inaczej w ogóle zrobić.
Zamiast opierać się na potężnym (ale ryzykownym) eval, lepiej napisać kod specjalnie dostosowany pod to, co chcemy zrobić:

1. jeśli chcemy mieć kalkulator z przyciskami, taki klasyczny, że tylko cyfry da się zrobić i wynik, to tutaj jest to przekombinowane. Bo wystarczyłoby po prostu zbierać te liczby i zapamiętywać operator, a potem nawet prymitywny switch/case zrobić na 4 operatorach i mnożyć/dzielić/dodawać/odejmować wynik.
2. jeśli chcemy jednak, żeby kalkulator umożliwiał zaawansowane operacje (np. 2 + 2 * 2 z kolejnością działań, nawiasy itp.), to należałoby podejść poważnie i użyć jakiegoś parsera wyrażeń (na npm można znaleźć gotowe, można też napisać coś takiego samemu, o ile się umie i przetestuje odpowiednio) i obliczać to wyrażenie na zasadzie interpretera, chodząc po drzewku wyrażeń (ew. niektóre biblioteki wprost ci to liczą).