Index: src/main/resources/static/js/homepage.js
===================================================================
--- src/main/resources/static/js/homepage.js	(revision cc52b098579f2f0c4586ca94632d01dd6e8aaada)
+++ src/main/resources/static/js/homepage.js	(revision 950fa0d7a6b439770e79c885947e9b7d6058b424)
@@ -1,3 +1,5 @@
 $(document).ready(function() {
+    var businessTypes = {};
+    var businesses = {};
     var date = new Date();
     var d = date.getDate();
@@ -11,5 +13,24 @@
     */
 
-
+    $.ajax({
+        type: 'GET',
+        url: "http://localhost:8080/api/user/me",
+        success: function(data, textStatus, request) {
+            if (data) {
+                $('#create').parent().removeClass('hidden-button');
+                $('#profile').parent().removeClass('hidden-button');
+                $('#logout').parent().removeClass('hidden-button');
+                $('#login').parent().addClass('hidden-button');
+            } else {
+                $('#create').parent().addClass('hidden-button');
+                $('#profile').parent().addClass('hidden-button');
+                $('#logout').parent().addClass('hidden-button');
+                $('#login').parent().removeClass('hidden-button');
+            }
+        },
+        error: function (request, textStatus, errorThrown) {
+            console.log(errorThrown);
+        }
+    });
     /* initialize the external events
     -----------------------------------------------------------------*/
@@ -35,4 +56,53 @@
     });
 
+    $.ajax({
+        url: "http://localhost:8080/api/nomenclatures/businessTypes"
+    }).then(function (data) {
+        businessTypes = data;
+        var $el = $("#companyType");
+        emptyDropdown($el);
+
+        $.each(data, function (index, obj) {
+            $el.append("<option value=" + obj.value + ">" + obj.text + "</option>");
+        });
+    });
+
+    $("#companyType").change(function () {
+        var selectedVal = $(this).find(':selected').val();
+        var selectedObj = businessTypes[selectedVal - 1];
+        $.ajax({
+            url: "http://localhost:8080/api/business/" + selectedObj.value
+        }).then(function (data) {
+            businesses = data;
+            console.log(data);
+            var $el = $("#company");
+            var $servicesEl = $("#service");
+            emptyDropdown($el);
+            emptyDropdown($servicesEl);
+
+            $.each(data, function (index, obj) {
+                $el.append("<option value=" + obj.id + ">" + obj.companyName + "</option>");
+            });
+        });
+    });
+
+    $("#company").change(function () {
+        var selectedVal = $(this).find(':selected').val();
+        $.ajax({
+            url: "http://localhost:8080/api/appointment/business/" + selectedVal
+        }).then(function (data) {
+            console.log(data);
+            var $el = $("#service");
+            emptyDropdown($el);
+
+            var services = businesses.find(item => item.id == selectedVal)['services'];
+            console.log(services);
+
+            $.each(services, function (index, obj) {
+                $el.append("<option value=" + obj.id + ">" + obj.serviceType.name + "</option>");
+            });
+        });
+    });
+
 
     /* initialize the calendar
@@ -47,5 +117,6 @@
         editable: false,
         edit: function (start, end, allDay) {
-
+            console.log(start);
+            console.log(end);
         },
         firstDay: 1, //  1(Monday) this can be changed to 0(Sunday) for the USA system
@@ -131,5 +202,5 @@
                 start: new Date(y, m, d, 10, 30),
                 allDay: false,
-                className: 'important'
+                className: 'info'
             },
             {
@@ -138,5 +209,5 @@
                 end: new Date(y, m, d, 14, 0),
                 allDay: false,
-                className: 'important'
+                className: 'info'
             },
             {
@@ -155,17 +226,34 @@
         ],
     });
-    $("#search").click(function () {
-        alert("qweqew");
+
+    $("#createAppointment").click(function() {
+        var appointment = {};
+        appointment['business'] = {'id': parseInt($("#company").val())};
+        appointment['service'] = {'id': parseInt($("#service").val())};
+        appointment['startTime'] = $("#startdatetime").val();
 
         $.ajax({
-            url: "http://localhost:8080/events"
-        }).then(function(data) {
-            console.log(data);
-        });
-    });
+            url: "http://localhost:8080/api/appointment",
+            type:"POST",
+            data: JSON.stringify(appointment),
+            contentType:"application/json; charset=utf-8",
+            dataType: 'text',
+            success: function(succ){
+                console.log('success');
+            },
+            error: function(err) {
+                console.log(JSON.stringify(err));
+            }
+        });
+    })
 
 });
 
-function search() {
-
+document.getElementById("login").addEventListener("click", function(event){
+   window.location = "/login";
+});
+
+function emptyDropdown(element) {
+    var defaultOption = element.children().get(0);
+    element.children().remove().end().append(defaultOption);
 }
