Ludwig-Maximilians-Universität Online Multimedia
LFE Medieninformatik WS 2019/2020
1
Assignment 5
Due: Wed 2 7.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 a
store 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
