Files
freeCodeCamp/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-009.md
Randell Dawson 94f0cf0ef8 chore(learn): Remove remaining isHidden keys from frontmatter (English and Chinese challenges) (#39809)
* fix: remove isHidden key from tool template

* fix: removed isHidden key from English challenges

* fix: remove isHidden key from Chinese challenges
2020-10-08 14:18:47 +02:00

1.2 KiB

id, title, challengeType
id title challengeType
5d8a4cfbe6b6180ed9a1c9e6 Part 9 0

Description

Now you can see your dashboard element. Center it by adding a margin of auto to it.

Instructions

Tests

tests:
  - text: test-text
    testString: const dashboard = code.match(/.dashboard\s*{[\s\S]+?[^}]}/g)[0]; assert(/margin\s*:\s*auto\s*(;|})/g.test(dashboard));

Challenge Seed

<style>
body {
  background-color: #ccc;
}

.dashboard {
  width: 980px;
  height: 500px;
  background-color: white;
  box-shadow: 5px 5px 5px 5px #888;


}
</style>

Before Test

<!DOCTYPE html>
<html>
  <head>
    <title>D3 Dashboard</title>
  </head>

  <body>
    <div class="dashboard"></div>
  </body>
</html>

Solution

<style>
body {
  background-color: #ccc;
}

.dashboard {
  width: 980px;
  height: 500px;
  background-color: white;
  box-shadow: 5px 5px 5px 5px #888;
  margin: auto;
}
</style>