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!

 

Day 26 – Raining breakfast products

Go to project: Raining breakfast products

It’s been a MONTH (!!) since I last posted something on the blog. By now I should almost be finished with my 100 days. I should only have 20 days left approx. But let’s just say that, that is not the case.

I have been working however, making projects with my BF. So today I will add day 26 and 27, which have been done for some weeks, but never got around to put it on the website and blog.

The challenge and steep steep learning curve of programming has really done a number on me. Mentally it is super challenging, staying motivated and wanting to work everyday. So I haven’t been working every day. And I told my BF that I needed more help, because I don’t feel ready to do this completely alone, yet.

Right now we are working on some more complicated projects, that takes more than 1 day to complete (due to my job), and I have started to think of this project as a 100 programming projects more than 100 days of programming.

This cute little program was inspired by JD, but I changed it up a bit with some breakfast products.

What did I do/learn in this project:

• Pretty much the same project as this project, but with some minor differences.
• The different types of rain is controlled with CSS classes.
• I used a lock variable called isItRaining to make sure that the buttons can’t be pressed again and start another function call.
• And this would not be possible without everyone’s favorite function getRandomInt.

Day 25 – My first API

Go to project: My first API

Okay, so no big deal, but I just made a website using my first ever API!!!! Whaaaat?! That’s official programmer-stuff! I found a Chuck Norris joke database, that supplied a JSONP API that I decided to use. The internet is a crazy place.

The website has two input fields where you can type in your name (or any name), and it will generate a joke with those names based on the Chuck Norris jokes.

Pretty simple stuff, but I kinda love it. Who am I kidding?! I FREAKING love it!

Definitely more API stuff on it’s way from me.

Lessons learned:

• The BF gave me a thorough API lesson, helping me figure out how to use it. As far as I know now, I have to use the so called JSONP APIs and not JSON or other, because they require that I can host the API on my own server, which I cannot. So JSONP APIs will not have to be hosted by me.
• Anyway, I learned about the $.ajax thing, and I cannot explain what it is and why it necessarily works, but in any case it has an object “inside”, that has a bunch of keys (I think it’s called keys) and some of them link to the url of the API. Also it has something called “success” which has a callback function (look at me, using words like callback functions!) that starts IF the data is accessible. If not it also has an error which is an alert.
• I gathered the joke value from the API and replaced the Chuck Norris with a custom first and last name.

Day 24 – Crazy Jewish Mom detector

Go to project: Crazy Jewish Mom detector

Do you know about the Instagram account Crazy Jewish Mom? I love it! Even though my mom is no where near that level, or maybe because she’s not, I laugh out loud every time I read a text conversation!

Anyways, the combination of JDs email project and the Crazy Jewish Mom account inspired me to do this project. It’s a tool for mothers who want’s to make sure that the texts they send their daughters/sons are safe and free from “crazy” words. This is just in good humor, I totally adore the Crazy Jewish Mom, and kinda wish she was mine.

Some of my lessons from today:

• Found out that in order to register the backspace event (and let the user correct their texts from red to yellow to green) I had to use the .keyup() and not the .keypressed().
• The BF helped me with the functionality of comparing the users text to the words in the array. Apparently, not as easy as I had imagined. I thought I would be able to use the .find(), but the BF said that, that function only registers IF the word is there, not how many times it’s there. So we had to figure out something else. First we converted all the usertext into lowercase (because the words in the array is lowercase). Then we had to remove everything that was NOT letters or spaces. There are more ways to do that, but the BF showed me something called a Regular Expression. Yeah. There’s nothing REGULAR about that expression, I tell ya. The most important thing is that it worked, and I kinda understood why. The final thing we did was to put all the words into an array, except the spaces. And from that I was able to compare the two arrays, and figure out how many crazy words were in the text.
• The rest was pretty straight forward. I actually managed to not panic about doing some of the script myself. When I got stuck I wrote some of the functionalities down. And then I just started. Maybe it was not totally correct order, but the BF said, that what I had done was correct! Yay!

I joined GitHub!

Yes I am now officially a GitHubber, which probably is not a thing. But it is in my world!

A big reason for doing this project, is to make me ready to actually be hired as a programmer (I know, it sounds ridiculous in my ears as well!), and a big part of actually working as a programmer is to use the right tools to get the job done, right?!

So I have been using the Atom (which is a code editor) and I love it! But as I start developing more complex projects, I wanted to become familiar with version control, aka. Git. So I signed up for GitHub and I installed GitHub Desktop.

If you want to get a peek behind the scenes of this project, or maybe even use my code for something (which would be über cool!) please follow me (is that even what it’s called on GitHub?)!

GitHub profile: Katrine Gitz

 

Day 23 – How far does it go?

Go to project: How far does it go?

I am back with another data-project (that’s what my BF calls them). This actually came up, because we bought a car in November last year, and it runs on diesel and has great gas economy. But we wanted to see just exactly HOW great it was. So we came up with this project, where we can put in the receipts we have saved since we bought it, and then let the program calculate everything for us!

This project taught me:

• I reused some of the updateHTML() function from day 22. This project was a bit less complicated because there was no delete or done buttons, just adding to the array.
• Normally I know that you use the .push() for pushing new things into an array, but today I learned that you can use .unshift() to push stuff into the BEGINNING of the array. Who knew?! Well, my BF obviously…
• Used the .focus() for the first time, to make it easier to input the numbers on the top of the page. I know it’s a small feature, but I really like that.
• Tried the “select” html element instead of the input, for inputting the months. It’s a dropdown menu, and I had no idea that it was THAT easy.

Day 22 – To Do list

Go to project: To Do list

You know some of the little things in your every day life that annoys you? Not much, just a little? Well some of them are stuff like not having an easy way to share to-dos and shopping lists with my boyfriend.

The first step for me was to do a simple to-do list. The sharing and syncing part will come later.

I’ll tell you this much, I think I was having a bad day on this one. My brain totally stopped working after trying to hook up the “add to list” button. So I called in backup, in the only form I know; the BF. And of course he helped me!

Lessons for this one:

• I think the most important function I made was the updateHTML function. The function in it self isn’t that complicated I think, but the mindset was really hard to grasp. Every time something changed the HTML had to be updated. I don’t know why I found this so hard to understand, but it does make sense. Now. Haha.
• Because every list element has the same functions (delete and done buttons), I had to figure out a way to tell which of the list elements that was being deleted or done. The BF and I went through all the events connected to button click function, and one of them is something called dataIndex. It gives a number and tells which number the element being clicked on is in the list. Ie. number 2, 1 etc. That way it can be styled.
• Also when we made the delete button we actually had to tell the array to delete the element from the array. Apparently there is a function called .splice (I LOVE that name! It’s too funny!) that removes the element from the array.