Web Projects

This project is split into two sections:

1) Excel Solution: To demonstrate knowledge of Microsoft Excel including:

• Design considerations before starting to create an Excel workbook
• Data structure
• Excel formulae
• Improving spreadsheet usability for the user
• Separating data from formulae
• Named ranges
• Drop down lists
• Using dynamic tables for data entry
• Lookups (Vlookup and Index Match)
• Array functions
• Pivot tables
• Charts

2) SQL Queries: To demonstrate knowledge of MySQL and T-SQL (MS-SQL)

The data used in the Excel workbook has been uploaded to the website. SQL queries are utilised in the web pages to return live data that would be useful to a sales department. SQL code is shown on the pages along with the data. The opportunity is then given to the user to try out queries on the live data, by allowing queries to be executed directly from the web page.

Some examples of work produced in the Tech Educators full-stack bootcamp course.

This is a three month intensive fulltime course in JS, React and Nextjs.

Tools, packages and services used include:

• Linux with VSC for development
• NPM
• Github
• Vercel
• Replit
• Supabase
• Expressjs
• PostgreSQL
• Trello
• Render
• Clerk

The course involved pair programming, unit testing, API's, frameworks, authentication and using modern ES6 JavaScript.

This is a hand-coded dynamic shopping website, complete with search and auto-email functionality.

Functionality includes:

• An admin content management system, complete with stock control
• Administrator can upload products and product images using the CMS
• User account creation and login
• Basket functionality ensures that customers can only order product quantities that are in stock
• Handles products with differing VAT rates
• Allows customer to add products to basket before account signup
• Product search
• Email automatically generated and sent to customer when an order is placed
• Current stock levels can be exported to a CSV file direct from the CMS
• Customer can choose from different delivery services
• CMS allows products to be featured on the front page
• Pagination

All product images are masked where appropriate to demonstrate editing.

A project to record employee annual leave. This is work in progress and demonstrates a number of features:

• Record staff leave by individual day or date range using date picker
• Application can also support and display the recording of half days
• Leave summary by selectable staff member, including a calendar view with colour coding
• Leave summary by selectable company department
• Summary of leave of all departments
• Summaries are also grouped and summed by week
• Leave types are colour coded and there is functionality to record reserved days, such as company shutdown
• A weekend mode is included where booked dates spanning weekends are automatically filtered out
• If a date range includes a bank holiday, the bank holiday will be ignored

The version shown does not reflect on how the application will appear, as all functionality will reside behind a protected login screen.

All data shown is for testing purposes.

This project has been coded as a test for working with and manipulating dates.

An operator licence is a licence that a company needs to operate a commercial vehicle in Great Britain. The government holds data on companies who own an operator's licence.

The data is a free download from the data.gov.uk website and is issued under the Open Government Licence v3.0.

These pages allow a user to search for company data using a search form with wildcard search functionality. Also features the ability to export found data to a CSV file. Adds search functionality that is not included in the government version, where searches can be made combined with vehicle number ranges. This project is protected by a user login page.

The original source data required manipulation before use to expand the number of records from around 80,000 records to approximately 114,000 records to include depots, so code was created to automate this.

Example of an adaptive parallax scrolling web page.

Also shows examples of large masked photos. Images taken without a lightbox. Embedded fonts used.

Embedded Youtube videos/images at the foot of the page.

This is a collection of reference information when working with Excel spreadsheets.

Included are some useful VBA workbooks for splitting and cleansing data. Also included are some tools written in JavaScript to automate and simplify the creation and extension of formula.

As well as creating and editing workbooks in my previous roles, I have also carried out many projects which involve data cleansing, correction, validation and de-duping. Excel is a useful tool in these processes.

Various web demo's, tests and experiments. Including:

• Performing automatic data correction, validation, checking and processing on CSV files using JavaScript
• Reading and manipulating JSON files with higher order functions using JavaScript
• Sprite animation in JavaScript

A page to help solve codeword puzzles, using PHP/MySQL database queries.

This page has was developed as a test of both querying and the ability to manipulate text characters within strings and arrays.

Where letters are duplicated within words, the script counts and displays the number of occurrences. This information can be useful where a codeword contains a pattern with duplicated letters.

Uses an open-source dictionary for lookups containing approximately 235,000 records.

This project uses data pulled from the live database created for the above data project, to build charts live on a web page. The page uses Chart.js to create animated charts. Hovering your mouse over bars and or data areas reveals extra data.

Charts demonstrated are:

• Vertical bar chart
• Pie chart
• Polar area chart
• Doughnut chart
• Horizontal bar chart
• Line (stacked)

It uses PHP OOP code to convert data from a live query to valid data formats, necessary to build the javascript required for the charts.

This information would normally reside behind login functionality of your website to protect corporate data. However, as this uses fictional data and is for demonstration purposes, then this is made available to all visitors.

Coding challenge set by howtocodewell.net.

Entry is designed to a supplied brief for a battle royale type fighting game. This was written in JavaScript with the added challenge of not using any frameworks.

Code and instructions for the entry are at: Github repository

However the version on this site has been improved since the entry. The brief for the code challenge can be found at the foot of the page on the link, as can the instructions.

PHP/MySQL driven photo gallery organised into separate categories.

Also leverages the jQuery Fancybox plug-in to enable image browsing.

This is a live website, created from supplied images and text. The page is adaptive, incorporates a JavaScript-based carousel and a PHP input form for email contact with extensive email address validation.

JavaScript code to generate a set of test data made up of random contact names and company names.

The data is randomly generated from a selection of over 450 surnames and over 230 first names(male and female). Company names are generated by a combination of surnames or other names with 150 business types.

The data is output ready to be copied and pasted into a CSV file or into a spreadsheet.

A live area for testing different retro colour schemes on one interactive web page. A preset range of colours can be chosen from a set of colour schemes and auditioned live on the page. The hex values of the colours chosen are output on the page. The colour selections can be hidden to avoid interfering with the scheme chosen.

Uses JavaScript for live updating.

Demonstration of image editing skills needed in both web development and marketing.

Shows:

• Masking and transparency
• Cloning and restoration
• Histogram correction and image framing
• Implementation of drop shadow technique

Apart from the masking and transparency image examples, hovering your mouse over or tapping the images shows the image prior to correction.

HTML5 Canvas JavaScript sprite animation.

Just a side project for getting to grips with JavaScript animation and ECMAScript 2015 classes.

Uses a single sprite sheet for all graphical assets.

Sprites created in a style to imitate a ZX Spectrum home computer.

JavaScript tool to calculate audio delay settings in your digital audio workstation software or effects unit.

Also suggests a few calculated settings for use as pre-delay in your reverb.

Will allow you to change the number of decimal places in the results to match the expected values in your software.

PHP/MySQL driven news site / blog. Incorporates pagination for article navigation. Images are served for each preview and article.

This demonstration takes data stored on a live database and from it, generates a dynamic Excel workbook from user selected data.

This isn't just an ordinary data export. The code builds in Excel formulae into the workbook, which adjusts depending on the amount of data returned.

The code carries out the following:

• Formatting of headings
• Colouring of cells
• Automatic dynamic generation of formula
• Population of Excel file properties
• Dynamic creation of named ranges
• Formatting of cells
• Dynamic creation of cell borders
• Auto-width columns
• Auto creation of filename based on data selected

This is a JavaScript tool for finding a shade of colour between two given colours.

Use this for finding a middle ground colour between two similar colours that may differ greatly in shade.

Useful for when you need to introduce a new colour to your CSS design, but you don't want to stray too far from the colours already in use.

The script can automatically copy the new colour value to your clipboard, as either Hex or RGB values.

Homepage for the Gunthorpe Friendship club.

Page is adaptive to and changes to fit on different devices. Page uses a transparent overlay for text above an image. All text is scaled for accessibility purposes, as the page is likely to be read by older members of the community.

Embedded typefaces used, chosen for clarity.

Contains information regarding the EBL audio file format used in some synthesizers.

Includes details needed for converting the files to WAV format.

Page for searching for post town and postcode area, by inputting first part of UK postcode. Uses PHP with a MySQL database containing post town and postcode area tables.