wstep-js-mlody-zaawansowany

<!DOCTYPE html>
<html lang="pl">
  <head>
    <title>Java Script</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- import the webpage's stylesheet -->
    <link rel="stylesheet" href="/style.css">

    <!-- import the webpage's javascript file -->
    <script src="/script.js" defer></script>
  </head>
 <body>

   <p id="tekst">
     JavaScript
   </p>


   <p id="doTlumaczenia">

     Najczęściej spotykanym zastosowaniem języka JavaScript są strony internetowe. Skrypty te służą najczęściej do zapewnienia interakcji poprzez reagowanie na zdarzenia, walidacji danych wprowadzanych w formularzach lub tworzenia złożonych efektów wizualnych.

   </p>

   <button id="btnTlumacz">
     Tłumacz tekst
   </button>


   <button id="dodajKolo">
     Dodaj koło
   </button>

   <div id="kolo">

   </div>


   <button id="on">
     ON
   </button>


   <button id="off">
     OFF
   </button>


   <div id="bulb">
     <img src="https://cdn.glitch.com/f7389b31-9de2-414d-a318-5eeaa60c1f2f%2F9d9d8545-fda2-4713-ac69-a932e8d8073b.obraz.png?v=1584873551397">
   </div>

   <form>

      <fieldset>

        <legend>
          Logowanie
        </legend>

        <label>Login:*</label>
        <br>
        <input id="login" type="text" name="login" placeholder="Podaj login">
        <br>
        <label>Hasło:</label>
        <br>
        <input id="pass" type="password" name="pass">

        <input id="zaloguj" type="submit" value="Zaloguj">

      </fieldset>


    </form>

   <p id="infoLogowanie">

   </p>


   <script>


  // document.getElementById('tekst').textContent='Giganci programowania';

   //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").textContent="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('dodajKolo').addEventListener('click', function () {

  document.getElementById("kolo").style.backgroundColor = "red";
  document.getElementById("kolo").style.width = "200px";
  document.getElementById("kolo").style.height = "200px";
  document.getElementById("kolo").style.borderRadius = "100px";
});


document.getElementById('kolo').addEventListener('click', function () {

  document.getElementById("kolo").style.backgroundColor = "green";
  document.getElementById("kolo").style.width = "100px";
  document.getElementById("kolo").style.height = "100px";
  document.getElementById("kolo").style.borderRadius = "100px";

});


       /* const imie="Adam";

        alert(imie);


        const liczba1=5;
        const liczba2=10;

        alert(liczba1 + liczba2);*/

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

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

        const loginDB="adax";
        const passDB="qwerty";

        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";
        }


        }

      });


document.getElementById('on').addEventListener('click', function () {


  document.getElementById("bulb").innerHTML = '<img src="https://cdn.glitch.com/f7389b31-9de2-414d-a318-5eeaa60c1f2f%2Fc8c566d6-283a-489c-949c-119b160436ea.obraz.png?v=1584873520741">'


});

document.getElementById('off').addEventListener('click', function () {


  document.getElementById("bulb").innerHTML = '<img src="https://cdn.glitch.com/f7389b31-9de2-414d-a318-5eeaa60c1f2f%2F9d9d8545-fda2-4713-ac69-a932e8d8073b.obraz.png?v=1584873551397">'


});


   </script>
  </body>
</html>