# data[].attributes.attachment_link.readable_text
 <h1 id="title">JavaScript Activity</h1> <h2 id="instructions"> Read each prompt and finish the code to perform the task. <br/> When you finish, have a Code Sensei check your work by clicking each button. </h2> <div id="container"> <div class="activity"> <p class="prompt"> Finish the changeBackground function to give the title element the class "green". </p> <button onclick="changeBackground()">Run changeBackground</button> </div> <div class="activity"> <p class="prompt"> Finish the changeTitle function to change the title to include your name. </p> <button onclick="changeTitle()">Run changeTitle</button> </div> <div class="activity"> <p class="prompt"> Finish the revealMessage function to remove the "hidden" class from the element to reveal the secret message. </p> <p id="message" class="hidden">Hello!</p> <button onclick="revealMessage()">Run revealMessage</button> </div> <div class="activity"> <p class="prompt"> Finish the changeFont function to make the instructions fancy. </p> <p id="message" class="hidden">Hello!</p> <button onclick="changeFont()">Run changeFont</button> </div> <div class="activity"> <p class="prompt"> Finish the changeStyle function to make the todo list fancy and green. </p> <ul id="todo"> <li>Go to the store</li> <li>Pick up drycleaning</li> </ul> <button onclick="changeStyle()">Run changeStyle</button> </div> </div>

# data[].attributes.body
Use this Codepen to get started!

# data[].attributes.attachment_link.readable_text
CSS

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

JavaScript

JavaScript Preprocessor
Babel includes JSX processing.
Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Privacy

Upgrade to PRO

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

# data[].attributes.body
View all of the world's flags!

# data[].attributes.attachment_link.description
Discover the flags of the world and get more information about all countries and known international organizations.

# data[].attributes.attachment_link.description
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

# data[].attributes.body
https://codepen.io/Nathaniello37/pen/dyWOJVa

# data[].attributes.body
https://codepen.io/danielli626/pen/BaRQwww

# data[].attributes.body
My padlet

# data[].attributes.body
https://codepen.io/Kyleisthebest/pen/oNWYGpj