Typescript Widgets

Card Carousel

What is it?
A web component made for www.randomwebbits.com. It’s a picture carousel and/or slideshow

![A slideshow widget.]CardSlideshow.png)

What does it do?

• Interactive due to newly created elements and functions that are not available in the original markup

• JavaScript adds new elements to make the component function as expected

• Two slides are shown at a time, one on the left and one on the right

• The ‘SlideShow’ is a class with members and functions capable of running the slideshow

Technology?

• Built with Gulp + TypeScript compiler

• Javascript async module

• HTML markup and JavaScript

Dictionary Widget

What is it?
It’s a search box word entry and definition retrieval program for the browser.

What does it do?

• Retrieve words from a word dictionary API

• Asynchronous word fetch

• Dynamic markup creation

Technology?

• Built with Gulp + TypeScript compiler

• Javascript async module

• HTML markup and JavaScript

const wordFetchRequest = async () => {

   //set apiGET::sendToBrowserCache to true to use cache storage
   const wordFetch = new apiGET(wordcache.wordURL, false, wordcache.cacheName, elem.errorElem);

   //fetch request
   let data = await wordFetch.apiGET(wordFetch.getGETURL());

   //data parse and markup render
   //...continued code...//
};
wordFetchRequest();

Details:

• Cached word entries in local storage

  private addDictionaryTermtoLocalStorage(sendToBrowserCache: boolean, wordcache: localstoragewordcache, wordArray: any[],)
  

• Cached responses (for offline use) in cache storage

  //set apiGET::sendToBrowserCache to true to use cache storage
     const wordFetch = new apiGET(wordcache.wordURL, true, wordcache.cacheName, elem.errorElem);
  

• Input validation with interactive feedback:
  ”Invalid word!”
  ”No Definitions Found”
  ”Failed to fetch, check network connection.”

To-Do List Widget

What is it?
A to-do list on a webpage, made to store to-do items using stored entries

What does it do?

• Add to-dos using an input form

• Delete entries if ‘complete’ checkbox is entered

• Store to-dos in browser storage → re-render on page reload

• Exportable widget based on classname

Technology?

• Built with Gulp + TypeScript compiler

• Javascript async module

• HTML markup and JavaScript

<!-- Add widget to aside element -->
<h1>To Do List Widget (Below)</h1><hr>
<aside class="ToDoList"></aside>

• Cached entries in local storage

  if (ToDoWidget.isToDoInStorage()){
     let todos: localstoragetodocache[] = JSON.parse(localStorage.getItem('ToDos')!);
     todos.push(ToDo);
     localStorage.setItem('ToDos', JSON.stringify(todos));
  }
  

Advice Generator

What is it?
A FrontEnd Mentor challenge: it’s a web component that displays colloquial advice expressions.

What does it do?

• View the optimal layout for the app depending on their device’s screen size (in development: phase 1)

• See hover states for all interactive elements on the page (in development: phase 2)

• Generate a new piece of advice by clicking the dice icon

Technology?

• Build with Next.js framework + TypeScript

• API

• HTML and CSS markup