ifindev

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 },
  ]);

ifindev

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.

ifindev

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.

ifindev

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/

ifindev

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;

ifindev

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.

ifindev

Playing Around wiht Tailwind CSS

In this gist, you can find my experiments with Tailwind CSS in Tailwind Playground.

ifindev

This application should allow the user to update their username by inputting a custom value and clicking the button.

The Username component is finished and should not be changed, but the App component is missing parts. Finish the App component so that the Username component displays the inputted text when the button is clicked.

The App component should use the React.useRef Hook to pass the input to the Username component for the input element and for the Username component.

For example, if the user inputs a new username of "John Doe" and clicks the button, the div element with id root should look like this:

<div><button>Change Username</button><input type="text"><h1>John Doe</h1></div>

ifindev

'use strict';

let state = true;

// Create a fake Fetch API request that returns a promise 
let fetch = new Promise((resolve, reject) => {
    setTimeout( () => {
        if(state === true) {
            resolve({
                    name:"ifindev",

ifindev

import Navbar from './Navbar';
import Home from './Home';

function App() {
  return (
    <div className="App">
      <Navbar />
      <div className="content">
          <Home/>
      </div>