This content originally appeared on DEV Community and was authored by Kelvin Acosta
I was working on my first project in my life. This is the first time I was actually doing code by myself. Meaning that I used to see code since I was 19 but I never paid fully attention to it. I usually just coded to pass the class but I never really put effort on it. I had a super little basic knowledge of syntax before I enjoyed FlatIron.
I enrolled to this amazing bootcamp because I have friends who actually work in this area.
I did not know what to do for a project until I saw one of my favorite cartoons when I was a kid which it was digimon so I tried to think on what to code. It was like a flash on my head. I remember I used to have digimon cards and I really enjoyed with them.
A big problem for me was when I had to learn about api. It was a little confusing for me. Before I picked digimon I was checking on all those publics api where they have a lot of data. One of the main reason about getting public digimon api was because it only has name, image and level. It really helped me a lot to understand where and how to use an api. How to really use fetch. The data obtained from an API can be further processed, analyzed, displayed, or utilized in various ways within your application or system.
Working on my project with api and fetch helped me to understand that are both related to making HTTP requests from a client side application to a server to retrieve data or perform actions which is really cool.
const digimonContainer = document.getElementById("digimon-container");
fetch("https://api.example.com/digimon")
.then(response => response.json())
.then(data => {
const digimons = data;
digimons.forEach(digimon => {
const digimonCard = document.createElement("div");
digimonCard.classList.add("digimon-card");
const digimonName = document.createElement("h2");
digimonName.textContent = digimon.name;
const digimonImage = document.createElement("img");
digimonImage.src = digimon.image;
const digimonLevel = document.createElement("p");
digimonLevel.textContent = `Level: ${digimon.level}`;
digimonCard.appendChild(digimonName);
digimonCard.appendChild(digimonImage);
digimonCard.appendChild(digimonLevel);
digimonContainer.appendChild(digimonCard);
});
})
.catch(error => {
console.error("Error:", error);
});
This code only get Digimon api and returns an array of Digimon objects.Each object contains properties like name, image, and level. It makes a GET request to the api endpoint using fetch, processes the retrieved JSON data, and it creates HTML elements to display the digimon information on the page.
I am excited to keep going on this journey and share my experiences with you. I want to keep learning and I will be keep posting about my coding journey.
This content originally appeared on DEV Community and was authored by Kelvin Acosta
Kelvin Acosta | Sciencx (2023-05-15T02:52:45+00:00) On my way!! my coding journey.. Retrieved from https://www.scien.cx/2023/05/15/on-my-way-my-coding-journey/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.