Discover Top Posts Tagged with #athougcodesatnight

Code Player 50 - [180 website project]

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.

Beginning Backend

Hello all,

So as the title suggests, I’ve just started dabbling in the backend world. Truth be told it’s intimidating, scary doesn’t begin to describe how I’m feeling, also don’t forget that fear mixture as well [sigh]. It brings everything I learned for the frontend and tells me “hey hey remember that structure, yeah forget all about that, these are the new rules”... But with that said, the possibilities are endless once I get familiar with it enough to experiment. Also, the moment I got my first server running felt freaking awesome! Not to mention the moment I connected to a database and fetched and displayed data was the closest I felt as a wizard.

Now that the intro is out of the way, here’s a small thing I worked on with the backend stack. True it might not be that pretty, but it’s a step towards developing my skills. So you might be asking “Okay okay we get it what have you done just tell us” to you fellow reader I tell you, I’m trying to display cats drawn by ASCII art.

For this project, I’ve used a couple of models Which I will list:

Express [framework]

EJS [template engine]

cat-me [a model that generates the ASCII art cats]

Thinking about this, I though “simple just generate the cat display it on the screen”. So I did just that and

Yeah... I completely forgot that white spaces are ignored. So I started messing with regular expressions and trying to solve it and well

SpaceWalk 57 - [180 website project]

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

To-Do 2.0 51 - [180 website project]

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.

happy coding :)

Weather 55 - [180 website project]

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 :)

So till next time, happy coding :)

Converter 43 - [180 website project]

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

Snow 56 - [180 website project]

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.

You can check out the demo here.

#HTML #html5 #athougcodesatnight #180dayproject #javascript #js #particle.js #Css #css3 #web design #WEB #web development #Web Dev #ui #ui design #ui development #animation #particles

Timer 52 - [180 website project]

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