So I created 4 objects using JavaScript class syntax and then I stored these objects into an array. Lastly I created a loop to turn the values of the objects into unordered list items. My question is can I style these elements in the loop? would I be better to create a conditional statement after I created the elements to style them? Any extra lessons or resources on creating elements from javascript would also be appreciated. Thank you.
//using javascript class syntax to create and manage numerous objects at the same time.
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`)}
}
//creating a new object from scratch using javascript class syntax. You can create objects very fast this way.
var player1 = new player('Chris', '23', true);
var player2 = new player('John', '34', true);
var player3 = new player('Kelly', '18', false);
var player4 = new player('Madison', '25', true);
var attendance = [player1, player2, player3, player4];
for (var i = 0; i < attendance.length; i++) {
var playerList = document.getElementById('player-list');
var node = document.createElement('LI');
node.textContent = attendance[i].name
playerList.appendChild(node)
}
It worked, thank you. Yes i’m creating a project that contains a player(or employee) attendance log using object oriented type of thinking about JavaScript.
here’s what I have so far
//using javascript class syntax to create and manage numerous objects at the same time.
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`)}
}
//creating a new object from scratch using javascript class syntax. You can create objects very fast this way.
var player1 = new player('Chris', '23', true);
var player2 = new player('John', '34', true);
var player3 = new player('Kelly', '18', false);
var player4 = new player('Madison', '25', true);
var attendance = [player1, player2, player3, player4];
// Can style elements in the loop
for (var i = 0; i < attendance.length; i++) {
var playerList = document.getElementById('player-1');
var node1 = document.createElement('LI');
node1.textContent = attendance[i].name
var node2 = document.createElement('LI');
node2.textContent = attendance[i].age
var node3 = document.createElement('LI');
node3.textContent = attendance[i].online
if (attendance[i].online === true) {
node3.textContent = 'Online';
node3.className = 'style-online';
}
else {
node3.textContent = 'Offline';
node3.className = 'style-offline';
}
playerList.appendChild(node1)
playerList.appendChild(node2)
playerList.appendChild(node3)
}
objectives:
1.Create the objects using class syntax
2.turn those objects into elements
3.style those elements based on whether they are logged in or not.
4. use the getter/setter method to create dynamic values that change the player/Employee logged in status based on what time of day it is. (have real trouble on this one)
Using class names is even better then using style. Nice job
DOM manipulation is expensive, so ideally you want to minimize this.
you could do something like:
<main>
<div id="player-element">
</div>
</main>
const unoderedList = document.createElement('UL');
// within the for loop
unoderedList.appendChild(node1);
unoderedList.appendChild(node2);
unoderedList.appendChild(node3);
// then after the loop do one DOM manipulation:
playerElement.appendChild(unorderedList);
seems you got step one, two and three under control.
Thank you , It means a lot coming from the professionals . crazy enough I did this after my last reply so I could store the list items in an unordered list and then turn it into a flex container. I didn’t know that dom manipulation taxes the browser more, but definitely makes sense since it makes the computer go between the html and JavaScript.
If you ever have time (or just because you want to), you could read a bit about the history of the internet. How the first web pages where just static content, and however the years websites have become more dynamic using databases (fetching new data meant refreshing the page), to very dynamic with javascript and its frameworks like reactJS, angularJS and vueJS.
It also helps you understand the obstacles faced and the limitations
, It means a lot coming from the professionals . crazy enough I did this after my last reply so I could store the list items in an unordered list and then turn it into a flex container. I didn’t know that dom manipulation taxes the browser more, but definitely makes sense since it makes the computer go between the html and JavaScript.