JSFiddle - React, Tailwind, and code Playground

by Nimeshka Srimal

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<!-- navbar -->
    <nav class="navbar navbar-expand-lg navbar-drak bg-dark mb-4">
          <a class="navbar-brand" href="#"><i class="fa fa-thumb-tack" aria-hidden="true"></i> Todo<strong>List</strong></a>
        </nav>
    <!-- /navbar -->
    <!-- todoList -->
    <div class="container">
        <div class="add-item text-white text-center col-sm-12 col-md-10 col-lg-8 mb-4">
        <a id="add-todo" class="new-todo text-white text-center" href=""><i id="form-icon" class="fa fa-plus-square-o" aria-hidden="true"></i> Enter new todo item</a>
        <div id="submit-form" class="form-hide text-center col-sm-12 col-md-12 col-lg-8">
            <form class="">
              <div class="form-group">
                <input type="text" class="form-control" id="todo-title" placeholder="Todo Title" >        
              </div>
              <div class="form-group">
                <input type="text" class="form-control" id="todo-desc" placeholder="Todo Description" >
              </div>
              <button type="button" class="btn btn-primary btn-lg col-12">Submit Todo</button>               
            </form>                 
        </div>
        <!-- horizontal line -->
            <hr>
        <!-- list items -->
        <h1 class="heading-4">Todo List Items</h1>
        <ul id="list" class="list-group mt-4 pb-4">
          <li class="list-group-item d-flex justify-content-between align-items-center">
            <i class="fa fa-plus-square-o" aria-hidden="true"></i> Pay Car Insurance
            <i class="fa fa-pencil" aria-hidden="true"></i>
            <i class="fa fa-trash-o" aria-hidden="true"></i>
          </li>
          <li class="list-group-item d-flex justify-content-between...

CSS

/*
	Style for todoList app
	date: 1/21/2018
	author: Jorge Luis Vazquez;
*/

body {
	margin: 0 auto;
	height: 100vh;
	color: white;
	/*display: flex;*/
	background: linear-gradient(to bottom right, #6a176a, #7c811b) 100% no-repeat;
}

.navbar-brand {
	color: white;	
}

a {
	text-decoration: none !important;
}

.add-item {
	border: solid 5px white;
	border-radius: 30px;
	margin: 0 auto;
}

#submit-form {
	margin: 0 auto;
}

#add-todo {
	font-size: 2rem;
}

.list-group {
	color: gray;
	font-size: 18px;
}

hr {
	border: solid 1px white;
}

li {
	color: #212529;
}

JavaScript

//variables
//todoList array to hold (title, description) for every todo tiem
var todoList = [
    {title: "Buy Groceries", desc: "go to win-dixie and buy bread, ham, and cheese"},
    {title: "Pay Car Insurance", desc: "call State Farm and pay year insureance"},
    {title: "Do this", desc: "this is another todo item description"}
]

/*
 * Script main body
 */
 $(document).ready(function() { 
    //hide form when doc loads first time
    $("#submit-form").hide();

    //listener for show hide form functionality
     $("#add-todo").click(function() {
        toggleForm();
        return false; //return false to prevent page reload
     });

     //listener for add new item form (submit button)
     $(".btn").click(function() {
        console.log("submit item");
        addToList();
     });
 });

 //functionality for show / hide form
 function toggleForm() {
    if($("#submit-form").is(":hidden")) {
        console.log("form exapnded");
        $("#submit-form").show("slow");
        $("#form-icon").removeClass("fa-plus-square-o");
        $("#form-icon").addClass("fa-minus-square-o");
    }
    else {
        console.log("form hidden");
        $("#submit-form").hide("slow");
        $("#form-icon").removeClass("fa-minus-square-o");
        $("#form-icon").addClass("fa-plus-square-o");
    }   
 } 

 //add new item to todo list items
 function addToList() {
    //getting data from input fields
    var todoTitle = $("#todo-title").val();
    var todoDesc  = $("#todo-desc").val();
    //checking user input
    if(todoTitle == null || todoDesc == null) {
        alert("fill in all fields!");
    }
    else {
        console.log(todoTitle + "\n" + todoDesc);
        //adding new li to ul   
        var ul = document.getElementById("list");
        var li = document.createElement("li");
        $(li).addClass("list-group-item d-flex justify-content-between align-items-center");
        $(li).append(document.createTextNode(todoTitle));
        $(li).append(($('<i...