116 lines
2.5 KiB
Markdown
116 lines
2.5 KiB
Markdown
|
---
|
||
|
|
id: 5d8a4cfbe6b6180ed9a1c9ea
|
||
|
|
title: Part 13
|
||
|
|
challengeType: 0
|
||
|
|
---
|
||
|
|
|
||
|
|
## Description
|
||
|
|
<section id='description'>
|
||
|
|
|
||
|
|
Add another `script` below the one you just added. Give it a `src` attribute of `./data.js`.
|
||
|
|
|
||
|
|
This adds a `data` variable to your project that contains your number of social media followers, it is an array of objects. Each object has the year and your followers for three different platforms. You will see what it looks like shortly.
|
||
|
|
</section>
|
||
|
|
|
||
|
|
## Instructions
|
||
|
|
<section id='instructions'>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
## Tests
|
||
|
|
<section id='tests'>
|
||
|
|
|
||
|
|
```yml
|
||
|
|
tests:
|
||
|
|
- text: test-text
|
||
|
|
testString: const script = code.match(/<script\s+[\s\S]+?[^>]>\s*<\/script\s*>/gi)[1]; assert(/src\s*=\s*('|")\s*(\.\/)?data.js\s*\1/gi.test(script));
|
||
|
|
|
||
|
|
```
|
||
|
|
|
||
|
|
</section>
|
||
|
|
|
||
|
|
## Challenge Seed
|
||
|
|
<section id='challengeSeed'>
|
||
|
|
<div id='html-seed'>
|
||
|
|
|
||
|
|
```html
|
||
|
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>D3 Dashboard</title>
|
||
|
|
<link rel="stylesheet" href="./dashboard.css">
|
||
|
|
<script src="./d3-5.9.2.min.js"></script>
|
||
|
|
|
||
|
|
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<div class="dashboard"></div>
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
```
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
### Before Test
|
||
|
|
<div id='html-setup'>
|
||
|
|
|
||
|
|
```html
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
background-color: #ccc;
|
||
|
|
padding: 100px 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.dashboard {
|
||
|
|
width: 980px;
|
||
|
|
height: 500px;
|
||
|
|
background-color: white;
|
||
|
|
box-shadow: 5px 5px 5px 5px #888;
|
||
|
|
margin: auto;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<script>
|
||
|
|
const data = [
|
||
|
|
{ year: 2012, followers: { twitter: 2594, tumblr: 401, instagram: 83 }},
|
||
|
|
{ year: 2013, followers: { twitter: 3049, tumblr: 440, instagram: 192 }},
|
||
|
|
{ year: 2014, followers: { twitter: 3511, tumblr: 415, instagram: 511 }},
|
||
|
|
{ year: 2015, followers: { twitter: 3619, tumblr: 492, instagram: 1014 }},
|
||
|
|
{ year: 2016, followers: { twitter: 4046, tumblr: 543, instagram: 2066 }},
|
||
|
|
{ year: 2017, followers: { twitter: 3991, tumblr: 701, instagram: 3032 }},
|
||
|
|
{ year: 2018, followers: { twitter: 3512, tumblr: 1522, instagram: 4512 }},
|
||
|
|
{ year: 2019, followers: { twitter: 3274, tumblr: 1989, instagram: 4715 }},
|
||
|
|
{ year: 2020, followers: { twitter: 2845, tumblr: 2040, instagram: 4801 }}
|
||
|
|
];
|
||
|
|
</script>
|
||
|
|
```
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
|
||
|
|
## Solution
|
||
|
|
<section id='solution'>
|
||
|
|
|
||
|
|
```html
|
||
|
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>D3 Dashboard</title>
|
||
|
|
<link rel="stylesheet" href="./dashboard.css">
|
||
|
|
<script src="./d3-5.9.2.min.js"></script>
|
||
|
|
<script src="./data.js"></script>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<div class="dashboard"></div>
|
||
|
|
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
```
|
||
|
|
|
||
|
|
</section>
|