Skip to content

Instantly share code, notes, and snippets.

@michael-sumner

michael-sumner/index.html

Last active September 4, 2023 08:26
Show Gist options
  • Save michael-sumner/34addf6930c2828744556f141f774a0b to your computer and use it in GitHub Desktop.
Save michael-sumner/34addf6930c2828744556f141f774a0b to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!doctype html>
<html class="bg-gray-100">
<head>
<title>Checksum Generator</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div
class="min-h-screen flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8"
>
<div class="max-w-xl w-full">
<h1 class="text-center text-3xl font-extrabold text-gray-900 mb-10">
<a
href="https://rapidapi.com/security-labs-security-labs-default/api/checksum-api/"
target="_blank"
class="text-indigo-600 hover:text-indigo-500 underline"
>Checksum Generator</a
>
</h1>
<form id="upload-form" class="space-y-6">
<h2 class="text-lg text-center">Upload File or Enter Text</h2>
<div class="space-y-2">
<div>
<input
type="radio"
id="radio-file"
name="input-type"
value="file"
checked
/>
<label for="radio-file" class="ml-2">Upload File</label>
</div>
<div>
<input
type="radio"
id="radio-text"
name="input-type"
value="text"
class=""
/>
<label for="radio-text" class="ml-2">Enter Text</label>
</div>
</div>
<div class="mt-4">
<textarea
id="file-input"
rows="5"
required
class="p-4 block w-full rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 hover:border-indigo-500 border"
></textarea>
<label
for="file-upload"
class="w-full block mt-2 bg-white rounded-md py-2 px-3 border border-gray-300 cursor-pointer hover:border-indigo-500"
>
<span class="text-gray-700">Select a File</span>
<input type="file" id="file-upload" class="" />
</label>
<div id="file-name" class="mt-2 italic text-gray-600 hidden"></div>
</div>
<div>
<button
type="submit"
class="w-full bg-indigo-600 py-2 px-4 border border-transparent rounded-md shadow-sm text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
>
Submit
</button>
<button
type="button"
id="reset-button"
class="mt-3 w-full py-2 px-4 border border-gray-300 rounded-md shadow-sm text-base font-medium text-gray-700 bg-white hover:bg-gray-50"
>
Reset
</button>
</div>
</form>
<div id="result" class="mt-8 hidden">
<h2 class="text-lg text-center">Checksum Result:</h2>
<pre id="checksum" class="mt-2 p-2 bg-white rounded"></pre>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const fileRadio = document.getElementById('radio-file');
const textRadio = document.getElementById('radio-text');
const textInput = document.getElementById('file-input');
const fileInput = document.getElementById('file-upload');
const uploadForm = document.getElementById('upload-form');
const checksumOutput = document.getElementById('checksum');
const resetButton = document.getElementById('reset-button');
const fileNameDisplay = document.getElementById('file-name');
const resultSection = document.getElementById('result');
textInput.disabled = true;
fileInput.disabled = false;
fileRadio.addEventListener('change', () => {
textInput.disabled = true;
fileInput.disabled = false;
fileNameDisplay.classList.add('hidden');
});
textRadio.addEventListener('change', () => {
fileInput.disabled = true;
textInput.disabled = false;
fileNameDisplay.classList.add('hidden');
});
fileInput.addEventListener('change', () => {
const fileName = fileInput.files[0].name;
fileNameDisplay.textContent = fileName;
fileNameDisplay.classList.remove('hidden');
});
uploadForm.addEventListener('submit', async (event) => {
event.preventDefault();
let formData = new FormData();
if (fileRadio.checked) {
const file = fileInput.files[0];
formData.append('file', file);
} else {
const text = textInput.value;
formData.append('file', text);
}
try {
const response = await fetch(
'https://checksum-api.p.rapidapi.com/generate-checksum',
{
method: 'POST',
headers: {
'X-RapidAPI-Key':
'6fecddcca3msh8c1f2642a905b03p1207bfjsnd7c0fdb6c7c4',
'X-RapidAPI-Host': 'checksum-api.p.rapidapi.com'
},
body: formData
}
);
if (response.ok) {
const data = await response.json();
checksumOutput.textContent = data.checksum;
resultSection.classList.remove('hidden');
} else {
console.error('Request failed with status:', response.status);
}
} catch (error) {
console.error('An error occurred:', error);
}
});
resetButton.addEventListener('click', () => {
textInput.value = '';
fileInput.value = '';
fileNameDisplay.textContent = '';
fileNameDisplay.classList.add('hidden');
checksumOutput.textContent = '';
resultSection.classList.add('hidden');
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment