chocobuckle Goto Github PK

animal-trading-card

Udacity basic HTML/CSS project.

animate-components

✨ Elemental components for doing animations in React

api-course

Course material for the 'Google Maps APIs' course, by Udacity.

browser-rendering-optimisation

A browser rendering optimisation, submitted as a project for the Udacity Front-End Developer Nanodegree program.

cat-clicker-knockout

cat-clicker-vanilla

coderbyte-questions

My answers to questions on Coderbyte.com

expensify

React/Redux app, built while studying Andrew Mead's course on Udemy.

google-maps-api

A fork of Google Maps API I locked at v3.30. For use in my 'Atlas Of Remote Islands' project.

jasmine-bdd

This project demonstrates my ability to write effective tests against a pre-existing application using the Jasmine BDD framework. Submitted as a project for the Udacity Front-End Developer Nanodegree program.

jest-tests

This project demonstrates my ability to write effective tests against a pre-existing application using Jest and newly released React Testing Library from Kent C. Dodds.

john-hopkins-course

John-Hopkins-Course

nanodegree-certificate

My Udacity Front-End Web Developer Nanodegree Certificate

optimisation

A website performance and browser rendering optimisation, submitted as a project for the Udacity Front-End Developer Nanodegree program.

performance-optimisation-before

preload-webpack-plugin

A webpack plugin for injecting <link rel='preload|prefecth'> into HtmlWebpackPlugin pages, with async chunk support

qs-google-signature

QS wrapper which Autodetects signature parameter and replace it with a signature according to https://developers.google.com/maps/documentation/business/webservices/auth#digital_signatures

question1a

Solution to question 1A, if you interpret the divs to have a parent/child relationship. I attached an event listener to the wrapper parent of the 3 divs and then took advantage of event bubbling to check a custom data attribute on 'e.target' to identify which div is clicked.

question1b

Solution to question 1B, if you interpret the divs to have a sibling relationship but are relatively positioned over one another. I attached an event listener to the wrapper parent of the 3 divs and then took advantage of event bubbling by checking for 'e.target.innerText' to identify which div was clicked.

question2

Solution to question 2, done with CSS Flexbox and appropriate media queries. I also added a toggle switch to show/hide the inner flexible grid. The cells and inner cells are all created/deleted dynamically, either on page load or in response to a user toggling a switch.

question3

Solution to question 3, the note taking app. Hopefully the Vectra themed UI gets me some brownie points! :)

react-github-battle

A single-page application showcasing my knowledge of React, React Router, Webpack, ES6, and the Github API.

react-multi-carousel

A lightweight production-ready Carousel that rocks supports multiple items and server-side rendering with no dependency. Bundle size 2kb.

react-native-pomodoro

react-native-snippets

:pencil2: A collection of React Native snippets for Sublime Text and Atom

react-progressive-web-app

A progressive web app built with React.

react-template

My basic Babel, Webpack, and React template.

react-weather-app

A single-page application demonstrating my knowledge of React, Styled Components, React Router 4, ES6/7, making AJAX requests with Axios, the Open Weather API, Google Places API, and SVG images.

redux-dukr

A Twitter clone showcasing my knowledge of React, Redux, Firebase, Styled Components, Facebook authentication, React Router 4, ES6, and Webpack.

redux-polls