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

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.

CodePudding user response：

there!

I think this is what you meant:

// Defining some variables
let number = prompt("How many divs you'd like?", "100")
, sentence = prompt("Now, type a sentence you want in them", "love u")

// This is just a random color generator of established colors 
, 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]];
};

// For loop iteration and DOM manipulation
for(let i = 1; i <= number; i  ){
    let div = document.createElement("div");
    div.style.backgroundColor = randomColor(0,4);
    div.appendChild(document.createTextNode(`${i}. ${sentence}`));
    document.body.appendChild(div);
};

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

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: rgb(216, 217, 255);
}

div {
    display: inline-block;
    padding: 5px 15px;
    margin: 5px;
    border-radius: 10px;
    border: 2px rgb(64, 63, 100) solid;
    font-family: 'Quicksand', sans-serif;
    font-size: 1em;
    color: rgb(64, 63, 100);
}

    <body>
        <script src="script.js"></script>
    </body>

Give it a run!

Hope this helps!