Image Sorting With a button function

-2

i have two button function
sort for most like and most recent
This is just simulation, could be hardcoded

how do i link the button with the function.

This is the source code from one of the source.

<!DOCTYPE html>

<html>

<head>

    <title>Test</title>

    <meta charset="UTF-8" />

</head>

<body>

<button onclick="function1">Sort Most Like</button>

<button onclick="function2">Sort Most Recent</button>

    <div id="app"></div>

    <script src="src/index.js">

    </script>

</body>

</html>



<script>







const imgArr = [

  { src: "https://unsplash.it/300/225?image=0", Recent: "24/1/2018", Likes: 6 },

  { src: "https://unsplash.it/300/225?image=0", Recent: "24/3/2018", Likes: 2 },

  { src: "https://unsplash.it/300/225?image=0", Recent: "25/1/2018", Likes: 3 },

  { src: "https://unsplash.it/300/225?image=0", Recent: "24/2/2018", Likes: 1 },

];



const html = imgArr.sort((a, b) => {

return a.Likes + b.Likes

}).map(imageItem => {

  return `<figure class="einzel"><img alt="Mitglieder" src=${

    imageItem.src

  } style="width: 315px; height: 250px;">

      <figcaption>Name: ${imageItem.Name}<br>

        <span>Likes: ${imageItem.Likes}</span></figcaption>

  </figure>`;

});





document.getElementById("app").innerHTML = html;







</script>

asked Nov 28 '18 at 5:15

masvidal

186

Give function implementation inside <script> tags. eg: <script type="text/javascript">function function1(){ /* your code here */}</script>

– Vasanthi GV
Nov 28 '18 at 6:10

add a comment |

-2

i have two button function
sort for most like and most recent
This is just simulation, could be hardcoded

how do i link the button with the function.

This is the source code from one of the source.

<!DOCTYPE html>

<html>

<head>

    <title>Test</title>

    <meta charset="UTF-8" />

</head>

<body>

<button onclick="function1">Sort Most Like</button>

<button onclick="function2">Sort Most Recent</button>

    <div id="app"></div>

    <script src="src/index.js">

    </script>

</body>

</html>



<script>







const imgArr = [

  { src: "https://unsplash.it/300/225?image=0", Recent: "24/1/2018", Likes: 6 },

  { src: "https://unsplash.it/300/225?image=0", Recent: "24/3/2018", Likes: 2 },

  { src: "https://unsplash.it/300/225?image=0", Recent: "25/1/2018", Likes: 3 },

  { src: "https://unsplash.it/300/225?image=0", Recent: "24/2/2018", Likes: 1 },

];



const html = imgArr.sort((a, b) => {

return a.Likes + b.Likes

}).map(imageItem => {

  return `<figure class="einzel"><img alt="Mitglieder" src=${

    imageItem.src

  } style="width: 315px; height: 250px;">

      <figcaption>Name: ${imageItem.Name}<br>

        <span>Likes: ${imageItem.Likes}</span></figcaption>

  </figure>`;

});





document.getElementById("app").innerHTML = html;







</script>

asked Nov 28 '18 at 5:15

masvidal

186

Give function implementation inside <script> tags. eg: <script type="text/javascript">function function1(){ /* your code here */}</script>

– Vasanthi GV
Nov 28 '18 at 6:10

add a comment |

-2

i have two button function
sort for most like and most recent
This is just simulation, could be hardcoded

how do i link the button with the function.

This is the source code from one of the source.

<!DOCTYPE html>

<html>

<head>

    <title>Test</title>

    <meta charset="UTF-8" />

</head>

<body>

<button onclick="function1">Sort Most Like</button>

<button onclick="function2">Sort Most Recent</button>

    <div id="app"></div>

    <script src="src/index.js">

    </script>

</body>

</html>



<script>







const imgArr = [

  { src: "https://unsplash.it/300/225?image=0", Recent: "24/1/2018", Likes: 6 },

  { src: "https://unsplash.it/300/225?image=0", Recent: "24/3/2018", Likes: 2 },

  { src: "https://unsplash.it/300/225?image=0", Recent: "25/1/2018", Likes: 3 },

  { src: "https://unsplash.it/300/225?image=0", Recent: "24/2/2018", Likes: 1 },

];



const html = imgArr.sort((a, b) => {

return a.Likes + b.Likes

}).map(imageItem => {

  return `<figure class="einzel"><img alt="Mitglieder" src=${

    imageItem.src

  } style="width: 315px; height: 250px;">

      <figcaption>Name: ${imageItem.Name}<br>

        <span>Likes: ${imageItem.Likes}</span></figcaption>

  </figure>`;

});





document.getElementById("app").innerHTML = html;







</script>

asked Nov 28 '18 at 5:15

masvidal

186

i have two button function
sort for most like and most recent
This is just simulation, could be hardcoded

how do i link the button with the function.

This is the source code from one of the source.

<!DOCTYPE html>

<html>

<head>

    <title>Test</title>

    <meta charset="UTF-8" />

</head>

<body>

<button onclick="function1">Sort Most Like</button>

<button onclick="function2">Sort Most Recent</button>

    <div id="app"></div>

    <script src="src/index.js">

    </script>

</body>

</html>



<script>







const imgArr = [

  { src: "https://unsplash.it/300/225?image=0", Recent: "24/1/2018", Likes: 6 },

  { src: "https://unsplash.it/300/225?image=0", Recent: "24/3/2018", Likes: 2 },

  { src: "https://unsplash.it/300/225?image=0", Recent: "25/1/2018", Likes: 3 },

  { src: "https://unsplash.it/300/225?image=0", Recent: "24/2/2018", Likes: 1 },

];



const html = imgArr.sort((a, b) => {

return a.Likes + b.Likes

}).map(imageItem => {

  return `<figure class="einzel"><img alt="Mitglieder" src=${

    imageItem.src

  } style="width: 315px; height: 250px;">

      <figcaption>Name: ${imageItem.Name}<br>

        <span>Likes: ${imageItem.Likes}</span></figcaption>

  </figure>`;

});





document.getElementById("app").innerHTML = html;







</script>

javascript html css

asked Nov 28 '18 at 5:15

masvidal

186

asked Nov 28 '18 at 5:15

masvidal

186

asked Nov 28 '18 at 5:15

masvidal

186

asked Nov 28 '18 at 5:15

masvidal

186

asked Nov 28 '18 at 5:15

masvidal

186

Give function implementation inside <script> tags. eg: <script type="text/javascript">function function1(){ /* your code here */}</script>

– Vasanthi GV
Nov 28 '18 at 6:10

add a comment |

Give function implementation inside <script> tags. eg: <script type="text/javascript">function function1(){ /* your code here */}</script>

– Vasanthi GV
Nov 28 '18 at 6:10

Give function implementation inside <script> tags. eg: <script type="text/javascript">function function1(){ /* your code here */}</script>

– Vasanthi GV
Nov 28 '18 at 6:10

add a comment |

1 Answer
1

active

oldest

votes

The code below includes the function to sort the entries by likes in ascending order.

const imgArr = [{

    src: "https://unsplash.it/300/225?image=0",

    Recent: "24/1/2018",

    Likes: 6

  },

  {

    src: "https://unsplash.it/300/225?image=0",

    Recent: "24/3/2018",

    Likes: 2

  },

  {

    src: "https://unsplash.it/300/225?image=0",

    Recent: "25/1/2018",

    Likes: 3

  },

  {

    src: "https://unsplash.it/300/225?image=0",

    Recent: "24/2/2018",

    Likes: 1

  },

];



/* Gemeric function to display array content on screen */

const init = (ar) => ar.map(el => {

  return `<figure class="einzel"><img alt="Mitglieder" src=${

    el.src

  } style="width: 315px; height: 250px;">

      <figcaption>Recent: ${el.Recent}<br>

        <span>Likes: ${el.Likes}</span></figcaption>

  </figure>`;

});



const sortByLikes = (a, b) => {

  if (a.Likes === b.Likes) {

    return 0;

  }

  return a.Likes > b.Likes ? 1 : -1;

};



/* Generate array sorted by number of likes ascending */

const function1 = () => {

  document.getElementById("app").innerHTML = init([...imgArr].sort(sortByLikes));

}



document.getElementById("app").innerHTML = init(imgArr);

<button onclick="function1()">Sort Most Like</button>

<button onclick="function2">Sort Most Recent</button>

<div id="app"></div>

answered Nov 28 '18 at 6:40

Gerard

11.1k41940

thanks it works like a charm. how do i store inside an object instead of hardcode?. i am using pug format btw.

– masvidal
Nov 30 '18 at 7:00

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53512577%2fimage-sorting-with-a-button-function%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

The code below includes the function to sort the entries by likes in ascending order.

const imgArr = [{

    src: "https://unsplash.it/300/225?image=0",

    Recent: "24/1/2018",

    Likes: 6

  },

  {

    src: "https://unsplash.it/300/225?image=0",

    Recent: "24/3/2018",

    Likes: 2

  },

  {

    src: "https://unsplash.it/300/225?image=0",

    Recent: "25/1/2018",

    Likes: 3

  },

  {

    src: "https://unsplash.it/300/225?image=0",

    Recent: "24/2/2018",

    Likes: 1

  },

];



/* Gemeric function to display array content on screen */

const init = (ar) => ar.map(el => {

  return `<figure class="einzel"><img alt="Mitglieder" src=${

    el.src

  } style="width: 315px; height: 250px;">

      <figcaption>Recent: ${el.Recent}<br>

        <span>Likes: ${el.Likes}</span></figcaption>

  </figure>`;

});



const sortByLikes = (a, b) => {

  if (a.Likes === b.Likes) {

    return 0;

  }

  return a.Likes > b.Likes ? 1 : -1;

};



/* Generate array sorted by number of likes ascending */

const function1 = () => {

  document.getElementById("app").innerHTML = init([...imgArr].sort(sortByLikes));

}



document.getElementById("app").innerHTML = init(imgArr);

<button onclick="function1()">Sort Most Like</button>

<button onclick="function2">Sort Most Recent</button>

<div id="app"></div>

answered Nov 28 '18 at 6:40

Gerard

11.1k41940

thanks it works like a charm. how do i store inside an object instead of hardcode?. i am using pug format btw.

– masvidal
Nov 30 '18 at 7:00

add a comment |

The code below includes the function to sort the entries by likes in ascending order.

const imgArr = [{

    src: "https://unsplash.it/300/225?image=0",

    Recent: "24/1/2018",

    Likes: 6

  },

  {

    src: "https://unsplash.it/300/225?image=0",

    Recent: "24/3/2018",

    Likes: 2

  },

  {

    src: "https://unsplash.it/300/225?image=0",

    Recent: "25/1/2018",

    Likes: 3

  },

  {

    src: "https://unsplash.it/300/225?image=0",

    Recent: "24/2/2018",

    Likes: 1

  },

];



/* Gemeric function to display array content on screen */

const init = (ar) => ar.map(el => {

  return `<figure class="einzel"><img alt="Mitglieder" src=${

    el.src

  } style="width: 315px; height: 250px;">

      <figcaption>Recent: ${el.Recent}<br>

        <span>Likes: ${el.Likes}</span></figcaption>

  </figure>`;

});



const sortByLikes = (a, b) => {

  if (a.Likes === b.Likes) {

    return 0;

  }

  return a.Likes > b.Likes ? 1 : -1;

};



/* Generate array sorted by number of likes ascending */

const function1 = () => {

  document.getElementById("app").innerHTML = init([...imgArr].sort(sortByLikes));

}



document.getElementById("app").innerHTML = init(imgArr);

<button onclick="function1()">Sort Most Like</button>

<button onclick="function2">Sort Most Recent</button>

<div id="app"></div>

answered Nov 28 '18 at 6:40

Gerard

11.1k41940

thanks it works like a charm. how do i store inside an object instead of hardcode?. i am using pug format btw.

– masvidal
Nov 30 '18 at 7:00

add a comment |

The code below includes the function to sort the entries by likes in ascending order.

const imgArr = [{

    src: "https://unsplash.it/300/225?image=0",

    Recent: "24/1/2018",

    Likes: 6

  },

  {

    src: "https://unsplash.it/300/225?image=0",

    Recent: "24/3/2018",

    Likes: 2

  },

  {

    src: "https://unsplash.it/300/225?image=0",

    Recent: "25/1/2018",

    Likes: 3

  },

  {

    src: "https://unsplash.it/300/225?image=0",

    Recent: "24/2/2018",

    Likes: 1

  },

];



/* Gemeric function to display array content on screen */

const init = (ar) => ar.map(el => {

  return `<figure class="einzel"><img alt="Mitglieder" src=${

    el.src

  } style="width: 315px; height: 250px;">

      <figcaption>Recent: ${el.Recent}<br>

        <span>Likes: ${el.Likes}</span></figcaption>

  </figure>`;

});



const sortByLikes = (a, b) => {

  if (a.Likes === b.Likes) {

    return 0;

  }

  return a.Likes > b.Likes ? 1 : -1;

};



/* Generate array sorted by number of likes ascending */

const function1 = () => {

  document.getElementById("app").innerHTML = init([...imgArr].sort(sortByLikes));

}



document.getElementById("app").innerHTML = init(imgArr);

<button onclick="function1()">Sort Most Like</button>

<button onclick="function2">Sort Most Recent</button>

<div id="app"></div>

answered Nov 28 '18 at 6:40

Gerard

11.1k41940

The code below includes the function to sort the entries by likes in ascending order.

const imgArr = [{

    src: "https://unsplash.it/300/225?image=0",

    Recent: "24/1/2018",

    Likes: 6

  },

  {

    src: "https://unsplash.it/300/225?image=0",

    Recent: "24/3/2018",

    Likes: 2

  },

  {

    src: "https://unsplash.it/300/225?image=0",

    Recent: "25/1/2018",

    Likes: 3

  },

  {

    src: "https://unsplash.it/300/225?image=0",

    Recent: "24/2/2018",

    Likes: 1

  },

];



/* Gemeric function to display array content on screen */

const init = (ar) => ar.map(el => {

  return `<figure class="einzel"><img alt="Mitglieder" src=${

    el.src

  } style="width: 315px; height: 250px;">

      <figcaption>Recent: ${el.Recent}<br>

        <span>Likes: ${el.Likes}</span></figcaption>

  </figure>`;

});



const sortByLikes = (a, b) => {

  if (a.Likes === b.Likes) {

    return 0;

  }

  return a.Likes > b.Likes ? 1 : -1;

};



/* Generate array sorted by number of likes ascending */

const function1 = () => {

  document.getElementById("app").innerHTML = init([...imgArr].sort(sortByLikes));

}



document.getElementById("app").innerHTML = init(imgArr);

<button onclick="function1()">Sort Most Like</button>

<button onclick="function2">Sort Most Recent</button>

<div id="app"></div>

const imgArr = [{

    src: "https://unsplash.it/300/225?image=0",

    Recent: "24/1/2018",

    Likes: 6

  },

  {

    src: "https://unsplash.it/300/225?image=0",

    Recent: "24/3/2018",

    Likes: 2

  },

  {

    src: "https://unsplash.it/300/225?image=0",

    Recent: "25/1/2018",

    Likes: 3

  },

  {

    src: "https://unsplash.it/300/225?image=0",

    Recent: "24/2/2018",

    Likes: 1

  },

];



/* Gemeric function to display array content on screen */

const init = (ar) => ar.map(el => {

  return `<figure class="einzel"><img alt="Mitglieder" src=${

    el.src

  } style="width: 315px; height: 250px;">

      <figcaption>Recent: ${el.Recent}<br>

        <span>Likes: ${el.Likes}</span></figcaption>

  </figure>`;

});



const sortByLikes = (a, b) => {

  if (a.Likes === b.Likes) {

    return 0;

  }

  return a.Likes > b.Likes ? 1 : -1;

};



/* Generate array sorted by number of likes ascending */

const function1 = () => {

  document.getElementById("app").innerHTML = init([...imgArr].sort(sortByLikes));

}



document.getElementById("app").innerHTML = init(imgArr);

<button onclick="function1()">Sort Most Like</button>

<button onclick="function2">Sort Most Recent</button>

<div id="app"></div>

const imgArr = [{

    src: "https://unsplash.it/300/225?image=0",

    Recent: "24/1/2018",

    Likes: 6

  },

  {

    src: "https://unsplash.it/300/225?image=0",

    Recent: "24/3/2018",

    Likes: 2

  },

  {

    src: "https://unsplash.it/300/225?image=0",

    Recent: "25/1/2018",

    Likes: 3

  },

  {

    src: "https://unsplash.it/300/225?image=0",

    Recent: "24/2/2018",

    Likes: 1

  },

];



/* Gemeric function to display array content on screen */

const init = (ar) => ar.map(el => {

  return `<figure class="einzel"><img alt="Mitglieder" src=${

    el.src

  } style="width: 315px; height: 250px;">

      <figcaption>Recent: ${el.Recent}<br>

        <span>Likes: ${el.Likes}</span></figcaption>

  </figure>`;

});



const sortByLikes = (a, b) => {

  if (a.Likes === b.Likes) {

    return 0;

  }

  return a.Likes > b.Likes ? 1 : -1;

};



/* Generate array sorted by number of likes ascending */

const function1 = () => {

  document.getElementById("app").innerHTML = init([...imgArr].sort(sortByLikes));

}



document.getElementById("app").innerHTML = init(imgArr);

<button onclick="function1()">Sort Most Like</button>

<button onclick="function2">Sort Most Recent</button>

<div id="app"></div>

answered Nov 28 '18 at 6:40

Gerard

11.1k41940

answered Nov 28 '18 at 6:40

Gerard

11.1k41940

answered Nov 28 '18 at 6:40

Gerard

11.1k41940

answered Nov 28 '18 at 6:40

Gerard

11.1k41940

thanks it works like a charm. how do i store inside an object instead of hardcode?. i am using pug format btw.

– masvidal
Nov 30 '18 at 7:00

add a comment |

thanks it works like a charm. how do i store inside an object instead of hardcode?. i am using pug format btw.

– masvidal
Nov 30 '18 at 7:00

thanks it works like a charm. how do i store inside an object instead of hardcode?. i am using pug format btw.

– masvidal
Nov 30 '18 at 7:00

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Btukfyl