Want to see a more basic (long hand or novice-ish) implementation of javascript without template literals or #x27;s.

Question

Code below
https://code.sololearn.com/WfwzTolPOyuF/#

Burey if you are out there lol

Can anyone rewrite the section of code that uses template literals (at bottom of JS file) so that I can see what long hand JavaScript without the template literals looks like?

I am thinking by doing this it will be easier for me to reference that section of code in my CSS, so that I can make sure that the newly added student table rows also have even/odd color scheme like the rest of the table.

Answer 1

Burey way of coding is more easy way to add var to html:

var studentTable = document.getElementById("student-table");
studentTable.innerHTML += `
<tr>
<td>${inputValue}</td>
<td><input type="text" size="30" id="${ids[0]}"/> out of 100</td>
<td id="${ids[1]}">0.0</td>
</tr>`;

If you wish to use dom element functions way, below is the equivalent code:

var tr = document.createElement("tr");
var td1 = document.createElement("td");
td1.innerValue = inputValue;
tr.appendChild(td);
var input = document.createElement("input");
input.type = "text";
input.size = "30";
input.id = ids[0];
input.innerValue = " out of 100";

var td2;
td2.createElement("td");
td2.appendChild(input);
tr.appendChild(td2);

var td3;
td3.createElement("td");
td3.id = ids[1];
td3.inputValue = "0.0";
tr.appendChild(td3);
studentTable.appendChild(tr);

For making even/odd color scheme of the table, you need to add extra class .even to the even row of td tags using Js.

Answer 2

i'm late once again 😅

by the way Blaine P you can now mention users and they will get a notification

make sure you have an updated version of sololearn and use @<username>

you will see a dropdown to select from when you start typing

Answer 3

AKA bug

Answer 4

no probs Blaine P

and as you can see there are other great people here stepping up to help (Calviղ ^_^)

Answer 5

Try it
3D cube in css moving with JS code
https://code.sololearn.com/WLWcT9hLFM2g/?ref=app

Answer 6

doesn't look commented out for me 🤔

*on mobile

Answer 7

Yeah, I do prefer Burey's way, especially after someone got the CSS even/odd color scheme issue worked out by simply adding in a <tbody> with an id.

Thank you for the heads up Burey. I know you always got my back! :)

Answer 8

@<Burey>

Blaine here (A heads up, I have rebranded myself, as you can see)

Not sure if i have done the username thing right.

All the code that comes after the template literals is all discolored out. (meaning this >>>
>>> "document.getElementById("InputNewStudent").focus();

// push the ids to the ids array
GradesArray.push(ids);
// add initialized zero score to the grades array
grades.push(0);
document.getElementById("InputNewStudent").value = ""
}
} " <<<<<)

It almost looks like its commented out in the code( https://code.sololearn.com/WfwzTolPOyuF/# ).

Is this normal? it looks like the template literals are affecting code beyond the template literals themselves.

Answer 9

Okay, so it seems to only happen when you put the JavaScript into <script> tags inside your HTML. Also, I just figured out I CANT recreate the strange looking color formatting with Solo learns editor.

If you Throw all of the CSS and JavaScript into the HTML and then place all of the code into Notepad ++ (In Notepad ++ it turns font black) or some other editor you will probably see what I'm talking about.

it doesn't SEEM to effect how the code runs, but its just a strange phenomenon.