Assignments

1. Fetch Assignment

Remember that you can post questions on the #mad9014 channel in Slack about this assignment.

For this assignment you will be building a SPA that simulates a login / logout process as well as fetching and displaying data from and API request. All of the fetch calls will be made to the https://dummyjson.com API, which provides testing data for developers to build proof-of-concept type apps.

When the page first loads, the script needs to check if the person is logged in.

The determining factor of whether or not a user is logged in, is the existence of an object in sessionStorage which includes a JWT token.

When the web app first loads, the default appearance of the page is a welcome message along with a form that requests a username and email. In the sample HTML below, this is the <section id="authentication"> element.

If the user is already logged in, then we change what is shown to hide the login form and show the part of the page that will contain the post data. In the sample HTML below, this is the <section id="authenticated"> element.

While the web app tries to fetch the post data, a message and loader animation need to be shown, until the data has been returned from the API. Once the data has been returned, then the message and animation can be hidden and the data converted into HTML on the page. The data will be added to the <section class="loaded"> element which is inside the <section id="authenticated"> element.

The post data from the dummyjson API needs to be the authorized version - https://dummyjson.com/auth/posts. This means that you must pass the Authorization: "Bearer token" header along with the request.

Inside the <header> there is a logout button that is only shown after the user logs in and the screen is updated. After the user is logged in, you also need to show information about the user - their firstName, lastName, and image. If you want you can display this information in a different place on the page than in the <h1>. You can also show different information, as long as you are showing at least three things about the user, to identify them.

Clicking the logout button will delete the token and user information from sessionStorage, delete all the post information from the DOM, hide the logout button, remove any user details from the screen, and show the login form section again.

When errors occur with your fetch calls, use a <dialog> to display the error messages.

The API end points you will use are:

GET https://dummyjson.com/users?limit=208 reference for all the available usrs
POST https://dummyjson.com/auth/login end point for logging in and getting a token
GET https://dummyjson.com/auth/posts end point for getting posts after logging in. Requires the token be sent through Authorization header.

Starter Code

Here is a sample version of the HTML body that you can use.

<body class="public">
  <header>
    <h1>Authorized Posts <span></span></h1>
    <nav class="logout">
      <a href="#logout" id="logout"><img src="./img/account_circle_24dp.svg" /> Log Out</a>
    </nav>
  </header>
  <main>
    <section id="authentication">
      <h2>Welcome to the Site</h2>
      <p>To access the content, please login below.</p>
      <form id="login_form">
        <label for="username">Username</label>
        <input type="text" id="username" name="username" maxlength="30" required autocomplete="username" />
        <label for="pass">Password</label>
        <input type="password" id="pass" name="pass" maxlength="30" required />
        <span>&nbsp;</span>
        <button id="btnLogin"><img src="./img/account_circle_24dp.svg" /> Log In</button>
      </form>
    </section>
    <section id="authenticated">
      <section class="loading">
        <div class="coffee">
          <div></div>
          <div></div>
          <div></div>
        </div>
        <p>Waiting for the good stuff...</p>
      </section>
      <section class="loaded">
        <!-- post data goes here -->
      </section>
    </section>
  </main>
</body>

You are free to edit and change this HTML if you want.

A good practice to follow when you want to change parts of the page to display is add classnames to the <main> or <body> elements. These classes indicate the current state of the page. Here are some examples.

<body class=""></body>
<body class="authenticating"></body>
<body class="authenticated"></body>
<body class="fetching"></body>
<body class="loaded"></body>

Then, in your CSS you write styles that will change parts of the page. For example:

body {
  /* default state when page loads */
  section#authentication {
    /* public content */
    display: block;
  }
  section#authenticated {
    /*private content */
    display: none;
  }
}

body.loaded {
  /* user logged in and data also fetched */
  section#authentication {
    display: none;
  }
  section#authenticated {
    display: block;
  }
}

Continue this approach to style other aspects like logout buttons, loaders and spinners, etc.

Demo Video

Demo for assignment 4

Challenge Tasks

Here are some additional features that you can add to your web app. Think of these as challenges for yourself to improve your version of this web app for your portfolio. These are not required for grades.

Use a custom Error object that you can throw when fetch calls fail. This error object should contain the details of the Response object, like the status code and url.
Create a common modal dialog that is self-removing and that can be used to display success and failure messages at any time. It should have styling that matches the status - info, success, or failure. Use this dialog to tell important things to the user.
Add more of the POST data to the page after the request, such as the likes, dislikes, and views. Add colors, icons, and interactivity to these.
Add some styling and interactivity to the tags for each post.
Add pagination for the posts so only 10 are shown at a time.

Submission

Please post general questions about this project on the Slack #mad9014 channel so everyone can see the answers.

See BS LMS for submission instructions.

Due in Week 11

2. Storage Assignment

Remember that you can post questions on the #mad9014 channel in Slack about this assignment.

For this assignment we are working with fetch, the DOMContentLoaded event listener, the Page Visibility API and its visibilitychange event listener, and the Cache API.

Each time the page loads(DOMContentLoaded event), or switches from the inactive tab to the active one (visibilitychange event), a fetch call will be made to the picsum.photos API to request a random image that is 800px wide by 200px high.

When the image is retrieved is needs to be set as the src of the <img> element in the <main> element of the page. To add the fetched image to the image element, you will need to use the Response blob() method instead of the json() method. Then use the URL.createObjectURL() method on that blob to create a URL that can be passed to the image element.

The page also needs to have a <header> element with an <h1> - showing your name. Use a CSS text-shadow on your name to make sure that it can be read on any background. Use CSS to keep the size of the background-image in the header such that it will always make the image cover the whole header, but maintain the original aspect ratio. The <header> should have NO background image until the user selects one.

The <main> element also needs to have a button, which will save the image, currently displayed in the <img> into the Cache API, using the url /header-background.jpg. Once saved, update the background of the <header> so that it is filled with the saved image.

Each time the visibilitychange event is triggered and indicates that the page is the current active one, check the Cache API to see if there is a /header-background.jpg image. If it exists, retrieve it and set it as the background for the <header>.

When the page first loads, use a placeholder image in the <main> <img> element. This will be shown until the fetch completes and new image is shown. You can do this through the HTML or in the JavaScript.

In your script:

No function should be nested inside another function
All event listeners should use named, not anonymous functions
fetch should ONLY be called ONCE per image. Fetch the image for the main area when the page loads or when the page becomes active again.
Do NOT call fetch again when you want to put it into the header. You already have the image. You can either use a global variable to hold a copy of the Response or Blob after fetching it the first time, or you can use the more complicated approach of copying the image from the main section into an HTML <canvas> element, to create a new blob or base-64 string that you can save to the Cache and put in the header. The global variable is a much simpler solution.

Starter Code

Here is some basic starter code that you can use or create your own.

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Storage Assignment</title>

  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="css/normalize.css" />
  <link rel="stylesheet" href="css/main.css" />
  <script src="js/main.js" type="module"></script>
</head>
<body>
  <header>
    <h1>Steve Griffith</h1>
  </header>
  <main>
    <p>If you like this image, click the button below to save it as the header background image.</p>
    <p><img src="https://dummyjson.com/image/800x200" alt="" /></p>
    <p><button id="btnSave">Save Image and Set as Header Background</button></p>
    <!-- clicking this button puts the image into the cache AND
     sets the background image for the header. -->
  </main>
</body>

Demo Video

Storage Assignment Demo and Description

Submission

Please post general questions about this project on the Slack #mad9014 channel so everyone can see the answers.

See BS LMS for submission instructions.

Due in Week 13