fbpx

Contact List App

Made with Node.JS, it included a database with MongoDB and a server with express. Add and edit contacts, with a full list of countries and flags.

contact list app

The frontend was made using the ejs templating engine and some jQuery for animations. Image uploads were handled with Multer and Cloudinary. Hosting was done on Heroku with Mlab hosting the database.

 

contact list app

Using javascript I added a search filter to the UI to make it easier to find contacts. The app was more so a learning exercise than anything else, learning to use different node packages and increase my knowledge of backend.

Space Invaders

Using P5.js I created a simplified version of the classic arcade game Space Invaders. The game had 3 main constructors, the aliens, the ship and the bullets. along with using the p5 setup to pull everything together.

Creating states for win and lose games as well as a press start screen and high score. The keyboard handled the controls using p5’s KeyPressed() and KeyReleased() to make our ship stop moving when the keys are released.

Creating games in javascript with P5.js made me think about solutions to problems I necessarily wouldn’t have had the chance to come across without making games, it’s a hardwork but mentally very exciting.

Amazon Re-Design

This project was to test myself, taking an existing design and creating a pixel-perfect frontend. The design was by Josh Millgate I discovered it on dribbble.com while looking for a clean one-page design to create.

I loved the clean and flat design, my aim was to work as semantically and as clean as I could. From a design perspective, the mobile view was yet to be done. Which resulted in reducing some of the less important aspects of certain section images and sometimes all together.

Using jQuery for mobile menu and smooth scrolling, the JS part of the site was very short and readable.

Translation App

Whilst Studying Polish, I wanted to keep my vocabulary on hand to use, so I decided to create a first 200 words app. Created using Node.JS, MongoDB, Express and using Pug as the templating engine I created the app and hosted it on Heroku.

The frontend I initially set out to use materialize.css but soon found out that as a table view it didn’t handle well on mobile. Bootstrap to the rescue! Combined with Pug I think this was a good option.

Although not a huge fan of Pug and its indentation (I often find the lack of closing tags make it harder to see what you’re inside of) I do enjoy looping through data passed to the frontend with it.

The database I am storing on MLab with multiple collections for the different languages. I can then search and find entries from a particular collection when I’m on the correct URL extension.

Securing the site with a user account meant I could create a UI for the uploading of new words.

 

Hosting on Heroku was fairly simple, having the ability to link to a GitHub repo is nice. But unfortunately on the free account the server will need time to reboot after a period of no traffic.

Pacman

While creating games to form part of a curriculum to teach kids to code, I worked on a Pacman game. I created the game using javascript and the library P5.JS. Creating constructor components helps the flow of the game and keeps everything neet while using p5.JS functions like draw() and keyPressed(), really helps with the speed of game creation.

One of the more interesting things about the game was creating a map. Using arrays I used different characters which when they were looped through would either create a wall or a free space.

Pacman has an X and Y coordinates in his object along with his image, so he knows in which block he is in. each block is a 20×20 square.

Moves would then be verified. in pseudo code that would look like this. if the space pacman wants to move into is not a zero, then Pacman's coordinates are updated and he moves.This whole process is helped by P5.JS and it’s draw function, which effectively continually loops, so you can position your function in there and then at its framerate will keep running through the draw function.

Above is the draw function that contains other functions. background() is a p5.JS function as are textSize, fill, strokeWeight, stroke and text. These functions really help with a lot of the general work you will need to do creating javascript games.

Javascript Calculator

The Javascript calculator is one of the projects set out by freeCodeCamp. Where you must create a fully functioning javascript calculator using HTML, SCSS and Javascript.

Here are the list of objectives.

  • Fulfill the below user stories. Use whichever libraries or APIs you need. Give it your own personal style.
  • User Story: I can add, subtract, multiply and divide two numbers.
  • User Story: I can clear the input field with a clear button.
  • User Story: I can keep chaining mathematical operations together until I hit the equal button, and the calculator will tell me the correct output.
  • When you are finished, click the “I’ve completed this challenge” button and include a link to your CodePen.
  • You can get feedback on your project by sharing it with your friends on Facebook.

My first task as always is to find a design I can build upon. Usually for this, I would go to dribbble.com to find inspiration, this time however, I went to my phone and decided to recreate the iOS calculator application.

The calculator wasn’t too bad to program, however as most others doing the challenge found out, there are quirks that you don’t realise at first. For instance, you should only be allowed to add one decimal point to a number and not any amount, i.e 0.23.30. Also for this exercise, I used ‘eval’. obviously not ideal as the dangers of ‘evil’ are well publicised but for this small task, the risk is minimised.

As this was a clone of the iOS calculator I saw fit to include the javascript date object to give me an accurate time for my navigation bar, just a little extra for fun.