Assignment 5 - Meme History

Oct 1, 2026

Assignment 5 is a React-focused web development task centered on building and extending a meme history for “MemeMuc,” the MMN Meme Generator. The work requires creating a working meme history list, adding a save action that stores configured memes, rendering saved items via component props, and implementing interactive behaviors. Task 1 covers saving and displaying memes; Task 2 adds restoring memes by clicking history entries and deleting memes via a per-item delete icon.

LanguageEnglish

CategoryExam

FormatPDF

Pages2

Reading Time5 min

AccessFree to download

Goals

Task 1: Meme History – The Basics

Saving memes

Rendering saved memes with props

Task 2: Meme History – Restore and Remove

Restoring a meme via click handler

Deleting memes with delete icon

Submission

Assignment 5 Due: Wed 27.11.2019; 18:00h ( 1 Week) Goals This assignment trains you in. .. • Building webapps in React Task 1: Meme History – The Basics Difficulty: Medium Your task is to build a (local) history for MemeMuc, the MMN Meme Generator. Use the skeleton from GitHub, which is similar to the tutorial’s code-along solution but contains some guidance for this task. Please be patient with MemeMuc, loading images is slow when using long captions ;) The goal of task one is to have a working meme history on the bottom of the page. In the meme configuration area on the right, a save button should be added. When one clicks the save button, the currently configured meme should be added to the meme history. Appropriate steps could be: - In the mememuc component, a button for saving memes is already added. Implement its event handling. When the button is clicked, a CustomizedMeme object should be saved into the mememuc component’s savedMemes array. - Take a look at the mememuc-history component. The component skeleton and a separate css styling file. - Use the mememuc-history component in the mememuc component, and implement astore function to save all saved memes in the savedMemes array . - Use props to pass all saved memes, and adjust the mememuc-history’s JSX template to actually render all saved memes Task 2: Meme History – Restore and Remove Difficulty: Hard Now let’s add some interactivity to the meme history. Two features should be supported: Restoring a meme (viewing it in the large middle-area) For restoring, implement a click handler on the meme history items. To change the displayed meme in the parent component, pass a callback through props that allow child components update properties selectedBaseImage and caption in the history component. Through props, it should be accomplished that the displayed meme changes when the history component’s event handler changes its properties. Re-rendering the meme should work automatically if the two aforementioned properties in the parent component change through props (same principle like for the caption editing) . Deleting a meme from the history Add a delete icon to each history meme. We recommend to use Material Design Icons (see here), for example the DeleteForever icon. Also mind to setup Material Design in your project. To delete a meme, use a callback that pass through props to edit the savedMemes array in the history component. Submission Please turn in your solution as ZIP file via Uni2Work. You can form groups of up to three people. We encourage you to sign up for Slack! All you need is a CIP account and an email address that ends in “@[cip.ifi.lmu.de](cip.ifi.lmu.de)”. Ask us if you don’t know how to get them. If you have questions or comments before the submission, please contact one of the tutors. They are on Slack @Aleksa and @Andre, remember that they also want to enjoy their weekends 􀀭 It also makes sense to ask the question in our \#omm-ws1920 channel. Maybe fellow students can help or benefit from the answers, too!

FAQs

What is the main goal of Assignment 5?

To build a working meme history feature for MemeMuc in a React web app, including saving configured memes and managing them in an interactive history list.

How should the save button work in Task 1?

When clicked, it should save the currently configured meme as a CustomizedMeme object into the mememuc component’s savedMemes array, then render the history list.

How do restoring and deleting work in Task 2?

Restoring requires a click handler on history items that updates the parent properties (selectedBaseImage and caption) so the displayed meme changes. Deleting requires a delete icon per history item and a props callback to edit the savedMemes array in the history component.

Oct 1, 2026

Uploaded by Guten Appetit_Joghurt