[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"detail-sidebar-cat-0-en-105":3,"doc-seo-489472-105":59,"doc-detail-489472-en":130},{"code":4,"msg":5,"data":6},0,"success",[7,13,18,23,28,33,38,43,48,51,55],{"id":8,"doc_module":4,"doc_module_name":9,"category_name":10,"show_sort_weight":11,"slug":12},1,"Document","Story & Novel",90,"story-novel",{"id":14,"doc_module":4,"doc_module_name":9,"category_name":15,"show_sort_weight":16,"slug":17},2,"Literature",80,"literature",{"id":19,"doc_module":4,"doc_module_name":9,"category_name":20,"show_sort_weight":21,"slug":22},4,"Exam",70,"exam",{"id":24,"doc_module":4,"doc_module_name":9,"category_name":25,"show_sort_weight":26,"slug":27},5,"Comic",60,"comic",{"id":29,"doc_module":4,"doc_module_name":9,"category_name":30,"show_sort_weight":31,"slug":32},6,"Technology",50,"technology",{"id":34,"doc_module":4,"doc_module_name":9,"category_name":35,"show_sort_weight":36,"slug":37},7,"Healthcare",40,"healthcare",{"id":39,"doc_module":4,"doc_module_name":9,"category_name":40,"show_sort_weight":41,"slug":42},8,"Research & Report",30,"research-report",{"id":44,"doc_module":4,"doc_module_name":9,"category_name":45,"show_sort_weight":46,"slug":47},9,"Religion & Spirituality",20,"religion-spirituality",{"id":46,"doc_module":4,"doc_module_name":9,"category_name":49,"show_sort_weight":46,"slug":50},"World Cup","world-cup",{"id":52,"doc_module":4,"doc_module_name":9,"category_name":53,"show_sort_weight":52,"slug":54},10,"Lifestyle","lifestyle",{"id":56,"doc_module":4,"doc_module_name":9,"category_name":57,"show_sort_weight":24,"slug":58},19,"General","general",{"code":4,"msg":60,"data":61},"ok",{"site_id":62,"language":63,"slug":64,"title":65,"keywords":66,"description":67,"schema_data":68,"social_meta":123,"head_meta":125,"extra_data":127,"updated_unix":129},105,"en","assignment-5-meme-history","Assignment 5 - Meme History","","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.",{"@graph":69,"@context":122},[70,84,105],{"@type":71,"itemListElement":72},"BreadcrumbList",[73,77,79,82],{"item":74,"name":75,"@type":76,"position":8},"https://docshare.wps.com","Home","ListItem",{"item":78,"name":9,"@type":76,"position":14},"https://docshare.wps.com/document/",{"item":80,"name":20,"@type":76,"position":81},"https://docshare.wps.com/document/exam/",3,{"item":83,"name":65,"@type":76,"position":19},"https://docshare.wps.com/document/assignment-5-meme-history/489472/",{"url":83,"name":65,"@type":85,"image":86,"author":91,"headline":65,"publisher":94,"fileFormat":97,"inLanguage":63,"description":67,"dateModified":98,"datePublished":99,"encodingFormat":97,"isAccessibleForFree":100,"interactionStatistic":101},"DigitalDocument",{"url":87,"@type":88,"width":89,"height":90},"https://docshare.wps.com/thumbnails/assignment-5-meme-history/489472.png","ImageObject",300,407,{"name":92,"@type":93},"Guten Appetit_Joghurt","Person",{"url":74,"name":95,"@type":96},"DocShare","Organization","application/pdf","2026-11-07","2026-10-01",true,{"@type":102,"interactionType":103,"userInteractionCount":81},"InteractionCounter",{"@type":104},"ViewAction",{"@type":106,"mainEntity":107},"FAQPage",[108,114,118],{"name":109,"@type":110,"acceptedAnswer":111},"What is the main goal of Assignment 5?","Question",{"text":112,"@type":113},"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.","Answer",{"name":115,"@type":110,"acceptedAnswer":116},"How should the save button work in Task 1?",{"text":117,"@type":113},"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.",{"name":119,"@type":110,"acceptedAnswer":120},"How do restoring and deleting work in Task 2?",{"text":121,"@type":113},"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.","https://schema.org",{"og:url":83,"og:type":124,"og:title":65,"og:site_name":95,"og:description":67},"article",{"robots":126,"canonical":83},"index,follow",{"doc_id":128,"site_id":62},489472,1793007031,{"code":4,"msg":5,"data":131},{"doc_id":128,"user_id":132,"nickname":92,"user_avatar":133,"doc_module":4,"category_id":19,"category_name":20,"doc_title":65,"doc_description":67,"doc_content":134,"file_id":135,"file_url":136,"file_type":137,"file_size":138,"view_count":81,"is_deleted":4,"is_public":8,"is_downloadable":8,"audit_status":8,"page_count":14,"language":139,"language_code":63,"site_id":62,"html_lang":63,"table_of_contents":140,"faqs":141,"seo_title":142,"seo_description":67,"update_tm":143,"read_time":24,"preview_page_count":4},1374408768420,"https://ap-avatar.wpscdn.com/davatar_6f874abed73319feea01a86fa6f0fab8","Assignment 5  \nDue: Wed 27.11.2019; 18:00h ( 1 Week)  \nGoals  \nThis assignment trains you in. ..  \n• Building webapps in React  \nTask 1: Meme History – The Basics Difficulty: Medium  \nYour 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 ;)  \nThe 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.  \nAppropriate steps could be:  \n- 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.  \n- Take a look at the mememuc-history component. The component skeleton and a separate css styling file.  \n- Use the mememuc-history component in the mememuc component, and implement astore function to save all saved memes in the savedMemes array .  \n- Use props to pass all saved memes, and adjust the mememuc-history’s JSX template to actually render all saved memes  \nTask 2: Meme History – Restore and Remove Difficulty: Hard  \nNow let’s add some interactivity to the meme history. Two features should be supported:  \nRestoring a meme (viewing it in the large middle-area)  \nFor 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  \nhandler 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) .  \nDeleting a meme from the history  \nAdd 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.  \nSubmission  \nPlease turn in your solution as ZIP file via Uni2Work. You can form groups of up to three people.  \nWe 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.  \nIf 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 􀀭  \nIt also makes sense to ask the question in our \\#omm-ws1920 channel. Maybe fellow students can help or benefit from the answers, too!","cbCaioZhOdkbwcfa","https://ap.wps.com/l/cbCaioZhOdkbwcfa","pdf",169720,"English","# Goals\n# Task 1: Meme History – The Basics\n## Saving memes\n## Rendering saved memes with props\n# Task 2: Meme History – Restore and Remove\n## Restoring a meme via click handler\n## Deleting memes with delete icon\n# Submission","[{\"question\":\"What is the main goal of Assignment 5?\",\"answer\":\"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.\"},{\"question\":\"How should the save button work in Task 1?\",\"answer\":\"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.\"},{\"question\":\"How do restoring and deleting work in Task 2?\",\"answer\":\"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.\"}]","Assignment 5 - Meme History | PDF",1790823246]