Discussion on Slideshow Challenge

Sort by

recency

|

31 Discussions

|

2 weeks ago+ 0 comments

Here is a basic Javascript project for practice Stopwatch code in Javascript

3 weeks ago+ 1 comment

Here is the cleaned up solution:

import React, { useEffect, useState } from "react";

function Slides({ slides }) {
  const [index, setIndex] = useState(0);
  const [disableRestart, setDisableRestart] = useState(true);
  const [disableNext, setDisableNext] = useState(false);
  const [disablePrev, setDisablePrev] = useState(true);

  const slidesLength = slides?.length - 1;

  const slideTitle = slides?.[index]?.title;
  const slideText = slides?.[index]?.text;

 useEffect(() => {
  setDisableRestart(index === 0);
  setDisablePrev(index === 0);
  setDisableNext(index === slidesLength);
}, [index, slidesLength]);


  const handleRestart = () => {
    if (index > 0) {
      setIndex(0)
    }
  }

  const handleNextSlide = () => {
    if (index < slidesLength) {
      setIndex(prev => prev + 1)
    }
  }

  const handlePrevSlide = () => {
    if (index <= slidesLength && index !== 0) {
      setIndex(prev => prev - 1)
    }
  }

  return (
    <div>
      <div id="navigation" className="text-center">
        <button data-testid="button-restart" className="small outlined" onClick={() => handleRestart()} disabled={disableRestart}>
          Restart
        </button>
        <button data-testid="button-prev" className="small" onClick={() => handlePrevSlide()} disabled={disablePrev}>
          Prev
        </button>
        <button data-testid="button-next" className="small" onClick={() => handleNextSlide()} disabled={disableNext}>
          Next
        </button>
      </div>
      <div id="slide" className="card text-center">
        <h1 data-testid="title">{slideTitle}</h1>
        <p data-testid="text">{slideText}</p>
      </div>
    </div>
  );
}

export default Slides;

View Thread

3 weeks ago+ 0 comments

Functionality is working as expected but still test cses are failing due to it is not using waitFor, screen and also async await is not being used.

4 weeks ago+ 0 comments

Error line reported does not point to the actual error.

import React from "react";

function Slides({ slides }) {

  const [slide, setSlide] = React.useState(0);
  const handleNext = () => {
    setSlide(slide+1)
  }
  const handlePrev = () => {
    setSlide(slide-1)
  }
  const handleRestart = () => {
    setSlide(0)
  }
  const hasNext = slide < 4
  const hasPrev = slide > 0
  const canRestart = slide>0

  return (
    <div>
      <div id="navigation" className="text-center">
        <button data-testid="button-restart" className="small outlined" onClick={handleRestart} disabled={!canRestart}>
          Restart
        </button>
        <button data-testid="button-prev" className="small" onClick={handlePrev} disabled={!hasPrev}>
          Prev
        </button>
        <button data-testid="button-next" className="small"
        onClick={handleNext} disabled={!hasNext}>
          Next
        </button>
      </div>
      <div id="slide" className="card text-center">
        <h1 data-testid="title">{slides[slide].title}</h1>
        <p data-testid="text">{slides[slide].text}</p>
      </div>
    </div>
  );
}

export default Slides;

1 month ago+ 0 comments

My Solution:

import React, { useState, } from "react";

function Slides({ slides }) {

const [currentIndex, setCurrentIndex] = useState(0);

const goToNext = () => { if (currentIndex < slides.length - 1) { setCurrentIndex(currentIndex + 1); } };

const goToPrev = () => { if (currentIndex > 0) { setCurrentIndex(currentIndex - 1); } };

const restart = () => { setCurrentIndex(0); };

return ( Restart Prev Next {slides[currentIndex].title} {slides[currentIndex].text}

); }

export default Slides;

Sort by

|

31 Discussions

|

Cookie support is required to access HackerRank

Please signup or login in order to view this challenge