Untitled

// // document.getElementById('tekst').textContent = "Nowy tekst na stronie"; // zmieiam wartosc tekstową elementu
// // document.getElementById('tekst').innerHTML = '<h1>NOWY NAGLOWEK ZAMIAST TEKSTU</h1>'; // zmieniam html

// // var tekst = document.getElementById('tekst').textContent; // zmienna kopujaca tekst z html
// // var tlumaczBtn = document.getElementById('tlumaczBtn'); // zmienna referencji do przycisku 

// document.getElementById('tlumaczBtn').addEventListener("click", tlumaczTekst); // przypisanie zdarzenia click do przycisku

// function tlumaczTekst() {
//   document.getElementById('tekst').textContent = "NOWY TEKST";
// }

document.getElementById('zaloguj').addEventListener('click', logowanie);

function logowanie(){
  
  // Mock/DEMO poprawne wartosci logowania 
  const loginDB = "gigant123";
  const passDB = "pass123";
  
  // uzytkownika wartosci logowania
  const login = document.getElementById('login').value;
  const pass = document.getElementById('pass').value;
  
  // Sprawdzam jak poszlo logowanie
  // 1. Sprawdzam czy dane nie sa puste 
  if (login.length == 0 || pass.length == 0){
    document.getElementById('infoLogowanie').textContent = "Podaj login i hasło. Pola nie mogą być puste";
  }
  else {
    // 2. Sprawdzam czy dane pasują 
    if (login == loginDB || pass == passDB){
      document.getElementById('infoLogowanie').textContent = "Zalogowano pomyślnie.";
    }
    else {
      document.getElementById('infoLogowanie').textContent = "Podaj prawidłowy login i hasło.";
    }
  }
}

// Funkcja ktora sprawdzi czy login jest dluzszy niz 5 literek aby był prawidłowy
function sprawdzLogin(){
  // wartosc pola formularza - login
  var login = document.getElementById('login').value;
  
  // sprawdzam dlugosc login powyzej 5 literek i wyswietlam komuniakt 
  if (login.length < 5 ){
    var komunikat = document.getElementById('infoLogowanie');
    komunikat.style.color = "red";
    komunikat.textContent = "Login jest zbyt krótki! Podaj dłuższą nazwe";
  } else {
    // Jesli login jest dłuższy, ukryj komunikat 
    var komunikat = document.getElementById('infoLogowanie');
    komunikat.style.display = 'none';
    komunikat.textContent = "";
  }
}

// Funkcja podpowiadajaca jak stworzyc login 
function podpowiedz(){
  var komunikat = document.getElementById('infoLogowanie');
  if (komunikat.value.length == 0){
    
  }else {
    komunikat.style.border = "1.5px solid red"
    komunikat.textContent = "Podaj login dłuższy niż 5 znaków";
  }
}
document.getElementById('login').addEventListener('focus',podpowiedz); // podpowiedz kiedy aktywne
document.getElementById('login').addEventListener('blur',sprawdzLogin); // sprawdz po wpisaniu