Day 30 – Bootstrap is made for walking

Go to project: Bootstrap is made for walking

Okay so this is my (bad) humor showing it’s face. But honestly it was the first I thought about when I heard the name “bootstrap”. *singing* ‘My bootstrap is made for walking, and that’s just way it’ll do! One of these this bootstrap is gonna walk all over you… Keep walking!’ *singing*

So, my masterplan with this project, is to become good enough to find a job as a genuine programmer. As you might also know, Bootstrap is very popular. Already in January, when I started this journey to programming, I had heard of Bootstrap and knew that I wanted to learn something about it. Even though I didn’t really know what it actually was. Haha.

I found a great tutorial on Youtube, and I simply followed him. Therefore I cannot brag about this being my design or idea or anything. But I wanted to put it in this project even after all, because this project is also about remembering my progress and where and how I got to the end goal (the magical job!).

Click here to go to the Youtube tutorial. 

Very educational tutorial:

• I could go on and on but the thing the tutorial-guy said most was: Bootstrap is all about classes! And remembering what the various classes should be called to work. This will definitely take a lot of practice, but I feel confident that I could – relatively easily – make a Bootstrap website now.
• However, I feel like using Bootstrap is for a very specific “look”, and that will definitely not suit all projects or customers. In some ways it’s more restricting than helping, but if you are going for the Boostrap “look” then it’s completely awesome!
• The DIVS. Ohhh alll the divs!! Oh man..

Day 29 – Let’s go swimming

Go to project: Let’s go swimming

I really love swimming! There, I said it. Since moving to my current city 5 years ago I have been swimming more than ever. But! Somehow I always seem to get there right when they are closed or – especially now in the summer time – go to the pool and find out that they are closed for several weeks!

The city’s website where you can find opening hours for all the pools, is really hard to navigate, and they have made it very difficult to find out the opening hours for their pools. My guess is that the number 1 reason people use the site is to find out which pool is open at what time that day/week, so I decided to make a website dedicated to just that!

I had hoped that the city had some sort of API with all the information, but they seem to be closed off to me at least. So I made a bunch of objects with all the opening hours. I only had the opening hours for the next 6 months so in December I have to update the site with the next 6 months.

The city has a pdf file with a calendar that you can download from the site to put on your fridge ie., and I have made a direct link to that calendar on my site too. Hope that they dont mind.

I actually just used the site myself yesterday, on a mobile phone, and it was waaay easier (even though I had to go through my homepage) to find the data. I love it 🙂

So I learned:

• We found a function that uses the Date function to find the current week for the user. We of course use the week number to display the current opening hours for the relevant week.
• I initially made a whole bunch of arrays with all the opening hours for each pool (sadly they don’t really match ever!), but the BF said that I should make an object for each pool and then add all the weeks in as the keys. Then I made a bunch of variables that holds an object with the opening hours.
• Hooking them up was way easier than I expected. We made an if statement to check whether the opening hours are one opening hour per day or two opening hours per day. This sounds confusing, but the CSS is a bit different to make room for the two opening hours, so that’s what the if statement is for.

Day 28 – Gitz’s Grocery Store

Go to project: Gitz’s Grocery Store

Welcome to my grocery store!

Here you can shop to your heart’s desire! Well… not really, I only have 8 products, and they are all virtual.

As I am hoping to work with webshops in the future, the BF thought it would be a good idea to make a shopping cart function myself. Some of the products have discounts. Some discounts are 50% discounts and others are 2 for 1. Happy shopping!

I coded, I learned:

• The most used function I made was the updateShoppingCart function. It’s being called every time something changes, for example that the user is adding a product to the cart.
• I made an array with the products, that can be “purchased”. Then we made another array which started out empty and then as the user added products, they were pushed in to the second array. This way we could count how many times one product existed in the second array and use that number to make the count feature in the shopping cart.
• In the first array, we also added some different discount types and hooked them up.

Day 27 – Tic, tac, toe

Go to project: Tic, tac, toe

This is one of the first projects I have made, with my BF in a more “teacher”-like situation.

Earlier in June, we went to London for some days on a little vacation. The weather was classic English, meaning rain, rain and occasionally some more rain. On our last day, we went in to a pub to hide from the before-mentioned rain, and I convinced my BF to play chess. I am by no means a chess-player. I have always avoided it, thinking it had too many rules and was way to tactically complex for me. Let’s just say I lost 4 times, out of 4 games. So I have yet to concur the world of chess.

Coming home we talked about doing a two player chess game as a project for my 100 days, but the BF felt it would be too much. “Let’s just start with a tic, tac, toe-game”, he said, “it will be much easier”, he said… He was wrong.

I guess it was more simple than making a chess-game, but it was not simple by no means. I have never thought of all the “rules” that goes into a tic, tac, toe game. Jeez… So now I am even more terrified about doing the chess-game, but hopefully I will get there some day, some how.

Here’s what I learned:

• To work a lot with .draggable() and .droppable()!
• That a simple game of tic, tac, toe is way more complicated than it seems. All the small rules gave some challenges, for example when a piece has been placed and then moved, it has to be possible to place another piece in that same location. At first we had no idea, but in the end it was a very simple solution. My point is, on a computer, you have to take E-V-E-R-Y-T-H-I-N-G in to account. It took us a few nights to get this working perfectly or close to perfect, but we did it! Next game: a chess game! Arrrgghh I’m already scared!