JAVASCRIPT

The "Star Wars Character Profile's" page retrieves information on 85 Star Wars characters, including facts and details on their species, home world as well as films they have appeared in.

This project was my first experiment with AJAX and sending HTTP requests to 3rd party servers.

• Retrieve stats on 85 Star Wars characters, including information on their species, home world and films they have appeared in
• Images of each character and their home worlds
• Wookiee button returns results translated into Wookiee

• AJAX
• Asynchronous & Synchronous
• HTTP request to 3rd party servers
• JSON

• SWAPI - The Star Wars API
• swapi.co
• Images from wookieepedia – The Star Wars Wiki
• starwars.wikia.com
• Star Wars Glyphicons
• starwarsglyphicons.com

• Starwars theme playing in background (button to turn it off)
• Audio effect for sumbit button
• Audio effect for wookie button
• Terrain array capitalise each variable
• Improve CSS for text, select box and buttons
• Twinkerly background
• Two different CSS themes to choose from - light side & dark side
• Buttons to take you to different sections
• Only revealed when a character has been chosen

A web page that simulates tossing a coin for a user, presenting the results in both tabular and graphical form. This was my first implementation of a JavaScript library (Chart.js) other than jQuery.

• User can click a button to simulate a coin toss (50:50 chance of heads or tails)
• For browser session (or before reset button is clicked) the total number of heads, total number of tails and total number of toss’s is presented
• A table of results is updated after ever toss time stamping each toss
• Annotated, hoverable charts (bar and pie) are updated after each toss
• Toss’s are limited to one toss every half a second
• A coin tossing sound is make for each accepted toss
• Reset button to start again in same browser session

• JavaScript Library
• Charts.js
• HTML5 Charts using the canvas element (canvas tag)
• Debouncing
• Debounce function to limit the rate at which a function can be called

• Charts.js Library
• chartjs.org

• Animate coin tossing
• Alternate between heads and tails before finishing on result
• Download table as .csv file option
• More audio affects
• Reset button clicked
• Heads result
• Tails Result
• Select between different coins
• Change theme for new coin
• Easter egg messages after 10, 100, 1000 tosses

Allows users to scrape data from webpages by implementing jQuery get request’s to submitted URL’s (concatenated to a proxy URL). HTML is received as a string and processed using vanilla JavaScript. Depending on options selected by the user link, image or image data is extracted from the response using regular expressions, loops and array processing.

Results are displayed in a table that is refreshed for each entered URL, and upon successful retrieval of results the ability to download the data as a .csv file is presented.

• For a submitted URL can return:
• Links from the web page
• Email Addresses
• Images
• Ability to download results as a .csv file
• Rotating loading icon while results are returned and processed

• Vanilla JavaScript
• Event Listeners
• Regular Expressions
• User Input
• DOM Manipulation
• Creating, deleating, amending, revealing and hiding elements
• jQuery library
• get request
• Responsive tables
• Proxy

• Font Awesome
• cors-anywhere.herokuapp.com

• Spinner added to indicate downloading
• Audio effects for click of submit button, loading and downloading
• Timestamp of when download button clicked - added to downloaded file name
• Remove duplicates
• Ability to sort / organize results (alphabetical)
• Add additional forms of validation to check that acceptable URL entered
• Ability to paste in a list of web pages in csv format
• Array.foreach - append to table
• Separate any duplicate code out into functions

Using jQuery & AJAX, HTTP get requests are made to two URL's on a 3rd party server.

The first request receives data on the total number of people in space, their names and the craft they are on.

The second request receives data on the current position of the ISS.

The received JSON data is stored in objects and the properties are accessed and used to update selected HTML elements on the web page.

Using the setTimeout method of the HTML DOM Window Object the function that requests the ISS data and updates the latitude and longitude is called every 5 seconds.

• Provides the number of people in space at this moment. List of names when known.
• Current ISS location over Earth (latitude/longitude)
• The latitude and longitude data is updated every 5 seconds.

• jQuery
• AJAX
• HTTP requests
• getJSON() method
• JSON
• DOM
• setTimeout method
• window object

3rd party web server

api.open-notify.org

Open Notify is an open source project to provide a simple programming interface for some of NASA’s data

api.open-notify.org/iss-now.json

api.open-notify.org/astros.json

• Add icons of people for the number of people in space
• Add a map to show the position of the ISS

A webpage that displays the visitors IP address (and some additional location information). Using jQuery & AJAX, HTTP get requests are made to 3rd party web servers. The received data is in JSON format and the data from each request is stored in an object. The objects properties are accessed and stored as variables. HTML elements are selected based on their id’s and their contents are set to the strings stored in the variables.

• Automatically displays visitors IP address when they enter the page
• Additional current location info available at the click of a button

• jQuery library
• AJAX
• HTTP requests to 3rd party servers
• JSON
• jQuery methods inside a document ready event to prevent any jQuery code from running before the document is fully loaded
• getJSON.() method’s to request data from external servers with HTTP requests

3rd party web servers:

• jsonip.com
• ipinfo.io/json
• api.ipify.org (results logged to console only)

• Animated spinner icon when loading
• Loading audio
• Ping sound when done
• Button to change page style to retro coder look

Displays corporate buzzwords generated from a 3rd party webserver, received from their API via AJAX using vanilla JavaScript.

Due to the “same-origin policy” and as an AJAX request is being made from one domain to another the “No 'Access-Control-Allow-Origin' header is present on the requested resource” error was encountered.

To get around this, and allow a request to be made from this domain to the 3rd party API, a proxy was used that creates requests to the 3rd party URL and includes CORS headers in the response. A proxy web server passes on the request from this site along with its headers.

At the click of a button the webpage generates a corporate buzzword loaded phrase.

• Vanilla JavaScript
• AJAX
• HTTP get requests to 3rd party API
• Use of a proxy to enable cross-origin requests to any URL and includes CORS headers in the response
• Parsing of JSON response into JS Object

• Corporate Buzzword Generator API
• corporatebs-generator.sameerkumar.website
• github.com/sameerkumar18/corporate-bs-generator-api
• A Node/Express project that randomly picks out phrases
• Proxy
• cors-anywhere.herokuapp.com
• API that enables cross-origin requests to anywhere.
• Creates requests to URL’s, and includes CORS headers in the responses.

• Audio effect
• Either on click of button
• Or appearance of buzzword
• Multiple sound effects in an array, randomly chooses one
• Button to Tweet the phrase