Build a Page of Playing Cards - Build a Page of Playing Cards

HTML-CSS
1

Tell us what’s happening:

I ran a rough draft and all the tests passed. I doctored up the code to make it more satisfactory and now test 2 doesn’t pass but the rest do. I can’t tell if there’s something missing.

  1. You should have at least three div elements with a class of card within your #playing-cards element.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Playing Cards</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <main id="playing-cards">
    <section class="spade">
    <div class="card">
      <div class="left">
        <div>A</div>
        <div>♠</div>
      </div>
      <div class="middle">
        <div>♠</div>
      </div>
      <div class="right">
        <div>A</div>
        <div>♠</div>
      </div>
    </div>
    </section>

    <section class="diamond">
    <div class="card">
      <div class="left">
        <div>A</div>
        <div>♦</div>
      </div>
      <div class="middle">
        <div>♦</div>
      </div>
      <div class="right">
        <div>A</div>
        <div>♦</div>
      </div>
    </div>
    </section>
    
    <section class="club">
    <div class="card">
      <div class="left">
        <div>A</div>
        <div>♣</div>
      </div>
      <div class="middle">
        <div>♣</div>
      </div>
      <div class="right">
        <div>A</div>
        <div>♣</div>
      </div>
    </div>
    </section>

    <section class="heart">
    <div class="card">
      <div class="left">
        <div>A</div>
        <div>♥</div>
      </div>
      <div class="middle">
        <div>♥</div>
      </div>
      <div class="right">
        <div>A</div>
        <div>♥</div>
      </div>
    </div>
    </section>

  <section class="spade">
  <div class="card">
    <div class="left">
      <div>7</div>
      <div>♠</div>
    </div>
    <div class="middle seven">
      <div class="pip top">♠</div>
      <div class="row">
        <span>♠</span>
        <span>♠</span>
      </div>
      <div class="pip center">♠</div>
      <div class="row">
        <span>♠</span>
        <span>♠</span>
      </div>
      <div class="pip bottom">♠</div>
    </div>
    <div class="right">
      <div>7</div>
      <div>♠</div>
    </div>
    </section>
  </main>
</body>
</html>

/* file: styles.css */
* {
  box-sizing: border-box;
}
body {
  background-color: rgba(29, 168, 223, 0.603)
}

#playing-cards {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.card {
  width: 200px;
  height: 400px;
  display: flex;
  border: 1px solid black;
  padding: 5px;
  border-radius: 5px;
  background-color: #fff;
  justify-content: space-between;
  font-weight: bold;
  font-family: timesnewroman;
  font-size: 35px;
  box-shadow: 4px 4px 10px black;
  
}

.left {
  align-self: flex-start; 
}

.middle {
  align-self: center;
  display: flex;
  flex-direction: column;
}


.right {
  align-self: flex-end;
  transform: rotate(180deg)
}

.heart, .diamond {
  color: rgb(255, 0, 0);
}

.seven {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 50%;
  width: 50%;
}

.row {
  display: flex;
  justify-content: space-between;
}

.pip {
  text-align: center;
}

.bottom {
  transform: rotate(180deg);
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.3 Safari/605.1.15

Challenge Information:

Build a Page of Playing Cards - Build a Page of Playing Cards

2

It’s not your fault. The test expects three direct child div elements, but your divs are nested inside other elements. The test description isn’t specific enough.

<!-- This Fails the test -->
<div class="parent">
   <section>
      <div></div>
      <div></div>
      <div></div>
   </section>
</div>

<!-- What the test expects -->
<div class="parent">
  <div></div>
  <div></div>
  <div></div>
</div>

Also, fixing this test case will cause others to fail, but this time the test statements are clear, so goodluck :slight_smile:

3

The instructions are very clear however in that they do not ask for a section element.

The tests are simply tests, do not use them as a guide. If the test fails you need to check the instructions.

4

Thank you! I think I can see what the problem is. It has now passed!

5

I’m a little lost here. I know that the instructions didn’t specify a section element, but there are multiple other things that I added to the project that didn’t make for any issues. Like the body selector in CSS, for example.

6

adding the body selector is not changing how the elements are related in the HTML

the user stories say you need to add three div elements inside the div. If you put the three div elements inside the section that means that the parent div now has a section child, not three div children

1 Like
7

Don’t add extra things that aren’t asked for in the instructions. Some will mess up the test, some won’t.

8

Ah, I see. Thank you for explaining!