Week 9: Objects

To Do This Week:

Module Notes

Grading Criteria:

• Effort in scripting and utilizing the MapBox API
• JS logic steps articulated in the script comments
• Interaction design quality
• Applied Visual hierarchy

Requirements:

• Markers: Ensure your map contains a minimum of 5 markers.
• Functional JavaScript: Verify that your Map's JavaScript functions properly and is free of errors. Check the console for any issues.
• User Experience: Design the map's interaction with the user in mind. Ensure clarity and accessibility in interactions.
• Color Scheme: Maintain a harmonious color scheme across the map and page elements.
• Visual Hierarchy: Implement thoughtful typography and graphic elements with clear visual hierarchy.
• Image Presentation: Ensure images are proportionally presented within the narrative.
• Project Comments: Include comments in the <script> section for your natural language steps,  and any info about how you used ChatGPT. Include urls to development chats.
• JavaScript Comments: Add your own comments within your script to describe the purpose of the JavaScript statements.
• Folder Structure: Upload your project in a folder named "map", including the "index.html" file, external JavaScript file if applicable, and the images folder.
• Submission Check: Before submission, verify that the your project url works correctly. Validate and then submit the working URL to Canvas.
• Late Work: If you anticipate being late with your project submission, notify me via Slack beforehand with your expected completion time.

JS Review:

• Statements
• Variables
• Data Types: Strings, numbers, booleans, arrays
• Basic Operators and “Shortcut” Operators
• Comparison Operators
• Arrays
• JavaScript Commenting
• Objects / Methods / Properties
• Functions
• For Loops
• While Loops
• Conditional Statements
• Scope

Classes:

class Dog { 
   constructor(name, breed, age) { 
      this.name = name; 
      this.breed = breed; 
      this.age = age; 
   } 
   bark() { 
      console.log("Woof!"); 
   } 
}

let myDog = new Dog("Buddy", "Golden Retriever", 3);

In-Class Exercise: