Website Design

Animal Adoption Webpage

This was a personal project to teach myself new technologies. I wrote a webpage for an animal adoption charity.

The database is MongoDB with a NodeJS backend, running behind my Apache webserver. All the data is requested via an API over HTTPS with JavaScript. Edit access is protected via a login, with JWT.

In addition to the fontend, an Admin page had to be written for the owners of the charity to use, to add and update the animals. This includes a bulk change page for ease of use - to quickly update multiple animals records. A common case is for quickly reserving / unreserving lots of animals.

You can check it out here. The admin login is "guest" with the password "heathlands". Editing is disabled on the guest account.

CD Database - University Coursework

Our brief was to build a CD database frontend and backend. This included setting up a database with multiple components and interactions.

The frontend was written in PHP. Standard web development techniques were used, as well as a number of more advanced processes. The design is original, and written with no templates.

For excellent code maintanability, I wrote scripts to manage the HTML. These supports custom attributes, classes, unlimited content nesting and is extended for support self-closing elements. The form has a similar system, with built-in inputs including selectors, buttons and text / number input. The Album Art is provided by a company called Discogs. It is loaded after initial pageload for speed.

You can check it out here. Editing is disabled.

Monte Carlo Integration Demo - A Level Coursework

A small project for my A Level Computer Science Coursework. It demonstrates Monte Carlo Integration, an old integration technique

The frontend is written with standard web development techniques. The design is also original, and written with no templates.

A package is used to parse the entered equation - this is a surprisingly hard task. The graph plotting is written from scratch, however. This was made easier by preventing scrolling, and there being no need to show the negative half of the graph. The edges of the graph are set as 2 less and 2 more than the lower and upper limits.

The Wolfram Alpha API is used to get the correct (exact) answer and compare it to the calculated result.

You can have a go here. Note that a large number of Dots will freeze the browser.

Calculator

Another small project this time to teach myself jQuery. It was supposed to be nice and simple, and only take a couple of hours. It turns out that even basic calculator functions are complex to code.

The frontend is written with standard web development techniques. The design is based on the iOS calculator app, and the functionality is identical.

It uses a number of different techniques to work out how to behave. It classes the buttons into 3 groups - operators, commands and numbers. Operators are +, -, × and ÷. Commands are AC, C, =, ± and % - although ± and % are treated differently sometimes. And numbers are 0 to 9, and a decimal point.

While it seems simple, there's lots of edge cases, including:

• The sequence "1 +" should display 1, but "1 + 1 +" should display 2 - in this case + acts like an =.
• There's also accuracy issues with floating point numbers, which is why the calculator is limited to 9 decimal places. JavaScript supports 17 decimal places, but repeated calculations can start to compound errors.
• Pressing "10 + 20 %" should display 2 (20% of 10). Pressing = then displays 12. However, pressing "10 × 20 %" displays 0.2 (the decimal equivilent of 20%). Pressing = then displays 2.
• Finally some squences are a little unintuitive - "10 + =" should display 20. "10 × =" should display 100. Repeatedly pressing = should perform the previous sum on the new result (so "10 × = = = = =" displays 1,000,000).

You can try it out here.