Creative Designs Toronto

Assemble your team champion! Select a hero for each position, and then click "share". A link will be copied to your clipboard containing all the relevant information as URL parameters. The information is parsed upon each visit. Build with CSS Grid.

This project utilizes the Bulma frontend framework, along with CSS Grid, to emulate the official Tesla roadster webpage.

Dynamically adjust a list of Twitch streams, filtering them by game type, or name. Add new channels to the list. See which channels are live, and which are offline. JavaScript utilizes Twitch's API to make AJAX requests. This app uses the Foundation front-end framework, along with jQuery, to style, manipulate, and generate DOM elements. Originally a project for freeCodeCamp, I extended the project to include filtering features and animations.

Designed and built in two days at a hackathon, the challenge was to bring technology & retail together, thereby improving Yorkdale's various growth metrics. Our team decided to focus on increasing mall dwell time and catering to "superior shoppers". To address both of those ends, we present The Yorkdale Experience: a directory web app that collects data on shoppers, identifies superior shoppers, and then markets to those shoppers exclusive high-end merchandise only available at Yorkdale.

A small project testing the Bulma front-end framework.

A responsive blog prototype built with the Bulma framework.

A react.js project on egghead.io, this form automatically updates across different element types upon user input. Write "grapes" and grapes are selected. Select apples, and "apples" is written. This was good practice for event handling, setting state, and manipulating arrays.

This is a simple project I put together following a React tutorial. Initially, a custom JSX component was built, and provided props like HTML attributes. However, this was changed to providing state within the custom "StopWatch" class., prior to the render method being invoked It was a good, short learning experience from egghead.io

Another small project taught by egghead.io. Here, we have a form that changes its state in real-time, and alerts the user of missing, required values.

A simple javascript calculator. I leverage tachyons and tilt.js to add responsiveness and on hover styles.

A responsive and mobile-friendly layout utilizing Bootstrap and Font-Awesome. Toggle-able hamburger icon replaces navigation elements at smaller screen sizes. High level of customization can been seen through aesthetic modification of navigation elements upon resizing.

A memory-assist application designed to help users both test short-term memory and remember important pins. Recursion enables an array holding keypad values to be randomized and then passed to a function that problematically and dynamically creates divs with the corresponding array value. Colour classes are randomized in a similar fashion and added to the divs. Randomization is optimized via the Fisher-Yates shuffle technique.

Select a type of extraterrestrial object, name it, and provide an altitude. I do the rest and bring your creation to life. Have fun building a mini-solar system with this app! Through user input, an array of Objects are created with the following keys: type, name, and average altitude. Divs with images are then dynamically generated, and the values of the object's keys are accessed to appropriately reflect all three attributes appropriately.

Adjust the values of "border", "blur", and "colour" all on the fly with the user interface. Implements JavaScript and CSS.

Ticking clock featuring hour, minute, and second hands. Animation achieved through JavaScript and CSS.

A full keyboard drum kit, built and animated with JavaScript & CSS. Select any of the given keys and hear the corresponding sound!

Recursive programming in JavaScript enables this app to take a given string and return it's maximum possible permutations. Use the checkbox to remove all duplicate permutations from the calculation. Implements bootstrap modals.

Enter any word into the search bar, and this page will return to you the top 5 most relevant Wikipedia articles. Javascript utilizes MediWiki's API to make AJAX request.

Display's local weather conditions. C/F toggle. Uses http API (forismatic.com), so "unsecured scripts" must be allowed to run before app can work.

Display's local weather conditions. C/F toggle. Uses http API (openweathermap.org), so "unsecured scripts" must be allowed to run before app can work.