public/do_assignment.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Assigned Assignments</title>
    <meta charset="UTF-8"/>
    <link rel="stylesheet" type="text/css" media="all" href="styles.css"/>
    <script>
        var skillList = "";
        var i = 0;

        function addSkill() {
            var skills = document.getElementById("addSkill").value;
            if (skills != "") {
                skillList += "<li><span name='skillItem' id='skillItem" + i + "'>" + skills + "</span> " +
                    "<a onclick='removeSkill()'>remove</a></li>";
                i++;
                document.getElementById("skill").innerHTML = skillList;
                document.getElementById("addSkill").value = "";
            }
        }

        function removeSkill() {
            skillList = "";
            var items = document.querySelectorAll("#skill li"), index, tab = [];
            for (var j = 0; j < items.length; j++) {
                tab.push(items[j].innerHTML);
            }
            for (var j = 0; j < items.length; j++) {
                items[j].onclick = function () {

                    index = tab.indexOf(this.innerHTML);
                    items[index].parentNode.removeChild(items[index]);
                    tab.pop(j, 1);
                };
            }
        }
    </script>
</head>
<body>
<div class="topnav">
    <a href="{{ url_for('home') }}">Home</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
    <div class="search-container">
        <form action="/action_page.php">
            <input type="text" placeholder="Search.." name="search">
            <button type="submit">Submit</button>
        </form>
    </div>
</div>

<article class="clock" id="model3">
    <h3></h3>

    <div class="count">
        <div id="timer"></div>
    </div>
</article>

<h1>Finish this Assignment</h1>

<img src="/Users/thomasclark/PycharmProjects/cfc-covid-19-video-transcriber-master/public/img/temporary.png">

<form id="upload" action="{{ url_for('submit_assignment') }}" method="POST" enctype="multipart/form-data">

    <label for="title">{{d["assignment_name"]}}</label> <br>
    <label for="title">{{d["assignment_text"]}}</label> <br>
    <input hidden name="id" value={{d["_id"]}}>

    <a href={{d["assignment_skill"]}}> {{d["assignment_skill"]}} </a>

<!--    {% for skill in d[assignment_skill] %}-->
<!--    <ul>-->
<!--        <li>{{skill}}</li>-->
<!--    </ul>-->
<!--    {% endfor %}-->

    <br><br>

<!--    {% for i in d[assignment_attachments] %}-->
<!--    {% endfor %}-->

    <br><br>
    <!--    <label id="title" name="title" >Placeholder for now<br><br>-->

    <!-- <textarea rows="4" cols="50" name="comment" form="upload">
Assignment description...</textarea><br><br> -->
    <label for="startDate">Finish this assignment by: {{ d["assignment_duedate"] }} </label> <br> <br>
    <!--        <input type="date" name="Startdate" id="startDate"><br><br>-->
    <!--        <label for="startDate">End date:</label>-->
    <!--        <input type="date" name="Enddate" id="endDate"><br><br>-->
    <label id="completed" name="completed">Check this checkbox if the assignment is completed: </label>
        <input type="checkbox" name="chk-box-completed">
        <br><br>

        <fieldset>
            <legend>Uploads</legend>

            <input type="hidden" id="MAX_FILE_SIZE" name="MAX_FILE_SIZE" value="300000"/>

<!--            <div>-->
                <label for="fileselect">Files to upload:</label>
                <input type="file" id="fileselect" name="fileselect[]" multiple="multiple"/>
                <div id="filedrag">or drop files here</div>
<!--            </div>-->

<!--            <div id="submitbutton">-->
<!--                <button type="submit">Upload Files</button>-->
<!--            </div>-->

        </fieldset>
  </form>

<div id="messages">
</div>

<script>
    var sec         = 1500,
        totalTime = 1500,
        countDiv    = document.getElementById("timer"),
        secpass,
        countDown   = setInterval(function () {
            'use strict';

            secpass();
        }, 1000);

    function secpass() {
        'use strict';

        var min     = Math.floor(sec / 60),
            remSec  = sec % 60;

        if (remSec < 10) {

            remSec = '0' + remSec;

        }
        if (min < 10) {

            min = '0' + min;

        }
        var saying = " till break!";
        if(totalTime == 5){
            saying = " till back to work!"
        }
        countDiv.innerHTML = min + ":" + remSec + saying;

        if (sec > 0) {

            sec = sec - 1;

        } else {

            clearInterval(countDown);
            if(totalTime == 5){
                alert("Focus for 25 min")
                var h3 = document.getElementsByTagName("h3");
                h3[0].innerHTML = "Countdown Timer With JS";
                sec         = 1500,
                    totalTime =1500,
                    countDiv    = document.getElementById("timer"),
                    secpass,
                    countDown   = setInterval(function () {
                        'use strict';

                        secpass();
                    }, 1000);

            } else {
                alert("Take a 5 min break :)")
                var h3 = document.getElementsByTagName("h3");
                h3[0].innerHTML = "Countdown Timer With JS";
                sec         = 300,
                    totalTime = 300,
                    countDiv    = document.getElementById("timer"),
                    secpass,
                    countDown   = setInterval(function () {
                        'use strict';

                        secpass();
                    }, 1000);
            }

        }
    }

</script>

<input type="submit" value="Submit" form="upload" id="submit">
<!--<script src="filedrag.js"></script>-->

</body>
</html>