mirror of
https://github.com/microsoft/frontend-bootcamp.git
synced 2026-01-26 14:56:42 +08:00
added comment about remaining class, updated span to i tag, fixes #30
This commit is contained in:
@@ -4,7 +4,7 @@
|
|||||||
2. Add 4 list items with class `todo` inside of that list with the following content
|
2. Add 4 list items with class `todo` inside of that list with the following content
|
||||||
`<label><input type="checkbox" /> <span class="title"> Todo </span> </label>`
|
`<label><input type="checkbox" /> <span class="title"> Todo </span> </label>`
|
||||||
3. Add a span and a button to your footer
|
3. Add a span and a button to your footer
|
||||||
4. Span content should be `4 items left` and button should say `Clear Completed` and have a class of `submit`
|
4. Span content should be `<i class="remaining>4</i> items left` and button should say `Clear Completed` and have a class of `submit`
|
||||||
5. Go into the CSS file and add `display: flex` to the footer. Also add `flex-grow:1` to the span inside of the footer
|
5. Go into the CSS file and add `display: flex` to the footer. Also add `flex-grow:1` to the span inside of the footer
|
||||||
|
|
||||||
> Hint: Look back at the CSS demo to see the various ways you can use selectors to target existing HTML
|
> Hint: Look back at the CSS demo to see the various ways you can use selectors to target existing HTML
|
||||||
|
|||||||
@@ -32,6 +32,8 @@
|
|||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</main>
|
</main>
|
||||||
<footer><span>4 items left</span> <button class="submit">Clear Completed</button></footer>
|
<footer>
|
||||||
|
<span><i class="remaining">4</i> items left</span> <button class="submit">Clear Completed</button>
|
||||||
|
</footer>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -32,7 +32,7 @@
|
|||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<footer>
|
<footer>
|
||||||
<span><span class="remaining">4</span> items left</span>
|
<span><i class="remaining">4</i> items left</span>
|
||||||
<button class="submit">Clear Completed</button>
|
<button class="submit">Clear Completed</button>
|
||||||
</footer>
|
</footer>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
@@ -32,7 +32,7 @@
|
|||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<footer>
|
<footer>
|
||||||
<span><span class="remaining">4</span> items left</span>
|
<span><i class="remaining">4</i> items left</span>
|
||||||
<button class="submit">Clear Completed</button>
|
<button class="submit">Clear Completed</button>
|
||||||
</footer>
|
</footer>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
@@ -32,7 +32,7 @@
|
|||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<footer>
|
<footer>
|
||||||
<span><span class="remaining">4</span> items left</span>
|
<span><i class="remaining">4</i> items left</span>
|
||||||
<button onclick="clearCompleted()" class="submit">Clear Completed</button>
|
<button onclick="clearCompleted()" class="submit">Clear Completed</button>
|
||||||
</footer>
|
</footer>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
Reference in New Issue
Block a user