Skip to content

Instantly share code, notes, and snippets.

@0xdevalias
Last active Aug 29, 2015
Embed
What would you like to do?
Snippets for HS.HACT 2015

HS.HACT.IO 2015 - Web Stream

Codeacademy

Tech Stack

Sites

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>
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment