just a simple example to introduce javascript a little bit

index.html

<div id="form">
  <form id="daForm">
    <h2>Type your own lines here</h2>
    Line 1 <input type="text" id="i1" placeholder="program" /><br/>
    Line 2 <input type="text" id="i2" placeholder="calm" /><br/>
    Line 3 <input type="text" id="i3" placeholder="and" /><br/>
    Line 4 <input type="text" id="i4" placeholder="script"/><br/>
    Line 5 <input type="text" id="i5" placeholder="on"/><br/>
  </form>
</div>
<div id="poster">
  <div id="line1" class="line">PROGRAM</div>
  <div id="line2" class="line">CALM</div>
  <div id="line3" class="line">AND</div>
  <div id="line4" class="line">SCRIPT</div>
  <div id="line5" class="line">ON</div>
</div>

script.js

$('#i1').keyup(function() {
  $('#line1').html($('#i1').val().toUpperCase());
});

$('#i2').keyup(function() {
  $('#line2').html($('#i2').val().toUpperCase());
});

$('#i3').keyup(function() {
	$('#line3').html($('#i3').val().toUpperCase());
});

$('#i4').keyup(function() {
	$('#line4').html($('#i4').val().toUpperCase());
});

$('#i5').keyup(function() {
	$('#line5').html($('#i5').val().toUpperCase());
});
  

style.css

@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:600);

#form {
  font-family: 'Source Sans Pro', sans-serif;
  float: left;
  margin: 2em;
  padding: 3em;
}

#poster {
  float: left;
  background-color: rgb(200,0,0);
  margin: 2em;
  padding: 3em;
  width: 480px;
}

.line {
  width: 100%;
  float: left;
  text-align: center;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 5em;
  color: white;
}

#line3 {
  font-size: 2em;
}