Virtual Life App with Animation and Style

• Languages: Javascript ES5
• Languages Additional: Javascript ES6 Modules
• Tools: VS Code, Live Server extension, Git (if available)
• API Features: DOM Elements
• Libraries: Font Awesome 5.5.0
• Patterns and Practices: Separation of concerns, Factory method pattern, Inheritance

Feature Specification

• Update the user interface to display a colored representation for your WorldItems. 

 

• You may do this with Font Awesome icons for plants, animals, carnivores, etc. 

 

The Font-Awesome 5.5 library is available for you here:

 

http://redrockcodecamp.org/educationMaterials/frameworks/fonts/font-awesome/5.5.0/css/all.css

 

Then you can use FA icons in your HTML DOM, like this:

 

<i class="fas fa-horse"></i>

 

• Alternatively, you can use your own style to represent each WorldItem.

 

• Use your imagination!
• Walls can be displayed as colored cells using a background color.
• Spaces can be displayed as colored cells using the body’s background color.

 

Code Design

 

• You may want to change the world options object to include the following options:

 

• Color value for the type i.e. #deb887
• Icon name for the font awesome icon i.e. tree

 

• Change the WorldView object to display the colored representation for your WorldItems.

 

 

Notes

 

• Depending on your implementation, table cells that are empty may need a min-width applied.