freeCodeCamp/add-borders-around-your-elements.english.md at 6b6b33092b3e1aadf8ecd6c06ba675662d2aa6f9

Files

Lxsthorne 786cda2627 Add challenge solution

Added a solution. Please let me know if this is submitted incorrectly or in the wrong location.

<!-- Please follow this checklist and put an x in each of the boxes, like this: [x]. It will ensure that our team takes your pull request seriously. -->

- [X] I have read [freeCodeCamp's contribution guidelines](https://github.com/freeCodeCamp/freeCodeCamp/blob/master/CONTRIBUTING.md).
- [X] My pull request has a descriptive title (not a vague title like `Update index.md`)
- [X] My pull request targets the `master` branch of freeCodeCamp.
- [X] None of my changes are plagiarized from another source without proper attribution.
- [X] My article does not contain shortened URLs or affiliate links.

If your pull request closes a GitHub issue, replace the XXXXX below with the issue number.

Closes #XXXXX

2018-12-03 23:10:41 +00:00

5.3 KiB

Raw Blame History

id, title, challengeType, guideUrl, videoUrl

id	title	challengeType	guideUrl	videoUrl
bad87fee1348bd9bedf08813	Add Borders Around Your Elements	0	https://www.freecodecamp.org/guide/certificates/add-borders-around-your-elements	https://scrimba.com/c/c2MvnHZ

Description

CSS borders have properties like style, color and width. For example, if we wanted to create a red, 5 pixel border around an HTML element, we could use this class:

<style>
  .thin-red-border {
    border-color: red;
    border-width: 5px;
    border-style: solid;
  }
</style>

Instructions

Create a class called thick-green-border. This class should add a 10px, solid, green border around an HTML element. Apply the class to your cat photo. Remember that you can apply multiple classes to an element using its class attribute, by separating each class name with a space. For example: <img class="class1 class2">

Tests

tests:
  - text: Your <code>img</code> element should have the class <code>smaller-image</code>.
    testString: assert($("img").hasClass("smaller-image"), 'Your <code>img</code> element should have the class <code>smaller-image</code>.');
  - text: Your <code>img</code> element should have the class <code>thick-green-border</code>.
    testString: assert($("img").hasClass("thick-green-border"), 'Your <code>img</code> element should have the class <code>thick-green-border</code>.');
  - text: Give your image a border width of <code>10px</code>.
    testString: assert($("img").hasClass("thick-green-border") && parseInt($("img").css("border-top-width"), 10) >= 8 && parseInt($("img").css("border-top-width"), 10) <= 12, 'Give your image a border width of <code>10px</code>.');
  - text: Give your image a border style of <code>solid</code>.
    testString: assert($("img").css("border-right-style") === "solid", 'Give your image a border style of <code>solid</code>.');
  - text: The border around your <code>img</code> element should be green.
    testString: assert($("img").css("border-left-color") === "rgb(0, 128, 0)", 'The border around your <code>img</code> element should be green.');

Challenge Seed

<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;
  }

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

<h2 class="red-text">CatPhotoApp</h2>
<main>
  <p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>

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

  <div>
    <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>
  </div>

  <form action="/submit-cat-photo">
    <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
    <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
    <label><input type="checkbox" name="personality" checked> Loving</label>
    <label><input type="checkbox" name="personality"> Lazy</label>
    <label><input type="checkbox" name="personality"> Energetic</label><br>
    <input type="text" placeholder="cat photo URL" required>
    <button type="submit">Submit</button>
  </form>
</main>

Solution

<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;
  }

  .smaller-image {
    width: 100px;
  }

  .thick-green-border {
    border-width: 10px;
    border-color: green;
    border-style: solid;
  }
</style>

<h2 class="red-text">CatPhotoApp</h2>
<main>
  <p class="red-text">Click here to view more <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>

  <div>
    <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>
  </div>

  <form action="/submit-cat-photo">
    <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
    <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
    <label><input type="checkbox" name="personality" checked> Loving</label>
    <label><input type="checkbox" name="personality"> Lazy</label>
    <label><input type="checkbox" name="personality"> Energetic</label><br>
    <input type="text" placeholder="cat photo URL" required>
    <button type="submit">Submit</button>
  </form>
</main>

5.3 KiB Raw Blame History