The book thing

index.html

<div id="grid-container">
<form class="form hidden" id="add" name="formn">
   <label for="title">Title:</label><br>
  <input type="text" name="title" class="input" placeholder="Livre pour Louise"><br>
  <label for="author">Author:</label><br>
  <input type="text" name="author" class="input" placeholder="Karine Giebel"><br>
  <label for="pages">Number of pages:</label><br>
  <input type="number" name="pages" class="input" placeholder="299"><br>
  <input type="radio" name="read" class="radio" value="true">
  <label for=true>I've read it</label><br>
  <input type="radio" name="read" class="radio" value="false">
  <label for=false>I haven't read it</label><br>
  <input type="button" id="button" class="input button" value="Add to the library !"
         checked>
</form>
  
<span id="header">Hello and welcome to my library ! <br> Here all my books !</span>
<div id="list">
</div>
</div>

script.js

let myLibrary =  []

if (localStorage.getItem('myLibrary')){
   myLibrary = JSON.parse(localStorage.getItem("myLibrary"));
}

function Book(title,author,pages,read){
  this.title = title
  this.author = "Written by " + author
  this.pages = pages + " pages"
  this.read = read?"Read":"Not read" 
}
function render(){
  document.getElementById('list').innerHTML ="";
  for (thing of myLibrary){
    var li = document.createElement('li')
    li.classList.add ("card")
    const bookInfo = Object.values(thing)
    for (truc in bookInfo){
      li.innerHTML += Object.values(bookInfo)[truc] + "<br/ >"
    }
    li.innerHTML += "<button class=\"removebutton\">Remove this book</button>" + "<br/ >" +"<button class=\"readbutton\">I've read this book !</button>"
    document.getElementById('list').appendChild(li)
    document.getElementsByClassName("removebutton")[myLibrary.indexOf(thing)].setAttribute("number",myLibrary.indexOf(thing))
     document.getElementsByClassName("readbutton")[myLibrary.indexOf(thing)].setAttribute("number",myLibrary.indexOf(thing))
    document.getElementsByClassName("removebutton")[myLibrary.indexOf(thing)].addEventListener("click",removeFromLibrary)
    document.getElementsByClassName("readbutton")[myLibrary.indexOf(thing)].addEventListener("click",changeReadFromLibrary)
  }
  var liNew = document.createElement('li')
  liNew.classList.add ("card")
  liNew.classList.add ("empty")
  liNew.innerHTML += "Click here to add a book !"
  document.getElementById('list').appendChild(liNew)
  document.getElementById("button").addEventListener("click",submitForm)
  document.getElementsByClassName("empty")[0].addEventListener("click",toggleForm)
}

function removeFromLibrary(){
  myLibrary.splice(this.getAttribute("number"),1);
  localStorage.setItem("myLibrary", JSON.stringify(myLibrary))
  render()
}

function toggleForm(){
  document.forms.formn.classList.toggle("hidden");
}

function changeReadFromLibrary(){
  var pouli = myLibrary[this.getAttribute("number")]
  var newReadAttribute = pouli.read == "Read" ? "Not read" : "Read"
  pouli.read = newReadAttribute
  localStorage.setItem("myLibrary", JSON.stringify(myLibrary))
  render()
}

function submitForm() {
  var x = document.getElementById("add")
  let peter = new Book(x.elements["title"].value,x.elements["author"].value,
                      x.elements["pages"].value, (document.forms.formn.read.value == "true"?true:false))
  myLibrary.push(peter)
  localStorage.setItem("myLibrary", JSON.stringify(myLibrary))
  toggleForm()
  render()
}

render()

style.css

#grid-container{
  display:grid;
  place-items:center;
}

#list{
  display:grid;
  grid-auto-flow: row;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-row-gap: 1.5em;
}

#header{
  font-family:Helvetica,Noto Sans,sans-serif;
  font-size:24px;
  padding:20px;
  color:#331e17;
  text-align:center
}

#add{
  margin-top:200px;  
}

.card{
  font-family:Noto Sans,sans-serif;
  font-size:18px;
  border: 1.5px solid #ebe1e8;
list-style-type:none;
  padding:10px;
  margin:10px;
  line-height:1.3em;
  height: 90px;
  padding-bottom: 30px;
}

.empty{
   background-color:#ebe1e8;
  font-weight:800;
}


.form{
  margin-top: 20px;
  background-color:#FFFFFF;
  font-family:Noto Sans,sans-serif;
  font-size:16px;
  color:#331e17;
  border:#ebe1e8 2px solid;
  padding:10px 10px 0px 10px ;
  position:absolute;
}

.input{
  margin:10px;
  padding:5px;
  border-radius:5px;
  border:2px solid #ebe1e8;
}

.input.button{
  font-size: 16px;
  text-align: center;
      margin: 10px auto;
  margin-top: 20px;
    display: block;
}


input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

.hidden{
  display:none;
}

the-book-thing.markdown

The book thing

A Pen by Charabia on CodePen.

License.