Home

Web Exhibit

Description

Purpose

To help people learn HTML and CSS by example.

Functionality

• Fuzzy Search for HTML Tags and CSS Properties From the homepage users can immediately search for HTML tags or CSS properties. The search menu implements fuzzy search and is completely navigable using arrow keys and the enter key. A smaller search menu implements the same functionality on the navigation of every page.

• exhibit page

  • add an exhibit
  • view exhibits

• exhibits

  • codemirror editor
  • favorite star (doesn't save anything yet)

• Register & Login Users who wish to mark certain exhibits as their favorites may register for an account or login if they already have an account on the login and registration page.

Database Schema

Collection

A collection represents a single HTML tag or CSS property and its examples.

{
    _id: "5661efa77648c1a3115bce54",
    title: "background",
    summary: "a shorthand for setting the individual background values in a single place in the style sheet.",
    category: "css",
    exhibits: [{
        _id: "5668d7a24c3d3f94101e3492",
        title: "Green Background",
        code: "<div style='background: green;'></div>"
    }]
}

Fields
title - a string representing the title of the collection, e.g. '<div>' or 'margin'
summary - a string representing a brief description of the collection
category - a string representing the type of collection, e.g. 'css' or 'html'
exhibits - an array of exhibit objects associated with the collection

Exhibit

An exhibit is a code snippet that demonstrates a specific HTML tag or CSS property in action.

{
    _id: "5668d7a24c3d3f94101e3492",
    title: "Centered Text",
    code: "<div style='text-align:center;'>Centered Text</div>"
}

Fields
title - a string representing the title of the exhibit, e.g. 'Simple Flexbox Layout'
code - a string representing the raw code of the exhibit

User

A User represents someone using the site.

{
    "_id": "5669b57f537c1dd01ad06a7e",
    "username": "johnsmith",
    "name": "John Smith",
    "password_hash": "$2a$10$rDY/n5/ftpgQiyaHE0HrOufHSG02L0PxkrKMcLHfrGCzgRNvG/4iy"
}

Fields
username - a string representing the username
name - a string representing the user's preferred name
password_hash - a string representation of a hashed and salted password

Future work

• hook up favorites to the back end
• fix navbar contrast
• get user login fixed
• add UX flow for when users submit new proposals. No response after submit click right now
• allow users to add proposals for collections that already have one exhibit
• screenshots to the wiki