readmeUpdate(frontend)feature

5 files changed, 19 insertions, 2 deletions

diff --git a/client/src/map.js b/client/src/map.js
index 6af7619..100d50d 100644
--- a/client/src/map.js
+++ b/client/src/map.js
@@ -1,4 +1,7 @@
-import { fetchAttractions } from "./utils.js"
+import {
+    fetchAttractions,
+    displayNumberOfItemsInShoppingBasketWithBadge,
+} from "./utils.js"
 import { ParkArticle } from "./templateImplementations.js"
 
 // replace "toner" here with "terrain" or "watercolor"
@@ -33,5 +36,6 @@ function addMarkersForAttractions(map) {
 }
 
 
+displayNumberOfItemsInShoppingBasketWithBadge();
  fetchAttractions()
         .then(addMarkersForAttractions(map));
diff --git a/readme.md b/readme.md
index 7377f50..e000e02 100644
--- a/readme.md
+++ b/readme.md
@@ -1,4 +1,6 @@
-# Description
+# Front-end of the prototype website
+
+This prototype nodeJS application was used to familiarize ourselves with front end web development using javascript, html, and css. We also implemented a database using a technology of choice, in this case a document database using MongoDB was used.
 
 ## Placing orders in shopping basket using localStorage, and then saving order in database
 
@@ -9,6 +11,12 @@ When a valid order is placed, it is stored in the shoppingbasket or an array in
 
 ![localStorage order](readmeMedia/localStorage.gif)
 
+## Sorting of the articles on the main page
+
+Articles on the main page can be sorted using the mean price ((kids + adults)/2) as a key for bubble sort of the attraction objects. Dom tree is manipulated by first removing all attractions and then adding them again in the right order. Users can also sort on location if the browser supports geolocation.
+
+![Sorting articles](readmeMedia/sortingArticles.gif)
+
 ## Responsive design using CSS mediaquery breakpoints
 
 Depending on the size of the screen of your device, if there are articles on the screen, the styling will try to display a proper number of columns of articles/attraction on the screen. The use of flexboxes was also necessary for menu boxes.
@@ -21,3 +29,8 @@ There is also a map that uses GPS-coordinates of attractions in the database to
 
 ![ordering from the map](readmeMedia/orderingFromMap.gif)
 
+## Admin page
+
+The admin page can be used to change the data in the database with a graphical user interface. The prices and discount conditions can be updated, a attraction can be removed from the database, and a new attraction can be defined with a name, description, and location.
+
+![admin page](readmeMedia/adminPage.gif)
diff --git a/readmeMedia/adminPage.gif b/readmeMedia/adminPage.gif
new file mode 100644
index 0000000..b875752
--- /dev/null
+++ b/readmeMedia/adminPage.gif
diff --git a/readmeMedia/orderingFromMap.gif b/readmeMedia/orderingFromMap.gif
index e69de29..a840733 100644
--- a/readmeMedia/orderingFromMap.gif
+++ b/readmeMedia/orderingFromMap.gif
diff --git a/readmeMedia/sortingArticles.gif b/readmeMedia/sortingArticles.gif
new file mode 100644
index 0000000..dcedc32
--- /dev/null
+++ b/readmeMedia/sortingArticles.gif