Looking for feedback on an interactive HTML5 project.

Absolutely! Keep cranking out some cool stuff :)

Im sure there is and somewhere here at treehouse they use something like 223,234,523,5435,4356,46 numbers to markk it if i remember well , i think it was here . xd

But overall , that looks great really, you youll make an body website anatomy , i would definetely learn from it :D

Wait, did you make this ? :o thats soo AMAZING!!!

How long did it take you to achieve these effects? and how many hours per day you stay learnnin if i can ask? i love all these and especialy the hover something i allways wanted to do <3 really like it

The calculator took about 80 hours. A lot of that time was spent figuring out the calculations required based on game rules.

The Anatomy thing took 30 hours but there was a lot of trial and error trying to figure out how to make it cross browser compatible and responsive. I could do a similar project in a third the time now.

Treehouse has all of the courses needed to do this stuff. I learned the CSS animation over a weekend. The JQuery took more time to learn and practice with. If you know HTML, basic CSS and basic Javascript, the more advanced CSS and JQuery to do all of this can be learned within a month.

Wow . Im amazed . I have to really focus on it hard . I believe im not making enough hard work on it . Im learning PHP . i did learn JS , it did put me off but i will comeback . I did some jQuery and i could do some very simple stuff like click on image and display with faded bg , thats the only thing : p but wow 80h? 30h? like wow thats a lot of time.

Very cool! I've never heard of GURPS before, but now I'm interested to see exactly what it is haha

I have a few projects going if you guys want to check them out!

Paint-like Web Application "Sketch Meh" http://marcusparsons.com/projects/sketchmeh

Weather Application http://marcusparsons.com/projects/weatherapp

Powerful and Customizable Calculator Program http://marcusparsons.com/projects/calculator/source/index.html

There is nothing yet on the main site, only in projects, because I'm doing all of the hard stuff first haha

80 hours for the calculator is not a lot, there was a lot of coding and math to do. 30 hours for the Anatomy app was a lot, but now that I have done it once, I could do it again in one third the time or less.

If you stick with JS and get basics down, you will find it very easy to learn and use JQuery and JQuery will make this kind of stuff much faster and easier. The effect you mentioned where a background is faded on a click event... that can be done with one line of JQuery code.

No way xD thats super ! could you do the drawing with PHP aswell?

Wow , i have million ideas i could put on my million user website with million dollar income xd ( not really but i would get an idea with the skills xd )

Konrad, you're going to want to develop your JavaScript skills. PHP is only meant for dealing with data that is sent to a server. JavaScript is what you use for interactivity with the user. It is incredibly powerful and well worth the time and effort spent into learning it.

Aha , fair enoguh!

I know what you mean ^^

Its like first time figuring out how to code a nav bar with HTML and CSS , it took me 15 minutes and later one i could just type it in less than 60 seconds ^^

Well, practice ,practice practice. Make 10 websites and i believe everything will be easy .

Marcus,

Im focusing on PHP coz i want to do like a facebook page with features like user log in, news feed, filter search .

But i love JS too, i mean the cool stuff! I would make a lot of thing with it ! But PHP now will get me father since it will be online and i could update it with JS step by step.

Facebook uses a lot of JavaScript, as well. JS is used to handle all of the things that shouldn't be handled by the server. That might sound ambiguous, but you should use JS to handle anything that interacts with the user in some form. PHP should be for processing data that needs to be sent to the server for whatever reason. If you start trying to handle too much with PHP, you'll cause a massive strain on your server, because you have to remember that if hundreds, thousands, or even millions of users use your site, each one of them are going to have processes that would happen on your server. So, try to limit the amount of PHP you use.

Hmm, not completely suree what you mean by that . JS with PHP?

PHP is for handeling server language when the user take action to make changes in the database or register right?

But what does JS has to do with it?

But with PHP i can make a wordpress theme or jsut cutome WP and meanwhile learn JS right?

never heared about JS with PHP together . I heard ajax thats all.

AJAX is a part of JavaScript. In fact, the acronym for AJAX has JavaScript in it: Asynchronous JavaScript And XML (AJAX) haha You make AJAX requests by using JavaScript.

JavaScript goes to handle most of the heavy lifting, because then, the server isn't doing all of the work for thousands of people; their computer is doing most of the work because JavaScript is a client side language (mostly lol see a special case such as NodeJS which is server side JavaScript).

That is correct about PHP, though, Konrad. Some of the uses that you can and absolutely should be doing are: post-validating data received from the user (use JS for initial validation of data), make requests to and from any databases you use, keeping track of pertinent login information to continually verify that the user making any request is the authorized user of that account (man in the middle attacks), etc.

Basically, what it boils down to is that PHP should play the back up for JavaScript. It should fill in all of the gaps that JS inevitably has to leave behind.

If you're interested in talking more about this, you should make a new thread dedicated to this question and tag me in it. I don't want to keep blowing up Richmond's feed! Sorry, Richmond Lauman! haha

It was built upon the "Simple jQuery Drawing App" course but I added a ton of features! haha The canvas and initial colors are inserted dynamically, tons of tools to pick from (still working on the "text" feature), undo (ctrl + z), redo (ctrl + y), the sliders now have outputs that show where you are in the RGB scale instead of just a vague approximation, different color scheme, etc. lol

I really, really appreciate that. And that is honestly really cool that you are going to use it. You can download all of the required files, because that URL may change for the calculator. I sunk many hours into that damned calculator haha! I created an entire library called "ExtraMath.js" for use with apps that need to make calculations. The link to the GitHub page is in the help and also here. Also, feel free to use anything you see in the source of any program I have; I would just like a teeny, weeny bit of credit if you do though :P

That would definitely help. Actually, even just a little span element beside each input box that was like a bubble with a ? in it that had a title attribute that popped up (like the buttons do in my Calculator program) would do the trick. It wouldn't take you too long to do that.

By the way, Richmond, the GURPSulator (love that name by the way) doesn't deal with decimals at all, right? It looks like it just runs calculations that are based on integers.

Ah okay, the reason I was asking was because someone had pointed out to me in the early stages of the calculator program that JavaScript has an issue with multiplying and dividing decimals. I wasn't aware of it for a long time lol I just wanted to make sure you were so that the GURPSulator can be everything it was meant to be which is to say awesome sauce!!!

I was not aware of JS issues multiplying decimals. I don't think I ran into it with the app. I did dozens of tests comparing results in the app to manually calculated resultsand never came across a problem that was inherent to JavaScript, but I don't believe I have any float multiplied by float calculations. Just integer multiplied by float and then rounded up or down. I will keep it in mind though, in case I run into future problems.

If you have Firefox or Chrome or even any other browser try running this into your console (or in a test page):

console.log(0.1 * 0.2);
//alert(0.1 * 0.2);

What functions to use generally depends on what you're trying to do with the numbers. If you know that you only need x amount of decimals, you can use toFixed() but if you want precision, you're better off going with the function I use in the calculator program and in my ExtraMath.js library from the PHPJS group.

Here is that function

function round (value, precision, mode) {
//  discuss at: http://phpjs.org/functions/round/
// original by: Philip Peterson
//  revised by: Onno Marsman
//  revised by: T.Wild
//  revised by: Rafał Kukawski (http://blog.kukawski.pl/)
//    input by: Greenseed
//    input by: meo
//    input by: William
//    input by: Josep Sanz (http://www.ws3.es/)
// bugfixed by: Brett Zamir (http://brett-zamir.me)
//   edited by: Marcus Parsons
//   example 1: round(1241757, -3);
//   returns 1: 1242000
//   example 2: round(3.6);
//   returns 2: 4
//   example 3: round(2.835, 2);
//   returns 3: 2.84
//   example 4: round(1.1749999999999, 2);
//   returns 4: 1.17
//   example 5: round(58551.799999999996, 2);
//   returns 5: 58551.8

var m, f, isHalf, sgn; // helper variables
precision |= 0; // making sure precision is integer
m = Math.pow(10, precision);
value *= m;
sgn = (value > 0) | -(value < 0); // sign of the number
isHalf = value % 1 === 0.5 * sgn;
f = Math.floor(value);
    if (isHalf) {
        switch (mode) {
            case 'round_up':
                value = f + (sgn > 0); // rounds .5 away from zero
                break;
            case 'round_down':
                value = f + (sgn < 0); // rounds .5 toward zero
                break;
            case 'round_even':
                value = f + (f % 2 * sgn); // rouds .5 towards the next even integer
                break;
            case 'round_odd':
                value = f + !(f % 2); // rounds .5 towards the next odd integer
                break;
            default:
                value = f + (sgn > 0); // rounds .5 away from zero
                break;
    }
}
return (isHalf ? value : Math.round(value)) / m;
} 

I am sure this will come in very handy in the future. Thanks!