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ę ;)