zip

SDEV Homework2-Javascript Solved

35.00 $

Category:

Description

5/5 - (1 vote)
  1. There are in total 3 questions in this homework and each question is mandatory.
  2. The instructions for each question are presented in each part below.
  3. Please follow the instructions carefully.
  4. You are only supposed to modify the JavaScript files.
  5. Please open the HTML file in your browser to see if your code works and open it up in a text editor like Sublime to read through the code and understand the function calls.
  6. We’ve 2 Bonus questions worth 10 points each with instructions in its own section

Part 1: Sign Up Dialogs with Modals (32 points)

Download the archive signup-modal.zip

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.

Click to Open Sign Up Modal

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

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

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

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.

Rubric:

  1. “A Lowercase letter” changes from red to green after lower case is entered in the password field. If a lower case is removed and no other lower case characters remain it moves from green to red too.
  2. “A capital(Uppercase) letter” changes from red to green after upper case is entered in the password field. If a upper case and no other uppper case characters remain it moves from green to red too.
  3. “A number” changes from red to green after digit is entered in the password field. If a digit is removed and no other digits remain it moves from green to red too.
  4. “Minimum 8 characters” changes from red to green after password of length greater than 7 is entered. If characters are deleted and the length of the password is less than 8, it moves from green to red.
  5. “Password and Confirm Password Match” changes from red to green after both values are entered in the password fields. If they dont match, it needs to move from green to red

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.

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. POINTS: 10
  • Click the button to see a successful Modal

Part 2: Theory (18 points)

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 (50 points)

You’ll not be modifying tic-tac-toe.html

Implement these rules Rules in rules.js

These same rules are defined in rules.js

  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. See picture
  2. The game should not start if any of these fields are empty.
  3. 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) See picture
  4. Once the game has started, The turn information should be should be shown.See picture

    Note: Turn starts with “X”. The turn is shown in “Bold”.

  5. Once the game has started, click on begin play should alert – “Already started. Please Reset Play to start again.” See picture

  1. 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.) POINTS: 2
  2. The text boxes for entering name should be enabled back. POINTS: 2
  3. The Tic Tac Toe Grid should be set to its default entries. POINTS: 2
  4. Clicking reset play again and again shall have the same effect every time (or no effect when clicked multiple times). POINTS: 2
    Note: Do not just reload the page. (No marks will be awarded for that.)

  1. 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) POINTS: 3
  2. Invalid moves should be reported by an alert message.(You are encouraged to use Modal which you learned in HW1 – Usage is not mandatory.) POINTS: 2
  3. 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’ See picture POINTS: 4
  4. 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.) POINTS: 2
  5. If the game has not started, clicking on Play should give an alert “The game has not started.” POINTS: 2
  6. 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. See picture POINTS: 13
  7. The game should reset itself once a winner is determined. POINTS: 2
  8. After all the moves have exhausted, you’re not required to display any message. (It should be obvious to Reset play.)

Bonus Question

  1. 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.
  2. 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 values

    1. Any non-empty string of your choice – assert that it returns false
    2. “” (empty string) – assert that it returns true
    3. undefined – assert that it returns true

    Create a SpecRunner.html page that runs these tests when opened. You can follow this tutorial to learn about Jasmine, and look at a simple example here.

  • HW2-7kkseu.zip

Related products