diff --git a/aufgabe3/public/assets/js/ajax.js b/aufgabe3/public/assets/js/ajax.js
index f0776c5..370ff27 100755
--- a/aufgabe3/public/assets/js/ajax.js
+++ b/aufgabe3/public/assets/js/ajax.js
@@ -1,174 +1,124 @@
-$("#filter_countries").click(function () {
-    var url = "/items";
+let tableData_global; // fetched date
+let range_global = null;
+let filterId_global = null;
+let propertyToShowMap_global = {};
+let properties_global;
+// true/false-map für properties
 
-    var country_filter_range = $("#country_filter_range").val();
-    var country_filter_id = $("#country_filter_id").val();
 
-    if (country_filter_range.length != 0) {
-        var id_range = country_filter_range.split("-");
-
-        // tests for wrong input
-
-        // wrong arguments
-        if (id_range.length != 2) {
-            return false;
-        }
-
-        // first argument is not a number
-        if (isNaN(id_range[0])) {
-            return false;
-        }
-
-        // second argument is not a number
-        if (isNaN(id_range[1])) {
-            return false;
-        }
-
-        var first_id = parseInt(id_range[0]);
-        var second_id = parseInt(id_range[1]);
-
-        // bounds checks
-        if (first_id < 1) {
-            return false;
-        }
-
-        if (first_id > second_id) {
-            return false;
-        }
-
-        // assemble url
-        url += "/" + first_id.toString() + "/" + second_id.toString();
-    } else if (country_filter_id.length != 0) {
-        // assemble url
-        url += "/" + country_filter_id;
+const doFetchCountries = (filterId, range) => {
+    let url_append = "";
+    if (filterId !== null && filterId !== undefined) {
+        url_append += "/" + filterId;
+    }
+    if (range !== null && range !== undefined) {
+        url_append += "/" + range;
     }
 
-    $.ajax({
-        type: "GET",
-        url: url,
-        async: true,
-        success: function (data) {
-            if (data[0] == "Err") {
-                return;
+    $.ajax({url: "/items" + url_append}).done((data) => {
+        if (data instanceof Array) tableData_global = data;
+        else {
+            tableData_global = [];
+            tableData_global.push(data);
+        }
+        doTablePrint();
+    });
+};
+
+const onLoadedProperties = (props) => {
+    properties_global = props;
+    properties_global.forEach(function (prop) {
+        propertyToShowMap_global[prop] = true;
+    });
+    // standardmäßig alle properties anzeigen; map aufbauen
+
+    // options im select
+    let html1 = "";
+    properties_global.forEach(function (prop) {
+        html1 += "<option value=\"" + prop + "\">" + prop + "</option>"
+    });
+    $("#prop_selection").html(html1);
+};
+
+const doTablePrint = () => {
+    // thead
+    let html = "";
+    properties_global.forEach((prop) => {
+        if (propertyToShowMap_global[prop]) {
+            html += "<th>" + prop + "</th>";
+        }
+    });
+    $("#table_head").html(html);
+    // tbody
+    html = "";
+    tableData_global.forEach(row => {
+        html += "<tr>";
+        properties_global.forEach((key) => {
+            if (propertyToShowMap_global[key]) {
+                html += "<td>" + row[key] + "</td>";
             }
+        });
+        html += "</tr>";
+    });
+    $("#table_body").html(html);
+};
 
-            // clear table
-            $("#table_body").empty();
+const clickListenersInit = () => {
 
-            // refill table
-            $(function () {
-                $.each(data, function (i, item) {
-                    $('<tr>').append(
-                        $('<td>').addClass("colID").text(item.id),
-                        $('<td>').addClass("colName").text(item.name),
-                        $('<td>').addClass("colBirth").text(item.birth_rate_per_1000),
-                        $('<td>').addClass("colCell").text(item.cell_phones_per_100),
-                        $('<td>').addClass("colChildren").text(item.children_per_woman),
-                        $('<td>').addClass("colElectricity").text(item.electricity_consumption_per_capita),
-                        $('<td>').addClass("colGDP").text(item.gdp_per_capita),
-                        $('<td>').addClass("colGDPGrowth").text(item.gdp_per_capita_growth),
-                        $('<td>').addClass("colInflation").text(item.inflation_annual),
-                        $('<td>').addClass("colInternet").text(item.internet_user_per_100),
-                        $('<td>').addClass("colLife").text(item.life_expectancy),
-                        $('<td>').addClass("colMilitary").text(item.military_expenditure_percent_of_gdp),
-                        $('<td>').addClass("colGPSLat").text(item.gps_lat),
-                        $('<td>').addClass("colGPSLong").text(item.gps_long)
-                    ).appendTo('#table_body');
-                });
-            });
-
-            // show table
-            $(`td,th`).show();
-        },
-        error: function (jqXHR, text, err) {
-            alert(err);
-        }
-    })
-
-    return false;
-});
-
-$("#show_selected_prop").click(function () {
-    var property = $("#prop_selection").val();
-    var column = val_to_column(property);
-
-    $(`td:nth-child(${column}),th:nth-child(${column})`).show();
-});
-
-$("#hide_selected_prop").click(function () {
-    var property = $("#prop_selection").val();
-    var column = val_to_column(property);
-
-    $(`td:nth-child(${column}),th:nth-child(${column})`).hide();
-});
-
-$("#submit_country").click(function () {
-    var country_name = $("#country_name").val();
-    var birth_rate_per_1000 = $("#country_birth").val();
-    var cell_phones_per_100 = $("#country_cellphone").val();
-
-    $.ajax({
-        type: "POST",
-        url: "items",
-        async: true,
-        data: `{"name":"${country_name}", "birth_rate_per_1000":"${birth_rate_per_1000}", "cell_phones_per_100":"${cell_phones_per_100}"}`,
-        contentType: "application/json",
-        success: function (data) { },
-        error: function (jqXHR, text, err) {
-            alert(err);
+    $("#country_filter_submit").click(() => {
+        // Filterung
+        filterId_global = $("#country_filter_id").val();
+        range_global = $("#country_filter_range").val();
+        if (range_global === "") {
+            doFetchCountries(filterId_global, null);
+        } else {
+            doFetchCountries(filterId_global, range_global);
         }
     });
 
-    return false;
-});
 
-$("#rm_submit").click(function () {
-    var url = "/items";
-    var id = $("#country_delete_id").val();
-
-    if (id.length != 0) {
-        url += "/" + id;
-    }
-
-    $.ajax({
-        type: "DELETE",
-        url: url,
-        async: true,
-        success: function (data) { },
-        error: function (jqXHR, text, err) { }
-    })
-
-    return false;
-});
-
-var props = [];
-
-// fill properties
-$("document").ready(function () {
-    $.ajax({
-        type: "GET",
-        url: "/properties",
-        async: true,
-        success: function (data) {
-            $(function () {
-                $.each(data, function (i, item) {
-                    $('#prop_selection').append($("<option />").val(item).text(item));
-                });
-            });
-
-            props = data;
-        },
-        error: function (jqXHR, text, err) {
-            alert(err);
-        }
+    $("#rm_submit").click(() => {     // Löschen
+        $.ajax({
+            url: '/items/' + $("#country_delete_id").val(), type: 'DELETE'
+        }).done(() => {
+            console.log("Item mit ID " + $("#country_delete_id").val() + " gelöscht!");
+        });
+        doFetchCountries(filterId_global, range_global);
     });
-});
 
-function val_to_column(value) {
-    for (var i = 0; i < props.length; i++) {
-        if (value == props[i]) {
-            return i + 1;
-        }
-    }
-    return -1;
-}
\ No newline at end of file
+    $("#add_submit").click(() => {
+        $.ajax({
+            url: "/items",
+            type: "POST",
+            contentType: "application/json; charset=utf-8",
+            dataType: "json",
+            data: JSON.stringify({
+                name: $("#country_name").val(),
+                "birth_rate_per_1000": $("#country_birth").val(),
+                "cell_phones_per_100": $("#country_cellphone").val()
+            })
+        }).done(function () {
+            console.log("Item angelegt!");
+        });
+        doFetchCountries(filterId_global, range_global);
+    });
+    $("#show_selected_prop").click(() => {
+        propertyToShowMap_global[$("#prop_selection option:selected").text()] = true;
+        doTablePrint();
+    });
+
+
+    $("#hide_selected_prop").click(() => {
+        propertyToShowMap_global[$("#prop_selection option:selected").text()] = false;
+        doTablePrint();
+    });
+};
+
+
+window.onload = () => {
+    clickListenersInit();
+    $.ajax({url: "/properties"}).done((data) => {
+        onLoadedProperties(data);
+        doFetchCountries(null, null);
+    });
+};
diff --git a/aufgabe3/public/index.html b/aufgabe3/public/index.html
index 88466cf..4bdc47f 100755
--- a/aufgabe3/public/index.html
+++ b/aufgabe3/public/index.html
@@ -50,17 +50,17 @@
 			<div class="rest-country">
 				<div class="rest-api-block">
 					<h2>Filter Countries</h2>
-					<form name="country_filter" id="country_filter" method="GET">
+					<form name="country_filter" id="country_filter">
 						<p>
 							<label for="country_filter_id">country id</label>
-							<input type="text" name="country_filter_id" id="country_filter_id">
+							<input type="text" id="country_filter_id">
 						</p>
 						<p>
 							<label for="country_filter_range">country id range (eg: 2-5)</label>
-							<input type="text" name="country_filter_range" id="country_filter_range">
+							<input type="text" id="country_filter_range">
 						</p>
 						<p class="submit">
-							<input type="submit" name="submit" id="add_submit" value="Filter Countries">
+							<button type="button" class="green_btn" id="country_filter_submit">Filter Countries</button>
 						</p>
 					</form>
 				</div>
@@ -78,7 +78,7 @@
 			<div class="rest-add">
 				<div class="rest-api-block">
 					<h2>Add Country</h2>
-					<form name="country_add" id="country_add" method="POST">
+					<form>
 						<p>
 							<label for="country_name">country name</label>
 							<input type="text" name="country_name" id="country_name">
@@ -92,7 +92,7 @@
 							<input type="number" name="country_cellphone" id="country_cellphone">
 						</p>
 						<p class="submit">
-							<input type="submit" name="submit" id="add_submit" value="Add Country">
+							<button type="button" name="submit" class="green_btn" id="add_submit">Add Country</button>
 						</p>
 					</form>
 				</div>
@@ -100,13 +100,13 @@
 			<div class="rest-delete">
 				<div class="rest-api-block">
 					<h2>Delete Country</h2>
-					<form name="country_delete" id="country_delete" method="DELETE">
+					<form name="country_delete" id="country_delete">
 						<p>
 							<label for="country_delete_id">Country ID to delete</label>
 							<input type="text" name="country_delete_id" id="country_delete_id">
 						</p>
 						<p class="submit">
-							<input type="submit" name="submit" id="rm_submit" value="Remove Country">
+							<button type="button" name="submit" class="green_btn" id="rm_submit">Remove Country</button>
 						</p>
 					</form>
 				</div>