Lab 6 - JavaScript

Goal

The purpose of this lab is to practice using basic JavaScript and UI controls to create interactive web pages. You will create a new directory lab6 and can start with a completely new webpage instead.

Before you start

To help with your development, make sure that you have both ESLint and JSLint enabled. (Remember that JSLint needs to be downloaded from this plugin (opens in a new tab))

You'll also need to make sure that the settings for JSLint are set correctly. Make sure the checkboxes for the for statement and in development are checked and that you have the variable document in your list of globals. See the image below for more details.

Task

In this lab¹, you are asked to write a page where the user can type some text into a box, and by clicking on various UI controls, you'll allow the user to spiff up the text by giving it some funny styling. You will write a JavaScript file that will manipulate text in various ways.

Your page should look something like this (opens in a new tab). But feel free to use your own image and choose the UI controls you prefer.

Here are some useful resources for you to use:

• https://www.w3schools.com/tags/tag_input.asp (opens in a new tab)
• https://www.w3schools.com/jsref/prop_text_value.asp (opens in a new tab)
• https://www.w3schools.com/jsref/prop_style_fontfamily.asp (opens in a new tab)
• https://www.w3schools.com/js/js_examples.asp (opens in a new tab)

Submission

Submit to your repo and ensure that all pages are visible and that it works as you expect. Make sure that you also share or provide documentation of what you did for the lab step-by-step.