Web Development Lesson 2 - Letter

On this page, we'll add a very simple script to automatically use today's date and to prompt the user for the name of the recipient. Don't worry if you don't understand it completely. We'll spend more time on Javascript later.

We'll continue using the work you've done in jsfiddle throughout this lesson. In case you need it, the code is below.

<h1 style="font-family:Arial,sans-serif; color:green; font-size: 1.7em; text-decoration:underline; font-variant: small-caps; line-height: 2em; text-shadow:2px 2px #ff0000;">Job Application</h1>
<p style="text-align:right;">Medellin, Date</p>
<p>Name</p>
<p>Estimados Senor,</p>
<p style="color:blue;">Soy estudiante del penúltimo año de Hotelería en la <strong>Universidad Nacional de <em>Hospitalidad</em></strong>, y quiero mostrarles mi interés en formar parte de su compañía a través de un contrato de prácticas.</p>
<p>Como saben, <span style="color:red; font-weight: 700;">la escuela pide <em>400 horas</em> de práctica profesional</span> en empresas especializadas en el área de estudios del alumno, para optar por el título profesional.</p>
<p>Podrán ver que una de mis mayores fortalezas está en el área de alimentos y bebidas, ya que he participado en diferentes entrenamientos y estudios paralelos, que me han llevado a innovar nuevas formas de ofrecer el servicio y experiencia del cliente, y estoy segura que el Hotel Cortez<sup>TM</sup> sabrá sacar el máximo provecho, cuando vea el aumento de experiencias positivas que sus clientes experimentarán.</p>
<p>Me encuentro en alta disposición para conversar con ustedes más ampliamente. Espero su llamado para una entrevista y conocernos mejor.</p>
<p>Atentamente,</p>
<p>Jane</p>

• Paste the code below into the Javascript section (bottom left) of your jsfiddle page.

window.onload = function () {
  hoy = new Date();
  document.getElementsByTagName("P")[0].innerHTML = hoy.getDate() + "/" + (hoy.getMonth()+1) + "/" + hoy.getFullYear();
}

• Let's look at this code briefly.
• window refers to the current page.
• .onload means that this code will not run until the page has fully loaded.
• function tells the browser to run everything inside the curly brackets ({}).
• hoy = new Date(); stores today's date in a variable called hoy.
• document.getElementsByTagName("P")[0].innerHTML = hoy.getDate() + "/" + (hoy.getMonth()+1) + "/" + hoy.getFullYear(); tells the browser to display the date (in a readable format) in the first paragraph element.
• Note that the 'first' element is labelled '0'. This is common in programming. We'll look at this more later.

• Now we'll add another short piece of code within the curly brackets, but after the data functions.

  nombre = prompt("Escribe el nombre del recipiente.");
  document.getElementsByTagName("P")[1].innerHTML =  nombre;

• nombre = prompt("Escribe el nombre del recipiente."); creates a pop-up with a prompt and a place for the user to input some text, then stores the input in the variable nombre.
• document.getElementsByTagName("P")[1].innerHTML = nombre; copies that name into the second <p> element.
• The full Javascript code now looks like this.

window.onload = function () {
	hoy = new Date();
  document.getElementsByTagName("P")[0].innerHTML = hoy.getDate() + "/" + (hoy.getMonth()+1) + "/" + hoy.getFullYear();
  
  nombre = prompt("Escribe el nombre del recipiente.");
  document.getElementsByTagName("P")[1].innerHTML =  nombre;
}

• Run it and enter the name of the person next to you.
• See the name on the third line change.

Next: Ejercicio