# 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
My fan site about Code Ninjas! Learn about the programs.

# 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.attachment_link.readable_text
SVG defines vector-based graphics in XML format.

What is SVG?

SVG stands for Scalable Vector Graphics

SVG is used to define graphics for the Web

SVG is a W3C recommendation

The HTML <svg> Element

The HTML <svg> element is a container for SVG graphics.

SVG has several methods for drawing paths, boxes, circles, text, and graphic images.

Browser Support

The numbers in the table specify the first browser version that fully supports the <svg> element.

SVG Circle

Example

Try it Yourself "

SVG Rectangle

Example

Try it Yourself "

SVG Rounded Rectangle

Sorry, your browser does not support inline SVG.

Example

Try it Yourself "

SVG Star

Sorry, your browser does not support inline SVG.

Example

Try it Yourself "

SVG Logo

SVG Sorry, your browser does not support inline SVG.

Example

Try it Yourself "

Differences Between SVG and Canvas

SVG is a language for describing 2D graphics in XML.

Canvas draws 2D graphics, on the fly (with a JavaScript).

SVG is XML based, which means that every element is available within the SVG DOM. You can attach JavaScript event handlers for an element.

In SVG, each drawn shape is remembered as an object. If attributes of an SVG object are changed, the browser can automatically re-render the shape.

Canvas is rendered pixel by pixel. In canvas, once the graphic is drawn, it is forgotten by the browser. If its position should be changed, the entire scene needs to be redrawn, including any objects that might have been covered by the graphic.

Comparison of Canvas and SVG

The table below shows some important differences between Canvas and SVG:

Resolution dependent

No support for event handlers

Poor text rendering capabilities

You can save the resulting image as .png or .jpg

Well suited for graphic-intensive games

Resolution independent

Support for event handlers

Best suited for applications with large rendering areas (Google Maps)

Slow rendering if complex (anything that uses the DOM a lot will be slow)

Not suited for game applications

SVG Tutorial

To learn more about SVG, please read our SVG Tutorial.

# 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.attachment_link.readable_text
CSS

Add External Stylesheets/Pens

Any URL's added here will be added as <link> s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

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.

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.attachment_link.description
Add External Stylesheets/Pens Any URL's added here will be added as s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing. JavaScript Preprocessor Babel includes JSX processing.

# data[].attributes.attachment_link.readable_text
 <h1>Learn About Dogs!</h1> <p>Dogs are mammals that can be a home pet.Dogs have an AMAZING sense of smell to track prey.</p> <p>They also have very strong legs for running very fast and far distances.</p> <p>Dogs and cats react to loud noises such as:</p> <ul> <li>Fireworks</li> <li>Thunder</li> <li>Power Tools</li> <li>Sirens</li> <li>Loud music</li> <li>Other dogs barking in a enclosed environment</li> <img src="https://www.petmd.com/sites/default/files/styles/article_image/public/CANS_dogsmiling_379727605.jpg?itok=E-nD1tXb" width =300px alt=""> <img src="https://images4.fanpop.com/image/photos/16400000/Puppies-puppies-16436771-1280-800.jpg" width = 300px alt=""> <p>There are 339 dog breeds across the whole world.</p> <ul> <il>Cockapoo</il> <il>golden retriever</il> <il>labradore</il> <p> Dogs can help blind people and guides them so the dont walk into anything and help them with daily tasks.<p> <p>There are also Police dogs. Police dogs help police for tracking down criminals and finding missing people by their sense of smell.</p>

# data[].attributes.attachment_link.description
Learn About Dogs! Dogs are mammals that can be a home pet.Dogs have an AMAZING sense of smell to track prey. They also have very strong legs for running very fast and far distances. Dogs and cats react to loud noises such as: Fireworks Thunder Power Tools Sirens Loud music Other dogs barking in a enclosed environment There are 339 dog breeds across the whole world.

# data[].attributes.body
https://codepen.io/LeadSensei/pen/MWrLwpG

# data[].attributes.attachment_link.readable_text
 body { background-color: #1f5e80; font-family:comic sans ms; } h1 { font-size: 75px; } .scoredText { text-decoration: line-through; } div { background-color: goldenRod; width: 350px; margin-bottom: 20px; } #firstSection { border: 5px dashed maroon; margin-left: auto; } @keyframes backgroundChange { 0% {background-color: red;} 25% {background-color: yellow;} 50% {background-color: blue;} 75% {background-color: green;} 100% {background-color: red;} } #secondSection { border: 10px inset green; animation-name: backgroundChange; animation-duration: 8s; animation-iteration-count: infinite; } #sample { font-style: italic; } #sheepdog { float:right; } #sheepdog2 { float:left; } #sheepdog:hover { width:300px; } a { clear: both; display: block; color: yellow; font-size: 30px; }

# data[].attributes.attachment_link.description
body { background-color: #1f5e80; font-family:comic sans ms; } h1 { font-size: 75px; } .scoredText { text-decoration: line-through; } div { background-color: goldenRod; width: 350px; margin-bottom: 20px; } #firstSection { border: 5px dashed maroon; margin-left: auto; } @keyframes backgroundChange { 0% {background-color: red;} 25% {background-color: yellow;} 50% {background-color: blue;} 75% {background-color: green;} 100% {background-color: red;} } #secondSection { border: 10px inset green; animation-name: backgroundChange; animation-duration: 8s; animation-iteration-count: infinite; } #sample { font-style: italic; } #sheepdog { float:right; } #sheepdog2 { float:left; } #sheepdog:hover { width:300px; } a { clear: both; display: block; color: yellow; font-size: 30px; }

# data[].attributes.body
https://codepen.io/LeadSensei/pen/VwyNeXX

# data[].attributes.body
https://codepen.io/Noah-a-human/pen/VwyNepr?editors=0010

# data[].attributes.body
https://codepen.io/addr2012/pen/dyJLGWV?editors=0010

# data[].attributes.body
https://codepen.io/XxcodeninjaxX/pen/yLpreOm?editors=0010

# data[].attributes.body
https://codepen.io/Y0URM0MM/pen/rNpbxWO?editors=0010

# data[].attributes.body
https://codepen.io/catnip5/pen/vYpbQRe