document.getElementById('tekst').innerHTML='<h1> Giganci programowania &#10100;&#10101;</h1>';
    
       //wywołujemy metodę addEventListener na wskazanym elemencie jako pierwszy argument podajemy rodzaj zdarzenia jako drugi nazwę funkcji do wywołania, w naszym przypadku funkcja jest bez nazwy tzw funkcja anonimowa
       document.getElementById('btnTlumacz').addEventListener('click',function(){


        document.getElementById("doTlumaczenia").innerHTML="The most common JavaScript language are websites. These scripts are most often used to connect by responding to events, validating data entered in the form, or creating complex visual effects.";
   
       });


       



       document.getElementById("zaloguj").addEventListener('click',function(){

        const loginDB="Giganci";
        const passDB="qwerty";

      const login = document.getElementById("login").value;
      const pass = document.getElementById("pass").value;

      if(login.length==0 || pass.length==0){
          
          
          document.getElementById("infoLogowanie").textContent="Uzupełnij pola";
         
         
       }
       
       else{
       
       if (login == loginDB && pass==passDB){
         
         document.getElementById("infoLogowanie").textContent="Zalogowano pomyślnie";
         
       }
       
       else{
         
         document.getElementById("infoLogowanie").textContent="Wprowadzono błędne dane";
       }
         
         
       }


       });
     

//funkcja sprawdza długość loginu i wyświetla informację
       function sprawdzLogin(){


     login=document.getElementById('login').value;

      if(login.length<5){

        document.getElementById('infoLogowanie').textContent='Login jest nadal zbyt krótki';

      }
      else{

        document.getElementById('infoLogowanie').textContent='';
      }

}

//funkcja wyświetla podpowiedź
function podpowiedz(){

  document.getElementById('infoLogowanie').textContent='Login musi mieć przynajmniej 5 znaków';

}

document.getElementById('login').addEventListener('blur',sprawdzLogin);
document.getElementById('login').addEventListener('focus',podpowiedz);


     document.getElementById("kolor").addEventListener('mouseover',function(){

      document.getElementById("kolor").style.border='3px solid red';
     

     });

     document.getElementById("kolor").addEventListener('mouseout',function(){

      document.getElementById("kolor").style.border='3px solid green';


});

document.getElementById("kolor").addEventListener('click',function(){

document.getElementById("kolor").style.display='none';


});