Using Brackets #5

Screen Shot 2014-12-09 at 15.56.26 Screen Shot 2014-12-09 at 16.13.50 Screen Shot 2014-12-09 at 16.36.34

Back to brackets, Started today with a code for a webpage with 150 boxes. The task at hand today was to change it to 4 boxes under different names, with difference images and text. So first I started by changing the number of boxes to 4, simple… No. Instead of it being so simple I had too add a thing called a ‘array’ under the “box” tag. An array is a verbal that contains more one value, So i added the names Tina, Ruth, Ester and Milly. These are random names but as an array you can add as many as I like and it will make a new box with the name you added. This is due to adding the number of boxes code of $x++ so it will increase the value by one, so as the boxes are numbered by 0, 1, 2 and 3 but I could add more if I wanted to.

Next you would have to go into the Box tag and change the title tag to $names [$x] this means the the value of the amount of arrays I have will add up, This ensures I that each time I add another array, It will add itself into a new box join inline with the others on the page by linking to the number of boxes with the $++

Screen Shot 2014-12-09 at 16.36.50

I then added more arrays for the Description and the images the same way as I just did the names for the boxes. I did come across a few problems when I added in the images as they were different sizes. I then fixed them so they were all the same size and reloaded the page and could see they were all inline and looks pretty.

Then I changed the description to add more to the page but then due to the amount of text I added was different, this made the boxes disfigured and my Task for next time will be to sort out how to fix this and make it fix correctly. By the end of the workshop I managed to complete the task and understand how to add arrays in my work.

Screen Shot 2014-12-09 at 16.24.48 Screen Shot 2014-12-09 at 16.34.22 Screen Shot 2014-12-09 at 16.34.59

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s