Add and remove value from array

Question

I have built a dynamic pyramid; see the picture attached.

The user can add and remove blocks to the pyramid
Each time the user adds a block, there is a random number and letter applied to the new block to name it, e.g. 8p, 4e

The problem:

I want to save these random number and letter combinations in an array like this with .push()

let values = [''];
values.push(number + resultLetter);
console.log(values);

Each time a block is added, the order of the blocks should be sorted automatically. I was thinking to use .sort().
Each time a block is removed the value of the block should be removed from the array, maybe with .pop()

However, the code I have written seems to overwrite the values pushed to the array each time and I cannot seem to figure out how to prevent this (maybe a function with click to save them in combination with .val() etc.).

$(document).ready(function() {
  //Add Block Functionality
  $('#add-block .button').click(function() {
    //determin widht of last div
    var lastwidth = $('.pyramid li:last-child .item').width();

    //calculation of next div
    if (lastwidth == null) {
      var plus = 90;
    } else {
      var plus = lastwidth + 190; //not sure why 190 but with this value they line up smoothly. Was expecting 0 and 100 for the values.
    }

    //create radom number
    var number = Math.floor(Math.random() * 9) + 1;

    //create radom letter
    function randLetter() {
      var letters = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"];
      var letter = letters[Math.floor(Math.random() * letters.length)];

      return letter
    }

    //make letter available globally
    var resultLetter = randLetter();

    //create radom color
    function randColor() {
      var colors = ["green", "yellowgreen", "Chocolate", "goldenrod", "cadetblue", "firebrick", "magenta", "LightSeaGreen", "Peru", "Sienna", "SlateBlue", "Snow", "Tan", "Skyblue"];
      var color = colors[Math.floor(Math.random() * colors.length)];

      return color
    }

    //make color available gloabally
    var resultColor = randColor();
    var $block = $('<li><div class="item" style="width:' + plus + 'px; border-bottom: 60px solid ' + resultColor + ' ;"><input id="values" type="text" placeholder=" ' + number + resultLetter + ' " maxlength="2"> </div></li>');

    $('.pyramid').append($block);

    //save values
    let values = [''];

    values.push(number + resultLetter);
    console.log(values);
  });

  //Remove Block Functionality
  $('#remove-block .button').click(function() {
    $('.pyramid li').last().remove();
  })
});

body,
html {
  box-sizing: border-box;
  font-size: 16px;
  font-family: 'Open Sans', sans-serif;
  background-color: #101935;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

ul,
li {
  list-style: none;
  margin: 0;
  padding: 0;
}

li div.item {
  margin: 0 auto;
  position: relative;
  height: 0px;
  width: 100px;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 60px solid #0488e0;
  display: flex;
  justify-content: center;
}

li div.item:not(.item0) {
  border-bottom: 60px solid #0488e0;
  border-left: 45px solid transparent;
  border-right: 45px solid transparent;
  margin-top: 10px;
  height: 0;
}

#values {
  background: rgba(255, 255, 255, .6);
  border: none;
  text-align: center;
  font-size: 15px;
  color: black;
  font-weight: bold;
  height: 20px;
  width: 35px;
  border-radius: 2px;
  position: absolute;
  top: 30px;
}

#values:focus {
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 2px 2px rgba(0, 0, 0, .15);
  outline: none;
}


/*buttons section */

.buttons,
#add-block,
#remove-block {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}

#add-block span,
#remove-block span {
  background-color: #edf7f6;
  padding: 5px 15px;
  font-size: 18px;
  border-radius: 2px;
  color: #888;
  font-weight: 400;
}

#add-block .button,
#remove-block .button {
  background-color: #0488e0;
  padding: 5px;
  border-radius: 2px;
  width: 40px;
  text-align: center;
  display: block;
  font-size: 20px;
  color: #ffffff;
  margin: 10px;
  transition: background-color 250ms ease-in-out 100ms;
}

#add-block .button:hover,
#remove-block .button:hover {
  background-color: #059BFF;
  cursor: pointer;
}

<body>

  <ul class="pyramid">
  </ul>

  <section class="buttons">
    <div id="add-block">
      <span>Add Block</span>
      <div id="newValue" class="button">+
      </div>
    </div>
    <div id="remove-block">
      <span>Remove Block</span>
      <div class="button">-
      </div>
    </div>
  </section>


  <script src="https://code.jquery.com/jquery-      3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  <script src="resources/js/main.js"></script>

</body>

Luka Lopusina · Accepted Answer · 2018-05-27 10:36:24Z

1

Just move array declaration above click function so that you don't overwrite array every time you click on + button and you don't need empty element to declare array so something like this:

$(document).ready(function() {
  //Add Block Functionality
  let values = [];

  $('#add-block .button').click(function() {
    //determin widht of last div
    var lastwidth = $('.pyramid li:last-child .item').width();

    //calculation of next div
    if (lastwidth == null) {
      var plus = 90;
    } else {
      var plus = lastwidth + 190; //not sure why 190 but with this value they line up smoothly. Was expecting 0 and 100 for the values.
    }

    //create radom number
    var number = Math.floor(Math.random() * 9) + 1;

    //create radom letter
    function randLetter() {
      var letters = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"];
      var letter = letters[Math.floor(Math.random() * letters.length)];

      return letter
    }

    //make letter available globally
    var resultLetter = randLetter();

    //create radom color
    function randColor() {
      var colors = ["green", "yellowgreen", "Chocolate", "goldenrod", "cadetblue", "firebrick", "magenta", "LightSeaGreen", "Peru", "Sienna", "SlateBlue", "Snow", "Tan", "Skyblue"];
      var color = colors[Math.floor(Math.random() * colors.length)];

      return color
    }

    //make color available gloabally
    var resultColor = randColor();
    var $block = $('<li><div class="item" style="width:' + plus + 'px; border-bottom: 60px solid ' + resultColor + ' ;"><input class="values" type="text" placeholder=" ' + number + resultLetter + ' " maxlength="2"> </div></li>');

    $('.pyramid').append($block);

    //save values

    values.push(number + resultLetter);
    values.sort();
    console.log(values);
  });

  //Remove Block Functionality
  $('#remove-block .button').click(function() {
    value = $(".values", $('.pyramid li').last()).attr("placeholder").trim()
    values.splice(values.indexOf(value), 1)
    console.log(values)
    $('.pyramid li').last().remove();
  })
});

Maybe I didn't understand you question well enough?

edited May 27, 2018 at 10:36

answered May 27, 2018 at 10:25

Luka Lopusina

2,6473 gold badges29 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Rummel17 Over a year ago

So the number-letter combinations in the pyramid need to be sorted according to 1-9 and a-z. In order to do that, I assumed that I need to save these combinations somewhere. My idea was to save them in an array. Once they are saved, I should be able to create a function that is executed each time the user clicks the + button and creates a new pair of number letters.

Rummel17 Over a year ago

Oh yeah, the array needs to be outside the block, right.... Moving it up seemed to help. The result is not this Array [ "", "2c" ] main.js:44:5 Array(3) [ "", "2c", "6h" ] main.js:44:5 Array(4) [ "", "2c", "6h", "5n" ] - The first value in the array seems to be empty, I don't understand why though?

Luka Lopusina Over a year ago

@Rummel17 I added sort after push and also created remove function for you. Let you try it now?

Luka Lopusina Over a year ago

@Rummel17 After I push element in add function I sort elements again so that they are in order. In remove function I get value of that placeholder where you put that number + letter and then remove it from array (I used trim because you have some spaces around number+letter and also changed that values is not id because id should be unique and you have values field in each element so it must be class)

Rummel17 Over a year ago

Thank you very much for your time and effort! It does work and now the values are sorted in the array. However, is it possible to sort the blocks on the actual pyramid accordingly each time the user clicks on add block? So if the block added is e.g. 1A, it moves to the first position on top of the pyramid?

Collectives™ on Stack Overflow

Add and remove value from array

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related