---
tags: mstu5003, Project 001, html, css, bootstrap
---

# Project 001 - *Where in the world are MSTU Students?*

Team Members: Alex, Echo, Evan, Joowon

### _An attempt to create an interactive map that showcases the location of our classmates._

MSTU students are taking the same classes from all around the world. To help us better understand our classmates, we sent out a survey and built a website with a world map, a list of locations, 12 local maps, 12 photos, and 17 interesting facts about our classmates' locations. The survey and data can be found [here](https://docs.google.com/spreadsheets/d/1bzHLk7LeVMoykaXjdiXAP7pCz-yy3KAQHUhPxtPArjE/edit#gid=296126858).

The idea is to ~virtually travel~ and see different parts of the world. User interaction-wise, once you click on a city of interest, we will take you to a designated part (a new page) in this one long document for more details.

Please try and interact with our project [here](https://codepen.io/az2620/collab/zYqVzgy).

---

#### Components users interact with:
1. **Header**. The header consists of `home`,`list of cities`,and `select your city`, each clickable links that will direct you to the appropriate place on the site.
2. **List of Cities Button**. We have designed multiple ways that users could arrive at their desination.
3. **Pins & City Labels on the Map**. Users can also click on the name of city on the world map, which will directly take them to the page designated for that particular city.
4. **Flip Boxes**. Once you arrive at one city, hover your mouse on the flipbox to learn some fun facts about the city, all written by our classmates!

#### Components that react to user interaction:
1. **Search tool**. We included a `search box` on the top right. Although fully building this tool requires Java, we have included it in our design hoping to give our users the power to directly search instead of going through the whole list. This will be particularly helpful when we have a long list.
2. **Highlighted city name**. For example, once the user clicks on "Shanghai", the city name "Shanghai" will be highlighted in color red on the header, signifying the user that the page has responded to their order and that they are at the right place.

---

**Possible User Interaction Loop**:

*From Header*:
1. Header → `list of cities` → Click on a city → Arrive at destination → (Click `home` to return).
2. Header → World Map → Click on pins on world map → Arrive at destination → (Click `home` to return).
3. Header → `select your city` dropdown → Click on a city → Arrive at destination → (Click `home` to return).

There are also other ways for users to interact with the page: for instance, scrolling down the page to find one that looks interesting; click `select your city` from the header of a random page, etc.

---

**Question**: It was challenging to articulate the differences between "components users interact with" and "components that react to user interaction". For instance, the flipboxes: they only "react" to users once they "interact" with it. Could certain features be included in both categories?

---
**An attempt at the *DOM Articulation Challenge*:**

**Parent vs child**
This is one of the things we struggled the most with throughout this project. We had known that the structure needs to be correct for appropriate CSS rules to apply. In this project, especially because we are using bootstrap, the structure is also **crucial for the overall layout**.

Bootstrap uses particular sequence, or the grid system, following the `container`, `row`, `col` structure. Containers provide a means to center and horizontally pad your site’s contents. Content must be placed within columns and only columns may be immediate children of rows.

In the example of the page *Shanghai*: Originally we had the [local map] and the [flipboxes] both in their own **individual containers**. As a result, the map and the flipboxes were stacking on top of each other. This made sense, as a `container` essentially means a "boxed content", and we had two boxes in a row. No wonder they would stack on top of each other.

We wanted to change the layout because aligning the map and flipbox next to each other will help our users get all the information without scrolling.

*Now what does this have to do with the parent vs child structure?*
* We moved the [local map] and [flipboxes] into the same `container` and `row`.
* Under the same **parents**, or the same `container` and `row`, we then made [local map] and [flipboxes] **siblings**, each under a different `col`.
* This way, we could have [local map] and [flipboxes] next to each other, as they are both **children** under the **same parents**.

This experience was very instructive in helping us understand how the grid system works in bootstrap. Technically we could create multiple containers, but it’s better to be meaningful and purposeful in using them. In our case, based on the visual layout, we just needed one container and multiple columns inside it. Containers are better used for when we need a visual break: for instance, for headers, for the list of cities, etc.

---

**Process**:

10/1 - First group meeting to brainstorm ideas; potential options include pet matching site, retail shopping, music playlist, and map with fellow student's location.
10/1 - Decide on map project, divide tasks.
10/2 - Create and send out google form to collect data from MSTU students. [Alex]
10/2 - Try different ways to embed maps. Google Maps (dynamic but less freedom) vs an image of world maps (static but can put pins and embed links).
10/3 - Map embedded with nav bar (v1).
10/4 - Input heading and two versions of the table to show a list version of our data collection.
10/4 - Input search form.
10/5 - Remove the code to link excel sheet with data from the form.
10/5 - Create drop down menu with list of cities (still needs some work).
10/6 - Finally got the dropdown button and navbar working! Will clean them both up some more tomorrow [Evan].
10/7 - Add pins to world map.
10/7 - Upload enlarged geographic photo of each city with pin and button.
10/8 - Built the flipboxes! Photos are chosen based on the interesting fact our classmates provided. Front: photo of the city; back: quote of fun facts [Echo].
10/8 - Changed the page layout from "map" and "flipbox" each having its own `container` (staking on top of each other) to a parent - child structure (side by side). This is aimed to enhance our user experience - users will arrive at the page and have everything laid out in front of them without having to scroll [Echo].
10/8 - Problem, maybe with codepen - the text for the last city "Yardley" doesn't show in full page view, even though the code looks correct.
10/8 - Connect the dropdown menu to the corresponding city.
10/8 - Split up the cities/maps/flipboxes to their own pages. Put a Navbar on each and added some custom content for each. The dropdown and navbar links all work now (except for the search bar which requires Java) [Evan].
10/8 - Spacing and alignment are finalized
10/9 - Put the label of each city on the map [Joowon].
10/9 Search bar on the heading is not functional
10/9 connect label on map with each flipbox
10/9 - Attempting to get the map and flipbox images side-by-side [Evan].
10/9 - Add points to the map with city names.
10/9 - Add photo with corresponding interesting fact.
10/10 - Link the flipboxes with the drop down list of cities.
10/10 - Need to finish linking the map with cities in Asia.
10/10 - Should we remove the maps next to individual flip boxes? Maybe not, because we want the users to understand the relative location of the city. We opt to embed Google maps. Google maps is better than a world map, as it outlines the city in a more zoomed fashion.
10/11 - Linked all the pins on the map to the corresponding city flipboxes [Joowon].
10/11 - Put world map in a `container` to specify its individuality from the list and to give a visual break.
10/11 - Add footer to the page.
10/11 - Still, full view is not showing the new text for Yardley or update map - is this a code pen issue?
10/11 - Experiencing some difficultly with codepen. Despite making changes to the code, we are still seeing an older version produced (frustrating!) We all see different interfaces with collab mode, full page view, and live view.
10/11 - Not sure how to ensure the proper code is shown despite glitches in codepen.
10/11 - Added a new button in the navbar for the world map.
Replaced each city map with an embedded Google Map.
Fixed the spacing between pages.
Fixed the spacing between the city maps and flipbox images on each page.
Updated the font color on some of the flip box images so it's more legible.
Added comments to the HTML and CSS code [Evan].