Generate a unique border using jQuery randomization techniques

Question

Generate a unique border using jQuery randomization techniques

I've been experimenting with creating a random number and having the border-radius of my div change on every pageload:

<script>
$(".card-body").each(function(){
var rand = Math.floor(Math.random() * 100) + 1;
$(this).css( {  borderRadius:  rand } );
});
</script>

Is there a way to set the border radius similar to this css style?

border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;}

jquery css html bootstrap-4

Answer 1

Answer №1

Check out the code snippet below:

Loop 8 times and increment (+=) the rand variable with a random number each time. After the 4th iteration, add a / to separate the numbers.

$(".card-body").each(function(){
var rand="";
for(var i=0;i<8;i++)
{
 rand += Math.floor(Math.random() * 255) + 1 + "px";
 if(i!=3)
  rand +=" ";
 else
   rand +="/ ";
 }
$(this).css( {  borderRadius:  rand } );
});

.card-body-static{
border:1px solid black;
border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
margin-bottom:15px;
}

.card-body{
border:1px solid black;
margin-bottom:15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card-body-static">static</div>

<div class="card-body">random</div>
<div class="card-body">random 2</div>

Answer 2

Check out the code snippet below:

Loop 8 times and increment (+=) the rand variable with a random number each time. After the 4th iteration, add a / to separate the numbers.

$(".card-body").each(function(){
var rand="";
for(var i=0;i<8;i++)
{
 rand += Math.floor(Math.random() * 255) + 1 + "px";
 if(i!=3)
  rand +=" ";
 else
   rand +="/ ";
 }
$(this).css( {  borderRadius:  rand } );
});

.card-body-static{
border:1px solid black;
border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
margin-bottom:15px;
}

.card-body{
border:1px solid black;
margin-bottom:15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card-body-static">static</div>

<div class="card-body">random</div>
<div class="card-body">random 2</div>

Answer 3

Answer №2

To tackle this issue, a solution involves forming an array of border-radius values and then combining them to create the CSS rule string.

Start by creating a function that generates a random number between 1 and 100 :

function generateRandomNumber(){
    return Math.floor(Math.random() * 100);
}

Retrieve the width of each card:

$(".card-body").each(function(){

    const width = $(this).width();

   // ...

});

Next, form a new array containing two numbers ([ 0, 0 ]) :

$(".card-body").each(function(){

    const width = $(this).width();

    const borderRadiusArray = [0,0];

    // ...

});

We need to iterate through this array multiple times to obtain an array of border-radius values. Initially, assign a random percentage to each element (using the generateRandomNumber function). Then, associate each percentage with a value by multiplying it by the object's width (a suitable reference point for our border-radius). Another iteration will add the 'px' string to each value. Finally, we merge these two elements together with a space in between.
```
$(".card-body").each(function(){

    const width = $(this).width();

    const borderRadiusArray = [0,0];
      .map(value => generateRandomNumber())
      .map(percentage => width*percentage)
      .map(pixels => pixels + 'px')
      .join(' ');

    // ...

});
```

You can then apply this property to the object:

$(".card-body").each(function(){

    const width = $(this).width();

    const borderRadiusArray = [0,0];
      .map(value => generateRandomNumber())
      .map(percentage => width*percentage)
      .map(pixels => pixels + 'px')
      .join(' ');

    $(this).css( {  borderRadius:  borderRadiusArray });

});

Below is the complete code snippet:

function generateRandomNumber(){
return Math.floor(Math.random() * 100);
}


$(".card-body").each(function(){

  const width = $(this).width();

const borderRadiusArray = [0,0]
    .map(value => generateRandomNumber())
    .map(percentage => width*percentage)
.map(pixels => pixels + 'px')
    .join(' ');
    
$(this).css( {  borderRadius:  borderRadiusArray });
  
});

.card-body {
  width: 200px;
  height: 100px;
  background-color: purple;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="card-body"></div>
<div class="card-body"></div>

Answer 4

To tackle this issue, a solution involves forming an array of border-radius values and then combining them to create the CSS rule string.

Start by creating a function that generates a random number between 1 and 100 :

function generateRandomNumber(){
    return Math.floor(Math.random() * 100);
}

Retrieve the width of each card:

$(".card-body").each(function(){

    const width = $(this).width();

   // ...

});

Next, form a new array containing two numbers ([ 0, 0 ]) :

$(".card-body").each(function(){

    const width = $(this).width();

    const borderRadiusArray = [0,0];

    // ...

});

We need to iterate through this array multiple times to obtain an array of border-radius values. Initially, assign a random percentage to each element (using the generateRandomNumber function). Then, associate each percentage with a value by multiplying it by the object's width (a suitable reference point for our border-radius). Another iteration will add the 'px' string to each value. Finally, we merge these two elements together with a space in between.
```
$(".card-body").each(function(){

    const width = $(this).width();

    const borderRadiusArray = [0,0];
      .map(value => generateRandomNumber())
      .map(percentage => width*percentage)
      .map(pixels => pixels + 'px')
      .join(' ');

    // ...

});
```

You can then apply this property to the object:

$(".card-body").each(function(){

    const width = $(this).width();

    const borderRadiusArray = [0,0];
      .map(value => generateRandomNumber())
      .map(percentage => width*percentage)
      .map(pixels => pixels + 'px')
      .join(' ');

    $(this).css( {  borderRadius:  borderRadiusArray });

});

Below is the complete code snippet:

function generateRandomNumber(){
return Math.floor(Math.random() * 100);
}


$(".card-body").each(function(){

  const width = $(this).width();

const borderRadiusArray = [0,0]
    .map(value => generateRandomNumber())
    .map(percentage => width*percentage)
.map(pixels => pixels + 'px')
    .join(' ');
    
$(this).css( {  borderRadius:  borderRadiusArray });
  
});

.card-body {
  width: 200px;
  height: 100px;
  background-color: purple;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="card-body"></div>
<div class="card-body"></div>

Generate a unique border using jQuery randomization techniques

Answer №1

Answer №2

Similar questions

Shutting down the jQuery pop-up

The issue of Jquery .click event handler failing to work for class selector specifically in CHROME

Automatically switch to dark mode at specified times: A simple guide

Unusual issue: PDF content disappears upon reopening modal

The issue with the page width is occurring due to a bug related to the

Asking for information regarding RESTful API

unable to retrieve parent ID

Tips for hiding the overflow scrollbar on Microsoft Chrome when there is no content to scroll

Showcase JSON data within a designated div

AngularJS: Changing color property using toggle when a CSS class is modified

What is the best way to use Ajax to modernize an existing model with a new model

unresolved string constant issue with a django template command

What is the best way to obtain real-time DOM updates using jQuery?

The PowerShell script has misplaced the HTML formatting

Error in Chrome: Uncaught TypeError with JQuery Ajax - Unable to access property 'data' when null

Can you explain the significance of allow_blank and style = {`base_template` : `textarea.html`} in Django when used as attributes of a CharField?

Avoiding Page Reloads with Ajax while Removing Entries from a Table in Laravel

What is the best way to ensure HTML validation during a pull request?

Flyer - Chart "dimmed" and unselectable when dimensions are specified as a proportion

Is there a way in CSS to set a label's width equal to the width of its content?