# **Midterm Notes**
# Group 8
https://codepen.io/emd2206/full/JjOqwyx (Full Page View)
https://codepen.io/emd2206/collab/JjOqwyx (Code)

**HELEN SONG (hs3288), CHENYOU WU (hw2864) & ERIC DIOS (emd2206)**
- Our project was focused on utilizing the simplicity of Vue to recreate a standard Canvas page. We wanted to put what we've learned into the context of work. We learned that canvas and other LMSs use html/css/js to edit, so we thought we could model a canvas page for practice.
- Using the Vue JS framework made some portions of the page fairly easy to develop while other sections provided some obstacles which took time to work around.
- We attempted to use the Firebase database to pull images however, couldn't get it to work correctly so instead we used methods we had already learned in the past. (Specifically using CodePen assets)

- Our Inspiration can be viewed via the following screenshots:

***Webpage Breakdown saw the page broken down into different Divs***
1. The Nav Bar (Left Side)
2. The Course Description/Faculty/ Schedule Viewer (Center Top)
3. The To Do List (Right Side)
4. The Course Modules for Weeks 1-12 (Center Lower)

### Initial layout:

- We started by laying down a wireframe showing where each elements goes, then delegated tasks between each other. We met three times via zoom and discussed questions solutions and next steps.

# Comments

1. The NavBar is fully working where by using the methods we were able to turn on/off clickable hyperlinks to a syllabus, the modules and an announcements page which uses a form.
- We used a function to toggle booleans that's connected to the html elements with `v-if` so they elements are conditionally rendered. In the meanwhile, we made sure to toggle the rest of the booleans to false to prevent rendering of elements we wish to hide. For example, this code help us show the syllabus page:

toSyllabus(){
    this.onHome = false,
    this.onAnnouncement = false,
    this.onSyllabus = true
     }

2. The Centered Tabs display the brief introduction slides. We used the `changeTab` function to run the tabs and bind the array index with each button. Users can check each slide by clicking the button.

    changeTab(tabIndex) {
      this.active_tab = tabIndex;
    }

3. The To Do List is fully functioning. We mimicked the canvas page so users can keep their todos list clean and clear by deleting irrelevant tasks. The delete function is realized through the use of `emit`. We first used a function in the child-component to pass the item id to the root component:

passDelete(){
  this.$emit("delete", this.item.id);
}

then using the item id, we spliced the original array to delete the item:

deleteItem(itemID) {
  let toBeDeleted = this.todos.find((todoItem) => {return todoItem.id===itemID;
  });
  let todoIndex = this.todos.indexOf(toBeDeleted);
  this.todos.splice(todoIndex, 1);
}

4. The Course Modules were developed utilizing the template function, establishing props and the `v-bind` function. We conveniently used Bootstrap's card template to position the modules.

**Lessons Learned**
* The center "slideshow" provided a large obstacle for us as we looked to have three clickable tabs which displayed a course description, some faculty information and a course schedule.

- At first, there were some mistakes occur when coding the tab contents. Then we figured out that there is a conflict with `v-for` and `v-if`.
https://vuejs.org/guide/essentials/list.html#v-for-with-v-if
So we decided to change the `v-if` to `v-show` and the tab content list showed up. It is a great lesson for us to learn about the difference between `v-if` and `v-show` and know that if we need to toggle something too often, it will be better to use `v-show`.
https://vuejs.org/guide/essentials/conditional.html#v-if-vs-v-show
- In addition, we struggled with the index binding of the `@click="changeTab"` function since there was a warning pop up to say "property 'index' is not defined". We finally connected the tab content and its clickable button with `:key` and put the specific array number inside of changeTab(index).