Description
A large part of JavaScript is using the ecosystem of open-source packages that are out there. In this assessment we’re going to set up a project with parcel, use styles from bootstrap by importing it into our main.js, and use the validator.js package to validate our inputs. Exercise Step 1: Install packages using NPM and setup parcel.js 1. Open your command line and go to the folder of your extracted in-class-assessment. 2. In your terminal (in the same folder as your index.html) run the command “npm init” and just press enter until a “package.json” file is in the same folder as your index.html file. 3. Install the required packages that we’ll need for this project. In the terminal run the following commands. a. npm install validator b. npm install bootstrap c. npm install parcel — save-dev Note: You need to see this in your dependencies for your package.json file like so (except newer versions most likely): “dependencies”: { “bootstrap”: “^5.3.2”, “parcel”: “^2.10.2”, “validator”: “^13.11.0” } 4. In your package.json replace the scripts from what’s there to the following. From: “scripts”: { “test”: “echo \”Error: no test specified\” && exit 1″ }, To this (remove “main” attribute in your package.json): “source”: “index.html”, “scripts”: { “start”: “parcel”, “build”: “parcel build” }, 5. When running your parcel web build with “npm run start” and opening the site at the port that parcel gives you you should see the following site. NOTE: If you’re using liveserver from vs code for the rest of this assessment it just won’t work. 6. In your “js” folder create an “main.js” file and link it in your html as follows.Note: To ensure that your main.js is built and is using it successfully you should just display something for yourself. Only after you’ve done these steps you should move to the next step. Exercise Step 2: Import your CSS into your main.js file to apply styles. 1. In your main.js import bootstrap so that you have some default styles. Referring to bootstraps’ documentation you should be able to import it (reference here) as the first thing in your main.js like so: import ‘bootstrap/dist/css/bootstrap.min.css’; Note: If everything is working successfully it should look like the image below (If it doesn’t refer back to the previous steps): 2. Using relative file paths import your signin.css file to your main.js. Once you do so your sign up form should be a little narrower and look like the screen shot below. Exercise Step 3: Use Validator.js in the event listener to display the errors. 1. Add an event listener on the “form”. a. Get all of the input elements, this would be the input for the: email address/username, password one and password two 3. Import the validator package that you installed in step 1. a. You can refer here to the documentation to see how to import validator using es6 4. Using the server side validation techniques we’ve used in the past (refer to docs here) and validator validate all of the inputs in the form. a. Validate the email using the “isEmail” function (which returns a boolean) under validators (docs here) and add/remove the “is-invalid” class when appropriate. Here’s an example of what it should ideally look like without an email. b. Validate the password one with the “isStrongPassword” function (with no options using default, refer to docs here) and add/remove the “is-invalid” class when appropriate. Here’s what it should look like with a valid email address and an invalid password: c. Validate the password two by checking if it’s equal to the first password and add/remove the “is-invalid” class when appropriate. Here’s what it should look like when the email is valid, the password one is valid but password two is not equal to password one: 5. If all of the form inputs and the user clicks submit, call the “signInSuccess” function with the email provided. The application should look like the screenshot below. Test Cases: All of these should pass. – Valid Case. o email address: dmouris@nait.ca o password one: GarySteve1@ o password two: GarySteve1@ – Invalid Case: passwords don’t match, but are strong o email address: dmouris@nait.ca o password one: GarySteve1@ o password two: Something1@ – Invalid Case: passwords don’t match, and are not strong o email address: dmouris@nait.ca o password one: something o password two: terriblepassword – Invalid Case: passwords match, but are not strong o email address: dmouris@nait.ca o password one: something o password two: something – Invalid Case: email isn’t valid. o email address: supercoolperson o password one: GarySteve1@ o password two: GarySteve1@ Exercise Step 4 – Push up your code to GitHub 1. Open the link given and accept the assignment. Your link should look something like this. Note the image will be different because you’ll accept the assignment specified. You’ll see a page like this. One you’re repo is ready the page should look like the following. 2. You should see the page below once you click on the link highlighted in blue. Click the button that says “Code.” You’ll need to select “HTTPS” unless you’ve set up “SSH” (you can also set up GitHub CLI”. Click on the copy icon once you’ve selected the proper icon. 3. Clone the repository in your console (or if you’re using GitHub Desktop) using the “git clone REPO_URL” command. And go into this folder. 4. Make your changes, then add them to staging (using “git add .”) and commit them (using “git commit -m “CHANGE THIS MESSAGE”). Once committed, push them up to GitHup (using “git push”) it should look like below. 5. If you click “Pull Requests” and then the first item called “Feedback” you should see your commit (seen at the bottom). 6. Upload the link of your repository to Moodle. Grading – The test cases should be valid or invalid based on the data provided and should match the screenshots provided. – If valid the welcome screenshot should be shown. – Grading will be either pass/fail or complete/partially complete/incomplete based on your instructor preference.