-
create a new project with
index.html,main.js, andd3.js -
modify
<script src='js/d3.js'></script> <script src='js/main.js'></script>index.html. Add id='introduction' to a div tag below the opening<body>tag.
Add variables to the top of the main.js file.
let name = "Shel Silverstein";
let title = 'Snowball';
Run the following command.
console.log("We'll study the poem " + title + " by " + name);
- harder to read.
- spacing before and after variables is prone to error
console.log(`We'll study the poem ${title} by ${name}`);
previously difficult before back-tick feature. The string below can span multiple lines.
let poem = `I made myself a snowball
As perfect as could be.
I thought I'd keep it as a pet
And let it sleep with me.
I made it some pajamas
And a pillow for its head.
Then last night it ran away,
But first it wet the bed.`
Question: Is it okay to use single quotes inside of the backtick? What about double quotes?
Question: in the line below, what does \n do?
console.log(`Here's ${title} by ${name}\n\n${poem}`);
let width = 400;
let safeZone = 100;
console.log(`invalid number. Max number is ${width + safeZone - 50}`);
const margin = {left: 100, top: 200, bottom: 50, right: 50};
console.log(`horizontal buffer is ${margin.left + margin.right}`);
console.log(`vertical buffer is ${margin.top + margin.bottom}`);
Before getting to HTML insertion, practice HTML.
in the index.html file, add the title and author of the poem.
Review these HTML elements:
- h1, h2, h3
- b, em, pre
- p
- div
- table
populate table with:
| author | title | note |
|---|---|---|
| Shel Silverstein | Snowball | humorous |
let introduction = document.getElementById('introduction');
introduction.innerHTML = '<h1>' + title + '</h1>' +
'<h3>by ' + name + '</h3>';
introduction.innerHTML = `
<h1> A poem called <em> ${title}</em> </h1>
<h3> by ${name}</h3>
<pre style="font-family:arial">${poem}</pre>
`