DEV Community: NicoleLC16

Ruby on Rails Validations

NicoleLC16 — Sun, 12 Jul 2020 04:53:07 +0000

This week I have been going over my past projects. One of the main things I've noticed are my messed databases. Why? Because I did not pay much attention to validations when I created them. Some only had one validation or even one. I found that it is easy to get distracted with the front end and not spend much time on your back-end. So this past week, I have been going through my past projects and cleaning up the back-end. That means adding in some validations.

What are validations?

Validations in a sense are check points before data enters your database. The data being entered or processed to the back-end are being checked before they are committed into the database.

Why are validations important?

As someone creating examples for your own product or code, you may know exactly what should be entered in your database. However, most people don't and plenty of times, the user will enter something completely unpredictable in the input. This can often times break you code completely. Having this in the database is considered "bad" data and will probably affect your project. Imagine a user typing in a username that's already been used. What if they don't type in anything at all? What if they enter in a number and someone else enters the same number for their username? Users can enter many "odd" things into your database. So using validations will keep this from happening and keep your database clean.

Rails Validation Format

class User < ActiveRecord::Base
  validates :username, :presence => true
end

Here's a simple example of a rails validation? Pretty simple and easy to follow right? You declare the attribute that you want checked or validated and what you are checking for.

List of Common Validations

Uniqueness

class User < ActiveRecord::Base
  validates :username, :uniqueness => true
end

This is one of the most common validations I have ever used because my projects all have some kind of user or account. Uniqueness means that whatever attribute is chosen in the validation, that attribute has to be unique. In this case, if a username of JohnDoe was entered by a new user and it already exists, then this new entry will not be committed into the database.

Presence

class User < ActiveRecord::Base
  validates :username, :first_name, :last_name :presence => true
end

This one's self explanatory and very commonly used. Basically, it's saying, does this attribute exist? If not, then do not commit. Notice that there are several attributes in this one. If you are checking for all your fields for presence then you can enter them on the same line like this.

Length

class Post < ActiveRecord::Base
  validates :title, length: 6..20
  validates :post_body, length: { maximum: 300 }
  validates :post_body, length: { minimum: 30 }
end

There are several ways to define what you want in length. In this case, a post body is restricted to only 300 words. So if a post is more than 300 words, it will not save to the database. However, there is also a minimum set. If it does not reach at least 30 words, then it will not save either. This is a good example of setting a minimum because if you are building a blog platform, do you really want people to have blogs of only 1 word? We also see that you can dictate max and min through a range like the first validation.

Format

class User < ApplicationRecord::Base
 validates :first_name, :last_name, 
 format: { with: /\A[a-zA-Z]+\z/, message: "only allows letters" }
end

This validates the format of what you want in your database? Official names should only be letters right? What about pin numbers? Or input fields that need dates. This can all be validated with this method.

Confirmation

class User < ApplicationRecord
  validates :password, confirmation: true
end

l mainly use this one for password confirmation but it is very useful and common as well.

There are many validations out there. More can be found on the rails validation document. I hope this helped you. Thank you for reading.

Things I Wish I Did Before Going to a Coding Bootcamp

NicoleLC16 — Sun, 05 Jul 2020 05:37:23 +0000

So a few weeks ago, I posted about what you can expect from a bootcamp or things that you can do to survive. Today, I thought I would give some tips and insight on what I wish I could have done BEFORE starting my coding bootcamp. Preparing more would have definitely lessened the stress of the program.

Be Ready to Work and Put in Time
It's a program that's condensed a few years worth of knowledge into a few months. Expect the deadlines to be very fast and expect the workload to be heavy. Clear away any projects or extra things that you have going on and focus on this. In my experience, I decided to have a job on the weekends. I know for some that's necessary but if you can afford to take those weekends off, then I highly suggest it. Many times throughout the programs, I wished I was at school instead of work during the weekends like my cohort mates. The idea of getting behind can really get to you.
Try and Finish the Pre-Work
If your program has a pre-work, do your best to finish it, even if you don't fully understand it. Our pre-work had a require amount that needed to be completed before starting the program. However, there are things after the requirement that would have been very helpful to know as the program went on. I finished a few more coursework lessons past the requirement. I didn't fully understand them but they came up later in the program and it made things a lot easier to understand because I finished that part of the pre-work.
Get Familiar with Shortcuts
If you've never coded before, this is a life saver. Get familiar keyboard shortcuts will make typing all the code seem less daunting. It will also come in handy when you start doing code challenges.
Rest
Yeah, I know I just said work hard but before you go into all that, be refreshed and renewed. Plan your pre-work well and don't stay up coding. You'll do plenty of it when you start the program.
Do Your Research on What Would Be Good to Learn for Your Program
My program focused more on full stack engineering. What I wish I would have learned before the program was CSS and HTML. I did already know about them in the past. I played a little bit with CSS and HTML but it wasn't enough. More practice would have definitely helped when we entered the front-end realm. I'm not saying that you can't join a bootcamp without this but if you have never touched CSS or HTML and your program is web development or full stack, then I highly suggest at least learning about it. There's plenty of free resources out there.
Play with Code More
Again, you don't have to be a master coder of have done code to do a bootcamp but I definitely wish I could have played around with code more. Even if they don't relate to your program as much. Maybe even doing some algorithms practice will help you get in that coding mindset. It will also help you code faster and understand concepts better in the first week hell--I mean bootcamp.

I hope this helped some of you that are considering on going to a bootcamp! Thank you for reading!

New to JavaScript Project Ideas

NicoleLC16 — Sun, 28 Jun 2020 02:01:39 +0000

I struggled when I started learning JavaScript. What helped me the most were projects and labs that were fully immersive. With this, I learned where I should focus my learning more on and I was able to apply concepts that I had trouble with on projects. Not only did I understand it better but my application of it, improved. So here is a list of projects and labs that I enjoyed while learning JS.

To Do List
Yes you can probably do this any language but it's simple and you can get creative with it. This help you explore and play with JS functions. This will also help with understanding DOM manipulation better.
Anything that holds cards
Get data of anything then put those into cards. This will help with rendering things on page and also experimenting with time on JS. This is also very helpful with adding things to the DOM.
Like or Comment
Adding a like or comment animation is very helpful in working with both JS and DOM manipulation. If you want, you can take this a step further and add the backend to it.

4.Easy Game Animations
This can be as simple as moving a bar across the screen with arrows but it did help a lot when I started with JS.

Anything with Filtering or Toggles
One of the labs we had worked with both filtering and toggling. Learning this is crucial because most websites have some kind of filtering or toggling involved.
Menu Listing
Have a list displayed then make that into an even bigger list by displaying more information and even pictures after clicking on the one of the items on a list.
Play with Backgrounds and Text Color
Actually decorate and play with color as you click on different things. This will help you get used to using event listeners.
Some Kind of Tracker
For my final project on this module, my group built a fancy job tracker. It helped solidify everything we learned in JS and DOM manipulation.

Hope this gave you some ideas! Enjoy your projects!

Tips and Things to Expect to Survive A Coding Bootcamp

NicoleLC16 — Sun, 21 Jun 2020 05:37:31 +0000

Coding Bootcamps are intensive and immersive coding programs that typically runs for a few months. In other words, it is very fast paced and can be overwhelming. I decided to write this post to help those of you that just starting your bootcamps or maybe starting soon. I finished my program at Flatiron School a few months ago. My experience is based on my time there.

Make the Most Out of Your First Week

My pre-work and even recruiter for the program kept telling before I started the program that it was very important to hit the ground running from the beginning. Unfortunately, I had this idea that I could slack a bit in the first few days and yes, as expected, I ended up paying for it. I understand that this trap is easy to fall into because in regular college or grade school courses, this would be case. The first few days are relaxed. That is not the case with bootcamps.

Remember that they are condensing years worth of knowledge into your brains within a couple of months. Even if things are going kind of slow, find something to do. For example, my first day had a small project and the rest of the day was setting up. Some people took longer than others to set up. If you are finished setting up, then look at the week ahead. Make a plan of attack. Familiarize yourself with the environment and your laptop. Ask your instructors what else you could or should be doing if you are not sure. Stay productive!

The first mod was the hardest for me. I came from a non-tech background and coding is a very different mindset than my background. It took pretty much the whole mod to immerse myself into this mindset which is why I wish I could have managed my time better in the first mod and the first week. Once you get yourself into this mindset and the flow of a typical bootcamp day, it will be easier to move forward into the bootcamp.

You Are Here to Learn

I'm sure you all know that but what does it really mean in a bootcamp? It means leaving your ego at the door and accepting when you are wrong. In most cases, you will be. BUT! That's okay! You are there to learn. So being wrong and making mistakes will help you improve your code. During lecture our instructors would ask us to answer questions that we had a vague idea about. Most of the time our answers were wrong and he or she would further explain a better way to write a certain function. This also helps you think of more ways than one to write code. Bottom line is, it's okay to be wrong, you are there to learn.

Ask Questions!

No seriously...ask questions until you annoy your instructors and yourself in the beginning! Okay maybe that's an exaggeration but this is one of the things that I wish I did more in the beginning. Let me spell this out IT IS A NORM TO ASK QUESTIONS in programs like these! If you don't ask questions and end up not understanding key concepts, you will fall behind. This isn't like college or high school where if you do bad on a topic, maybe you'll do better on another. Everything builds on each other and even if you aren't using a concept that you didn't do well on the past, it's going to come back sooner or later. Ask questions and make sure you understand the key concepts.

Stop Comparing Yourself to Your Peers

Yes, this sounds like high school but really don't do it. Everyone will have their strengths and their weaknesses throughout the program. What matters is if YOU, yourself is actually understanding the concepts and gaining the ability to produce actual code and products with these abilities. It doesn't matter if your peer can do master level functions. What matters is what can you build and are you learning and progressing on the main topics?

Connect with Your Peers

Connect NOT compare. The program was structured to teach us to eventually stand on our own and be able to find solutions by ourselves without help from instructors. BUT that doesn't mean you do everything by yourself. Much like in the real world of development, you'll be in teams and you will need to communicate with your team. In other words, you may not be okay asking questions to your instructors later on in the program but you most certainly should be asking and discussing topics with your peers. It's easier to build connections in your cohort early, so that you can get comfortable asking questions and also sharing solutions.

It's a lot of Code and a lot of Reading

It will be long hours of coding and a lot of reading. We did not have any videos other than the lectures. I highly recommend recording the lectures if they are not recorded for you. Fortunately for us, they were recorded. I watched those lectures religiously. They are incredibly helpful and a good break from reading and coding. So be prepared for that! Take a break every now and then. You'd be surprised how much 15 minutes of just staring at a white wall and not a computer can refresh your brain.

What You Give is What You Get

I am talking about TIME. The more time and effort you put in, the more you are going to get. What does that mean exactly? It's going to be varying degrees of output because people have different backgrounds and experiences. My school expected us to be there 9 hours a day with 1 hour break. However, most of the time my cohort coded during our lunch break. For me, I stayed or came early almost every day, outside of school hours. On some weekends I came in both days depending on how I was doing with the material. I am not including this experience to scare you but to give you a reality check. This is what it took for me to succeed. It may be different for you if you've had previous tech or code experience but be prepared to DEDICATE TIME to your program.

I hope these helped some of you get a better picture of your program and helped in some way to plan out your time there. Thank you for reading!

React Props

NicoleLC16 — Sun, 14 Jun 2020 04:57:26 +0000

When I started learning React, I struggled with Props. I am writing a quick overview of React Props as a small guide for those that are just learning React. Hopefully, this will prove useful for those you just starting with React.

Components

Remember that React works with components. They are small reusable pieces that are independent and are similar to JavaScript functions. Often times, these components contain information that need to be passed between other components. This is where props come in.

Props are Short for Properties

Props are pieces of information stored in components. These pieces of information are often passed to other components depending on their use. In other words, components will have props of their own depending on what has been declared. The format of props are similar to that of attributes. An attribute will be declared, along with a value for the attribute. This attribute is how a prop will be called or invoked in other components.

function BookParent() {
  return (
    <div>
      <BookChild title="Harry Potter" author="JK Rowling"/>
      <BookChild title="Game of Thrones" author="George R.R 
      Martin"/>
    </div>
  );
}

function BookChild(props) {
  return (
    <div>
     {props.title} by {props.author}
    </div>
  );
}

Here we have two components. One is a parent component and one is child component of the parent. In the parent component, an attribute for title and author was declared with values. Title and Author are now properties of the parent(BookParent) component. However, BookChild does not know the values that were assigned to Title and Author. BookChild will need to pass in props and invoke title and author by using props as seen above.

Props are Passed Down from Parent to Child

As you can see the props came from the parent component. It is only being invoked by the child when it is needed. You cannot pass up a prop coming from child to parent. To do that, you would have to use a callback function(may go over this in another post). Bottom line is that props relations are parent to child!

In Summary

Props are passed down from parent to child. Yes, I know I am repeating myself but this is very important. Props are declared at the very top level component. You cannot invoke a prop that has been declared, just like how a variable will be undefined or null if it has bee declared yet.

So first you need to declare a prop in the Parent Component:

function ParentComponent() {
  return (
  <div>
   <ChildComponent declaredAttribute={attributeValue} />
  </div>
  );
}

Then invoke using props in the Child Component:

function ChildComponent(props) {
  return (
  <div>
   {props.declaredAttribute}
  </div>
  );
}

That prop will now render at the very top level component with the format being used in the ChildComponent.

Thank you for reading. Hope this was helpful.

Things I did post coding bootcamp

NicoleLC16 — Sun, 07 Jun 2020 02:04:19 +0000

Recently, I finished my program at Flatiron School for Software Engineering. I was incredibly relieved to have made it through the program but also terrified. Graduation meant many things including job searching. It also meant that I was not in Flatiron's environment anymore. One of the things that really kept me motivated throughout the program was the environment of Flatiron. There, I worked with people that were motivated to learn and poured hours of work on code. I understood that I could do that the same at home but it's never going to be the same.

I am now a couple of weeks past graduation and have started my job search. One of the issues I feared most had to do with forgetting concepts I learned throughout the program. It was difficult to keep my motivation up, especially with the current events happening around us. However, I managed to pull through and keep my head on code. So, I am writing this post to hopefully help others that are finishing their programs and feeling the same as I did. Here are some the things that I did on a daily or weekly basis to keep pushing forward:

1. Take a break

Yes, it's contradictory to all that moving forward and motivation spiel that I just mentioned. However, if you just finished your program, you are very likely burned out. I was there and I told myself I was only going to take a day off. I ended up taking a week and a half off not knowing how much I needed that break. I dived back into code right after that and remembered why I love coding and developing. Respect that you may be overworked. Take a break. Then dive back in.

2. Do at least one code related thing everyday

I'm not talking about coding everyday. That is up to you and what you feel you can handle. Physically typing out code is not the only thing you can do to keep that mentality you learned at your school. You can watch code videos, learn algorithms, read a code related blog posts, or do a lesson on a new language you are learning. Not only will this help you push forward and learn new things, but it will also help build your network.

3. Start a project

One of the best ways to keep your skills sharp is to practice it. Even better if you can learn something new along the way. After the program, I started a project with a group and we used React Hooks because the program did not go over them in depth. We used the project to keep our skills on point and to learn Hooks.

4. Stay in contact with your classmates

Working on a project with a group was fun but we also talked about how things were going about our career services and how we were feeling post graduation. It was uplifting to hear to that I was not alone in how I felt. Staying in contact with people from your cohort is a great support system.

5. Challenge Yourself with Data Structures and Algorithms

Do not neglect this! I was terrible at data structures and algorithms in the beginning. I was honestly afraid of them at first but practice makes perfect! I even ended up enjoying working with them in the end. However, since I was afraid of them in the beginning, I ended up procrastinating on it but many companies do tech interviews with algorithms, so it is inescapable. My friend challenged me to learn something related to this every week and do one easy algorithms practice everyday and one medium/hard problem each week. It helped me build a mentality for these topics and expand my knowledge on them.

6 Do something career related every week

It's going to take time to find a job but that doesn't mean you should just neglect job searching overall. With Flatiron, career services have certain goals and tasks to complete before officially declaring your job search. This includes building a resume and a LinkedIn profile. Try to work on some of these even if you are not yet applying for jobs. It will help keep you on track and to push forward.

7 Just keep learning

This should be obvious because I mentioned several times about learning something new. The more skills you have, the more you have to offer to companies. Now, I'm not talking about learning a bunch of new languages. Learn things that will help you be adept in certain skills. You can, by all means, learn a new language. However, it doesn't mean that you can't expand on other skills. I learned React Hooks in the project I mentioned before. However, I could already code in React. Learning hooks helped me expand on my skills with React.

Thank you for reading. I hope this helps you move forward with your new career path.

Why I am Learning Hooks React

NicoleLC16 — Sun, 31 May 2020 00:39:19 +0000

I learned React by passing down props and state to components. There are a lot of things you could do with React in this form. However, things can get repetitive and harder to read as the list of props and state grows. Even more if you are passing all the way down to the very bottom layer of components.

This is where hooks can come in handy. It makes things less repetitive and easier to pass down and pull information between components.

Let's take a look at a simple React component without hooks.

import React, { Component } from 'react';
import ExampleButton from '..components/ExampleButton'

export default function App() {
  state = {
   text: "Hello World",
   toggleOn: true
  }

  return (
    <div>
      <ExampleButton text={this.state.text} 
       toggleOn={this.state.toggleOn}/>
    </div>
  );
}

In this component, we see that we declared some state attributes and we are passing it down to the ExampleButton component.

import React, { Component } from 'react';

export default function ExampleButton(props) {

  return (
    <div>
     <Button onClick={!props.toggleOn}>{props.text}</Button>
    </div>
  );
}

In this component, we grabbed the state attributes by using props. However, what if we had more components to use the text "Hello World"? Or more buttons to have a toggle feature? Each time, we have to pass down the state properties and call them using props.

With hooks, you will be able to declare state and just call on specific state properties without having to pass down the props. This is done through the use of useState. It works in a similar fashion as setState. With that, you will also be able to change state into something else.

import React, { useState } from 'react';
import ExampleButton from '..components/ExampleButton'

export default function App() {
  state = {
   text: "Hello World",
   toggleOn: true
  }

  return (
    <div>
      <ExampleButton />
    </div>
  );
}

See the difference? No props are getting passed down to the ExampleButton component. So how will we call these state properties now?

import React, { useState } from 'react';

export default function ExampleButton() {
const [toggleOn, setToggleOn] = useState(!toggleOn)
const [text, setText] = useState('Hello!');
  return (
    <div>
     <Button onClick={toggleOn}>{text}</Button>
    </div>
  );
}

Here we are using useState to call on any properties of state. This looks much cleaner and easier to read. Also we don't have to worry about properties getting passed down correctly through many different components. We can call directly on any state property by using useState. We can also reset state as demonstrated in the last code block.

React and Semantic UI Cards

NicoleLC16 — Sun, 24 May 2020 02:37:48 +0000

Cards are everywhere and widely used on the web.

With React and Semantic UI, you can easily build a row of cards that look something like this:

Semantic UI will even provide code that you can play with and customize depending on your content.

import React from 'react'
import { Card } from 'semantic-ui-react'

const src = '/images/wireframe/white-image.png'

const CardExampleColored = () => (
  <Card.Group itemsPerRow={4}>
    <Card color='red' image={src} />
    <Card color='orange' image={src} />
    <Card color='yellow' image={src} />
    <Card color='olive' image={src} />
    <Card color='green' image={src} />
    <Card color='teal' image={src} />
    <Card color='blue' image={src} />
    <Card color='violet' image={src} />
    <Card color='purple' image={src} />
    <Card color='pink' image={src} />
    <Card color='brown' image={src} />
    <Card color='grey' image={src} />
  </Card.Group>
)

export default CardExampleColored

Seems simple to follow right? You determine the number of cards per row by calling Card.Group. Then each card is rendered by:

<Card color='red' image={src} />

This works if you only had a few cards to work with. However, what if you wanted to display clothes using cards. Imagine building a shopping website with thousands of clothes using these cards. No one wants to type that many cards and it would not be as readable. What if you were also not aware of the exact amount of cards that you need?

In this post, I will demonstrate rendering these cards in a more dynamic matter.

In this page, I am using Semantic UI cards to display currently hosted book games. Users can continuously create new games and add to this list of games. This means that I cannot use the code snippet above because we do not know the amount of cards we need.

If I wanted to replicate this use of cards, I would need a card component that would contain the look and information of each card. It can looking something like this:

const GameCard = props => {

  return (
    <Card raised >
      <Card.Content>
        <Card.Header>{title}</Card.Header>
        <Card.Description>Game Host: </Card.Description>
      </Card.Content>
    </Card>

  );
};

export default GameCard

Here we can see that each card is going to have this format and information contained within the card. This is the same as one of these:

<Card color='red' image={src} />

The difference is that the GameCard is a whole component that utilizes this card structure for all the cards on this page. It is also not grouped inside Card.Group format like depicted in the example provided by Semantic UI.

So where do we add this Card.Group? We need this because we need to declare the amount of cards per row and also to determine that each card is going to be within this group.

import React, { Component } from "react";
import GameCard from '../components/GameCard'

class GameContainer extends Component {

  gamesCollection = () => {
    return this.props.games.map(game => {
      return <GameCard game={game} >
    })
  }

  render() {
    return(
      <Container style={{padding: "20px"}}>
      <Card.Group itemsPerRow={4} style={{padding: "20px"}}>
        {this.gamesCollection()}
      </Card.Group>
      </Container>
    )
  }
}

export default GamesContainer

This is a container that iterates through all the games. The return values calls the component of the GameCard component we just looked at. This is also where we can wrap the GameCard with and declare the amount of cards per row. In a sense, this is the same as:

      <Card.Group itemsPerRow={4} style={{padding: "20px"}}>
         <GameCard game={game} >
         <GameCard game={game} >
         <GameCard game={game} >
         <GameCard game={game} >
      </Card.Group>

See the similarity with the Semantic's example?

 <Card.Group itemsPerRow={4}>
    <Card color='red' image={src} />
    <Card color='orange' image={src} />
    <Card color='yellow' image={src} />
  </Card.Group>

The difference is how we dynamically loop through the games and create those game cards until there's none left.

Thank you for reading and I hope this was helpful!

React Previous State

NicoleLC16 — Tue, 11 Feb 2020 19:51:15 +0000

Last week we started the React segment of our program. We learned about State. There are many ways to manipulate State. However, I found the idea of Previous State very convenient. In this post, I will be displaying different ways to utilize previous state.

State

Before we get into updating and using previous state, let's talk about State first. State is mutable data in a React component. State has the ability to change through its component's life. One example of when to use State is when you might want to increment likes on click.

First you would want to set up the initial state that you will update in a component.

class Like extends Component {

  state = {
   like: 0
  }
}

Once you have your initial state declared, you can now use setState() to update state. setState() basically just allows you to manipulate state. So we would want our state to update in a way that will increment our likes counter when something is clicked.

class Like extends Component {

  state = {
   like: 0
  }

 handleLikeChange = () => {
   let increment = this.state.like + 1
   this.setState({
    like: increment
    })
 }

render() {
 return(
 <div onClick={this.handleLikeChange}>{this.state.count}</div>
 }
}

As the like div is clicked, the like count will go up. In other words state is updating every time that specific div is clicked.

Now that we have an idea of what state is. Let's move on to Previous State!

Previous State

Remember how we reset the state of the likes count?

 handleLikeChange = () => {
   let increment = this.state.like + 1
   this.setState({
    like: increment
    })
 }

You could definitely change state like this or you could use previous state and change it this way:

 handleLikeChange = () => {
   this.setState(prevState => ({
    like: prevState.like + 1 
    }))
 }

Both of these work. Previous state just refactors the code without having to declare a variable. The reason we are declaring a variable in the first place is because you cannot call this.state in setState(). Using previous state allows us to use the previous value of state without having to call state. It keeps track of what state was previously and changes state based on what it was before.

You can update state either way but I found the use of previous state incredibly convenient, especially when multiple set states need to called, since setState() is asynchronous.

Here are other ways to utilize previous state:

import React from 'react';

class DogToggle extends React.Component {
  constructor() {
    super();

    // set initial state
    this.state = {
      isGoodDog: true
    };
  }

  // when handleClick is called, setState will update the state so that isGoodDog is reversed
  handleClick = () => {
    this.setState(previousState => {
      return {
        isGoodDog: !previousState.isGoodDog
      }
    })
  }

  render() {
    return (
      <div>
        <button onClick={this.handleClick}>{this.state.isGoodDog ? "Good Dog!" : "Bad dog!"}</button>
      </div>
    );
  }
}

export default DogToggle;

This example creates a toggle button for a good and bad dog. It calls on the status of isGoodDog and reverses its boolean status to whatever the previous state was. I also found out that you can implement this logic to implement filters on a page.

import React from 'react';

class App extends React.Component {

//set initial state with two empty arrays
    state = {
      storeItemList: [],
      yourWishList: []
    };
  }

//use previous state with a spread operator to call the contents of the ``yourWishList`` array and append the selected item to that array.
selectItems = (selectedItem) => {
  this.setState(prevState => ({
      yourWishList: [...prevState, selectedItem]
  })
}

  render() {
    return (
      <div>
       <ItemListContainer items={this.state.storeItemList} 
       onSelectItems={this.selectItems} />

       <WishListContainer items={this.state.yourWishList} />
      </div>
    );
  }
}

export default App;

In this example, I am adding items from one array to another. Two empty arrays are declared in the initial state. To add an item to another array, I need to take a selected item and append it to my desired array. In this case, I declared selectedItem as a parameter to the selectItems function. Then I reset state by using a spread operator on previous state. Recall the line yourWishList: [...prevState, selectedItem] I am reseting the state of yourWishList by taking in all of the previous contents of this array, then appending selectedItem at the end of the contents of the array.

There are many ways to update state and use previous state. But these are just some of the ways you can update state. Hopefully this helped you understand state and updating state better!

Common Elements and Attributes to Know When Starting Out with DOM Manipulation

NicoleLC16 — Tue, 28 Jan 2020 21:03:35 +0000

Recently, my group at Flatiron School just finished our JavaScript mod. It was the first time, I truly worked with DOM manipulation. In this post, I will be going over common elements and attributes that I often worked with as I created cards, forms, etc with vanilla JavaScript.

I am writing this post a place of reference for myself. Hopefully this will be helpful to those of you that starting out with DOM manipulation and if you have less experience with CSS and/or HTML. Not all elements and attributes are included. I am only including the ones I worked with the most.

ATTRIBUTES

Attributes allow you to define characteristics of an HTML element. By defining its characteristics, we can select element more easily and also give it more functionality.

My most used attributes were ID and Class selectors.

ID and Class Attribute

Selectors are very important because they allow you to easily select elements and add style or functionality to them. You can have many p's or divs in one HTML file. Having ID's or classes will you to specifically select a certain div in the file, like so:

ID Selector

<p id="my-id"></p>

let myId = document.getElementById('my-id')
myId.innerText = "Hello World!"

ID Selectors are unique. They should only select one specific element.

Class Selector

<p class="sub-title">Movies</p>

<p class="sub-title">TV Shows</p>

let subTitles = document.querySelectorAll('.sub-title')
subTitles.style.color = 'blue'

Unlike ID selectors, classes can group certain elements. Classes are great for styling! In this example, we change the sub title colors to blue because they have the same class identifier.

Some things to remember....
Classes and IDs can be used in JS and CSS. Unless you use a specific selector like getElementById, you have to use a dot to identify class and a # to identify an id.

//JS
//Selecting a class
('#id')

//Selecting an id
('.class')

Style Attribute

This one's self explanatory. It allows you to add styling on an element. It sounds simple enough but this attribute can be quite powerful. Here are some examples of the style attribute both in JS and HTML

HTML
 <p style="color:red">This is a paragraph.</p>

<p style="font-size:160%;">This is a paragraph.</p>

//JS
p.style.fontSize = "160%"

p.style.color = "red"

Src Attribute

When you want to display an image on the DOM, you will probably be using the img tag. Images need a source(ie: url, jpg file, png file) to be displayed on a page. This is where we use the source attribute or also known as src.

<img src="img_dessert.png">

dessertImage = document.createElement('img')
img.src = "img_dessert.png"

Display Attribute

Note! Display is an attribute of Style!
Display is a little different than the attributes listed above. However, I am giving an honorable mention because it was incredibly useful when hiding and displaying blocks on the DOM. Display, as mentioned is an attribute of Style. It allows you to hide certain elements on the page and also reveals them depending on your code. It is usually tied to a click listener to use the functionality of display. For example, if you need to implement an edit form, you may want to hide the edit form until the user hits the edit button. This is where the display attribute comes into play.

//CSS
#edit-form{
  display: none //hide edit-form by default
}

In this block of code, edit-form is hidden by default by using the display property and setting it to none.

let editButton = document.getElementById('editButton')
editButton.onclick = () => {
  let editForm = document.getElementById('edit-form')

  editForm.style.display = "block"
}

As mentioned before, if a user hits the edit button, you would want the edit form to be displayed. In this case, we set up an event listener on the edit button, so when that button is clicked, the form is displayed. This is done by the last line in this code block. To display the form, you would use the style and display attribute and set it to "block" to display this form.

ELEMENTS

Elements consists of start and end tags. In DOM manipulation, use them to create stuff on the page and add to the current HTML page.

The div Element

In an easy explanation, the div element is a container. It groups content and puts them in div containers. In DOM manipulation, it common to create other elements and append them to the div.

let div = document.getElementById('text-container-div')

let p = document.createElement('p')
p.innerText = "Hello World!"

div.appendChild(p)

Assuming that the ID of "text-container-div" is a div element, we are grouping the "p" element with that div. The "text-container-div" now contains the text "Hello World".

The p Element

The "p" element is pretty straight forward. It defined as a paragraph element. Naturally, a paragraph will contain text and so will a "p" element.

//HTML
<p id="p-example">Hello World</p>

//JS
let p = document.getElementById('p-example')

The Heading Element

Heading elements are usually defined by an "h" followed by the header number like this:

HTML
<h1>heading 1</h1>
<h2>heading 2</h2>
<h3>heading 3</h3>
<h4>heading 4</h4>
<h5>heading 5</h5>
<h6>heading 6</h6>

In JS, you can create a new heading element like this:

//JS

document.createElement('h1')

The Button Element

A button element is clickable and can contain text to determine what this button does. In JS and DOM manipulation, buttons will usually have an event listener attached to them, to add functionality.

HTML
<button id="click-me-button">Click me!</button>

//JS
let button = document.getElementById('click-me-button')
button.onclick = () => {
    doSomething();
}

Ul, Ol and Li Elements

In a simple explanation, these elements create lists. Li stands for list. Ul stands for Unordered List and Ol stands for Ordered List. Li is usually nested under either Ul or Ol.

Here is an example in HTML form:

<ul id="unordered-list"> 
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

In JS, I often grabbed the "ul" element and appended the "li" element.

let ul = document.getElementById('unordered-list')

let listItem = document.createElement('li')
listItem.innerText = "Amazing Item";

ul.appendChild(listItem)

There are countless attributes and elements out there. However, these are the elements and attributes I found useful to learn when I started out with JS and DOM manipulation.

Ruby Class Methods Vs Instance Methods

NicoleLC16 — Tue, 07 Jan 2020 01:56:27 +0000

When we first learned about classes and relationships, I struggled to grasp the difference between Class and Instance Methods. It was frustrating not having a clear understanding of these two methods. I constantly called instance methods on a class and wondered why I kept getting errors.

Class Method Vs Instance Method: In a short simple definition, class methods calls on the whole class, while instance methods calls on an instance of a class.

In this example, we are using the class to call on the class_method.

However, we cannot use the class to call on an instance method directly.

To call an instance method:

In the example below, an error is given when you call an instance method on a class. You cannot call an instance method on a class like you can with class methods.

To call this this instance method. We would need to store an object in a variable, then call on the instance method with that variable, like so:

Song class example:

In this example, @@all is indicated as a class method. Macros are set up for name, genre, and artists which are instance methods.

Let’s make some songs!

I stored the new songs in a variable to make it more accessible when we need it. For now, we have a few songs stored in our Song class. What if I wanted to see all my songs? This would be a great way to utilize our class method! Since we need to view all objects stored in class, we would need to call on the whole class to return all songs that were stored in this class. Remember class methods call on the whole class!

So it would look something like this:

Now we have all our instances displayed (or all our songs).

What if I wanted just to get the name of one song from all our songs? We would have to use an instance method! In this case, we would use our name method to get the name of this first instance. But wait! This is an instance method. So we can’t use Song.name! Think about it. The class of Song has more than one song stored in it. How will it know which name I want to return? This is where we use our variables to call on our instance methods.

Now we have just the name of a single instance, using an instance method!

Career Switch: How I Started My Coding Journey

NicoleLC16 — Wed, 18 Dec 2019 00:03:08 +0000

For the past few years, I have been trekking my way through bio and medical classes to become a nurse. The further I got into the program, the more I realized that nursing was not for me. I enjoyed the classes, the labs and learning about the body. The courses were challenging and I loved using critical thinking to solve labs. To fulfill program requirements, I had to volunteer and work in healthcare. Some of my jobs consisted of caring for the elderly and leading activities for residents that were in memory care. I also worked in a behavioral health facility and explored the administrative side of nursing where I got to work closely with RNs. Needless to say, I gained plenty of experience in the healthcare field. I did enjoy several aspects of my jobs in healthcare, but I was not a fan of what I saw in an RN's daily job duties. The job required quite a bit of paper work and was more routine than I expected.

Not knowing what to do next, I turned to my friends for advice. Many of them are developers and engineers. So they suggested that I give coding a shot. Part of me had doubts about being a coder. I did not have much information on what developers did. I also wanted to find a career that I will enjoy. Despite my doubts, my friends insisted that I try free resources online to see if I would enjoy coding. They also shared their day to day duties as developers with me. This allowed me to get an outlook on what the job would look like as a developer.

Ironically, this was around the same time I heard about Flatiron School. I was seriously considering coding bootcamps at this point. However, I wanted more experience and exposure to coding before I made the commitment to go to a coding bootcamp. Conveniently enough, Flatiron had a Prep Bootcamp Course. This gave me the opportunity to actively code and test my ability to learn coding through their curriculum. What surprised me from this experience, was how much I enjoyed it. After getting through more than half of the prep course, I decided to apply to Flatiron School. The application process went well and everything seemed like it was falling into place.

Today, I am writing this blog post in Flatiron School. I survived the first mod. I have four more mods to go. There are many times where I feel frustrated and overwhelmed. However, I enjoy being able to build things and see them reflected on screen. This program requires a lot of time and commitment. However, I highly enjoy what I am learning and I look forward to coming here everyday and learning more.