Debuging my 1/4 complete survey page

#1

Hello everyone, I come in need of debugging help; full disclosure this code is not complete, the CSS has not been written either so please look at the questions and the questions alone because the code is incomplete

so first I want to talk about the test script that freecodecamp wants us to use in codepen, here’s my total code so far

<!DOCTYPE html>
<!--
    this is how you comment
-->
<html>
    <!--this is the link to the CSS for the form and main element
    8/21/2020-->
      <!--The name attribute specifies the name of an <input> element.
         The name attribute is used to reference elements in a JavaScript, 
        or to reference form data after a form is submitted. 8/28/2020-->
<link rel="stylesheet" href="Surveyform.css">
<!--This is the link to the JS for Testing-->
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<main id="main">
<div class="container">

    <header class="header">

    <h1 id="title" class="text-center">What are your Technology preferences?</h1>
    <p id="description" class="description text-center">Thank you for taking this survey! This survey improves the content of the blog to accommodate all users.</p>
</header>
<!--The form is below this line-->
<form id="survey-form">
    <div class="form-group">
        <label id="name-label" for="name">Name</label>
        <input
        type="text"
        name="name"
        id="name"
        class="form-control"
        placeholder="Enter Name Here"
        required
        />
</div>

<div class="form-group">
<label id="email-label" for="email">Email</label>
<input
type="email"
name="email"
id="email"
class="form-control"
placeholder="Enter Your Email Please"
required/>
</div>

<div class="form-group">

    <label id="number-label" for="number"
    >Age<span class="clue">(optional)</span></label
  >

  <input
    type="number"
    name="age"
    id="number"
    min="10"
    max="99"
    class="form-control"
    placeholder="Age"
  />

</div>
<div class="form-group"></div>
<p>What OS do you use as your main computer Operating system?</p>
<select name="Computer OS Dropdown" id="dropdown" class="form-control" required>

<option disabled selected value>Select OS</option>
<option value="Windows 10">Windows 10</option>
<option value="Windows 7">Windows 7</option>
<option value="Mac OS">Mac OS</option>
<option value="ChromeOS-desktop)">Chrome OS</option>
<option value=Linux>Linux</option>
<option value="iPadOS-desktop">iPadOS</option>
<option value="Other-computerOS">Other</option>
</select>
</div>

<div class="form group">
  <p>If you selected "other" please explain your selection</p>
  <input type="text" name="other-textbox" id="textbox-computer">
</div>

<div class="form-group"></div>
<p>What OS does your Phone use?</p>
<select name="Phone OS Dropdown" id="phone-dropdown" class="form-control" required>
<option disabled selected value>Select OS</option>
<option value="iOS(iPhone)">iOS/iPhone</option>
<option value="Android">Android</option>
<option value=Linux>Linux</option>
<option value="other-PhoneOS">Other</option>
</select>
</div>

<div class="form group">
  <p>If you selected "other" or "Linux" please explain your selection</p>
  <input type="text" name="other-textbox" id="textbox-other-phone">
</div>

<div class="form-group">
<p>What OS does your Tablet use?(optional)</p>
<select name="Tablet OS Dropdown" id="tablet-dropdown" class="form-control">
<option disabled selected value>Select OS</option>
<option value="iPad OS(iPad)">iPadOS(iPad)</option>
<option value="Android">Android</option>
<option value="Windows tablet">Windows 10</option>
<option value="ChromeOS-Tablet">Chrome OS</option>
<option value=Linux>Linux</option>
<option value="other-TabletOS">Other</option>
</select>
</div>

<div class="form group">
  <p>If you selected "other" or "Linux" please explain your selection</p>
  <input type="text" name="other-textbox" id="textbox-other">
</div>

<div class="form-group">

<p>Would you recommend BenTechCode to a friend?</p>
<label>
  <input
  name="user-recommend"
  value="definitely"
  type="radio"
  class="input-radio"
  checked
  />
For Sure!</label>
<label>
  <input
  name="user-recommend"
  value="maybe"
  type="radio"
  class="input-radio"
checked
  > Not so Sure....
</label>

<label>
  <input
  name="user-recommend"
  value="no"
  type="radio"
  class="input-radio"
  checked>
Never</label>
</div>

<div class="form-group">
  <p>What topics would like more coverage of?
  <span class="clue">(Check all that apply)</span></p>

<label>
<input 
name="prefer"
value="Android-Wear OS-ChromeOS"
type="checkbox"
class="input-checkbox"
>Android-WearOS-ChromeOS</label>
</div>






</form>





</main>

</html>

So, it went up to user story 12 before I hit a snag, user story 13 says " Inside the form element, I can select a field from one or more groups of radio buttons. Each group should be grouped using the name attribute. Each radio button must have a value attribute." My code should satisfy this but for some reason it doesn’t, I changed the name in the tags to keep them the same and included value tags, what have I done wrong?

the next part of my problems are from the W3 validator,

image
image2446×850 117 KB

as you can see from my complete code all those tags are closed so please explain how I can fix them.

Thanks in advance, BenTechCoder/Cy499_Studios

#2

Hello there,

A decent text editor should catch these errors for you (I use VS Code). Take a look at your structure:

<main id="main">
<div class="container">

    <header class="header">

    <h1 id="title" class="text-center">What are your Technology preferences?</h1>
    <p id="description" class="description text-center">Thank you for taking this survey! This survey improves the content of the blog to accommodate all users.</p>
</header>
<!--The form is below this line-->
<form id="survey-form">

That is this reduced:

  • main > div > form

This is what your script ends with:

</div>

</form>

</main>

That is this reduced:

  • main > form > div

Do you see the issue?

Hope this helps

1 Like
#3

Yeah I use VS Code as well but it’s told me nothing serious far, I’m a begginer si if there’s like a way to format code in VS code I don’t know about it, also I don’t see the issue, just looking at the answer I think I need to re-order my code tags so they go in the order that I stated them?

So both ways should go main, div, form instead of the way they are now.

Please provide some more feedback so I can be sure of my code :cowboy_hat_face:.

#4

With VS Code you should just be able to go to the extensions tab, and install an HTML and CSS extension that will help.

This exactly.

Think of it like this:

  • HTML is the markup of a bunch of boxes.
  • How would you put these boxes on a page:
<main>
  <section>
    <div>
  </section>
    </div>
</main>

Fortunately/Unfortunately, HTML’s compiler is very forgiving. So, instead of breaking your page outright, or not compiling, it takes a guess at how to arrange the content.

Keep at it. Your code above just had a small syntax error. :smiley:

#5

Thanks!:blush::+1: I’ll be sure to look for an extension to help, which extension do you recommend? Or should I look one up online?

#6

Currently, the only extension I have that analyses HTML or CSS is ESLint (easy to find, with over 10 million downloads). Otherwise, you are best searching through a few related specifically to HTML and/or CSS.

Cheers

#7

Thank you so much, have a nice day!

#8

It says I have ESLint installed and enabled already, if it was already installed why did it not warn me? is there a setting I should toggle or an alternative I should try?

#9

I have just tested HTMLHint, and it looks promising. As for ESLint, I am not sure why it is not providing any related information.

#10