<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TYTD</title>
<link rel="stylesheet" href="./beer.min.css">
<link rel="stylesheet" href="./theme.css">
</head>
<body>
<article class="medium middle-align center-align">
<div>
<i class="extra">download</i>
<h5>Add a video, playlist or channel to my TYTD</h5>
<div class="space"></div>
<form action="./add">
<nav class="no-space">
<div class="max field border left-round">
<input type="url" name="v">
</div>
<button type="submit" class="large right-round">Add</button>
</nav>
</form>
</div>
</article>
<article>
There are <span id="noItems">0</span> item(s) in the queue
</article>
<script src="./beer.min.js"></script>
<script defer>
const d = document.getElementById('noItems');
setInterval(()=>{
fetch('./itemsInQueue').then(e=>e.text()).then(e=>{
d.innerText = e;
});
},3000);
</script>
</body>
</html>