diff --git a/guide/english/certifications/data-visualization/data-visualization-with-d3/add-inline-styling-to-elements/index.md b/guide/english/certifications/data-visualization/data-visualization-with-d3/add-inline-styling-to-elements/index.md index ed3b92dcd24..5de6b5c94d5 100644 --- a/guide/english/certifications/data-visualization/data-visualization-with-d3/add-inline-styling-to-elements/index.md +++ b/guide/english/certifications/data-visualization/data-visualization-with-d3/add-inline-styling-to-elements/index.md @@ -3,8 +3,69 @@ title: Add Inline Styling to Elements --- ## Add Inline Styling to Elements -This is a stub. Help our community expand it. +![:triangular_flag_on_post:](https://forum.freecodecamp.com/images/emoji/emoji_one/triangular_flag_on_post.png?v=3 ":triangular_flag_on_post:") Remember to use **`Read-Search-Ask`** if you get stuck. Try to pair program ![:busts_in_silhouette:](https://forum.freecodecamp.com/images/emoji/emoji_one/busts_in_silhouette.png?v=3 ":busts_in_silhouette:") and write your own code ![:pencil:](https://forum.freecodecamp.com/images/emoji/emoji_one/pencil.png?v=3 ":pencil:") -This quick style guide will help ensure your pull request gets accepted. +### Problem Explanation: + +This challenge introduces the D3 `style` method, which takes 2 arguments: (key, value). + +#### Relevant Links + +* [style](https://github.com/d3/d3-selection/blob/master/README.md#selection_style) + +## ![:speech_balloon:](https://forum.freecodecamp.com/images/emoji/emoji_one/speech_balloon.png?v=3 ":speech_balloon:") Hint: 1 + +* Make sure both of your arguments are in quotations, single or double quotes will work + +> _try to solve the problem now_ + +## ![:speech_balloon:](https://forum.freecodecamp.com/images/emoji/emoji_one/speech_balloon.png?v=3 ":speech_balloon:") Hint: 2 + +* In the example, `selection.style` refers to an arbitrary selected element, chain your `style` method to the existing method chain + +> _try to solve the problem now_ + +## Spoiler Alert! + +**Solution ahead!** + +## ![:beginner:](https://forum.freecodecamp.com/images/emoji/emoji_one/beginner.png?v=3 ":beginner:") Basic Code Solution: +```javascript + + + +``` + +# Code Explanation: + +* the `style` method takes 2 arguments, the first is the key and the second the value +* key in the `style` method is the property name that you would use in a CSS declaration +* value is used just as a value would be used in a CSS declaration +* Since we are in JavaScript and `style` is a method we are calling, quotes must be used for the arguments. Otherwise, the function would try to use the value of the **variables** `font-family` and `verdana`, which do not exist and would each throw a ReferenceError + +#### Relevant Links + +* [style](https://github.com/d3/d3-selection/blob/master/README.md#selection_style) +* [ReferenceError](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Not_defined) + + +## ![:clipboard:](https://forum.freecodecamp.com/images/emoji/emoji_one/clipboard.png?v=3 ":clipboard:") NOTES FOR CONTRIBUTIONS: + +* ![:warning:](https://forum.freecodecamp.com/images/emoji/emoji_one/warning.png?v=3 ":warning:") **DO NOT** add solutions that are similar to any existing solutions. If you think it is **_similar but better_**, then try to merge (or replace) the existing similar solution. +* Add an explanation of your solution. +* Categorize the solution in one of the following categories — **Basic**, **Intermediate** and **Advanced**. ![:traffic_light:](https://forum.freecodecamp.com/images/emoji/emoji_one/traffic_light.png?v=3 ":traffic_light:") +* Please add your username only if you have added any **relevant main contents**. (![:warning:](https://forum.freecodecamp.com/images/emoji/emoji_one/warning.png?v=3 ":warning:") **_DO NOT_** _remove any existing usernames_) + +> See ![:point_right:](https://forum.freecodecamp.com/images/emoji/emoji_one/point_right.png?v=3 ":point_right:") **`Wiki Challenge Solution Template`** for reference. -