[JavaScript] Assistance Greatly Appreciated

Huh? Why would poolRoster be an object, it’s an array.

1 Like

In JS an array is TYPE object, but instance of Array.

2 Likes

Is there any way to remedy this?

1 Like

No need to. Nothing wrong.

2 Likes

Sorry, I guess I wasn’t very clear, I meant is there any way to remedy the issue it causes.

1 Like

Not sure I follow. That an array is an object? That is not an issue, but by design.

const arr = new Array();
console.log(typeof arr);             // => 'object'
console.log(arr instanceof Array)    // => true
2 Likes

I am refering to this problem:

1 Like

Replace it with,

//jshint esnext:true
2 Likes

That’s what I have… please check out my bin.

1 Like

For some reason the esnext directive is not taking. When I use var to declare it, typeof poolRoster returns “object”, as it should.

2 Likes

Sorry, I may not have been clear when explaining my issue…

This is my Javascript
//jshint esnext:true
const today = new Date(),
      dateFormattingOptions = {weekday: "long", year: "numeric", month: "long", day: "numeric"},
      dayOfWeekNames = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];

let pswd = "Harper17";

//Member
class Member {
    constructor(name, isCheckingIn = false){
        this.name = name;
        this.isCheckedIn = false;
        this.checkInDay = null;
        this.dayOfTheWeek = null;
        this.bookedDays = {monday: "No", tuesday: "No", wednesday: "No", thursday: "No", friday: "No",};
        if (isCheckingIn === true){
            this.checkIn();
        }
    }
    checkIn(){
        let now = new Date(), dayOfWeek = now.getDay();
        if (!this.isWeekday(dayOfWeek)){
            displayError(103);
            this.isCheckedIn = false;
        } else {
            this.isCheckedIn = true;
            this.checkInDay = now;
            this.checkOutDay = false;
            this.dayOfTheWeek = this.getProperDayName(dayOfWeek);
            this.setBookedDay();
        }
    }
    checkOut(){
        if (!this.isCheckedIn){
            displayError(101);
        }
        let pass = "";
        pass = prompt("Password:");
        if (pass == pswd){
            this.isCheckedIn = false;
            this.checkInDay = null;
            this.dayOfTheWeek = null;
            this.setBookedDay();
        } else {
            displayError(102);
        }
    }
    displayStatus() {
        if (!this.isCheckedIn){return `${this.name} | Checked In: No`;}
        return `${this.name} | ${this.getFormattedDate()} | Checked In: Yes on ${this.dayOfTheWeek}`;
    }
    //Note: 0 = Sunday, 1 = Monday, 2 = Tuesday, 3 = Wednesday, 4 = Thursday, 5 = Friday, 6 = Saturday
    getFormattedDate(){
        return this.checkInDay.toLocaleDateString("en-US", dateFormattingOptions);
    }
    isWeekday(dayIndex){
        return dayIndex >= 1 && dayIndex <= 5;
    }
    getProperDayName(dayIndex){
        return dayOfWeekNames[dayIndex];
    }
    setBookedDay(){
        const value = this.isCheckedIn ? "Yes" : "No";
        this.bookedDays[this.dayOfTheWeek.toLowerCase()] = value;
    }
}

//Roster
function displayToday(){
    return "Today's date: " + today.toLocaleDateString("en-US", dateFormattingOptions) + ".";
}

const poolRoster = [];

function displayError(code){
    console.log("Error", code);
    let msg = "";
    if (code === 101){
        msg = "You are already logged in.";
    } else if (code === 102){
        msg = "Incorrect Password";
    } else if (code === 103){
        msg = "Sorry, check-in is only allowed on weekdays.";
    }
    alert(msg);
    console.log(msg)
    return msg;
}

function displayRoster(){
    for (n = 0; n < poolRoster.length; n++) {
        console.log(poolRoster[n].displayStatus());
    }
}

function addMember(name, checkIn){
    const member = new Member(name, checkIn);
    poolRoster.push(member);
}

function runInstance(bool){
    let pass = "";
    pass = prompt("Password:");
    if (pass == pswd){
        let name = prompt("Name:");
        addMember(name, bool);
        displayRoster();
    } else {
        displayError(102);
    }
}

You can see my entire code here.

This is the error message I receive
"ReferenceError: poolRoster is not defined
    at HTMLButtonElement.onclick (https://null.jsbin.com/runner:1:2836)"
1 Like

You are not getting ES6 support.

using const today ...

today instanceof Date
"today is not defined"

using var today ...

today instanceof Date
true
3 Likes

(Sigh…) Excuse me while I go bang my head against a wall a couple hundred times…

Changing all const and let to var appears to have fixed my initial issue.

However, I now receive the following error:

"TypeError: Cannot read property 'toLowerCase' of null
    at Member.setBookedDay (giqanof.js:64:43)
    at Member.checkOut (giqanof.js:43:18)
    at HTMLButtonElement.onclick (https://null.jsbin.com/runner:1:2930)"
1 Like

If we write a prompt,

var a = prompt("Enter some text").toLowerCase();

and then click Cancel, the return will be null which has no attributes.

2 Likes

Question: How do you align HTML <button></button> elements in CSS?

The following is an excerpt of the program I am trying to accomplish this on. You can find the entire thing here.

    <script src="index.js"></script>
    <h2>Header</h2>
    <div id="buttons">
        <button onclick="runInstance(false)">Add Member</button>
        <button onclick="runInstance(true)">Add Member + Check Them In</button>
        <button onclick="clearRoster()">Clear Roster</button>
    </div> 

I checked the docs…

But I couldn’t seem to find anything on the subject. After which, I proceeded to sandbox around and see if I couldn’t just figure it out on my own…

button {
    text-align: center;
    margin: 0 auto;
    float: none;
    align-self: center;
}

However none of this seemed to work. (In case you couldn’t tell) I’m trying to center them. Any Ideas?

1 Like

The button element takes its default styles from the form control group. As we can see, it uses default font size, color, text-alignment, mouseover effect, and active state behavior (push button visuals).

Buttons are inline elements so appear all on the same line with default spacing, left aligned positionally.

To apply custom styles it may require converting them to inline-blocks so you can give them dimensions and positional properties.

3 Likes

I got it to work doing this:

button {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

#buttons {
    display: block;
    text-align: center;
}
3 Likes

Hey @mtf and @hellofromtonya,

I have made even more progress since we spoke… you can see my code here.

However, now I am receiving the following error:

"error"
"TypeError: Cannot read property 'displayName' of undefined
    at jetehaz.js:136:66"

I know what is causing it; I am calling functions on indexed items that do not exist yet…

However, I’ve no idea how to remedy this issue.

Any suggestions?

1 Like

First suggestion, try to find a way to incorporate your 15 ‘executables’ into a single loop that iterates over the entire poolRoster and get rid of all the code bloat (repeated patterns).

if (a !== undefined)

is the long way of writing,

if (a)

There is no need for an else if in a binary scenario.

if (a) {

} else {

}

Binary.

2 Likes

Like this?

// Executables
function memberName(num){
  for (i = 0; i > poolRoster.length; i++) {
    if (poolRoster[(num - 1)] === poolRoster[i]) {
      let n = poolRoster[i].displayName();
    } else {
      n = "Member Name";
    }
    document.getElementById(`memberName${num}`).innerHTML = n;
  }
}

function memberBool(num){
  for (i = 0; i > poolRoster.length; i++) {
    if (poolRoster[(num - 1)] === poolRoster[i]) {
      let c = poolRoster[i].displayCheckedIn();
    } else {
      c = "Member Status";
    }
    document.getElementById(`memberBool${num}`).innerHTML = c;
  }
}

memberName();
memberBool();
1 Like