Web Safe Font Preview (from Learn JQuery)


I’m stuck on on #3
" In the keyup callback function, call the html method on the '.preview' element and pass it the current value of $(event.currentTarget) , the updated input field, by using the .val() method."

Then test that entered text is being added to the preview after each keystroke.

Unfortunately, my webpage is not displaying the text being entered into the preview text box.

$(document).ready(() => {

  $('#text').on('keyup', (event) => (() {



<!DOCTYPE html>



  <title>Typo | Test-drive your text</title>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

    <link href="styles.css" rel="stylesheet">



  <div class = "outer-container">



    <h2>Test-drive your text</h2>


  <div class="formHolder">

    <form method="POST">

      <div class="third">

        Font Family <select name="font" id="font">

          <option value="helvetica" id="helvetica">Helvetica</option>

          <option value="times" id="times">Times</option>

          <option value="impact" id="impact">Impact</option>

          <option value="courier" id="courier">Courier</option>

          <option value="verdana" id="verdana">Verdana</option>



      <div class="third">

        Font Size  


        <input type="text" placeholder="12" id="size">


      <div class="third">

        Font Weight  <select name="weight" id="weight">

         <option value="normal">Normal</option>

         <option value="bold">Bold</option>

         <option value="bolder">Bolder</option>

         <option value="lighter">lighter</option>





  <div class="preview">Sample Font</div>

  <textarea name="text" placeholder="Type something here and see what happens..." id="text" cols="30" rows="10"></textarea>



<script src="main.js"></script>

body {

  background-image: url("https://content.codecademy.com/courses/jquery/images/typetile.png");

  background-repeat: repeat;

  margin: 0;

  padding: 0;



  width: 100%;


h1 {

  color: #FF6D04;

  font-size: 4rem;

  font-weight: 300;

  letter-spacing: 10px;

  line-height: 1rem;

  text-align: center;


h2 {

  color: #665C3D;

  font-size: .9rem;

  font-weight: 100;

  letter-spacing: 2px;

  margin-bottom: 40px;

  text-transform: uppercase;

  text-align: center;


header {

  text-align: center;

  font-family: "verdana";


.preview {

  align: center;

  background: white;

  font-family: Helvetica;

  font-size: 12px;

  font-weight: normal;

  margin: 0 auto 0 auto;

  min-height: 150px;

  padding: 30;

  word-wrap: break-word;


textarea {

  border-color: #E6B000;

  border-radius: 4px;

  border-style: solid;


  display: block;

  font-family: "Helvetica-Light", "Helvetica", "Arial", Arial, sans-serif;

  font-size: 14px;

  line-height: 20px;

  margin: 30px auto 30px auto;

  padding: 20px;


.formHolder {

  background-color: #665C3D;

  border-radius: 4px 4px 0px 0px;

  color: #FF6D04;

  font-family: "verdana";

  font-size: 0.75rem;

  margin: 40px auto 0 auto;

  padding: 20px;

  text-transform: uppercase;

  height: 50px;


.form {

  display: inline;


.third {

  height: 100%;

  float: right;

  text-align: center;


input {

  display: inline;


#fonts {

  margin-left: 4px;


#weight {


I have gone ahead and copied the solution text from the provided video. You can find that video here: Introduction to JQuery Project: Web Safe Font Preview - YouTube

The parenthesis after the fat arrow all need to be removed. (().

1 Like

Wow i’m a clown for that…

Thanks boss!

1 Like

Also, what did I do wrong to my codebyte formatting? I saw you were kind enough to re-format them for me.

**disregard, I took a look at the post in edit mode.

1 Like

Using it for code that will not work is the reason I edited the post. Codebytes are for working code, not code formatting. Use the proper markdown for that purpose. It is way easier to read and uses fewer resources that speeds up page load.