w3resource

JavaScript: Rotate a string from left to right

JavaScript Basic: Exercise-5 with Solution

Write a JavaScript program to rotate the string 'w3resource' in the right direction. This is done by periodically removing one letter from the string end and attaching it to the front.

Sample Solution:

HTML Code:

<!DOCTYPE html>
  <html> 
  <head>
  <title>JavaScript basic animation</title>
  <script type="text/javascript">
  </script>
  </head> <body onload="animate_string('target')"
  <pre id="target">w3resource </pre>
  </body> 
  </html>
  

JavaScript Code:

// Define a function that animates the characters of a string
function animate_string(id) {
    // Get the HTML element by its id
    var element = document.getElementById(id);

    // Access the text node inside the element (assuming no other children)
    var textNode = element.childNodes[0];
    
    // Extract the initial text content of the text node
    var text = textNode.data;

    // Set up an interval to rotate the characters in the text every 100 milliseconds
    setInterval(function () {
        // Move the last character to the beginning of the string
        text = text[text.length - 1] + text.substring(0, text.length - 1);

        // Update the text content of the text node with the modified string
        textNode.data = text;
    }, 100);
} 

Live Demo:

See the Pen JavaScript current day and time - basic-ex-2 by w3resource (@w3resource) on CodePen.


Explanation:

document.getElementById(id) : Returns a reference to the element by its ID; the ID is a string which can be used to identify the element; it can be established using the id attribute in HTML, or from script.
Parameters : id is a case-sensitive string representing the unique ID of the element being sought.

element.childNodes[0] will produce the same result as the HTML content of the first child node.

text.length: The length property represents the length of a string. It returns the number of characters units in the string.

Flowchart:

Flowchart: JavaScript - Rotate a string from left to right

ES6 Version:

// Define a function named animate_string that takes an id as a parameter
const animate_string = (id) => {
    // Get the element with the specified id
    const element = document.getElementById(id);

    // Get the text node from the first child of the element
    const textNode = element.childNodes[0]; // assuming no other children

    // Get the initial text from the text node
    let text = textNode.data;

    // Use setInterval to animate the string every 100 milliseconds
    setInterval(() => {
        // Shift the last character to the front of the text
        text = text[text.length - 1] + text.substring(0, text.length - 1);

        // Update the text node with the new text
        textNode.data = text;
    }, 100);
};

// Call the function with a sample id
animate_string('yourElementId'); 

Previous: JavaScript function to find the area of a triangle where lengths of the three of its sides are 5, 6, 7.
Next: JavaScript program to determine whether a given year is a leap year in the Gregorian calendar.

What is the difficulty level of this exercise?

Test your Programming skills with w3resource's quiz.



Follow us on Facebook and Twitter for latest update.