I cant use the <script src="<https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>. I
m 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>
3 Likes
It’s offline. I’m working on brackets.
1 Like
moT01
September 28, 2018, 2:05am
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 Likes
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: abcd@gmail.com" 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;
}
1 Like
It worked man! Thanks a lot.
In time, why it does work only when I put it right before the </body>
?
1 Like
I really appreciate your time, man!
Thanks. I had similar problem too.
I moved the script element to the line before tag /body and it work now.
3 Likes
Thank you too. I had similar problem and helped me Randell.