Challenge #2: Update three cards to launch a modal window when the "Go Somewhere" button is clicked.

Requirements

  1. Make a copy of a successful attempt of challenge 1 or create a new file for this purpose that shows several cards on the page.
  2. For the first three cards that include the "Go Somewhere" button, attach a modal launch to that button, so that when the button is clicked, a modal window launches.
  3. Use only Bootstrap defaults to achieve your goals.
  4. Document your process as you go using the structure illustrated on this page.
  5. When you break something, try to fix it. If it is broken beyond repair, save the file as a fail and move on to a fresh attempt.

The Attempt

...
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

...
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

...
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

...
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
...
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
...
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
...
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
...
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
...
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
...
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
...
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
...
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

Process

  1. I went to the Bootstrap site to acquire the HTML for a modal launch to apply to the buttons on the first three cards.
    • I copy and paste the HTML from the Live Demo Modal on Bootstrap's website and into my code, making edits to the headers and paragraph attributes to reflect what I want the pop-up to say.
    • Fail: Nothing happens when I click on the Go Somewhere button.
    • I follow the instructions explained by Net Ninja in their YouTube video titled Bootstrap 5 Crash Course Tutorial #16 - Modals.
    • Fail: While clicking on Go Somewhere now directs me to another page, it takes me to send.php and displays an error code.
    • I copy and paste a code for modal from W3 Schools' website.
    • Fail: Again, my button is now unresponsive. When I click on it, nothing happens.
    • After several more attempts to implement modals with my buttons with no success, I am marking this attempt a fail and moving onto challenge #3.
    • I double-check my Javascript files and find that I have the incorrect file downloaded from Bootstrap. I replace it with the correct file: bootstrap.bundle.min.js.
    • Success: My modals are now working correctly on my first three cards. I am ready to move onto challenge #3.

Every page's content should end with a call-to-action that tells the user what to do next. A good call-to-action will have link the user can click to go to the next resource we want them to see.