Ocena kodu JS :: 4programmers.net

0

Hej, co poprawić w kodzie, pewno by dało by się to skrócić ulepszyć jakie pomysły?

Program to taki generator nicków

<html>
    <head>
        <title>Website</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <fieldset>
            <div id="div-1">
                <input type="checkbox" class="numberRandomNickTen">
                <label for="numberRandomNick">Więcej niż 6 liter</label>

            </div>
            <div>
                <input type="checkbox" class="numberRandomNickFour">
                <label for="numberRandomNick">4 liter</label>
                
            </div>
            <div>
                <input type="checkbox" class="numberRandomNickFive">
                <label for="numberRandomNick">5 liter</label>
                
            </div>
            <div>
                <input type="checkbox" class="numberRandomNickSix">
                <label for="numberRandomNick">6 liter</label>
                
            </div>
            <div>
                <input type="checkbox" class="numberRandomNickNum">
                <label for="numberRandomNick">Number</label>
                
            </div>
            <div>
                <input type="checkbox" class="numberRandomNickSmall">
                <label for="numberRandomNick">Small words</label>
                
            </div>
        </fieldset>
        
        <button class="enter">Enter</button>
        <div class="demo"></div>
        <script src="script.js"></script>
    </body>
</html>

body{
    padding: 0;
    justify-content: center;
}
.enter{
    background: green;
    border-radius: 5px;
    width: 90px;
    height: 50px;

}
.demo{
    background:silver;
    width: 300px;
    height: 30px;
    width: 400px;
    text-align: center;
    padding: 50px;
}
input[type=checkkbox]:checked{
    display: none;
}
#numberRandomNick{
    display: block;

}

const btnEnter = document.querySelector('.enter');
const number = document.querySelector('.numberRandomNickTen');
const numberFour = document.querySelector('.numberRandomNickFour');
const numberFive = document.querySelector('.numberRandomNickFive');
const numberSix = document.querySelector('.numberRandomNickSix');
const num = document.querySelector('.numberRandomNickNum');
const small = document.querySelector('.numberRandomNickSmall');

const demo = document.querySelector('.demo');
const ae = ['A','E',"I",'J','O','Y'];
const bc = ['B','D','Z','K','P',"G",'F','W','T','P','S','N','M','L'];
const numO = ['1', '2', '3', '4', '5', '6', '7', '8','9'];

function zmiana(){
    
}
btnEnter.addEventListener('click', function(){
    if(number.checked == true){
        demo.innerText = randomTen();
        if(small.checked == true){
            demo.innerText = randomTen().toLowerCase()
        }
        if(num.checked == true){
            demo.innerText = randomTen() + addNum();
            if(small.checked == true){
            demo.innerText = randomFive().toLowerCase() + addNum();
        }
        }

    }
    else if(numberFour.checked == true){
        console.log('good job')
        demo.innerText = randomFour();
        if(small.checked == true){
            demo.innerText = randomFour().toLowerCase()
        }
        if(num.checked == true){
            demo.innerText = randomFour() + addNum();
            if(small.checked == true){
                demo.innerText = randomFive().toLowerCase() + addNum();
            }
        }
    }
    else if(numberFive.checked == true){

        demo.innerText = randomFive();
        if(small.checked == true){
            demo.innerText = randomFive().toLowerCase()
        }
        if(num.checked == true){
            demo.innerText = randomFive() + addNum();
            if(small.checked == true){
                demo.innerText = randomFive().toLowerCase() + addNum()
            }
        }
    }
    else if(numberSix.checked == true){
        
  
        demo.innerText = randomSix();
        console.log(randomSix());
        if(small.checked == true){
            demo.innerText = randomSix().toLowerCase()
        }
        if(num.checked == true){
            demo.innerText = randomSix() + addNum();
            if(small.checked == true){
                demo.innerText = randomSix().toLowerCase() + addNum();
            }
        }
    }
})
function addNum(){
    let generationNum = numO[Math.floor(Math.random() * numO.length)]
    return generationNum;
}
function randomTen(){
    let itemsAE = ae[Math.floor(Math.random() * ae.length)]
    let itemsBC = bc[Math.floor(Math.random() * bc.length)]
    
    let itemsAEE = ae[Math.floor(Math.random() * ae.length)]
    let itemsBCC = bc[Math.floor(Math.random() * bc.length)]
 
    let itemsAEEE = ae[Math.floor(Math.random() * ae.length)]
    let itemsAEEEE = bc[Math.floor(Math.random() * bc.length)]

    let itemsAEEEEE = ae[Math.floor(Math.random() * ae.length)]
    let itemsAEEEEEE = bc[Math.floor(Math.random() * bc.length)]

    let itemsAEEEA = ae[Math.floor(Math.random() * ae.length)]
    let itemsAEEEEA = ae[Math.floor(Math.random() * ae.length)]

    return itemsAE + itemsBC + itemsAEE + itemsBCC + itemsAEEE+ itemsAEEEE + itemsAEEEEE + itemsAEEEEEE + itemsAEEEA + itemsAEEEEA;
}

function randomFour(){
    let itemsAE = ae[Math.floor(Math.random() * ae.length)]
    let itemsBC = bc[Math.floor(Math.random() * bc.length)]
    
    let itemsAEE = ae[Math.floor(Math.random() * ae.length)]
    let itemsBCC = bc[Math.floor(Math.random() * bc.length)]

    return itemsAE + itemsBC + itemsAEE + itemsBCC;
}


function randomFive(){
    let itemsAE = ae[Math.floor(Math.random() * ae.length)]
    let itemsBC = bc[Math.floor(Math.random() * bc.length)]
    
    let itemsAEE = ae[Math.floor(Math.random() * ae.length)]
    let itemsBCC = bc[Math.floor(Math.random() * bc.length)]
    let itemsAEEE = ae[Math.floor(Math.random() * ae.length)]

    return itemsAE + itemsBC + itemsAEE + itemsBCC + itemsAEEE;
}
function randomSix(){
    let itemsAE = ae[Math.floor(Math.random() * ae.length)]
    let itemsBC = bc[Math.floor(Math.random() * bc.length)]
    
    let itemsAEE = ae[Math.floor(Math.random() * ae.length)]
    let itemsBCC = bc[Math.floor(Math.random() * bc.length)]
 
    let itemsAEEE = ae[Math.floor(Math.random() * ae.length)]
    let itemsAEEEE = ae[Math.floor(Math.random() * ae.length)]

    return itemsAE + itemsBC + itemsAEE + itemsBCC + itemsAEEE+ itemsAEEEE;
}

2

na pierwszy rzut oka

nazwy w stylu itemsAEEEEA nic nie mówią
zamiast deklarować dużo zmiennych to lepiej mieć tablicę items, dodać do niej elementy i na końcu zrobić .join("")
kod się powtarza, zauważ że np. randomSix to randomFive + jeden znak

0

Z ciekawosci, z czego wynikaja nazwy constow ae, bc oraz num0?

2

polecam naukę pętli for. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for
bo robić to w ten sposób jest niepoważne.

wystarczy, że wydzielisz funkcję, która jest w stanie obsłużyć ileś liczb naraz:

function randomN(n){
   for (let i = 0; i < n; i++) {
     const rnd = Math.random();
     // ....tutaj coś robimy z randomową liczbą...
   }
   // .......
}

poza tym <input type="radio"> lepiej by pasował niż checkbox (różnica jest taka, że checkbox działa on/off, a w radio tylko jeden jest aktywny, więc to, co chcesz)
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio

const ae = ['A','E',"I",'J','O','Y'];
const bc = ['B','D','Z','K','P',"G",'F','W','T','P','S','N','M','L'];

nazewnictwo ae i bc jest jasne tylko wtedy, kiedy widzisz te dwie linijki kodu wyżej. "aaa, nie wiedziałem, co to jest, a przecież ae to samogłoski, bc to spółgłoski. To ma sens". Natomiast są to strasznie niejasne nazwy jako tako (a kiedyś sam możesz wejść w swój kod i mieć WTF "co to było to ae i bc?")
Lepiej byłoby nazwać to vowels i consonants.
poza tym o ironio tablica bc nie zawiera litery C XD
No i co robi J w pierwszej tablicy?

Ocena kodu JS

1 użytkowników online, w tym zalogowanych: 0, gości: 1

Praca dla programistów

Forum dyskusyjne

Sprawy administracyjne

O nas

Skontaktuj się z nami