Write JavaScript testing code that logs a message to the console. This is just a test to make sure that your browser is running your JavaScript file.

The starter zip file includes a starter JS file

Include the line of code into the file: console.log$("$Window loaded!"$)$; such that the message is logged to the console when the page is loaded

Link your HTML page to your JavaScript file using a script tag

Refresh your page in the browser. Do you see the console message?

Part II: Testing a Button

Now let's set up a very basic JS event handler. Modify your JS code and so that the "Button clicked!" console message won't output until the user clicks the "Encrypt$-$It$!"$ button.

Strategy:

First, make sure you understand why the event listener for window's load event is needed?

Move your console statement inside a new function handleClick.

Add an event listener to the the "Encrypt$-$It$!"$ button such that when clicked, your handleClick function is called.

Refresh your page in the browser. Click the button. Do you see the console.log message? If so$,$ move on$.$ Otherwise, double$-$check the syntax and for both of your event listeners $($window load and button click$),$ or consult your readings or documentation for more help.

Part III: Reset Button

Add an event handler to the "Reset" button such that when clicked a new handleReset function is called

Update the function to clear out the inner HTML of the input$-$text

Test your new reset button and make sure it works!

Part IV: Implementing a Basic Shift$-$Cipher

Modify your JS code so that when the user clicks "Encrypt$-$It$!",$ the text in the input text area will be encrypted using a basic shift$-$cipher, and output into the page's paragraph element with the id of output.

Details:

To get text from the textarea, you'll need to make sure you can access it from JS$.$ You can use document.getElementById or document.querySelector to access a DOM element in JS$.$

Modify $($and appropriately rename$)$ your handleClick function so that when called, it now retrieves the textarea's text value and generates a shift cipher $($algorithm discussed below; a solution for this cipher function is provided at the very bottom if you'd like to skip the algorithm part$).$ This generated cipher will be output as text in the #result paragraph.

The rules of a shift cipher are fairly straightforward. Let the English alphabet we all know and love$(?)$ be called A$.$ Let the shift$-$encrypted alphabet be called C$.$ For simplicity, we will shift letters in our encryption function by $1$ letter. Then C is defined as mapping each letters in A to the letter alphabetically next. For example, $\text{'}$a$\text{'}$ is mapped to $\text{'}$b$\text{'},\text{'}$b$\text{'}$ is mapped to $\text{'}$c$\text{'},...$ and $\text{'}$z$\text{'}$ is mapped to $\text{'}$a$\text{'}($creating a cycle of $26$ letters$).$ In this exercise, we will consider uppercase letters and lowercase letters equivalent to one another $($ie$,\text{'}$a$\text{'}$ is considered equal to $\text{'}$A$\text{'}).$

Visually, the cipher can be represented as the following:

input letter a b c d e f g h i j k l m n o p q r s t u v w x y z

$||||||||||||||||||||||||||$

v v v v v v v v v v v v v v v v v v v v v v v v v v

output letter b c d e f g h i j k l m n o p q r s t u v w x y z a

Your task in this part is to convert the text in the input text area from alphabet A to alphabet C$.$ This is all you need to know to implement the cipher in this lab, but if you would like additional hints, here are some provided:

STARTER CODE

$/*$

$*$ Starter file

$*/$

$($function$()\{$

"use strict";

$/**$

$*$ The starting point in our program, setting up a listener

$*$ for the "load" event on the window, signalling the HTML DOM has been constructed

$*$ on the page. When this event occurs, the attached function $($init$)$ will be called.

$*/$

window.addEventListener$("$load$",$ init$)$;

$/**$

$*$ TODO: Write a function comment using JSDoc.

$*/$

function init$()\{$

$//$ Note: In this function, we usually want to set up our event handlers

$//$ for UI elements on the page.

$\}$

$//$ Add any other functions in this area $($you should not implement your

$//$ entire program in the init function, for similar reasons that

$//$ you shouldn't write an entire Java program in the main method$).$

$\})()$;

Here is a sample solution:

$/**$

$*$ Returns an encrypted version of the given text, where

$*$ each letter is shifted alphabetically ahead by $1$ letter,

$*$ and $\text{'}$z$\text{'}$ is shifted to $\text{'}$a$\text{'}($creating an alphabetical cycle$).$

$*/$

function shiftCipher$($text$)\{$

text $=$ text.toLowerCase$()$;

let result $=""$;

for $($let i $=0$; i $<$ text.length; i$++)\{$

if $($text$[$i$]<\text{'}$a$\text{'}||$ text$[$i$]>\text{'}$z$\text{'})\{$

result $+=$ text$[$i$]$;

$\}$ else if $($text$[$i$]==\text{'}$z$\text{'})\{$

result $+=\text{'}$a$\text{'}$;

$\}$ else $\{//$ letter is between $\text{'}$a$\text{'}$ and $\text{'}$y$\text{'}$

let letter $=$ text.charCodeAt$($i$)$;

let resultLetter $=$ String.fromCharCode$($letter $+1)$;

result $+=$ resultLetter;

$\}$

$\}$

return result;

$\}$