creating a new divs depending on the number that the user entered / javascript

Question

So basiclly i have 2 inputs, the first to put a number and the second one to put a string , so when the user submits , the result will be a new divs created , they will include the string that the user given , and their number also will be the number the user given.

useryzH21 · Answer

UPDATE: I've made some changes to the code, so, as you can see, this one uses actual tags.

You can click on the buttons, add divs or remove them, also using Enter keys too. Some styling to make it more 'compelling'.

Can this code be debug? sure! but I think this meet better its purpose as per your question.

Hope this helps!

let number = document.getElementById("number")
, sentence = document.getElementById("sentence")

//RANDOM COLOR OF STABLISHED PALETTE GENERATOR
, randomColor = function(min, max) {
    let colors = {pink: "#ff99c8", yellow: "#fcf6bd"
    , green: "#d0f4de", blue: "#a9def9", violet: "#e4c1f9"}
    , palette = ["pink", "yellow", "green", "blue", "violet"]
    , colorSelector = Math.floor(Math.random() * (max - min + 1) + min);
    return colors[palette[colorSelector]];
};
//FUNCTION TO CREATE DIVS
function createDivs() {
    for(let i = 1; i <= Number(number.value); i++){
        let div = document.createElement("div");
        div.className = "styled";
        div.style.backgroundColor = randomColor(0,4);
        div.appendChild(document.createTextNode(`${i}. ${sentence.value}`));
        document.body.appendChild(div);
    };
}
/* CREATE DIVS TRIGGERED BY CLICKING ON
OR PRESSING DOWN AN ENTER KEY THE INPUT FIELD OF NUMBER */
let add = document.querySelector("form");
add.addEventListener("submit", function(e){
    e.preventDefault();
    createDivs();
});
// FUNCTION TO REMOVE EACH DIV FOR CLEAR BUTTON
function removeDivs() {
let divs = document.querySelectorAll("div.styled")
for(eachDiv of divs) {
    eachDiv.parentNode.removeChild(eachDiv);
    }
};

// REMOVE DIVS TRIGGERED BY A CLICK ON CLEAR BUTTON
let clearBtn = document.getElementById("clearBtn");
clearBtn.removeEventListener("submit", createDivs())
clearBtn.addEventListener("click", function(e){
    e.preventDefault();
    removeDivs()
});

@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@700&display=swap');

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: rgb(216, 217, 255);
    display: inline-block;
    padding-top: 15px;
    padding-left: 15px;
}

.font {
    font-family: 'Quicksand', sans-serif;
}

.px18 {
    font-size: 18px;
}

.color {
    color: rgb(64, 63, 100);
}

.gray {
    color:rgb(151, 151, 151);
}

form {
    float:left;
    display: flex;
    flex-direction: column;
    width: fit-content;
    margin: 0px 10px 0px 0px;
}

label {
    margin-bottom: 15px;
}

#labeltwo {
    margin-top: 25px;
}

input {
    border-radius: 5px;
    border: 2px rgb(64, 63, 100) solid;
    padding: 5px;
    
}

button {
    max-width: fit-content;
    padding: 2px 15px;
    margin-top: 25px;
    border: 2px rgb(64, 63, 100) solid;
    border-radius: 5px;
    background-color: aquamarine;
}

#buttons {
    display: flex;
    align-items: center;
    justify-content:space-between ;
    border: none;
}

.styled {
    display: inline-block;
    padding: 5px 15px;
    margin: 5px 5px 5px 0px;
    border-radius: 10px;
    border: 2px rgb(64, 63, 100) solid;
    font-size: 1em;
}

*:focus {
    outline: 3px aquamarine solid;
}


    
        How many divs you want?
        
        Which content you want in them?

creating a new divs depending on the number that the user entered / javascript

1 Answers