Creating a Dog Clicker Part I

In my front end web developer nanodegree course at Udacity, I worked on this one chapter where the objective was to create a small project starting from scratch. No code was given this time unlike other Udacity projects. The actual exercise is supposed to be a cat clicker, but I have dog pictures at hand, so I created a dog clicker game.

Dog clicker explained in detail

The purpose of this exercise was to be given a task and various steps where the requirements change, just like a real world project.

1st Include a title of the project, add an image and add a click counter that increments by 1 every single time the image is clicked on.

onClick() inside img tag in index.html

Pixie with the # of clicks

2nd Add another image with a title above the image and the click counter below for each image.

Implemented jQuery

Added two pictures with their own click counter

3rd Have a list of 5 images, once an image is clicked on, it opens on a large display showing the title above and the click counter below.

This time there are 7 dogs in the array

List of dogs with single image display view

Udacity projects usually offer some base code to help start. But this time there was no code and I had to start form scratch. To look at the code Click Here to my Github repository. Download the repository and try out each step by yourself. The first part of this mini project was to code three requirements by oneself. For the next part, I have to change to code to merge it into structured code using MVO, or model, view and octopus.