JSFiddle - React, Tailwind, and code Playground

by Joanna Sobańska

HTML

<input type="text" value="Wpisz imię i nazwisko" id="addUser"/>
<input type="text" value="Wpisz wiek" id="age"/>
<input type="submit" value="dodaj">
    
<ul class="main">
    <li data-age="63">John Travolta </li>
    <li data-age="18">Angelina Jolie </li>
    <li data-age="50">Barack Obama </li>
    <li data-age="15">Krzysztof Ibisz </li>
</ul>

CSS

#addUser, #age {
    margin-top:10px;
    padding:5px;
}

JavaScript

var setColor = function (element){
if (element.data("age")<15){
		element.css("color","green");
}
else if (element.data("age"<40){
    element.css("color","blue");
}
else {
     	element.css("color","brown");
}
}


function start(){
    
//var first_input_value=$("#addUser").val();

var name=$("#addUser").val();
var age=$("#age").val();
var id=$("input").first().attr("id");

//var newElement="<li>"+name+"</li>"
//var newElement=$('<li> + name + </li>');
var listElement=$('<li>');
    listElement.text(name);
    listElement.data("age",age);
    setColor(listElement);
    listElement.appendTo($('ul'));
//var lastElement=$("li").last()
//lastElement.after(newElement)
//lastElement=$("li").last()




}
$('input[type=submit]').on('click', start);