There are quite a few apps that have been built on and for the Steem blockchain over the past year and more and more great ideas are being produced all the time. I use several of the tools on a regular basis like **steem.cool**, and **steemd** to keep up with my Voting Power, Bandwidth, Reputation, etc. Today I decided to create my own version of one of the existing apps I like and try my chops at using the steem.js script and prepare myself for some much larger applications I have in mind to build. Here is the outcome and the step-by-step of how I did it, so that you too can build your own and learn how to create your own custom apps with all the great ideas I'm sure so many of you have. ![Screen Shot 2017-09-10 at 1.43.39 AM.png](https://steemitimages.com/DQmZcrcbGSmdHxeSAQPSzrkyqPXipsC8Npwn6JG1mK3NnR9/Screen%20Shot%202017-09-10%20at%201.43.39%20AM.png) [Check Out The Live Demo Here!](http://www.thedevchick.io.php7-29.phx1-1.websitetestlink.com/) ## Libraries/Frameworks Used While not all of these are necessary, it made building this much faster. If you'd like to follow along then here are the 3rd-party packages I used. * Bootstrap 4 * jQuery * Bluebird * Lodash * Vue * Steem.js * Google Fonts ## Additional Files I also created my own CSS and JS files and included them in the main HTML document, just to help keep things clean and organized. Those are named in my files as follows: * app.css * app.js ## Writing the Code - Base HTML Create a new html file, I have named mine index.html. First include the necessary css and meta-data in the `````` of the document. ``` Example Demo ``` As you can see from the above code, I created a folder inside of my publicly accessible directory called **includes**. Inside of that folder i have 3 additional folders: * css * js * imgs Where i have included the respective files. If you would like to follow this to the letter, make sure you create these folders as well and put them in the right location, this is usually the **public_html** or **content** folder within your web-server if you are using managed hosting. If you're not, you likely know how your server is constructed already and thus I have no need to tell you. Create your opening and closing ```body``` tags, and make sure to include the necessary script files at the bottom of your document. ``` ``` Now you have all of the necessary scripts and files included in your document and you can start to build out the structure in your file based on how you would like your content displayed. Inside the ```body``` tags, create your wrappers, containers, rows, and columns for the base structure of your app. Based on the image above, we can see that there are approximately 8 rows each with a single column. We'll create a wrapper for the entire app, which is really only necessary because of my lack of wanting to edit the image used and instead simply darken it with an overlay. If you wanted to edit the image yourself before using and set the brightness of it in an image editor, the ```wrapper``` is not even necessary. I prefer modifying things programmatically though, thus I've added this little bit of additional code. ### The Bootstrap Portion *If you are familiar with bootstrap you can skip this section it just explains the basics of the grid system and some helper classes that are in use for this particular app.* Inside of the wrapper I've included a ```container``` which is part of the **bootstrap** framework and helps constrain the content within desired proportions. We have applied the class ```text-center``` which will center all text within this div as you'd expect. For each row we have simply included a ```row``` which is also part of the **bootstrap** framework and creates rows within our app as you might expect. Inside each row there is only 1 column. **Bootstrap** works on a 12 column grid system and has responsive-breakpoints included. Due to that, we can set the # of columns we want our column to occupy for which breakpoint. For this particular app, I wanted the same width ratio for every breakpoint above *extra-small*. So i've only set one break-point and given it's mobile-first, the larger sizes automatically inherit their settings. Something like ``col-sm-6`` would set the column to be 50% width from the **small** breakpoint and up. Similarly ```col-sm-8``` would set the column to be 2/3rds width. If we wanted to set a different ratio for say **medium** we could simply also add ```col-md-2``` for instance, which would reduce the # of columns the column occupied on medium size devices. We don't to this at all for this particular app, but it's still nice to know that we easily could. Furthermore, you will notice on all of our columns that we have included some *helper* classes such as ```ml-auto``` and ```mr-auto``` which sets *Margin Left Auto*, and *Margin Right Auto* respectively and automatically centers our columns within their rows. Later on we'll also add another *helper class** ```mb-0``` which stands for *Margin Bottom 0*, and will remove automatic margins from the rows that **Bootstrap** automatically applies. ```

``` #### All of the structure has now been applied Lets now move on and start writing our **app.js** file to interact with the **Steem Blockchain** and get all the information we want to output! ### The Javascript Portion The javascript portion is easily the most difficult of the entire app, at least for me. In the Javascript file we'll connect to the steem blockchain, compute math, change formats, set variables, and even add/remove some classes as a helper for our CSS. Lets go piece by piece and break it all down into easily digestible chunks to make sure you actually understand what our app is doing so that you may take all that you learn here and create another awesome app of your own later! First open up the document and prepare it for your code, we'll be using a bit of **Vue**, **bluebird** and **lodash** to make our lives simpler. ``` { All our code goes here. } ``` ##### Setup Our View Modal and watch another function we'll write later Lets setup our view modal and tell it to watch a function we'll write later so it knows to update the data appropriately on change. The following code sets a view modal scope inside of ```#container```and lists out the variables we'll later use to output the data to our page such as ```level, power, reputation, remaining, vested, profile_image, percent```, all the data we visually display in our app. It then tells the code to watch the **refreshAccountData** function for changes and update accordingly. As you can see we've set some initial *base* data such as the default user upon loading the page, etc. ``` let vm = new Vue({ el: '#container', data: { user: 'thedevchick', userData: { level: 0, power: 0, reputation: 0, remaining: 0, vested: 0, profile_image: "", percent: 0 } }, watch: { user: function (u) { refreshAccountData(u) } } }) ``` ##### Write the Log10 function Next we'll write the **log10** function to help us do some math for converting the raw reputation into the reputation level, for instance, from **23,139,682,385** to **37**. The following code does this: * Sets the variable **$str** to be equal to the value sent to it, converted from a number, into a string "text not numerical". * Creates the **leadingDigits** constant, restricts the string to only 4 characters in length, starting from the first, and only including the following 4. For instance *1234567890* would become *1234*, and then turns the result back into a whole number. * Creates the **log** constant, performs the mathematical function ``log`` on the previously set constant **leadingDigits** and then divides the result by the mathematical function ```log(10)```. * Creates the **n** constant which is set by getting the value of the first set variable **$str**, calculating how many characters it is, and then subtracting that value by 1. For instance **1234567890** would output **9** because that is 10 characters long. * Converts the constant **log** into a whole number, subtracts the constant **log** by the whole number version of **log**, for instance: **12345.12345** - **12345** = **.12345**. It then adds that value to the value of the constant **n**. The math can be a bit overwhelming at first but once you break it down into the little pieces as we've done, it all seems pretty basic. ``` function log10(str) { let $str = str.toString() const leadingDigits = parseInt($str.substring(0, 4)) const log = Math.log(leadingDigits) / Math.log(10) const n = $str.length - 1 return n + (log - parseInt(log)) } ``` ##### Write a Reputation Calculation function Having completed that function, we'll write a function to calculate the reputation using the **log10** function we just created. The following code does this: * Checks if the value sent equals "null" or 0, and if so returns 0 without doing the math below it. * Sets the variable **neg** for any value sent to it that is less than 0. * Sets the variable **reputation_level** to be equal to the value sent it, having had the previous **log10** function we wrote processed on it, and then subtracts 9 from the result. * Checks if **reputation_level** is less than 0 and if so, set it to = 0. * Checks if **neg** was set, and if so it multiplies the **reputation_level** by negative 1 (to make it negative again given the previous math would have made it positive), so this just rectifies that again in case. * Multiplies the **reputation_level** by 9, adds 25, and then returns that value. Again, the math can be a bit overwhelming at first but breaking it down like this should make you feel pretty comfortable with it, even if math wasn't your favorite subject in school. ``` function calcReputation(value) { if (value == null || value == 0) return 0; let neg = value < 0 let reputation_level = log10(value) - 9; if (reputation_level < 0) reputation_level = 0; if (neg) reputation_level *= -1; return reputation_level * 9 + 25; } ``` ##### Write a Level Calculation function This function is pretty simple, it's meant to output the **level** based on the reputation value sent to it. The following code does this: * Takes the value sent to it and runs the previous **calcReputation** function we set on it, and then rounds it down to a nice even integer. ``` function calcLevel(v) { return Math.floor(calcReputation(v)) } ``` #### Write a XP Calculation function The XP is essentially the **%** of reputation that a user has received at their current **Level** before reaching the next **Level**. We use this for the progress bar in the app. The following code does this: * Sets **r** to be equal to the value sent to it, having had the **calcReputation** function we previously wrote run on it. * Subtracts the value of **r** having been rounded down from **r**, for instance **123456.4321** - **123456** = **0.4321**, multiplies it by 100, and returns that value. ``` function calcXP(v) { let r = calcReputation(v); return 100 * (r - Math.floor(r)) } ``` ##### Write a function to format any number into billions. This is used for the **Current Reputation** and **Rep Remaining** that is output on our app as we wanted to keep it simple and round the reputation to billions to be more readable. The following code does this: * Checks if the value sent to it is greater than or = to 1 billion. * If it is, divides it by the value of 1.0e+9 or in layman's terms, 1 billion. * Returns the value having run the math function ``` function repFormat(billions) { return Math.abs(Number(billions)) >= 1.0e+9 ? Math.abs(Number(billions)) / 1.0e+9 : Math.abs(Number(billions)); } ``` #### Write a function to set a Default Profile Picture. In case a user has not set a profile picture on steemit, this will set the standard default profile image from **Gravatar** to fill the empty space where we output the profile image in our app. The following code does this: * Sets the vue view modal variable **profile_image** inside of **userData** to the default gravatar profile image. ``` function setDefaultUserProfilePic() { vm.$set(vm.userData, 'profile_image', 'https://www.gravatar.com/avatar/000000000000000000000000000000000?d=mm&f=y') } ``` #### Write a function to add commas should a number need it. To make sure that the output is easily readable, we want to add commas to the numbers should they need it. This function simply runs a regEx process that will add commas to any number that requires it, at the correct location. For instance **1000** becomes **1,000** and **1000000** becomes **1,000,000** ``` function addCommas(x) { var parts = x.toString().split("."); parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ","); return parts.join("."); } ``` #### Write a function to calculate vests into a nice readable format We want to output the amount of **vests** a user has in a nice readable format, this function does that. The following code does this: * Sets the variable **q** to be equal to the value sent to it, removes the last 6 characters returned which is ** VESTS** including the space, and turns the value into an integer. * Sets the variable **qmil** to be equal to the variable **q** divided by 1 Million and truncated to the 2nd decimal point. * Returns the value of **qmil** ``` function vestCalc(vests){ var q = parseInt(vests.slice(0, -6)); var qmil = (q / 1000000).toFixed(2); return qmil; } ``` #### Write the GrandDaddy function, *refreshAccountData* which does a LOT. This is the GrandDaddy of all of the functions we've written so far. As you recall I'm sure, we referenced this function at the very start. This is what runs anytime a user changes the **accountName** in the input field we'll place in the app to allow users to check the statistic for any account they please. The following code does this: * Connects to the steem blockchain via steem.js with the **getAccounts** function of the API, and sets the value as an array with the only value being the account name entered in the text-field by the user and returns the JSON data based on that user. * Creates a new action after JSON data has been returned and runs the rest of the computations. * Sets **secondsago** as the time since the last vote a user has, to make sure it is completely accurate. * Sets vpow as a variable that equals **10000** times **secondsago** and divided by **432000** plus the users returned **Voting Power**. * Checks if the result returned any results and if not explicitly sets the values of the variables and then returns it. * This one is a bit long, I got a bit lazy as i started to wrap this all up and instead of writing functions just did the equations inline. I'm sorry for that, but *Hey, At least now you know another way you can write similar code!* * Takes the Json output for the **reputation** and runs the previous function we wrote **calcLevel**. * Adds 1 to the result * Subtracts 25 (*yes i know, but this keeps it easier to understand for you, using the same numbers so it's easier to follow*) * Divides by 9 * Adds 9 * Runs the mathematical function **pow** * Sets **nextLevel** to equal the result of the previous equations and functions. * Subtracts the Json output for the **reputuation** from the variable **nextLevel** and sets **remaining** to be equal to that. * Sets up a conditional with an error fallback * Sets **profile** within the aforementioned conditional to equal the Json data returned inside **profile** which was inside **json_metadata** * Checks of **profile.profile_image** which is a value inside of **profile** is **null** or not, if not then... * Sets the View Modal for **profile_image** inside of **userData** to be equal to **profile.profile_image** or in other words: it looks inside the **Json returned results**, then looks inside the tag **json_metadata**, then looks inside **profile**, then looks inside **profile_image**, and sets that. Nesting within nesting, within nesting. This is how we get that type of information. * Checks if there is an error with the above and if so... * Sets *profile_image* within *userData* to the default gravatar based on the function we wrote earlier. * Removes the class "active" from all list items. * Runs the function **calcXP** we wrote earlier on the Json returned value of **reputation**, rounds it down, divides it by 10, turns it into a whole number, and then sets that as the value of the variable **whichone**. * Adds the class "active" to the *nth-child* list item, nth determined by the variable **whichone** within the parent class *prog-bar*. * Runs the **vestCalc** function on the Json returned value of **vesting_shares** and sets it as the value of **vested** within the view modal **userData**. * Runs the **repFormat** function on the variable **remaining** we set earlier, rounds it, and then runs the **addCommas** function to it, then sets the output as the value of **remaining** in the view modal **userData**. * Runs the **repFormat**on the Json returned value of **reputation**, rounds it down, runs the **addCommas** function, and then sets the output as the value of **reputation** in the view modal **userData**. * Runs the **calcLevel** function on the Json returned value of **reputation**. * Runs the mathematical **min** function with the variable **vpow** divided by 100, and 100, and cut off at the 2nd decimal point. * Outputs any errors in the above to the console. * Runs the function **refreshAccountData** with the input of the **user** set in the view modal. Again, especially because i wrote some short-hand here I know it can be a bit hard to follow, but as long as you go line-by-line to understand what each thing does, you'll pick it up and understand it pretty easily. ``` function refreshAccountData(accountName) { return steem.api.getAccountsAsync([accountName]) .then(function (result) { let secondsago = (new Date - new Date(result[0].last_vote_time + "Z")) / 1000 let vpow = result[0].voting_power + (10000 * secondsago / 432000) if (result.length == 0) { vm.userData = { level: 0, power: 0, reputation: 0, remaining: 0, vested: 0, profile_image: "", percent: 0 } return } nextLevel= Math.pow(10, (((calcLevel(result[0].reputation)+1)-25)/9)+9); remaining = nextLevel - result[0].reputation; try { let profile = JSON.parse(result[0].json_metadata).profile if (profile.profile_image != null) { vm.$set(vm.userData, 'profile_image', profile.profile_image) } } catch (err) { do_setDefaultUserProfilePic() } $( "li" ).removeClass( "active" ) var whichone = parseInt(Math.floor(calcXP(result[0].reputation))/10); $(".prog-bar li:nth-child("+whichone+")").addClass('active'); vm.$set(vm.userData, 'vested', vestCalc(result[0].vesting_shares)) vm.$set(vm.userData, 'remaining', addCommas(Math.round(repFormat(remaining)))) vm.$set(vm.userData, 'reputation', addCommas(Math.floor(repFormat(result[0].reputation)))) vm.$set(vm.userData, 'level', calcLevel(result[0].reputation)) vm.$set(vm.userData, 'power', Math.min(vpow / 100, 100).toFixed(2)) }) .catch(console.error) } ``` Well that is all there is to it for the Javascript. We referenced a few classes and set some variables, so lets go back to our HTML file and drop our variables in there so that our Javascript can connect to it! #### Back to the HTML with our newly set Javascript Remember long ago before the rabbit hole of our Javascript file when we set the structure of the HTML for our app? Lets now fill in the blanks with our newly set variables, add some classes here and there to help us with styling, and flesh it all out. I feel it's unnecessary to go line by line for the HTML, so we'll hit the highlights. If anybody has confusion with anything and would like clarification I can either answer in the comments or update the post to go further line-by-line if necessary. The following code does this: * **v-cloak** set on containers paired with css will hide the content within this container until values are rendered. This prevents variables outputting before they are parsed, nobody wants to see code on the front-end. * We output our variables sent in our javascript with ```{{ }}``` and scope. **level** for instance is output as ```{{ userData.level }}``` * We set a few other special classes and helpers to make our app beautiful. ```

Add the proper img open carrot and closing carrot here, it had to be removed due to the editor being bugging and attempting to render the image even though it is inside code formatting. img :src="`${ userData.profile_image }`"

@ {{ user }}({{ userData.level }})

{{ userData.reputation }} (b)illion (Current Reputation)

{{ userData.remaining }} (b)illion REP remaining until next level

{{ userData.vested }}M (Vested Power) || {{ userData.power }}% (Voting Power)

Enter Username (Then Hit Enter)

Created by @thedevchick | UpVote The Post Here If you like the APP!
Special thanks to @blueorgy for the inspiration at steem.cool

``` #### The CSS CSS makes everything pretty. After all, what is function and structure if it still looks like a donkey's rear? An appealing appearance is important, and we do that here. The following code does this: * The **body** element is targeted and the following properties are applied: * Sets a beautiful background image to the specified source, the position to centered horizontally and vertically, and not to repeat. * Sets the background size to take up the entire area. * Sets the width to the entirety of the viewport's available width. * Sets the height to the entirety of the viewport's available height. * Sets the default color for the page to be white. * Sets the default font for the page to the Google Font included in the HTML to **Lora**. * Sets the default font size to 1em * The **wrapper** class is targeted and the following properties are applied: * Background is set to a 60% opacity of black. * Sets the width to the entirety of the viewport's available width. * Sets the height to the entirety of the viewport's available height. * The **container** class is targeted and the following properties are applied: * It utilizes a combination of the 3 properties to center it's contents vertically. * The **row** class is targeted and the following properties are applied: *A margin of 15px is set to the bottom of each row. * The **h1** element is targeted and the following properties are applied: * The font is set to use the Google Font imported in the HTML **Montserrat***. * The weight of the font is set to bold. * We make all the text output to be uppercase. * The font size is set to 50px. * The spacing between individual letters is set to 1px * The **colored** class and all **a** elements or "links" are targeted and the following properties are applied: * The color is set * * The **colored** class is targeted and the following properties are applied: * The font size is set to 26px. * The **v-cloak** attribute is targeted and the following properties are applied: * The browser is told to hide anything with this attribute * The **small** class is targeted and the following properties are applied: * The font size is set to .75em. * The **large** class is targeted and the following properties are applied: * The font size is set to 1.75em. * The **thanks** class is targeted and the following properties are applied: * The font size is set to 10px. * The opacity of the text is reduced to 50%. * The **form-control** class is targeted and the following properties are applied: * The text is centered. * The width of the element within the available area is set to 30%. * The margin is set to 0 pixels at the top and bottom and automatic for left to right to center the element. * The background of the element is set to white at 25% opacity. * The color of the text is set to white. * The cursor color [As Explained In My Previous Article](https://steemit.com/css/@thedevchick/css-setting-the-cursor-color-in-input-fields-caret-color) is set to a unique color. * The **form-control** class is targeted if **focused** upon, and the following properties are applied: * The outline is set to none, we don't want the browser defaults showing stuff we did not specify. * The background maintains at white at 25% opacity, overriding any browser behaviors. * A box-shadow is set inside the element with a horizontal position of 0, vertical position of 0, blur of 10px, spread of 2px, and color of black at 50% opacity. * The color of text is maintained at white. * The border is set to be none. * The **img** element is targeted and the following properties are applied: * The height is set to 75px. * The width is set to 75px. * The box-shadow is set to 0px horizontal position, 0px vertical position, 5px blur, 6px spread, and a color of black at 50% opacity. * The border is set to 3px, solid, and color of white. * The margin below it is set to be 15px. * The **ul** element is targeted and the following properties are applied: * The margin below is set to 20px. * The width of it is set to 100% of the available space. * The element is floated to the left. * The **li** element is targeted and the following properties are applied: * Elements are floated to the left. * The list style is set to none. * The width is set to 8% of the available area. * The margin of the elements is set to 1% on the left and right. * The elements are set to have a height of 10. * The background is set to white at 90% opacity. * The elements receive 2 separate box-shadow properties for the "glow". * All **li** *after* the class **active** are targeted and the following properties are applied: * The background is set to white, and the opacity is set to only 10%. * The **li** immediately after the **active** class is targeted and the following properties are applied: * Invoke the css animation **blink** at a 1 second duration, alternating, forever. * Do the same for other browers that may need pre-fixes to work. * Set the background to white at 90% opacity. * The css animation **blink** is created and configured and the following properties are applied: * The background at 0% of 1 second is set to be 100% opacity color white. * A box-shadow is applied at 0% of 1 second. * The background at 100% is set to be 0% opacity color white. * A box-shadow is applied at 100% of 1 second. ``` body{ background: url('/includes/imgs/bg.jpg') center center no-repeat; background-size: cover; width: 100vw; height: 100vh; color: #fff; font-family: 'Lora', serif; font-size: 1em; } .wrapper{ background: rgba(0, 0, 0, .6); width: 100vw; height: 100vh; } .container{ top: 50%; transform: translateY(-50%); position: relative; } .row{ margin-bottom: 15px; } h1{ font-family: 'Montserrat', sans-serif; font-weight: bold; text-transform: uppercase; font-size: 50px; letter-spacing: 1px; } a, .colored{ color: #B533FF; } .colored{ font-size: 26px; } [v-cloak] { display: none; } .small{ font-size: .75em; } .large{ font-size: 1.75em; } .thanks{ font-size: 10px; opacity: .5; } .form-control{ text-align: center; width: 30%; margin: 0 auto; background: rgba(255, 255, 255, .25); color: #fff; caret-color: #B533FF; } .form-control:focus{ outline: none; background: rgba(255, 255, 255, .25); box-shadow: inset 0 0 1110px 2px rgba(0, 0, 0, .5); color: #fff; border: none; } img{ height: 75px; width: 75px; border-radius: 100%; box-shadow: 0px 0px 5px 6px rgba(0, 0, 0, .5); border: 3px solid #fff; margin-bottom: 15px; } ul{ margin-bottom: 20px; width: 100%; float: left; } li{ float: left; list-style: none; width: 8%; margin: 1%; height: 10px; background: rgba(255, 255, 255, .9); box-shadow: inset 0px 0px 10px 1px rgba(181, 51, 255, .4), 0px 0px 20px rgba(181, 51, 255, .1); } .active ~ li{ background: rgba(255, 255, 255, .1) } .active + li { -webkit-animation: blink 1s alternate infinite; -moz-animation: blink 1s alternate infinite; animation: blink 1s alternate infinite; background: rgba(255,255,255,0.9) } @-webkit-keyframes blink { 0% { background: rgba(255,255,255,1); box-shadow: inset 0px 0px 10px 2px rgba(181, 51, 255,0.5), 0px 0px 40px 2px rgba(105,135,255,1); } 100% { background: rgba(255,255,255,0); box-shadow: inset 0px 0px 10px 2px rgba(181, 51, 255,0.5), 0px 0px 30px 2px rgba(105,135,255,0.3); } } @-moz-keyframes blink { 0% { background: rgba(255,255,255,1); box-shadow: inset 0px 0px 10px 2px rgba(181, 51, 255,0.5), 0px 0px 40px 2px rgba(105,135,255,1); } 100% { background: rgba(255,255,255,0); box-shadow: inset 0px 0px 10px 2px rgba(181, 51, 255,0.5), 0px 0px 30px 2px rgba(105,135,255,0.3); } } @keyframes blink { 0% { background: rgba(255,255,255,1); box-shadow: inset 0px 0px 10px 2px rgba(181, 51, 255,0.5), 0px 0px 40px 2px rgba(105,135,255,1); } 100% { background: rgba(255,255,255,0); box-shadow: inset 0px 0px 10px 2px rgba(181, 51, 255,0.5), 0px 0px 30px 2px rgba(105,135,255,0.3); } } ``` ## That's a wrap! That concludes the official how-to for building the app. Please feel free to [play with the demo here](http://www.thedevchick.io.php7-29.phx1-1.websitetestlink.com/), all the code was done on the front-end so you can easily view the source and cheat into making edits yourself. There is much that can be enhance and improved upon, but the point of this was to teach you how to interact and build something pretty cool, fairly quickly and easily, and allow you to build upon that. I hope that this tutorial helped you not only learn how to build ***this*** app on the steem blockchain but how to build anything. It's really not overly difficult to build applications on steem. We can truly do some amazing things.