HTML, CSS, JavaScript, jQuery UI, Bootstrap, Canvas, PHP, MySQL, Google Maps API’s, AJAX, JSON, jQuery Mobile, Social Widgets, Photo Shop.

My portfolio showcases the projects I have completed during my Web Development course.

Maths Website

A page created with HTML and CSS as an introduction to basic web design. This incorporates colour gradients, transitions and a change in font-size and weight when list items are hovered over.


Maths Game

A multiplication game for children. Created using HTML, CSS and JavaScript. The start button is hidden when clicked on and the Reset Game button is shown. Box-shadow has been used in the styling and there is animation when an answer is clicked on. A score box will increase by 1 for each correct answer and a hidden green box will be shown with the text ‘Correct!’ for 1 second before it is hidden again. Similarly for an incorrect answer, a red box will be shown for 1 second with the text ‘Try Again!’. A counter counts down from 60 seconds for the duration of the game. At the end of the game the container is covered by a div showing the message ‘Game Over! Your Score Is: ‘.


Fruit Slice Game.

An animated game with sound effects, using HTML, CSS and JavaScript. The start button is hidden when clicked on and the Reset Game button is shown. Images of fruit drop from the top of the container, hidden until they reach the top of the inner container. The user swipes to slice the fruit as they fall. If successful the sound effect plays and a function executes to show the fruit exploding and disappearing. A score box will increase by 1 for each success. If unsuccessful, one of the hearts in the top-left div, (representing lives) will be hidden. A counter counts down from 60 seconds for the duration of the game. The game will end either when the counter reaches zero or when all 3 lives have been used. At the end of the game the container is covered by a div showing the message ‘Game Over! Your Score Is: ‘.


App Landing Page

The landing page uses HTML, CSS, jQuery and Bootstrap. It is responsive for different device sizes. The jumbotron contains a logo, the title, two paragraphs and two buttons. The buttons are opaque until hovered over, and then transform to a solid colour. The trial images are linked to wikimedia.org.


Make An Awesome Website

A responsive website made using HTML, CSS, jQuery, Bootstrap and Google Fonts. When used on small and extra small devices, the navbar collapses and shows a toggle button with icon bars. When clicked on, this will show the list items floating to the left-hand side. The icons have been set in a Bootstrap grid system and will stack when the width of the screen decreases and return to a vertical line when the width increases. Each list item in the navbar includes a caret for a dropdown list. When hovered over, the text will change to white and a hidden green line will appear. The opaque green button will change to an opaque grey colour when hovered over and clicked on.


Our Lovely Course

A responsive web page made using HTML, CSS, jQuery, Bootstrap and Google Fonts. The background is a moving video which has been muted and set to autoplay on a loop. The navbar is fixed to the top of the page and collapses upon reduction of screen size, with a toggle button and icon bars which when clicked on, show the menu items floating to the left-hand side. The navbar is targeted with a data-spy, so the links will automatically update when the corresponding page is reached. In this case their background and text colours will change. The site contains a jumbotron, the Bootstrap grid system, a carousel with indicators and direction arrows and a footer.


Drawing App

An app to allow the user to draw on a canvas using different colours and brush sizes. It uses HTML, CSS, JavaScript, jQuery UI, Bootstrap, Canvas and localStorage. By clicking on the input container, a drop down of a colour palette will be shown, from which the user can change colour. Below this is the brush size, represented by the circle div which will increase and decrease in size corresponding to where the user slides the slider handle below. Below the canvas are three buttons which will allow the user to erase or save their drawing, or reset so the page loads again and shows a blank canvas. To save the drawing, a function will execute to check localStorage and set the item to save, otherwise an error message will appear. The buttons change colour and position when selected.


Stopwatch

An app using HTML, CSS, jQuery and Bootstrap. The app consists of 5 buttons, 3 of which are hidden on page load. When clicked on the buttons will change from an orange background with white text to a white background with orange text for 1 second. When the ‘Start’ button’ is selected, it will be hidden and the ‘Stop’ button will be shown. When ‘Stop’ is selected it will be hidden and the ‘Resume’ button will be shown. At the same time, the ‘Lap’ button will be hidden and the ‘Reset’ button will be shown. There are two counters set to hours: seconds: milliseconds. The large counter aligned to the centre is the main counter, whilst the smaller counter aligned to the top-right is the lap-counter. When the ‘lap’ counter is clicked on, the counter will go back to 00:00:00 and start again and the last lap-time will be printed at the bottom of the screen. The most recent lap-time will be shown at the top of the list.


Online Notes App

An app allowing the user to write notes online and save, edit and delete their notes. This app is made using CSS, HTML, Bootstrap, JavaScript, PHP, MySQL and AJAX. The user is required to sign up for this app and provide a username, password and email address. When the form is submitted there is an AJAX call to a PHP file which will check the user input for errors by cleaning and validating. It also checks the database for a duplicate record and send an error message if one or more is found. Otherwise, the password is hashed and an email sent to the user to validate their email address and include an activation link with an expiry date. When the user clicks the link to validate their email address, their information will be stored in the database. Other PHP pages work in a similar way if the user needs to reset their username, password or email address. The user has an option to mark a ‘Remember Me’ box. Their information from signup or any further changes, will be stored in a cookie sent to their system and stored in the database.


Speed Reader App for IOS and Android

An app to test the reading speed of the user. The app uses HTML, CSS, JavaScript, jQuery Mobile, Bootstrap and JavaScript. The reader will paste text into the top input and click on the button ‘Start Reading’, which will then be hidden and the ‘Pause’ button will be shown. The top input then changes to a “New’ button, which will reload the page for new text when clicked. When the ‘Pause’ button is clicked on, the ‘Resume’ button will be shown and the text is paused. The user can start reading again when the ‘Resume’ button is clicked on and then hidden with the ‘Pause’ button appearing. The text will appear on the screen one word at a time. The user can adjust the text size from 50px up to 100px by clicking and sliding the handle on the top-left slider. Also, they can adjust the reading speed from 50 words per minute to 600 words per minute, by clicking and sliding the handle on the top-right slider. The large slider beneath these is the progress slider and shows the percentage of text read corresponding to the reading speed.


Distance Between Cities App

A responsive app which allows the user to select a departure (origin) and a destination and find the travelling time and distance between the two. This uses HTML, CSS, JavaScript, Google Maps API’s, PHP, Bootstrap and jQuery. The map is centred on London on page load and will adjust to show the route between the input origin and destination. When the user starts to input an origin and a destination, an autocomplete form will drop down to allow for easy input. When the ‘Submit’ button is clicked on, the user will be shown the map with the route highlighted and a div advising of the distance in metric and the duration. This information is taken from the console log corresponding objects.