Day72 of #100DaysOfCode

A book App

Adding a new book to our book App

To add a new book in our book app we must first understand how forms work. A basic form consists of an input field and a button. Clicking the button makes the form to emit a submit event and usually we attach an action to that event. That’s the default behaviour of a form and when there’s no action, the form will usually refresh the page. And so we try to prevent that default behaviour using “e.preventDefault”.

Here’s the html and css of our book app.

Now lets attach a submit event to our add book form; prevent the default behaviour and extract the value of what has been typed into our input field.

First lets grab the form

const addForm = document.forms[‘add-book’];

Then attach a submit event and a listener to the form

addForm.addEventListener(‘submit’, function(e){

lets prevent default so the page doesn’t refrresh

e.preventDefault();

lets grab what is typed into the form and save it as value

const value = addForm.querySelector(‘input[type = “text”]’).value;

lets console the value and type something

console.log(value)
});

Now when we type in anything into the “add-book” field we should be able to see that word in our console.

Adding new book to the book app

To add a new book into the app we have to do a few things.

A typical book in the app has the following tags associated with it.

<li>
   <span class=”name”>Speaking javascript</span>
  <span class=”delete”>delete</span>
</li>

So we need three tags to add a new book, plus a text node too making it four tags. One “li” tag and two span tags.

We have to create those tags using “document.createElement(“tagName”)”

create elements

first is the “li” tag

const li = document.createElement(‘li’);

next is the two span tags

const bookName = document.createElement(‘span’);
const deleteButton = document.createElement(‘span’);

Notice that the two “span” tags are nested inside the “li” tag and the “li” tag is a direct child or is nested inside a “ul” tag.

What we have to do is to append the “span tags” into the “li” tag and append the “li” tag into the “ul” tag using the “appendChild()” method.

lets add the bookName span tag into the li tag

li.appendChild(bokName);

lets add the deleteButton span tag into the li tag

li.appendChild(deleteButton);

lets grab the ul tag and append the li tag into it

we have grabbed the ul before by doing

let ul = document.querySelector(“#book-list ul”);
ul.appendChild(li);

If we click the submit button, a new element is created but with an empty text content like so

Notice there’s no tect content on the last one

Lets add text content to the elements. The text content of the “bookName” span tag will be coming from the “value” grabbed fro the form.

// to the delete button

deleteButton.textContent = “delete”;

//to the bookName

bookName.textContent = value

Now if we type something and click on the “add button” we should be able to see it added to the booklist.

Lets type in “hello”.

A hello text plus a delete text

Observe that the button was not added instead we got the “delete” text attached to the hello instead.

That will be something we will do next time on day73.