JSFiddle - React, Tailwind, and code Playground

by Kate Masiuk

HTML

<div class="list-of-friends">
    <strong>Добавьте 10 знакомых человек:</strong>
    <div>
        <progress value="0" min="0" max="100"></progress>
        <p><span>0</span> из 10</p>
    </div>
    <div>
        <input type="text" placeholder="Имя знакомого" id="name" />
        <input type="button" value="Добавить" id="add" />
    </div>
</div>

CSS

p { display: inline-block; }

JavaScript

var ol = document.createElement('ol');
document.querySelector('.list-of-friends').appendChild(ol);

document.getElementById('add').addEventListener('click', function() {
    var progress = document.getElementsByTagName('progress')[0];
    var name = document.getElementById('name');
    var span = progress.nextElementSibling.firstElementChild;
    if(name.value && progress.value != progress.max) {
        var li = document.createElement('li');
        li.innerHTML = name.value;
        ol.appendChild(li);
        progress.value += 10;
        span.innerHTML = ol.children.length;
    }
}, false);