2
\$\begingroup\$

This code currently works with no errors. I want to know if there is a way to improve its conding structure, as there is a lot of repetition and it looks really bad. I tried an alternative way by using a parameter to handle the type of game, but it broke the code completely.

What would be the best way of making this code shorter or just overall improved?

   $(document).ready(() => { //Make sure the document is done loading
        $.ajax({ //Initialize the ajax object
            url: "data/games.json", //set the target url`
            type: "GET",
            dataType: 'JSON', //set the expected response type
            success: function(response) { //On success we do something
                let data = response;

                let ul1 = $('.ajax')[0];
                let ul2 = $('.ajaxCheck')[0];
                let ul3 =$('.compNew')[0]
                let ul4 = $('.new')[0];

                if (ul1 || ul4) {
                    $(ul1).html(displayOutput(data, false));
                    $(ul4).html(displayNewOutput(data, false));
                } else {
                    $(ul2).html(displayOutputHome(data, true));

                }


                if (ul3) {

                $(ul3).html(displayNewGames(data, true));


                }

            },
            error: function() {
                console.error('Whoops something went wrong...');
            }

        });

    const displayOutput = (games, hasCheckbox) => {


            let output = "";

            games.forEach(game => {


                if (game.Type === "Coming Soon" && game.ID <= 3) {


                    let ratingDiv = $("<div class='rating'></div>");

                    for (var i = 0; i < game.Rating; i++) {
                        ratingDiv.append('<span class="fa fa-star checked"></span>');
                    }
                    for (var i = game.Rating; i < 5; i++) {
                        ratingDiv.append('<span class="fa fa-star"></span>');
                    }

                    output += `

                        <li>

            <li><a href=#><img class="frontGames" src="${game.image}">
                  <p><b>Name:</b>${game.Name}<br>
                    <b>Release Date:</b>${game.ReleaseDate}</br>
                    <b>Genres:</b>${game.Genres}</br>
                    <b>Retail Price:</b>${game.RetailPrice}</br>
                    <b>Rating:</b>${ratingDiv.html()}</br></p></a>

            </li>`;

                }

            })


            return output;

        }


     const displayOutputHome = (games, hasCheckbox) => {




            //console.log(games[2]["Genres"]);
            //let ul = document.getElementById('ajax');
            let output = "";
            var x = 0;
            games.forEach(game => {

                if (game.Type === "Coming Soon") {

                    x++;

                    let ratingDiv = $("<div class='rating'></div>");

                    for (var i = 0; i < game.Rating; i++) {
                        ratingDiv.append('<span class="fa fa-star checked"></span>');
                    }
                    for (var i = game.Rating; i < 5; i++) {
                        ratingDiv.append('<span class="fa fa-star"></span>');
                    }

                    output += `

                        <li>
        <div class=""><input id="togg` + x + `" type="checkbox"><label for="togg` + x + `" class="${hasCheckbox ? 'visible' : 'invisible'}">Compare</label></div></li>
            <li><a href=#><img class="frontGames" src="${game.image}">
                  <p><b>Name:</b>${game.Name}<br>
                    <b>Release Date:</b>${game.ReleaseDate}</br>
                    <b>Genres:</b>${game.Genres}</br>
                    <b>Retail Price:</b>${game.RetailPrice}</br>
                    <b>Rating:</b>${ratingDiv.html()}</br></p></a>

            </li>`;

                }


            })

            return output;

   }
    const displayNewGames = (games, hasCheckbox) => {


        let output = "";


        games.forEach(game => {

            if (game.Type === "New Release") {

                var x = 100;

                x++;


                    let ratingDiv = $("<div class='rating'></div>");

                    for (var i = 0; i < game.Rating; i++) {
                        ratingDiv.append('<span class="fa fa-star checked"></span>');
                    }
                    for (var i = game.Rating; i < 5; i++) {
                        ratingDiv.append('<span class="fa fa-star"></span>');
                    }


                    //return true;

                    output += `

                        <li>
        <div class=""><input id="togg` + x + `" type="checkbox"><label for="togg` + x + `" class="${hasCheckbox ? 'visible' : 'invisible'}">Compare</label></div></li>
            <li><a href=#><img class="frontGames" src="${game.image}">
                  <p><b>Name:</b>${game.Name}<br>
                    <b>Release Date:</b>${game.ReleaseDate}</br>
                    <b>Genres:</b>${game.Genres}</br>
                    <b>Retail Price:</b>${game.RetailPrice}</br>
                    <b>Rating:</b>${ratingDiv.html()}</br></p></a>



            </li>`;

            }


        })

        return output;




    }


    let $compare = $(".visible");
            $compare.on("click", (event) => {
                $(event.currentTarget).text($(event.currentTarget).text() === "Item added" ? "Compare" : "Item added");
            }).on("click", (event) => {
                $(event.currentTarget).addClass("visible");
            })  


    const displayNewOutput = (newReleased, hasCheckbox) => {

        let Newoutput = "";

        newReleased.forEach(game => {

            if (game.Type === "New Release" && game.ID >= 4) {


                let ratingDiv = $("<div class='rating'></div>");

                for (var i = 0; i < game.Rating; i++) {
                    ratingDiv.append('<span class="fa fa-star checked"></span>');
                }
                for (var i = game.Rating; i < 5; i++) {
                    ratingDiv.append('<span class="fa fa-star"></span>');
                }




                Newoutput += `

                        <li>
            <li><a href=#><img class="frontGames" src="${game.image}">
                  <p><b>Name:</b>${game.Name}<br>
                    <b>Release Date:</b>${game.ReleaseDate}</br>
                    <b>Genres:</b>${game.Genres}</br>
                    <b>Retail Price:</b>${game.RetailPrice}</br>
                    <b>Rating:</b> ${ratingDiv.html()}</br></p></a>
            </li>`;


            }

        })
        return Newoutput;



    }   


    });
\$\endgroup\$
  • \$\begingroup\$ i think you need to add the game.json too as anyone who would like to re-write the code might need it in running condition. \$\endgroup\$ – Muhammad Omer Aslam Feb 9 '18 at 10:46

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.