JavaScript - proszę o ocenę

pytanie zadane 22 sierpnia 2015 w Nasze projekty przez ScriptyChris Mędrzec (190,190 p.)

Napisałem taki interaktywny bankomat. Choć nie jestem do końca zadowolony z efektu, bo liczyłem na więcej, to jednak ten potworek jako tako działa i wyglądem przypomina bankomat :)

Tak wygląda, po wczytaniu się strony:

Natomiast tutaj pełny kod: http://jsfiddle.net/Chriss92/adny0m82/

Bankomat oferuje podstawwowe funkcje, tj. wpisywanie PINu (po 3 nieudanej próbie pojawia się napis blokada, zaś PIN to 1234), sprawdzenie stanu konta (na wstępie jest na nim 1000PLN i jest aktualizowane podczas wpłat i wypłat), wpłatę oraz wypłatę pieniędzy (w przypadku chęci wypłaty kwoty większej niż jest dostępna teoretycznie powinien wyświetlić się stosowny komunikat. Natomiast wypłacona kwota pojawia się pod przyciskiem "card").

Proszę o oceny zarówno od strony wizualnej jak i samej mechaniki (czy też interaktywności) programu. Chciałbym ten program poprawić, aby w wersji finalnej wyglądał przyzwoicie, gdyż siedzę nad nim ponad 2 tygodnie. Możliwe, że dodałbym responsywność, o ile nie jest za późno, bo ponoć strony/aiplikacje webowe od początku tworzy się jako RWD. Użyłem czystego JavaScript, bez jQuery, ponieważ chcę się najpierw w miarę nauczyć samego języka, a potem dopiero przyswajać biblioteki i frameworki (to samo z CSS).

Będę wdzięczny za konstruktywne opinie i uwagi.

Z góry serdecznie dziękuję.

3 odpowiedzi

odpowiedź 22 sierpnia 2015 przez MatexQ Bywalec (2,260 p.)

RWD nie robi się od początku. Ja najpierw koduję zwykły wygląd taki jaki ma być, a dopiero potem gdy mam już wersję komputerową robię RWD. Polecam Ci użyć bootstrapa. Kolumny pomogą Ci w RWD, a jeżeli nie chcesz to możesz oczywiście napisać własne klasy dla kolumn. Pamiętaj tylko żeby dawać szerokości procentowe i float ustawiać na left. Wtedy będziesz miał kolumny obok siebie, a to co się nie mieści to schodzi niżej. Po zmianie szerokości kolumny powinny Ci się dobrze układać. Sprawdzaj zawsze responsywność na różnych urządzeniach (W Chrome pod F12 masz toggle device mode). Strona powinna się prawidłowo wyświetlać na Iphone 4 i wyższych rozdzielczościach - czyli ma się nie przesuwać w bok :)

komentarz 22 sierpnia 2015 przez ScriptyChris Mędrzec (190,190 p.)

Dzięki. A co myślisz o samej mechanice (JavaScript)?

komentarz 22 sierpnia 2015 przez Comandeer Guru (601,510 p.)

Jak dla mnie RWD to przede wszystkim zmiana sposobu myślenia. Nie myśli się sztywnymi wymiarami, lecz proporcjami i relacjami między elementami.

Bootstrap nie jest przykładem RWD, a raczej AWD (Adaptive Web Design). Media Queries w RWD używa się w ostatecznej ostateczności. No i akurat siatka BS-a lekko posysa ;) W BS4 dodali do tego opt-in obsługę flexboxa, ale IMO to powinno być opt-out.

odpowiedź 23 sierpnia 2015 przez jaca121212 Nałogowiec (40,760 p.)

Jest ok mechanizm działania tylko jeszcze jakbyś tam dołożył np. Jak ktoś wpłaca pieniądze to żeby mu komunikat się wyświetlił. Twoje konto zostało uzupełnione kwotą x zł. w ten sam sposób zrobić dla wypłaty i jak posiadacz karty chciałby wpłacić pieniądze to tylko raz bo zauważyłem, że jak się kliknie kilka razy to są te kliknięcia liczone i stan konta się zwiększa o x kwotę podaną w tym panelu. I ostatnie jeśli stan konta jest 1000 a ktoś chcę wypłacić 9999 to zmienia się stan konta na NaN wtedy powinien być napis.Na twoim koncie jest -xxxx zł. Wiem że to twój pierwszy projekt ale plus za pomysł.

komentarz 23 sierpnia 2015 przez ScriptyChris Mędrzec (190,190 p.)

Dzięki. Wiem, że ten mechanizm wypłaty nie działa do końca jak powinien. Trochę dziwnie rozwiązałem sposób pisania samych liczb, bo za każdym razem sprawdzana jest długość obecnie wyświetlanego napisu i np. gdy wyświetla się "Wpisz kod PIN: ", to długość tego napisu jest przekazywana do funkcji dodawania liczb i na podstawie tego dostawiane są kolejne znaki. Za każdym razem, gdy wyświetlany jest inny napis, jak wpłata/wypłata, jest to samo. Wobec tego jedno liczone jest jako długość ciągu znaków, a same liczby konwertowane na Integer (żeby można było dodawać i odejmować stan konta). Trochę pogmatwane, ale lepiej nie umiałem :)

W menu głównym (zaraz po wpisaniu PINu) chciałem zrobić na div'ach wyświetlanie się tych podpowiedzi, która funkcja jest pod którym przyciskiem. W HTMLu umieściłem odpowiednie divy, w CSS je odpowiednio rozlokowałem, w JS dopisałem żeby je wyświetlał (z display: 'none', na display: 'block'). To działa, jeśli taką funkcję umieszczę w funkcji start(), ale jak umieszczę tam gdzie ma być (w accountMenu()), to już tych divów nie wyświetla i nie wiem dlaczego (w debuggerze widzę, że po prostu tamtą zakomentowaną pętlę pomija). Wydaje mi się, że ma to związek z wyświetlaniem na ekranie napisów każdego menu (poprzez onScreen.innerHTML), ale nie wiem jak to teraz przestawić i czy o to chodzi.