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
<body>
<div id="newCards" >
<center>
Front:<input type="text" id="newFront" name="front"/>
Back: <input type="text" id="newBack" name="back"/>
<input value="Add" type="button" onclick="userEnter();"/>
</center>
</div>
<center><h1>French Demonstration</h1></center>
<div id="cardButton" ><p id="cardText"></p></div>
<p align="center">
<input type="button" id="prevCard" value="previous" onclick="cardsHandle.cardMove(-1);"/>
<span id="positionIndex">0/0</span>
<input type="button" id="nextCard" value="next" onclick="cardsHandle.cardMove(1);"/>
</p>
<script>
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) );
},
cardUpdate: function(){
var curCard = this.cards[ this.cardInd ];
this.cardText.innerHTML = curCard.display( this.cardSide );
this.cardTPosition.innerHTML = (this.cardInd+1)+"/"+this.cards.length;
},
cardFlip: function(){
this.cardSide = (this.cardSide + 1) % 2;
},
cardMove: function(moveBy){
this.cardInd += moveBy;
if( this. cardInd < 0 ){
this.cardInd += this.cards.length;
}
this.cardInd = this.cardInd % this.cards.length;
this.cardSide = 0;// Set back to front
this.cardUpdate();
},
cardTap: function(){
this.cardFlip();
this.cardUpdate();// Display card
}
};
cardsHandle.cardAdd("Hello or Good bye","Salut");
cardsHandle.cardAdd("Hello or Good Morning","Bonjour");
cardsHandle.cardAdd("Good Night","Bonne nuit!");
cardsHandle.cardUpdate();
var userEnter = function(){
var nFront = document.getElementById("newFront"),
nBack = document.getElementById("newBack");
if( nFront.value.isEmpty() || nBack.value.isEmpty() )
return;
cardsHandle.cardAdd(nFront.value,nBack.value);
nFront.value="";
nBack.value="";
cardsHandle.cardUpdate();
}
cardsHandle.cardButton.addEventListener('click', function(){ cardsHandle.cardTap();} );
</script>
</body>Program Overview: Basically I have 3 functions to my program. The container that just holds and displays the front and back values of a card. The second functionality is basically the card handler. It's purpose is basically to manage what is put on the screen, and how the index of cards is sorted/manipulated. The third functionality is simply having the user be able to add in cards.
Why I'm making this: I'm working on making a completely free and completely open-source flash-card web-app. The reason I'm making it is because I find that most flash card apps are not simple enough (just not enjoyable to work with), don't have a good folder (organizing) system, and are just not free. This is just the beginning of my application, and it will essentially be my first real JavaScript work. I don't normally use JavaScript, in fact it's been nearly 4 months since I touched it, so this is a good refresher for me and will hopefully be a part of my future portfolio. (I also hope it will be my foot in the door for bigger contributor communities like Github).
1 Answer 1
HTML:
Don’t use the
centerelement or thealignattribute. Both are obsolete in HTML5. Use CSS instead (e.g.,text-align:center;).Use
labelelements for your form fields (except for the submit buttons), e.g.:<label for="newFront">Front:</label> <input type="text" id="newFront" name="newFront">You could (i.e., it’s not required) use a
fieldsetto group the elements of the form for creating new flashcards, and give them a name (e.g., "Create new flashard").You could use
articlefor 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.