HiveBrain v1.2.0
Get Started
← Back to all entries
patternjavascriptMinor

Simplistic flash card web-app

Submitted by: @import:stackexchange-codereview··
0
Viewed 0 times
appflashcardsimplisticweb

Problem

Feedback I would love to hear: Since this is really my first real JavaScript app, being that I can never find a project I want to actually work on, I want to know how I can improve my JS techniques. Am I doing a good job separating logic? Am I using good techniques? Should I completely forget about vanilla JS and just go straight into using Jquery or other libraries? Is it good that I used the card manager as a literal? Anything and everything! I'd even appreciate some feedback on how I setup the html or if you would set it up a different way!

Any how, this is a snippet of what I have written so far, and you can find the source at https://ide.c9.io/lemony_andrew/flashcardapp

Here's the working demonstration: https://flashcardapp-lemony-andrew.c9.io/flashcard.html



`



Front:
Back:




French Demonstration





0/0




String.prototype.isEmpty = function() {// Returns if a string has only whitespace
return (this.length === 0 || !this.trim());
};

function Card(front, back){
/*A card is just a container that holds a front and back value!
- You can get either back or front by displaying it*/
this.frontVal = front;
this.backVal = back;

this.display = function(side){
if( side === 0 ){
return this.frontVal;
}else{
return this.backVal;
}
};
}

var cardsHandle = {
cards: [],
cardInd: 0,
cardButton: document.getElementById("cardButton"),
cardText: document.getElementById("cardText"),
cardTPosition: document.getElementById("positionIndex"),
cardSide: 0,

cardAdd: function(back, front){
this.cards.push( new Card(back, front) );
},

Solution

HTML:

-
Don’t use the center element or the align attribute. Both are obsolete in HTML5. Use CSS instead (e.g., text-align:center;).

-
Use label elements for your form fields (except for the submit buttons), e.g.:

Front:


-
You could (i.e., it’s not required) use a fieldset to group the elements of the form for creating new flashcards, and give them a name (e.g., "Create new flashard").

-
You could use article for each flashcard.

Accessibility:

  • Currently it doesn’t seem possible to use this web app with keyboard only. While you can create new flashards and navigate existing cards, you can’t reveal the back of a card. Possible solution: Add a "Flip" (or similar) button.

Context

StackExchange Code Review Q#78278, answer score: 2

Revisions (0)

No revisions yet.