UI practice #2 jQuery - DOM functions and array

Creating boxes with repeating background color - jQuery practice

This article gives an idea of jQuery and DOM methods and javascript arrays

Many of you have tried our previous practice exercise it seems.

Jquery array

i) When you get an input, you check whether it is validated as a number,

ii) Based on the input value, number of boxes is created.

iii) Set all the boxes with background colors from an array

How to get an input value from textbox

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

Testing whether the input value is a number

For testing whether it is a number, regex pattern is used.

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

/^[0-9]$/:here,[0-9] checks whether it is a number.

Note:

/^[0-9]{1,2}$/ refers two digits number

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

As we all know, we count the boxes from 1, so the loop should start from either 1 or consider it the value less than 1.

Creating boxes

createElement('div') function will create the div, we should use the element.appendChild() or element.insertBefore() to insert the same wherever applicable

Setting background colors in array

Boxes should take the predefined three values: red, green and blue respectively in a loop.

Defining colors list

      //Defining colors list
      var colorsused = ['red','green','blue'];
      

Assign background colors in loop

       //setting bgcolors
       singlebox.style.background = colorsused[i];
      

First element will be assigned background to red; second element will be assigned green and third element will be assigned blue. From fourth element, the loop should continue. So, the array is .push() to itself at the end of the loop.

       //setting bgcolors from array in loop
       $(singlebox).each(function(){
       singlebox.style.background = colorsused[i];
       colorsused.push(colorsused[i]);
       });
   

arr.push()

.push() method is used to add one or more elements to the array.

.remove() method

If user inputs the second time, already created boxes are removed from the DOM

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

To reset the input value

$(this).val("");
      

Result

So, the whole demo works like

   //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 exclusive article Front end web development

---

Follow our FB page @CreativeTechnocrayts for regular updates

Subscribe to Creative Technocrayts and be a part of growing community.