Day 10: Coding Dojo Yellow Belt test

19.10.13 / Coding Dojo / Author: / Comments Off on Day 10: Coding Dojo Yellow Belt test
Tags: , , , ,

I totally forgot to write about this in my last post, but I think should also get its own post.

While going through coding dojo you can take these optional tests that help determine how far you are and what you may still need to work on.  This Friday we had the one on HTML, CSS and jQuery which is the yellow belt test. We four hours to replicate this website from an image and had to then send a video explaining our code.  Sadly, I did not have enough time to do the video. I got a majority of the site done, except the jQuery and a few CSS things still needed to be done. I stayed focus on one thing that was not working for way too long and only in the last hour did I say enough and moved on. the top part of my page was perfect and I would not do anything to change it, other than the jQuery I wanted to add for mouseovers.  The that I had was that the container and content divs were pushing the divs and such in my content div down instead of including them. After making CSS changes I decided I had to have an extra </div> somewhere. I did a visual check and saw nothing then I ran my html through the validator which found some errors I fixed that had nothing to do with my issue. So I said enough and started to work on the body of the page…. Then at about 5 minutes till time was up I just said screw it lets give those divs a crazy height…. that worked… I was so mad and frustrated with myself, but at least I know another thing to try in troubleshooting.

Day 6 and 7: Coding Dojo

15.10.13 / Coding Dojo / Author: / Comments Off on Day 6 and 7: Coding Dojo
Tags: , , ,

Day 6 and 7 we have been learning about jQuery which so far is pretty awesome and not too hard.  I am working on the intermediate assignment at the moment. The first part of that I had to place 8 images on a webpage where as you click each image it disappears and there is a button that you can click and they all reappear. I did this by using $(this).fadeOut(‘slow’) on $(‘img’).click(function() and for the button I used $(‘img’).fadeIn(‘slow’) on $(‘button’).click(function(). Since  there is only one button and img I was able to just use ‘button’ or ‘img’ but I would drill down better if there were more on that page. I did have one issue where I totally did not put the http: from the google api link! Now I know to always check that!

The second part of the assignment was way harder and took me awhile, I had to ask for help on this part. The second part we had to create a form with two date selections and a button that displayed the results. For this I ended up doing the following jScript:

$(‘#date’).submit(function() {
console.log($(“#from”).val());
$(“#result”).html(“Your information:<br>From: ” + $(“#from”).val() + “<br>To: “+ $(“#to”).val());
$(‘#result’).css(‘border’, ‘2px solid black’)
$(‘#result’).css(‘margin-bottom’, ’30px’)
$(‘#result’).css(‘background-color’, ‘green’)

This just takes the To and From inputs and putting them in my empty div result and the rest is adding css once the submit button I have is submitted

The next part is sorting and then replacing images which I am working on tonight.

I am still amazed at how fast I can write out HTML and CSS now, and so excited when I work on a new assignment and just quickly type out the code.

Day 5: Coding Dojo

11.10.13 / Coding Dojo / Author: / Comments Off on Day 5: Coding Dojo
Tags: , , ,

Whew! Week 1 over! well kind of…. I still have a bunch of studying to do this week and I do want to preview next weeks topic on jQuery. I am amazed at how much we have all learned and how we can all do most of our assignments with out google!!  Today I completed CSS assignment 4 in about 5 hours, and I am pretty happy with that.  I do need to be more careful with display: inline; I keep using it with float when I do not really need too and some div placements still trip me up, but I feel like I understand what I am doing wrong so that I can fix it when I go through and do CSS assignment 2 this weekend.

At the dojo I was introduced to parallax!! This stuff is amazing!!!! It is basically site that move with your phone, tablet or mouse cursor.  You can check out two sites below and it is totally worth the time to check out.:
http://wagerfield.github.io/parallax/ and http://boy-coy.com

So after this week I see things on my blog that bother me and I need to fix!! I will start working on a template for this site this weekend.