TUTORIAL - Create a Steem Browser Extension - JavaScript - Basic - Part 6

What Will I Learn?

This Tutorial Series is all about how to create a browser extension showing steem account data. This part will focus on how to use css files and how to calculate your account reputation.

Result of tutorial:

Requirements

• Read my previous part (Click here)

Difficulty

• Basic

Tutorial Contents

Using CSS Files

Hopefully you realised having style code inside of your html file is pretty ugly and takes a lot of space. For this reasons you can include an stylesheet file inside your html (quite the same as including .js files), also it can help to reduce duplicated style code.

For our purpose we will use .css files

But what is CSS ?
CSS stands for Cascading Style Sheets and it describes how HTML elements are to be displayed.

So create inside of your project folder a new styles.css file and copy all the code inside the styles-tag code (of your index.html) inside styles.css. After that you can remove the styles-tag with code out of your index.html.

Okay now that we have all styles in our file, we need to link them inside our html files.

<link rel="stylesheet" href="styles.css">

rel means we want to embed a stylesheet. And href is the location where to find the file.

That's basically it to embed a css file. (Do the same procedure in your options.html)
Test it and you will see the styling works correctly as before !

Calculating Reputation Value

Let's have a look at the returned user data from the getAccounts API call

You will see a strange big number of your reputation instead of the two digit number everywhere else. How is this number calculated ?

1. Take the Log Base 10 of this number
2. Subtract 9 from this number
3. Multiply this number by 9
4. Add 25
5. Round Down and you have your reputation score

An example:

• I have 702201227518 Reputation value.
• Log Base 10 equals 11.8464615843202
• Minus 9, Multiplied with 9, Plus 25 equals 50.61815425888181
• Rounded down is 50, which is exactly my reputation score visible!

Implement it

Head over to your index.js and create a new function

function calculateRep(rawReputation) {
    const log10 = Math.log10(rawReputation);
    const reputation = ((log10 - 9) * 9) + 25;

    return Math.floor(reputation);
}

Math.log10() takes the Log Base 10, and Math.floor() rounds the value down.

Next head over to your getAccountData function and add behind your username the reputation, for example like this:

const userHeader = document.getElementById("username");
        userHeader.innerHTML = "<div class='profile-pic' style='background-image: url(https://steemitimages.com/u/"+ userData.name +"/avatar);'></div>" +
        "<div>@"+ userData.name +" ("+ calculateRep(userData.reputation) +")</div>";

Save it and rerun your extension:

And tada we see the correct reputation score !

Thanks for reading and stay tuned for the next part :)

What's up next ?

• Calculate Steem Power (Yours & Delegated)
• Calculate Voting Power Percentage

Full Source Code

Curriculum

• Part 1 - Setup
• Part 2 - Reading Data & Designing
• Part 3 - Loading Indicator
• Part 4 - Error Handling
• Part 5 - Button Events and RegEx

---

Posted on Utopian.io - Rewarding Open Source Contributors

---