'Display items on web page using AJAX and DOM

For this challenge, I am using AJAX to load contents to my web page, the first problem I have is to display the projects on the page. I have DOM selected the and I am trying to append

as required but they still won't display. What am I missing? Secondly, my edit button is not behaving as I want it to.

const today = new Date();
const thisYear = today.getFullYear()
const footer = document.querySelector('footer');
const copyright = document.createElement('p');
copyright.innerHTML = `<span> © Erick Odero ${thisYear}</span> `;
footer.appendChild(copyright);

let skills = ['html', 'CSS', 'JavaScript'];
const skillsSection = document.getElementById('skills');
const skillsList = document.getElementById('skills').children[1];

for (let i = 0; i < skills.length; i++) {
  const skill = document.createElement('li');
  skill.textContent = skills[i];
  skillsList.appendChild(skill);
}

// Create and handle edit button
const editMessage = document.querySelector('#text_message');
const editButton = document.createElement('button');
editButton.innerText = 'Edit';
editButton.type = 'button';
editButton.classList.add('btn');
editMessage.appendChild(editButton);

editMessage.addEventListener('click', (e) => {
  const button = e.target;
  const span = document.createElement('span');
  const editedMessage = document.createElement('input');
  input.type = 'text';
  console.log(newMessage);
})

// Handle message form submit  button
const messageForm = document.querySelector('form[name="leave_message"]')

messageForm.addEventListener('submit', (e) => {
  // prevent default refreshing behavior
  e.preventDefault();

  // create variables for each form field
  // const user_name = messageForm.name.value;
  // const user_email = messageForm.email.value;
  // const user_message = messageForm.message.value;

  const user_name = e.target.name;
  const user_email = e.target.email;
  const user_message = e.target.message;

  // Display messages in list
  const messageSection = document.getElementById('messages');
  const messageList = messageSection.children[1];
  const newMessage = document.createElement('li');
  newMessage.innerHTML = `<a href="mailto:${user_email.value}">${user_name.value}</a><span> wrote: ${user_message.value}</span>`;


  // create button element
  const removeButton = document.createElement('button');
  removeButton.innerText = 'remove';
  removeButton.type = 'button';


  // handle the removeButton
  removeButton.addEventListener('click', (e) => {
    const entry = e.target.parentNode;
    entry.remove();
  })
  // reset the form
  messageForm.reset();
  newMessage.appendChild(removeButton);
  messageList.appendChild(newMessage);

})
const header = document.getElementById('header');
header.classList.add('sticky');

var gitHubRequest = new XMLHttpRequest();
gitHubRequest.onreadystatechange = function() {
  if (gitHubRequest.readyState === 4 && gitHubRequest.status === 200) {
    gitHubRequest.responseText;
  }
};
gitHubRequest.open('GET', 'https://api.github.com/users/eodero/repos');
gitHubRequest.send();

gitHubRequest.addEventListener('load', (event) => {
  let repositories = JSON.parse(gitHubRequest.response);
  console.log(repositories);
});

const projectSection = document.getElementById('projects');
const projectList = projectSection.lastElementChild;

for (let i = 0; i < projectList.length; i++) {
  const project = document.createElement('li');
  project.innerText += project[i];
  projectList.appendChild(project);
  console.log(projectSection);
}

<!DOCTYPE html>
<html>

<head>
  <title>erick_odero-portfolio</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edgev">
  <link rel="stylesheet" href="index.css">
  <script src="https://kit.fontawesome.com/631b2dc748.js" crossorigin="anonymous"></script>
</head>

<body>
  <section class="list">
    <header id="header">
      <h1 id="my-name">Erick O Odero</h1>
      <img src="https://avatars.githubusercontent.com/u/84427589?v=4" alt="Author's profile picture" width="60" height="60">
      <nav class="main-menu">
        <ul>
          <li><a href="../intro-to-programming-asteroid/index.html">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#projects">Projects</a></li>
          <li><a href="#connect">Connect</a></li>
        </ul>
      </nav>

    </header>
  </section>

  <main>
    <section id="about">
      <h1>About</h1>
      <p> I am healthcare worker in the field of clinical research residing in Memphis Tennessee and now an aspiring
        <br> Software Developer. I am currently a student with Code The Dream taking Javascript, HTML, AJAX and <br> Fetch API lessons. When I learnt of the immense potential that technology has to improve health outcomes<br> of our communities, my interest
        in coding was conjured and I hope to immerse myself full time in the industry.
      </p>
    </section>

    <section class="list">
      <h1>Experience</h1>
      <ul id="exp">
        <li>clinical Research Associate - United States</li>
        <li>HIV program coordinator - Kenya</li>
        <li>Health program coordinator - Kenya</li>
        <li>Health Worker Training and Capacity building(volunteer) - Vanuatu</li>
      </ul>
    </section>

    <section class="list">
      <h1>My tools</h1>
      <ul class="tools">
        <li><a href="https://code.visualstudio.com/">Visual Studio Code</a></li>
        <li><a href="https://www.apple.com/macbook-air/?afid=p238%7CsS5GAoNB9-dc_mtid_1870765e38482_pcrid_569734191494_pgrid_110391415659_&cid=aos-us-kwgo-mac--slid---product-">Mac
                        Bookair</a></li>
        <li><a href="https://www.microsoft.com/en-us/software-download/windows10ISO">Windows 10</a></li>
        <li><a href="https://slack.com/intl/en-in/get-started#/createnew">Slack</a></li>
        <li><a href="https://www.freecodecamp.org/learn/">Freecodecamp</a></li>
        <li><a href="https://whimsical.com/lesson-3-1-wireframe-exercise-NbAuTttSYsijaHafZ44mvS">Whimsical</a>
        </li>
        <li><a href="https://github.com">github</a></li>
      </ul>
    </section>
    <section class="section">
      <h1>My resume</h1>
      <nav>
        <ul>
          <li><a href="#">resume</a></li>
        </ul>
      </nav>
    </section>

    <section id="skills">
      <h2 class="list">Skills</h2>
      <ul id="skillz"></ul>
    </section>

    <section id="projects">
      <h2>Projects</h2>
      <ul>

      </ul>
    </section>

  </main>

  <!--Create leave message section and add form-->
  <section class="section">
    <h2>Leave a Message</h2>
    <form name="leave_message">

      <fieldset id="details">
        <legend>1 Your details</legend>
        <label for="name">Name:</label><br>
        <input type="text" name="name" required="true"><br>

        <label for="email">Email:</label><br>
        <input type="email" name="email" required="true"><br>
      </fieldset>

      <fieldset id="text_message">
        <legend>2 Your Message</legend>
        <label for="message">Message:</label><br>
        <textarea id="textMessage" name="message" required="true"></textarea><br>
      </fieldset>

      <button id="submit" class="btn" type="submit">Submit</button>

    </form>
  </section>

  <!-- Add message list section-->
  <section id="messages">
    <h2>Messages</h2>
    <ul>

    </ul>
  </section>

  <footer></footer>
  <script src="index.js"></script>
</body>

</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Display items on web page using AJAX and DOM

Sources

Related Questions