0xdevalias/hshact.md

## hshact.md

      
    Raw
  

              hshact.md
            
          
    HS.HACT.IO 2015 - Web Stream

Codeacademy


http://www.codecademy.com/

Make a Website
HTML & CSS
Make an Interactive Website


Tech Stack


Xampp
OctoberCMS
Bootstrap
jQuery

Sites


The World's Best Insult Generator(Gooseylucy)
Alfie Likes Cheese (alfielikescheese)
Dogedraw Nyaanhacks

Get a random thing, update the title when you type, etc

Some javascript to pick random things from an array, and replace a tag ({{name}}) in it with the text from a text box.
Note: You will nee jQuery for this to work. If you don't already, make sure you add <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script> to your <head>
<script>
  var things = [
      "Random thing 1 {{name}}",
      "Random thing 2 {{name}}",
      "Random thing 3 {{name}}"
    ];

  function randomThing() {
    // Get a random thing from the above array
    var thing = things[Math.floor(Math.random()*things.length)];

    // If we have a name field
    if ($('#name').length) {
       // Replace the name tag with the value from the name input box and return it
       thing = thing.replace("{{name}}", $('#name').val());
    }

    return thing;
  }

  function updateHeader() {
   // Update the header with a random thing from teh array above
    $('#header').html(randomThing());
  }

  $(document).ready(function() {
    // When we type stuff into the updateText input...
    $('#updateHeader').on('input', function() {
      // ...update the header with it
      $('#header').html($(this).val())
    });
  });
</script>


## index.html
<html>
    <head>
        <title>My Website That Says Things!</title>

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

        <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>

        <script>
           var things = [
               "Random thing 1 {{name}}",
               "Random thing 2 {{name}}",
               "Random thing 3 {{name}}"
             ];

           function randomThing() {
             // Get a random thing from the above array
             var thing = things[Math.floor(Math.random()*things.length)];

             // If we have a name field
             if ($('#name').length) {
                // Replace the name tag with the value from the name input box and return it
                thing = thing.replace("{{name}}", $('#name').val());
             }

             return thing;
           }

           function updateHeader() {
            // Update the header with a random thing from teh array above
             $('#header').html(randomThing());
           }

           $(document).ready(function() {
             // When we type stuff into the updateText input...
             $('#updateHeader').on('input', function() {
               // ...update the header with it
               $('#header').html($(this).val())
             });
           });
         </script>
    </head>
    <body>

    <div class="jumbotron">
      <div class="container">
        <h1 id="header">Hello, world!</h1>

        <p>
          <button class="btn btn-primary btn-lg" onclick="updateHeader()">MAKE RANDOM THINGS</button>
        </p>

        <p>
          Name: <input type="text" id="name">
        </p>

        <p>
          Update Header: <input type="text" id="updateHeader">
        </p>

        <p>
          This is a bunch of words and stuff on a website that says things!
        </p>
      </div>
    </div>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <!--<script src="js/main.js"></script>-->
    </body>
</html>
	<html>
	<head>
	<title>My Website That Says Things!</title>

	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

	<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>

	<script>
	var things = [
	"Random thing 1 {{name}}",
	"Random thing 2 {{name}}",
	"Random thing 3 {{name}}"
	];

	function randomThing() {
	// Get a random thing from the above array
	var thing = things[Math.floor(Math.random()*things.length)];

	// If we have a name field
	if ($('#name').length) {
	// Replace the name tag with the value from the name input box and return it
	thing = thing.replace("{{name}}", $('#name').val());
	}

	return thing;
	}

	function updateHeader() {
	// Update the header with a random thing from teh array above
	$('#header').html(randomThing());
	}

	$(document).ready(function() {
	// When we type stuff into the updateText input...
	$('#updateHeader').on('input', function() {
	// ...update the header with it
	$('#header').html($(this).val())
	});
	});
	</script>
	</head>
	<body>

	<div class="jumbotron">
	<div class="container">
	<h1 id="header">Hello, world!</h1>

	<p>
	<button class="btn btn-primary btn-lg" onclick="updateHeader()">MAKE RANDOM THINGS</button>
	</p>

	<p>
	Name: <input type="text" id="name">
	</p>

	<p>
	Update Header: <input type="text" id="updateHeader">
	</p>

	<p>
	This is a bunch of words and stuff on a website that says things!
	</p>
	</div>
	</div>

	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
	<!--<script src="js/main.js"></script>-->
	</body>
	</html>