Last active
February 11, 2020 06:03
-
-
Save potikanond/36a1e04cde25332489e3efa775155d7a to your computer and use it in GitHub Desktop.
Bookmark SPA - HTML template
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <title>MyBookList App</title> | |
| <!-- Font Awesome --> | |
| <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" | |
| integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> | |
| <!-- bootswatch --> | |
| <link rel="stylesheet" href="https://bootswatch.com/4/yeti/bootstrap.min.css"> | |
| </head> | |
| <body> | |
| <div class="container mt-4"> | |
| <h1 class="display-4 text-center"> | |
| <i class="fas fa-book-open text-primary"></i> My <span class="text-primary">Bookmarks</span></h1> | |
| <form id="bookmark-form"> | |
| <div class="form-group"> | |
| <label for="">Site Name</label> | |
| <input type="text" id="" class="form-control"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="">URL</label> | |
| <input type="text" id="" class="form-control"> | |
| </div> | |
| <input type="submit" value="Add Bookmark" class="btn btn-primary btn-block"> | |
| </form> | |
| <table class="table table-striped mt-5"> | |
| <thead> | |
| <tr> | |
| <th>Site Name</th> | |
| <th>URL</th> | |
| <th></th> | |
| </tr> | |
| </thead> | |
| <tbody id="bookmark-list"></tbody> | |
| </table> | |
| </div> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Pure javascript - Add 'submit' event listener to form with id="myForm" | |
| // more info: https://www.w3schools.com/js/ | |
| document.querySelector('#myForm').addEventListener('submit', function(e) { | |
| console.log("Submittied"); | |
| }); | |
| // or JQuery - Add 'submit' event listener to form with id="myForm" | |
| // more info: https://www.w3schools.com/jquery/default.asp | |
| $("myform").submit(function(e){ | |
| console.log("Submitted"); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment