• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Pierwsza strona - HTML/CSS/JS

VPS Starter Arubacloud
+1 głos
619 wizyt
pytanie zadane 28 kwietnia 2017 w Nasze projekty przez przemek-mtk- Początkujący (390 p.)

infantylny.pl/

Witam, możecie rzucić okiem na tą stronę i powiedzieć jaka pierwsza myśl przychodzi wam do głowy?
Wiem że wizualnie może i nie wymiata, ale jest to moja pierwsza strona z wykorzystaniem html/css/js.
Czy napisany tak kod JS jest OK? Czy raczej dno?


 

"use strict";

var MYAPP = MYAPP || {};
    
MYAPP = (function () {
    var elementCaption = document.getElementsByClassName("caption"),
        elementMainArticle = document.getElementsByClassName("main-article"),
        search = document.getElementById("search"),
        logInForm = document.getElementById("logInForm"),
        singUpForm = document.getElementById("singUpForm");
  
//FUNKCJA POKAZUJĄCA PODPOWIEDZI I BŁĘDY
     var getTips = function (id, numI, numE) {
        var elementInfo = document.getElementsByClassName("info-for-user")[numI],
            elementError = document.getElementsByClassName("error-data")[numE];
        
        if (document.documentElement.clientWidth >= 479) {
            if (id === "emailRepeat" || id === "passwordRepeat" &&   elementError.style.display === "block") {
                elementInfo.style.display = "block";
                elementError.style.display = "none";
            }
            else {
                elementInfo.style.display = "block";
            }  
        } 
    }
     var showTips = function (id, numI, numE) {
        document.getElementById(id).addEventListener("focus", 
            function() {getTips(id, numI, numE)}
        ); 
     }
     
//FUNKCJA ODPOWIEDZIALNA ZA CHOWANIE NAGŁÓWKA I TEKSTU POD NIM 
    var functionHidingText = function (element) {

        for (var i = 0, max = element.length; i < max; i++){
            var content = element[i].innerHTML.split(" ");
        
            while(element[i].scrollHeight > element[i].offsetHeight) {
                content.pop();
                element[i].innerHTML = content.join(" ") + "...";
            } 
        }
    }; 
//FUNKCJA ODPOWIADAJĄCA ZA DISPLAY: BLOCK/NONE ELEMENTÓW
    var showElement = function (element) {

        if (element.style.display === "block"){
            element.style.display = "none";
        }
        else {
            element.style.display = "block";
        }
    };
//HOWANIE WYSKAKUJĄCYCH OKIENEK NP: SINGUP, LOGIN    
    var hideUserPanel = function (event, element) {
        
        if (event.target.id  === element.id) {
            element.style.display = "none";
        }
    };
//POJAWIENIE SIĘ SCROLLUP I PRZEWINIĘCIE STRONY DO GÓRY
    var scrollUp = function () {
        var totalHeightScreen = document.body.offsetHeight,
            scrollUp = document.getElementById("scrollUp");
        
        if ((totalHeightScreen * 0.5) < document.documentElement.scrollTop) {
            scrollUp.style.display = "block";                
        }
        else {
            scrollUp.style.display = "none";
        }      
    };
 
//WALIDACJA FORMULARZA SINGUP
//WALIDACJA IMIENIA    
    var validationFirstName = function () {
            
        var inputName = document.getElementById("firstName"),
            reg = /^[A-ZŻŁ][a-ząćęńółśżź]{0,19}$/g;
            
        if (inputName.value.length >= 3) {
            if (reg.test(inputName.value)) { 
                inputName.style.borderColor = "green";
            }
            else {
                inputName.style.borderColor = "tomato";
            }
        }
        else {
            inputName.style.borderColor = "tomato";
        }
            
        document.getElementsByClassName("info-for-user")[0].style.display = "none";
    };
//WALIDACJA NAZWISKA        
    var validationSurname = function () {
            
        var inputsurname = document.getElementById("surname"),
            reg = /^[A-ZŻŹŚĆŁ][a-ząćęńółśżź]{0,29}$/g;
            
        if (inputsurname.value.length >= 3) {
            if (reg.test(inputsurname.value)) { 
                inputsurname.style.borderColor = "green";
            }
            else {
                inputsurname.style.borderColor = "tomato";
            }
        }
        else {
            inputsurname.style.borderColor = "tomato";
        }
            
        document.getElementsByClassName("info-for-user")[1].style.display = "none";
    };
//WALIDACJA NAZWY URZYTKOWNIKA
    var validationUserName = function () {
           
        document.getElementsByClassName("info-for-user")[3].style.display = "none";
        var userName = document.getElementById("userName");

        if (userName.value.length >= 3) {
            userName.style.borderColor = "green";
            return true;
        }
        else {
            userName.style.borderColor = "tomato";
            return false;
        }
    };      
//WALIDACJA HASŁA
    var validationPassword = function () {
           
        document.getElementsByClassName("info-for-user")[6].style.display = "none";
        var password = document.getElementById("password");
            
        if (password.value.length >= 5) {
            password.style.borderColor = "green";
            return true;
        }
        else {
            password.style.borderColor = "tomato";
            return false;
        }
    };
//FUNKCJA SPRAWDZAJĄCA TAKIE POLA JAK POWTÓRZ HASŁO I POWTÓRZ EMAIL 
    var validationCheckRepeat = function (firstElem, secondElem, numRepeatTips){
            
        var firstElem = document.getElementById(firstElem),
            secondElem = document.getElementById(secondElem),
            errorTips = document.getElementsByClassName("error-data")[numRepeatTips];

            if(firstElem.value.length > 0 && firstElem.value.length === secondElem.value.length) {
                
                for (var i = 0, max = firstElem.value.length; i < max; i++) {
                    
                    if (firstElem.value.charAt(i) === secondElem.value.charAt(i)) {
                        secondElem.style.borderColor = "green";
                        errorTips.style.display = "none";
                        return true;
                    }
                    else {
                        secondElem.style.borderColor = "tomato";
                        errorTips.style.display = "block";
                        return false;
                        break;
                    }
                }  
            }
            else {
                secondElem.style.borderColor = "tomato";
                errorTips.style.display = "block";
                return false;
            }
        };
//WALIDACJA NUMERY TELEFONU
    var validationPhoneUser = function () {
             
        var phoneNumber = document.getElementById("phone");
             
        if (phoneNumber.value.length === 9) {
            phoneNumber.style.borderColor = "green";
        }
        else {
            phoneNumber.style.borderColor = "tomato";
        }
             
        document.getElementsByClassName("info-for-user")[8].style.display = "none";
    };
//WALIDACJA STRONY DOMOWEJ
    var validationHomePageUser = function () {
            
        var inputHomePage = document.getElementById("homePage"),
            reg = /^w{3}..\d*\w*.pl$/g;
            
        if (reg.test(inputHomePage.value)) { 
            inputHomePage.style.borderColor = "green";
        }
        else {
            inputHomePage.style.borderColor = "tomato";
        }
            
        document.getElementsByClassName("info-for-user")[9].style.display = "none";
    };
//SPRAWDZENIE CZY CHECKBOKS JEST ZAZNACZONY  
    var validationFields = function (event) {
           
        var regulations = document.getElementById("regulations"),
            mustBe = document.getElementsByClassName("must-be")[0];
          
        validationUserName();
        validationEmail();
        validationCheckRepeat("email", "emailRepeat", 0);
        validationPassword();
        validationCheckRepeat("password", "passwordRepeat", 1);   

        if (!regulations.checked) {
            mustBe.style.display = "block";
            event.preventDefault();
        }
        else {
            alert("Brak uprawnień.");
            event.preventDefault();
        }
    };      
//FUNKCJA KTÓRA POZWALA PORUSZYĆ SIĘ NA POCZĄTKU ELEMENTOWI FIXED, I PRZYPINA GO DOPIERO POTEM;
    var giveElemeFixed = function (id, pixels) {
        var elemFixed = document.getElementById(id),
            topWindowPosition = document.documentElement.scrollTop;
                
        if (topWindowPosition >= pixels) {
            elemFixed.style.position = "fixed";
        }
        else {
            elemFixed.style.position = "relative";
        }
    };  

    
    return {
//FUNKCJA POKAZUJĄCA PODPOWIEDZI DLA ELEMENTÓW FOCUS
        functionShowTips: function () {
            showTips("firstName", 0);
            showTips("surname", 1);
            showTips("day", 2);
            showTips("month", 2);
            showTips("year", 2);
            showTips("userName", 3);
            showTips("email", 4);
            showTips("emailRepeat", 5, 0);
            showTips("password", 6);
            showTips("passwordRepeat", 7, 1);
            showTips("phone", 8);
            showTips("homePage", 9);
        },
//FUNKCJA ODPOWIEDZIALNA ZA WYKONANIE CHOWANIE NAGŁÓWKA I TEKSTU POD NIM  
        viewFunctionHidingText: function() {
            functionHidingText(elementMainArticle);
        },
//FUNKCJA ODPOWIADAJCĄCA ZA PRZYPISANIE ZDARZENIA POKAŻ/UKRYJ DANY ELEMENT
        functionShowElement: function () {

            document.getElementById("searchBtn").addEventListener("click", function(){showElement(search)}, false);
            document.getElementById("logIn").addEventListener("click", function(){showElement(logInForm)}, false);
            document.getElementsByClassName("close")[1].addEventListener("click", function(){showElement(logInForm)}, false);
            document.getElementById("singUp").addEventListener("click", function(){showElement(singUpForm)}, false);
            document.getElementsByClassName("close")[0].addEventListener("click", function(){showElement(singUpForm)}, false);

        },
//FUNKCJA ODPOWIADAJCĄCA ZA PRZYPISANIE ZDARZENIA UKRYJ: LOGIN/SINGUP       
        functionHideUserPanel: function () {
            
            window.addEventListener("click", function(event) {hideUserPanel(event, logInForm)}, false);
            window.addEventListener("click", function(event) {hideUserPanel(event, singUpForm)}, false);
        },
//FUNKCJA ODPOWIADAJCĄCA ZA PRZYPISANIE ZDARZENIA SCROLLUP      
        viewScrollUp: function () {
            window.addEventListener("scroll", scrollUp, false);
        },
 //FUNKCJA  ODPOWIADAJCĄCA ZA PRZYPISANIE ZDARZEŃ DO WALIDACJI FORMULARZA SINGUP
        functionAddEventsForForm: function () {
            document.getElementById("firstName").addEventListener("blur", validationFirstName, false);
            document.getElementById("surname").addEventListener("blur", validationSurname, false);
            document.getElementById("day").addEventListener("keypress", function(event){
                validationDateKeyPress(event);
            }, false);
            document.getElementById("month").addEventListener("keypress", function(event){
                validationDateKeyPress(event);
            }, false);
            document.getElementById("year").addEventListener("keypress", function(event){
                validationDateKeyPress(event);
            }, false); 
            document.getElementById("day").addEventListener("blur", validationDay, false);
            document.getElementById("month").addEventListener("blur", validationMonth, false);  
            document.getElementById("year").addEventListener("blur", validationYear, false);
            document.getElementById("userName").addEventListener("blur", validationUserName, false);    
            document.getElementById("email").addEventListener("blur", validationEmail, false);
            document.getElementById("password").addEventListener("blur", validationPassword, false);    
            document.getElementById("emailRepeat").addEventListener("blur", function() {
                validationCheckRepeat("email", "emailRepeat", 0);
                document.getElementsByClassName("info-for-user")[5].style.display = "none";
            } , false);

            document.getElementById("passwordRepeat").addEventListener("blur", function() {
                 validationCheckRepeat("password", "passwordRepeat", 1);
                 document.getElementsByClassName("info-for-user")[7].style.display = "none";
            } , false);
            document.getElementById("phone").addEventListener("blur", validationPhoneUser, false);
                //ten kod że tylko liczby i potrzebne znaki do obsługi
            document.getElementById("phone").addEventListener("keypress", function(event){validationDateKeyPress(event)}, false);
            document.getElementById("homePage").addEventListener("blur", validationHomePageUser, false);
            document.getElementById("singUpButton").addEventListener("click", function(event){validationFields(event)}, false)
            document.getElementById("regulations").addEventListener("click", function(){
                document.getElementsByClassName("must-be")[0].style.display = "none";
            }, false)
            document.getElementById("logInButton").addEventListener("click", function() {
                alert("Brak uprawnień.")
            }, false);
        },
//FUNKCJA  ODPOWIADAJCĄCA ZA PRZYPISANIE ZDARZENIA DO giveElementFixed    
        functionGiveElemeFixed: function() {
            window.addEventListener("scroll", function() {giveElemeFixed("footerHeader", 90)});
        }
    };
})();
   

//WYKONYWANIE KODU
MYAPP.functionShowTips();
MYAPP.viewFunctionHidingText();
MYAPP.functionShowElement();
MYAPP.functionHideUserPanel();
MYAPP.viewScrollUp();   
MYAPP.functionAddEventsForForm();
MYAPP.functionGiveElemeFixed();


 


 

Plików JS są trzy (po jednym na każdy rodzaj ekranów) ale wszystkie mają taką strukturę.

Pozdrawiam, i liczę na porządną krytykę ;)

 

komentarz 28 kwietnia 2017 przez Alex.Ironside Stary wyjadacz (14,880 p.)
Szczerze? Jezeli to na prawde jest 1 strona to bardzo dobra robota. Ta strona jest lepsza niz niektorych ludzi z mojego roku w collegu. Z ciekawosci ile ja robiles?
komentarz 28 kwietnia 2017 przez przemek-mtk- Początkujący (390 p.)
Robiłem ją przez cztery tygodnie, 2 godziny codziennie po lekcjach. Z czego pierwszy tydzień to było ciągłe zaczynanie od początku z braku znalezienia tematu, czego ta strona mogłaby dotyczyć. Ciesze się, że Ci się podoba :)
komentarz 4 maja 2017 przez uMAXa Gaduła (4,290 p.)
Zastosowaną masz tu responsywnosć? Jeżeli tak to weś wytłumacz jak to robić :p
komentarz 4 maja 2017 przez QizmoPL Stary wyjadacz (11,440 p.)
bootstrap, polowa dodatkow nie dziala
komentarz 7 maja 2017 przez przemek-mtk- Początkujący (390 p.)
uMAXa jest responsywna ale żeby zobaczyć efekt trzeba zmniejszyć szerokość i odświeżyć stronę.

QizmoPL z bootstrapem nie miałem jeszcze do czynienia

7 odpowiedzi

+1 głos
odpowiedź 28 kwietnia 2017 przez Wiciorny Ekspert (269,120 p.)
Ogólnie fajna, przejrzysta- zależy też od kwestii tematu. Może w pierwszym odczuciu sprawiać wrażenie ciężkości  " z racji iż na głównym kontencie bardzo dużo tekstu się znajduje i treści" mimo, że jest to przejrzyste i kolorystycznie nie bije w ryj :) wiecie o co mi chodzi, często zdarza się że wchodzisz na strone jest "ŁAŁ" w wykonaniu Java Scirpt-a ale generalnie strona nic soba nie prezentuje, jest skomplikowana i potrzeba  dla której na nią wchodzisz,  np czegoś szukasz-  staje się trudna w rozwiązaniu
+1 głos
odpowiedź 4 maja 2017 przez mowmiheniek Stary wyjadacz (11,900 p.)
Podoba mi się, tylko dodałbym po lewej i prawej stronie mały margines od artykułów, tak aby nie dotykały krawędzi section. Swoją drogą trochę niefortunna nazwa klasy dla section. Pojawi ci się więcej sekcji i będzie małe zamieszanie.

Może, żeby zwiększyć atrakcyjność, dodaj jakieś powiększanie (lub inną animację zdjęć) po najechaniu na nie myszką?
+1 głos
odpowiedź 4 maja 2017 przez betman Bywalec (2,630 p.)
Odwaliłeś kawał dobrej roboty po stronie javascriptu. Zachowałeś zasady RWD przez co strona ładnie dopasowuje się do mniejszych rozdzielczości. Mam tylko jedną małą uwagę. Mianowicie po zmniejszeniu się okna przeglądarki (rozdzielczości) pojawia się ikona nawigacji. Ładniej by wyglądało gdybyś nadał padding. Podsumowując jak to twoja pierwsza strona to wymiata! Gratki i pisz dalej. :)
+1 głos
odpowiedź 4 maja 2017 przez Tomek Sochacki Ekspert (227,510 p.)

Jak koledzy napisali, jak na pierwszą stronę to dobra robota. Polecam skupić się w nauce przede wszystkim na JS (na razie bez bibliotek) ale nie zaniedbuj też html i css.

Nie analizowałem całego kodu ale mam małą uwagę do użytego przez Ciebie wyrażenia regularnego:

reg = /^[A-ZŻŁ][a-ząćęńółśżź]{0,19}$/g;

//i potem:
reg.test(inputName.value)
  1. Zakładasz, że imię zaczyna się od a-z lub ż/ł. A co z imionami bardziej starodawnymi, jak chociażby Świebora? (https://pl.wikipedia.org/wiki/Imiona_na_liter%C4%99_%C5%9A). Czy Twoje założenie jest złe? I tak i nie, zależy od tego co uważasz za dane poprawne, a co za błędne (w regexp rzadko zdarza się tak, że można podać jednoznaczne kryteria dla każdej sytuacji, nawet jeśli walidujemy adres IPv4/6 to możemy to zrobić krótkim bądź bardziej rozbudowanym regexp w zależności od poziomu ufności dla danych wejściowych).
     
  2. Jeśli stosujesz granice początku "^" i końca "$" analizowanego ciągu znakowego to flaga "g" nie ma większego sensu. Wyjątkiem od tej reguły byłoby użycie dodatkowej flagi "m"(multi-line search), ale to temat na oddzielną dyskusję.
     
  3. Zakładasz również, że użytkownik poda imię pisane z wielkiej litery. Błąd! Mówię to z doświadczenia z pracy nad dużymi systemami bazo-danowymi, gdzie użytkownik (np. pani w urzędzie publicznym) ręcznie wpisuje do aplikacji dane klienta (czy raczej petenta)... uwierz mi... ile użytkowników aplikacji tyle pomysłów jak spierdzielić prostą czynność jak wpisanie imienia w polu "imie"... Polecam więc albo przerzucenie ciągu przez metodę toLowerCase() albo po prostu użycie flagi "i" i wtedy już tylko z jednym zakresem dopuszczalnych znaków "[]".
     
  4. Zakładasz, że w podanym imieniu nie będzie spacji. Owszem, w samym imieniu nie, ale zdarzały mi się już przypadki próby wpisywania danych ze spacjami na początku (kiedyś usłyszałem, że Pani chciała w ten sposób odsunąć sobie wizualnie tekst w okienku... ehh i weź tu podejmij sensowną dyskusję:). Może lepiej przepuścić ciąg wejściowy przez metodę String.prototype.trim(), która usunie z niego początkowe i końcowe spacje (a dokładniej białe znaki)? 
     
  5. Stosujesz zakres od 1 do 20 znaków. Pytanie, czy na pewno imię "A" traktujemy jako poprawne? Tutaj już kwestia doboru minimalnej długości jest sprawą indywidualną, ja często ustawiam taki warunek na 3 znaki choć nie jest to regułą (wszystko zależy od oczekiwanych danych wejściowych).
     
  6. Kolejna sprawa, to czy masz pewność, że nie znajdzie się użytkownik z imieniem dwuczłonowym (nie mówię tu o tzw. pierwszym i drugim imieniu). W Polsce jest to raczej niespotykane, ale już za granicą owszem, np. francuskie imię Jean-Claude. Ponad to między myślnikami użytkownik może wpisać też spacje (Jean - Claude). Obowiązkowo takie przypadki należy rozpatrywać w analizach nazwiska (tutaj nazwiska dwuczłonowe są bardzo popularne w Polsce). W przypadku imienia? Hmm, zastanów się, jakie jest "ryzyko", że z aplikacji będą korzystać obcokrajowcy, albo... osoby urodzone za granicą mieszkające w Polsce.

To tyle, nie traktuj tych punktów jako wskazanie błędów. W przypadku RegExp rzadko mówimy o błędach, a raczej rozważamy większy lub mniejszy zakres danych uznawanych za poprawne i błędne.

0 głosów
odpowiedź 7 maja 2017 przez przemek-mtk- Początkujący (390 p.)
Dziękuje wszystkim za podpowiedzi, i za słowa pochwały. Zabieram się dalej do nauki i pisania.
0 głosów
odpowiedź 7 maja 2017 przez czmyk Obywatel (1,100 p.)
0 głosów
odpowiedź 7 maja 2017 przez rafal.budzis Szeryf (85,260 p.)
Patrząc na kod pod menu na dropdown mała podpowiedź poczytaj do czego jest pozycja relatywna zebyś nie musiał marginesami odsuwać pozycji absolutnych bo to mało eleganckie ;) Oczywiście potwierdzam słowa poprzedników dobra robota ;)

Podobne pytania

+3 głosów
3 odpowiedzi 540 wizyt
0 głosów
3 odpowiedzi 630 wizyt
pytanie zadane 25 stycznia 2018 w Nasze projekty przez Zayebisty Gaduła (3,200 p.)
0 głosów
5 odpowiedzi 1,716 wizyt

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...