Can someone take a look at my code please

Question

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Color Generator</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
</head>
<body>
    <header>
        <a href="#" class="logo">Random Color Generator</a>
        <p>Click on the Generate Color Button to Generate a Random Color!</p>
    </header>
    <div class="main">
        <div id="blank-sheet"></div>
        <div class='button-div'>
            <button type="button" id="btn">Generate Color</button> 
        </div>
    </div>





    <script href="app.js"></script>
</body>
</html>

*, *::after, *::before {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
}

header {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-content: center;
    margin-left: 10%;

}

.logo {
    font-size: 3rem; 
    text-decoration: none;
    color: gray;
}

.main {
    margin-top: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

#blank-sheet {
    width: 60vw;
    height: 40vh;
    margin: 0 auto;
}

.button-div {
    margin-top: 1.5rem;
    padding-left: 40%;

}

#btn {
    font-size: 1.2rem;
    padding: .4rem;
}

const button = document.getElementById('btn');
const sheet = document.getElementById('blank-sheet');

function randomColor(){
     const x =  Math.floor(Math.random() * 255);
     const y =  Math.floor(Math.random() * 255);
     const z =  Math.floor(Math.random() * 255);
     const result = sheet.style.backgroundColor = 'rgb(x, y, z)';
     return result;
    }

button.addEventListener('click' randomColor());

console.log(randomColor());

Can someone let me know why my code isn't working and maybe give me suggestions on making it better? I am doing this practice project to improve my skills and find everything really difficult. pls help

Answer 1 · 2021-07-13T20:08:57Z

July 13, 2021 8:08pm

Hi Mahmoud. I found some issues in your code so let's look at them and fix it to make it work for you :)

1/ First of all, <script> tag in your HTML file does not use 'href' attribute to link the external javascript file but 'src' attribute do. You can fix it by simple change.

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

2/ Next, in your function randomColor() you made 3 issues:

you omitted the comma on line 12 of your javascript file between click type and randomColor() function
you should not use the brackets at the end of the function name because it expects object not function (also on line 12)
unfortunately you used the variables (x,y,z) as a string

Please, look at the function bellow and see what was wrong. Also, you can do not need to define another variable for the line with backgroundColor because you can write it inline if it is the function result. (optional)

function randomColor(){
    const x =  Math.floor(Math.random() * 255);
    const y =  Math.floor(Math.random() * 255);
    const z =  Math.floor(Math.random() * 255);
    return sheet.style.backgroundColor = 'rgb('+x+','+y+','+z+')';
}
button.addEventListener('click', randomColor); // Line 12

I hope this will help you :) Good luck and happy coding, Martin.

Welcome to the Treehouse Community

Looking to learn something new?

Mahmoud Talass

Mahmoud Talass

Can someone take a look at my code please

1 Answer

Martin Ulč

Martin Ulč

Mahmoud Talass

Mahmoud Talass