celinenguyen / typeface-grid-game Goto Github PK

Intended feature: A 'Refresh' button that, when clicked, will replace the current displayed characters with randomized new ones. The intention was to store each character class in a JSON file, load it in, select particular classes for the initial display, and subsequently pull random classes from the JSON file and replace the DOM elements accordingly.

Status of feature:

• made JSON file of uppercase & lowercase character classes (and added CSS classes, although they don't have positioning information)
• can load in JSON file in Javascript

Current issue:

• I don't understand the nature of Javascript's async
• unsure if JSON file properly loaded and stored as an accessible array into variable
• if it is, probably need to have replacing function done as a callback inside the $.json

At some point (which should be determined), have quotes under characters instead of factoids? Maybe every time you uncover it something new happens? Or is that too disruptive? Display quotes elsewhere on the page?

Add information about the assignment to the footer, and link to this Github repo.

As suggested by Dan in class today—change factoid text so it's more compact/cropped, have it the same size as the <h3>, keep it bold to mirror the text of the letterforms?

Write up what the assignment parameters were, provide general context, explain solution and usage.

Currently, each character is declared in the markup as follows:

<div class="character" id="one">
    <div id="lowercase-a">a</div>
</div>

I'd prefer the information for what character is in each .character > div to be stored inside the CSS, to make it easier to add different characters in.

Sometimes I feel "sort of blue" and the typeface grid game doesn't seem to have any effect. I tried refreshing but it was basically the same and I was still exhibiting "sort of blue" feels.

Enhancement: each grid square will have the character there animate in some way (blurring out and in? spinning? fading in and out? changing to an italic? changing weights? superimposing different weights?) as suggested by Dan Boyarski.

Potential issues: need to separate the interaction for moving a grid square versus playing with the grid square itself.

When changing the weights/style of character squares, the .inverted class gets cleared. It's a bit visually disruptive.

This is a two-part feature expansion:

1. Add styling for all interesting/beautiful/idiosyncratic characters of Helvetica Neue, and declare appropriate display offsets in all.css.scss (or separate out into a characters.css.scss file?).
2. Write the Javascript to replace current characters with new ones. I'm thinking now this could be done by a YAML file with a list of all character IDs that could be picked from?