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.

Day 21 – Catch the Type

Go to project: Catch the Type

Okay, so I can safely say I leveled up with this project. Pew. I am still surprised that I got through it. Of course I would never have even managed without the help of the amazing boyfriend. It’s actually been some days since we finished this project, but I haven’t had the energy to talk about it before now, haha! Still getting nervous twitches when thinking about it.

So this is another Jennifer Dewalt project. I didn’t do all the same functionalities that JD did. But the most important is there: catching the type aka. press some buttons to win a game.

As mentioned, I learned A LOT on this project:

• I made an array with some symbols and letters (not all letters from the alphabet, mainly because, there are SO many and I felt lazy).
• I made soooo many functions; I reused the getRandomInt function, an “addSymbol” function, a “startgame” function and a function that is called when a keyboard key is pressed. Man, I felt kinda overwhelmed, but I think that it will get easier with practice.
• Each symbol being dropped had to have the same top position but random left positions, so we used the getRandomInt to do that job as well.
• I used an if statement to determine whether the new symbol has been removed from the DOM. That’s because even though I used a .remove function it didn’t really remove it completely and that messed up the number of symbols on the page.
• The correct/wrong/missed counter was actually not the worst/hardest to do. It was pretty simple.
• I used a .fadeIn and .fadeOut function to make the startpage fade away and reveal the game. It was a fun little extra thing.
• I learned so many new things, but I don’t know how to write about them to be honest. Maybe I will update this page later on.

Day 20 – Ice Cream Creator

So the Danish weather has been AHHHH-mazing the past days, and what better way to enjoy the weather than to eat ice cream?! So here’s a fun little project using a library called jQuery UI (which apparently is a very popular library, however a bit old as I understand it).

Create your own ice cream here!

• After downloading and linking to the jQuery UI library, I found the example code and it worked perfectly. So simple! The .draggable function is a function that makes DOM elements able to be dragged around the site. I made a containment to the containing div and set the scroll to false.
• I wanted to make sure that the cones where the top layer, so I sat the z-index to 100.
• Also the library has a stacked option that makes sure that whatever element is dragged is stacked on top of the other.

Day 19 – Keep it straight

Another day, another JD project 😉 I found this game on her page, and its fun and really hard! So of course I had to do it. After my labyrinth game the other day, I understood the mechanics (and tried out my new approach; start with HTML and hooking up the buttons) and thank god for that! But but but, it was actually some difficulty in figuring out when you had completed a level (mouse had to have entered red, not exited white, and also entered blue) and when it failed. And the resetting, ohh the constant resetting, haha!

See if you can keep it straight!

Todays lessons:

• I was relieved when I realised that it was actually quite similar to my labyrinth game, but kinda frustrated in the end, and had to get help from the BF to figure all the false/true variables and resetting and and and….
• I actually realised AT THE BEGINNING that this was a case of show/hide (again) so I did the HTML correctly from the start, instead of having to go back and fix it later. Well it only took me several days to figure that one out! Maybe I’ll still remember it next time?
• Still love the show/hide, omg, how easy..
• Was kinda blank on how to find a way to get the function to go to the next level number without having to do 5 functions, but again, the BF to the rescue, and I made a variable with the level-number and put it into another variable with a string that would be the class name for the next level. That was clever.
• Tried an “else if” statement and a mouseleave! Have not made those little babies before. Check!

Day 18 – Click challenge

Another day, another game. This time I wanted to do JDs Click Challenge, and I had no idea how to do this project. I almost gave up, but asked for help and the BF helped me through (as always).

Click here to click some more!

As always, I learned something today:

• I think the most important lesson today is that I shouldn’t give in to the initial panic that I experience. When I relax I actually have gotten a few things under my belt, and I feel much more comfortable than I did just some projects ago. As the BF advised me; just start with the HTML (which feels really easy at the moment) and then go on to hooking up the buttons. Because those things I have understood quite well now.
• Started with a variable that holds the sum of the number of clicks the user has made.
• I used the setTimeout to switch to the result-page after 30 seconds.
• To get the number of clicks per second, I made a variable that holds the sum of clicked divided by 30. At first this number had quite a few decimals (much more than I wanted), so the BF told me that I could use a function called .toFixed(number of decimals you want) that will fix the number of decimals.
• Also I made sure to set the sum to 0 after the 30 seconds has passed.

Day 17 – Bobby pin quiz

So I wanted to do a simple quiz, again inspired by JD. The BF again came up with a super silly idea about what bobby pin you are… Yeah he’s weird, and I like it!

So here is my silly quiz with questions that make absolutely no sense in reference to bobby pins.

I learned:

• Getting better at using forms and the properties within the form element. This time I used the value property to give each answer a number that will be added to the sum and thereby determining which result the user will get.
• Again practising the show/hide function. I really think it’s a simple way to avoid having to do several pages and linking between them.
• Still trying to get used to the fact that a string with a number in it is not the same as a number. A string with a number cannot be added to another number (in the math sense), but a real number (not a string) can. So the value in the forms are a string, so I needed to change it to a real number. For that I used the parseInt function (that the BF taught me).

Day 16 – Labyrinth

Okay, so this project has been some days in the making. Guilty!

I started this project maybe a week ago, and the whole labyrinth design thing took a tole on me, so I put it to the side while I was getting in the job grove, but now I decided to finish it!

Essentially this is just a labyrinth game. I found a labyrinth online and used the design. The game is to bring the umbrella (which is the cursor) through the labyrinth to the rain. Give the umbrella some purpose!

Of course, if you hit the walls, you will have to start over, and if you make it through you get a cupcake! Virtual one though, so you don’t risk the dangerous calories.

Help the umbrella get to the rain!

What did this project teach me:

• Even though I have tried all the elements of this project before (I feel like I am starting to write this on all the projects), it was actually a small challenge to figure out how to build the labyrinth.
• The “walls” are build using divs, I have used hover-effects to control if the user touches the walls, and to register if they have started and completed the labyrinth.
• The coolest thing is the umbrella cursor, I have to say! I love it! That is actually something new that I have never tried, but I think that is such a cute way of doing it!
• The user has to place the cursor over the transparent start-div in order to make the walls “poison” and when the user gets through and hovers over the transparent rain-div it goes to the congratulation-div.