DEV Community: Barrett

How to create an Image Carousel in React

Barrett — Mon, 31 Oct 2022 20:59:43 +0000

The Image Carousel

To add a little spice to your web application we can add an image carousel for the user to flip through some of the images fetched from your backend database. In order to get started first we are going to need some data with some image links.

Here we are creating some data for our Properties array and we have image_url as one of our attributes. We need this in order to call on our data and extract image_url from our Properties array.

Mapping over our Data

First we need to go inside of our component in which we are looking to place our image carousel. In our return we must then map over our data, so we will take the state in which we have placed our data and map over that array in order to pull out the image_url attribute.

Here we are mapping over that data and creating an img html element for each property and pulling out the image_url attribute to place into the src. this will append our images to the DOM for our user to display. We are also conditionally rendering some CSS that will display an effect whenever our slide is changing to a different image.

Next we need to install react icons into our application via our terminal. This can be achieved by running this command "npm install react icons". Once we have react icons downloaded we will then import our arrows from the react icons library. It will look like this...

Once we have our arrow icons we can place them inside of our component just above our mapped data. We will then set a new state called current that will take in the index of our mapped data and set the initial state to 0 then we will set a variable called "length" and set that to "properties.length" this will take our array and take the number of how many properties are in our array. This is how we will access the exact property image we are looking for in order for us to flip through our images. We will then create onClick event handler functions for our arrows that will flip through our properties array image_urls.

Here we have set up our react icon arrow elements and have attached onClick event handlers to them. We have written functions for each arrow that will do some coniditional rendering for us. For our nextSlide function we are saying if the state of current is equal to length - 1, then return 0, otherwise add 1 to the state of current. This will trigger anytime the right arrow is clicked. For our prevSlide function we are saying if current is equal to 0, then return then return length - 1, otherwise subtract 1 from current. This will allow us to flip through each image and return us to our first image if we have reached the end of our array.

CSS styling

Finally we have to make our image carousel look good. We can add classNames to each element in order to write some CSS code to style.

Here we have attached classNames to our elements along with some conditional rendering on our outer div where our data is being mapped over. If index equals our state of current then render the "slide-active" for our outer div otherwise render the "slide" className.

Finally we call on those classNames in our CSS file and add this code in order to size our arrows as well as position them onto our page. Then we add the above code to our "slide-active" className as well as our "slide className and what this code does is adds a cool effect of fading in the images upon a click of our arrows.

There you have it, easy as that. Now go build an image carousel for your Projects.

Active Model Serializers

Barrett — Mon, 10 Oct 2022 20:59:01 +0000

Active Model Serializers and their importance in building an API

"Active Model Serializers" is a ruby gem that you can add to your back-end application in order to control what is being displayed in your API database. It is very popular amongst the back-end developer community and is an excellent gem to use because not only does it allow us to show what attributes we would like to be shown but also other models that have a direct relationship with the current model that we are serializing.

Here, we will be going over how to properly install the "Active Model Serializers" gem to our Ruby gem file and also how to properly construct the serializer in a way that will allow us to show exactly what we would like our API to display for certain CRUD actions we are synchronizing up with our front-end application.

Installing our Active Model Serializers Gem

In order to use our serializers, first we must install the gem into our gem file. we can do that by first grabbing our "Active Model Serializers" gem file from "https://rubygems.org/gems/active_model_serializers/versions/0.10.13". We will copy the gem from this website and paste it into our gem file in our application like so

then we will run the "bundle install" command in our terminal. Then we are free to use our serializers as we please

Generating a Serializer for one of our models

Let's say we have our models set up with our relationships. One of our models is named Animal. we can generate a serializer for said model with a simple Rails generator command. The following would be written like so...

Once we have created our serializer, it should appear with the attributes that were generated through our Rails migration process. It should look something like this...

Adding Relationships to show in our serializer

Not only can you show the attributes for that model, but you can also show any existing relationships that our specific model has. If our Animal model has a many to many relationship with the visitors of the park in which our animals live. We can show the animal objects along with any visitors that wish to come see that specific animal or "belongs to" that animal. We can do that by adding "has_many :visitors" under our attributes, just like in the image provided above.

Parsing the seeded data into JSON

Once we have our serializers set up the way we like, we can go check out what data is being displayed based off of what our serializer is serializing our displayed data. The Animal model should now look like this once we fetch our data through "Postman" (An application to help show what our API is displaying for certain CRUD actions)...

As you can see all of the attributes in our Animal Serializer are showing as well as any visitors associated with that specific animal. Now that you know how to create a serializer for your Rails application go and try it out for yourself!

Frank's Sinatra

Barrett — Fri, 16 Sep 2022 14:48:26 +0000

During my time in Phase 3 at Flatiron School I began learning how to build out my own API to use on my front end application. In order to get our front end synced up with our back end when fetching this data that you've created using the Ruby framework. There is a handy dandy Ruby gem(Sinatra Gem) you can implement into your ruby gem file in order to be able to access your data.

So Sinatra allows us to connect our full CRUD actions both on the front end and the back end based on how exactly we want to manipulate our data.

What are CRUD actions? CRUD actions are operations that do the following things.

C - Create

Create allows you to Insert a new object into your array of data on the back end.

R - Read

Read allows you to pull your data from the back end so you can slap your data onto your application so that your user is able to see that data.

U - Update

Update allows you to pull a specific key from an object in an array and update that specific key. You can also update multiple keys as well.

D - Delete

Delete allows you to erase an object within your array inside of your back end API.

All of these CRUD actions persist on your backend database.

GET request

So let's say we have a database with an array of video games. This is how we would be GET that information to our front end and order it by title of video game alphabetically using Sinatra.

So here we are using a get method on line one and getting all of our video games. Then we are parsing our video games to JSON on our third line which allows us to fetch it on our front end of our application.

POST request

Now let's say we want to add a new video game. This is how we would write that CRUD action.

For this one we had to right post set the link to "/video_games", add a do block and create a new video game taking each specific key using "params" to allow us to access each key in order to create a new object for the video games array in our back end API.

DELETE request

Now the last one we are going to go over is the delete method and in order to delete a video game from our video games array here is how the code would look.

So we take our video games by a specific ID in the first line of code. Then find the video game by its ID. Then we destroy that specific video game after finding that specific video game by it's ID.

Conclusion

This will help allow you to fetch your data as well as manipulate it on your front end after getting it synced up on your back end using the Sinatra Gem. Now go try it out for yourself!

Reacting to Built-in Iterator Methods

Barrett — Thu, 25 Aug 2022 21:32:00 +0000

When working with arrays in Javascript and React, there are times when you need to iterate through them. You can write a loop to do that and that’s perfectly fine. However, there are iterator methods already built into the array object that can accomplish the same result. Using these built-in iterators make your code more readable and cleaner. We will be going over some of the most used ones and give a sample code for each.

The array iterators forEach, map, filter, some, find and findIndex all take a callback function as their parameter and the callback function takes three parameters. The first parameter is the item value, the second is the index of the item, and the third is the array itself.

In my time in the second phase of Flatiron School I have found these methods to be very useful when working with backend API databases. In order to render this information onto our page and manipulate it on the DOM we need to use these different methods quite a bit. We will be going over some of the iterator methods that will enhance your ability to manipulate data in React. With that being said, let's dive into some code.

We’re going to be using an array of names called “names” for some of the sample code for brevity.

let names = ["Barrett",
"Jacob",
"Matthew",
"Gilbert",
"Simon",
"Nick",
"Erick",
"John"
];

The .forEach() method

This iterator executes a callback function for each item in the array. It doesn’t return any value. Use it when you want to perform a task without expecting any return value. For instance, if you have an array of names and want to print a greeting message for each name, you can use the forEach method. The code would look like this.

names.forEach((value) => {
    console.log("Hello " + value);
});
-------OUTPUT-------
Hello Barrett
Hello Jacob
Hello Matthew
Hello Gilbert
Hello Simon
Hello Nick
Hello Erick
Hello John

The .map() method

This array iterator returns a new array as a result of executing a callback function for each array element. This method skips elements with no value and does not modify the original array.

This method is especially useful in React when we want to iterate over an array and pass down each individual value to a component that will make a new item to contain all of our information that we wish to render onto our application. Below is an example of how this would be utilized within our React application.

//mapping names
let mappedArray = names.map((value) => ({
      <NamesCard value={value}/> 
})

For each value within our names array, we have created a new component in which we have passed down each value as props(which is a way to pass down data from different components) into that new component where we can make a new item for each value we have inside of our name array and render that information onto our application.

The .filter() method

This array iterator also returns a new array of elements that passes the conditional check. For instance, if we want to find all the names that contain “ae”, we can use the filter method. The new array should have two elements, Barrett and Matthew. The code would look like this.

//filtering names
let aeMatchingElements = names.filter((value) => {
    return value.includes("ae");
});
//printing names
aeMatchingElements.forEach((value) => {
    console.log(value);
});
-------OUTPUT-------
Barrett
Matthew

The .some() method

This array iterator checks if some of the elements of an array meet a condition. It returns false if none of the elements pass the test and true if at least one passes the test. Now the scenario is we want to check if some of the people living in that community are adults. We can use the “some” method. Your code would look something like this.

let ages = [16, 17, 20, 24, 29];
let someAdults = ages.some((value) => {
    return value >= 18;
});
console.log(someAdults);
-------OUTPUT-------
true

The .find() method

This array iterator returns the first element that meets the condition. Otherwise, undefined is returned. For instance, using the “ages” array we’ve used for the “some” method, we can find the first non-adult by using the find method. The code would look like this.

let ages = [16, 17, 20, 24, 29];
let nonAdult = ages.find((value) => {
    return value < 18;
});
console.log(nonAdult);
-------OUTPUT-------
16
17

The .findIndex() method

This array iterator returns the index of the first element that meets the condition. Otherwise, -1 is returned to indicate no element is found. For instance, using the “ages” array, we can find the position of the first occurrence of the value 17. The code would look like this.

let ages = [16, 17, 20, 24, 29];
let firstOccurrence = ages.findIndex((value) => {
    return value == 17;
});
console.log(firstOccurrence);
-------OUTPUT-------
1

indexOf functions take two parameters. The first parameter is the value for which index we’re looking for and the second is the search starting position. The second parameter can be omitted if you want to start from the first position of the array.

The .indexOf() method

This array iterator does the same thing as the findIndex method. The only difference is that it doesn’t take a callback function as a parameter. It takes two parameters. For instance, using the “ages” array, if you want to start looking for the value 17 starting from the third position, you would use the indexOf. The code would look like this.

let ages = [16, 17, 20, 24, 29];
occurrence = ages.indexOf(17, 3);
console.log(occurrence);
-------OUTPUT-------
-1

The value -1 is returned because we specified the search starting position. Staring from the third position it reads from left to right which from the third position we can see there is no value of 89 read. Therefor the output is going to be -1. If we started from position zero, then the value 1 would have been returned.

The .reduce() method

This array iterator is used to reduce all the elements of the array to a single value by executing the callback function. The callback function takes four parameters. The first is the total, which means the value returned by the callback after each execution. The second is the element value, the third is the index of the element and the fourth is the array itself.

For instance, using the “ages” array, if you want to sum up all the elements, you can use the reduce method. The code would look like this.

let ages = [16, 17, 20, 24, 29];
let sum = ages.reduce((sum, value) => {
    return sum += value;
});
console.log(sum);
-------OUTPUT-------
106

Conclusion

These are just a few of the many iterator methods that will help you become a better developer while also writing much cleaner and readable code. These built in methods are especially useful in React where you will be creating a new array without destructively modifying the original array for each event listener you add to your application for the user to interact with. Now go try them out yourself and become a better coder!

Event Listeners, The Submit Event, Grabbing and Creating Elements to Manipulate the DOM

Barrett — Thu, 04 Aug 2022 21:43:00 +0000

Listening to the Events and the DOM

In the first 2 months of my transition from the service industry into the world of tech at Flatiron School, I have become fascinated with Manipulating the DOM(Document Object Model) in ways that append and change information from databases and javascript code onto the DOM. The Document Object Model (DOM) is a programming interface for web documents. It represents the page so that programs can change the document structure, style, and content. The DOM represents the document as nodes and objects; that way, programming languages can interact with the page. A web page is a document that can be either displayed in the browser window or as the HTML source. In both cases, it is the same document but the DOM representation allows it to be manipulated. As an object-oriented representation of the web page, it can be modified with a scripting language such as JavaScript. The most captivating way of manipulating the DOM is "Event Listeners".

What is an Event Listener?

Event Listeners are the procedures of function in a computer program that waits for an event to occur. Examples of an event are the user clicking or moving of the mouse, pressing a key on the keyboard, submitting something, or an internal timer or interrupt. In other words when the user interacts with the DOM, events occur the way programmers want them to when a user interacts with a certain part of the website or application.

The Submit Event

The submit event is one of the most fascinating events to learn when first starting off in your javascript software engineer path. Let's take a look at an example of a submit event and how it works exactly...

First, we will look at the element where we will be placing our event listener in our HTML file which is what will be displayed on our web browser for the user to interact with.

<!--HTML FILE-->
<form id="submitdiv">
  <label for="names">Names: <input type="text" name="name" id="newNames"></label>
  <br><br>
  <button type="submit">Submit form</button>
</form>
<ul id="log">
<!--Here our list of names will be placed-->
</ul>

Next we will go into our javascript file and grab the form element from our HTML file. Then we will add our event listener to the element we just grabbed.

// JAVASCRIPT FILE
// grabbing the element we are looking for
const form = document.querySelector('#submitdiv')
// adding the click event to the variable of the element we just grabbed
form.addEventListener('submit', (e) => {})

We created a variable(const), added a name(form) and assigned the element we are grabbing to the variable(we use const to say that this variable will be constant throughout our entire javascript document). We use a hashtag when grabbing an element with an ID name using a ".querySelector" or otherwise we can use ".getElementById".
We attach our newly named variable to our ".addEventListener" then assign the first parameter as the event we are trying to execute. In this case our event is 'submit'.
In our second parameter we set an open block of code in which whatever we write inside will execute a submit event upon a click of our button that we have created inside our HTML document on our web browser.

Creating elements to appear once our submit event has been activated and appending them to the DOM

Now let's say we want our our submit event to return something completely new to appear on our web page once our button has been clicked, In this case a name of some sort. How would we go about doing this? Let's take a look...

// JAVASCRIPT FILE
// grabbing the element we are looking for
const form = document.querySelector('#submitdiv')
// grabbing our ul element from our HTML file
const ul = document.getElementById('log')
// grabbing our input element from our HTML file
const input = document.getElementById('newNames')
// adding the click event to the variable of the element we just grabbed
form.addEventListener('submit', (e) => {
     // here we are preventing the page from refreshing upon a 
     //submission
     e.preventDefault()
     // creating an element to place inside our ul element
     const li = document.createElement('li')
     // setting our new element text content to the value of what 
     //we input
     li.textContent = input.value
     // appending our new list of names to our unordered list 
     //element
     ul.append(li)
     // making the input slot reset upon a submit event activation
     form.reset()
})

So first thing we always want to put inside of our submit form code block is "e.preventDefault()" and what that does is stops the page from reloading upon our submit event being triggered.
Next, we grab our "ul" element from our HTML file using "document.getElementByID" by our id name "log" and setting it to a variable. Notice that we did not have to use a hashtag for this because we did not use a ".querySelector". Second, we grabbed our input element by it's id name using the same method(no hashtag needed) and setting it to a variable as well. Then we created a new list element inside of our submit event listener by setting "document.createElement" to "(li)" and giving it a variable name. After that we set the new element "li" text content to the input value which is whatever we are typing into our "Enter Name" slot just above our submit button. Last, we need to append the "li" element and its new text content that is submitted in our "Enter Name" input slot into our already existing "ul" element in our HTML file. We do so by putting our "ul" variable along with ".append" just before our new "li" variable in parentheses. Last we add ".reset()" to our "form" variable to reset the input slot back to default upon our submit event being triggered.

Now when we type a name into our input slot and click our submit button that name should pop up just below in an unordered list fashion inside of our "ul" element on the browser while our input slot is resetting to the default and ready for another name submission. Congratulations! You have learned one of the most prominent and widely used event listeners in all of javascript. Whew! take a deep breath, because we are finally finished.

Conclusion

This was the most fascinating part of my learning experience in Phase 1 of my 5 phase course at Flatiron School. I look forward to learning many more tools that will mold me into a top tier software developer and will help me to innovate and shape the tech industry as a whole.