I have the following mockup:
Until now, I managed to do the following which is pretty close: https://codesandbox.io/s/codepen-with-react-forked-16t6rv?file=/src/components/TrendingNFTs.js
I have the following problems that I'm trying to tackle:
When pressing the next and previous buttons, the component seems to reset, what I want is to stop there in case the element is the last on the list
I'm find the progress bar below the cards with the arrows hard to implement and I want to ask if you guys have ever seems something that comes close to this.
Thanks in advance, if something is willing to help me with some ideas at least.
You can take let count = 0 at the start and update rest of the code as
const shiftPrev = (copy) => {
let lastcard = copy.pop();
if (count > 0) {
copy.splice(0, 0, lastcard);
setCarouselItems(copy);
}
};
const shiftNext = (copy) => {
let firstcard = copy.shift();
if (count < copy.length) {
copy.splice(copy.length, 0, firstcard);
setCarouselItems(copy);
}
};
The logic is you take the initial count (you can also keep your count in state but on setState it will re-render which might cause performance issue later)
Also, please consider adding css and the initial card its displaying on UI and set your start/end count accordingly.
Related
I have a timeline where I have nodes one after another like A-B-C-D-E. If a user moves for example the B node to the right, all the other nodes have to move accordingly, to prevent overlapping and have the right order. I do this with the onMoving : function. This is working on the code side, however the changes are only visible if I either move the timeline in any direction or zoom in or out. It seems like the direct update is missing, because after moving or zooming, all the nodes are at their correct spots. So the data/model is updated correctly but the changes are only visible in the timeline after zooming or moving.
I tried inserting a timeline.redraw() into the onMoving function and I tried redrawing in the items.on('update', function). I also tried using the itemsData.update() function mentioned in another SO answer (see the commented out code line below), nothing seems to work.
The strange thing is that it IS updating BUT only after moving or zooming once.
Here is my full code for both of the functions/event handlers:
onMoving : function (item, callback) {
let nodes = viewModelCutover.timeline.timelineObject.itemSet.items;
let node = nodes[item.id];
let distanceMoved = node.data.start.valueOf() - item.start.valueOf()
for (let nodeObject in nodes) {
nodes[nodeObject]["data"]["start"] = new Date(nodes[nodeObject]["data"]["start"].valueOf() - distanceMoved);
if (nodes[nodeObject]["data"]["end"]) {
nodes[nodeObject]["data"]["end"] = new Date(nodes[nodeObject]["data"]["end"].valueOf() - distanceMoved);
}
//viewModelCutover.timeline.timelineObject.itemSet.itemsData.update(nodes[nodeObject]);
}
//viewModelCutover.timeline.timelineObject.redraw()
callback(item); // send back adjusted item
}
...
items.on('update', function (event, properties) {
viewModelCutover.timeline.timelineObject.redraw();
});
Maybe someone has an idea on what I am missing here or doing wrong.
Thanks in advance!
I found the problem:
let nodes = viewModelCutover.timeline.timelineObject.itemSet.items;
This call was not referencing to the original object which was created with the vis.DataSet constructor but rather the same content as a regular array.
I am writing some javascript code to create a flashcard system. In this system, a flashcard is displayed to the user and he decides whether the card is difficult or easy. In this way, each card is sorted into two different groups that will be used later. For the following code, arr is the flashcard list while the difficultList and easyList are the two lists. I have also used jquery to run a function according to the class. So, if the button with difficult flashcard is clicked, difficultList is changed. Do note that as of now, the end() function simply logs 'END' to the console. Finally, the text variable used in nothing but an HTML element with id of text whose value is changed to display the question.
function mainFunc() {
if (indexVal > arr.length) {
end();
} else {
console.log(indexVal);
text.innerHTML = arr[indexVal][0];
$(".difficult").click(function () {
indexVal += 1;
difficultList.push(arr[indexVal]);
mainFunc();
})
$(".easy").click(function () {
indexVal += 1;
mainFunc();
easyList.push(arr[indexVal]);
})
}
}
mainFunc();
When the code runs for the first time, everything works fine. But when I click on any of the buttons during second flashcard, an error occurs and the value of indexVal increases by 2 instead of 1, causing some unexpected behaviour. I have made several attempts in debugging the code but to no avail. Any help would be greatly appreciated (the problem with the code, a new solution etc). Thank you!
I am trying to create a multiple items per slide carousel that i need to change the number of items per slide with different screen breakpoints.
For example, i want to show 4 items per slide when window width is bigger than 1200px, 3 between (992px - 1200px), 2 between (768 - 992px) and 1 for smaller screens.
The idea that i got in my mind is to make an event that change a state when a certain breakpoint reached:
state: {
itemsNum: 1
}
const createSlides = () => {
let slides = [];
let itemsNum = this.state.itemsNum;
for (let i = 0; i < products.length ; i = i + itemsNum) {
slides.push(products.slice(i, i + itemsNum))
}
return slides;
}
const slides = createSlides ();
slides.map (........)// rendering the items in the slide
This is just the incomplete idea in my mind, but i need the complete solution that make this idea work successfully.
What is the better way to achieve that in the term of react??
You can use window.onresize.
window.onresize = function(event) {
... };
Well, to talk about my opinion, you can use "event handlers".
Like this: window.addEventListener('onresize', createSlides)
As the time goes, I didn't complete the whole things through, but if you want to know more about this or you are interested in this method, I can tell you the exact method.
I'm trying to solve 2 problems with this project:
Flip the cards back when no match is made.
Once the randomization occurs, allow the user to briefly show all the randomized cards for x seconds before the game timer commences.
At one point I was able to flip the unmatched cards, but I lost that ability whilst trying to sort out problem #2.
For #1 I first declared a variable:
const pix = document.querySelectorAll('.card img');
Then I did an if/else to hide unmatched:
function checkForMatch() {
if (
toggledCards[0].firstElementChild.className === toggledCards[1].firstElementChild.className) {
toggledCards[0].classList.toggle('match');
toggledCards[1].classList.toggle('match');
toggledCards = [];
matched++;
} else {
setTimeout(() => {
toggleCard(toggledCards[0]);
toggleCard(toggledCards[1]);
toggledCards = [];
// Trying to hide unmatchaed cards here
pix.style.display = "none";
}, 1000);
}
};
That fails and I cannot figure out why.
As Sheng Slogar have mentioned, You don't have class names on your img tags so it doesn't work. I added some to check and it was working, so just add classes with numbers to images and it will work properly :)
I also recommend to use data attributes for this kind of functionality as it's exactly what they are made for.
I have this simple "pagination" counter which is fetching the next page from an API. It works fine but the problem is that whenever I change category (movies or series) the counter obviously doesn't reset so instead of fetching the first page of the new category it continues from the number it left off.
I tried numerous conditional combinations but nothing really worked so far. I'm sure it's not that hard to solve I just can't think of the right logic to use.
let page = 1;
document.getElementById('load-more').addEventListener('click', () => {
page++;
const movies = document.getElementById('movies');
const series = document.getElementById('series');
if(movies.classList.contains('active-link')) {
getMovies(page);
} else if (series.classList.contains('active-link')) {
getSeries(page);
}
})
Reseting the let counter inside the if..else doesn't really work because every time I click the load more button it resets it back to page 1.
Use separate variables for the current movies page and the current series page. Also note that you can simplify your logic by using a single querySelector instead of selections followed by classList.contains:
let moviesPage = 1;
let seriesPage = 1;
document.getElementById('load-more').addEventListener('click', () => {
if (document.querySelector('#movies.active-link')) {
moviesPage++;
getMovies(moviesPage);
} else if (document.querySelector('#series.active-link')) {
seriesPage++;
getSeries(seriesPage);
}
});
Set another event listener for the click on your #movies and #series link,
and set the page variable to 1 at this place.
That would be the usual behavior when switching lists, one usually see a reset of paging.