JSFiddle - React, Tailwind, and code Playground

by adelura

HTML

<h1 id="main" >Zakupy</h1>
<p class="klasa">to są zakupy</p>
<ul>
    <li data-kupione="true">Jajka</li>
    <li data-kupione="true">Mleko</li>
    <li data-kupione="true">Kinder Mleczna kanapka</li>
    <li data-kupione="false">Herbata</li>
</ul>

CSS

.paragraf {
    opacity: .2;
}

JavaScript

var naglowek = document.getElementById('main');

naglowek.innerText = 'Lista zakupów';

var paragraf = document.getElementsByClassName('klasa')[0];
paragraf.classList.add('paragraf');

var lista = document.getElementsByTagName('li');

var nieKupione = document.querySelector('[data-kupione="false"]');