-2

So i wrote this code and im trying when i push the button to generate 4 random numbers on the rectangulars ( it would be great if it could generate 4 random results with numbers and letters up to 10 characters). whats the right approach for this? i have tried many things and now im stuck

thanks for your time

let passboxes = document.getElementsByClassName('grid-item')



function generatepass (){
    // let randomnumber = Math.floor(Math.random()*13 ) +1
    randomnumber = Math.floor(Math.random()*13 ) +1

    for (i=0 ; i<passboxes.length; i++) {
    
    passboxes[i].textContent +=  randomnumber 
    }
}
html , body {
    margin: 0;
    padding: 0;
    background-color: #1F2937;;
    color: #F9FAFB;
}
#bodydiv {
    margin-left: 62px;
}

#text1 {
    
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 200%;
    position: relative;
    margin-top: 64px;
    /* line-height: 10px; */
}

.tria {
    font-family: 'Cambria', 'Cochin', Georgia, Times, 'Times New Roman', serif;
    font-style: normal;
    font-weight: 300;
    font-size: 50%;
    line-height: 40px;

}

.duo{
    color: #F59E0B;
}
p{
    margin: 0;
}

#passbtn {
    padding: 10 15;
    color: #F9FAFB;
    margin-top: 30px;
    border: 0;
    background-color: #F59E0B;
    border-radius: 8px;
    font-size: 100%;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
}

.grid-container {
    display: inline-grid;
    grid-template-columns: auto auto;
    margin-top: 50px;
    column-gap: 30px;
    row-gap: 30px;
    
  }

.grid-item ,.grid-item2,.grid-item3,.grid-item4 {
    height: 20;
    background-color: #F59E0B;
    font-size: large;
    width: 200px;
    padding: 5 5;
    text-align: center;
    border-radius: 8px;
   
}
<html>
    <head>
        <link href="https://cdn.lineicons.com/3.0/lineicons.css" rel="stylesheet">
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
        <div id="bodydiv">
    <div id="text1">
        <p class="ena">Generate a</p>
        <p class="duo">random password</p>
        <p class="tria">Never use an insecure password again.</p>
    </div>
    <div>
        <button id="passbtn" onclick="generatepass()" ><i class="lni lni-lock-alt"></i> Generate passwords</button>
    </div>
    <div class="grid-container">
        <div id="mmm" class="grid-item">1</div>
        <div class="grid-item">2</div>
        <div class="grid-item">3</div>
        <div class="grid-item">4</div>
      </div>    
        <script src="index.js"></script>
    </div>
    </body>
</html>
nick glav
  • 39
  • 8

1 Answers1

0

not sure I would say this is scalable, but for the letters I would add the to an array

const letters = ["A","B".."Z"]

function generateRandomLetterArray(){
let randomLetterArr = []

for(i=0, i<{how every many random letters you want}, i++){

let randomNumber = {math random number between 0 and 25 (because there are 26 letters)}

randomLetter = letters[randomNumber]
randomLetterArr.push(randomLetter)
}
}

at this point you have a bunch of random letters in randomLetterArr