How to render an array of items in HTML & JavaScript

#javascript #html #css #vscode

I recently rebuilt by personal website and decided to just use basic vanilla HTML, CSS and JavaScript and get out of dependency hell for a bit. I thought this would be a whole lot harder than it turned out to be. In fact, the most annoying part was probably having to write regular old CSS instead of using some preprocessor like SASS or LESS.

So when I wanted to render the projects on the page inside of a div, instead of doing like the following like in React using JSX:

React JSX

<div>
  {projects.map(project) => (
    <div>
      ...
    </div>
  )}
</div>

Vanilla Javascript

<script>
  const list = document.querySelector('#projects')

  data.projects.forEach(project => {
    // Create project 
    const projectEl = document.createElement('div')

    // Create content like titles and text
    ...

    // Add element to list
    list.appendChild(projectEl)
  })
</script>

<div id="projects"></div>

So as it turns out this was not so bad after all. It is a little bit more overhead having to write some more Javascript to get this to work. But this is what is happening in the background when you do it the React JSX way after all. So in smaller projects, why not just do it yourself?

Check out my new portfolio built using only HTML, CSS and vanilla Javascript right here:

Live: https://albingroen.com