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.
Advertisements

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.

Day 15 – Make me a news anchor!

If you’re dreaming of becoming a news anchor, I have the perfect project for you!

Inspired by JD, I wanted to make her teleprompter project. Initially I had no idea how to do this project, but after a talk with the BF it actually seemed pretty doable.

PS: As I am 14 days behind on my 100 day project (due to having to get used to actually working again), I have decided that I am probably not going to catch up the days. So I will just continue from now and be done a bit later than hoped.

Become a news anchor now!

This project taught me:

  • I used the textarea element for the first time ever. I have only used the input element, and the difference is, that the textarea can hold more than one line of text, the input text cannot. Also I love the placeholder text-option. I love to come up with non-standard stuff to write there. I know it’s stupid, but it’s a small fun thing to do to make a project more personal.
  • As a default the line breaks did not register when the teleprompter started, so I replaced the line breaks (written like this “/\n/g”) with a break tag.
  • I found out that to animate the new element created in jQuery (id = textinput) I had to use .find and after that make the .animation.
  • Also I hadn’t realised (or forgotten maybe) that the tags you want to animate has to be in curly brackets {}. I hadn’t realised that to begin with.-

Day 14 – Luck on the slot?

A talk with the BF about what projects I could do. He came up with the idea of a slot machine. I thought it was really funny, and we started talking about how you could solve that “problem” with the blinking or rotating elements. And this is where I had one of my first feelings of “being a programmer, in the mind”. While my BF talked about doing it by moving the x or y position of the element, I thought “why not just do it with an array and make them blink, like with the junk food project?”.

So this is the finished project, as with all the other projects, I could have done several more functionalities, but the most important functionalities are there, and that’s what’s most important.

Try your luck!

What did I learn?

  • I used the lock variable again (like I did in the junk food project) to make sure that the timeouts didn’t mess up.
  • Again, the elements of this projects are not new to me, but I feel like I still learn something new, even if the project is quite similar to another project.

Day 13 – Forgiveness generator

I think that JDs Tough Love was super funny! And I definitely wanted to do something similar, but why not just forgive people for all their wrong doings? Well anyways, now people can be forgiven and then go to JDs page to get some tough love afterwards 😀

Get forgiven now!

Some stuff I learned:

  • Actually, I don’t feel like I really learned something completely new. However I know it’s really important for me to practice stuff with arrays again and again because they are not my strong suit.
  • I made sure that when the user writes “my” it changes it to “your”. It was actually some quite funny quotes, but most of the time it didn’t make sense.

Day 12 – Click meeee!

Since my BF showed be the very cool animations on Animate.css I knew I wanted to do something simple, but fun. Turned into this very simple site with 16 buttons, all with each of their own animation.

Click all my buttons here!

Screen Shot 2016-04-22 at 17.10.43

I learned:

  • Basically just to copy what animate.css had put up on their website. I made an array with all the id numbers and the name of the animation that had to be added to the class name of each button.