This is a library of smaller projects or a single component that is build with vanila js.

This mini project that allow use to generate random quotes.

Lang Used: HTML/CSS, JavaScript, SCSS

Concept learned: Fetch API, DOM Manipulation, Hiding the API keys using Nodejs and Express, Clicking Event Handling

API Used: Unsplash and QuoteAPI

ShowCase: https://user-images.githubusercontent.com/47827034/201476019-0230b6bf-f9ca-448b-8346-d229406b5296.mov

How to run this project?

1. fork this repo
2. cd into API-Key-Relay and run npm run dev (Remember to add .env file and provided you Unsplash API access code)
3. Compile a SASS compiler on vsCode
4. Open a new terminal and Run the index.js file in Quote Generator folder.

THis mini project is a follow on project from this video.

Lang Used: HTML/CSS, JavaScript, SCSS

Concept learned: Local storage, ES6 Class and Modules, Event Handling and Propagration

How to run this project?

1. fork this repo
2. Compile a SASS compiler on vsCode
3. Open a new terminal and Run the index.js file in Kanban Board folder

This is a mini project that create a simple recipe web explorer. User are able to refresh to look at new recipes, rate their fav receipes. The website allow user to toggle between list and gallery view. The website also support responsive layout.

UI Component built: Card with images, button, star rater, card gallery

Lang Used: HTML/CSS, JavaScript, SCSS

Concept learned: ES6 Class and Modules to create dynamic web component, Event Handling and Propagation, Fetch API

API Used: Spoonacular API

Show Case: video

How to run this project?

1. fork this repo
2. Compile a SASS compiler on vsCode
3. Open a new terminal and Run the index.js file in Recipe Rating folder.

This is a responsive multistep form. Form is everywhere, whether is a simple authentication or a complicated form to extract user information. This form is a sample process of an ecommerce user information form with sections such as contact, shipping and payment. The form is split into 3 steps and 1 review steps. A progress bar is implement for user to see his/her progress in the form.

Concept learned: Event Bubbling(multistep form differents clicks), Fetch API(sending form's post request on a nodejs + express backend), HTML form validator, forms, mobile first design, BEM naming used in this project

Show Case: video

How to run this project?

1. fork this repo
2. In terminal, run cd API-Key-Relay and npm run dev - this is to run the nodejs backend for this project
3. Compile a SASS compiler on VsCode
4. Used live server on Vscode to run the index.js file in Multi Step Form folder.

Searching is an essential UI in any website, whether is searching a product and ecommerce site or a search of video on a streaming site, it is an inevitable feature. In this mini project, the search bar are used to search books. This search bar has a list of suggestion that will help user to find thier desire book.

Concept Learned: Debounce function and web responsive design

API used: Google Book API

Show Case: video

How to run this project?

1. fork this repo
2. Compile a SASS compiler on VsCode
3. Used live server on Vscode to run the index.js file in Search Bar folder.

Pagination is a way to divide huge dataset to smaller chunk and present it to the user. For example, an e-commerce site has 100 items, the dataset can be divided to 10 pages and present 10 items in one page. In most of site, user would select a certain page by clicking on the pagination buttons, and that action will trigger a request to an API for data. In this mini project, each page consists of one movie detail. As user clicked on different pages, it will show different content.

Show Case: video

Design Inspired: Page Design Pagination Color Used

How to run this project?

1. fork this repo
2. Compile a SASS compiler on VsCode
3. Used live server on Vscode to run the index.js file in Pagination folder.