AngularJS Multifunctional Single Page Application

Link to code (github)

  • Angular 1.6.6
  • Angular Router
  • Open Weather Map API
  • The Movie DB API
  • Bootstrap 4
  • All minified files downloaded and saved in scripts folder
  • Folder structure based on file types

This slideshow requires JavaScript.

Advertisements

ReactJS JSX Transformer

Link to code (github)

  • This is a basic JSX Transformer application that transforms our code on the left to ES5 on the right
  • Based on Babel’s own example page http://babeljs.io/repl/
  • The bottom bar shows errors presented in the code in red text
  • Some basic styling has been applied to the application
  • It also uses Webpack and has all the dependencies listed already so just use npm install to get them
  • npm start will load the server and use localhost to launch the application
  • Trying putting in some code on the left and see the magic happen. E.g. [1, 2, 3].map(n => n+1 )

This slideshow requires JavaScript.

ReactJS states and reusability potential

Link to code (github)

  • The sample code shows a simple way to use states in React
  • CDNs have been used for convenience
  • Different buttons are used to increment the value of a single state counter
  • The code has been made more reusable in the subsequent branches keeping the same functionality
  • You can check the changes in the branches or pull requests in this repository
  • The first branch makes the increment function reusable by binding values to the same function at runtime
  • The second one makes the Button component reusable by making it stateless and passes values as props. This reusability is evident in the alert button added. Also, this time values are defined in default props and overridden in RenderDOM.render method
  • And the final one shows the same functionality in ES6 syntax

react_reusability_01

Hangman – A simple AngularJS game

Link to code (github)

Hangman is a simple game created using AngularJS. The goal of this game is to guess a word within 6 chances one letter at a time. Every wrong guess decreases the counter by 1 while every correct guess reveals the position of that letter in the word (even if it appears multiple times). Submitting the same letter again will not affect the game. Some key points:

  • Developed in AngularJS 1.x (using CDN)
  • Simple layout with some basic styling
  • Words are currently hard feeded and selected at random
  • Words are only 3-letter long for the sake of demo
  • The correct word is printed in console

This slideshow requires JavaScript.

One-page responsive website converted from PSD

Link to code (github)

This site was created using Adobe CC 2017 versions of Dreamweaver and Photoshop and has the following features:

  • Onepage format with smooth scrolling
  • Fully responsive
  • Tabs change into accordion on mobiles
  • Responsive Carousel
  • Includes a reset.css file
  • Used both downloaded as well as online fonts
  • Sticky nav-bar after some scrolling

How the site looks on desktops:

This slideshow requires JavaScript.

The number of images in the carousel changes when viewed on tablets:

psdtohtml_onepage_responsive_06

The number of images in the carousel changes when viewed on mobile phones and the tabs also change into accordion:

Web Mashup: Display Best Restaurants on a Map

Link to code (github)

The goal of this project was to create a web mashup that combines two web services: Google Maps and the Yelp API for Developers, using JavaScript and AJAX.

After centering the Google Map to a geographical area and entering some terms, such as “Indian Restaurant”, the application will find the best matches (eg, the best Indian restaurants) inside the map area, it will mark their location on the map, and will display some information about these restaurants on the web page.

For this project, I have used

  1. Yelp API for Developers v2.0 from Yelp (more specifically, the Search API)
  2. Google Maps JavaScript API V3
  3. Google Map Markers

The HTML web page has 3 sections:

  1. a search text area to put search terms with a button “Find”
  2. a Google map of size 600×500 pixels, initially centered at (32.75, -97.13) with zoom level 16
  3. a text display area

When you write some search terms in the search text area, say “Indian buffet”, it will find the 10 best restaurants in the map area that match the search terms. They may be less than 10 (including zero) sometimes.

The map will display the location of these restaurants as map overlay markers with labels from 1 to 10. The text display area will display various information about these restaurants. It will be an ordered list from 1 to 10 that correspond to the best 10 matches.

Each list item in the display area will include the following information about the restaurant: the image, the name as a clickable url to the Yelp page of this restaurant, the rating (1-5 stars), and the snippet text. When you search for new terms, it will clear the display area and all the map overlay markers, and will create new ones based on the new search.

This slideshow requires JavaScript.