JavaScript-CRUD-Operations/index.html at master · younggrasshopperza/JavaScript-CRUD-Operations · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>CRUD Operations</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Country List</h1>
  <form action="javascript:void(0);" onsubmit="searchbar()">
    <div>Search for a country:</div>
    <input type="text" id="search" placeholder="Search..." required>
    <input type="submit" value="Search">
    <input type="submit" value="Reset" onclick="location.reload()">
  </form>
  <p></p>
  <div>Add another country: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<label>Add a continent:</label></div>
  <form action="javascript:void(0);" onsubmit="addCountry()">
    <input type="text" id="add-country" placeholder="Add new country" required>
    <select name="add-continent" id="add-continent" required>
      <option value="" disabled></option>
      <option value="Africa">Africa</option>
      <option value="Antarctica">Antarctica</option>
      <option value="Asia">Asia</option>
      <option value="Australia">Australia</option>
      <option value="Europe">Europe</option>
      <option value="North America">North America</option>
      <option value="South America">South America</option>
    </select>
    <input type="submit" value="Add">
  </form>

  <div id="editForm">
    <form action="javascript:void(0);" id="saveEdit">
      <input type="text" id="edit-country" required>
      <select name="edit-continent" id="edit-continent" required>
        <option value="" disabled></option>
        <option value="Africa">Africa</option>
        <option value="Antarctica">Antarctica</option>
        <option value="Asia">Asia</option>
        <option value="Australia">Australia</option>
        <option value="Europe">Europe</option>
        <option value="North America">North America</option>
        <option value="South America">South America</option>
      </select>
      <input type="submit" value="Edit" /> <a onclick="closeInput()" aria-label="Close">&#10006;</a>
    </form>
  </div>

  <p id="counter"></p>

  <table>
    <tr>
      <th id="name" onclick="sortCountries()">Country</th>
      <th id="continent" onclick="sortContinent()">Continent</th>
    </tr>
      <tbody id="countries">
      </tbody>
  </table>

  <script src="script.js"></script>
</body>
</html>