#180dayproject

It sure has been a long time since I last posted. Damn.. whenever I feel that I finally got the hang of things I just start all over and start writing a post all awkward like... You know what, I’m just going to ignore the introductions, and get straight to the point. 

I spent this summer learning a bit of backend, working on a couple of projects,  using Udemy to learn, and adjust a couple of previous projects. To list a few of the things that made me feel quite productive: 

- Completing Colt Steels course

- Redesigning my Generative Art Site 

- Finishing Adwa’s portfolio site [check here site here]

- Finishing my Portfolio site [check out my site here]

I honestly was overthinking my website and how it would look, but then I just decided the hell with it and just get something out there and by time, I can change it or improve on it. 

You know that exhilarating feeling you get when you cross out a bunch of things from your to-do list? That’s how I’m feeling right now :) 

One of the things I made or rather followed, was a Udemy course by Jonas called the pig game, I added it to the 180-day project so I guess a new entry to the project day 58 is added. 

You can check the projects here. 

Now this was a fun project. I tried to do a replica of the old JSFiddle. It still needs some work, but for now this will do :) 

Here’s a demo of the editor running HTML and CSS

and here’s where Javascript does its magic.  

I think by now, you can tell I have a love or rather a fascination for Space. So today's project is another one that plays with Particle.js First things first the background. It wasn’t that difficult all that I had to do is adjust the JSON file  

Next was adding the title and adding some color to the site 

A new improved to-do list. Did this by following a bootcamp course. I like the colors in this one. [I have a thing for yellow maybe my homepage is a clue]. Another short post. 

You can check out the live demo here.

So now that I have the power of Ajax and requests [ spent the week learning it] I finally can use APIs so I decided to start simple. A weather app. The cool thing is also I’m using geolocation so no need for inputting your data [look at that we’re improving] ^^ 

Anywho, I was inspired by this dribble. and after a couple of hours, this was the result. Pretty happy with the result :)  

Oh, this was a hell of a learning experience. okay lets back up a moment. Given I’m starting slow [becuase of my rusty knowledge] I decided to do a currency converter app. I didn’t suspect I’d use a lot of things I haven’t used so this was awesome. 

Now as always, I started with the UI, because let’s face it, it’s what takes up most of the time. Positioning is a bitch so I had to first make sure it’s positioned right and responsive 

Okay perfect now let’s add a bit of design to the mix 

okay gradient Bg [check], date [check], input elemets[check], swap button [check]. Okay now the list of currencies, lets first set up the UI and then deal with the list of content.  

Okay… now is where the real work starts. So being the lazy programmer I as, there is no way in hell I’d manually add all those currency codes so what are my options? API’s yes! So here’s where the learning part starts. got to know the open exchange rate API, and worked with AJAX and JSON to grab the data. After reading the MDN for it, I started the test. 

Hell! it worked! awesome sauce [yes, I am one of those annoying people who say awesome sauce]  okay now let's try to save these rates in a js object and after a couple of attempts let’s try to save these rates in a js object and after a 

couple of attempts ...

A friend developer showed me a project of his that uses particle.js and it really intrigued me thus I decided to dabble in it a bit. I followed a couple of tutorials and this was one of them. 

Another day another project. I remember some project away I did a stopwatch, so I thought hey why not do the opposite and have a countdown timer, and so I did. I got inspired by this dribble design and wanted to replicate it.  I think it turned out well. Here’s a demo of the timer

 And here’s where the pause and refresh buttons working