Projects

1. Midterm Project

The midterm project is to create a single page web site that dynamically builds content cards based on ai generated data that is imported into the main script. The user will see all the generated cards as soon as the page loads. They can click on a card header to remove the card from the page, and they can filter the order of the cards by selecting a field from a dropdown list and clicking a sort button.

The basic project structure should look like the following.

.gitignore
favicon.ico
index.html
Directorycss
- main.css
Directoryimg
- logo.png
Directoryjs
- data.js
- main.js

Create a new folder and Github repo for this project. Copy the files from the Project Exercise into this project folder. All the requirements for the Project Exercise must be met in this project.

The main.js file should be loaded as a module and should import the data.js file. Here is a sample starter for the main.js file for you to use if you wish.

import myDataArray from './mymoviedata.js';

document.addEventListener('DOMContentLoaded', init);

let displayData = []; //array copy to be manipulated for display

function init() {
  // set up page,
  // create full copy of array as displayData,
  // populate list of fields,
  // build cards html,
  // add listeners,
}
function addListeners() {
  //add event listeners to page for
  //form submit and card section click
}
function buildCards(arr) {
  //turn the Array:arr passed in into cards using the innerHTML String method
  //replace the old list of cards.
}
function displayFields(obj) {
  //populate the <select> for sort selection.
  //based on the fields inside Object:obj
}
function removeCard(id) {
  //remove a card based with the matching Number:id
  //when user clicks on a card header
}
function sortBy(field) {
  //sort the displayData based on the String:field
  //call the buildCards method and pass the sorted array
}

After the page loads, the user should be able to see all the cards built using the imported data. Each card should have a title and at least three other fields of information. Each <div class="card"> should have a data- attribute that holds the id of its imported array object.

Your script should read the names of all the properties from one of the imported array objects. Add new <option> elements to the <select> for each field, except for the id field.

Clicking on the header of any card, should trigger an event listener which will find the <div class="card"> that contains the clicked header and extract the id from the data- attribute. Then use the Array filter method to remove the object with the matching id from the Array.

On each load of the page, make a full deep copy of the imported array so it can be used and modified independently of the imported array. We do this in case, in the future, we want to add a reset button to copy the full array back into our created displayData array. If you want to challenge yourself a bit, add this feature to the page.

When the user clicks on the sort button in the form, it will trigger the form submit event. We need to listen for this event and call a function to sort the displayData array based on the selected field. If the selected value from the <select> is empty then we should exit from the sort function. After sorting the displayData array, pass it to the function which replaces the current cards with the new sorted list of cards.

Demo video coming soon

Submission

Please post general questions about this project on the Slack #mad9014 channel so everyone can see the answers.

See BS LMS for submission instructions.

Due in Week 7

2. Final Project

For the Final Project we will be building a Quiz Game web app. You can use either https://quizapi.io/ or https://opentdb.com/ as the data source for your quiz web app.

The quizapi has free and paid versions. You need to register with the API to get a key. The free version gets you 50 API calls per day. It’s questions are all tech related.

The opentdb is free and requires no api key. It has questions across a broad range of topics including: Entertainment, sports, mythology, science, geography, history, politics, celebrities, art, animals, celebrities, and more.

This web app will test your ability to work with the following web app features:

Fetch API
JavaScript class syntax
Cache API
LocalStorage
External APIs
detecting online and offline status
Custom Events
Multiple HTML files
Multiple script files
Best practices for programming with JavaScript

Outline of Requirements

More details coming soon

Video coming soon

Deployment

Since the preparatory exercise for this project used the main branch in the github repo, we will need a new branch. Create a new branch called final. It will be a copy of the code in the main branch at the point when it is created.

You can use either Vercel or Netlify to host this web app.

When configuring your hosting, be sure to point to the final branch when setting up the hosting.

Submission

Please post general questions about this project on the Slack #mad9014 channel so everyone can see the answers.

See BS LMS for submission instructions.

Due in Week 15