Issue with dynamically updating before attribute - SEO

TechnoCorner
April 3, 2019
186 views
0 votes
2 Answers

I’m trying to recreate this image to HTML/CSS/JS: (Using HTML5 semantics)

This is the question that was asked to me:

Here’s my implementation. However, I am not sure how do I get/update Numbers “30”, “19” etc Dynamically? I’m stuck there, please help.

.endorsements {
  background: #f0f0f0;
  border-left: 20px solid #49a9e1;
  display: block;
  margin: 10px;
}

.endorsements::after {
  content: '+'
}

<article>
  <section id="endo">
    <button aria-label="css" class="endorsements"> CSS </button>
    <button aria-label="web" class="endorsements"> Web Development </button>
        <button aria-label="SEO" class="endorsements"> SEO </button>
        <button aria-label="HTML" class="endorsements"> HTML </button>
  </section>
</article>

Can someone help me to recreate this spec? I’m not sure using ::after would be a good idea?

Answers

I would build the whole thing up in a for-loop, and with “the whole thing”, I mean each row.

Add the value to a data-attribute, and use concent: attr(data-attribute) to display the number.

If you’re not creating the HTML structure row by row, do a document.querySelectAll('.endorsement') [edit] after you got your data from a server, loop through the response and add each data-attribute selectively.

[edit] Also, remove border-left: 20px solid #49a9e1 from .endorsement;

.endorsements {
  background: #f0f0f0;
  display: block;
  margin: 10px;
}

.endorsements::before {
  content: attr(data-number);
  height: 20px;
  width: 20px;
  background-color: #4faadf;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-weight: bold;
  font-size: 0.9em;
  border-top-left-radius: 2px;
  border-bottom-left-radius: 2px;
}

<!-- Example of how the DOM looks like after javascript have added the attribute 'data-number'. -->

<article>
  <section id="endo">
    <button data-number="30" aria-label="css" class="endorsements"> CSS </button>
    <button data-number="19" aria-label="web" class="endorsements"> Web Development </button>
    <button data-number="18" aria-label="SEO" class="endorsements"> SEO </button>
    <button data-number="13" aria-label="HTML" class="endorsements"> HTML </button>
  </section>
</article>

So as I said in my comment, I’d recommend using something like an object which can be looped over to build your html (Actually, if you were more experienced, I’d recommend something like Angular – it’s amazing for stuff like this).

Also note that I wouldn’t use a before:: pseudo element for the number, just put it in a div. See below;

$(document).ready(function () {
        let endorsements = {
            0: {
                name     : "CSS",
                count    : 30,
                endorsers:
                    [
                        "link/to/image.png",
                        "link/to/second/image.jpg"
                    ]
            },
            1: {
                name     : "Web Development",
                count    : 16,
                endorsers: [
                    "link/to/image.png",
                    "link/to/second/image.jpg"
                ],
            }
        };

        let html    = "";
        let element = $("#endorsements");

        for (let i in endorsements) {
            html += `<div class="endorsement"><div class="count">${endorsements[i].count}</div><div class="name">${endorsements[i].name}</div></div>`
        }

        element.html(html);
    })

.endorsement {
            width            : 100%;
            background-color : #DDDDDD;
            display          : flex;
            align-items      : center;
        }

        .count {
            width            : 30px;
            height           : 30px;
            background-color : #3498DB;
            color            : white;
            text-align       : center;
            line-height      : 30px;
            display          : block;
            float            : left;
            margin-right     : 10px;
        }

        .name::after {
            content : "+";
            color   : #AAAAAA;
            margin-left: 10px;
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="endorsements">

</div>

Please signup or login to give your own answer.

Click here to cancel reply.

Issue with dynamically updating before attribute – SEO

Answers