JSFiddle - React, Tailwind, and code Playground

HTML

<section id="task">
    <input type="checkbox"> 
    <input type="checkbox" checked> 
    <br>
    <input type="text" id="message">
    <h3 id="widget-title">Сообщения:</h3>
    <ul id="messages">
      <li id="message-1">Сообщение 1</li>
      <li id="message-2">Сообщение 2</li>
      <li id="message-3" data-action="delete">Сообщение 3</li>
      <li id="message-4" data-action="edit do-not-delete">Сообщение 4</li>
      <li id="message-5" data-action="edit delete">Сообщение 5</li>
      <li><a href="#">...</a></li>
    </ul>
    <a href="http://tutu.ru/logo.png">Ссылка 1</a>
    <br>
    <a href="http://www.tutu.ru/list.pdf">Ссылка 2</a>
</section>

        
        
        
    
    
<hr><fieldset><legend>Результат выполнения заданий</legend><pre></pre></fieldset>

CSS

#task {
    display: none;
}

/*

- Ввводная -
    Прежде чем приступить к решению задачи, вам стоит сделать свою копию данного кода.
    Для этого нажмите на кнопку Fork, которая находится в панели инструментов (справа от кнопки Run).
    Выполнив задание пришлите ссылку на свою версию решения (ту самую ссылку, что будет в адресной строке браузера) по адресу [email protected]

- Задание -
    Перед вами список функций get('...?') - в левом нижнем окне.
    Вам нужно вместо ...? вписать селектор, который выполняет условие задания.
    После заполнения, нажмите на Run (вверху).
    В правом нижнем углу будет написан результат ваших выборок.

*/

JavaScript

get('br', 'Выбрать все теги br', 2); // Так выглядит вариант решения задачи задачи

get('input', 'Выбрать все теги input', 3);

get('#message', 'Найти все элементы с id=message', 1); 

get('#message,[id^=message-]', 'Найти все элементы с id=message или message-*', 6); 

get('[id^=message-]', 'Найти все элементы с id=message-*', 5); 

get('a[href$=".png"]', 'Найти все ссылки с расширением href="...png"', 1); 

get('input[type="checkbox"]', 'Выбрать input типа checkbox', 2);

get('input[type="checkbox"]:not([checked])', 'Выбрать input типа checkbox, НЕ отмеченный', 1);

get('[data-action~="delete"]', 'Найти все элементы с data-action, содержащим delete в списке (через пробел)', 2); 

get('[data-action]:not([data-action~="delete"])', 'Найти все элементы, у которых ЕСТЬ атрибут data-action, но он НЕ содержит delete в списке (через пробел)', 1); 
get('#messages li:nth-child(even)', 'Выбрать все чётные элементы списка #messages', 3);

get('h3#widget-title+*', 'Выбрать один элемент сразу за заголовком h3#widget-title на том же уровне вложенности', 1);

get('h3#widget-title~a', 'Выбрать все ссылки, следующие за заголовком h3#widget-title на том же уровне вложенности', 2);

get('#messages:last-of-type a', 'Выбрать ссылку внутри последнего элемента списка #messages', 1);





















/** код, реализующий тестовое задание **/
var tnum, pre; function get(selector, desc, count) {
    var ae;
    pre = pre || document.querySelector('pre'),
    tnum = tnum || 1;
    if (selector === '...?') return;    
    try {
        ae = document.querySelectorAll(selector);
    
        if (ae.length == count){
            pre.innerHTML += "+ Задание №" + tnum + " '" +
                desc + "' выполнено верно. \n";
        }
        else {
            pre.innerHTML += "- Задание №" + tnum +
                " '" + desc + "' НЕ выполнено! Подумайте еще... \n";
        }
    }
    catch (c) {
        pre.innerHTML += "[!] Задание №" + tnum + + " '" +
            desc + "' упало с...