Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<!-- This is a comment.  It doesn't show up in the rendered page -->
​
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
​
<!--   Above are the head elements that don't get rendered directly, and below is the body, which you can see in the browser output  -->  
​
<body>
​
​
<h1>Welcome to jsBin online code editor!</h1>
​
<p id="demo" class="big">This is a super useful tool that lets you try out and edit code and see the changes "live" in the Output pane.</p>
​
<p>You are in that pane now, but there are five tabs up top. They give you the equivalent of having separate .html, .css and .js files all in one place in the cloud!</o>
  
<p> Follow these instructions to play around: </p>
​
  <ol>
    <li>Click on HTML to see the source code.</li>
      <ul>
        <li>Type some text in that pane and see the changes magically take place here in the output</li>
        <li>Add an "a" tag around THIS ALL CAPS TEXT to link to the google home page</li>
      </ul>
    <li>Okay, now click the CSS tab</li>
      <ul>
        <li>This is where you can test out new styles</li>
        <li class="colorme">Try out your CSS fu and see if you can change the color of the text in this list item by targeting the class with a new style declaration</li>
      </ul>
    <li>Still with us? Great! Now click the JavaScript tab.</li>
      <ul>
        <li>This is where we can trigger dynamic interactions with the user and do all sorts of fun, fancy stuff.</li>
    <li>Read through the comments and code, and then Click the buttons below to see what happens.</li>
    <li>After you click the buttons, use your DevTools to inspect the elements you changed in the rendered Output and compare the HTML and CSS to the source code in the jsBin panels. They should be different! JavaScript actions change the page without reloading —powerful code magic</li>
      </ul>
    <li>Finally, slick the Console tab</li>
      <ul>
        <li>This is where we can write debugging output to see what our code has captured, and troubleshoot while developing.</li>
        <li>If you got through all that, play around, try to break stuff and figure out why.</li>
    </ul>
  </ol> 
  
​
  
  <p>
<button type="button" onclick="myFunction()">Change Styles</button>
<button type="button" onclick="getDate()">Get the Date</button>
<button type="button" onclick="namePrompt()">Name Game</button>
  </p>
​
  <p id="date"></p>
​
  <p id="name"></p>
​
  </body>
</html>
 
/* this is what a css comment looks like */
/* Uncomment the p.big declaration below by putting your cursor inside the commented text and hitting (Cmd+'/') */
​
​
body {
  background: white;
}
​
li {
  padding-bottom: 6px;
}
​
/* p.big {
  font-size: 20px
} */
 
// This is what a JavaScript comment looks like
// It's super annoying that they all use a different syntax, but they all do the same thing: hide help text from being rendered
​
// We can declare functions over here and trigger them with actions on the rendered page
​
​
// This first one will change the style of the element with id="demo" 
function myFunction() {
    var x = document.getElementById("demo");
    x.style.fontSize = "25px";           
    x.style.color = "red"; 
}
​
​
// This one calls the built in Date() function and assigns the timestamp value to the space between the tags marked id="date", using the very common "innerHTML" property  
function getDate() {
    document.getElementById("date").innerHTML = Date();
}
​
​
​
// This one uses the prompt() function to ask for user input
// It then uses an if/else control structure to perform one of
// two actions, based on whether the name is longer than 4 letters
function namePrompt() {
  var name = prompt("What's your name?"); 
  
  if (name.length > 4) {
    document.getElementById("name").innerHTML = 
      (name + " is a long name!");
  }
  else {
    document.getElementById("name").innerHTML = 
      (name + " is a short name!");
  }
  
  // we can also write data to the console, rather than the page
  // super great for debugging while developing 
  console.log(name);
  
}
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
apjmasonpro
0viewers