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

2

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

3

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";
}
4

@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.

0

Ani notatnik, ani todo nie działaja :(

0

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

Screenshot 2022-02-14 145617.png

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

1

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

1

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

5

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.

3

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.

0

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.

1 użytkowników online, w tym zalogowanych: 0, gości: 1