Skip to content
This repository has been archived by the owner on Aug 26, 2021. It is now read-only.

#6 created a Client-side functionality for the Helpful and Not Helpfu… #15

Merged
merged 17 commits into from
Oct 15, 2017
Merged

#6 created a Client-side functionality for the Helpful and Not Helpfu… #15

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
3a1775c
#6 created a Client-side functionality for the Helpful and Not Helpfu…
Yjohn Sep 9, 2017
9a2df7b
Add the rating route
Sep 14, 2017
7190222
Take the FS from the code
Sep 14, 2017
a0fc622
added the issues number #7
Sep 14, 2017
4316157
#6 creating client side functionality, listen all the buttons ...
Yjohn Sep 14, 2017
a05f380
#6 created a Client-side functionality for the Helpful and Not Helpfu…
Yjohn Sep 9, 2017
50e5cff
#6 creating client side functionality, listen all the buttons ...
Yjohn Sep 14, 2017
bbef6b1
fixing the function of receiveResponse
Yjohn Sep 14, 2017
351e281
change the name of not helpful to unhelpful
Yjohn Sep 14, 2017
5e50f6f
change from string to validate JSON object by using JSON.parse
Yjohn Sep 14, 2017
1ab3054
fixing the merge conflict
Yjohn Sep 14, 2017
81d61c8
format the document
Yjohn Sep 15, 2017
ea75504
#6 display the total number of People
Yjohn Sep 16, 2017
724f010
change the variable name for total entiries
Yjohn Sep 28, 2017
53cc818
#6 adding loading animation when the button clicked
Yjohn Sep 28, 2017
99bd9e5
change the attributes to be displayed
Yjohn Oct 6, 2017
afb3936
#6 change the loading ID to the class
Yjohn Oct 13, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 17 additions & 0 deletions public/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
var helpful = 0;
var unhelpful = 0;
var total = 0;
var display = document.getElementById("displayCount");
var totalNumber = document.getElementById("totalNumber")
document.getElementById("Button1").addEventListener("click", function (event) {
//var temp = event.target;
helpful++;
total++;
display.innerHTML = helpful;
totalNumber.innerHTML = total;
});
document.getElementById("Button2").addEventListener("click", function (event) {
unhelpful++;
total++;
totalNumber.innerHTML = total;
});
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You're going to run into problems using getElementById, because every id on an HTML page must be completely unique. You can't have two elements with the same id.

Learn about querySelectorAll which allows you to select by class name and other attributes.

You'll face the same problem with your global helpful and total vars. If each question has it's own values, you'll need a way to store those values separately.

34 changes: 17 additions & 17 deletions views/index.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,23 +8,23 @@
</button>
</form>
{{#if entries}}
<ul class="entry-list">
{{#each entries}}
<li class="entry">
<h2 class="entry__question">
{{this.question}}
</h2>
<div class="entry__answer">
{{{this.answer}}}
</div>
<div class="entry__help">
{{this.helpful}}/?? people found this helpful. Was this entry helpful?
<button class="button button--small">Yes</button>
<button class="button button--small">No</button>
</div>
</li>
{{/each}}
</ul>
<ul class="entry-list">
{{#each entries}}
<li class="entry">
<h2 class="entry__question">
{{this.question}}
</h2>
<div class="entry__answer">
{{{this.answer}}}
</div>
<div class="entry__help">
<span id="displayCount">{{this.helpful}}</span>/<span id="totalNumber"></span> people found this helpful. Was this entry helpful?
<button id="Button1" class="button button--small">Yes</button>
<button id="Button2" class="button button--small">No</button>
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Button1 and Button2 are bad names for the buttons. Consider using a more descriptive name like button-helpful and button-not-helpful.

</div>
</li>
{{/each}}
</ul>
{{/if}}
<div class="add">
<p class="add__prompt">Still haven't found your answer? Why not ask a question?</p>
Expand Down
1 change: 1 addition & 0 deletions views/layout.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,5 +14,6 @@
</header>
{{{body}}}
</div>
<script src="/main.js"></script>
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The indentation doesn't look right here. Try formatting the document.

</body>
</html>