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!

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.

 

Day 11 – Junk food selector

Welcome to the most politically UN-correct programming project ever! Okay, maybe not ever, but it’s pretty close. I was thinking about doing a rock-paper-scissors project, but wanted to mix it up a bit 🙂

Don’t know what you’re having with your hangover? Try the Junk food selector now!

So I learned:

• To make sure that the button cannot be pressed several times and thereby messing up the timeouts, I started the script with a variable called “lock” and set it to false, ie. “open”. The BF introduced me to this concept called a Software Design Pattern. The functionality is that the lock is open for the first time. Then right after the button is clicked the lock is set to true (meaning locked). Then the lock is opened again after the second setTimeout has run.
• I made an array of objects with the image url and the name of the food. To get a random one I again used the Math.random function.
• I used two setTimeout functions. The first one is inside the changeToRandom function. Before the changeToRandom function I made a variable called “stop” and set that to false. Inside the changeToRandom function I used the setTimeout function to run the changeToRandom every 100 miliseconds (that’s what makes it blink) and then after I called that function (changeToRandom) I made a new setTimeout function that set the variable “stop” to true after 5000 miliseconds, and that is what makes it stop blinking.

Day 10 – Color Clock

10% of the way to the 100 projects! Yay! Inspired by JD, I have made a Color Clock that changes color code for every second that passes.

Check out the clock here.

Things I have learned and how I made it and what I should/could have done:

• The BF told me about the new Date() function that has all sorts of parameters (I don’t even know if that’s the right word for them haha) such as hours, minutes, seconds etc. It will take the users computer’s data so that it shows the correct time for each user.
• I made sure that if the time was 1 minute past 3, that an if statement would add a 0 before the 1 so that there is always 6 digits in the time-count, because that is what generates the HEX code, also with 6 digits.
• To make sure we don’t get all the dark colours, and only the brighter ones, I multiplied the hours, minutes and seconds with 10, 4 and 4 to that the number would change. But that also causes the colours to have a massive shift every time a 10 minute mark passes. Ie. the image above; it’s purple, and when it goes to 15.30 it becomes brown. Those colours are pretty far from each other, so I might have been able to do something smarter, but I didn’t have the time.
• Finally a setInterval function made sure that it updates the updateTime function every 100 micro-seconds (is that even right?!) so that it will at least be updated every second.

Day 9 – Grey scale drawing

{Writing this on day 18!!}

Damn, I’m so far behind on these blogposts. Luckily, I’m not as far behind on the actual projects. Though still 4 behind on the projects, so that’s not good either.

A mix of starting working again (after 1.5 years of unemployment) has been hard, I have been tired and very emotional. I think having a feeling that I need to prove myself as a person with a job again has been harder than I expected.

So I took a few days off (not by choice, mostly because I couldn’t keep my eyes open long enough to code and I couldn’t manage one single coherent thought in my mind). I have as mentioned picked up some of the slag, and I felt like today (Store Bededag = a day off work) would give me a chance to catch up some more.

So here is my 9 day project: A drawing programme that draws with grey-scale rectangles.

Draw something here!

This was a very fun project and here is what I learned:

• Working with the random color generator function as I did in this project, but instead of slicing up to 8 numbers, I only sliced 4, so that I got 2 numbers, which I repeated 3 times. All grey scale HEX codes are 3 sets of the same number (for example: #333333 or #474747) – didn’t actually know that, but luckily my BF knows everything 😉
• It was super fun playing with the look of the “pixels”. I’m so glad that the BF always makes me try something that I wouldn’t do myself.

Day 8 – Donut truck and a set-back

So day 8 and I decided that I wanted to work on my project for the day on my own, meaning no help from the boyfriend or JD (that’s Jennifer Dewalt if you didn’t know).

As mentioned I get a sort of anxiety when working on programming (not HTML/CSS, but “real” programming aka. JavaScript) on my own. I think it’s a combination of being really bad at handling the fact that I have to practise and that it doesn’t come naturally to me and the fact that I have never kept practising at something I find this difficult for this long. Did that even make sense? Point is: I suck at practising and I normally quit if I don’t understand it right away or if it seems too hard. Yeah I know, I’m revealing all my dirty little secrets.

Anyyyyywayyy, the outcome was a minor (read: mayor) meltdown, ending in complete disbelieve in this project and that I will actually become a programmer one day. I had to realise that if I don’t get any help, I will have to scale down my ambitions and be okay with doing some really basic stuff to begin with.

That ended up in a REALLY simple jQuery animation of the cutest donut truck (not my design) “driving” over the screen and with a speech bubble in CSS (found here among other really cool speech bubbles in pure CSS) popping up at the end of the “drive”.

You wanna see my truck? Here ya go!

What I learned including meltdown:

• How to use the jQuery .animation function. I have experienced the animation part of JavaScript before when I did Khan Academy’s Computer Programming course, but they had their own function called .draw and it works a bit differently.
• That no matter how badly I wish I was ready to work as a REAL programmer, I’m not ready yet. And it will take time. I realised that I think I have programmed more than I actually have, but that will hopefully change during this 100 day project.
• That I have to find a better way to deal with my fear of failure. Because having a meltdown is far from productive (duh!) and that won’t get me closer to my goal.

Day 7 – Hidden message

So today was food prep day at my house, which means not much time for programming + still feeling a bit under the weather (coughing, snotting etc.) so I was so ready for a super easy project today! And this is where the Hidden Message project came in to the picture. I loved JDs (that’s my new nickname for Jennifer Dewalt) take on the project, and I am very embarrassed to admit that I kinda stole the idea and the font and most of the css from her! OMG, I feel really guilty. It’s not that I didn’t understand how to do it, I think the sickness combined with tiredness combined with a lot of nerves about maybe going back to work tomorrow, made me reach for the easy solution.

Obviously I chose a different quote and that proved to be difficult enough. Let me just say, the HTML looks weird and it does not make sense why it works completely, but it does.

Find out what the hidden message is here.

So besides learning how to copy JD, what did I learn today:

• Kinda how to use   (meaning: No Break Space).
• That even if something seems simple and pure HTML/CSS it’s not, when you’re tired and a bit sick (ok, I know I’ve mentioned being sick a lot).
• That I don’t feel like it’s “worth it” reusing (fancy word for copying) some CSS, that I easily could have managed to figure out myself. Sorry JD, I promise to make you proud in the future!

Day 6 – Secret of the World

Yes! I made it! I’m back up to speed, thanks to a super fun and simple project in the final hours of the day. Once again, thanks boyfriend for the funny idea; A button that says “click here to get all the secrets of the world” and when you hover, it moves to a random location on the page. Buuuuut IF you succeed in pressing it, you will have the secret answered by a very cute puppy!

Click here and see if you can find the secret!

And I learned:

• Again, I used the Math.random() function (will need to try something new soon) to set a random top and left position of the button.
• In order for the button to stay on the page and not go off screen, we figured out that we could use .innerHeight and .innerWidth to figure out what the max top and left position could be. I subtracted the height and width of the button.
• I learned how to link to a page using jQuery/JavaScript, but I don’t know if I will use it in the future, I like the a tag a bit better. But now I know!

Day 5 – Magic 8 balls and sickness

So not a lot of days have passed of my 100 day project and I’m behind again… I was feeling really sick and heavy-headed (is that a real word?) and I kept postponing, until we drove to my parents house, and I didn’t prioritise doing my project 😦

And today we have been on the road with my parents and sister, visiting my brother in Århus. We came home around 18:00, and I really wanted to do my project for yesterday (day 5), so here it is! A magic 8 ball. Again, the boyfriend and Jennifer Dewalt (have to figure out some kind of nickname for her) is to credit for the idea, and a bit of help with execution.

Try out the magic 8 ball now!

So todays lessons were:

• I did all the circles and the triangle with CSS – it’s pretty nice and easy to do!
• Had some problems with the triangle because I used overflow: hidden because I wanted to hide the corners. A scrollbar appeared, and I simply didn’t have the mental energy to figure out what to do about it, so I made it smaller. Yep, no perfection here, but I am pretty happy about it still.
• Using the Math.random function again combined with the ‘getRandomIntInclusive’ function (found online). Because: When you just use math.random, the numbers are with a lot of decimals, and when you use the other function you get numbers without decimals, which you need when getting strings out of an array (wow, did that make any sense to any one else but me?! Probably not)