jQuery

So I just learned jQuery, during the 6th week of school, and I’m going to have to say i enjoyed it a-lot! I understand it completely and cant wait to learn some more on it! we have done a few Applications with it, First one was an application called, “Iron-Chef”. Its super awesome and I had LOTS of fun with it! What it does is that it keeps tract of some recipes you create or want to remember or whatever. you just type in a name, url for photo, the ingredients then finnaly its decription, and your done! click create and bam! a nice looking recipe fades in using jquery’s .fadeIn(), also fades out softly when you delete a recipe using . fadeOut() . want to check the code out? →Click ME ←

Another website we made in NSS was one I cant stop playing with myself. Its called Browzer-Games and its just random games. One page creates how many ever boxes you want to create and gives each box a random RGBA color with also a random aplha, which gives it a opacity. So want to make 6700 boxes? do it.. because it will happen! not only that, you can hover over each box and whatever color that box is, your background will change to that same color, and I did a console.log() just to see the rgba in the console

$(document).ready(function(){
$('#boxes').on('mouseenter', '.box', paintBackground);
}
function paintBackground(){ 
var color = $(this).css('background-color'); $('body').css('background-color',color);
consoloe.log(color);
}

Also on the same website, there is another page that leads you to a page called “painter” , just click the href link “painter” and you are there! This page is simply a canvas, choose a color, add the color to your pallet, hover your mouse over that color to enable it and then start drawing in the white space! How did I do this? I created 10,000 little <div>’s with no border! DUH.. (>^_^)> Heres the code for it:

1. This makes the canvas:
$(document).ready(function(){

function makeCanvas(){ for(var i = 0; i < 10000; i++){ var $pixal = $('<div>'); $pixal.addClass('pixal'); $('#canvas').append($pixal); 
}
}
2. this allows you to paint on the canvas:
$(document).ready(function(){
$('#canvas').on('mouseenter', '.pixal', paintPixal);
}
function paintPixal(){
var color = $('#selected').css('background-color'); $(this).css('background-color', color);
}
3. And this creates a box with whatever value color you choose from the color wheel:
$(document).ready(function(){
$('#controls > button').click(addBox);
}
function addBox(){
//color takes the input value which is .val and makes it the varable = color var color = $('#controls > input').val(),
//this makes a div called $boxC
$boxC = $('<div>');
//this gives $boxC a class selector from style.css $boxC.addClass('color');
//this gives the div ($boxC) a background-color of color, which//is whatever color was inputed
$boxC.css('background-color', color); $('#colors').append($boxC);
}

If you would like to see more of the code check it out on my GitHub!

Thank you so much for ready and I hope you have a wonderful rest of your day! ……..or night, whatever timezone you live in.

Twitter Account ←———

Linkin Account ←———

Show your support

Clapping shows how much you appreciated Michael Barreiro’s story.