JSFiddle - React, Tailwind, and code Playground

by rahulr

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>HTML Learnings</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <!-- <script src="roman.js" type="module"></script> -->
    <script src="app.js" type="module"></script>
    <style>
        div {
            padding: 4px;
            margin: 6px 0px;
        }
        input, select, textarea{
            line-height: 200%;
        }
    </style>
</head>
<body>
    <section>
        <article>
            <header>
                <h3>Temperature variation finder</h3>
                <div class="meta">
                    By Rahul Rathore
                </div>
            </header>
            <section>
                <fieldset>
                    <legend>My form</legend>
                    <form>
                        <div>
                            <label>
                                From:
                                <input id="fromDate" type="date" accesskey="s" placeholder="dd-MMM-yy" style="width:20%; margin-bottom: 10px; margin-left: 10px;">
                            </label>
                            <br>
                            <label>
                                To:
                                <input id="toDate" type="date" accesskey="e" placeholder="dd-MMM-yy" style="width:20%;margin-left: 26px;">
                            </label>
                            <button id="processBtn" type="button" value="Process"  style="width:10%;line-height: 2em;">Process</button>
                        </div>
                        <div>
                            <label>
                                Output:
                                <output id="answerOutput" type="text">
                            </label>
                        </div>
                    </form>
              ...

JavaScript

//import {Roman} from './roman.js'
//import { GlobalDefinitionStatement } from "./define-globals-statement.js";

var data = [
    {from:new Date("01/01/2018"), to: new Date("02/28/2018"), avgTemp:32, sensor:1 },
    {from:new Date("01/15/2018"), to: new Date("02/28/2018"), avgTemp:35, sensor:2 },
    {from:new Date("02/15/2018"), to: new Date("03/05/2018"), avgTemp:36, sensor:3 },
    {from:new Date("03/01/2018"), to: new Date("04/30/2018"), avgTemp:30, sensor:4 },
]
function subsetOfEntries(startDate, endDate) {
    var breakedReadings = [];
    for(let i=0; i<data.length; i++){
        var reading = data[i];
        var nextReading = data[i+1];
        var from, to, temp;
        if(nextReading && reading.to >= nextReading.from){
            from = reading.from,
            to = nextReading.from,
            temp = reading.avgTemp;
        } else{
            from = reading.from,
            to = reading.to,
            temp = reading.temp;
            i = i === (data.length-1)? i: i - 1;
        }
        breakedReadings.push({from:from, to:to, avgTemp: temp});
    }
    return breakedReadings;
}
function getBatch(startDate, foundElms){
    var batch = {};
    var startEl = foundElms[0];
    startEl.from = startDate;
    return foundElms.reduce(function (prevVal, item) {
        debugger;
        if((item.from >= startDate && item.to > startDate) 
            && item.from <= prevVal.to
            && item.avgTemp > prevVal.avgTemp){
                if(prevVal.to > item.from){
                    prevVal.to = item.from;
                    return prevVal;
                }
                if(prevVal.from <= startDate){
                    return prevVal;
                } else{
                    return item;
                }
        }
        return prevVal;
    }, startEl)
}
function Process(from, to) {
    var batches = [];
    var subset = subsetOfEntries(from, to);
    var batch = getBatch(from, subset);
    batches.push(batch);
    var count = 1;
   ...