How would I go about creating editable “blocks” on an html website that show up when a plus button gets pressed?

Question

I'm extremely new to html/css/javascript and I don't even know if I am using the right tools to make this.

I am trying to create a website with a plus icon that when pressed creates a panel and "sprite" on the page. The panel has controls that change the various properties of the sprite, and can get deleted which also removes the sprite. Multiple panels can be created by pressing the plus icon, and each one has a separate sprite.

I am asking specifically about the panel creation. Is something like this even possible where one button can create many panels that are each unique and controlled by a user or am I better off with another language?

Here is the html code I currently have for the button if it matters:

 <div class="createBlock"> <button onclick="createBlock()" class="buttonMain menuPlus">+</button> </div>

Thanks so much!

Answer 1

You can do that with jQuery. Here is what your createBlock function could look like:

 /* create a counter to keep track of the blocks */ let counter = 0; /* this function will fire when the button is clicked */ function createBlock() { /* increase the counter by 1 */ counter++; /* clear all blocks after limit and reset counter */ if (counter > 20) { $(".block-container").find("[class*=block-el]").remove(); counter = 0; } /* create new block element */ let block = $("<div />", { "class": "block-el-" + counter }).append( /* append child elements to block */ $("<div />", { "class": "block-content" }).text("Content"), $("<div />", { "class": "block-close" }).text("close") ).appendTo( ".block-container" /* append block to dom */ ).css({ /* set dynamic styles on block element */ "z-index": counter, "left": Math.floor(Math.random() * 101) + "%", "top": Math.floor(Math.random() * 101) + "%" }); } /* remove the block when close button clocked. this is important, the selector cant be a dynamic object or it wont work */ $("body").on("click", ".block-close", function() { /*find the parent block */ $(this).closest("[class*=block-el]").fadeOut("fast", function() { /* after element fades out remove it */ $(this).remove(); /* subtract 1 from the blocks counter */ counter--; }); })

 /* Styling added just for example */ body, html { padding: 0; margin: 0; box-sizing: border-box; }.block-container { display: flex; justify-content: center; align-items: center; background: dodgerblue; width: 100vw; height: 100vh; overflow: hidden; position: relative; }.createBlock>button { border: none; outline: none; -webkit-appearance: none; background: aquamarine; color: #fff; padding: 12px; border-radius: 4px; z-index: 9000; position: relative; width: 140px; } [class*="block-el"] { display: grid; grid-template-rows: 60% 1fr; grid-gap: 20px; background: white; padding: 15px; border-radius: 6px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .1)); width: 140px; height: 140px; max-width: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }.block-content { background: slategrey; border-radius: 6px; display: flex; justify-content: center; align-items: center; text-align: center; color: white; }.block-close { display: flex; justify-content: center; align-items: center; text-align: center; background: black; color: white; cursor: pointer; border-radius: 4px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="block-container"> <div class="createBlock"> <button onclick="createBlock()" class="buttonMain menuPlus">+</button> </div> </div>