Intermediate JavaScript - 20201212
Project Summary This project aims to give you real-world scenarios of working with object-oriented javascript. The functionality you will be using serves two purposes: to improve your experience building objects with javascript as well as taking advantage of user interaction with the DOM. This project is a stepping stone in your journey which takes advantage of many of the topics you learned in this course.
For this project, refactor and test as much as possible while you are building. For every piece of functionality you add, you should likely spend as much time in testing and refactoring your code. If it takes you 3 hours to figure out the logic, it should likely take you another 3 hours determining that you wrote the best code possible. As your skills improve, this process will feel more natural. Make sure to remove any debugging code from your final submission.
What you will Build: You will be building an infographic that is derived from data that is provided, as well as user input data. Object-oriented javascript is great for working with complex data, but it’s not of much use without an interface to interact with. You will be pulling in information from a form and using it to complete an array of objects that will then be appended back to the DOM.
This may not sound like a lot, but there are a fair amount of moving pieces that rely on each other to work. You’ll need to plan out the logic of what you are trying to accomplish before you begin developing. If you find this process to be quick, there’s a list of additional functionality that you can add that all strive to improve the users’ experience.
For the project, you will generate a 3x3 grid of tiles (9 in total) with the human in the center tile. Each title will contain the species, an image, and a fact. For the human tile, you will display the name of the human rather than species and no fact is necessary for the human. When the user clicks to generate the infographic from the form, the grid will appear and the form will be hidden. The facts displayed should be random per dinosaur with an opportunity of displaying at least 6 different types of facts (3 should be from the methods you create). One of the titles should be for a pigeon in which the tile should always display, “All birds are dinosaurs.”
What will I learn? The infographic presents an opportunity to work with objects and the DOM on a larger project.
The following are just some of the questions that you’ll experience along the way:
What’s the ideal workflow? What design pattern should I use? Do I use a constructor function, factory function or something else? How many JavaScript functions do I need? Should my function be this many lines of code? Is readability or performance more important? There’s no single correct answer to each question. While building this project, working with peers, and getting feedback from the project reviewer -- you will naturally develop your own answers to these questions!