Filling out the cases


#1

This code works perfectly in code academy. When I take it outside of CA, I get no movement at all. Doing research, I'm seeing information about the jQuery ui library. I AM LOST.

I have done the downloads,but I need to know what lines of code I need AND where I need to put them to make this work.

I also have a css file, and my own jquery file. Where and how should I reference them?

All code is below.

Thanks.


<!DOCTYPE html>
<html>
    <head>
        <title>Super Mario!</title>
        <link rel='stylesheet' type='text/css' href='stylesheet.css'/>
        <script type='text/javascript' src='script.js'></script>
    </head>
    <body>
        <img src="http://i1061.photobucket.com/albums/t480/ericqweinstein/mario.jpg"/>
    </body>
</html>


css
img {
    position: relative;
    left: 0;
    top: 0;
}

jquery
$(document).ready(function() {
    $(document).keydown(function(key) {
        switch(parseInt(key.which,10)) {
            // Left arrow key pressed
            case 37:
                $('img').animate({left: "-=10px"}, 'fast');
                break;
            // Up Arrow Pressed
            case 38:
                // Put our code here
                break;
            // Right Arrow Pressed
            case 39:
                // Put our code here
                break;
            // Down Arrow Pressed
            case 40:
                // Put our code here
                break;
        }
    });
});


#2

check this
http://www.w3schools.com/jquery/jquery_get_started.asp


#3

@maychild
Try it by using

<!DOCTYPE html>
<html>
	<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- <script src="https://use.fontawesome.com/4131e5781a.js"></script> -->
      <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
        <title>Super Mario!</title>
  <!--      <link rel='stylesheet' type='text/css' href='stylesheet.css'/>
  stylesheet is substituted by the <style></style> Tags
  otherwise place the sylesheet.css file in the same directory as HTML and JS file -->
<style>
img {
    position: relative;
    left: 0;
    top: 0;
}
</style>
    <!--    <script type='text/javascript' src='script.js'></script>
	script.js file is substituted by <script></script> Tags at bottom of this HTML -->
    </head>
    <body>
        <img src="http://i1061.photobucket.com/albums/t480/ericqweinstein/mario.jpg"/>
	 <script>
	 $(document).ready(function() {
    $(document).keydown(function(key) {
        switch(parseInt(key.which,10)) {
            // Left arrow key pressed
            case 37:
                $('img').animate({left: "-=10px"}, 'fast');
                break;
            // Up Arrow Pressed
            case 38:
                // Put our code here
                break;
            // Right Arrow Pressed
            case 39:
                // Put our code here
                break;
            // Down Arrow Pressed
            case 40:
                // Put our code here
                break;
        }
    });
});
	 </script>
    </body>
</html>

#4

Thanks, for the link. There's great info here!


#5

Thanks for the help. I really appreciate it.


#6