CS2103-AY1819S1-T09-4 · ZhuanYu · Nov 4, 2018 · Nov 4, 2018 · Nov 4, 2018 · Nov 4, 2018
diff --git a/docs/DeveloperGuide.adoc b/docs/DeveloperGuide.adoc
@@ -323,6 +323,8 @@ This section describes some noteworthy details on how certain features are imple
 
 // tag::undoredo[]
 === Undo/Redo feature
+This section describes how the Undo/Redo feature is implemented for the car park finder.
+
 ==== Current Implementation
 
 The undo/redo mechanism is facilitated by `VersionedCarparkFinder`.
@@ -371,7 +373,7 @@ image::UndoRedoActivityDiagramNew4.png[width="800"]
 [NOTE]
 If the `currentStatePointer` is at index 0, pointing to the initial car park finder state, then there are no previous car park finder states to restore. The `undo` command uses `Model#canUndoCarparkFinder()` to check if this is the case. If so, it will return an error to the user rather than attempting to perform the undo.
 
-The following *_sequence diagram_* shows how the undo operation works:
+The following sequence diagram shows how the undo operation works:
 
 .Sequence diagram of Undo/Redo feature
 image::Sequence Diagram - Undo.png[width="800"]
@@ -1007,20 +1009,21 @@ However, we did not want to just update it. We wanted to showcase the selected c
 ==== Example
 Step 1. The user launches the application and is greeted by this UI
 
-(INSERT IMAGE HERE)
+.On start of the application
+image::UIstep3.png[width="700", align="left"]
 
 Step 2. The user selects a car park with a `select` command. E.g. `select 10`.
 
-(INSERT IMAGE HERE)
+.An example outcome of the `select 10` command
+image::UIstep2.png[width="700", align="left"]
 
 `SelectCommand#Execute` is called. If the input is valid, it creates a `JumpToListRequestEvent` event for `BrowserPanel#handleCarparkPanelSelectionChangedEvent()` to catch.
 
-(INSERT IMAGE HERE)
-
 Step 3. The user then list all the car park with a `list` command.
 A `ListCarparkRequestEvent` is created and `BrowserPanel` catches the event to call `BrowserPanel#handleListCarparkRequestEvent()`
 
-(INSERT IMAGE HERE)
+.An example outcome of the `select 10` command
+image::UIstep1.png[width="700", align="left"]
 
 The HTML is refreshed to show all car parks.
 

diff --git a/docs/MainPage.html b/docs/MainPage.html
@@ -1686,7 +1686,10 @@
             var markerCluster = new MarkerClusterer(map, markersArray,
                 {imagePath: 'https://raw.githubusercontent.com/CS2103-AY1819S1-T09-4/main/master/src/main/resources/images/m'}
             );
-            map.fitBounds(latlngbounds);
+
+            if (json.length > 0) {
+                map.fitBounds(latlngbounds);
+            }
         }
 
         function handleMaps() {

diff --git a/docs/UserGuide.adoc b/docs/UserGuide.adoc
@@ -148,18 +148,18 @@ Find a list of car parks within a certain location.
 
 [NOTE]
 ====
-* Common words are ignored, like blk and ave.
-* Upper and lower case characters do not matter.
+Common words are ignored, like `blk` and `ave`. Upper and lower case characters do not matter.
 ====
+The figure below is a sample display of the application.
 
 .Before using find command
 image::findbefore.png[width="880"]
-The figure above is a sample display of the application.
 
 
-.After using find command
+The figure below shows what happen after executing the `find` command.
+
+.After using `find punggol` command
 image::findafter.png[width="880"]
-The figure above shows what happen after executing the `find` command.
 // end::find[]
 
 [[Features-Undo]]
@@ -177,8 +177,7 @@ Restores the car park finder to the state before the previous undoable command w
 
 [NOTE]
 ====
-* You can only `undo` when you have ran a commands.
-* Undoable commands: those commands that modify the car park finder’s content (`clear`, `find`, `filter` and `query`).
+You can only `undo` when you have ran a undoable commands (`clear`, `find`, `filter` and `query`).
 ====
 // end::undo[]
 
@@ -218,10 +217,15 @@ Select the car park you wish to go to.
 * The index *must be a positive integer* `1, 2, 3, ...`
 ====
 
-.After using select command
+.Before running the `select 20` command
 image::select.png[width="880"]
 
-The figure above is the outcome of the select command.
+The figure above is the outcome of `find punggol`.
+
+.An example of the output of the `select 20` command.
+image::selectafter.png[width="880"]
+
+The figure above is the outcome of the select command. Selecting any index will automatically zoom the UI in.
 
 [NOTE]
 There must be car parks available for `SelectCommand` to work.
@@ -243,6 +247,12 @@ Lists all the commands that you have entered in reverse chronological order. +
 Pressing the kbd:[&uarr;] and kbd:[&darr;] arrows will display the previous and next input respectively in the command box.
 ====
 
+.After running several commands, before the using the `history` command
+image::beforehistory.png[width="880"]
+
+.An example of the output of the `history` command
+image::afterhistory.png[width="880"]
+
 // tag::calculateug[]
 [[Features-Calculate]]
 === Calculating the cost of parking : `calculate`
@@ -274,8 +284,11 @@ Show a list of all the car parks with their details.
 |`list`| l | `list`
 |===
 
-.After using list command
-image::listafter.png[width="880"]
+.Previously filtered list, before using the `list` command.
+image::beforelist.png[width="880"]
+
+.An example of the output of the `list` command, showing all the car parks.
+image::afterlist.png[width="880"]
 
 // tag::query[]
 [[Features-Query]]
@@ -366,6 +379,12 @@ Clears all entries from the list.
 |`clear`| - | `clear`
 |===
 
+.All car parks are listed
+image::beforeclear.png[width="880"]
+
+.An example of the output of the `clear` command showing nothing.
+image::afterclear.png[width="880"]
+
 [[Features-Exit]]
 === Exiting the application : `exit`
 
@@ -468,7 +487,7 @@ Include weather updates in the notifications by indicating on or off.
 Here are a few technical terms used in the user guide.
 
 .Technical Terms
-[cols="1,6"]
+[cols="2,6"]
 |===
 |Term |Explanation
 
@@ -489,6 +508,15 @@ Here are a few technical terms used in the user guide.
 
 |*User Interface (UI)*
 |Allows the user to interact with the application through inputs and outputs of data.
+
+|*Hyper Text Markup Language (HTML)*
+|A standardized system for tagging text files to achieve font, colour, graphic, and hyperlink effects on World Wide Web pages.
+
+|*Cascading Style Sheets (CSS)*
+|A style sheet language used for describing the presentation of a document written in a markup language like HTML.
+
+|*Javascript (JS)*
+|A high-level, interpreted programming language. It is a language which is also characterized as dynamic, weakly typed, prototype-based and multi-paradigm.
 |===
 
 == Command Summary

diff --git a/docs/images/UIstep1.png b/docs/images/UIstep1.png
diff --git a/docs/images/UIstep3.png b/docs/images/UIstep3.png
diff --git a/docs/images/Ui.png b/docs/images/Ui.png
diff --git a/docs/images/Uistep2.png b/docs/images/Uistep2.png
diff --git a/docs/images/afterhistory.png b/docs/images/afterhistory.png
diff --git a/docs/images/afterlist.png b/docs/images/afterlist.png
diff --git a/docs/images/beforeclear.png b/docs/images/beforeclear.png
diff --git a/docs/images/beforehistory.png b/docs/images/beforehistory.png
diff --git a/docs/images/beforelist.png b/docs/images/beforelist.png
diff --git a/docs/images/findafter.png b/docs/images/findafter.png
diff --git a/docs/images/findbefore.png b/docs/images/findbefore.png
diff --git a/docs/images/select.png b/docs/images/select.png
diff --git a/docs/images/selectafter.pdn b/docs/images/selectafter.pdn
diff --git a/docs/images/selectafter.png b/docs/images/selectafter.png
diff --git a/docs/index.adoc b/docs/index.adoc
@@ -1,2 +1,3 @@
 :stylesDir: stylesheets
+:stylesheet: default.css
 include::../README.adoc[]