Forem: wenglin1

Simple Shopping Cart with JS/JSON

wenglin1 — Thu, 12 Mar 2020 21:56:39 +0000

With JavaScript is an object-oriented programming language for front-end developers. With JavaScript you are able to manipulate what the front page of your website displays and the different interactive elements to enhance user-experience. These elements includes, clicking, hovering, submitting, searching, etc.

To start off, I already have a Rails backend setup, with three models: products, cart_items, cart. This is my ruby seed data transformed into JSON:

Now we setup our frontend, first create an index.html file. Depending on what code editor you are using, there will be a pre-established html:5 function which you can type in and it will generate a simple html setup:

After we create our JavaScript file where we will put most of our code in, index.js. Remember to add it to our index.html file with a script tag. Remember to put defer in front, which will tell the index.html file to run our index.js last so that it can read and display what our code is trying to output:

As you can see, I also added a couple "div" tags, which will be where our information displays. "clothes-box" is where we will show all our clothes. "SideNav" is where we will display our shopping cart, with the list of items, and all the way at the bottom of the sideNav we have another "div" where we will display the price and checkout button.

Now that we have our HTML setup, we can start writing our code for JS. From here on out, all the code will be in our index.js file. First we have to fetch our JSON data with:

These line of codes fetches the data from our API and transform the response into readable JSON, and then transforms it into an array of objects that can then be called on by another function to display each data to our liking. Don't worry about RenderAllProducts, it will be a function we will be creating next:

RenderAllProducts we're calling on an array with forEach to display each product with another function RenderOneProduct inside:

In our RenderOneProduct function first find the "clothes-box div" to display all our products and set it to a variable with document.querySelector. Next create a new div element and set it to a variable. Next using the JS method innerhtml, we will write out html code for how our products will be displayed. Our product card will have the image, name, price, and "add to cart" button. Remember to add the id of the button so that we can target it later. Then we add it to our "clothes-box" by using the append method.
Our products will display like this:

Next we have to render all the products we have in our cart by fetching our data again:

This time, we will only want the price and name of the product with a "delete" button.
It will display like so:

Now that everything is rendering like we want we can start making our buttons work with the method "addEventListener". First we start with our "add to cart" button. Inside our renderOneProduct function, we will write our event listener:

Let walkthrough what we did. First find the element for our button, good thing we gave it an ID earlier, so that we can set it to a variable. Next we add a "click" event listener which will give a response every time we click the button. Set a variable for the "list-of-items" to our global scope, so we can call on it later. We then set "list-of-items" to empty string so that our cart-items dont repeat themselves when we add them to the shopping cart. To save it in our backend so that it doesnt dissapear when we refresh the page, we need to create another fetch with the method "POST". "POST" creates a new cart_item, with the attributes of cart.id and product.id, then we send it to JSON and JSOn will respond by appending it to our renderALlCartItems. It will work like this:

Next we create our eventListener for "remove" button in our RenderAllCartItem function. This will delete the product from our cart:

Lets walkthrough the code. First set variable for the "remove" button, next create our event listener "click". The (.remove()) method deletes the selected element, which is our newLi. In order to save it to the backend we need to create another fetch, this time with the method "DELTE", and then with the response we sent to JSON and receive from JSON we push it to renderAllCartItem. It should work like this:

Finally we will write the code for our checkout div. Like what we did for everything else, first set the variable for our "checkout" div. Then we create a new div element:

Our checkout will have subtotal, tax (the subtotal * our set tax rate), total (the subototal + tax), and a checkout button. The different variables are the equations that will add up the price and show up in our checkout. Then we append it to our checkout variable. It should look like this:

Now we create our event listener for the checkout button:

When we set click the checkout button, there will be an alert box, everything will go back to $0 and the cart will return an empty array.

If you want to add some CSS to it to make it look alot more appealing you can visit this blog and learn how to: https://dev.to/iqramqra/5-basic-design-concepts-for-front-end-devs-19am

If you follow everything and add some css to it, it will look like this:

This is how you create a simple shopping cart using JavaScript and Rails API.

If you are still confused you can visit the following site for more information.
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
https://htmlcheatsheet.com/js/

RUBY BASICS

wenglin1 — Thu, 20 Feb 2020 05:01:07 +0000

Hello there, if you are like me, fresh out of college with a useless degree that will get you nowhere and are interested in trying something new, like coding. Then RUBY is the language for you. It is simple, and easy to understand.

Ruby was designed and developed in the mid 1990s by Yukihiro "Matz" Matsumoto. Yukihiro designed Ruby so that it will be easy to read and applicable by humans. Other programming languages focus are designed to make our machines run efficiently and more effective. According to Yukihiro, "They are focusing on machines. But in fact we need to focus on humans, on how humans care about doing programming or operating the application of the machines. We are the masters. They are the slaves."

Let's start off with the basics. Like other programming languages Ruby has 6 data types: Strings, Numbers, Booleans, Symbols, Arrays, and Hashes. In order to find out what data type something is, you add .class to the end of the data.

1)Strings: A string is any combination of letter or number that is wrapped in single or double quotation marks. You can convert into a string using .to_s.

2)Numbers: A number can be an Integer or a Float. Integers are whole numbers, whereas Float contains a decimal. You can convert a string with a number inside into an Integer using .to_i or a Float using .to_f.

3)Booleans: Booleans are used in logic statement to determine whether something is True or False. In Ruby, everything is True, but False and nil. We can use comparison operators such as AND, OR, ==, ||, &&

4)Symbols: In Ruby a symbol is an object that represents names of instance variables, names of method, or names of classes. If there is a hello method, then there is a symbol :hello. You can call on a symbol anywhere in the app or program. You can convert a string into a symbol using .to_sym.

5)Arrays: Array is a list that can consist of all different kinds of data types. It is enclosed in square brackets []. There are different ways you can create an array.

One way is by hard-coding it.

Another way is by using Array()

6)Hashes: A hash is a key, value pair enclosed in curly brackets {}. They works like dictionaries, you can search for values by looking up the key and vice versa. There are also different ways you can create a hash.

One way is by hard-coding it.

Another way is by assigning a variable to Hash.new

These are the Ruby data types to get you started on your Ruby adventure. Happy coding!

Building a Basic MVC App With Rails

wenglin1 — Thu, 20 Feb 2020 04:55:24 +0000

What is rails? Rails is a Ruby framework built by multiple developers that makes building an app as easy as microwaving hot pockets. Ruby developers realized that there are a lot of repetitiveness when it comes to building a web application, so they compiled everything and made it easy to access and call upon with just a few lines of code. Why say lots of words when few do the trick?

EVERYTHING DONE HERE WILL BE ON MAC AND VSCode

First things first, you should have these programs already installed on your computer: SQLite

Next if you have ruby already installed, you can use gem install rails to install rails onto your desktop.

Once you have everything installed and setup we will start building our basic web app.

To create a new rails application, go to your desired directory, and in your terminal type:

rails new "name"

You can replace name with anything you want. Let all the files generate into your new "name" folder. Once it is done, you can change directory into your folder and open it using cd "name".

When you open the folder, to the left you will see all the files and folders that rails generated for you, we will only be needing these: config/routes, db folder, app/controllers, app/views, app/models.

Pick two models and their relationship to work on. I will make this app on albums and songs, with a one to many relationship. An album haves many songs, and each song only belongs to one album.

First we generate our models with the name and attributes following it: (remember to always make our models PLURAL)

rails g model Albums name:string
rails g model Songs name:string duration:integer album_id:integer

Albums has a name attribute, songs has name, duration, and the album_id. The album_id is very important!! This signifies our relationship, so that later when we call on to the album, we can locate all the songs that belongs to the album. This will create new a folder called migrate in your db folder, and two new files in your app/models folder.

Type rails db:migrate to create our schema.

This also creates our table.

DO NOT TOUCH THIS FILE, LEAVE IT AS IS, IF YOU CHANGE SOMETHING IN THIS FILE, IT WILL CAUSE AN ERROR AND BREAK OUR TABLE. If you want to add or delete an attribute, you can delete schema and the development file and remigrate.

Next we have to establish our relationship, we go into our app/models folder, we'll see Album.rb and Song.rb.
In Album type has_many :songs to show an album can have many songs.

In Song.rb type belongs_to :album to show that a song belongs to only one album.

Next we make our controllers, this will also establish our view folders and files. We only need some of the routes for our Album controller, show, and index. In your terminal type:

rails g controller Albums show index --no-test-framework

The show and index keys generates our routes and view files. The "--no-test-framework" stops rails from generating extra test files. For our Song controller we dont need any routes right now.

rails g controller Songs --no-test-framework

This will create new files in app/controller.

Inside the Album file, it will look like this:

Song file, will look like this:

Our app/view folder will have new folders and files.

Next we will head to config/routes file and replace the routes rails generated for us with:

Now we can open our web app by typing in our terminal

rails s

We can access the homepage by going to localhost:3000

Now if you head into localhost:3000/albums you will see this:

This just means we didn't put anything in our views file for album/index. Press control + c in the terminal to close our app.

First lets write out all our controller actions in album.

Index will show all the albums we have, and show will display all the songs each albums have.

Before we edit our views files, we should write out some seed data so that we can display our album and songs when we visit the urls.

Once we have our seed data, type in the terminal:

rails db:seed

Now lets go to the view files, we will start with views/albums/index, we have to iterate over albums so that it will display all of it.

I added some html tags to make it look neater. The link_to will let each name be clickable.

If we run rails s again, localhost:3000/albums will look like this:

Next we edit views/albums/show to display all the songs each album has like so:

The good thing about rails is that we don't have to restart our app everytime we change something. It will automatically update for us everytime we save the file. When we click on one of the album names, it should bring us to the album's page, and the page should look like this:

Congratulations, you successfully built a simple MVC web app with rails. Next blog I will go into more detail on how to create, update, and deleting our data.

Here are some more resources:
https://guides.rubyonrails.org/v5.0/getting_started.html
http://www.restular.com/