feat: 🎸 added data attribute example

Author: Pratham82

2024 Prep/machine_coding/vanilla-js/form-validation/index.html

@@ -41,6 +41,14 @@ <h1>Form Validation example</h1>
       <button type="submit" class="submit-btn">Submit</button>
     </form>
 
+    <main>
+      <h2>Data attributes</h2>
+      <ul>
+        <li data-animal-type="bird" onclick="showDetails(this)">Owl</li>
+        <li data-animal-type="insect" onclick="showDetails(this)">Ant</li>
+        <li data-animal-type="fish" onclick="showDetails(this)">Gold Fish</li>
+      </ul>
+    </main>
     <script src="./script.js"></script>
   </body>
 </html>

2024 Prep/machine_coding/vanilla-js/form-validation/script.js

@@ -18,3 +18,10 @@ const onFormSubmit = event => {
 }
 
 myForm.addEventListener('submit', onFormSubmit)
+
+function showDetails(animalType) {
+  const animalTypeVal = animalType.getAttribute('data-animal-type')
+  const animal = animalType.innerHTML
+  console.log('🚀 ~ showDetails ~ animalType:', animalTypeVal, animal)
+  alert(`${animal} is a ${animalTypeVal}`)
+}