3
\$\begingroup\$

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).

\$\endgroup\$
2
\$\begingroup\$

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.:

    <label for="newFront">Front:</label> <input type="text" id="newFront" name="newFront">
    
  • 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.
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.