Home
Tutorial
Todo list
Simple Todo list App
Online HTML Editor : simple todo list design
Run Output
Output Rosolution:
<!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- bootstrap 5.0.2 css for design --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <!-- font awesome css for icons --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <div class="container-fluid"> <div class="container"> <div class="mx-auto mt-5" style="max-width: 700px;"> <div class="input-group mb-3"> <input type="text" class="form-control" placeholder="Enter Your Name" aria-label="Recipient's username" id="username" aria-describedby="button-addon2"> <button class="btn text-white btn-info" type="button" id="addUser">Add User</button> </div> <div class="display"> <table class="table"> <thead> <tr> <th scope="col">#</th> <th scope="col">Your Name</th> <th scope="col">Actions</th> </tr> </thead> <tbody id="records"> <tr> <th scope="row">1</th> <td>King of Javascript</td> <td><i class="btn text-white fa fa-edit btn-info mx-2"></i> <i class="btn btn-danger text-white fa fa-trash"></i></td> </tr> </tbody> </table> </div> </div> </div> </div> </body> </html>
