Sum time notes

by Csaba Hellinger

HTML

<button id="paste" class="button">Paste</button>
<button id="copy" class="button">Copy</button>
<textarea id="input"></textarea>
<div class="bottom">
  <span id="result"></span>
  <span class="label">Hours left:</span>
  <span id="left"class="value"></span>  
</div>

CSS

html, body {
  margin: 0;
  background: #333;
}

body {
  padding: 1rem;
  font-family: Helvetica, sans-serif;
  font-size: 20px;  
}

#input {
  width: 100%;
  min-height: 3rem;
  height: auto;
  font-family: monospace;
  background-color: #222;
  color: #ddd;
  border: none;
  outline: none;
}

.button {
  -webkit-appearance: none;
  margin-bottom: 1rem;
  padding: 0.3rem;
  background-color: skyblue;
  color: #222;
  border: none;
  outline: none;  
  font-weight: bold;
  width: 10rem;  
  transition: background-color 1.5s;  
}

.button.active {
  background-color: #00b5ff;
  background-color: #00f941;
  transition: background-color 0s;  
}

.bottom {
  color: #BBB;
  font-size: 0.9rem;
}

#result {
  font-family: monospace;
  font-size: 2rem;
  font-weight: bold;  
  color: skyblue;  
}

.label {
  margin-left: 1rem;
}

.value {
  font-weight: bold;
}

JavaScript

const elInput = document.querySelector('#input');
const elPaste = document.querySelector('#paste');
const elCopy = document.querySelector('#copy');
const elResult = document.querySelector('#result');
const elLeft = document.querySelector('#left');

const update = () => {
	const text = elInput.value || 'Field is empty';      
  console.log('text',text);
  const sum = (text.match(/^[\d\.]{4,5}/gm) || [])
    .map(parseFloat)
    .filter(Boolean)
    .reduce((sum,item) => sum + item, 0);
  const formatted = (Math.round(sum * 100) / 100).toFixed(2);        
  elResult.innerText = formatted;
  const left = (40 - formatted).toFixed(2);
  elLeft.innerText = left;
  
  elInput.style.height = 'auto';
  elInput.style.height = elInput.scrollHeight+'px';  
  
};

elPaste.onclick = () => {
	navigator.clipboard
    .readText()
    .then(clipboardText => {
      const text = clipboardText || 'Clipboard is empty';    
      elInput.value = text;
      update();
    });
};

elCopy.onclick = () => {
 navigator.clipboard
   .writeText(elInput.value)
   .then(() => {
     elCopy.innerText = 'Copied.';
     elCopy.classList.add('active');
     setTimeout(() => {
       elCopy.classList.remove('active');     
     }, 500);
     setTimeout(() => {
       elCopy.innerText = 'Copy';     
     }, 1500);
   });
};

elInput.onchange = update;
elInput.oninput = update;
update();