Posted on

Travel Planning App

A travel planning application that accesses, retrieves and compiles data from various APIs like Countries API, OpenWeather API and Travel advisory.

Submit pressed..
Displaying results.

GitHub Link

Live Demo

Key Tech:

  • WebPack
  • Node JS API Calls

Code Highlights:

Posts trip information, and then fetches data from various APIs.
postTrip helper function
fetchLocal helper function
Server side addTrip function
Server side – example of a fetch function using promises and saving the trip object.
Updating the UI with the stored trip information.
Posted on

Evaluate News

An App that performs sentiment analysis for the given news article. It uses an external API to perform natural language processing and displays various results.

GitHub Link

Live Demo

Key Tech:

  • SCSS
  • Bootstrap

Code Highlights:

Express server setup.
Client Form Handler using promises and updating UI.
Posted on

Weather Journal

Weather Journal App which fetches weather information from Open Weather API and displays results.

Viewed on a laptop
Viewed on a device

GitHub Link

Live Demo

Key Tech:

  • HTML Forms
  • Javascript calling Open Weather API
  • Javascript dynamically updating HTML components

Code Highlights:

Using Javascript promises to control the flow of actions.
Using fetch to get data from external API.
Post and Get data locally.
Updating UI.
Posted on

Landing Page

A landing page with automatic section highlighting, smooth scrolling and a TOP button.

Viewed on a laptop
Viewed on a device

GitHub Link

Live Demo

Key Tech:

  • Basic HTML Sections
  • Basic CSS
  • HTML Navigation Bar
  • Javascript to scroll to Section

Code Highlights:

Added background colour gradient via CSS
Alternating left and right aligned sections via CSS
Moving circle effects added via CSS
Button Top handling via the visible class.
Showing “TOP” button and scrolling behaviour handling via Javascript.
Posted on

Blog Website

A responsive blog website which uses CSS Grid and Flexbox to re-arrange components.

Viewed on a laptop
When viewed on a device.

GitHub Link

Live Demo

Skills:

  • Basic HTML and CSS Structures
  • CSS Grids
  • Flex Box

Code Highlights:

Used CSS variables to store colours
Used CSS Grid and Media queries to make site responsive.
Used Flexbox for the Posts – make the site responsive.
Added hovering effect to the boxes.