Web Projects




Hi, I'm Danny Brien and welcome to my website.

I am based in Peterborough, Cambridgeshire.

The web projects listed below serve as a demonstration of data manipulation, querying, analysis, image editing and web-based skills. Descriptions are included below each page listed to highlight key areas demonstrated and functionality. Click on the relevant screenshot or link to see the respective live project.


Demo Shop

Demo Shop screenshot


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.






Demo Shop link

Data Project

Data Project screenshot


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.


Data Project link

Formidable Foes

Formidable Foes screenshot


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.


Formidable Foes link

Annual Leave Application

Annual Leave Application screenshot


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.


Annual Leave Application link

Operator Licence Search

Operator Licence Search screenshot


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.


Operator Licence Search link

Shruthi Synth

Shruthi Synth screenshot


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.


Shruthi Synth link

Excel Snippets

Excel Snippets screenshot


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.


Excel Snippets link

Scratchpad

Scratchpad screenshot


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

Scratchpad link

Codeword Solver

Codeword Solver screenshot


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.


Codeword Solver link

Data Visualisation

Data Visualisation screenshot


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.



Data Visualisation link

Bootstrap Template

Bootstrap Template screenshot


A test Twitter Bootstrap template containing examples of available components.
The page includes:

  • Responsive navbar menu
  • Jumbotron
  • Cards with images
  • Carousel
  • Webform

Bootstrap Template link

Post Town Finder

Post Town Finder screenshot


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.


Post Town Finder link

Photo Gallery

Photo Gallery screenshot


PHP/MySQL driven photo gallery organised into separate categories.

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


Photo Gallery link

Elite Care

Elite Care screenshot


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.


Elite Care link

Test Data Generator

Test Data Generator screenshot


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.


Test Data Generator link

Retro Colour Scheme

Retro Colour Scheme screenshot


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.


Retro Colour Scheme link

Image Work

Image Work screenshot


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.



Image Work link

Sprite Animation

Sprite Animation screenshot


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.



Sprite Animation link

Audio Delay Calculator

Audio Delay Calculator screenshot


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.



Audio Delay Calculator link

News Spot

News Spot screenshot


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


News Spot link

Bootstrap Blog

Bootstrap Blog screenshot


PHP/MySQL driven blog using an adaptive Twitter Bootstrap template. These pages incorporate different pagination to the previous news/blog site. Functionality added for the search of articles by month. PHP input is generated via links, therefore all user input is validated before articles are served.


Bootstrap Blog link

Export to Excel

Export to Excel screenshot


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

Export to Excel link

Middle Colour Finder

Middle Colour Finder screenshot


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.


Middle Colour Finder link

Friendship Club

Friendship Club screenshot


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.


Friendship Club link

EBL Audio Files

EBL Files Screenshot


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

Includes details needed for converting the files to WAV format.

EBL Audio Files link

Bootcamp Examples

Bootcamp examples image


Some examples of work produced in the TE Bootcamp course.

Bootcamp Examples link

Danial Brien - 2023