<body>
    <section class="preview">

    </section>    
</body>
<style>
        * {
            box-sizing: border-box;
        }
        
        p {
            color: purple;
            margin: 0.5em 0;
        }
    </style>

        const names = [
            'Chris', 
            'Li Kang', 
            'Anne', 
            'Francesca', 
            'Mustafa', 
            'Tina', 
            'Bert',
            'Jada'
        ];
        const para = document.createElement('p');
    
        // Add your code here

        function random(lowBound, uppBound) {
            return Math.floor(Math.random() * (uppBound - lowBound)) + lowBound;
            //return Math.floor(Math.random() * upBound);
        }

        function chooseName(arrNames) {
            lower = 0;
            upper = arrNames.length;
            idx = random(lower, upper);

            para.textContent = arrNames[idx];

            console.log(idx);
        }
     
        chooseName(names);
        
        // Don't edit the code below here!
    
        const section = document.querySelector('section');
    
        section.appendChild(para);
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.