JSFiddle - React, Tailwind, and code Playground

by lbstr

HTML

<section>
    <h1>My best friends</h1>
    <ul>
        <li id="my-favorite">Allie</li>
        <li>Indi</li>
        <li class="new">Brian</li>
    </ul>
    
    <form id="login">
        <input id="username" type="text" placeholder="Username" name="username" />
        <input id="password" type="password" placeholder="Password" name="password" />
        <input type="submit" value="Submit" />
    </form>
    
    
</section>

JavaScript

$(document).ready(function(){
    
    $('li').click(function(){
        var friend = $(this).text();
        alert('you clicked ' + friend);
    });
    
    $('#login').submit(function(e){
        var username = $('#username').val();
        var password = $('#password').val();
        
        var ajaxSettings = {
            url: '/echo/json',
            method: 'POST',
            data: {
                username: username,
                password: password
            },
            success: function(response) {
                alert(response);
            }
        };
        
        $.ajax(ajaxSettings);
        
        
        return false;
    });
    
    
    
});