CSS examples

Description

Pure CSS. Change width, will change layout.

Status - To sort out of over lap in boxes

Description

A clone of the Google homepage

Done - Content filled in, no css

Description

Using plain javascript, to interact with the DOM. Allows user to click on a colour and change the background colour

Future ideas

• Field input, type in colour and then change background

Description

Can drag a box from one panel to the other. Can only drag one box into bottom panel, if panel 2 contains a box, you cannot move a box into it. Can move box back to panel 1

Future ideas

• Multiple choice question, when user solution is dragged to box, tells user if correct
• Can swap the boxes in panel one, instead of going to the end

Description

Implementation of a front end, single page app in pure javascript. Can Add, delete, edit and view tasks.

Future ideas

• To add a check box to complete or uncomplete tasks

Description

Implementation of a front end, single page app in pure javascript. Where a user can input a city and find the top 20 most popular attractions.

This app uses an AJAX request to get data from the foursquare api and manipulate it to show on the browser.

Future ideas

• To tests the site
• Add more styling
• Add more search options
• use promises instead of callbacks

Description

Implementation of a debounce function when scrolling through page.

Call function to output the percentage of the screen after time delay, thus reducing the number of the times a function is called when an event is triggered.

Future ideas

• To tests the function
• Add more styling and clean up css
• Another example with mouse move and resize
• three columns to show everything

Description

Implementation of a retail online shop created via test driven.

This is an online shop, which can display stock, add or remove items to the shopping cart, show total of cart, and apply discount vouchers.

This is a single page application built using pure javascipt (no frameworks). It is only front end, and has no persistence of data (changes to stock are not recorded).

This was created using test driven development, with the testing framework of Jasmine.

Future ideas

• Styling of site
• Make it responsive
• Have a pay button, to clear cart and keep the stock updated
• Refactoring the promotional rules logic from the Shop object(controller is too fat)
• Refactor tests
• reset vouchers if item has been removed from cart and conditions for voucher false