Update alternating-text.md

snippets/css/s/alternating-text.md

@@ -10,26 +10,24 @@ dateModified: 2023-05-25T15:04:40+03:00
 Creates an alternating text animation.
 
 - Create a `<span>` for the text that will be alternated.
-- Define an animation `alternate-text` that makes the `<span>` disappear by setting `display: none`.
-- Use JavaScript to define an array of the different words that will be alternated and use the first word to initialize the content of the `<span>`.
-- Define an event listener that will be triggered when an iteration of the animation is completed.
-- Every time the event is triggered, the next word from the array is set as content of the `<span>`.
+- Define an animation, `alternating-text`, that makes the `<span>` disappear by setting `display: none`.
+- In JavaScript, define an array of the different words that will be alternated and use the first word to initialize the content of the `<span>`.
+- Use `EventTarget.addEventListener()` to define an event listener for the `'animationiteration'` event. This will run the event handler whenever an iteration of the animation is completed.
+- Use `Element.innerHTML` to display the next element in the array as the content of the `<span>`.
 
 ```html
-<p>
-  I love coding in <span class="alternating" id="alternating-text"></span>.
-</p>
+<p>I love coding in <span class="alternating" id="alternating-text"></span>.</p>
 ```
 
 ```css
-.alternating{
-  animation-name: alternate-text;
+.alternating {
+  animation-name: alternating-text;
   animation-duration: 3s;
   animation-iteration-count: infinite;
   animation-timing-function: ease;
 }
 
-@keyframes alternate-text {
+@keyframes alternating-text {
   90% {
     display: none;
   }
@@ -37,19 +35,15 @@ Creates an alternating text animation.
 ```
 
 ```js
-const text = ['Java','Python','C','C++','C#','Javascript'];
-const dynamicallyAlternatingText = document.getElementById('alternating-text');
-dynamicallyAlternatingText.innerHTML = text[0];
-dynamicallyAlternatingText.addEventListener("animationiteration", listener, false);
-
+const texts = ['Java','Python','C','C++','C#','Javascript'];
+const element = document.getElementById('alternating-text');
 let i = 0;
 
-function listener(event){
-  if (i<text.length-1){
-    i++;
-  }else{
-    i = 0;
-  }
-  dynamicallyAlternatingText.innerHTML = text[i];
+const listener = (e) => {
+  i = i < texts.length-1 ? i + 1 : 0;
+  element.innerHTML = texts[i];
 }
+
+element.innerHTML = texts[0];
+element.addEventListener("animationiteration", listener, false);
 ```