JSFiddle - React, Tailwind, and code Playground

by the_archer

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>ELE</title>
<link rel="stylesheet" href="" />
<script src=""></script>
</head>
<body>

    <div id='header'>       
        <h1 id='title'>ELE</h1>
        <ul id='mainnav'>
            <li>link 1</li>
            <li>link 2</li>
            <li>link 3</li>
        </ul>
    </div>
</body>
</html>

CSS

body {margin: 0.5em;}
#title{float:left;}
#mainnav{float:right;}
#mainnav li {display: inline;}

JavaScript

//Back-End As An Object

function ELE() {

    var deckStack = [];
    var defaultDeckID = null;

    localStorage.clear(); //Enable To Reset Unique Deck IDs
    this.createDeck = function(deckName) {
        deckStack.push(new Deck(deckName, generateUniqueID("uniqueDeckID")));
    };

    this.getNumberOfDecks = function() {
        return deckStack.length;
    };

    this.getDeckStack = function() {
        return deckStack;
    };

    this.setDefaultDeckID = function(deckID) {
        defaultDeckID = deckID;
    };

    this.getDefaultDeckID = function() {
        return defaultDeckID;
    };


    function Deck(deckName, generatedDeckID) {

        var deckID = generatedDeckID;
        var cardStack = [];

        this.addCard = function(orderNumber, question, answer, nextReviewDate) {
            cardStack.push(new Card(generateUniqueID("uniqueCardID"), orderNumber, question, answer, nextReviewDate));
        };

        this.getNumberOfCards = function() {
            return cardStack.length;
        };

        this.getCardStack = function() {
            return cardStack;
        };

        this.getDeckID = function() {
            return deckID;
        };

        this.getDeckName = function() {
            return deckName;
        };

        function Card(ID, orderNumber, question, answer, nextReviewDate) {
            var cardID = ID;
            var cardOrderNumber = orderNumber;
            var cardQuestion = question;
            var cardAnswer = answer;
            var cardNextReviewDate = nextReviewDate;

            this.getCardID = function() {
                return cardID;
            };
        }
    }
    //Common Functions

    function generateUniqueID(typeOfID) {
        var lastGeneratedID = parseInt(localStorage.getItem(typeOfID));
        if (isNaN(lastGeneratedID)) {
            localStorage.setItem(typeOfID, 0);
            return 0;
        }
        else {
            localStorage.setItem(typeOfID, lastGeneratedID + 1);
      ...