CPNT 262

Mini Activity 3 - Control Flows and Error Handling

Weight: 5%

Due:

Late Penalty: 10% deduction for each day late. Submissions will not be accepted more than three days late.

Overview

Here you will practice setting up both control flows and error handling. This assignment is meant to help you develop your algorithm skills for creating interactive web elements.

Instructions

  1. Create a new github repo
  2. Inside it there should be 3 files:
    • index.html
    • client.js
    • README.md
  3. Set up your HTML file and import the client.js file in the head tag with a type=“module” attribute added
  4. Complete one of the following challenges and render their output to your html page
    • some are harder than others, they will all require that you combine the programming concepts and JS language features together to achieve the desired outcomes.
  5. In the readme, document problems that you ran into while creating this and how you approached solving them
    • list any prompts used with an AI chatbot and key takeaway points in your own words
    • list search queries and links to where you got the information
  6. In readme, also document a self reflection:
    • what approaches to building this were effective? and what was ineffective?
    • describe what you learned about solving coding problems while doing this?

Challenges

  • Render a gallery from an array of objects (products, team, characters…)
  • Make a button that will format user input text (ie: capitalization, remove trailing whitespace)
  • Animate a loading message
  • Profile confirmation (verify that the two input strings are the same)
  • Character count tool
  • Make a togglable accordion

Rubric

This assignment is graded out of 10 points total but is worth 5% of your total grade

2 Points: Your Solution

  • solution works
  • if solution doesn’t work, partial marks for well documented pseudocode showing how you’ve tried to make it work and a hypothesis of why it’s not working currently
  • content is rendered to an html page
  • solution is not a c/p from chatgpt or stack overflow
  • use of syntax ideas learned in this course or from course materials

2 Points: Error Handling

  • use an if check to make a function fail early
  • log error information with console.error('custom error message')

2 Points: Code quality

  • js is in strict mode
  • modern syntax patterns used
  • camelCase syntax in js
  • whitespace and indentation

2 Points: Notes, pseudocode, documentation

  • flow charts and/or pseudocode
  • search history and key takeaways from the links documented
  • ai prompt queries (c/p) and the most useful 1-3 pieces of information

2 Points: Self Evaluation

  • Evaluation of your process
  • What you learned about solving coding problems

Submission Instructions

  1. As a comment in D2L: share links to make it easy for the instructor to quickly evaluate your work:
    • GH repos, Pages, Projects (Beta), etc.
    • Codepens, Figma, FigJam, etc.
  2. Double check the Activity for specific instructions.
  3. If applicable, include a README containing the following;
    • Activity name and author;
    • Attributions: Did anyone help you? Give credit to any classmates, articles, tutorials, etc that helped you complete this project.
    • Include self-assessments, observations, research, etc under the heading “Code Journal” in your README.
  4. Zip project repo and submit it.