FAQ: Languages for Web Development - JavaScript Functions

Frequently Asked Questions JavaScript FAQ
21

Dear Codecademy,

Please teach the syntax of the code and all the formatting before asking us to copy and paste anything. It will help with the learning process. Thank you!

1 Like
22

color += letters[Math.floor(Math.random() * 16)]; //this is the line thats the most confusing i believe this is an array letters[Math.floor(Math.random() * 16)] a letters array that has Math.floor function passed into it with variable Math.random()*16. //the syntax or code for these is not shown i belive

but the for loop is for the letters it starts at 0 and increments by 1 each time the loop finishes until the value of i reaches 6

23

Was confusing to me too. But after searching a bit it looks like you can access the index of a string like with an array: String - JavaScript | MDN

24

The background change effect is cool. I have a question which is coming from a few things we learned so far, and I’m wondering how one would put it together. We’ve learned that with Javascript its about interactivity, so when I click a button, the website responds in a certain way. We’ve learned about anchors and ids, through HTML and CSS so that if I click a certain button, it will take me to a certain part of the page. Now that I see this, I have this cool creative idea I would like to try, but not sure how you would go around creating it. Taking those two, if I wanted to click on a button, that would take me to a certain “space” on the webpage, and the background changes from one hex color to another hex color, but instead of a solid cut, it would be a gradient transition, how will you do that?? I know it will include these four parts… but wonder if the gradient aspect would be a lot more complicated…

25

Some research on the topic would do. You already knew how to create HTML elements, like so:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Gradient Transition Example</title>
</head>
<body>
    <button onclick="">Go to Section 1</button>

    <div id="section1" class="section">
        <h1>Section 1</h1>
    </div>

    <div id="section2" class="section">
        <h1>Section 2</h1>
    </div>

    <div id="section3" class="section">
        <h1>Section 3</h1>
    </div>

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

You also know basic styling in CSS as such:

body {
    margin: 0;
}

.section {
 font-size: 50px;
 display: flex;
 justify-content: center;
}

#section1 {
    background: linear-gradient(direction, from_color, to_color);
}

Now, all you need is some basic JS code that can randonly generate hex color code for you to transition from and to. You will also need a JS logic code on transitioning background effects and apply them to your CSS styling code.

function getRandomHexColor() {
    return // your code here;
}

function changeBackground(sectionId) {
    // your code here
}

This should be left as a research for you, but with the right resources, it won’t take much time for you to get there!

26

You are so awesome and helpful! Thank you! I’ll start with this!

1 Like
27

How can I copy code in Java?