Fix this error jquery - create same div dynamically

Hi,
My goal in this project is to switch “card testimonial” with another card through an image showing a right arrow.
I used Bootstrap and I found that i need to use JQuery to create this event .

This is my code that I created:

$(document).ready(function(){



  $('#arrow-right').click(function(){

    $('col-switch').append('  <img src="images/pattern-quotes.svg" id="img-quote">' +
                           '<p id="quote-testimonial">“If you want to lay the best foundation possible I’d recommend taking this course.
                             + "The depth the instructors go into is incredible. I now feel so confident about"
                             + "starting up as a professional developer. ”</p>'
                             + '<p id="fullname-testimonial">  John Tarkpor <span id="job-testimonial">Junior Front-end Developer</span></p>'
                             + '</div>'
                             + '<div class="col">'
                             + '<img src="images/image-john.jpg" class="img-responsive" id="image">'
                             + '<img src="images/pattern-bg.svg" alt="">'
                             + '<div class="switcher">'
                             + '<img src="images/icon-prev.svg" alt="arrow-left" id="arrow-left">'
                             + '<img src="images/icon-next.svg" alt="arow-right" id="arrow-right">'
                             + '</div>'
                             + '</div>');
  });
});

Also to create the event of going back how can I do?
I am really stuck on this point and I don’t know how to go on.

P.S When I go in my console dev I see this error :

SyntaxError: ‘’ string literal contains an unescaped line break

in the line where start p element
How can I go about fixing it?

Thanks,
CamCode

Regarding the syntax error, you are missing a single quote at the end of the line that creates the first <p> element. And then on the line that closes the first <p> you are using a double quote to start the string and a single quote to end it. I would suggest you choose one to define your strings with and stick with it for everthing. In this case, I think it would be easiest to always use single quotes to define strings.

As far as being able to go back, I’m assuming you have a left arrow that you could attach an event handler to? Without seeing all of your code it is hard to give more specifics.

This is my file HTML/Bootstrap

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  <title>Frontend Mentor | Coding Bootcamp Testimonials Slider</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
  <script type="text/javascript" src="script.js">

  </script>
  <link rel="stylesheet" href="style.css">
  </head>
<body>

  <div class="container-fluid card">
  <div class="row">
  <div class="col col-active">
      <img src="images\pattern-quotes.svg" id="img-quote">
      <p id="quote-testimonial-tanya">“I’ve been interested in coding for a while but never taken the jump, until now.
      I couldn’t recommend this course enough. I’m now in the job of my dreams and so
      excited about the future. ”</p>
      <p id="fullname-testimonial-tanya">Tanya Sinclair <span id="job-testimonial-tanya">UX Engineer</span></p>
  </div>
  <div class="col">
    <img src="images\image-tanya.jpg" class="img-responsive" id="image-tanya">
    <img src="images\pattern-bg.svg" alt="">
    <div class="switcher">
      <img src="images\icon-prev.svg" alt="arrow-left" id="arrow-left">
      <img src="images\icon-next.svg" alt="arow-right" id="arrow-right">
    </div>
  </div>
  </div>
  <div class="row">
    <img src="images\pattern-curve.svg" alt="pattern background">
    </div>

    <div class="row">
      <div class="col col-hidden">
      <p id="quote-testimonial-john"> “ If you want to lay the best foundation possible I’d recommend taking this course.
        The depth the instructors go into is incredible. I now feel so confident about
        starting up as a professional developer. ”</p>
          <p id="fullname-testimonial-john">John Tarkpor <span id="job-testimonial-john">Junior Front-end Developer</span></p>
    </div>
    <div class="col">
      <img scr="images\image-john.jpg" class="img-responsive" id="image-john">
      <div class="switcher">
        <img src="images\icon-prev.svg" alt="arrow-left" id="arrow-left">
        <img src="images\icon-next.svg" alt="arow-right" id="arrow-right">
      </div>
  </div>

<!--  “ If you want to lay the best foundation possible I’d recommend taking this course.
  The depth the instructors go into is incredible. I now feel so confident about
  starting up as a professional developer. ”

  John Tarkpor
  Junior Front-end Developer-->

  <div class="attribution">
    Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
    Coded by <a href="#">DARK__FOXX</a>.
  </div>
</body>
</html>

I was thinking instead of creating all the HTML text through Jquery, of creating under the other paper and then hiding it and using Jquery to show it but I have no idea how to do it.

Instead of pasting the code into this forum we really need a link to the entire code base. Do you have this hosted somewhere so we can access it? Can you put it on github or some other repo?

Sorry but i haven’t created a repo yet, I can use Codepen but the images doesn’t see.
https://codepen.io/camilco/pen/eYJgQwM

I think you need to work on the HTML/CSS a little before you add JS functionality. Even though you can’t upload images to codepen you can still add height/width to the images so they take up the appropriate amount of space, so do this.

Next, those arrow button images, you don’t want to add click handlers to those. If I understand correctly, you want to show just one testimonial at a time and allow the user to scroll through them using back/forward arrows. What you want are <button>s to do that. Don’t worry about making them look like arrows right now, Just leave them as buttons, using the text “Prev” and “Next” (or whatever you prefer).

Now style the page so that only one of the testimonials is showing. The other one will need to be hidden. Generally you would use the display: none CSS property to hide them. One way to do this would be to hide all of the testimonials by default and then use a class to show one at a time. For example, you could add the class showme to the testimonial you want to have showing. I see that you have one of the testimonials hard coded in the HTML with the class col-active, so you could use that class to do this.

Also, I think you need to rearrange your HTML a little for these testimonials. It appears that a testimonial includes an image, a quote, and the person’s name/occupation. All of this information should probably be placed together and wrapped in a common parent element. Right now I’m not sure that this is the case. And then all of the testimonials should be included in a common parent element, without anything else in there. Right now it looks like you have the arrows and a background image thrown in there.

Finally, I would encourage you to use better class descriptors in the HTML. For example, you are using the col class for several different things so it is tough to tell what is what. If a div contains a testimonial then it should have a class that reflects that (e.g. testimonial). The more descriptive you are in your class names the easier it will be to evaluate the structure of your content and work with it. This doesn’t mean you need to get rid of the col class completely, it could still be used for styling purposes, just that you need to add another class name to distinguish it more (which will also help for styling purposes).

Basically, your page should be semantically correct and styled appropriately before you even begin on JS functionality.