Mugiwara/ One Piece

To those who are unfamiliar with One Piece , Mugiwara is short for Mugiwarabōshi, which translate to StrawHat. The word mugiwara is a funny little name that is used time through time to reference the protagonist. For my First Flatiron project, I drew inspiration from my favorite manga series, One Piece. One piece, follows a young pirate named, Monkey D. Luffy , who ventures out to sea in search for the legendary treasure, One Piece and in hopes of become king of the pirates. In time Luffy assembles his crew, who each have their own dreams to follow. In short, the manga has developed into one of the biggest and most popular manga/anime series in the world. The reason behind its success is the incredible storyline.

I believe because of the incredible storyline, I have remained a huge fan of One Piece for the last Ten years and counting. For my first project at flatiron, I wanted to share that passion. The JS application is a simple idea that introduces a short list of character’s that I have compiled. Upon loading the page the client will notice a form that creates a character with the same properties found within each One Piece card provided on the screen. Apart from Creating characters, the client has the option to remove characters from the One Piece Collection.

For my first flatiron project I took a very CRUD like approach in handling the way my project would behave. When we think About CRUD which is an acronym of CREATE , READ, UPDATE, DELETE we should naturally correlate CRUD with Http Method POST, GET, PUT and DELETE. As I mentioned before the client has the option of creating a character which would be handle by a POST method. POST creates a new resource for our api, which if done correctly should return a HTTP response code of 201 (CREATED). However before we even handle our POST request, it’s important to create a function that will create our new character. In the example below, The form provided has three inputs, labeled with the associated variables, after the inputs have been filled with the appropriate values , our form listens for some time of event to occur, in this it’s listening for a submit event.

form.addEventListener('submit', function(event){
event.preventDefault()
const name = document.querySelector('#new-character').value
const image = document.querySelector('#new-image').value
const crew = document.querySelector('#new-crew').value
const  createCharacter = {
name,
image,
crew,
}

To make things easier, I declared a new Variable createCharacter. The new variable has a value of the following properties, name, image and crew. Although we have the tools to create a character and have our new character added to our list of One Piece Character’s, upon refresh our newly created character will disappear. The reason for this behavior is because we have not included this new character in our API. This is where the POST method comes in play. In the example below I have a simple fetch(), which takes our url as a parameter and because were making a POST request, we have the option of using a second parameter, an init object that allows you to control a number of different settings:

fetch(OnePiece,{
method: 'POST',
headers: {
'Content-type': 'application/json',
'Accept': 'application/json'
},
body: JSON.stringify(createCharacter)
})
.then(resp => resp.json())
.then(newCharacter => cardContainer([newCharacter]))
form.reset()

As a disclaimer I gave the parameter OnePiece the value of our URL.As seen above, I’ve included the type of method, our headers and our body, and it’s important to note that the body is what I like to call JSONifying our parameter, which as we recall from earlier is, createCharacter

const  createCharacter = {
name,
image,
crew,
}

Our newly added character will pass through the body as an object and due to the stringify() method, our object will be converted as a JSON string. Lastly since were using fetch to parse our newly made character, it’s good practice to pass .then() method after our fetch call, since fetch is promise base, meaning our fetch returns a promise and because javascript is a single threaded language, and runs synchronous our .then method will defer the sequence of a code block until an async request is completed.

In conclusion, I would hope that this funny little blog may come to some use, to those new to manga, I would HIGHLY recommend reading One Piece. As for my approach to explaining the technical approach of my project, I would like to reiterate that my approach to this JS Application was to have a basic CRUD like approach. Meaning the Client would be able to implicate a POST, GET and a DELETE request, through the form receiving information, building a character and finally removing a character.