maciejpedzich/cats-album
1
0
Fork 0
mirror of https://github.com/maciejpedzich/cats-album.git synced 2024-11-27 22:35:47 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add a remaining description characters countdown

Browse Source
This commit is contained in:
Maciej Pędzich 2023-09-06 21:32:04 +02:00
parent 15a173c8c9
commit efeabfa168
1 changed files with 16 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/pages/submit.astro
View File

@ -55,7 +55,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
<label for="description">Cat's description (optional)</label> <label for="description">Cat's description (optional)</label>
<textarea id="description" name="description" maxlength="300"></textarea> <textarea id="description" name="description" maxlength="300"></textarea>
<small> <small>
Some ideas: nicknames, age, breed(s), where you adopted this cat <span id="remaining-chars">300</span> characters left
</small> </small>
</div> </div>
<div> <div>
@ -83,6 +83,21 @@ import BaseLayout from '../layouts/BaseLayout.astro';
</form> </form>
</BaseLayout> </BaseLayout>
<script is:inline>
const descriptionTextarea = document.getElementById('description');
const remainingCharacters = document.getElementById('remaining-chars');
const maxDescriptionLength = Number(
descriptionTextarea.getAttribute('maxlength')
);
descriptionTextarea.addEventListener('input', () => {
const currentDescriptionLength = descriptionTextarea.value.length;
remainingCharacters.textContent =
maxDescriptionLength - currentDescriptionLength;
});
</script>
<style> <style>
h1 { h1 {
margin-bottom: 0; margin-bottom: 0;