A Steem.js tutorial on making a vote weight slider for minnows

What Will I Learn?

The Steemit interface gives a vote slider for minnows only when they are over 500SP.

This is also valid for the downvotes.

There are many other interfaces that provide you this ability but if you are interested how to make one for yourself, this is the correct tutorial.

• Using steem.js API to broadcast upvote or downvote with the desired percentage.
• Make a slider to decide the percentage of the vote.
• Take out the author and permlink from a given steemit post or comment URL in javascript.

Requirements

No requirement, just a text editor ( notepad is fine ) and any internet browser
Basic javascript knowledge and basic HTML knowledge would help.

Difficulty

• Basic

Tutorial Contents

We need four HTML elements for the vote slider
1- A slider that can take a value between -100 and +100

2- An input box where we will paste the URL of the post or comment that we will upvote or downvote

3- A button to complete the action

4- A message to inform us when the operation is performed

Complete code

Complete code can be found at GitHub : https://github.com/firedreamgames/upvote_and_downvote_slider/blob/master/upvote_slider.html

Step-by-step instructions

• Making the input box

An HTML element where we paste the URL we copied from SteemIt.

• Making the slider

When the slider value is changed, we send this value to a function ShowValue to display the value selected.

The slider ranges between -100 to +100 allowing downvotes(flags) also.

• Making the button

The button, when presses calls the send_vote() function

• Making the Elements Function with JavaScript

Include steem.js API in the project

Make a function to show value of slider

Build the vote sending fuction

Write your Steemit Name without @ and your posting key in the code.

Read the voting weight and URL from HTML

Find author and permlink from URL

Use steem.js API to broadcast the vote and inform user

Contact

@FireDream - Steemit

@firedream#3528 - Discord

Links

GitHub for tutorial : https://github.com/firedreamgames/upvote_and_downvote_slider

Proof of Work

---

Posted on Utopian.io - Rewarding Open Source Contributors

---