Summary:
So i’m creating a player attendance log that shows information on the users and whether they are logged in or not. I do this by using class syntax to create the properties for my objects. I then create my objects and put them into an array. Thirdly I put my array through a loop that creates elements, stores object values in them, and then add classes to those element .
Problem:
I’m trying to create a dynamic value that changes whether the player is logged in or not based on the time of day. I do this by using a getter/setter, but only the offline value is created. How did this happen and how can I fix it?
js problem code
get online() {
return this._online
}
set online(online) {
this._online = online
const today = new Date();
const hour = today.getHours();
const second = today.getSeconds();
if (hour > 10 && hour < 20) {
if(player1 && player2 && player3 && player4) {return true}
}
else {return false}
if (second > 20 || second < 40) {
if(error) {return false}
}
else {return true}
}
Total JavaScript
/*using javascript class syntax to create and manage numerous objects at the same time.
Class has to be upper case to differenciate from functions and variables*/
class Player {
//creates properties of the object we can plug in
constructor(name,age,online) {
this.name = name;
this.age = age;
//this.online = online;
}
//creates a method we can use for these objects that do special tasks
onlineStatus() {
console.log(`${this.name} is ${this.online ? `online` : `offline`} at the moment`)}
get online() {
return this._online
}
set online(online) {
this._online = online
const today = new Date();
const hour = today.getHours();
const second = today.getSeconds();
if (hour > 10 && hour < 20) {
if(player1 && player2 && player3 && player4) {return true}
}
else {return false}
if (second > 20 || second < 40) {
if(error) {return false}
}
else {return true}
}
}
//creating a new object from scratch using javascript class syntax. You can create objects very fast this way.
var player1 = new Player('Chris', '23');
var error = new Player('ERROR', 'ERROR');
var player2 = new Player('John', '34');
var player3 = new Player('Kelly', '18');
var player4 = new Player('Madison', '25');
//storing my objects in a array
var attendance = [player1, error, player2, player3, player4];
// Can style elements in the loop
for (var i = 0; i < attendance.length; i++) {
//selects the main element we want to add on to
var playerList = document.getElementById('playerList');
var playerProfile = document.createElement('UL')
playerProfile.className = 'flex-container'
//creates li element then places the values of the obects inside of them
var node1 = document.createElement('strong');
node1.innerHTML = '<strong>' + 'Name:' + '</strong>';
node1.className = 'name';
var node2 = document.createElement('LI');
node2.innerHTML = '<li>' + attendance[i].name + '</li>';
node2.className = 'profile-name';
var node3 = document.createElement('strong');
node3.innerHTML = '<strong>' + 'Age:' + '</strong>';
node3.className = 'age';
var node4 = document.createElement('LI');
node4.innerHTML = '<li>' + attendance[i].age + '</li>';
node4.className = 'profile-age';
var node5 = document.createElement('LI');
node5.innerHTML = '<li>' + attendance[i].online + '</li>';
//if they value inside online is true. replace text and style. same for offline
if (attendance[i].online === true) {
node5.textContent = 'Online';
node5.className = 'style-online';
}
else {
node5.textContent = 'Offline';
node5.className = 'style-offline';
}
//adds name, age, online list elements to the unordered list
playerProfile.appendChild(node1)
playerProfile.appendChild(node2)
playerProfile.appendChild(node3)
playerProfile.appendChild(node4)
playerProfile.appendChild(node5)
//add unoredered list to the main element
playerList.appendChild(playerProfile);
}
html
<!doctype html>
<html>
<head>
<link href="./normalize.css" type="text/css" rel="stylesheet">
<link href="./style.css" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Bebas+Neue|Poppins&display=swap" rel="stylesheet">
<title>Employee log in</title>
</head>
<body>
<header>
<h3 class= 'Company-name'>Roku player Attendance Log </h3>
<ul class = 'header-buttons'>
<li>Sign Up</li>
<li>log in</li>
</ul>
</header>
<main id="playerList">
</main>
<footer>
</footer>
<script src="./script.js"></script>
</body>
</html>
.