primaryobjects/busyStudents.js

## readme.md

      
    Raw
  

              readme.md
            
          
    Busy Students

A React component to calculate the number of students that are busy at a specific hour between two times.
Screenshot


## busyStudents.js
const busyStudent = (startTime, endTime, queryTime) => {
    let count = 0;

    // Iterate through the length of startTime.
    for (i in startTime) {
        // Increment count for each matching pair where startTime >= queryTime <= endTime.
        count += queryTime >= startTime[i] && queryTime <= endTime[i] ? 1 : 0;
    }

    return count;
};

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <script src="https://code.jquery.com/jquery.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser-polyfill.min.js'></script>
  <title>Busy Students</title>
  </head>
<body>
  <div class='container'>
    <h1>Busy Students</h1>
    <div id='root' class='container' />
  </div>
</body>
</html>

## script.js
// jshint esnext: true
const CommonManager = {
  busyStudent: (startTime, endTime, queryTime) => {
    let count = 0;

    // Iterate through the length of startTime.
    for (i in startTime) {
        // Increment count for each matching pair where startTime >= queryTime <= endTime.
        count += queryTime >= startTime[i] && queryTime <= endTime[i] ? 1 : 0;
    }

    return count;
  }
};

function MainContainer() {
  const { useState, useEffect } = React;
  const [count, setCount] = useState();
  const [startTime, setStartTime] = useState();
  const [endTime, setEndTime] = useState();
  const [queryTime, setQueryTime] = useState();

  const onStartTime = e => {
    setStartTime(e.target.value);
  }

  const onEndTime = e => {
    setEndTime(e.target.value);
  }

  const onQueryTime = e => {
    setQueryTime(e.target.value);
  }

  const onSubmit = e => {
    const startTimeArr = startTime.split(',').map(ch => parseInt(ch));
    const endTimeArr = endTime.split(',').map(ch => parseInt(ch));
    console.log(`${startTimeArr} ${endTimeArr} ${queryTime}`);
    setCount(CommonManager.busyStudent(startTimeArr,
                                       endTimeArr,
                                       queryTime));

    e.preventDefault();
  }

    return (
      <div id="main-container">
        <form>
          <div class='form-group'>
            <div class='row'>
              <div class='col'>
              <label for='start-time'>Start Time (1,2,3)</label>
              </div>
              <div class='col'>
                <input type='text' id='startTime' name='startTime' class='form-control' value={startTime} onChange={onStartTime} required></input>
              </div>
            </div>
          </div>
          <div class='form-group'>
            <div class='row'>
              <div class='col'>
              <label for='end-time'>End Time (3,2,7)</label>
              </div>
              <div class='col'>
                <input type='text' id='endTime' name='endTime' class='form-control' value={endTime} onChange={onEndTime} required></input>
              </div>
            </div>
          </div>
          <div class='form-group'>
            <div class='row'>
              <div class='col'>
              <label for='query-time'>Query Time (4)</label>
              </div>
              <div class='col'>
                <input type='text' id='queryTime' name='queryTime' class='form-control' value={queryTime} onChange={onQueryTime} required></input>
              </div>
            </div>
          </div>

          <div class='row'>
            <div class='col'>
              <button class='button-default' onClick={onSubmit}>Submit</button>
            </div>
          </div>
         </form>

        <div id='output'>
          <h2>{count}</h2>
        </div>
      </div>
    );
}

$(function() {
  ReactDOM.render(<MainContainer />, document.getElementById('root'));
});
	const busyStudent = (startTime, endTime, queryTime) => {
	let count = 0;

	// Iterate through the length of startTime.
	for (i in startTime) {
	// Increment count for each matching pair where startTime >= queryTime <= endTime.
	count += queryTime >= startTime[i] && queryTime <= endTime[i] ? 1 : 0;
	}

	return count;
	};
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<script src="https://code.jquery.com/jquery.min.js"></script>
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
	<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
	<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
	<script src='https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser-polyfill.min.js'></script>
	<title>Busy Students</title>
	</head>
	<body>
	<div class='container'>
	<h1>Busy Students</h1>
	<div id='root' class='container' />
	</div>
	</body>
	</html>
	// jshint esnext: true
	const CommonManager = {
	busyStudent: (startTime, endTime, queryTime) => {
	let count = 0;

	// Iterate through the length of startTime.
	for (i in startTime) {
	// Increment count for each matching pair where startTime >= queryTime <= endTime.
	count += queryTime >= startTime[i] && queryTime <= endTime[i] ? 1 : 0;
	}

	return count;
	}
	};

	function MainContainer() {
	const { useState, useEffect } = React;
	const [count, setCount] = useState();
	const [startTime, setStartTime] = useState();
	const [endTime, setEndTime] = useState();
	const [queryTime, setQueryTime] = useState();

	const onStartTime = e => {
	setStartTime(e.target.value);
	}

	const onEndTime = e => {
	setEndTime(e.target.value);
	}

	const onQueryTime = e => {
	setQueryTime(e.target.value);
	}

	const onSubmit = e => {
	const startTimeArr = startTime.split(',').map(ch => parseInt(ch));
	const endTimeArr = endTime.split(',').map(ch => parseInt(ch));
	console.log(`${startTimeArr} ${endTimeArr} ${queryTime}`);
	setCount(CommonManager.busyStudent(startTimeArr,
	endTimeArr,
	queryTime));

	e.preventDefault();
	}

	return (
	<div id="main-container">
	<form>
	<div class='form-group'>
	<div class='row'>
	<div class='col'>
	<label for='start-time'>Start Time (1,2,3)</label>
	</div>
	<div class='col'>
	<input type='text' id='startTime' name='startTime' class='form-control' value={startTime} onChange={onStartTime} required></input>
	</div>
	</div>
	</div>
	<div class='form-group'>
	<div class='row'>
	<div class='col'>
	<label for='end-time'>End Time (3,2,7)</label>
	</div>
	<div class='col'>
	<input type='text' id='endTime' name='endTime' class='form-control' value={endTime} onChange={onEndTime} required></input>
	</div>
	</div>
	</div>
	<div class='form-group'>
	<div class='row'>
	<div class='col'>
	<label for='query-time'>Query Time (4)</label>
	</div>
	<div class='col'>
	<input type='text' id='queryTime' name='queryTime' class='form-control' value={queryTime} onChange={onQueryTime} required></input>
	</div>
	</div>
	</div>

	<div class='row'>
	<div class='col'>
	<button class='button-default' onClick={onSubmit}>Submit</button>
	</div>
	</div>
	</form>

	<div id='output'>
	<h2>{count}</h2>
	</div>
	</div>
	);
	}

	$(function() {
	ReactDOM.render(<MainContainer />, document.getElementById('root'));
	});