DEV Community: Elisa Opalka

React Redux: Memory Game

Elisa Opalka — Tue, 13 Apr 2021 22:08:29 +0000

I knew for my final project at Flatiron I wanted to make a game. I have always loved playing memory games and thought it would be an exciting challenge. This was my chance to have fun with React and see how much of it I could explore.

First thing I needed to do was make sure I met requirements. I needed the a Rails API to handle the data persistence to a database. I used fetch in my front-end to GET and POST data to the API. By now I was pretty familiar with making a Rails API but looking back I would have set up the game first then decided what should persist. It got tricky at some points trying to make things work when they would not save. Below is my schema which has my user and game's tables. I structured the project so a game belongs to a user and a user has many games. This way I could set it up in the front-end to have a user sign in and the game they play would save with the user nested.

I used Redux middleware (Thunk) to respond and modify state change. Thunk is a middleware that lets you call action creators that return a function instead of an action object. That function receives the store's dispatch method, which is then used to dispatch regular synchronous actions inside the function's body once the asynchronous operations have been completed.

Another requirement was to have at least three routes. I was able to implement five routes in my project. In order to get my routes working I needed to import react-router. I used proper RESTful routing which means the names of my routes matched up properly with their functions.

Something that initially tripped me up was including five stateless components. This meant that the information rendered from these components needed to not include "state". A basic example would be a welcome page or a navigation bar. After I worked through my game I actually came up with six.

As for styling I used mostly my own CSS and it was nice to explore all of the things you are able to do with it. There are so many components so it was easy to give the div a className and then style how I wanted that component to work. I would like to go back and implement some bootstrap so I can make it more visually appealing but I learned so much by making it this way and I am happy to have challenged myself.

JavaScript SPA Project: Dessert Reviews

Elisa Opalka — Mon, 15 Mar 2021 04:08:58 +0000

For my first JavaScript project, I made a SPA (single page application) consisting of HTML and JavaScript for the front end and a back-end API made with Ruby and Rails. One of the requirements was to use Object Oriented JavaScript (classes) to encapsulate related data and behavior. JavaScript is not a class-based object-oriented language but there are ways of using object oriented programming in it. I learned much about object oriented JavaScript when refactoring my code to include it and I would like to share that now.

The application only had two tables, Author and Review. The Author model only had one attribute, so I decided to only make a Review class in JavaScript. First I made a new file to keep things organized, "models/review.js". After that I needed to make a constructor method inside the class. This is a special method used to initialize objects. It is called on when an object of a class is created. In the class I can create objects that have data and function, after I define them within the class.

Next I needed to add functionality to my elements so I could render them. So I defined each element and assigned some attributes for styling. Next I put what I wanted into a "cardDiv" so they would all show in the "card" I got from bootstrap.

I made some functions to save all my elements into an array so I could call on them easier. I needed to make a create function with an argument that would refer to all of the elements when they were initialized. That is why you see "(attr)" as an argument.

For the rest of the class functions, it was mostly a matter of concern when deciding what to put where. I was taught that you make your best judgement call and that would be good enough. So the rest of my class has a form and completed reviews template, the ability to render the forms and reviews, a submit function, and delete function.

Lastly I decided to make a function to support a search bar. I found it very hard to find code that functioned similar to mine so I could get a good example of how I needed to do this. I finally found it and after setting it up.....it did not work. So I spent some time trying to implement conditional statements to get it to full functionality. It turns out, there are many different event listeners that sound similar but execute differently. In the end I needed to use the "keyup" event listener instead of "keydown". When using "keydown", it would not register the last deleted letter so it would continue to display anything with that letter in the title.

Rails Project: Spells Library Application

Elisa Opalka — Sun, 07 Feb 2021 22:34:15 +0000

I am finally done with my first rails project! I decided to start on it early so I could apply what I was learning in class to my code in real time. I learned some things about myself as a programer during this project. I have always thought of myself as an artsy person and expected to spend extra hours perfecting the design or adding a cool carousel, which I did, but I was more excited when I could apply a new function and see it work. Who knows where my career will take me but at this point in time I feel a strong connection when working on the backend. Alright let's show you how I made this app.

I should explain the purpose first. This is an application that a user can log into and store books and spells within those books. When planning I needed to figure out the overall function and decided that a user would have_many books and a book would have_many spells. These are Active Record relationships. On the other side of that, a spell would belong_to a book and a book would belong_to a user. Wait... there's more, a user has_many spells through books and spells has_many users through books, which would make books my joins table. I definitely needed to review this part a bunch before I settled on those relationships but it was what made the most sense to me and my apps functions. By using Active Record associations, we can tell Rails that there is a connection between these two models. Every time we tell Rails that one model belongs_to another, we having it set up and maintain a Primary Key and Foreign Key. So in my situation, every time a spell in made within a book, they are assigned a set of keys letting the program know they have a relationship.

Before I was able to code all of this in I needed to create the shell of my project. I made a directory to store my project and then ran "rails new witches-spells" in the terminal to get the initial set up. Once this was loaded up I quickly connected to github so I could push all of my setup changes to it. There were 91 changes for my initial set up. I worked really hard to make meaningful consistent pushes when changes were made. Pushing these first 91 as the initial set up was helpful because if I got lost later in my code I could go to github and check what was made for me and what changes I did after. Next task was to run "rails g resource User name:string". This set up my first migration file for the user table along with its first column, name. It also set up, a user model file that inherits from Application Record, a user controller that inherits from Application Controller, a user view directory, a user view helper file, and a full resources call for users in the routes.rb file. It actually created more files but I did not use them for this project. I did go into my migration file and add more columns like an email and password. I did this same process for my other tables, books and spells. When I was done with all my tables, I added my Active Record relationships to the models, then I ran "rails db:migrate" which migrated the database and gave me my schema. Without this I could not make new objects to save.

Now that the structure was set up I needed to give my controllers some function. I started by adding methods for index, show, new, create, edit, update, and destroy. These are the most basic methods I needed to have a well functioning application. Eventually I did decide to leave some out. For example, my user controller does not have a index or destroy method because I did not was a page listing all of the users or an option for people to destroy their account. Looking back I might of left them in and modified my routes to not display them but I had other things to work on. Which brings me to my nested params/forms/routes.

Within my application there is the ability to make spells when you are creating a new book. You can only make the book or you can make the book and give it up to three spells to start off with. Same goes for making spells. You may chose a book to which the spell belongs or you can create the new book along with it. The user sees and interacts with this through my nested forms that are created in the views. In order to get those working, I needed to nest the params within each other. I also needed to put a accepts_nested_attributes_for in my book model so everything would run smoothly. The spell views have a partial so that I can add in the book form easily and keep the code clean. In my book views, I only call on the form once so it is written out on the new page.

This project was my first time working with partials. It allows you to create a form that you can call on in different files within that folder. I even made a partial for error messages which was super helpful because I am using that in almost every file.

Last thing I needed to accomplish was setting a scope method that took me to a specific route showing the results. At first I made an alphabeticalize method to put my books in alphabetical order. However it did not take me to a new route and I thought that I should do something more challenging. I chose to display the 4 most recently made books. So I made a button on the books index page that takes you to a "most_recent" route and displays the books.

I hope you have enjoyed reading about my project. I know its not perfect and if I tired I could probably break more components. I could figure out ways to fix them but I will save that for another day and celebrate what I have made for now!

Sinatra Project: Book Club Application

Elisa Opalka — Sun, 10 Jan 2021 22:18:47 +0000

I built a CRUD app using Sinatra and MVC. My Book Club app is made for users to post a review on their latest read book. CRUD stands for create, read, update, delete. These are the functions my user has after making their account. I will explain how the code works and how everything connects.

Above is my file structure. I used the gem Corneal to generate a Sinatra template. After getting the files set up, I thought about what my MVC would need. MVC stand for Models, Views, and Controllers. The Models job is to represent data from the database. The Views job is to work through HTML to set up what the user sees and interacts with. The Controller's job is to accept requests, relay the data, communicate with models, alter/delete data and send documents to clients.

What type of data do I need in my models? I knew I would need a User and a Post model. I then added the appropriate Active Record associations. A Post belongs_to at User and a User has_many Posts. A belongs_to association sets up a connection with another model, such that each instance of the declaring model "belongs to" one instance of the other model. For example, my application includes users and posts, and each post can be assigned to exactly one user. Below is the code showing this:

Next, a has_many association indicates a one-to-many connection with another model. It is most common to have this association on the other side of a belongs_to association like I do here. This association indicates that each instance of the model has zero or more instances of another model. In my application containing users and posts, the user model looks like this:

You can see in both Models I used Active Record to validate certain data so that bad data would not be saved into the database. You can see that I checked for the presence in most attributes and uniqueness in the email, people might have the same name but different accounts should have different emails. Something else we get from Active Record is has_secure_password. It sets and authenticates against a BCrypt password. This method requires me to have a password_digest attribute in my users table, as seen below:

Now that you have seen my models, let's go back a could of steps. Before I had even set up my models I needed a database, you can see it in my file structure as the db folder. In db/migrate I created a users table and a posts table and added the data that my application needed to run. Using the Rake gem, I ran rake db:migrate to create a schema file which is a graphical depiction of my database. I also made a seeds file in my db/migrate so that I could test my program early on with the data I put in there against any issues. Below is my posts table. I had a little bit of trouble with the singular and plural rules for tables and models. Ultimately I saw that this language was made to mimic how you would say it in English. Not with every aspect of Ruby but for this part tables are plural, as well as the class. Normally a class is singular but if you are CreatingPosts it would not make sense to be CreatingPost. It was something I had to talk out with my fellow classmates to be sure.

So now that my databases have been migrated and my model relationships set up. It's time to give my app some Controllers. This is where I can put my data to work and see if I can get my website working. The controllers can get kind of long since they are responsible for all of the routing. I realized they did not flow as well as my last project where one menu let to another but I kept them as organized as possible. Below is my Application Controller:

This code does exactly what the title says, you see the first HTTP get request is just a "/" so this is the first step, I have a conditional statement that gives the application options to send the user to either the current user's index page if they are logged in or the welcome page if they are not. I then have my helpers which I will be using all throughout my controllers to give structure to my requests. It makes sense to define these methods here then call on them as needed. Next is my Posts Controller which contains my implementation of CRUD:

If you remember, CRUD stands for Create, Read, Update, Delete. The post request would be the create. The patch request is the update. The delete request towards the end is for deleting. The get request in the middle that sends you to erb:'posts/show' is for reading. Within this code I have the power of CRUD. Without CRUD we would have no way to hold on to our data. The third and last controller is the Users Controller:

This is where my user can log in/out and sign up. I have perams set up to specify what I need for someone to log back in or to sign up. Without those perams, my unique emails and passwords would be useless. Throughout all of my controllers, you have seen erb. This leads the program to my HTML code which is what the browser understands. I used the action and method attributes in HTML to connects to the /signup and post routes in the controllers. In views folder I have my layout, welcome page, and every other page the user has access to:

As you can see I have pages that refer to posts or users, then I have my welcome and layout pages outside of those folders. This is very helpful when setting up routes and redirects in the controllers. It is good to have an organized path to send your program to the correct pages. Most of these erb files are filled with colorful buttons or organized input lines. I also have if statements that allow me to only show login/sign up on the navigation bar when there is no user signed in. Additionally if someone is signed in they navigation bar will show all posts/my posts/create post/logout.

I enjoyed learning all these new skills. Its especially rewarding when you can make a change and see it right away on the browser. I would like to expand on the functionality of this application by adding a feature to rate the books on a 1-10 scale and then look up highly rated books. Also would like to have a place to search for books that others have reviewed and add to a "read later" list in the users profile.

CLI Project: Harry Potter API

Elisa Opalka — Tue, 22 Dec 2020 04:56:45 +0000

Welcome to my first completed project for Flatiron school. This was all done from scratch which was overwhelming at first but ended up being a great learning tool to pull together everything I have been taught so far. I am also so happy with the functionality of my program and hope to expand on it when I have more time and knowledge.

The aim of the project was to build a program that provides a CLI, command line interface, for a user to interact with, connected to an external data source. In the image above, you will see that I used an API to gather my data. To be able to access the data in an efficient way, I used JSON to parse it into readable data.

I chose to make a program that takes a user through the motions of going to Hogwarts and being sorted into their house. The user is then able to meet their house mates by selecting one and hearing some of their attributes. In order to set this up I needed to create a Character class. Its function is to store all of my characters and their attributes in an array until the program would call on them.

In the code above I am using the attr_accessor method which stands for attribute accessor. It is actually two methods in one, a reader method and a writer method. To break it down, the reader method returns information stored in an instance variable. Now in order to to make the attribute writable, it needs to be defined in our writer method. However we want our code to be DRY, which stands for don't repeat yourself. If we needed to write out two methods for each of our 4 attributes, it would take up unnecessary space. If we can achieve the same result with less code then that is what we will do.

Another important part of this class is my initialize method. It allows me to set the initial values for an object. Whenever the new method is called, new objects are created. Initialize must be defined in order to use the new method. Now what will we do with all of these created values? We need somewhere to store them, which is why you see self pushed into @@all. I have made a class variable (@@all) and pushed every instance of self into it. Above the initialize method you can see @@all set to an empty array. This is where I can store my values until needed. Its not enough to store the values, I also need to retrieve them later in my code. My class method, self.all, is how I will call on this array when needed.

This is the rest of my Character class. It consists of three class methods that will be called on inside of my Cli class. The first method allows me to find a character by name instead of only choosing their number out of a list. The next two methods work together to assign a random Hogwarts house that the sorting hat will give you in the beginning of the program. I did find out that I am actually looking through a giant list of characters, since that is how the API has them listed, and then naming the house associated with that character. So instead of choosing a random house directly, I am using .sample to retrieve a random character then saying which house they are in. This same house is used throughout the course of the program until it is exited.

Now that I have all my data loaded and my attributes accessible, it is time to give some functionality to it all. This brings me to my Cli class.

All of my methods defined in the Cli class are instance methods. The first is my start method which is call on in my run file. There I have "Cli.new.start" which essentially starts a new instance of the program once I tell the file to run in the terminal. My start method consists of a couple of strings welcoming you to Hogwarts, and also uses "Api.get_programs" to load all of my API data. My sorting_hat_menu method sets the instance variable @chosen_house to a random Hogwarts house and later interpolates it in the string for the user to read. I used sleep a couple of times to add some dramatic flare for the user, it will make them wait shortly to read the next line. I tired to have all my code listed in order, so each method generally runs down to the next method. This is so the developer does not have to search far for methods if something needs to be changed or looked at. In my main_menu method, I made sure to ask the user for the kind of input I was looking for by including "Type Yes or No" at the end.

The character_menu gets the users input and makes a decision based off of that input. I am using a conditional statement (if, elsif, else) to decide the flow of the program. So if the user inputs Yes or yes, they will get a list of characters displayed. If the user inputs No or no, they will exit the program. Any other input from the user will get an invalid choice message and they will be prompted to choose again. In my list_characters method, I am taking each character name from the chosen house and adding a number next to it. I am also telling the program to start at 1 since it will naturally start at 0 if not specified. My character_details_menu_options ask the user to now input a name or number associated with the character they would like to meet.

My character_details_menu method has another conditional statement. The first thing it does is see if the user input was a name from the list. If it is, it will print the character details. If the input is a number between 1 and however long this particular list is, it will chose the associated character and list their details. If it is anything other than a valid name or number, it will output the invalid choice message and bring them back to the previous method. The print_character_details method is filled with many strings. The method takes the character as an argument and then interpolates that character's attributes throughout. I ran into a problem where some characters did not have all of their attributes in the API. Some were empty so I used if and else to give an alternate string if the attribute was empty. All of the characters had a name and a house so I did not need alternate strings for those two.

This is the end of my Cli class. You can see my meet_more_menu method which allows the program to loop back around if the user would like to, or they may quit. The last three methods are at the bottom of my class because they are small and used to frequently throughout that it would be hard to find another good place to put them. These codes are responsible for accepting user input, letting the user know their choice was invalid, and exiting the program.

This project has been tough and fun at the same time. I remember getting my first method to work and how excited I was, even though the program would abruptly end right after. I am proud of myself for putting in all the work it took to get it to the place it is now. I especially enjoyed being able to work with a Harry Potter API that allowed me to add my own wizard charm to the program. I hope you enjoyed my walk through of the code.

First CLI project -Harry Potter Sorting Hat

Elisa Opalka — Mon, 07 Dec 2020 04:28:58 +0000

This is my first project at Flatiron school. It is a CLI program that gets data from an API and works through different menus(methods) to output specific details.

I decided to use a Harry Potter API and after looking at the information it provided, I thought the best route would be to divide the data up by Hogwarts houses. Of course in Harry Potter, when a new student comes to Hogwarts, one of the first things they do is sit with the sorting hat on their head and get placed into a house. I thought it would be really cool to have a program that acts as the sorting hat.

The first thing I did was set up my file structure and auto installed all the folders. The set up was kind of confusing and overwhelming so I reached out to my class mates and they helped me clean up the files to just what I needed for this program. In my bin directory I needed a run file. This tells the project where to start and also uses the shebang line to let it know the code is in ruby. In the lib directory I needed an environment file, a models folder, and a services folder.

My environment file is set up so that all the other files can talk to each other. So when I call upon my my Characters class inside of my Cli class, it will know where to look. The environment folder also holds my gems needed to complete this project.

My models folder held my Characters class which initialized the information I would be using in the program. I also have a method in here that choses a house at random. When running the program I realized that my API had some hidden information. Some characters were stored that did not belong to houses. This included Argus Filch, the caretaker of the school and his cat, Mrs. Norris. So when a blank house was chosen it would show up empty. I was able to add an if statement that said if the house was empty, run the randomizer again. This took care of that problem.

My services folder held my Api class and my Cli class. The Api class was in charge of getting the data from the website and parsing it. I used JSON to do that. Whenever I needed this data I could call on the Api class and apply it to certain parts of my code. So it was basically the gateway from my program to the data online.

The Cli class was in charge of the structure and function of the program. In here I made lots of menus that would access further menus until the application was exited. After being welcomed to Hogwarts, you would be assigned a house. Once a house was chosen, you were asked if you would like to meet your house mates. Upon choosing yes, the characters in that house were listed with numbers so you could chose by number. After choosing one, a string was outputted with the characteristics for that character. I displayed their name, house, ancestry, and patronus. After running the program multiple times I saw that some characters do not have all of these characteristics. I made an alternate output statement so if the information was blank, it would not be an empty spot in my sentence. I also had a method to take care of any invalid choices, get input, and exit. I referenced these multiple times around my code so it was easy for the user to flow through the program.

I learned so much through out this project. Things that I was only beginning to grasp now feel natural to do. I am very proud of my work and the outcome. Its awesome that I was able to do this project on such a fun API and I hope my professors enjoy it too.

Why did I decide to learn software engineering?

Elisa Opalka — Mon, 09 Nov 2020 23:48:29 +0000

Lets start by saying I was never good in school. I was easily distracted and got average grades even when I tried my best. I started college right out of high school, it did not go so well and I decided it was not for me. I worked as a waitress for years and always knew that it wouldn't last forever. It can be emotionally draining to wait on people every day. After years of feeling beat down and poor, I decided I was only going to succeed with some schooling to back me up. I reluctantly went back to college for a 2 year degree in restaurant management. Surprisingly to me, I did amazing in my classes. I got good grades and really felt smart for the first time. I always thought I was kind of dumb before that. Right out of school I got a management job working in a popular chain restaurant. I tired to be the manager I wish I had all of those years. For a while it was great and I felt accomplished. I had a store that ran great and made me lots of money. About a year ago I moved to be closer to family and my 95 year old grandmother. She has just recently started showing signs of Alzheimer's and I decided to live with her so I could keep an eye on how she was progressing through the disease. I also could not give up this opportunity to make so many new memories while she is still around. I transferred to a new store thinking it would be great as well and it was not. I found myself throwing all of my emotions and energy into a failing store. There was so much to do that I hardly ate during the day, even though I was literally surrounded by food. I was no longer the manager I wanted to be and could not support the store while always running on empty. Then covid hit the United States. So many changes were made and we did our best to adapt and stay safe but four months later, we had employees testing positive for the virus. The company reported this to the county who in turn told them to "deep clean". I could not believe it. I knew I could move out and continue working there or I could leave a job I was already mentally done with. I knew that even a new restaurant would eventually not suit me anymore. I knew it was time for a CHANGE! My mom had always preached about the technology field and coding. I knew if I was ever going to try something this new and this bold it was now. I am channeling that same energy that got me through my 2 year degree and I am ready to apply everything towards this new career. Although it all sounds like gibberish I am taking my notes and pushing through the best I can. Here goes nothing.....