Muhammad Arifin ifindev

Filter Data Star Wars dari Dua API

Sumber API

API untuk data starwars: https://swapi.dev/
API untuk tokoh starwars dengan foto-fotonya: https://github.com/akabab/starwars-api
API untuk film starwars dari swapi dengan poster fotonya: http://www.omdbapi.com/?apikey=API_KEY&t=star-wars-jedi

Teknis

Melakukan Filter data Starwars dari OMDB API sesuai dengan data dari omdb API dan swapi API.

Go to https://reactrouter.com/web/example/nesting, then replace the code example for the nesting case with this code.

Simple E-Commerce Cart using Vuex

A very simple exploration on building e-commerce cart functionality using Vuex, the Vue state manager. To try this out, open the example from Vuex getting started page on the basic counter example. Then, copy all the html, js, and css code.

Tailwind Kanban

A simple exploration to build a kanban board using css grid in Tailwind CSS. So it's about 187 lines for just the mockup. This is totally normal because I just use plain HTML. For the next update, I will use Vue component to recreate it since it will clean up the code and more reusable.

Anyway, the UI is already responsive. But since I am using grids, I haven't figure out how to apply a horizontal scroll bar for the overflow case just like a normal kanban boards. Also, open up Tailwind Play to try out this project.

The design is inpired from this image.

Nice article for fetch API and how to display fetched data to DOM https://medium.com/@armando_amador/how-to-make-http-requests-using-fetch-api-and-promises-b0ca7370a444

This is also an interesting article about fetch and how to cancel fetch request in case user switch from current page which still trying to fetch data from API or database to another page. The link https://dmitripavlutin.com/javascript-fetch-async-await/

Article about Callback vs Promises vs Async Await : https://www.loginradius.com/blog/async/callback-vs-promises-vs-async-await/

CSS Animations & Transforms

In this gist, you can find my exploration with CSS Animations and Transforms. Hope it will become useful later in the future. To play with it, open up this Sanbox link, change some parameters, and see what happens.

	[
	{
	"cashBalance": 4483.84,
	"menu": [
	{
	"dishName": "Postum cereal coffee",
	"price": 13.88
	},
	{
	"dishName": "GAI TOM KA: CHICKEN IN COCONUT CREAM SOUP WITH LIME JUICE GALANGA AND CHILI",

	import React from 'react';
	import {
	ChakraProvider,
	Grid,
	Box,
	Flex,
	List,
	ListItem,
	Heading,
	} from '@chakra-ui/react';

	import { useState } from 'react';

	function App() {
	const [counters, setCounters] = useState([
	{ id: 1, value: 0 },
	{ id: 2, value: 0 },
	{ id: 3, value: 0 },
	{ id: 4, value: 0 },
	]);

	const SHA256 = require('crypto-js/sha256');

	class CryptoBlock {
	constructor(index, timestamp, data, precedingHash = " ") {
	this.index = index;
	this.timestamp = timestamp;
	this.data = data;
	this.precedingHash = precedingHash;
	this.hash = this.computeHash();
	this.nonce = 0;