Web Development Projects Portal

Whisky Tasting Notes UI

Conversational UI

An exploration into collecting user input in a more "conversational" style

Concepts Incorporated:
Javascript
  • DOM Manipulation
  • Fetch API
  • Consuming JSON data to build UI Elements
  • ES6 modules/imports
  • User Input Sanitization
  • Intersection Observer Styling
  • Query String Manipulation
  • Date Object handling
HTML/CSS
  • Semantic Markup
  • Responsive Design
    • Media Queries
    • Relative Units i.e. vw, rem, ch
    • Fluid Type
    • SVG symbols
  • Accessibility through aria attributes
  • CSS Transitions
  • CSS Custom Properties
  • CSS Grid & Flexbox
  • Cross-Browser CSS

Touch optimized input

An exploration into reducing keyboard reliance by providing touchable fragments and range sliders for numeric entry

Concepts Incorporated
  • Responsive layout
  • CSS Custom Properties
  • CSS Grid & Flexbox

Drag drop keywords

An exploration into reducing keyboard reliance by providing keywords that can be drag-dropped into text fields

Concepts Incorporated:
Javascript
  • DOM Manipulation
  • Fetch API
  • Consuming JSON data to build UI Elements
  • ES6 modules/imports
  • User Input Sanitization
  • Query String Manipulation
  • Date Object handling
  • Drag Drop API Events
HTML/CSS
  • Semantic Markup
  • Responsive Design
    • Media Queries
    • Relative Units i.e. vw, rem, ch
    • Fluid Type
    • SVG symbols
  • HTML5 Drag Drop API Markup
  • Accessibility through aria attributes
  • CSS Transitions
  • CSS Custom Properties
  • CSS Grid & Flexbox
  • Cross-Browser CSS

Task Manager

React Task Manager (WIP)

UI implementation in React.js

Concepts Incorporated
  • Reusable Component Architecture
  • Context API state management
  • Responsive layout