building a JavaScript project can seem like a really easy until you start putting the pieces together.
I’ve never worked on html ,JavaScript or JSON data from an API outside of labs , I’ve spent many days figuring out answers to problems and details that I would not gotten a chance to pay attention to and realize how delicate yet complicated programming can be.
every time I think a got the correct answer I run into another problem another bug an unintended consequences, as they say the devils is in the details
and in programming the devil/bug is in the unhandled error/catch.
Well from mistakes we learn right ?
the idea of my project is a simple yet complicated Pokémon’s cards where you can add, delete or like a Pokémon.
For a minute that is straight forward right till you realize a basic understanding of fetch for example mean
know simply that The Fetch API gives you a JavaScript interface to access and manipulate HTTP pipeline elements like requests and responses. It also has a global get() method that makes fetching things asynchronously via the network simple and intuitive.
This appears to be so simple until you start working on a blank HTML page, unsure how you'll get your code to operate. The first thing I did was create my forms and a submit button (in my html)
and I added an event listener to the add button in the JavaScript file, and then I created a function to handle the summitted forms value (name, image-URL and descriptions)
I also made another function that would create each Pokémon card and attaching the like and the delete button to it.
once I created the delete and like button, I when on and add the Evenltistener(‘click’)
card.querySelector('#like').addEventListener('click', ()=>{
pokemon.likes+=1;
card.querySelector('#delete').addEventListener('click', ()=>{
card.innerHTML=''
Once you have added the Pokémon card into the list you can see the Pokémon name number of likes and it’s descriptions , you can either click on the like button or delete button.
the like button gives the Pokémon 1 like each time it’s clicked, the delete button simply removes the selected Pokémon from the list
This stage was one of the most difficult for me to overcome throughout the project. I ran into a lot of errors using fetch, but happily I was able to address the issues that were producing the errors.
To post, get, remove, and patch data, I utilized the fetch method
Example:
function UpdateLikes(pokemonObj) {
fetch(`http://localhost:3000/pokemonData/${pokemonObj.id}`,{
method:'PATCH',
headers:{
'Content-Type': 'application/json'
},
body: JSON.stringify(pokemonObj)
})
.then(res => res.json())
.then(pokemon=>console.log(pokemon))
}
function deletePokemon(id) {
fetch(`http://localhost:3000/pokemonData/${id}`,{
method: 'DELETE',
headers: {
'Content-Type': 'application/json'
}
})
.then(res => res.json())
.then(pokemon=>console.log(pokemon))
}
Even though I was working on a very easy assignment, it was nevertheless stressful and difficult. This project took me far longer than I had anticipated, and I must say, I was frustrated.
Being able to complete my phase 1 project gave me a lot of confidence in myself and made me believe that I am up to the task. I'm excited to accomplish as many projects as I can and become more active in this.
Top comments (1)
Glad to read this, maybe you want to write more about your experience!