SDEV-Homework 2 Javascript Solved

Part 1: Sign Up Dialogs with Modals 
 

You will be editing the login.js and login.css files. You should not need to edit login.html in order to make the password validation functional, but that is where the changes you make will be evident.
The first portion of this assignment is dedicated to understanding modals. As shown in the example below, modals allow you to incorporate a pop-up dialog into your website for any interactions that you want to happen in a sub-window on your website. Modals are typically used for log-in and sign-up interfaces, but could be used to display any content on your webpage.



You will be creating a modal to allow users to sign up for a website with their name and a password. The example provided below has the input components your modal is expected to accept, but using Javascript and regular expressions you will be adding in scripts to make the password validation functional.



For the following questions, you will likely find it helpful to consult these resources:



Question 

For these questions, you will modifying the javascript code we provide in the file login.js in /resources/js/login.js to match password properties. We have provided the skeleton code for a function called openModal() that will handle your regex expressions. We have provided comments in the included file to

Write the regular expression for Javascript to match lowercase characters. 
Write the regular expression for Javascript to match uppercase characters. 
Write the regular expression for Javascript to match digits. 
Change the minLength variable such that the length of the password is at least 8 characters.

Question 1.2 

You are going to work with on the CSS using the classLists feature in this question.

Overall Objective:
The password needs to have a lowercase character, an uppercase character, a digit, should match the confirm password field and should be 8 charcters long at least.
If you notice after clicking the "Click to Open Signup Modal", right at the bottom there are 5 rows. For example:  
What you are going to be doing is playing with the bootstrap classes to change there from an red with a cross to green with a check mark when the condition is satisfied

For an example, let's consider just the lowercase condition

In the beginning, this is what you have: a red cross with “A lowercase letter in red”:  
If a lower case is entered you need to make the following display:  

There is one if-else block for each of the following:
If lowerCaseLetters regex matches or not.
If upperCaseLetters regex matches or not
If numbers regex matches or not.
If the minimum length of the password is = minLength or not.

First, use console.log to check the value of any classList, for example:
console.log(letter.classList)
You should an array be getting a single element, with a value “invalid”

Let's dive deeper on how to achieve what needs to be done. Let's consider just the lowercase condition again.

In the beginning, this is what you have: a red cross with “A lowercase letter in red”:  
If we enter the "if" condition, that would mean that we have a lowercase character entered. So the above needs to change.
To do this, all you need to do is remove the invalid class, and add the correct class that would have the display look as follows:  

This needs to be done everywhere we have the classList.add() function and classList.remove() function.

You can look up the names of the css classes from the login.css file.
The class that needs to go into these functions is defined in the CSS file 'login.css'. Do not use classes from outside this file and do not add classes to this file.

 

Question 1.3 )

Overall Objective:
Validate that the text in the password field and confirm password field are equal.

You need to validate that the text in the password field and confirm password field are equal.
For two points, all that you have to do is look at the line “var passEqualsConfPass = false;” and replace false, with the correct variable comparison to make sure that the passwords match. 
For another 2 points, repeat what you did in Question 1.2 for the if and else conditions for the match element. 

Question 1.4 

Overall Objective:
Enable the Button when all the conditions for a valid password are satisfied.

What you will notice is that if any of the conditions for the password have a red cross, the button is disabled.
What you need to do is in the enableButton() function, there is a line that says “var condition = false”, replace the false with the right condition such that if we have all green ticks, the button gets enabled and you can click it. 
Click the button to see a successful Modal
Part 2: Theory 
Download the archive to work on this section Theory.zip
This folder contains two files:

  |--Theory
    |--coding.html
    |--coding.js
  
 

You will find instructions in the coding.html file to complete this section of the homework.
Make sure not to modify the HTML/CSS or the existing JS functions. Add JS functions where necessary and reference them in the given fuctions.
Part 3: Tic-Tac-Toe 
Download the archive tic-tac-toe.zip

Directory Structure:
    |--tic-tac-toe
      |--tic-tac-toe.html
      |--rules.js

 

Implement the functions defined in rules.js

The tic-tac-toe board verification logic can be found here 
You'll not be modifying tic-tac-toe.html
Implement these rules Rules in rules.js
These same rules are defined in rules.js

Rule 1 - 

Input fields for the player 1 or player 2 names cannot be empty. Show an alert if the user tries to start the game without entering these two fields.
The game should not start if any of these fields are empty. 
Once the game has started, these two input fields should be disabled. The two fields should show the Move types of player 1 and player 2 (X or O) 
Once the game has started, The turn information should be should be shown.
Note: Turn starts with "X". The turn is shown in "Bold".
Once the game has started, click on begin play should alert - "Already started. Please Reset Play to start again."

Rule 2 - 

The reset play button should reset the whole game. (At any time when reset is clicked - All the three text boxes should be cleared and Turn should be set to the default message.) 
The text boxes for entering name should be enabled back. 
The Tic Tac Toe Grid should be set to its default entries. 
Clicking reset play again and again shall have the same effect every time (or no effect when clicked multiple times). 
Note: Do not just reload the page. (No marks will be awarded for that.)

Rule 3 -

The text box to enter Move should only take values (A1, A2, A3, B1, B2, B3, C1, C2, C3) (Hint: It will be validated after clicking on Play) 
Invalid moves should be reported by an alert message.(You are encouraged to use Modal which you learned in HW1 - Usage is not mandatory.) 
If the move is a valid move, the grid should be updated with the correct move (Player 1 is always - 'X', and Player 2 is always 'O' (This is not zero!)) - The turn information should also be updated (Example: After the first move - turn is set to 'O' 
A move should always be a valid move. (Example: If say a move was made in the already filled cell, it should be invalidated with an alert.) 
If the game has not started, clicking on Play should give an alert "The game has not started." 
After any move, the state of the table should be validated.(See the document attached in HW2 files to better understand). If there is a winner - Show it in an alert message - (Ex - Winner is X or O) - Displaying name is not important.
The game should reset itself once a winner is determined. 
After all the moves have exhausted, you're not required to display any message. (It should be obvious to Reset play.)
Bonus Question 

Expand
Bonus 1:  - Add the Tic-Tac-Toe app to your website (Hosted using GitHub Pages) that you created in HW1 . Create a hyperlink from your homepage.
Bonus 2:  - Unit Testing
You'll need to setup Jasmine in your part3 directory and write 3 unit tests for the isEmpty predefined in the rules.js. Create a .spec file and write 3 unit tests. These tests will call the isEmpty with the following valuesAny non-empty string of your choice - assert that it returns false
"" (empty string) - assert that it returns true
undefined - assert that it returns true