JSFiddle - React, Tailwind, and code Playground

by xonev

HTML

<h2>0000</h2>
<h1 id='bonus' style='display:none;'></h1>
<h1 id='score' style='display:none;'></h1>
<ul>
    <li><input type='text' value='Problem' class='name' />
        Time: <span class='time'>0:00</span>
        <button class='add'>Add Sub-problem</button>
        <button class='complete'>Completed</button>
        <ul>
        </ul>
    </li>
</ul>

CSS

h2 {
    font: bold 20pt sans-serif;
    margin: 10px;
    display: inline;
}

h1 {
    font: bold 20pt sans-serif;
    color: red;
    display: inline;
}

ul {
    margin-left: 10px;
    list-style: circle inside;
}

JavaScript

try {
    var problems, completedProblems, template, Problem, score = 0,
        addToScore;

    template = $('ul li').first().clone();

    Problem = function($element) {
        var self = this;
        this.time = new Date();
        this.name = 'Problem';
        this.isCompleted = false;
        this.$element = $element;
        this.subproblems = [];
        this.score = 0;
        window.setTimeout(function() {
            self.updateTime();
        }, 1000);
        this.$element.children('button.add').click(function() {
            self.addSubproblem(new Problem(template.clone()));
        });
        this.$element.children('button.complete').click(function() {
            self.complete();
        });
    };

    Problem.prototype.addSubproblem = function(problem) {
        this.subproblems.push(problem);
        problems.push(problem);
        problem.$element.hide();
        this.$element.children('ul').append(problem.$element);
        problem.$element.fadeIn();
    };

    Problem.prototype.updateTime = function() {
        var self = this;
        var currentTime = new Date();
        var timeDiff = currentTime - this.time;
        var seconds = Math.floor((timeDiff / 1000) % 60);
        var minutes = Math.floor((timeDiff / 1000 / 60));
        this.$element.children('span.time').text(
        minutes + ':' + seconds);
        if (!this.isCompleted) {
            window.setTimeout(function() {
                self.updateTime();
            }, 1000);
        }
    };

    Problem.prototype.complete = function() {
        var currentTime = new Date();
        var timeDiff = currentTime - this.time;
        this.score = Math.ceil(timeDiff / 100) * 100;
        this.isCompleted = true;
        addToScore(this);
        completedProblems.push(this);
    };

    addToScore = function(problem) {
        var averageScore, totalScore = 0,
            i, bonusScore, baseScore = 1000;
        if (completedProblems.length === 0) {
            averageScore =...