Below are the variables, functions and program flows in pseudocode for the three ideas I have to implement in JavaScript:

1. Form Validation Pseudocode

Variables:

• form, reference to form element

• name, email and message, reference to their respective elements

• submit, reference to submit button

Functions:

• showError(input, message): this will show an error to the user through a tooltip or popup, given the field it applies to and the error message that should be shown

• validateForm(): given all form elements are valid, it will pass the validations and allow the send button to submit

• validateField(input): it will check that the given field is valid (ie no errors)

Program Flow:

• initialize all variables

• call validateField() for each field when the submit button is pressed:

• if its a name input, check that the value inside the field is greater than 1 character

• if its a email input, check that the value follows an email valid regex

• if its a message input, check that the message is greater than 10 characters

• if any validations fail, call showError() and display the error to that input and go back to beginning

if all are valid, call validateForm() to give a success message and allow submit button to send the form

• else, prevent the submit button from sending

Navbar to Sidebar Resizing

Variables:

• navbar, reference to the navbar element

• sidebar, reference to the sidebar element

• menuToggle, reference to the button that will show to expand or close the sidebar

• is Active, describes if the sidebar should be shown or not

Functions:

• toggleSidebar(): adds or removes the sidebar and makes isActive true/false

• resizeWindow(): handles window resizing and checks if menuToggle should be visible or not

Program Flow:

• initialize all variables

• call resizeWindow() to check if the page width is less than some standard width

• if the toggle button is clicked:

• if isActive is false, make it true and add the sidebar to the page element and make it visible

• if isActive is true, make it false and remove the sidebar and make it hidden

if the window is resized:

• if the page is more than the set width, make all navbar elements visible as usual and hide the menuToggle button.

• if the page is less than the set width, make all navbar elements hidden and make the menuToggle button visible.

Image Zoom in Gallery

Variables:

• imagePopup, reference to the popup that the clicked image will zoom in

• popupImage, reference to the image clicked

• imageCaption, reference to the image’s caption

• closeButton, reference to exit at the top right of the popup to close

Functions:

• zoomIn(): displays the popup with the image and its caption

• closePopup(): makes the popup disappear when closeButton is clicked

Program Flow:

• initialize all variables

• wait for all images to load

• if popupImage is clicked:

• get the data of the image and its caption and put it inside the popup

• make the imagePopup visible by calling zoomIn() and show the image and its caption underneath, with the closeButton in the top right

if the closeButton is clicked:

• call closePopup() and hide the popup and its contents