Stage 1 - Shortest path to success #2
Conversation
|
|
||
| let resume ={ | ||
| "basics": { | ||
| "name": "Richard Hendriks", |
There was a problem hiding this comment.
Nice Silicon Valley reference!
| let element | ||
| let className | ||
|
|
||
| var basics = document.getElementById("basics") |
There was a problem hiding this comment.
The mix of ES6 and ES5 syntax is a bit confusing. Sticking to one or the other would be good for consistency :)
| basics.appendChild(element) | ||
| } | ||
| var work = document.getElementById("work") | ||
| resume.work.forEach (elementArr => { |
There was a problem hiding this comment.
Same comment here about mixing ES5 and ES6 syntax being confusing. I would recommend using either function declarations or function expressions for consistency.
| element.classList.add( className ) | ||
| projects.appendChild(element) | ||
| } | ||
| }) |
There was a problem hiding this comment.
There is a lot of repetition in your code. You could make this into one reusable function:
function displayData (property) {
var projects = document.getElementById(property)
resume[property]forEach (elementArr => {
for (const [key, value] of Object.entries(elementArr)) {
className = property + key
element = document.createElement("P")
element.textContent = value
element.classList.add( className )
projects.appendChild(element)
}
})
}
Then call it for work through to projects.
e.g. displayData("work");
|
|
||
| </head> | ||
|
|
||
| <body onLoad="getResume()"> |
There was a problem hiding this comment.
I would recommend adding more semantic structure to the body (e.g. header, main, section, footer), but this definitely works for the purpose of the project :)
| @@ -0,0 +1,245 @@ | |||
|
|
|||
| let resume ={ | |||
There was a problem hiding this comment.
let should be used only if the variable is not reassigned.
const is more appropriate here.
| } | ||
|
|
||
|
|
||
|
|
There was a problem hiding this comment.
a single space is fine :-)
| element.classList.add( className ) | ||
| basics.appendChild(element) | ||
| } | ||
| var work = document.getElementById("work") |
There was a problem hiding this comment.
use let and const instead of var
| element.classList.add( className ) | ||
| volunteer.appendChild(element) | ||
| } | ||
| }) |
There was a problem hiding this comment.
These iterations can be cleaned up a lot by using Handlebars, Mustache, or some other templating library 😄
| element.textContent = value | ||
| element.classList.add( className ) | ||
| publications.appendChild(element) | ||
| } |
There was a problem hiding this comment.
This works wel, but you're setting classnames, textContent, etc. over and over again in all these blocks. can you think of a way to reduce repetition?
| </div> | ||
| <div id="projects"> | ||
| <h2>Projects</h2> | ||
| </div> |
There was a problem hiding this comment.
This, too, can be reduced by using templating engines
No description provided.