var generateProposalHTML = function(proposal) {
var listItem = document.createElement('li');
- listItem.innerHTML = proposal.title + ' (' + proposal.total_occurrences + ' votes) <a href="#" onclick="createProposal(\'' + proposal.title.replace(/'/g, '\\\'')+ '\')">I agree.</a> </li>'
+ listItem.innerHTML = proposal.title + ' (' + proposal.total_occurrences + ' votes) <a href="#add-' + proposal.id + '" onclick="createProposal(\'' + proposal.title.replace(/'/g, '\\\'')+ '\')">I agree.</a> </li>'
return listItem;
};
const container = document.getElementById('proposals');
- parsedResponse.result.items.forEach((proposal) => {
+ parsedResponse.result.items
+ .sort((a, b) => b.total_occurrences - a.total_occurrences)
+ .forEach((proposal) => {
container.appendChild(generateProposalHTML(proposal));
});
<body>
<h1>Help me decide what to do during quarantine</h1>
<p>Vote on the recommendations, or <a href="#add">add one</a>.</p>
- <ul id="proposals"></ul>
+ <ol id="proposals"></ol>
<h1 id="add">Add a recommendation</h1>
<form>
<p>
<label for="proposal">You should...</label>
- <input name="proposal">
+ <input name="proposal" id="proposal">
</p>
<input type="submit" value="Do it.">
</form>