The code is hosted on Github which is cool because you can either download the code as a zip file and unzip the files to a folder on your PC or alternatively you can 'Clone in Desktop' which is a fancy way of downloading a copy of the files to a folder on your desktop. The buttons to do all this are on the bottom right once you open my github site.
A wiki has also been created on Github to explain the code. A wiki is a type of content management system, a little like a blog. If you have a Github account, you can comment on the text.
The Holiday Card includes HTML, CSS and Javascript.
There are a few new concepts:
- jQuery is a JavaScript library and is very popular. Remember JavaScript is the most popular programming language in the world and is used to manipulate webpages which consist of HTML and CSS. Many programming languages contain libraries which are generally files with code that is already prepared and contain a small number of functions that do a task very well. In this example, I am going to use a library to make snow fall. You will still have control over the size of the snow flakes, the speed they fall and even the look of the snowflakes if you wish.
- Previously we included all our code in a single HTML file. This is ok when we only have one HTML file. If we have 2 or more HTML files, then we want to share the CSS and JavaScript code with other HTML files. We will use special code to link the CSS and JavaScript files into our HTML files.
- We are going to put CSS files in a css folder, JavaScript files in a scripts folder and images in an images folder. Why? As your websites get bigger, it is neater to put the files into folders rather than have them all in one folder.
- A jQuery click event is used to allow some code to happen when a button is clicked.
- if, if else and else code is used which is a conditional statement and is used to check if the selected snow is light, medium or heavy.
- Bootstrap is a front end framework. What this means is that it makes it easier to create nice looking front end elements such as buttons, images, text boxes, text, etc. In this example, I am using it to style the buttons which change the size and speed of snow.
- We are using png image files. We have used jpg files previously which are very popular on the internet as they are compressed to be very small in size. png files are very similar but have one advantage - they can include transparency which is very useful for snowflakes as it allows some parts of the image to be transparent allowing the background to come through.
The code is a full working version of what was done in class. Notes have been added to most lines of code. Once the notes are formatted correctly as shown below, they have no affect on the code and are very useful when someone else wants to understand your code or if you haven't looked at your code for a couple of years and have forgotten how an application worked.
Notes in the HTML code look like this:
<!-- The background image -->
Notes in the JavaScript code look like this:
// apply the new settings for flakecount and maxspeed
Notes in css style sheets look like this:
/* Set to fill the full width of the screen */
I have included some additional png files in the images folder. Try changing the snowflake.png for one of the other images. Try twix.png or pikachu.png.
Notes in the HTML code look like this:
<!-- The background image -->
Notes in the JavaScript code look like this:
// apply the new settings for flakecount and maxspeed
Notes in css style sheets look like this:
/* Set to fill the full width of the screen */
I have included some additional png files in the images folder. Try changing the snowflake.png for one of the other images. Try twix.png or pikachu.png.
$(document).snowfall({ image: "images/flake.png", minSize: 10, maxSize: 80, flakeCount : flakecount, minSpeed: 1, maxSpeed : maxspeed, collection : "#base" });
Don't be afraid to play around with the size and speed of the images in the snowfall. Try changing the minSize to 2 or the maxSize to 50 and see what happens.
In the next class, we will add more buttons to control the minimum and maximum size of the flakes and also add controls to interactively change the snowflake image without having to hard code it each time.
You can find more information on the css and javascript libraries included in this example from the following links:
jQuery
Bootstrap
jQuery Snowfall
Remember, while finishing projects is great, learning to code is better. Don't be afraid to play around with the code.
Happy coding.
Michael
