Nutrition Facts, HTML beautifier

seasun

So I was trying to steal the Nutrition Facts table from this blog. I was trying to steal it with "inspect element" and then "edit HTML," but that copies the whole blob of html without any of the spacing or whatever. So it was just a mass mess of HTML. So I was painstakingly making it readable myself, but my big brain dad told me that wonderful "HTML beautifiers" exist. I just plugged that sucka of a big blob of HTML in, the HTML beautifier chugged it (I just used whatever popped up in DuckDuckGo in the Answer section built into its search results page), and out it spat a well-spaced out, readable HTML page thing. Hallelujah!... is what I hoped. It's still kind of a blob. But I think it did something at least. I dunno, I wasn't exactly keeping track. I still have to clean it up quite a bit.

Ok I plugged in the original mass of HTML and it kind of tried to clean up, not really, but better than nothing, I guess. At least I know HTML beautifiers exist now.

Prepare your eyes. Here's the original mass of HTML blob:

<div class="wprm-nutrition-label-container wprm-nutrition-label-container-label" style="text-align: left;"><div class="wprm-nutrition-label" style="background-color: #ffffff;color: #000000;"><div class="nutrition-title">Nutrition Facts</div><div class="nutrition-recipe">Almond Flour Banana Bread</div><div class="nutrition-line nutrition-line-big"></div><div class="nutrition-serving"> Amount Per Serving (1 slice)</div><div class="nutrition-item"> <span class="nutrition-main"><strong>Calories</strong> 172</span> <span class="nutrition-percentage">Calories from Fat 99</span></div><div class="nutrition-line"></div><div class="nutrition-item"> <span class="nutrition-percentage"><strong>% Daily Value*</strong></span></div><div class="nutrition-item nutrition-item-fat"><span class="nutrition-main"><strong>Fat</strong> 11g</span><span class="nutrition-percentage"><strong>17%</strong></span></div><div class="nutrition-sub-item nutrition-item-saturated_fat"><span class="nutrition-sub">Saturated Fat 1g</span><span class="nutrition-percentage"><strong>6%</strong></span></div><div class="nutrition-item nutrition-item-sodium"><span class="nutrition-main"><strong>Sodium</strong> 147mg</span><span class="nutrition-percentage"><strong>6%</strong></span></div><div class="nutrition-item nutrition-item-carbohydrates"><span class="nutrition-main"><strong>Carbohydrates</strong> 15g</span><span class="nutrition-percentage"><strong>5%</strong></span></div><div class="nutrition-sub-item nutrition-item-fiber"><span class="nutrition-sub">Fiber 3g</span><span class="nutrition-percentage"><strong>13%</strong></span></div><div class="nutrition-sub-item nutrition-item-sugar"><span class="nutrition-sub">Sugar 8g</span><span class="nutrition-percentage"><strong>9%</strong></span></div><div class="nutrition-item nutrition-item-protein"><span class="nutrition-main"><strong>Protein</strong> 6g</span><span class="nutrition-percentage"><strong>12%</strong></span></div><div class="nutrition-warning">* Percent Daily Values are based on a 2000 calorie diet.</div></div></div>

Plugging it into the HTML beautifier got me this:

<div class="wprm-nutrition-label-container wprm-nutrition-label-container-label" style="text-align: left;">
    <div class="wprm-nutrition-label" style="background-color: #ffffff;color: #000000;">
        <div class="nutrition-title">Nutrition Facts</div>
        <div class="nutrition-recipe">Almond Flour Banana Bread</div>
        <div class="nutrition-line nutrition-line-big"></div>
        <div class="nutrition-serving"> Amount Per Serving (1 slice)</div>
        <div class="nutrition-item"> <span class="nutrition-main"><strong>Calories</strong> 172</span> <span class="nutrition-percentage">Calories from Fat 99</span></div>
        <div class="nutrition-line"></div>
        <div class="nutrition-item"> <span class="nutrition-percentage"><strong>% Daily Value*</strong></span></div>
        <div class="nutrition-item nutrition-item-fat"><span class="nutrition-main"><strong>Fat</strong> 11g</span><span class="nutrition-percentage"><strong>17%</strong></span></div>
        <div class="nutrition-sub-item nutrition-item-saturated_fat"><span class="nutrition-sub">Saturated Fat 1g</span><span class="nutrition-percentage"><strong>6%</strong></span></div>
        <div class="nutrition-item nutrition-item-sodium"><span class="nutrition-main"><strong>Sodium</strong> 147mg</span><span class="nutrition-percentage"><strong>6%</strong></span></div>
        <div class="nutrition-item nutrition-item-carbohydrates"><span class="nutrition-main"><strong>Carbohydrates</strong> 15g</span><span class="nutrition-percentage"><strong>5%</strong></span></div>
        <div class="nutrition-sub-item nutrition-item-fiber"><span class="nutrition-sub">Fiber 3g</span><span class="nutrition-percentage"><strong>13%</strong></span></div>
        <div class="nutrition-sub-item nutrition-item-sugar"><span class="nutrition-sub">Sugar 8g</span><span class="nutrition-percentage"><strong>9%</strong></span></div>
        <div class="nutrition-item nutrition-item-protein"><span class="nutrition-main"><strong>Protein</strong> 6g</span><span class="nutrition-percentage"><strong>12%</strong></span></div>
        <div class="nutrition-warning">* Percent Daily Values are based on a 2000 calorie diet.</div>
    </div>
</div>

So, I mean, like, an effort is made. It's at least a little better than the original. Better than nothing, I guess.

I gotta say, though, cleaning this up myself is really boring me. I just wanna put recipes on my blog in peace with a really cool nutrition facts on it that isn't always an image. That's really cool. But cool things take effort 😔 The good news is once I go through this formatting hell once, I can easily use this nutrition facts table over and over again, replacing whatever measurements as I see fit. This is the only thing keeping me together while I'm trying to get thru this formatting mess 😔✌️

HEWW I'm done. It took me, like, an hour, maybe. But, wait! There's more! I gotta copy the CSS too, I think. Hgghgkbllglgh. Yep, I just opened it. Just the HTML is not gonna cut it.

Okay, the people helping me with all this computer stuff are hella coming in clutch. CSS completely got wiped from my mind and my dad told me I don't have to put a separate file for CSS, I can just stick it at the top between <style> and </style>. God bless all the computer-prolific people around me. I would be completely lost and in despair without them.

Also, "inspect element" is beautiful. If it weren't for the people helping me out with this, I wouldn't be saying this, but they are so I'mma say it: I love computer stuff this stuff like magic its beautiful it do be kinda like sum voodoo shite ngl 😳😳😳😳

Er... Now that I'm finally done I realized it looks kind of...awful? Like, do I really want to put this mass on my site for every single recipe?:

.wprm-nutrition-label, html body .wprm-recipe-container .wprm-nutrition-label {
display: inline-block;
max-width: 250px;
border: 1px solid #333;
padding: 5px;
font-family: Arial,Helvetica,sans-serif;
font-size: 12px;
line-height: 16px;
text-align: left !important;
}

.wprm-recipe .wprm-nutrition-label {
    margin-top: 10px;
}

.wprm-nutrition-label .nutrition-title, html body .wprm-recipe-container .wprm-nutrition-label .nutrition-title {
    font-weight: 700;
    font-size: 24px;
    line-height: 24px;
}

.wprm-nutrition-label .nutrition-line.nutrition-line-big, html body .wprm-recipe-container .wprm-nutrition-label .nutrition-line.nutrition-line-big {
    height: 10px;
}

.wprm-nutrition-label .nutrition-line, html body .wprm-recipe-container .wprm-nutrition-label .nutrition-line {
    background-color: #333;
    height: 5px;
    font-size: 1px;
}

.wprm-nutrition-label .nutrition-serving, html body .wprm-recipe-container .wprm-nutrition-label .nutrition-serving {
    font-size: 10px;
    line-height: 14px;
    font-weight: 700;
}

.wprm-nutrition-label .nutrition-item, .wprm-nutrition-label .nutrition-sub-item, html body .wprm-recipe-container .wprm-nutrition-label .nutrition-item, html body .wprm-recipe-container .wprm-nutrition-label .nutrition-sub-item {
    border-top: 1px solid #333;
    clear: both;
}

strong {
    font-weight: 700;
}

.wprm-nutrition-label .nutrition-percentage, html body .wprm-recipe-container .wprm-nutrition-label .nutrition-percentage {
    float: right;
}

.wprm-nutrition-label .nutrition-sub-item, html body .wprm-recipe-container .wprm-nutrition-label .nutrition-sub-item {
    margin-left: 14px;
}

.wprm-nutrition-label .nutrition-warning, html body .wprm-recipe-container .wprm-nutrition-label .nutrition-warning {
    border-top: 1px solid #333;
    clear: both;
    padding-top: 5px;
    font-size: 10px;
    color: #999;
}
<div class="wprm-nutrition-label" style="background-color: #ffffff;color: #000000;">
    <div class="nutrition-title">Nutrition Facts</div>
    <div class="nutrition-recipe">Almond Flour Banana Bread</div>
    <div class="nutrition-line nutrition-line-big"></div>
    <div class="nutrition-serving"> Amount Per Serving (1 slice)</div>
    <div class="nutrition-item">
        <span class="nutrition-main">
            <strong>Calories</strong> 
            172
            </span>
        <span class="nutrition-percentage">Calories from Fat 99</span>
    </div>
    <div class="nutrition-line"></div>
    <div class="nutrition-item">
        <span class="nutrition-percentage">
            <strong>% Daily Value*</strong>
        </span>
    </div>
    <div class="nutrition-item nutrition-item-fat">
        <span class="nutrition-main">
            <strong>Fat</strong> 
            11g
        </span>
        <span class="nutrition-percentage">
            <strong>17%</strong>
        </span>
    </div>
    <div class="nutrition-sub-item nutrition-item-saturated_fat">
        <span class="nutrition-sub">Saturated Fat 1g</span>
        <span class="nutrition-percentage">
            <strong>6%</strong>
        </span>
    </div>
    <div class="nutrition-item nutrition-item-sodium">
        <span class="nutrition-main">
            <strong>Sodium</strong> 
            147mg
        </span>
        <span class="nutrition-percentage">
            <strong>6%</strong>
        </span>
    </div>
    <div class="nutrition-item nutrition-item-carbohydrates">
        <span class="nutrition-main">
            <strong>Carbohydrates</strong> 
            15g
        </span>
        <span class="nutrition-percentage">
            <strong>5%</strong>
        </span>
    </div>
    <div class="nutrition-sub-item nutrition-item-fiber">
        <span class="nutrition-sub">Fiber 3g</span>
        <span class="nutrition-percentage">
            <strong>13%</strong>
        </span>
    </div>
    <div class="nutrition-sub-item nutrition-item-sugar">
        <span class="nutrition-sub">Sugar 8g</span>
        <span class="nutrition-percentage">
            <strong>9%</strong>
        </span>
    </div>
    <div class="nutrition-item nutrition-item-protein">
        <span class="nutrition-main">
            <strong>Protein</strong> 
            6g
        </span>
        <span class="nutrition-percentage">
            <strong>12%</strong>
        </span>
    </div>
    <div class="nutrition-warning">
        * Percent Daily Values are based on a 2000 calorie diet. 
    </div>
</div>

And I realize... no. I don't. But! This was a good refresher on HTML and CSS in the very general sense for me. Because I do not want to touch HTML or CSS. Which is why I'm using Pelican right now. I do not want to add more unecessary bloat to my website, sooo I'll just. Not put a Nutrition Facts table. I'll still put Nutrition Facts because that is always crucial, but probably in some sort of plain text form.

Also, for anybody who might be curious, this nutrition facts table was generated along with a whole recipe card from a WordPress plugin called--you guessed it--WP Recipe Maker (cuz WP = WordPress. Geddit?) Here's the link to it.