Flatiron | In the Deep End

Nathaniel — Sat, 27 Nov 2021 06:24:37 +0000

Hooray, I did it! This is my last project with Flatiron. For the last several months my life has been consumed in code, tearing into projects. Now is the time to apply all my newly acquired skills and complete the course and begin my career as a software engineer.

Learning the coursework was like drinking water from a firehouse. It all comes at once and at times can be a lot to handle. After careful review, confusing subjects became clarified and gave me a newfound appreciation of the work that has gone into programming.

Before Flatiron I had no programming experience. Now I know how to create full stack applications. It’s amazing what can happen in only a few short months.

I realize with this final project just how far I’ve come from day one. Learning to program has in many ways been like learning to swim. On day one I could barely float. I couldn’t imagine creating a website frontend. Now, I’m making application with both a frontend and backend

While this article signals the end of my time as a Flatiron student. The field of programming is vast and I have only scratched the surface of what there is to know. There will be obstacles along the way, but Flatiron has taught me how to overcome them. So when rough times head my way, I will be able to keep my chin up and take it on, like a true programmer.

JS RoR Project

Nathaniel — Wed, 07 Jul 2021 19:31:00 +0000

This blog is about my latest project here in Flatiron. It was my first experience with JavaScript and I have to say, I like it! This was a challenge to learn, but I now have a newfound appreciation of the language and take pride in being able to write JavaScript like the programmers I look up to.

For this project, I decided I wanted to achieve a few things:

Reinforce old knowledge
Meet the requirements for the project
Push myself

The Problem
A trading card game I play consists of many different pieces and it's hard to keep everything straight. The sheer size of the game intimidates a lot of people. I wanted to implement a solution that would help other people build and rank cards for decks, based on that creature's abilities.

Data Model
An important part about a project is the data model. The model below shows my has_many and belongs_to relationship.

Creatures(parent) Skill(child)

Rails

I used Active Model Serializers to transfer data with json.

class CreatureSerializer
include FastJsonapi::ObjectSerializer
attributes :name, :image, :description, :skills
end

Above you see the attributes name, image, description, likes, and skills for the Creature database.

I also found that in order to render the correct routes I had to make a change in my config>initializers>cors.rb file.
Rails.application.config.middleware.insert_before 0, Rack::Cors do
allow do
origins '*'

resource '*',
  headers: :any,
  methods: [:get, :post, :put, :patch, :delete, :options, :head]

end
end

This is the final result.
{
"id": "4",
"type": "creature",
"attributes": {
"name": "Creature Name",
"image": "Creature Image",
"description": "Creature Description",
"likes": "0",
"skills": [
{
"id": 86,
"name": "Creature Skill",
"creature_id": 4,
"created_at": "2021-06-10T15:20:17.399Z",
"updated_at": "2021-06-10T15:20:17.399Z"
}
]
}

I then worked on building my JavaScrpt objects. My main class was Creature as seen below:

class Creature {

static allCreatures = []

constructor(creature){
    this.id = creature.id
    this.name = creature.attributes.name
    this.image = creature.attributes.image
    this.description = creature.attributes.description
    this.likes = creature.attributes.likes
    this.skills = creature.attributes.skills
    Creature.allCreatures.push(this)
    this.renderCreature()
}

static renderCreatures(creatures){
    card.innerHTML = ""
    for(let c of creatures){
        c.renderCreature()
    }
}

static fetchCreatures(){
    fetch(creaturesURL)
    .then(response => response.json())
    .then(creatures => {
        for( let c of creatures.data){
            let newCreatureCard = new Creature(c)
        }
    })
}


renderCreature(){
    const creatureLi = document.createElement('li')
    const h2 = document.createElement('h2')
    const img = document.createElement('img')
    const p = document.createElement('p')
    const creaturesSkills = document.createElement('ul')

    const likeCount = document.createElement('p')
    const likeButton = document.createElement('button')

    const deleteButton = document.createElement('button')
    const skillForm = document.createElement('form')
    creatureLi.dataset.id = this.id
    card.appendChild(creatureLi)
    h2.innerText = this.name
    img.src = this.image
    img.width = 200
    p.innerText = this.description
    likeCount.innerText = this.likes
    likeButton.innerText = "Like"
    likeButton.addEventListener("click", this.addLikes)
    deleteButton.innerText = "Delete"
    deleteButton.addEventListener("click", this.deleteCreature)
    skillForm.innerHTML =`
    <input type="text" placeholder="Add Skill">
    <input type="submit">
    `
    skillForm.addEventListener("submit", Skill.createSkill)
    creaturesSkills.dataset.id = this.id
    this.skills.forEach(skill => {
        let newSkill = new Skill(skill)
        newSkill.renderSkill(creaturesSkills)
    })
    creatureLi.append(h2, img, p, creaturesSkills, skillForm, likeCount, likeButton, deleteButton)
}

static submitCreature(event){
    event.preventDefault()
    fetch(creaturesURL, {
        method: "POST",
        headers: {
            "Content-Type":"application/json",
            "Accept":"application/json",
        },
        body: JSON.stringify({
            name: enterCreatureName.value,
            image: enterCreatureImage.value,
            description: enterCreatureDescription.value,
            likes: enterCreatureLikes.value
        })
    })
    .then(res => res.json())
    .then(creature => {
        let newCreature = new Creature(creature.data)
        makeACreature.reset()
    })
}

deleteCreature(){
    const creatureId = this.parentElement.dataset.id
    fetch(`${creaturesURL}/${creatureId}`,{
        method:"DELETE"
    })
    this.parentElement.remove()
}

addLikes(e){
    e.preventDefault()
    let more = parseInt(e.target.previousElementSibling.innerText) + 1
    const creatureId = this.parentElement.dataset.id
    console.log(e.target.previousElementSibling)
    fetch(`${creaturesURL}/${creatureId}`, {
        method: "PATCH",
        headers: {
            "Content-Type": "application/json",
            "Accept": "application/json"
        },
        body: JSON.stringify({
            "likes": more
        })
        })
      .then(res => res.json())
      .then((like_obj => {
        e.target.previousElementSibling.innerText = `${more} likes`;
      }))
  }

}

I used iterators and JQuery to process data and append to the DOM. Once this was completed I had my final product.

Conclusion

This was a challenging but rewarding lesson.I am grateful to have had the chance to further develop my knowledge of rails as well get the opportunity to learn JavaScript.

This JavaScript portion was a challenge. I had no previous experience with this language, but I am grateful to have learned this skill and look forward to further developing my knowledge of it!

DEV Community: Nathaniel

Flatiron | In the Deep End

JS RoR Project