CSS

Bartłomiej Wilczyński
Bartłomiej Wilczyński
6,269 Points

Hi, how can I align my list buttons to the right?

Hi, how can I align my list buttons that I have created in the DOM to the right of the li container? Here is my code: HTML:

<!DOCTYPE html>
<html lang="pl" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>To Do App</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/basic.css">
  </head>
  <body>
    <div class="container">
      <h1>To Do App</h1>
      <p>The best app to organize your time</p>
      <button type="button" class="show-button">Show list</button>
      <div class="listDiv">
        <input type="text" class="input-description" placeholder="Change list description">
        <button type="button" class="description-button">Do it</button>
        <h3 class="list-description">The things you need to do today:</h3>
        <ul>
          <li>Make your bed</li>
          <li>Eat breakfast</li>
          <li>Be happy all day long</li>
        </ul>
        <input type="text" class="input-add" placeholder="Add things">
        <button type="button" class="add-button">Do it</button>
      </div> <!-- /listDiv -->
    </div> <!-- /container -->

    <script src="app.js"></script>
  </body>
</html>

JavaScript:

const container = document.querySelector(".container");
const showButton = document.querySelector(".show-button");
const listDiv = document.querySelector(".listDiv");
const descriptionInput = document.querySelector(".input-description");
const listDescription = document.querySelector(".list-description");
const ul = document.querySelector("ul");
const listItems = document.querySelectorAll("li");
const addInput = document.querySelector(".input-add");

function attachButtons(li) {
  let up = document.createElement("button");
  up.textContent = "Up";
  li.appendChild(up);
  up.addEventListener('click', () => {
    let prev = li.previousElementSibling
    if ( prev !== null ) {
      ul.insertBefore(li, prev)
    }
  })

  let down = document.createElement("button");
  down.textContent = "Down";
  li.appendChild(down);
  down.addEventListener('click', () => {
    let next = li.nextElementSibling
    ul.insertBefore(next, li)
  })

  let remove = document.createElement("button");
  remove.textContent = "Remove";
  li.appendChild(remove);
  remove.addEventListener('click', () => {
    ul.removeChild(li);
  })
}

for ( let i = 0; i < listItems.length; i ++ ) {
  attachButtons(listItems[i])
}



container.addEventListener('click', (event) => {

  if ( event.target.className == "show-button" ) {
    if ( listDiv.style.display != "block" ) {
      listDiv.style.display = "block";
      showButton.textContent = "Hide list";
    } else {
      listDiv.style.display = "none";
      showButton.textContent = "Show list";
    }
  }

  if (  event.target.className == "description-button" ) {
    listDescription.textContent = descriptionInput.value + ":";
    descriptionInput.value = "";
  }

  if (  event.target.className == "add-button" ) {
    let li = document.createElement("li");
    li.textContent = addInput.value;
    ul.appendChild(li);
    attachButtons(li);
    addInput.value = "";
  }

});

CSS:

:root {
  font-family: 'Open Sans', sans-serif;
}

.container {
  width: 50%;
  margin: 2rem auto;
  padding: 1rem;
  background-color: rgb(230, 230, 230);
  border-radius: 10px;
}

.show-button {
  margin-bottom: 1.5rem;
}

.listDiv {
  display: none;
  border-top: solid 1px black;
  padding-top: 1.5rem;
}

.listDiv ul {
  padding: 0;
}

.listDiv li {
  list-style:disc;
  margin: 1rem;
}
Nic Vannetti
Nic Vannetti
Front End Web Development Techdegree Student 11,335 Points

Hello, you made very nice and clean Js script, i love it!! To ask your question i suggest to make "li" elements flex containers and add a class to the first button ( UP button) that push it on the right side. the code should look like this

.listDiv li {
    list-style:disc;
    margin: 1rem;
    display: flex;
  }

  .push-right {
      margin-left: auto;
  }

then add the class every time js create the new element

up.textContent = "Up";
 li.appendChild(up);
 up.className ="push-right";

Ciao

Nic

1 Answer

Nic Vannetti
Nic Vannetti
Front End Web Development Techdegree Student 11,335 Points

I'm really happy I could help Mate!!! you can mark a solved question by choosing 'best answer'.