test.md

Jistě! Zde jsou 10 jednoduchých úkolů v jazyce JavaScript, které interagují s HTML pomocí jQuery. Každý úkol zahrnuje příklad HTML kódu, na kterém by měl daný JavaScript pracovat:

Úkol 1: Napište JS kód, který změní text elementu

s ID "message" na "Nová zpráva".

HTML:

<p id="message">Ahoj, světe!</p>

JavaScript:

  $('#message').text('Nová zpráva');

Úkol 2: Napište JS kód, který přidá CSS třídu "highlight" k elementu

s ID "element". HTML:

<p id="element">Nějaký text</p>

JavaScript:

  $('#element').addClass('highlight');

Úkol 3: Napište JS kód, který zobrazí upozornění s textem "Bylo kliknuto na tlačítko", když je kliknuto na HTML tlačítko s ID "btn". HTML:

<button id="btn">Klikni na mě</button>

JavaScript:

  $('#btn').click(function() {
    alert('Bylo kliknuto na tlačítko');
  });

Úkol 4: Napište JS kód, který schová element

s ID "message", když je kliknuto na HTML tlačítko s ID "hide", a zobrazí ho, když je kliknuto na tlačítko s ID "show".

HTML:

<p id="message">Nějaký text</p>
<button id="hide">Schovat</button>
<button id="show">Zobrazit</button>

JavaScript:

  $('#hide').click(function() {
    $('#message').hide();
  });
  
  $('#show').click(function() {
    $('#message').show();
  });

Úkol 5: Napište JS kód, který získá hodnotu HTML vstupního pole s ID "inputField" a zobrazí upozornění s touto hodnotou, když je kliknuto na tlačítko s ID "submit". HTML:

<input type="text" id="inputField">
<button id="submit">Odeslat</button>

JavaScript:

  $('#submit').click(function() {
    var hodnotaVstupu = $('#inputField').val();
    alert('Hodnota vstupu: ' + hodnotaVstupu);
  });

Úkol 6: Napište JS kód, který přidá novou položku do neuspořádaného seznamu s ID "list", když je kliknuto na tlačítko s ID "add". Každá nová položka by měla mít unikátní číslo, začínající od 1. HTML:

<ul id="list"></ul>
<button id="add">Přidat položku</button>

JavaScript:

  var pocetPolozek = 1;
  
  $('#add').click(function() {
    var novaPolozka = $('<li>Nová položka ' + pocetPolozek + '</li>');
    $('#list').append(novaPolozka);
    pocetPolozek++;
  });

Úkol 7: Napište JS kód, který přepíná viditelnost elementu

s ID "message", když je kliknuto na tlačítko s ID "toggle". HTML:

<p id="message">Klikni na tlačítko pro přepnutí viditelnosti</p>
<button id="toggle">Přepnout</button>

JavaScript:

  $('#toggle').click(function() {
    $('#message').toggle();
  });