demos.html

---
layout: page
title: Demos
permalink: /demos/
---

<div class="home">

  <h1 class="page-heading">Demos</h1>

  <table>
    <thead>
      <tr>
        <th scope="col">Name</th>
        <th scope="col">Brief</th>
        <th scope="col">Tech/Skills Used</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><a href="https://kiddhustle.github.io/test-fizz-buzz/" title="Click to view">FizzBuzz test</a></td>
        <td>React app created for a technical test with UK healthcare provider</td>
        <td>
          <ul>
            <li>ES6 JavaScript</li>
            <li>React</li>
          </ul>
        </td>
      </tr>
      <tr>
        <td><a href="https://github.com/kiddhustle/tests-exchange-rate-ui/" title="Click to view">Exchange rate MVP test</a></td>
        <td>React app created for a technical test</td>
        <td>
          <ul>
            <li>ES6 JavaScript</li>
            <li>React</li>
            <li>Jest</li>
          </ul>
        </td>
      </tr>
      <tr>
        <td><a href="https://kiddhustle.github.io/thomson-reuters-test/" title="Click to view">Olympic medals table app</a></td>
        <td>React app created as part of a technical test for a media company</td>
        <td>
          <ul>
            <li>Typescript/ES6 JavaScript</li>
            <li>React</li>
            <li>Cypress.io (e2e tests)</li>
          </ul>
        </td>
      </tr>
      <tr>
        <td><a href="/demos/freedom-countdown/" title="Click to view">Freedom countdown app</a></td>
        <td>An offline PWA (Progressive Web App) that helps me keep track of the days left on my tenancy...</td>
        <td>
          <ul>
            <li>JavaScript</li>
            <li>ServiceWorker</li>
            <li>Cache</li>
          </ul>
        </td>
      </tr>
      <tr>
        <td><a href="/demos/rock-paper-scissors/" title="Click to view">Rock Paper Scissors game</a></td>
        <td>A browser based Rock-Paper-Scissors game</td>
        <td>
          <ul>
            <li>JavaScript</li>
            <li>NodeJs</li>
            <li>CSS</li>
          </ul>
        </td>
      </tr>
      <tr>
        <td><a href="/demos/css/flexbox/" title="Click to view">Flexbox demo</a></td>
        <td>A task set to recreate a user interface with CSS3 Flexbox using an image as reference</td>
        <td>
          <ul>
            <li><i class="fi-css3 large" title="CSS3"></i>CSS3 Flexbox</li>
          </ul>
        </td>
      </tr>
      <tr>
        <td><a href="/demos/js/infinite-scroll/">Infinite scroll</a></td>
        <td>The client required infinite scroll functionality loading content dynamically from a JSON feed (in this case the feed is hard-coded).</td>
        <td>
          <ul>
            <li>Mustache</li>
            <li>CSS3 Animations / animate.css</li>
            <li>requirejs</li>
          </ul>
        </td>
      </tr>

      <tr>
        <td><a href="/demos/resizablechart/">Interactive Resizable Chart</a></td>
        <td>
          The client required an interactive bar chart/entry form with the following specifications:
          <ol>
            <li>Create a web page which displays a form with several text fields for entering data in two series (a bit like a spreadsheet).</li>
            <li>Once some data has been entered the user should be given the option to display the data as a simple bar chart</li>
          </ol>
        </td>
        <td>
          <ul>
            <li>CSS/Foundation</li>
            <li>Highcharts/Jquery</li>
            <li>KnockoutJS</li>
          </ul>
        </td>
      </tr>
    </tbody>
  </table>

  <p class="rss-subscribe">subscribe <a href="{{ "/feed.xml" | prepend: site.baseurl }}">via RSS</a></p>

</div>