CS 1100: Web Development: Client-Side Coding

Example 1: a simple calculator

Last year, I ran across a web page that provides a simple win rate calculator for the Elo rating system. The Elo system is used to rate players in various games and sports. It began in the chess world and is now used in many popular outlets for sports such as football and tennis.

Open the tennis link to see the current WTA ratings.

Here is a slightly cleaned up version of the page I found. The interface looks like this:

We would like to be able to build such a page. It is simple, clean, and functional. How do we write the HTML for the page? How can we replicate—or improve—its styling? There is one big flaw on this page: no data validation!

Try Sabalenka (2165) versus Swiatek (2118).
Then enter a string instead of a number...

How can we check the data before calculating the result?

Example 2: a login form

Like some of the other dinosaurs who still roam the Earth, I occasionally watch network television. Given that TV viewing is constrained by time, I sometimes want to know what is on our local cable provider's channels at the time I might be watching. For that, there is zap2it. I use this page all the time.

Here is what zap2it's login interface looks like this:

This, too, is simple and clean. Well done overall. How can we replicate its layout and styling? How can we create buttons with logos and icons on them? Note, too, that this form does some simple data validation: it recognizes inputs that are not valid email addresses! How can we do that?

Try with a valid email address.
Then try an invalid address.

This, too, is simple and clean. Well done overall. How can we replicate its layout and styling? How can we create buttons with logos and icons on them? Note, too, that this form does some simple data validation: it recognizes inputs that are not valid email addresses! How can we do that?

Example 3: a search form

The third example is an input form waiting to be created, from earlier in the course.

Back in Session 21 we wrote a script to do simple text search in one of my hobby pages, The Books of Bokonon.

This was a fine practice problem for learning JavaScript, but it is not nearly good enough to be a real search tool. First, it uses a prompt() box rather than proper HTML. Ugly. Second, and even worse, the script runs every time we refresh the page, whether the user wants to do a search or not! Annoying.

Step 1: adding a search button

Over the last few weeks, we have learned about events and event handlers, which gives us the tools we need to solve the second problem:

1. add a button to the HTML page

   <h5>
     Available on Twitter at
     <br><a href="https://twitter.com/BooksOfBokonon">@BooksOfBokonon</a>
   </h5>
   <div id="search"><button>Search</button></div>
   

2. put the script in a function

   function searchPage(e) {
     let target = prompt('What term would you like to search for?');
   
     highlightElements('p', target);
     highlightElements('dd', target);
     highlightElements('li', target);
   }
   

3. add the function as an event listener on the button

   let searchButton = document.querySelector('button');
   searchButton.onclick = searchPage;
   

This is much better, though I'd like to style the button more attractively. Now to solve the bigger problem: the page still uses a prompt() box.

Step 2: adding a text field

Next week, we will learn about input forms, which will give us the tools we need to solve the second problem:

1. add a text field or input box to the HTML page

   <div id="search">
     <input placeholder="search term"></input>
     <button>Search</button>
   </div>
   

2. change the search function in the script to get the search term from the text field

   function searchPage(e) {
     let searchField = document.querySelector('input');
     let target = searchField.value;
   
     highlightElements('p', target);
     highlightElements('dd', target);
     highlightElements('li', target);
   }
   

This is better! We will be able to do an even better job when we learn more about how to use text fields and when we take some time style them attractively. We will also want to validate the input...

Search for nothing.

... and maybe activate the 'enter' key so that it starts the search. We might also want to add a 'clear' button, too, or clear the highlighted text when the user searches for a new term.

Taking one small step opens doors to so much more.

~~~~~

These three examples give us some goals to reach for after the Thanksgiving break.