Working Together explainer

Aim of the puzzle: Use HTML, CSS and JavaScript together.
Walk through of solution: In this puzzle, you will use HTML to add an element to a page, CSS to style the element, and JavaScript to modify it.

To complete the HTML portion of the puzzle, navigate to the HTML tab and add a 2nd <h1> tag with the text “Dislikes”.

To complete the CSS portion, change the color property in the h1 ruleset to something other than blue. You can use RGB values (for example: rgb(50, 100, 0) or one of the 140 built-in css colors.

To complete the JS portion, change the textContent of likes to a different string, for example: 'I used HTML, CSS, and JS'.

Sample code solution:

HTML

<html>
    <body>
        <h1 id='likes'>Likes</h1>
        <h1>Dislikes</h1>
    </body>
</html>

CSS

body {
    background-color: white;
}

h1 {
    color: red;
}

JavaScript

let likes = document.getElementById('likes');
likes.textContent = 'I used HTML, CSS, and JS!';

Javascript Concepts: Document Object, document.getElementById, .textContent property
HTML Concepts: h1 Header Element, Body Element
CSS Concepts: Ruleset, Rule, Selector, color property

The code is not working. It is exactly same as the solution shows but it will not run.

Hey there, post a screenshot of your code and I’ll take a look.

–Ben

45%20PM

That looks fine to me. Have you also completed the CSS and JS portions of the puzzle? What feedback message are you seeing when you run the code?

–Ben

Yes, I have completed CSS and JS portions. I got this when I tried to run the code:

It’s possible that you could be seeing the wrong feedback message, and that the actual problem is something else. Can you post some screenshots of the CSS and JS?

Thanks for your patience,
Ben

44%20PM

Weird! Those all look fine to me.

Try the following things:

  1. Check if you have any browser extensions enabled that might change HTML/CSS on webpages you visit. If you’re not sure, try disabling each installed extension temporarily, one at a time, and seeing if that solves the problem.

  2. Try switching to a different browser temporarily.

If you’re able to solve the problem, please let me know, as other users with the same issue will be able to see the solution.

Thanks! Good luck,
Ben

I have tried to disable the extensions and switching to different browser. Nothing is working.

Hey there, thanks for trying all of those things, and thanks for your patience. Try submitting a bug report from the website by clicking on the 3-dot menu button and selecting “Send Feedback”.

Thanks again!
Ben

Hi- My fiancée figured it out. Apparently I entered hl instead of h1. Whoops. Thank you for all of your help!

They look so similar, I didn’t even notice! Glad to hear you got past the problem.
Ben

I’m having the same issues with the code not running. I uploaded my screenshots for verification. I also tried to run the code on two other browsers firefox and explorer.Capture1|607x293 !