www.webdeveloper.com
Results 1 to 7 of 7

Thread: Need help with a small project!

Hybrid View

  1. #1
    Join Date
    May 2012
    Posts
    3

    Question Need help with a small project!

    Hi, I am building a small site for fun, and I want to put a list on it. For every file or element in the list, I want to have two buttons. One to upvote that particular element, and one to downvote. Each element will be put in order on the list from highest number of upvotes to lowest, and I don't want any users to be able to vote more than once on each element. Does anyone know how to do this? The list should be able to display the number of votes each element has next to it. THANK YOU IN ADVANCE!

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,377
    Show some sample code for the layout of the problem.
    If this is for fun, then let's see the amusing part.

  3. #3
    Join Date
    May 2012
    Posts
    3
    It's so I can have polls on different stuff that update immediately on refresh, and though there's no function in this code, it kind of shows the layout:

    <html>

    <body>

    <table border=1>
    <tbody>
    <tr>
    <td>Dog</td>
    <td>31 Vote(s)</td>
    <td><input type="button" value="Vote Up!" /></td>
    <td><input type="button" value="Vote Down!" /></td>
    </tr>
    <tr>
    <td>Cat</td>
    <td>26 Vote(s)</td>
    <td><input type="button" value="Vote Up!" /></td>
    <td><input type="button" value="Vote Down!" /></td>
    </tr>
    <tr>
    <td>Fish</td>
    <td>18 Vote(s)</td>
    <td><input type="button" value="Vote Up!" /></td>
    <td><input type="button" value="Vote Down!" /></td>
    </tr>
    <tr>
    <td>Guinea Pig</td>
    <td>13 Vote(s)</td>
    <td><input type="button" value="Vote Up!" /></td>
    <td><input type="button" value="Vote Down!" /></td>
    </tr>
    <tr>
    <td>Gerbil</td>
    <td>8 Vote(s)</td>
    <td><input type="button" value="Vote Up!" /></td>
    <td><input type="button" value="Vote Down!" /></td>
    </tr>
    <tr>
    <td>Bird</td>
    <td>1 Vote(s)</td>
    <td><input type="button" value="Vote Up!" /></td>
    <td><input type="button" value="Vote Down!" /></td>
    </tr>
    </tbody>
    </table>

    </body>

    </html>


    Obviously there's zero function in that script, it's just a table to demonstrate the layout a little more effectively. I think I can write the voting part and layout of the page, but I wouldn't know how to make the list order itself from high votes to low votes. Thanks a lot for the reply!

  4. #4
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    php + mysql is what you need buddy
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  5. #5
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,377

    Something to consider ...

    This might be a start for your project.

    Note that JS limitations involve the inability to load/store a database. For this you will need some server-side code.
    You might be able to use AJAX to read the text file (to create the 'voteResults' array)
    but there is only limited storage ability in MSIE and none at all in the other browsers.

    Code:
    <!DOCTYPE html>
    <!-- From: http://www.webdeveloper.com/forum/showthread.php?p=1205406#post1205406 -->
    <html>
    <script type="text/javascript">
    var voteResults = [
      ['Dog',31],
      ['Cat',26],
      ['Fish',18],
      ['Guinea Pig',13],
      ['Gerbil',8],
      ['Bird',1],
    ];
    function addVote(UpDown,ptr) {
      if (UpDown) { voteResults[ptr][1]++; }
             else { voteResults[ptr][1]--; }
      makeVoteTable();
    }
    function makeVoteTable() {
      var str = '';
      str += '<table border="1"><tbody>';
      for (var i=0; i<voteResults.length; i++) {
        str += '<tr>';
        str += '<th>'+voteResults[i][0]+'</th>';
        str += '<th>'+voteResults[i][1]+'</th>';
        str += '<td><input type="button" value="Vote Up!" onclick="addVote(true,'+i+')" /></td>';
        str += '<td><input type="button" value="Vote Down!" onclick="addVote(false,'+i+')" /></td>';
        str += '</tr>';
      }
      str += '</tbody></table>';
      document.getElementById('voteTable').innerHTML = str;
    }
    window.onload = function() { makeVoteTable(); }
    </script>
    
    <body>
    <div id="voteTable"></div>
    </body>
    </html>
    Note: You should enclose your script between [ code] and [ /code] tags (without the spaces)
    to make it easier for viewers to see, copy, test, etc. you code.

  6. #6
    Join Date
    May 2012
    Posts
    3

    That's a great start

    That table works very well and is exactly what I was looking for in the layout of the page, just a simple table.

    However, in order for the page to save votes of users and display them on site load, what would be the best tool? For example, if "Bird" got votes, when it is reloaded, it shows 5 votes. Also, do you think I should add a log in script with sql to prevent people from voting twice on the same one? This way I could make it so only logged in users can vote. Thanks for the initial layout code, by the way.

  7. #7
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,377

    Exclamation

    Post #5 is what you need
    But I know very little about either one of them.

    Sorry

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles