Untitled

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>My color palette</title>
<style id="jsbin-css">
#rectangleWrapper {
  padding: 50px 50px 0 50px;
}

.favoriteColor {
  border: 1px solid #333;
  width: 100px;
  height: 30px;
}

#medium-sea-green {
  background-color: #3CB371;
}

#light-yellow {
  background-color: #FFFFE0;
}

#teal {
  background-color: #008080;
}

#indian-red {
  background-color: #CD5C5C;
}

#misty-rose {
  background-color: #FFE4E1;
}

#gray {
  background-color: #808080;
}

#deep-sky-blue {
  background-color: #00BFFF;
}

#chocolate {
  background-color: #D2691E;
}

#light-grey {
  background-color: #D3D3D3;
}

#purple {
  background-color: #800080;
}
</style>
</head>
<body>
  <h1>My color palette</h1>
  <h2>Top 10 favorite colors</h2>

  <div id="rectangleWrapper">

  </div>
<script id="jsbin-javascript">
const colors = {
  "Medium Sea Green": "#3CB371",
  "Light Yellow": "#FFFFE0",
  "Teal": "#008080",
  "Indian Red": "#CD5C5C",
  "Misty Rose": "#FFE4E1",
  "Gray": "#808080",
  "Deep Sky Blue": "#00BFFF",
  "Chocolate": "#D2691E",
  "Light Grey": "#D3D3D3",
  "Purple": "#800080"
};

const rectangleWrapper = document.getElementById("rectangleWrapper");

console.log("Here are the rectangle IDs");

for (color in colors) {
  const colorId = color.toLowerCase().replace(/ /g, "-");
  const newItem = document.createElement("div");
  newItem.id = colorId;
  newItem.className = "favoriteColor";

  const colorCode = document.createElement("p");
  colorCode.innerText = colors[color];

  rectangleWrapper.appendChild(newItem);
  rectangleWrapper.appendChild(colorCode);
  console.log(colorId);
}
</script>


<script id="jsbin-source-css" type="text/css">#rectangleWrapper {
  padding: 50px 50px 0 50px;
}

.favoriteColor {
  border: 1px solid #333;
  width: 100px;
  height: 30px;
}

#medium-sea-green {
  background-color: #3CB371;
}

#light-yellow {
  background-color: #FFFFE0;
}

#teal {
  background-color: #008080;
}

#indian-red {
  background-color: #CD5C5C;
}

#misty-rose {
  background-color: #FFE4E1;
}

#gray {
  background-color: #808080;
}

#deep-sky-blue {
  background-color: #00BFFF;
}

#chocolate {
  background-color: #D2691E;
}

#light-grey {
  background-color: #D3D3D3;
}

#purple {
  background-color: #800080;
}</script>

<script id="jsbin-source-javascript" type="text/javascript">const colors = {
  "Medium Sea Green": "#3CB371",
  "Light Yellow": "#FFFFE0",
  "Teal": "#008080",
  "Indian Red": "#CD5C5C",
  "Misty Rose": "#FFE4E1",
  "Gray": "#808080",
  "Deep Sky Blue": "#00BFFF",
  "Chocolate": "#D2691E",
  "Light Grey": "#D3D3D3",
  "Purple": "#800080"
};

const rectangleWrapper = document.getElementById("rectangleWrapper");

console.log("Here are the rectangle IDs");

for (color in colors) {
  const colorId = color.toLowerCase().replace(/ /g, "-");
  const newItem = document.createElement("div");
  newItem.id = colorId;
  newItem.className = "favoriteColor";

  const colorCode = document.createElement("p");
  colorCode.innerText = colors[color];

  rectangleWrapper.appendChild(newItem);
  rectangleWrapper.appendChild(colorCode);
  console.log(colorId);
}</script></body>
</html>