How to display data in columns and row from a onclick event

Question

I can't figure out how to display data from input onclick event.

Data come from inputs of the users (name of a book).

At each click on the submit button I want to display this book name to the right of the screen and in a organized way (for instance 3 columns and once the 3 columns are with a specific data then I it continues in a new row).

I need it for a directory webapp that display book and text.

I'm stuck for a long time and impossible to figure out how...

For me explanation : once I click on submit I want the book to be displayed on the left. Once we have 3 books on the left (so three submit), I want the other books to be display below and each time we reach 3 books a new row is created.

Thank you for your help :)

Mohamed Lamine.

It would be really helpful if you will share even some part of your code :) — Sowam, Apr 11 '21 at 19:42
This is the problem the code will not help there. I only have the input I do not have the code for the css. I try to show from an image. — Mln954, Apr 11 '21 at 19:46
So you basically have to get all values from this input text and append them to element on the right, additionally you have to add css for that that will automatically style them in the way you want. What is a problem here? — Sowam, Apr 11 '21 at 19:58
The problem is that I want to display 3 element by row. But I can't figure out how to do it with GRID for instance. — Mln954, Apr 11 '21 at 20:33

score 0 · Answer 1 · answered Apr 12 '21 at 00:59

For simplicity I've taken only 1 input, you can take as many and append it into list and then append list into data-books

const button = document.querySelector("button");
const input = document.querySelector("input");
const dataBooks = document.querySelector(".data-books");
button.addEventListener("click", (e) => {
  const bookName = input.value;
  const list = document.createElement("li");
  list.textContent = bookName;
  dataBooks.appendChild(list);
  input.value = "";
  input.focus();
});

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

div.container {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

div.form {
  padding: 1rem;
  background-color: blueviolet;
}

h2 {
  text-align: center;
  border-bottom: 1px solid gray;
  padding: 1rem;
  margin: 0;
}

ul.data-books {
  list-style-type: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  row-gap: 2rem;
}

<div class="container">
  <div class="form">
    <input type="text" placeholder="book name" />
    <button> submit </button>
  </div>
  <div class="data">
    <h2> Books </h2>
    <ul class="data-books">
    </ul>
  </div>
</div>

How to display data in columns and row from a onclick event

1 Answers1