Https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js not working

Https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js not working
0

#1

I cant use the <script src="<https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>. Im pasting how I used it (inside the head). What can I do to make it work?

<script src="<https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"> /script>


#2

Is your project on Codepen or offline?


#3

It’s offline. I’m working on brackets.


#4

Can you post your code in a reply to this post?

To enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make easier 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.

Note: Backticks are not single quotes.


#5

@FelipeMacenaAlves Try putting it at the end of your code right before the </body>, I think I had that happen to me once and this fixed it - no promises


#6

HTML:

<!DOCTYPE html>
<html land="en">
<head>     
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--<meta http-equiv="refresh" content="3">-->
<meta name="SurveyForm" content="A survey form.">
<link rel="stylesheet" href="main.css">
<title>Tribute page</title>
<meta charset="utf-8">
<script src="<https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
</head>
<body>
    <h1 id="title">Survey</h1>
    <p id="description">We are interested to know more about how sports are present in people's lives.<br> So, please fill this short form.
    <form id="survey-form">
        <div class="parts">
            <label id="name-label" class="questions">
            *Name: 
            </label>
            <input class="text-input" type="text" id="name" placeholder="ex: James Tyler" required>
        </div>
        
        <div class="parts">
            <label id="email-label" class="questions">
            *E-mail: 
            </label>
            <input class="text-input" type="email" id="email" placeholder= "ex: [email protected]" required>
        </div>
        
        <div class="parts">
            <label id="age-label" class="questions">
            *Age: 
            </label> <input class="text-input" type="number" min="10" max="100" id="number" placeholder="10-100" required>
        </div>
        
        <div class="parts">
            <label id="sport-label" class="questions">
            Which sport do you prefer? 
            </label> 
            <select name="sport" class="drop-down" id="dropdown" form="survey-form" required>
                <option value="" disabled selected>Select one option</option>
                <option value="American Football">American Football</option>
                <option value="Volleyball">Volleyball</option>
                <option value="Basketball">Basketball</option>
                <option value="Baseball">Baseball</option>
                <option value="Running">Running</option>
            </select>
        </div>
        
        <div class="parts">
            <label id="freq-label" class="questions">
            How often do you practice sports? 
            </label> 
            <ul id="radio-options" class="options">
            <li> <input type="radio" name="frequency" value="never"><label>Never</label> </li>
            <li> <input type="radio" name="frequency" value="once"><label>Once a week</label> </li>
            <li> <input type="radio" name="frequency" value="twice"><label>Twice a week</label> </li>
            <li> <input type="radio" name="frequency" value="three"><label>Three times a week</label> </li>
            <li> <input type="radio" name="frequency" value="more"><label>More than three times a week</label> </li>           
            </ul>
        </div>
        
        <div class="parts">
            <label id="channel-label" class="questions">
            Which sports channels do you watch? 
            </label> 
            <ul id="check-options"  class="options">
            <li> <input type="checkbox" name="channel" value="espn"><label>ESPN</label> </li>
            <li> <input type="checkbox" name="channel" value="fox"><label>FOX Sports</label> </li>
            <li> <input type="checkbox" name="channel" value="cbs"><label>CBS Sports</label> </li>
            <li> <input type="checkbox" name="channel" value="eleven"><label>Eleven Sports</label> </li>
            <li> <input type="checkbox" name="channel" value="sportsman"><label>Sportsman Channel</label> </li>
            <li> <input type="checkbox" name="channel" value="stadium"><label>Stadium</label> </li>
            <li> <input type="checkbox" name="channel" value="none"><label>None of the above</label> </li>          
            </ul>
        </div>
        
        <div class="parts">
            <label id="commentary-label" class="questions">
            Anything that you would like to receive from sports channels, but none of them give to you? 
            </label>
            <textarea class="text-input" id="commentary" name="textarea" form="survey-form" placeholder="Write Here..."></textarea>
        </div>
        
        <input id="submit" type="submit" value="Submit">
        
    </form>

</body>     
</html>

CSS:

html {
    height: 100%;
    padding: 0;
    margin: 0;
}
.questions {
        display: inline-block;
        text-align: right;
        width: 50%;
        vertical-align: top;
    }

body {
    background-color: skyblue;
    min-width: 300px;
    min-height: 100%;
    margin: 0;
}

form {
    padding: 1% 10%;
    background-color: #C1CAD6;
    width: 80%;
    height: 100%;
    border-radius: 15px;
    max-width: 500px;
    margin: 0 auto;
}

#title, #description {
    text-align: center;
}

.text-input {
    display: inline-block;
    border-radius: 3px;
}

#email:not(:placeholder-shown):invalid {
    border: 2px solid red;
}
#number:not(:placeholder-shown):invalid {
    border: 2px solid red;
}
.options {
    display: inline-block;
    list-style: none;
    vertical-align: top;
    margin: 0 auto;   
    text-align: left;
    padding: 0;
}

.parts {
    margin: 0 0  2% 0;
}

#commentary {
    height: 50px;
    width: 40%;
    resize: vertical;
}

#submit {
    display: block;
    margin: 0 auto;
    width: 15%;
    min-width: 60px;
}


#7

It didn’t work man :confused:


#8

You have a typo in the following line:

<script src="<https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

Look before the https and you should see something which does not belong. Also, definitely move the script element to the line right before the closing body tag </body> and it will work as intended.

Sorry for not noticing the typo before now.


#9

It worked man! Thanks a lot.

In time, why it does work only when I put it right before the </body>?


#10

There is code contained in the bundle.js which attempts to add the test menu to the body of the page. I believe because the the script loads and executes before the body has finished loading (because the opening body tag is placed after the script element), the script errors out, which causes no menu to load. Moving it to the bottom of the body element allows time for enough of the body to have loaded, that the bundle.js code does not error out.

This is just a theory based on the error message I saw in the browser console when it is placed in the head.


#11

I really appreciate your time, man!


#12

Actually, I am 100% confident now, because I moved the script element just after the opening body tag and there were no errors and the menu loaded. What you could do is leave the script element in the head element, but use defer like:

<script defer src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

Adding defer tells JavaScript the script should execute until the page has finished parsing.