Category Archives: UI/UX

Quiz App

This is a yoga quiz app with back end database storage, written in vanilla JS,  PHP, AJAX and of course, HTML and CSS.

The code can be found at: https://github.com/SeanKelly369/WebDev

The images were provides by:

Learn Yoga Poses with Yogacards by Mark Giubarelli

PHP CRUD UI

For CS230 Assignment 3, using PHP, MySQL and PHPMyAdmin we were to create a CRUD, with bonus point going for the undo feature.  I got the CRUD working fine and saw tutorials for including the undo, it would have required rewriting the entire PHP code into an object and wrapping the binding into a transaction block.  With time being limited, I chose to spend it working on the team project, which has since progressed quite well. Everything else works perfectly, including the dates drop down, the language and type drop downs, and the submit, update and delete buttons.  When the grades are published I’ll upload the code, CSS included onto github.

Below is a work in progress of the product information UI.  I have it working dynamically, added a customisable jQuery plugin for a vertical scrollbar and have tabs animate on hover.  I used a CSS Grid layout with a nested grid for the soon to be thumbnail images on the left.  When it’s finished it’s going to look great :).

Cozmet

A team project for the course I’m attending, HDip Level 8 PostGrad in Computer Science, Software Development.  One member is putting her time and energy into the backend while we agreed I’d work on the frontend.  The other two members are working on the Google map API and get product info page respectively.  With Firebase working, authentication and uploading of member details to and from the firebase database, it is starting to take shape.  The top and bottom are made, now the the middle had to be worked on.  The website can be viewed at www.cozmet.net .


CS230 Assignment 2

This was written in pure javascript, we weren’t allowed to use jQuery and it helped me gain an understanding of how the DOM worked and how to save and retrieve cookies.  It worked out to around 450 lines of code, including some of the attempted extra features I ran out of time to get running.  Click the link to view the video in a new page.  As soon as the grades are posted I can show the code on github at https://github.com/SeanKelly369

CS_230_Assignment2