jQuery Tutorial #2 - DOM functions and array

Creating boxes with repeating background color - jQuery practice

In this article, we’ll cover how to use jQuery, DOM methods, and JavaScript arrays to create interactive boxes with repeating background colors.

You could try our previous practice exercise for hands on jquery knowledge.

Jquery array

• i) When you get an input, check whether it is validated as a number.
• ii) Based on the input value, create a number of boxes.
• iii) Set all the boxes with background colors from an array.

How to Get an Input Value from a Textbox

          var inputValue = $(this).val();
          console.log(inputValue);
        

Testing Whether the Input Value is a Number

To test whether the input is a number, we use a regular expression pattern.

          if (/^[0-9]$/.test(inputValue)) {
            console.log("It is a number");
          }
        

/^[0-9]$/: This pattern checks if the input is a single number.

Note: Use /^[0-9]{1,2}$/ for validating two-digit numbers.

Creating number of boxes based on input value

       var section = document.createElement('section');
       for (i=0;i<=inputValue-1;i++){
       //creating boxes
       var singlebox = document.createElement('div');
       }document.body.appendChild(section);
      

Iterating and Creating Boxes

We will create boxes starting from 1, so the loop should begin at either 1 or consider values less than 1.

Create Elements: The createElement('div') method is used to create the box, and element.appendChild() or element.insertBefore() should be used to insert the box into the DOM.

Setting Background Colors in Array

We need to set predefined background colors in a loop, such as red, green, and blue, respectively.

          var colorsused = ['red', 'green', 'blue'];
        

Assigning Background Colors in the Loop

          singlebox.style.background = colorsused[i];
        

The first element will have a red background, the second will be green, and the third will be blue. From the fourth element onward, the loop will continue, and the array will .push() to itself at the end of each iteration.

          $(singlebox).each(function() {
            singlebox.style.background = colorsused[i];
            colorsused.push(colorsused[i]);
          });
        

Array Methods: .push() and .remove()

The .push() method adds one or more elements to the array. If the user inputs a value a second time, the previously created boxes are removed from the DOM.

          $(document).find('.boxes-wrap').remove();
        

Resetting the Input Value

          $(this).val("");
        

Result

This demo illustrates the process of creating a number of boxes with repeating background colors based on user input.

Complete Code

   //Defining colors list
   var colorsused = ['red','green','blue'];
   num = 0;
   $('.count-input').change(function(){
    var inputValue = $(this).val();
    //If previous section is found; remove that
    $(document).find('.boxes-wrap').remove();
    //input validate
    if (/^[0-9]$/.test(inputValue)){
    var section = document.createElement('section');
    for (i=0;i<=inputValue-1;i++){
     //creating boxes
     var singlebox = document.createElement('div');
     var indexDiv = document.createElement('p');
     //setting bgcolors from array in loop
     $(singlebox).each(function(){
      singlebox.style.background = colorsused[i];
      colorsused.push(colorsused[i]);
     });
     console.log("indexinLoop:",i);
     //debugger;
     section.appendChild(singlebox);
     section.setAttribute('class','boxes-wrap');
     $(this).val("");
    }document.body.appendChild(section);
    }
    else{
     alert("Enter a single digit number");
    }
   });
   
   

Don't miss to read our article Front end web development

Follow our FB page @CreativeTechnocrayts for regular updates