JSFiddle - React, Tailwind, and code Playground

by terjanq

HTML

<script src="https://fonts.googleapis.com/css?family=Mukta:300,400,500,600"></script>
<title>Content-type detector</title>
<h1>Content and Status Types Detector</h1>
<small>Compatible with <strong>Firefox</strong> only</small>

<form id=form method="POST">
  <input name="url" placeholder="https://" />
  <button>check</button>
</form>

<div id="_console"></div>

CSS

* {
  font-family: 'Mukta', sans-serif;
  color: #3b3b3b;
}

input {
  background: inherit;
}

#_console {
  max-width: 720px;
  max-height: 200px;
  overflow-y: hidden;
  overflow-x: hidden;
}

#_console:hover {
  overflow-y: scroll;
}

#_console p {
  font-weight: 300;
  padding: 4px 7px;
  margin: 5px;
  color: #424242;
  max-width: 700px;
}

iframe {
  width: 1px;
  height: 1px;
  border: 0;
  opacity: 0;
}

small {
  color: gray;
  font-weight: 400;
  font-style: italic;
  font-size: 16px;
  margin-top: -20px;
  display: block;
  margin-bottom: 30px;
}

small strong {
  font-weight: 600;
  font-size: 18px;
  color: inherit;
}

input {
  width: 515px;
  font-size: 20px;
  padding: 6px 10px;
  border: 1px solid gray;
  border-radius: 6px;
  margin: 3px;
  margin-left: 0;
}

button {
  font-size: 20px;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid gray;
  background: gray;
  color: white;
  cursor: pointer;
  margin: 3px;
  margin-left: 0px;
  margin-bottom: 20px;
}

h1 {
  margin-top: 40px;
  color: #424242;
}

.found {
  background: #e0f2d5;
}

.error {
  background: #ffd9d9;
}

.mime {
  font-weight: 600;
}

.url {
  color: gray;
}

JavaScript

const mimes = ['text/plain', 'text/html', 'text/javascript',
  'text/css', 'image/bmp', 'image/png', 'image/svg+xml',
  'image/gif', 'image/jpeg', 'application/json', 'application/pdf',
  'audio/mpeg', 'video/mpeg', 'video/mp4', 'font/ttf', 'application/xhtml+xml', 'audio/x-wav', 'application/javascript', 
  'application/x-javascript'
];

async function spawnPromise(url, mime) {
  let x = document.createElement('iframe');
  x.srcdoc = `<object id=obj type="${mime}" data="${url}" \
  typemustmatch></object>`;
  return new Promise(resolve => {
    x.onload = () => {
      resolve(x.contentWindow.obj.clientHeight ? mime : '');
      x.remove();
    }
    document.body.appendChild(x);
  });
}

async function checkAll(url) {
  let promises = [];
  for (let mime of mimes) promises.push(spawnPromise(url, mime));
  let values = await Promise.all(promises);
  values = values.filter(x => x);
  msg(values.length, url, values.pop());
}

form.onsubmit = function(e) {
  e.preventDefault();
  let url = form.url.value.trim();
  checkAll(url);
}

function msg(found, url, mime) {
  _console.innerHTML += `
<p class="${found? 'found': 'error'}">\
Resource <span class="url">${url}</span> ${found? `responded with \
<span class="mime">${mime}</span> MIME type.</p>`:
'responded with <span class="mime">error</span>'}`;
  _console.scrollTop = _console.scrollHeight;
}