Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

The Button element isn't working correctly #11985

Closed
Lieghti opened this issue Dec 9, 2016 · 10 comments
Closed

The Button element isn't working correctly #11985

Lieghti opened this issue Dec 9, 2016 · 10 comments

Comments

@Lieghti
Copy link

Lieghti commented Dec 9, 2016

Challenge Create a Bootstrap Button has an issue.
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.98 Safari/537.36.
Please describe how to reproduce this issue, and include links to screenshots if possible.

My code:

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
  .red-text {
    color: red;
  }

  h2 {
    font-family: Lobster, Monospace;
  }

  p {
    font-size: 16px;
    font-family: Monospace;
  }

  .thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
    border-radius: 50%;
  }

  .smaller-image {
    width: 100px;
  }
</style>

<div class="container-fluid">
  <h2 class="red-text text-center">CatPhotoApp</h2>

  <p>Click here for <a href="#">cat photos</a>.</p>

  <a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. "></a>

  <img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera. >

  <button type="button" class="btn">Like</button> 
                                  
  <p>Things cats love:</p>
  <ul>
    <li>cat nip</li>
    <li>laser pointers</li>
    <li>lasagna</li>
  </ul>
  <p>Top 3 things cats hate:</p>
  <ol>
    <li>flea treatment</li>
    <li>thunder</li>
    <li>other cats</li>
  </ol>
  <form action="/submit-cat-photo">
    <label><input type="radio" name="indoor-outdoor"> Indoor</label>
    <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
    <label><input type="checkbox" name="personality"> Loving</label>
    <label><input type="checkbox" name="personality"> Lazy</label>
    <label><input type="checkbox" name="personality"> Crazy</label>
    <input type="text" placeholder="cat photo URL" required>
    <button type="submit">Submit</button>
  </form>
</div>
@eilayk
Copy link

eilayk commented Dec 9, 2016

Why did you do <button type="button">?

For me it worked without the button type. Here's my code:
<button class="btn">like</button>

I just started this course, so I am not a professional, but I think that you don't need button type, since your using bootstrap, bootstrap can probably recognize by itself, and I am pretty sure that button is not a type.

@ajain17
Copy link

ajain17 commented Dec 9, 2016

It works with button type = button also. I just noticed that.

@ajain17
Copy link

ajain17 commented Dec 9, 2016

The problem is in this line:

<img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera. >

You are not closing the quote.

@dhcodes This issue can be closed.

@eilayk
Copy link

eilayk commented Dec 9, 2016

Really? so button is a type?

@ajain17
Copy link

ajain17 commented Dec 9, 2016

@Lieghti
Copy link
Author

Lieghti commented Dec 10, 2016 via email

@ajain17
Copy link

ajain17 commented Dec 10, 2016

You had incorrect code earlier. You had mistakenly removed a ". Please read my comment above. Instructions are clear in the challenge.

@dhcodes
Copy link
Contributor

dhcodes commented Dec 10, 2016

No need to tag me @ajain17; someone will come along and close the issue if it's not a bug. Please point people toward the chat room for code help. Thanks for helping out!

@dhcodes dhcodes closed this as completed Dec 10, 2016
@Lieghti
Copy link
Author

Lieghti commented Dec 10, 2016 via email

@Fuji1405116
Copy link

Fuji1405116 commented Sep 14, 2019

I had the same problem. No need to specify the type. Just reset the page and add <button class="btn btn-default">Like</button> The problem was occuring because, sometimes we make/add some extra things to make it cool which may conflict with the test cases. So Its better to reset first

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants