diazamaliana / generasi-gigih-handson

Hands On Intermediate Phase #GenerasiGIGIH

Hands-On | Homework Task

Module 1

Section 1

• Have a table containing the students name.
• Table should be generated with JS DOM manipulation
• Demo : https://codepen.io/diazamaliana/pen/PomZpye

Section 2

• Demo : https://codepen.io/diazamaliana/pen/XWRdZdb

Section 3

• Installing React and add Giphy.API
• Create a branch

Module 2

Section 1

• Add search bar of input elements
• Add search button next to search bar
• Add img with the source gif

Section 2

• From previous exercise, convert elements into components
• Remember to put your components in src/components/[your-component-name]/index.js
• For Gif component, read this JS variable and map as props (hint : just useurl and title)

Section 3

• Loop Gif component from this JS array variable
• Filter out rating of g (hint: use rating field)

Module 3

Section 1

• Create a search feture using Giphy API key created from Module 1
• Use the following endpoint
• Use existing text input and search button to handle user's event
• Show the first 12 results of the gifs (from the network call)
• Instead use <input> and <button> inside /src/pages/search

Section 2

• Convert previous exercise from class component using hooks

Module 4

Section 1

• Store the search queries on Redux

Section 2

• Using API provided by GIPHY
• Create a Trending Page
• Reuse the Gif component that you have created earlier.

Module 6

Section 1

• Write a test for Search component