Docsity
Docsity

Prepare for your exams
Prepare for your exams

Study with the several resources on Docsity


Earn points to download
Earn points to download

Earn points by helping other students or get them with a premium plan


Guidelines and tips
Guidelines and tips

React Assignment 5: Building Meme History for MemeMuc at Ludwig-Maximilians-Universität, Lecture notes of History

A university assignment for students in the online multimedia course at ludwig-maximilians-universität, lfe medieninformatik, in the academic year 2019/2020. The assignment involves building a meme history feature for the mememuc meme generator using react. Students are required to implement saving, restoring, and deleting memes from the history. Detailed instructions and goals for each task.

What you will learn

  • How do students save a meme in the meme history in Task 1?
  • How do students restore a meme in the meme history in Task 2?
  • How do students delete a meme from the meme history in Task 2?

Typology: Lecture notes

2021/2022

Uploaded on 09/12/2022

ellen.robinson
ellen.robinson 🇬🇧

4.8

(8)

222 documents

1 / 2

Toggle sidebar

This page cannot be seen from the preview

Don't miss anything!

bg1
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
pf2

Partial preview of the text

Download React Assignment 5: Building Meme History for MemeMuc at Ludwig-Maximilians-Universität and more Lecture notes History in PDF only on Docsity!

Ludwig-Maximilians-Universität Online Multimedia LFE Medieninformatik WS 2019/

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 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

Ludwig-Maximilians-Universität Online Multimedia LFE Medieninformatik WS 2019/

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”. 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!