Javascript Meltdown!!!! 👺

[karmacappuccino]

Hi @neilmispelaar !! 😁

I am having an issue running our javascript, I've played around with it multiple times but it just seems like it's not doing what it's suppose to be doing. I tried putting it in a validator but still can't seem to find an issue. If you're able to help that'd be great 😁 (I am testing the javascript for the sign in page).

So far what's committed into the github repo is the sign in and sign up page. For some reason it deploys the README.md file, not sure why🤷🏻‍♀️

Thank you!!

[neilmispelaar]

Yeah that's definitely weird!

Let me have a quick look....

[neilmispelaar]

@karmacappuccino

Okay - easy fix:

You (or someone on the team) just needs to create an index.html page.

That is the default page that is loaded by GitHub Pages. Since right now the index.html page is missing, it is displaying your readme.md file.

You can still access your sign in / sign up pages here:

https://imd1005-web-development-winter-2023.github.io/group-project-nanofed/signin.html https://imd1005-web-development-winter-2023.github.io/group-project-nanofed/signup.html

[neilmispelaar]

Also, LOL at 👺!!!!

[karmacappuccino]

@neilmispelaar

Perfect! Thank you so much!

Would you be able to help with why the javascript is not working properly as well? If not no worries!

[neilmispelaar]

hey @karmacappuccino

In your signup.html page your script tag is commented out so that might be why nothing is running on that page. (Or maybe you did that on purpose).

https://github.com/imd1005-web-development-winter-2023/group-project-nanofed/blob/110b8ccc2efcc24f5e7ef45dd47e523b027e932b/signup.html#L91-L95

[neilmispelaar]

I’ll have a quick look. I can’t see anything off the top of my head - will have to have a deeper look.

Also, what behaviour do you want to happen after a users email and password are validated?

[neilmispelaar]

Sorry, one last item, to reduce confusion you may want a separate JS file for each HTML page.

signup.js

signin.js

homepage.js

That way there will be less overlap and less potential collisions with your team members.

[karmacappuccino]

@neilmispelaar

Currently I'm just testing the javascript to see if it's working for the sign in page (that's why it's commented out for sign up page).

For the javascript, it's validating whether or not the email has an '@' symbol and '.' and if it's empty, same thing for password. If it's valid the border is suppose to turn green and if it's invalid then the border turns red and prints out a message. Eventually, if it's valid it'll return to homepage.

[neilmispelaar]

@karmacappuccino

Gotcha.

Okay, the following error is being thrown:

Which looks like it's coming from here:

const setError = (element, message) => {
  console.log("Here, ", element, message);

  const inputControl = element.parentElement;
  const errorDisplay = inputControl.querySelector(".error");

  errorDisplay.innerText = message; // ERROR HERE BECAUSE errorDisplay = null 
  ...
};

When we run the following line of code errorDisplay returns null which means the query selector isn't finding what it's looking for. This is because inputControl does not have any children with a class of .error.

I think what you are looking for is the <div class="error"></div> but that is BESIDE the input not a CHILD of the input.

const errorDisplay = inputControl.querySelector(".error"); // Returns null (nothing found) 

I might need to do some googling, but we need to modify that query selector to correctly select the "error" element (for whatever reason it's not doing that right now)

[neilmispelaar]

@karmacappuccino

We just need to move the error div into the parent div

<div class="field input">
  <input type="email" id="email" class="sign-in-email" placeholder="Email" required autocomplete="off">
</div>

Becomes

<div class="field input">
  <input type="email" id="email" class="sign-in-email" placeholder="Email" required autocomplete="off">
   <div class="error"></div>          
</div>

Try that and let me know how it goes.

[karmacappuccino]

@neilmispelaar

Thank you!

Ok! Error messages are being displayed now! BUT, once an error message is displayed it won't switch. So if I press the sign in button (without writing anything) it will say "Password is required" so then if I only put the characters it will still say "Password is required" even though it should be saying "Min of 8 characters".

As well, the colours aren't changing, I don't know if that has an issue to do with the names of div.

Finally even if what's inputted is correct, the error display messages are still there.

[neilmispelaar]

@karmacappuccino

One way to tackle this would be to write some code in your validate() function that clears all of the error messages from the HTML.

This way, if the last Validate() function wrote an error message to the screen, the next time the function runs it clears the error messages and then checks for validation and then rewrites in an error message.

Sorry. That’s worded horribly.

[karmacappuccino]

@neilmispelaar

Makes sense!

But now I've run into another issue, a team member committed something but it was before I saved my things, so I had to redo some code, I'm not really sure what happened. I fixed it to how it was ( I believe ) but now my code isn't showing the "Email required", "Password Required", or "Invalid Email" "Invalid Password".

Like you said I put my

inside my

but now it seems to not do anything.

[neilmispelaar]

Hey @karmacappuccino

oh no!

I’ll have a look later this afternoon after lunch.

Is it possible that your JS file was overwritten?

I can go through the history and see what’s changed over time.

[karmacappuccino]

@neilmispelaar

No idea!

I rewrote my javascript and still didn't work.

[neilmispelaar]

Hey @karmacappuccino ,

Okay, let me look at this now. Is the latest version of your code on main and in GitHub?

[neilmispelaar]

Hey @karmacappuccino

const form = document.querySelector('form');
const email = document.querySelector('email');
const password = document.querySelector('password');

These are at the top of your signin.js page.

Friendly reminder: "." (dot) is for selecting classes, and "#" (hashtag) is for selecting IDs. If you leave out both, then you are looking for <form> <email> and <password> elements on the page (the last two don't actually exist as HTML elements)

https://github.com/imd1005-web-development-winter-2023/group-project-nanofed/blob/6c5af8a5c99406ebde5cf87188ad0292c78478ea/signin.js#L1-L3

[neilmispelaar]

Hey @karmacappuccino

The same issue exists on line 14 and line 23:

const errorDisplay = inputControl.querySelector("error");

Here you are looking for an element with a class called error. But your querySelector is looking for an element called <error>

https://github.com/imd1005-web-development-winter-2023/group-project-nanofed/blob/6c5af8a5c99406ebde5cf87188ad0292c78478ea/signin.js#L14

https://github.com/imd1005-web-development-winter-2023/group-project-nanofed/blob/6c5af8a5c99406ebde5cf87188ad0292c78478ea/signin.js#L23

[karmacappuccino]

Hey @neilmispelaar !

Thank you, but I still can't seem to get it to work, I tried with '.' and '#'.

Also, do you have a link to a good validator for javascript?

[neilmispelaar]

Is the latest version of your code on main?

What are your console log errors looking like?

I can have a look now.

In terms of validators - usually if it doesn't throw an error in the browser it's "valid".

Will do some googling to see if there is a recommended industry validator for JS, but if there is I'm not sure what it is.

[karmacappuccino]

All the code should be updated and looking like it is, the javascript is in signin.js, html in signin.html and css in sign.css.

I'm not quite sure how to view the console log errors lol.

My issue is that nothing is happening lol, like nothing is printing on the screen or changing, where a message should appear and border color should change 🤷🏻‍♀️

[neilmispelaar]

Here's what I see:

So the email checking logic is working for me.

What's failing is the password checking logic.

So, here's the issue with your Password checker.

The password text that you are checking for blank or less than 7 characters is in passwordVal, but then in your else if you are checking the length of password not passwordVal.

password is the password Element on the page, not the password text that the user input. So you'll need to update that else if to check passwordVal variable.

if (passwordVal === "") {
    showError(password, "Password is required");
  } else if (password.length <= 7) {
    showError(password, "Password must be min 8 characters");
  } else {
    showSuccess(password);
  }

[neilmispelaar]

In terms of colours, here is your CSS in sign.css

.field input.success input {
  border-color: green;
}

.field input.error input {
  border-color: red;
}

.field input .error {
  border-color: red;
}

And here is the HTML

<div class="field input error">
    <input type="email" id="email" class="sign-in-email" placeholder="Email" required="" autocomplete="off">
    <div class="error">Email is invalid</div>
  </div>

The problem is your CSS selectors are just a bit off so you aren't targeting the right element.

If you want to target <div class="field input error">

You would use something like .field.input.error { /* CSS properties */ } (note that your CSS above has some extra spaces and the first input is missing a dot - the second input, because it's an input element, doesn't need a dot)

[neilmispelaar]

One trick - in VS Code if you hover over the CSS Selector it will give you a hint on what element will be targeted.

So you can see in your HTML you don't have an input inside an input so it's an easy way to see something is off.

[karmacappuccino]

OMG yay! It works!!!

I was having trouble getting the email required statement, but it was because I put required in the html portion.

I'm going to tackle the css now and let you know how that goes!

Thank you so much for the help!

[karmacappuccino]

@neilmispelaar words cannot express how excited I got when the borders changed colours, weird black outline that's clipping it but whatever.

A few more issues I'm having trouble with is

• How to change the text to being red (not a huge deal). I tried using message, but not sure if I'm going in the right path.
• Every time I open the page in a different screen (if that makes sense), the margin is all off. How do I make it so that it stays the same every time I open it?
• Finally, once the email and password are a success, how do I make it so the sign in button brings you to a different page?

Thank you

[neilmispelaar]

Every time I open the page in a different screen (if that makes sense), the margin is all off. How do I make it so that it stays the same every time I open it?

You might have to share some screenshots, I’m not 100 percent sure what you mean.

If you are referring to different browser sizes, you would have to use responsive media queries to change your CSS based on the browsers width.

Exercise 16/17 have some code samples on how to use media queries to make your site respond to different browser sizes.

https://github.com/imd1005-web-development-winter-2023/exercise-16

https://github.com/imd1005-web-development-winter-2023/exercise-17

[neilmispelaar]

How to change the text to being red (not a huge deal). I tried using message, but not sure if I'm going in the right path.

sorry, which text?

Either way, the best way is to use CSS. You can create a “.red-text” class with a colour: red; and then apply it to the element that you want to turn red, and then when you want to remove the red text just use the element.classList.remove(“red-text”)

[neilmispelaar]

Finally, once the email and password are a success, how do I make it so the sign in button brings you to a different page?

This one has a few different pieces, but not super hard.

Create a variable called isValid and, if ever your Validate function has an error state set the isValid to false.

That way after the Validate() function runs isValid will either be true (all is good on the form) or false (something errored).

Then, add an if() statement in your submit handler at the top of your file that says If isValid is true then forward the user to the next page, else do nothing.

Now, to forward a user to another page it’s one line of code:

location.replace("./next-page.html");

[karmacappuccino]

Hi @neilmispelaar

Thank you for all the help, I apologize for asking soooo many questions. I'm trying to look for answers on my own and help from teammates but we have no luck.

Currently this is not working, but I was wondering what I'm doing wrong?

[neilmispelaar]

This is perfection (except for the extra else at the end) - but otherwise it's perfect:

[neilmispelaar]

Above that code (shown above) add a let isValid = false to declare an isValid variable and default it's value to false.

[neilmispelaar]

Now, every time you have a showError - that means there is an error state.

So, after every call to the showError method, add a new line underneath it and set isValid to false.

Then, every time you see a showSuccess() add a new line underneath it and set isValid to true.

const validate = () => {
    const emailVal = email.value.trim();
    const passwordVal = password.value.trim();

    if (emailVal === '') {
        showError(email, 'Email is required')
    }
    else if (!checkEmail(emailVal)) {
        showError(email, 'Email is invalid')
    }
    else {
        showSuccess(email);
    }

    if (passwordVal === '') {
        showError(password, 'Password is required')
    }
    else if (passwordVal.length <= 7) {
        showError(password, 'Password must be min 8 characters')
    }
    else {
        showSuccess(password)
    }
};

[neilmispelaar]

I'm not quire sure what's happening here - maybe comment it out temporarily

[karmacappuccino]

@neilmispelaar

It's still not working, not sure what the issue is :/ Is the html page suppose to be underlined?

[karmacappuccino]

Also something happened to my VS code where now I have to commit all the changes that were done and they look like they're at the newest version but I don't want to end up deleting my teammates codes by accident. Sorry that was to say that the code is not updated to the most recent thing because of that^^

[neilmispelaar]

Oh no! Sorry @karmacappuccino I didn't catch this until now.

Demo what you can - I'm sure it will be super awesome!