I want to shorten some API titles depending on the size of the screen. So I have an onload function to fetch and display the content of the API but I want an onresize function to act live any moment the size of the screen width changes.
window.onload = function displayNews(width){
fetch('some api url')
.then(res => {
return (res.json())
})
.then(function(res) {
let postsArr = res.data.children;
for (let i = 0; i < postsArr.length; i++) {
let currPost = postsArr[i].data;
let currPostTitle = currPost.title;
if (width > 1525) {
currPostTitle = currPostTitle.substring(0, 100) + '…';
} else if (width < 1525 && width > 1090) {
currPostTitle = currPostTitle.substring(0, 20) + '…';
} else if (width < 1090) {
currPostTitle = currPostTitle.substring(0, 200) + '…';
}
let markup =
`
//(Some API display)
Then I created the onresize function that passes the width variable to the onload function
window.onresize = function windowWidth() {
let width = $(window).width();
displayNews(width);
}
But it doesn't work and I don't know where to place the onresize function. I've tried to place it within the onload one but maybe I made a mistake. What do you think?