Week 3 (completed)

Week 3 was our personal project week, so no new concepts were introduced but it did require us to utilize all the previous concepts that we have learned. At first, I thought it was kind of uneventful and mellow but come to think of it, it was actually a critical week. It not only reaffirmed the choice that I made in attending a bootcamp. It also reaffirmed that I am heading in the right career/life direction. I was sleep deprived but happy. I stayed up every night until 1 AM just to code. I keep making excuses like “after I finish this part I’ll definitely go to sleep” or “just 15-30 more minutes” It was such a good feeling, I was obsessed with my project. I know it wasn’t the best or the most complex but it was extremely fun to work on. Here is a screen shot of it down below:

My take on Rock, Paper, Scissors

I got the idea for the game after looking up a tutorial for a simple Rock, Paper, Scissors game. I thought to myself “Pokemon is just a fancier Rock, Paper, Scissors. Why don’t I just add some sprites from my previous lab projects and make it pretty with some CSS”. It turned out better than I expected, and I have to thank the amazing super smash bros background for that. The functions in the project was half from tutorial and half mine. The user input (the elemental buttons) codes were mine, with the assistance from my camp’s TA as well.

Concepts that I have learned from week 3:
I didn’t learn any new concepts from week 3 but working on the project really solidifies my understanding of HTML, CSS and Javascript. I learned that you can just create one function that can select a different indexes from an array and use the value in that index. Here is the code snippet:
setUserChoice = (idx) => { this.setState({ playerAsh: this.state.pokemons[idx] }) }
This is the code that helped me understand how to create a user input for player Ash (the actual user on the right) to select one of the three pokemon inside the array to battle.
I also learned a cool CSS trick that can help me move and position things around the page. Here’s the code for that! objectYouWantToPosition { position: absolute (or relative); right (or left): XXpx; top (or bottom: XXpx; }

Another cool JS function that I’ve learned this week from practicing is
array.map(x=>x * 2)
To be fair I did learned this before but it didn’t stick but now it did (go figured lol). With that code, we can essentially turn the index to any other number without changing the original array! WOWWOWOW! What an age to be alive!??!? Ok I’m done. Good night!

Week 2 (completed)

I will post a short recap of week 2 due to this being technically week 3. I can’t believe we covered a language, React, within 1 week. I’m not sure how to feel about learning something like React in just 5 days but I managed to understand a few concepts. I mostly understood the concept of components, props, and states. I am still struggling to learn hooks and the benefits of using it.

React as a language act as a virtual DOM and use components to break down big chunks of functions, then export and import data via components. “Visually” it looks like this
Our main “App.js” => pass components we set => Return () or render our web page to visually display all the components that we have imported from ComponentA, ComponentB, etc. ComponentA could be a table written in HTML and has another component inside of it. The component inside ComponentA can be an array imported from another component called ComponentData, then ComponentData could have another component inside of it as well, so on and so forth. This makes building a website with different functions more manageable. React uses a JSX syntax that is similar to JS which gets compiled by Babel. Babel then takes React code and compiles into ES5 or ES6 to make it more universal for different browsers

Props are how data gets passed into React components. E.g. a React component called Sushi with a prop called name that is being passed, with a value called “Uni”
<Sushi name="Uni" />
Here’s a component filled with more than 1 prop.
let firstSushi = "Uni"; let secondSushi = "Otoro"; <Sushi className = "sushi" quantity = {4} name = {firstSushi + "and" + secondSushi}/>;
One important take away with React is its data-flow. One way flow from parent to child, that is read-only. If you want to communicate something to a parent component then you will need to have a function that will pass the function to the child component. If something happens within the child component, calling the function alerts the parent-component about the child component.

State is the primary method of storing data in a component and use to keep track of data in a component. A state-change trigger React to re-render components to display accurate data change. If something visual is being changed, it belongs in the state. Value and on change are used in two way binding to accurate display data change. I.e.,
State = { text: ‘’ } handleChange = (event) => { this.setState({ text: event.target.value }); };

Hooks let you use state and other React features without writing a class. That’s the definition directly from reactjs.org. Currently, I only understand how to use a State Hook which is display below.

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

The example component will have two states, count and setCount. Whenever you click on the button “Click Me” it will change your setCount by +1 then displayed your count times via prop {count}. That is all I have on hooks for now, like I mentioned. Not sure what are the benefits of using hooks vs. this.state. Alrighty, that is all I have for week 2 recap. See ya next time! ~Soosh signing off…nope! That still sounds ridiculous AF.

Week 1

“The mind, once stretched by a new idea, never returns to its original dimensions.”

― Ralph Waldo Emerson

Cheesy quote? Maybe. Did I google it? Mos def. It’s just that after reading my first post again, it reminded me of this quote. I’m surprised that I remember this quote for some odd reason. I remember the first time discovering it when I was at the dental office. I was laying down on one of those reclinable dental chairs and I saw a framed picture of a desert/sand dunes with this quote as a caption. I thought to myself “weird flex dentist lady but ok” It was actually interesting to read my first post again before writing this one. It was interesting in many ways. First, what I found difficult at that time seems easier now but not because I have gained more skills or knowledge with HTML and CSS. There are still plenty of syntaxes and concepts left for me to explore. I am comparing apples and oranges here but I think HTML & CSS is easier when you compare them to Javascript because JS as language, gives you the ability to do a lot more, therefore, more to learn..and fail (for once I am ok with that) but the possibilities are endless.

I’m rambling again. I have to remember why I started writing this post and this blog in the first place. End goal is to see how far I’ve come. So let’s focus on the concepts that I have learned or didn’t learn..Ok more like struggled with. I like to think that I retained some information..

Useful things that I have learned so far (from broad to specific things, e.g. concepts, labs, methods, functions, etc.):

Objects and Class: This first week really solidifies my understanding of object oriented programming. I kinda-sorta grasped the concept when I was learning C# back in college but not really you know? OOP as a whole/big picture can be oversimplify by the formula A=B=C therefore A=C (ok not really but for now this is the simplest way I can explain it). My favorite lab that goes along with this has to be the RPG lab! I mean cmon..

RPG Lab: I love this lab for obvs reasons!
Prompt: First, create a Monster classAdd properties for Health, Strength and GoldAdd a constructor to initialize our valuesAdd a method to print out the Monster’s health, strength, name and goldCreate a Monster and print out that Monster’s stats.
Next, create a Boss class that inherits from the Monster classAdd a property to the Boss class called ExperiencePointsAdd a method to the Boss class called Heal that heals the Boss to full healthCreate a Boss and print out that Boss’s statsSet the health of the Boss to 0(zero). Next call the Heal method on our Boss and then print out the stats again.
Solutions/Code:
class Monster { constructor(name, health, strength, gold) { super(name, health, strength, gold) this.name = name; this.health = health; this.strength = strength; this.gold = gold; this.monster = monster; } printStats() { console.log(`The ${this.name} has ${this.health} health, ${this.strength} strength, and is worth ${this.gold} gold`); }} let Demon = new Monster("Demon", 9000, 2500, 9000)Demon.printStats(); class Boss extends Monster { constructor(name, health, strength, gold, exp) { super(name, health, strength, gold); this.exp = exp; this.fullhealth = health; //this.fullhealth property is set to equal the original boss's health } heal() { this.health = this.fullhealth; }} let monster0 = new Boss("Demon Lord", 666666, 666666, 666666, 666666)monster0.printStats()monster0.health = 0;monster0.printStats()monster0.heal()monster0.printStats()

Arrays: I freakin’ love arrays! I never thought I’d say this but I actually find it very useful. For some reason I couldn’t grasp the array concept with C# but I get it with JS! Also maybe at the time I was learning Arrays along with Matrixes, and C# is less forgiving than JS. Arrays is more than just a list. It’s a list that you can use in a function to do specific things! Which bring me to my next favorite lab!

Fav (Array) Lab & Solutions: I like this problem for many different reasons. The first reason is the premise of the prompt. The second reason because it uses an array in a function. The last reason is because it taught me how to write my first and VERY basic algorithm! i iS dA sMaRt GuY..durr. Jokes aside, below is the prompt and solution.

prompt: Learning to code around your full time job is taking over your life. You realize that in order to make significant steps quickly, it would help to go to a coding bootcamp. You decide that rather than leaving work totally, you will request a sabbatical so that you can go back to work post-bootcamp and be paid while you look for your next role.
You need to approach your boss. Her decision will be based on three parameters:
val = your value to the organisation, happ = her happiness level at the time of asking The number of letters from ‘sabbatical’ that are present in string ‘x’. Note that if x contains three instances of the letter ‘l’, that still scores three points, even though there is only one in the word sabbatical. If the sum of the three parameters (as described above) is > 22, return // ‘Sabbatical! Boom!’, else return ‘Back to your desk, boy.’.

solution:
const letters = ["a", "b", "c", "t", "i", "l", "s"]; function sabb(text, val, happ) { let counter = 0; for (let letter of text.toLowerCase()) { if (letters.includes(letter)) { counter++ } sum = val + happ + counter; } if (sum > 22) console.log('Sabbatical! Boom!') else return console.log('Back to your desk, boy')} * // ============== Test Case ===================// */// sabb('What do you mean I cant learn to code??', 8, 9); sabb('Can I have a sabbatical?', 5, 5) = 'Sabbatical! Boom!' sabb('Why are you shouting?', 7, 2) = 'Back to your desk, boy.' sabb('What do you mean I cant learn to code??', 8, 9) = 'Sabbatical! Boom!' sabb('Please calm down', 9, 1) = 'Back to your desk, boy.'

Concepts or “Tings” I hate/struggled with:
Document Object Model: DOM is DUMB. Ok jokes aside, Document Object Model is ridiculous and tedious. I get that this is how people code most web apps 10 years ago and to be honest 4 days ago I thought it was the only way to code. I mean that is the basic concept of building web pages/apps. I just didn’t know how difficult it would be. There are just so many concepts you have to piece together in order to make it work. I’m glad to know that React can help ease this pain (thank you ‘early’ facebook! Not the now fb where you steal people’s info) I’m excited to be learning React in the upcoming week! From what I know so far about React is that it is a library that can help build a user interface a lot easier than the DOM.

Alright. That’s all I have for Week 1. Time to turn in and get ready for Week 2, which starts at 9 AM tomorrow! ~Soosh out!
P.s. I’m still working on a better sign off