| Event | Day | Date | Time |
|---|---|---|---|
| Release | Thu | Oct 03 | 09:00 AM ET |
| Due | Thu | Oct 10 | 05:00 PM ET |
In this homework, you will complete the Meme Generator App, a web application where users can generate memes by entering top and bottom text. The app will fetch a random meme image from the Imgflip API and overlay the text on the image.
Your responsibility involves writing the TypeScript that will make this app operational. The HTML, styled with TailwindCSS, has already been prepared for you.
Please see the demo on Panopto.
Begin by logging into your GitHub account at https://github.com/. Then, accept the invitation by clicking on this link. This action will create a private GitHub repository with the starter code.
Please keep the repository private. Do not change its visibility or add collaborators. Clone this repository to your local machine to start your work.
Clone the repository to your local machine and open the index.html file in VSCode to familiarize yourself with the contents. You’ll notice the layout is similar to the one we used for the Dictionary app.
Please avoid making any changes to the index.html file or any file other than src/main.ts and style.css.
Finally, open the src/main.ts file and develop the app according to the provided description, specifications, and demo.
Before submitting, ensure that your app is deployed as a GitHub page. Also, update the info.json file with links to your GitHub repository and the location of your deployed app:
{
"repo": "",
"app": ""
}Make sure to commit and push the updated info.json file to your GitHub repository. After doing so, submit your work on Gradescope.
If you need to resubmit, push the changes to your repository first, then re-submit on Gradescope.
Teaching assistants will evaluate your submission using the following criteria:
Spec: Users should be able to input top and bottom text for the meme using the provided input fields.
Spec: Users should see a red border around an input field if they attempt to generate a meme without filling both input fields.
Spec: After clicking the “Go!” button, the app should fetch a random meme image from the Imgflip API.
Spec: The fetched meme image should be displayed on the screen along with the top and bottom text overlaid in their respective positions.
Spec: Users should be able to generate a new meme by entering new text and clicking the “Go!” button again, which should replace the current meme with a new one.
Spec: The meme generation process should display an error message if the Imgflip API request fails or if the input fields are empty.
Spec: Users should be able to trigger meme generation by pressing the “Enter” key when focused on either input field.
Spec: The input fields should retain their border color indicating validation status until they are corrected and the “Go!” button is clicked again.
Spec: The meme image, top text, and bottom text should be cleared or replaced when a new meme is generated, ensuring that only the latest generated meme is visible.
Spec: The top and bottom text should be displayed on the meme image in a visually appealing manner, with appropriate font size, color, and positioning to ensure readability.
Spec: The app should use async/await for handling asynchronous operations, such as fetching data from the API. Additionally, all asynchronous code should be wrapped in try/catch blocks to handle errors gracefully and provide meaningful error messages to the user.
Spec: The source code must be written in TypeScript. It code should follow best practices in code readability. This includes consistent indentation, clear naming conventions, and relevant code comments.
Spec: All variables, including function parameters, should have TypeScript types. All functions should specify return types. There should be no formatting or TypeScript (compile-time) errors. Students must run the formatter (prettier) and type-check commands provided in package.json to ensure this before submission.
Spec: The code should include type definitions for the data received from the Imgflip API and for the various data structures (objects) used in the app.
Spec: The app should operate smoothly without any errors. There should be no errors or debugging messages in the console. The source code should be free of visible inefficiencies. For instance, the app should cache the memes fetched from the Imgflip API for the current day. If a new day starts, the cache should be invalidated, and a new fetch should be performed to get the updated memes.