- Read Tutorial
- Watch Guide Video
We almost have all of our items knocked off the list, you are doing a fantastic job! The last item for our about page is to add our list of skills. If you come to the page. Where I want to add these is right below the picture. I want to have a list of skills and if you remember we added the skill model a while ago. Let's open up the schema and look for skills. You can see right here, we have skills that have a title and then a percent_utilized. We have the concept of a badge but we're not going to worry about that right now. Right now what I want to use is a set of progress bars provided by bootstrap that are going to allow us to list out the title and then have a progress bar that shows kind of the percent that we utilize that. The goal would be to have all of the various items whether it be rails, whether the front-end design any of the skills you have and then give a little bit of a breakdown on how much you use each one of those on a daily basis or where you feel your skill level is at. If you feel like you are very heavy on the server side and you want to put just Ruby at the top whatever it is that you want to do, and that is what we're going to show off. Let's come to the about page I'm going to put this inside of this 4 width column here. I'm going to come down right below the image and I'm going to create another div and I'm going to give it a class of skills and that is going to give us a placeholder for where we want to put these. Now we have to also open up our controllers. This is going to be our pages controller and we need to make a database call because our skill data is in the database. So, I'm going to say
skills = skill.all. Now I can call this from the about page, say...
<%= skills.each do |skill| %> <h4><%= skill.title %></h4> <div class="progress"> <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" aria-valuenow="<%= skill.percent_utilized %>" aria-valuemax="100" style="width: <%= skill.percent_utilized %>%" ></div> </div> <% end %>
rails c. Let's update some of these skills. First, one is going to be
Skill.first and let's see what the values are for that. Running that returns the skill id of one Rails 0 and the percent utilized is 15. If I do
skill.first.update!(percent_utilized: 65) that gets updated. Let's also do it on the second one. I'm going to say
skill.find(2).update!(percent_utilized: 23). We should be good. Let's go and see how the data has actually changed. Remember what this is going to do is as this iterates through it's going to grab the skill and it's going to grab the values and it's going to slide it in both for the value now for aria. Then most importantly in terms of what you can see the style of the width. In other words what color, what percent of the full progress bar is going to be taken up with a color. If I come back, hit refresh. We're going to see that two of the items are, Oh yeah there we go that is perfect. This is the one that's at 23 percent. This is the one that is at 60 percent or 65 percent whatever I changed that to.
This is looking good. Still not perfect. We need to add a little bit of margins. Let's come and update our styles right here we have skills and this class of skills. We should be able to just simply say that we want to add some margin and padding but let's see. This is actually going to grab the entire thing we need to also grab some of the items inside of it so I need what I really need to do is wrap up a value here called skill. Let's come and creating another div that's going to be kind of the wrapper div for each one of the singular skills. Then if I come in and paste this all inside...
now I can give this div a class of skill(singular). If I come down into the application styles say skill. Now I can actually take pretty much exactly what I did right here. Copy this, paste that in. Except here I want a little bit more I think I want to do like 10px. Let's see what this does for us. If I hit refresh. This should give us just a little bit of breathing room for each one of these skills. Perfect! That's exactly what I'm looking for I think that looks nice and professional. All this is looking great. Obviously, when we push this up to production we'll update the skills with you know what our real skills are but this gives us some nice placeholder from our seed data. Let's come to the terminal, type clear and
git status. Let's see what we changed. Yes, everything there looks good. Those are the 3 files we changed. I'm going to say
git commit -m "Added view component for skills" and now we can push this up. Let's take a look at pivotal tracker. We are getting really close to being done in the next guide, we're going to walk through how we can add a custom font to our application.