Spotify Survey Page Feedback

Hi all! I finished my survey page. I really like Spotify’s UI and I wanted to incorporate their style. Feedback is greatly appreciated :slight_smile:

Survey Project: https://codepen.io/ch4rmelle/pen/MWjKVqa

Thank you!

1 Like

Hey there,

Your page looks good. A few things to consider:

  • Your radio buttons and checkboxes do not have labels, so the text isn’t clickable to select the option.
  • <option value="Barely">Minimal Listener</option> Your value here is different than your text option. Was that intentional?
  • <img id="logo"src="https://www.freepnglogos.com/uploads/spotify-logo-png/file-spotify-logo-png-4.png" alt"Spotify Logo"> Your alt here is missing the =.
  • I really like the addition of a reset button, that’s very creative. I would recommend adding a blank “default” option for your dropdown, so the reset button could switch that too.
1 Like

Appreciate the feedback! The <option value="Barely">Minimal Listener</option> was something I forgot to change. Oops. Thanks for catching some of those mistakes. I’ll make some changes now :smiley:

That’s a good idea! Thanks!

1 Like

Your form look good @cjgon123. Some things to revisit;

  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in the HTML editor. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
  • Run your HTML code through the W3C validator.
    • There are HTML coding errors you should be aware of and address.
2 Likes

Thank you @Roma for the feedback!

I went and did that but I’m wondering why <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script> doesn’t show up on the page when I do that? Only when I have it in the HTML editor.

The test script is JS and expects/needs the page to be loaded first. If the test script is in head then, since it loads first, there is no HTML. The test script needs to be right before the closing body tag to work correctly.

In codepen, it can be at the top or bottom of the HTML editor. Or, you can click the gear icon in the upper left of the JS editor and paste the link to the CDN. See the attached screenshot

1 Like

Good to know, thank you!

1 Like