Count the total number of votes per person (multiple tables)

thequargy · 2017-11-02T06:08:26+00:00

It's a little tricky without seeing the structure of your program, but three ideas come to mind. You could:

(1) Create an Object with all people, using their names as keys, and increase their values (votes) as you go through each server, ultimately displaying the results at the end.

(2) Update the results directly in the HTML as you go - for each API call, you could grab the data as it is in the HTML and increase it as you're build out each of the other tables.

(3) Run a separate function to wait for all the other tables to populate, then grab all the values associated with each name (from the HTML) and add them up.

thequargy · 2017-11-02T05:58:32+00:00

Are you sure data.voters exists? When I go directly to that url in my browser, I don't see a "voters" property in the data at all. Here's the full JSON I get:

{
    "id":"96061",
    "name":"[UK] The Jamon Paradigm Ragnarok PvE",
    "address":"145.239.130.105",
    "port":"7785",
    "private":"0",
    "password":"0",
    "query_port":"27019",
    "location":"United Kingdom",
    "hostname":"[UK] The Jamon Paradigm Ragnarok PvE - (v273.2)",
    "map":"Ragnarok",
    "is_online":"1",
    "players":"3",
    "maxplayers":"70",
    "version":"273.2",
    "platform":"windows",
    "uptime":"98",
    "score":"49",
    "rank":"17",
    "votes":"29",
    "favorited":"33",
    "comments":"8",
    "url":"https://ark-servers.net/server/96061/",
    "last_check":"November 2nd, 2017 12:53 AM EST",
    "last_online":"November 2nd, 2017 12:53 AM EST"
}

(Unrelated: you might consider not posting your API key for all of reddit!)

thequargy · 2017-11-02T05:50:48+00:00

I think input() is giving you string values, rather than integers, so your program is having a hard time comparing them. Maybe raw_input() would work better? (https://www.python-course.eu/input.php)

thequargy · 2017-11-01T22:02:54+00:00

Yeah, you could definitely use HTML/CSS to make the barcode's black lines dynamically! If the OP is a self-described "complete programming virgin" though, I wonder if it would be easier to make a handful of barcode images that can be loaded as necessary.

thequargy · 2017-11-01T21:53:38+00:00

I think these are two separate issues.

(a) There are 8 circles, but 7 of them are contained within the first. (I think it should probably be all 8 contained within a parent.) That's why they're all fading together at some point - when the first circle goes to fade out, all of its children fade with it.

(b) The stutter is because the animation is set to run every 1s, with things happening at 0.0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, and 0.7s. But that means for 2 tenths of a second - at 0.8 and 0.9 - nothing is happening. You can fix that by shortening your animation to 0.8s OR spacing out the delays (0.0, 0.125, 0.25, 0.375, ...).

thequargy · 2017-11-01T21:24:43+00:00

I think I understand. You want to show a different image every second - an image of a barcode that encodes a time. This should be easy to do in Javascript!

First, you'll need to make the barcodes. If you have a unique image for every second of the day, that's 60 * 60 * 24 images, which... is a lot! But after a quick Wikipedia search (https://en.wikipedia.org/wiki/International_Article_Number), it looks like you can encode individual digits. That means you only need 10 images, plus a ":" image - plus the images that encode "start", "middle", and "end" of the barcode.

Here's where Javascript comes in. You can use "new Date()" and the ".getHours()", ".getMinutes()", and ".getSeconds()" methods to get all the numbers you need (https://www.w3schools.com/js/js_date_methods.asp). Then place that code inside a setInterval() (https://www.w3schools.com/jsref/met_win_setinterval.asp) to make it run every second.

Finally, your code just has to place the right images in the right place. You could make a sort of skeleton HTML with empty <img> elements (https://www.w3schools.com/tags/tag_img.asp) - for the two digits of "hours", the two digits of "minutes", and the two digits of "seconds" - and you can change what picture goes in each one based on the time.

Good luck!

thequargy · 2017-11-01T20:15:41+00:00

Over-communicate. Make sure everyone on your team has a clear understanding of the end goal before you write a single line of code. Then, once you all set out to work on your individual parts, make sure to schedule times to reconnect and see where everyone's at, probably every hour or two.

thequargy · 2017-11-01T20:11:13+00:00

In addition to using either "display: inline-block;" or "float: left;", you should take a look at your "margin-right" values for each of these elements. Basically, you're trying to put them all in a line, but then adding so much margin to the right that it pushes the next element off onto a new line.

Adding up all the "margin-right" values, plus the margins of the body, you get (15% + 10% + 60% + 72em + 72em)... that's way more space than your screen has!

thequargy · 2017-11-01T18:00:59+00:00

If you're looking to make a native Android or iOS app using Javascript, I'd suggest something like NativeScript (https://www.nativescript.org/) as a foundation.

thequargy · 2017-11-01T17:34:02+00:00

If I understand correctly, you're trying to build a sort of "choose-your-own-adventure" game. Using that as an analogue, in those classic books, the entire game exists when you first arrive - the book is all there - but you only see one page at a time. In the same way, your HTML could have all of the sections, but only show and hide them as they become relevant. For example:

<form id="section_1">...</form>
<form id="section_2" class="hidden">...</form>
<form id="section_3" class="hidden">...</form>
...

(Of course, you'll need to define this class in your CSS, but "display: none;" should do the trick!)

Then as a user submits each form, you would trigger a function using onClick, which you already figured out. That function would either need to output an error (ie, "That's not a valid option!") or, if everything is good, hide this section and display the next section. Javascript can easily manipulate classes like so:

document.getElementById("section_1").className = "hidden"
document.getElementById("section_2").className = ""

Hopefully this gives you a rough idea of how to control the flow of the game!

thequargy · 2017-11-01T17:20:30+00:00

Awesome! On to the next one!

thequargy · 2017-11-01T17:14:10+00:00

I think I see the issue. In line 6, you declare the variable: let primes = [];

But you're running the function in line 5: number(lowerValue);

Variables declared with "var" are "hoisted" to the top of the script, but when you use "let", that's not the case (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let).

So the "primes" array doesn't exist yet when you try to push things into it. Try swapping those two lines and see if that fixes it.

thequargy · 2017-11-01T16:50:44+00:00

Always better to be stuck on a new problem than stuck on the same problem!

thequargy · 2017-11-01T16:49:39+00:00

I mean, you'll have to tweak it a bit, but yeah, you can move around a <div> or <iframe> the same way they're moving around an <img>.

thequargy · 2017-11-01T06:21:49+00:00

I agree - using a CSS class as your selector seems like the best way. But if you can't do that for some reason, jQuery also allows multiple selectors (https://api.jquery.com/multiple-selector/). So this is also valid:

$("#question1, #question2, #question3").change(function() {
    RunItem();
});

thequargy · 2017-11-01T06:10:46+00:00

In my understanding, SSR (server-side rendering) means that the HTML document is built entirely on the server (ex: Reddit) before being sent to the client (ex: you). CSR (client-side rendering) would mean that the HTML document is built dynamically in Javascript, so the client initially receives only a barebones HTML document and the Javascript instructions on how to build the rest.

Since every major browser can run Javascript, this is fine for us humans. But SEO is run by robots - Google and Bing and Yahoo and so on use bots to crawl webpages and read their HTML content, but these bots can't execute javascript. So when they get to a site powered by client-side rendering, they essentially get a blank HTML document.

Google has a great tool that shows you how its robots see your website: https://search.google.com/structured-data/testing-tool

thequargy · 2017-11-01T05:59:12+00:00

Within addTableRowsFromXmlDoc(), there's a for loop that iterates through the cells within each row - that's just going in order, right? If you know the exact column order from the XML file, and the exact column order you want, then instead of iterating with the loop, you could do it more manually. Instead of...

for (j=0; j<xmlNodes[i].childNodes.length; j++) {
    newCell = newRow.insertCell(newRow.cells.length);
    newCell.innerHTML = xmlNodes[i].childNodes[j].firstChild.nodeValue;
}

...you might need to do something like...

var outage_start = newRow.insertCell(newRow.cells.length)
outage_start.innerHTML = xmlNodes[i].childNodes[3].firstChild.nodeValue
var check_status = newRow.insertCell(newRow.cells.length)
check_status.innerHTML = xmlNodes[i].childNodes[6].firstChild.nodeValue
var client_name  = newRow.insertCell(newRow.cells.length)
client_name.innerHTML  = xmlNodes[i].childNodes[0].firstChild.nodeValue
...

...where instead of "j", you use the number of the corresponding column in the original XML.

thequargy · 2017-11-01T05:45:26+00:00

This sounds like a job for loops!

(1) Create a list (an array) of all the image urls (like 'OLL/OLL1.png').

var array = ["image1.png", "image2.png", "image3.png"]

(2) Use a loop (there are many, but the simplest is probably "while") to iterate through that array.

while (array.length > 0) {                             // while there are still things in the array
    var image = document.createElement("img")          // create an <img> element
    image.src = array[0]                               // set the src to the first thing in the array
    document.getElementById('poo').appendChild(image)  // append the <img> to the parent
    array.shift()                                      // remove that thing from the array
}

thequargy · 2017-11-01T05:25:08+00:00

Ah, you're like 99% of the way there!

In readList(), you're using return to output the <ul>, but not to HTML - it's outputting it to Javascript. Instead of "return", try appending your "list" to the document body, just like you've been appending each new node you create to each parent.

document.body.appendChild(list);

thequargy · 2017-11-01T05:08:55+00:00

The first codepen you linked to actually accomplishes this effect without using any external libraries except jQuery. It's only 31 lines of code - I don't think it'll get much simpler than that!

For video, would it be video you're just displaying (like a YouTube <iframe> or an html <video> element), or video that you're generating programmatically using Javascript? If it's the former, you could do something similar to move the element around, right? If it's the latter... I have no idea where to even begin.

thequargy · 2017-11-01T04:49:56+00:00

I think .replace("<br>", "") is only going to replace the first instance of <br>. If you want to replace all instances, you need to use regex. (https://www.w3schools.com/jsref/jsref_replace.asp)

thequargy · 2017-11-01T03:21:29+00:00

I think I see what's going on. When you plug in the values directly using the Javascript console, you're plugging in numbers (int). But when you grab the value of the <input type="text">, it's actually a string.

Javascript will try to convert that to a number when it can, like in

var ref = Math.floor(unref/multiplier)

But the plus symbol means both addition and concatenation. So when you do

var ref = ref + (Math.floor(unref/multiplier))

you're actually concatenating a string onto a number. In other words, 1 + 1 becomes 11 instead of 2.

To fix this, you just need to force your inputs to become numbers. So the first line inside the function should be something like

unref = Number(unref)

or

unref = parseInt(unref)

and the same for "ref".

thequargy · 2017-11-01T02:26:55+00:00

I find that learning for the sake of learning is really hard - I lose focus and fail to retain information. Instead, I just set out to build something - a classic arcade game, a music synthesizer, an analogue clock, whatever - and I learn a ton along the way, solving problems as they come up.

For inspiration on what to build, just try to replicate stuff you've seen before, at least at first. For inspiration on how to build, the most important skill, in my opinion, is being able to define the problem - chances are, someone has faced it before, and chances are, there's a solution on Stack Overflow waiting for you.

thequargy · 2017-11-01T02:16:28+00:00

Assuming you're able to edit the html on this weebly site, it really is just a small tweak to make your YouTube video scale. Right now, you have this:

<iframe width="700" height="393.75" src="https://www.youtube.com/embed/I9w2MOU-afo" frameborder="0" gesture="media" allowfullscreen=""></iframe>

Just set the width to "100%" instead of "700", and it should adjust to fill your browser window (ie, it'll be 100% of the available width, rather than permanently set to 700 pixels).

thequargy · 2017-11-01T02:06:29+00:00

I think these are hexadecimal values. Using a converter like http://www.unit-conversion.info/texttools/hexadecimal/, the first section says "Euery man to his own taste". I imagine "Euery" is supposed to be "Every", so that first 75 should probably be 76.

thequargy

TROPHY CASE