What Should I Download To Run My Own Code?


#1

Often times I do a lesson, then erase the code and write it over again simply to familiarize myself with writing the code. However, this seems to cause some troubles with me being able to verify that the code is indeed correct. This is because since I have already passed a certain part, and simply am going back to rewrite it, it will save my previous completed status, and accept incorrect code based on the assumption that I already passed it.

I realize that in order for me to actually make sure that I can check if the code is correct, I would have to have my own way to copy and paste the HTML, CSS, and jQuery code into some sort of program. But my question is, what program do I need to run the code?

For the last few months, I have been learning to code, but have no way how to translate that knowledge into the real world.

Finding such a program would overcome a huge hurdle in my path to programming. I don't know what to search to find this program or whatever it might be. I know that for HTML, I can simply write the code in notepad and then open the file up in the browser and it will show..

But more precisely, my question is, how do I tie in HTML, CSS, and jquery (or whatever other combinations I choose) in the real world?


#2

Well you can even use notepad if you want but i wouldn't use it there are few free software to write code for example Sublime or Note pad ++ i hope you know the all extensions how to save them like .html, .js,etc save them and your browser can read them.


#3

How do I combine a javascript file, HTML, and CSS file? The codes work off each other, so how do I go about doing that?


#4

@ethereal92,
Here an example.....
The CSS-definitions are placed in-between the <style></style>-Tags.
The jQuery-js library is loaded....

<!DOCTYPE html>
<head><title>Rock,Paper,Scissors!</title>
<style>
h2 {
    font-family:arial;
}
div {
   border: 1px solid black;
   height:20px;
   width:180px;
   text-align:center;
   }

form {
    display: inline-block;
}

#button {
    display: inline-block;
    height:20px;
	width:170px;
	background-color:#cc0000;
	font-family:arial;
	font-weight:bold;
	color:#ffffff;
	border-radius: 5px;
	text-align:center;
	margin-top:2px;
}

.list {
	font-family:garamond;
	color:#cc0000;
}
.uC {
   background-color:red;
  }
.cC {
   background-color:white;
  }
.result {
   background-color:blue;
  }

</style>
</head>
<body>
<!-- from Jquery - Modifying HTML Elements - 11. Click Da Button! Do It Naoughw! --></!-->
		<h2>Rock Paper Scissors</h2>
		<h5>Give your Choice (rock, paper, scissors)</h5>
		<form name="checkListForm">
			<input type="text,reset" name="checkListItem"/>
		</form>
		<div id="button">Show a Result</div>
		<br/>
		<div class="list" style="opacity: 0"></div>

  <div class="uC"></div>
  <div class="cC"></div>
  <div class="result"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script type="text/javascript">
  
//var userChoice = prompt("Do you choose rock, paper or scissors?");
var main = function() {
 $('#button').click( function() {
     var userChoice = $('input[name=checkListItem]').val();
     var computerChoice = Math.random();
     if (computerChoice < 0.34) {
         computerChoice = "rock";
     }
	 else if(computerChoice <= 0.67) {
         computerChoice = "paper";
     }
	 else {
         computerChoice = "scissors";
     }
	 
     var compare = function(choice1, choice2) {
        if (choice1 === choice2) {
            return "The result is a tie!";
        }
		else if (choice1 === "rock") {
            if (choice2 === "scissors") {
                return "Rock wins";
            } 
			else {
                return "Paper wins";
			}
        }
		else if (choice1 === "paper") {
            if (choice2 === "rock") {
                return "Paper wins";
            } 
			else {
                return "Scissors wins";
			}
        }
		else if (choice1 === "scissors") {
            if (choice2 === "rock") {
                return "Rock wins";
            } 
			else {
                return "Scissors wins";
			}
		}
	}

  var result = compare(userChoice, computerChoice);
//   var docString= "<p>User: " + userChoice + "</p>" + 
//                  "<p>Computer: " + computerChoice + "</p>"+
//				  "<p>Result: " + result + "</p>"
//   document.write( docString);
  $('.uC').text("userChoice: " + userChoice);
  $('.cC').text("computerChoice: " + computerChoice);
  $('.result').text("Result: " + result);
  $('input[name=checkListItem]').val("");
   });
  };
  $(document).ready(main);
</script>

</body>
</html>

#5

Here's a post that explains how to do that. Hope it helps :slight_smile:


#6

Thank you to everyone. I am feeling truly blessed to have a community of people willing to help a noob out. Codecademy forums, I love you.