Assignments > HW4. PhotoApp: Client-Side Templating with JavaScript

Due on Fri, 02/25 @ 11:59PM. 40 Points.

1. Introduction

In this assignment, you will be exploring an alternate strategy for creating front-end interfaces. Specifically, instead of rendering your HTML code on the server-side (using Jinja and Flask), you will be asking your Browser to build your UI for you using JavaScript. Within this design paradigm, the browser will load a very simple HTML “skeleton,” and then execute some “client-side” JavaScript (that you will write) to build the DOM.

You will also be implementing some event handlers to interact with the REST API that you made – in order to like, bookmark, and comment on posts; and to follow new users. And finally, you’ll continue working to ensure that your interface is accessible.

A few notes and guidelines

• You will be working on the follow / unfollow functionality during Lab 6 this week.
• You will be working on some of the “post” and “modal” functionality in class during the week of 2/14. Please come to class with your files set up because it will be easier to follow along.
• HW4 assignment is designed to take approximately 5-10 hours (depending on your level of experience). We encourage you to do a little at a time during class and in lab, so that you have enough time to engage with the concepts and complete the exercises without intense stress at the end.
• You may NOT use any outside CSS or JavaScript libraries (other than Font Awesome). Everything should be done by writing your own “vanilla” HTML, CSS, and JavaScript.

2. Set Up

In order to make this assignment a little simpler, we have some adjustments that we would like you to make, which are included in the HW04 starter files. Specifically:

1. We’ve made a UI for you to test your API.
2. We’ve updated the models/post.py to include some contextual information about the current user. Specifically, if you pass the current user as an argument to the to_dict() function, it will indicate whether the current user has liked / bookmarked the post.
3. We’ve included a CORS directive, indicating that anyone from anywhere in the world can interact with your API.

1. Configure your local git repo

Before making any changes to your photo-app folder, let’s create a snapshot of your current work (from HW03) by creating a hw03 branch using git:

1. On your terminal or command line, navigate to your photo-app folder.
2. Using git, create a branch called hw03 as follows: git checkout -b hw03
3. Now type git branch and you should see that there are at least branches: main, hw02, and hw03. Also note that you are currently on the hw03 branch (it should be green with an asterik next to it).
4. Push your hw03 branch to GitHub as follows: git push -u origin hw03
5. Open GitHub in your web browser and verify that your hw03 branch is there.
6. Finally, on your local computer, switch back to your main branch (i.e., make main the active branch you’re working on) by typing git checkout main.
7. Verify that you are on your main branch by typing git branch (you should see an asterik next to it).

2. Integrate the new files

Download hw04.zip and unzip it.

hw04.zip

You should see a directory structure that looks like this:

├── app.py
├── models
│   ├── __init__.py
│   ├── api_structure.py
│   ├── post.py
│   └── utils.py
├── static
│   ├── css
│   │   ├── api-docs.css
│   │   └── starter-client.css
│   └── js
│       ├── api.js
│       └── hw04.js
├── templates
│   ├── api
│   │   ├── api-docs.html
│   │   ├── include-endpoint-detail.html
│   │   └── include-form.html
│   ├── includes
│   │   └── navbar.html
│   └── starter-client.html
└── views
    ├── posts.py
    └── security.py

Please integrate the starter files as follows:

1. Copy __init__.py, api_structure.py, post.py, and utils.py from hw04/models into photo-app/models.
2. Copy posts.py and security.py from hw04/views into photo-app/views.
3. Replace photo-app/app.py file with hw04/app.py.
4. Copy the css and js folders from hw04/static into photo-app/static.
5. Copy the api, includes, and starter-client.html fromhw04/templates into photo-app/templates.

3. Verify Your Installation

Navigate to photo-app on your command line, and run flask (flask run). You should see the following screens when navigating to the following two pages (respectively):

• http://localhost:5000
• http://localhost:5000/api

Homepage:

This is the page you will be modifying for this homework:

API Tester:

This page may help you formulate your fetch requests using JavaScript:

In addition, your API Endpoints (from HW3) should all still work.

4. Tips

While we’ve provided some starter HTML and CSS…

• templates/starter-client.html
• static/css/starter-client.css
• static/js/hw04.js

…you are encouraged to use the HTML and CSS that you made in HW1 & HW2. If the starter code doesn’t help, feel free to do it your way.

3. Your Tasks

Please complete the following tasks by making modifications to:

• templates/starter-client.html
• static/css/starter-client.css
• static/js/hw04.js

You’re welcome to add more CSS & JS files as needed (though this is not necessary).

1. Page Initialization Tasks (8 Points)

The functionality in this section must be invoked when the page first loads (so that the user sees each of these panels right away).

Note that the content from each box should be generated from the API data (no hard-coding).

2. Create / Delete Data with Event Handlers (15 Points)

Note that each button click is issuing a request to your API and redrawing the screen (console messages just used for demonstration purposes).

Note that each button click is issuing a request to your API and redrawing the screen (console messages just used for demonstration purposes).

Note that each button click is issuing a request to your API and redrawing the screen (console messages just used for demonstration purposes).

Note that each button click is issuing a request to your API and redrawing the screen (console messages just used for demonstration purposes).

3. Post Detail Modal (5 Points)

Finally, you will make a modal window that displays a more detailed representation of the post.

Note: in this example, the picture changes because of the way that picsum.photos works. Just ignore that for now.

4. Accessibility Features (6 points)

Accessibility can be tricky when you’re relying on the fetch API, because a screen reader doesn’t always know that content has changed on the page. In addition, you don’t want to be over-reliant on the mouse. Please take a look at the Accessibility Resources, and specifically the resources pertaining to aria roles and attributes.

5. Accessibility Reflection (3 Points)

1. What resources did you consult as you implemented the accessibility features? Were there any that you found useful that aren’t on the Accessibility Resources page?
2. Reflect on the work that went into making your website accessible.
   • Was it a lot of additional work?
   • What was the most challenging part?
   • Do you think that designing for accessibility also improves the usability of the site for all users? Why or why not?

6. Deploy to Heroku (1 Point)

Please check in all of your changes / additional files to Git, and deploy your completed app to Heroku.

• If you already have your Heroku app set to auto-deploy, then your changes will automatically deploy once you push your changes to GitHub, and you therefore don’t need to do anything.
• If your app is not set to auto-deploy, make sure to navigate to the “Deploy” tab and click the “Deploy” button.

4. What to Turn In

Please review the requirements above and ensure you have met them. Specifically:

Canvas Submission

When you’re done, please submit the following to Canvas:

• A zip file of your code
• A comment that includes the following:
  • A link to your Heroku app
  • Your responses to the accessibility questions
  • The name of your partner (if applicable)
  • A description of the extra credit you did (if applicable).