3
\$\begingroup\$

This is one part of my website, it fetches a list of habits from my Restful API.
Each description of habit in list gets append to a list item in the HTML. During this loop, a event click listener is attached to each description.

After that, a page navigation will get created.
I made it so that every page will only display 4 habits, clicking another page number will display the associated 4 habits. I'm doing this by jQuery's Toggle.

I'm also using foundation with this.

The code works perfectly, but is extremely unstructured and has no design pattern. I feel that as I add more event listeners and functions, this will become more of a mess.

How should I approach this? How bad will this be if I need more event listeners and functions to this page of the website?

Should I be using a framework such as Backbone or React?

Part of the reason for this project is to become a better programmer and display my skills for future employers. However I'm not sure where I should invest my time. Would using framework for this just be overcomplicating the situation?

//namespace
var habitUserData={};
habitUserData.currentPage = 1;


$(document).ready(function(){
    $("#in").click(function(){

        $.get("/health1/server/habit/user", {userid:"123"} ,function(data){
                var temp;
                data = JSON.parse(data);
                habitUserData.data = data;
                habitUserData.pageAmount = Math.ceil(data.length/4);


                ///creating the habit list for page1
                for(var i = 0; i <= data.length-1; i++){
                    console.log(data[i]);

          if (i <= 3){ //only display four of the habits, the rest attach it to Dom but display:none
            $("<li id = habit" + i + " > " + data[i].description + " </li>").insertBefore($("#add_more"));
          }else{
            $("<li id = habit" + i + " style = display:none;> "+ data[i].description + " </li>").insertBefore($("#add_more"));

          }

          (function(n){
                        $("#habit"+n).click(function(){
                            $(this).css({
                                    "font-style": "italic",
                                    "font-weight": "bolder"
                            });
                        });
                    })(i);
        }

                //creating page navigation
                temp = $("#page_nav ul .pagination-next");
                $("<li class='current' id = 'page1' ><a href='#'>1</a></li>").insertBefore(temp);

                $("#page1").click(function(){

              toggleHabit(habitUserData.currentPage);
              $("#page" + habitUserData.currentPage).removeClass('current');
                            habitUserData.currentPage = 1; //the new current page
                            $(this).addClass('current');
                            $(".pagination-previous").addClass("disabled");
                            $(".pagination-previous").html("Previous");
              toggleHabit(habitUserData.currentPage);


                })

                if (habitUserData.pageAmount > 0){
                    for (i=2; i <= habitUserData.pageAmount; i++){

                        $("<li id = 'page" + i +"'><a href='#'>" + i +"</a></li>").insertBefore(temp);

                        (function(n){


                            $("#page" +n).click(function(){

                toggleHabit(habitUserData.currentPage);

                            $("#page" + habitUserData.currentPage).removeClass('current');
                            habitUserData.currentPage = n; //the new current page
                            $(this).addClass('current');
                            $(".pagination-previous").removeClass("disabled");
                            $(".pagination-previous").html("<a href='#'>Previous</a>");
                            toggleHabit(habitUserData.currentPage);
                            });

                        })(i);
                    }

                }


        });
    });


  function toggleHabit(currentPage){
    var start = (currentPage-1 )* 4;
    var end = start+3;
    for (var i = start; i <= end; i++){
        $("#habit"+i).toggle("slow");
    }
  }


    $("#add_more").leanModal({ top : 200, overlay : 0.8, closeButton: ".modal_close" });



    $("#add_more").one('click', function(){
        window.setTimeout(function(){
            $("#instruction_header").fadeTo(1000, 1);

            window.setTimeout(function(){
                $("#habit_input_body").append("<p>Let's fill out a habit description first</p>");
            }, 1000);
        }, 500);

    });


});
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.