JavaScript Tutorial & Real JavaScript Projects

I have been using this tutorial:

For some reason, when I run my code when he does at 15:00, it will say “Code not supported or defined”. Can someone tell me how to fix this? I am a beginner and can’t find a solution on Google. This has happened a lot during the project for me. Sometimes I can fix this by saving it as, but sometimes, I can not.

Hey @Josh641,

I don’t really know which part your talking about, can you specifically give us the code you are having a problem with.

Anyways, if you’re talking about the CSS, did you link your CSS to your HTML?, because if you don’t that might be the issue. Did you correctly link it, try to check if you have a typo on your link.

I really don’t know where the problem is but I will send you some images of the code.

Can you give use the code instead, so it’s easier for me to troubleshoot this? When you want to showcase a code, use the ``` backtick so it is easier for everyone to read.
See this post to find the backtick on your keyboard.
The “preformatted text” tool in the editor (</>) will also add backticks around text.

1 Like

Like This?

No, like Copy Pasting your code here. Or since you’re using VSCode, we can use a different approach, which is using the Live Share extension.

Like This?

<!dOCTYPE html>
<html lang="en">
   
<head>
        <meta charset="utf-8">
        <meta name="viewport" content="width = device-width,
        initial-scale = 1">
        <title>Javascript Tutorial</title><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
        <link rel="stylesheet" type="text/css" href="mainstyle.css">
        <script src="Project.js"></script>

    </head>
    


    <body>
        <div class="container">
            <div class="jumbotron">
                <h3>MadLib Generator</h3>
                <form class="form-inline">
                    <input type="text" class="form-control"
                    id="i0" value="Person"/>
                    <input type="text" class="form-control"
                    id="i1" value="Noun"/>
                    <input type="text" class="form-control"
                    id="i2" value="Verb"/>
                    <input type="text" class="form-control"
                    id="i3" value="Verb"/>
                    <input type="text" class="form-control"
                    id="i4" value="Verb"/>
                    <input type="text" class="form-control"
                    id="i5" value="Verb"/>
                    <input type="text" class="form-control"
                    id="i6" value="Plural Verb"/>
                    <input type="text" class="form-control"
                    id="i7" value="Verb"/>
                    <input type="text" class="form-control"
                    id="i8" value="Ajective"/>
                    <input type="text" class="form-control"
                    id="i9" value="Noun"/>
                    <input type="text" class="form-control"
                    id="i10" value="Event"/>
                    <input type="text" class="form-control"
                    id="i11" value="Noun"/>
                    id="i12" value="Body Part"/>
                    <input type="text" class="form-control"
                    id="i13" value="Noun"/>
                
                
                </form><br><br>
                <button type="submit" class="btn-lg" 
                onClick="alert('Hello')">Hello</button> 
                <button type="submit" class="btn-lg" 
                onClick="calcPI()">Get PI</button>
                <button type="submit" class="btn-lg" 
                onClick="getFibList()">Get Fibs</button>  
                <button type="submit" class="btn-lg" 
                onClick="madLibGenerator()">MadLib 
                Generate</button><br><br>
                <div class="input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text">Output
                        </span>
                    </div>
                    <textarea id="output1"  rows="18" 
                    class="form-control"></textarea>
                </div> 

            </div>
        </div>
               
              
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    </body>
</html>

Yes, can you give us the CSS to?

The CSS is from Bootstrap right here. I used BootstrapCDN:

I don’t really see any problems. All he does in 15:00 is change the background color and the text color using the css selector class. I don’t see how it will create an error.

Could it possibly be outdated?

As I already said, it shouldn’t do any error, because it’s just normal plain CSS styles, I don’t know what’s causing this.

Alright, thanks for your time!

1 Like

You can try to use the newer version of BootStrap CDN and maybe that might work. I’m just trying to troubleshoot one by one here.

Did not work. :frowning:

When you said “run the code”, what do you mean by this? Did open the HTML file? Did you use Live Server?

What? What are you talking about?

Here, what do you mean by “run the code”? Did you mean open the HTML file? or what did you do?

Ok, another problem I see in your code is why is there A lot of ``` in your code?

That was from when you first asked me to give the code. It does not affect anything.