--- id: 615f7ecb09de9a938ef94756 title: Step 54 challengeType: 0 dashedName: step-54 --- # --description-- Add another `p` element with the text `Total Carbohydrate 37g 13%`. Like before, use `span` elements to make the text `Total Carbohydrate` bold, and the text `13%` bold and right aligned. # --hints-- You should create a new `p` element at the end of your `.daily-value.sm-text` element. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'p'); ``` Your new `p` element should have the text `Total Carbohydrate 37g 13%`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.innerText?.match(/Total Carbohydrate 37g[\s|\n]+13%/)); ``` Your new `p` element should have two `span` elements. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelectorAll('span')?.length === 2); ``` Your first `span` element should have the `class` attribute set to `bold`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.classList?.contains('bold')); ``` Your first `span` element should wrap the text `Total Carbohydrate`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.innerText === 'Total Carbohydrate'); ``` Your second `span` element should have the `class` attribute set to `bold right`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.classList?.contains('bold')); assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.classList?.contains('right')); ``` Your second `span` element should wrap the text `13%`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.innerText === '13%'); ``` # --seed-- ## --seed-contents-- ```html
8 servings per container
Serving size 2/3 cup (55g)
Amount per serving
% Daily Value *
Total Fat 8g10%
Saturated Fat 1g 5%
Trans Fat 0g
Cholesterol 0mg 0%
Sodium 160mg 7%
--fcc-editable-region--