DOM Manipulation: Unable to get Border Color & Background Color

Hello! The following code uses DOM. I can get the texts to show up. However, the border color and background color of the child div is not showing up. I followed the format that was listed in the DOM Manipulation module under JavaScript Basics part.

<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
  <meta charset="UTF-8"/>
</head>
<body>
  <div id = "container"></div>
<script>

const container = document.querySelector('#container');

const content = document.createElement('div');

content.classList.add('content');

content.textContent = 'This is the glorious text-content!';

const content2 = document.createElement('div');

content2.setAttribute('style', 'borderColor:black; backgroundColor:pink');

const heading1 = document.createElement('h1');

heading1.textContent = "I'm in a div";

const para2 = document.createElement("p");

para2.textContent = "ME TOO!";

content2.appendChild(heading1);

content2.appendChild(para2);

container.appendChild(content2);

</script>
</body>
</html>

Hi krle11,

You should be using CSS syntax, so border-color and background-color. This is opposed to if you were doing it this way:

content2.style.backgroundColor: pink

You are also just setting the color of the border, not the style or width. I believe you need all three. You could do each separately or just write

'border: black 1px solid; background-color: pink'

hey can we study together?? i am stuck on right there?

@krle11 can we be study pal. it seems we both are on same path?

Sure! Sorry for the late reply!

I am still stuck on it. Did you figure it out?

yah @krle11 what’s ur discord username so i add you?

@krle11 discord = zieeco#8429 . you can add me if you don’t mind