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>
Output

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

Dismiss x
public
Bin info
apjmasonpro
0viewers