patternjavascriptMinor
Simplistic flash card web-app
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) );
},
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
-
Use
-
You could (i.e., it’s not required) use a
-
You could use
Accessibility:
-
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.