King of JavaScript Online HTML Editor

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  font-size: 36px;
}

#ShowImg {
  width: 100%;
  max-width: 500px;
}

img {
  width: 100%;
}
</style>
</head>
<body>
<!-- choose image -->
<input type="file" name="" id="Img"/>
<!-- Preview Image -->
<div id="ShowImg"></div>
<!-- Image Details if Needed -->
<div id="ImgDetails"></div>

<script>
document.getElementById("Img").addEventListener("change", function () {
   var file = this.files[0];
   var Link = URL.createObjectURL(file);

   var details = "";
   details += file.name + "<br/>";
   details += file.type + "<br/>";
   details += Math.floor(file.size / 1024) + "kb";

   var createImg = `<img src="${Link}" alt = "" />`;
   //preview image
   document.getElementById("ShowImg").innerHTML = createImg;
   //display image details
   document.getElementById("ImgDetails").innerHTML = details;

});
</script>
</body>
</html>