w3collective/file-extension-javascript.html

## file-extension-javascript.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Get file extension using JavaScript</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <form>
    <fieldset>
      <legend>Check file extension:</legend>
      <input type="file" id="input-file-upload" />
      <input type="button" id="btn-check-extension" value="Check Extension" />
    </fieldset>
  </form>
  <p>File extension: <span id="result"></span></p>
  <script>
    const btn = document.querySelector("#btn-check-extension");
    btn.addEventListener('click', () => getExtension());
    const getExtension = () => {
      const file = document.querySelector("#input-file-upload").value;
      const extension = file.split(".").pop();
      document.querySelector("#result").textContent = extension;
    };
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Get file extension using JavaScript</title>
	<link rel="stylesheet" href="style.css" />
	</head>
	<body>
	<form>
	<fieldset>
	<legend>Check file extension:</legend>
	<input type="file" id="input-file-upload" />
	<input type="button" id="btn-check-extension" value="Check Extension" />
	</fieldset>
	</form>
	<p>File extension: <span id="result"></span></p>
	<script>
	const btn = document.querySelector("#btn-check-extension");
	btn.addEventListener('click', () => getExtension());
	const getExtension = () => {
	const file = document.querySelector("#input-file-upload").value;
	const extension = file.split(".").pop();
	document.querySelector("#result").textContent = extension;
	};
	</script>
	</body>
	</html>