projects tag: fetch api
Monsters API JS App
This little search application utilizes two APIs. One is for the text called {JSON} Placeholder, and the other API is for the images called Robohash. The app also utilizes the fetch API method, the map() method, event listeners, createElement, appendChild, JavaScript array of objects, template string literal interpolation, Modern JavaScript, and more!
#e.keyCode, #e.which, #fetch api, #innerhtml property, #json placeholder api, #keydown event, #manipulating the dom, #modern javascript, #node sass, #project, #promise chaining, #robohash api, #template string literal interpolation
Monsters Rolodex (React Hooks)
I recently upgraded this project to React 18 using functional React components AND hooks. For state I use the useState hook, for side effects the useEffect Hook, and the useCallback hook to prevent infinite function calls to the function created to fetch the data from the JSONPlaceholder API.
#apis, #api error handling, #create react app, #css grid, #css in js, #dart sass, #fetch api, #flexbox, #modern javascript, #npx, #react 18, #react hooks, #lazy loading, #project
OMDB API Next.js
An app which implements the OMDB API using Next.js, protects your API key, and deploys to vercel.com.
#async-await, #css animation, #custom next.js _error.js page, #dotenv, #environment variables, #eslint, #fetch api, #husky, #invalid search keywords error handling production, #lint-staged, #local scripts, #modern javascript, #next.js, #next/router hooks, #node.js, #node modules, #omdb api, #pagination, #prettier, #project, #react hooks, #required boolean attribute, #sass, #scss, #scroll-down button, #scroll-up button, #server side rendering, #stacktrace error-handing development, #stylelint, #vercel
Poke API Web App
An application which utilizes the Poke API based on Pokemon characters and uses both the fetch API and AJAX, JavaScript promise chaining, the map method, creates most elements rendered to the html pages, checks for non - existent images and removes them or or sets their display properties to none, uses pointer events to replace touch and mouse events, custom build script, and Modern JavaScript in general.
#ajax, #code refactoring, #create element, #css transforms, #css transitions, #fetch api, #keydown event, #load event, #map method, #modern javascript, #nested map method, #nested api objects, #node sass, #onerror property, #parallax, #pointer events, #poke api, #project, #promise chaining, #window pageOffset, #window scroll
Trump Talks
A Random Quote API application using the What Does Trump Think? API.
#fetch api, #nextjs, #react, #file based routing, #pre rendering, #project, #server side rendering, #random quote api