How To Vote From Steem.js JavaScript Library (Steem.js #1)

in #tutorials • 6 years ago (edited)

Vote From Steem.js JavaScript Library

Repository

https://github.com/steemit/steem-js

What Will I Learn?

In this tutorial you will learn how to vote by Steem.js JavaScript.

  • Vote from Steem.js
  • Creating simple website

Requirements

You need:

  • Text editor (I use Atom)
  • Steem.js
  • Some time
  • Web browser

Difficulty

  • Basic

How to vote from Steem.js.

First let's check GitHub: https://github.com/steemit/steem-js
You can see that there is many examples.

Let's prepare our webpage. You need to download Steem.js -> https://github.com/fbslo/Steem.js
I also add CDN, but it fails sometimes.

<head><title>Vote from steem.js</title>
<script src="./steem.min.js"></script>
<script src="//cdn.steemjs.com/lib/latest/steem.min.js"></script>
</head>
<body>
</body>
</html>

This is skeleton of website, it will load Steem.js.

When you have this ready, add vote script:

<head><title>Vote from steem.js</title>
<script src="./steem.min.js"></script>
<script src="//cdn.steemjs.com/lib/latest/steem.min.js"></script>
</head>
<body>

<script>
steem.broadcast.vote(wif,voter,author,permlink,weight,console.log);
</script>

</body>
</html>

This is only start. Now we need to add input for vote weight, author, permlink, wif (posting key) and voter.

<head><title>Vote from steem.js</title>
<script src="./steem.min.js"></script>
<script src="//cdn.steemjs.com/lib/latest/steem.min.js"></script>
</head>
<body>

(html comment removed:  This part is HTML input field and it will "collect" data from script )
<input id='author' type='text' placeholder="Author"></input>
<input id='weight' type='text' placeholder="Weight"></input>
<input id='permlink' type='text' placeholder="Permlink"></input>
<input id='wif' type='text' placeholder="Private Posting Key"></input>
<input id='voter' type='text' placeholder="voter"></input>

<script>
const author = document.getElementById('author').value;
const weight = parseInt(document.getElementById('weight').value);
const permlink = document.getElementById('permlink').value;
conts wif = document.getElementById('wif').value;
conts voter= document.getElementById('voter').value;

steem.broadcast.vote(wif,voter,author,permlink,weight,console.log);
</script>

</body>
</html>

Now we have almost everything ready, but we must add button that will run this script.

<head><title>Vote from steem.js</title>
<script src="./steem.min.js"></script>
<script src="//cdn.steemjs.com/lib/latest/steem.min.js"></script>
</head>
<body>

<input id='author' type='text' placeholder="Author"></input>
<input id='weight' type='text' placeholder="Weight"></input>
<input id='permlink' type='text' placeholder="Permlink"></input>
<input id='wif' type='text' placeholder="Private Posting Key"></input>
<input id='voter' type='text' placeholder="voter"></input>

<input type="button" value="VOTE NOW" id='button' onclick='myfunction()'  />

<script>
function myfunction() {
const author = document.getElementById('author').value;
const weight = parseInt(document.getElementById('weight').value);
const permlink = document.getElementById('permlink').value;
conts wif = document.getElementById('wif').value;
conts voter= document.getElementById('voter').value;

steem.broadcast.vote(wif,voter,author,permlink,weight,console.log);
}
</script>

</body>
</html>

I added function myfunction() {} and button that will run this function and submit vote. This is now working website. But is is just HTML. Let's make it nice by CSS.
I will use same CSS as at fbslo.net/tools. Put this to <head>.

<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
 <style type="text/css">
 .form-style-8{
     font-family: 'Open Sans Condensed', arial, sans;
     width: 500px;
     padding: 30px;
     background: #FFFFFF;
     margin: 50px auto;
     box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.22);
     -moz-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.22);
     -webkit-box-shadow:  0px 0px 15px rgba(0, 0, 0, 0.22);

 }
 .form-style-8 h2{
     background: #4D4D4D;
     text-transform: uppercase;
     font-family: 'Open Sans Condensed', sans-serif;
     color: #797979;
     font-size: 18px;
     font-weight: 100;
     padding: 20px;
     margin: -30px -30px 30px -30px;
 }
 .form-style-8 input[type="text"],
 .form-style-8 textarea,
 .form-style-8 select
 {
     box-sizing: border-box;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     outline: none;
     display: block;
     width: 100%;
     padding: 7px;
     border: none;
     border-bottom: 1px solid #ddd;
     background: transparent;
     margin-bottom: 10px;
     font: 16px Arial, Helvetica, sans-serif;
     height: 45px;
 }
 .form-style-8 textarea{
     resize:none;
     overflow: hidden;
 }
 .form-style-8 input[type="button"],
 .form-style-8 input[type="submit"]{
     -moz-box-shadow: inset 0px 1px 0px 0px #45D6D6;
     -webkit-box-shadow: inset 0px 1px 0px 0px #45D6D6;
     box-shadow: inset 0px 1px 0px 0px #45D6D6;
     background-color: #2CBBBB;
     border: 1px solid #27A0A0;
     display: inline-block;
     cursor: pointer;
     color: #FFFFFF;
     font-family: 'Open Sans Condensed', sans-serif;
     font-size: 14px;
     padding: 8px 18px;
     text-decoration: none;
     text-transform: uppercase;
 }
 .form-style-8 input[type="button"]:hover,
 .form-style-8 input[type="submit"]:hover {
     background:linear-gradient(to bottom, #34CACA 5%, #30C9C9 100%);
     background-color:#34CACA;
 }
 </style>

Full code:

<html>
<head><title>Vote from steem.js</title>

(html comment removed:  this part will load Steem.js )
<script src="./steem.min.js"></script>
<script src="//cdn.steemjs.com/lib/latest/steem.min.js"></script>

(html comment removed:  This is CSS, it make website nice )
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
 <style type="text/css">
 .form-style-8{
     font-family: 'Open Sans Condensed', arial, sans;
     width: 500px;
     padding: 30px;
     background: #FFFFFF;
     margin: 50px auto;
     box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.22);
     -moz-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.22);
     -webkit-box-shadow:  0px 0px 15px rgba(0, 0, 0, 0.22);

 }
 .form-style-8 h2{
     background: #4D4D4D;
     text-transform: uppercase;
     font-family: 'Open Sans Condensed', sans-serif;
     color: #797979;
     font-size: 18px;
     font-weight: 100;
     padding: 20px;
     margin: -30px -30px 30px -30px;
 }
 .form-style-8 input[type="text"],
 .form-style-8 textarea,
 .form-style-8 select
 {
     box-sizing: border-box;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     outline: none;
     display: block;
     width: 100%;
     padding: 7px;
     border: none;
     border-bottom: 1px solid #ddd;
     background: transparent;
     margin-bottom: 10px;
     font: 16px Arial, Helvetica, sans-serif;
     height: 45px;
 }
 .form-style-8 textarea{
     resize:none;
     overflow: hidden;
 }
 .form-style-8 input[type="button"],
 .form-style-8 input[type="submit"]{
     -moz-box-shadow: inset 0px 1px 0px 0px #45D6D6;
     -webkit-box-shadow: inset 0px 1px 0px 0px #45D6D6;
     box-shadow: inset 0px 1px 0px 0px #45D6D6;
     background-color: #2CBBBB;
     border: 1px solid #27A0A0;
     display: inline-block;
     cursor: pointer;
     color: #FFFFFF;
     font-family: 'Open Sans Condensed', sans-serif;
     font-size: 14px;
     padding: 8px 18px;
     text-decoration: none;
     text-transform: uppercase;
 }
 .form-style-8 input[type="button"]:hover,
 .form-style-8 input[type="submit"]:hover {
     background:linear-gradient(to bottom, #34CACA 5%, #30C9C9 100%);
     background-color:#34CACA;
 }
 </style>
</head>

<body>
<div class="form-style-8">
  <h2><center>Voter</center></h2>
  <form>
(html comment removed:  Input fields )
<input id='author' type='text' placeholder="Author"></input>
<input id='weight' type='text' placeholder="Weight"></input>
<input id='permlink' type='text' placeholder="Permlink"></input>
<input id='wif' type='text' placeholder="Private Posting Key"></input>
<input id='voter' type='text' placeholder="Voter"></input>
(html comment removed:  Button )
  <center><input type="button" value="VOTE NOW" id='button' onclick='myfunction()'  /></button></center>
  </form>
</div>

(html comment removed:  This part will do "real" work)
<script>
function myfunction() {
const author = document.getElementById('author').value;
const weight = parseInt(document.getElementById('weight').value);
const permlink = document.getElementById('permlink').value;
const wif = document.getElementById('wif').value;
const voter= document.getElementById('voter').value;

steem.broadcast.vote(wif,voter,author,permlink,weight,console.log);
}
</script>


</body>
</html>

This website look like this:

Author: Author's username (Without @) (e.g. ervin-lemark)
Weight: 10000 = 100% (e.g. 6666 = 66.66% upvote)(add - for downvote)
Permlink: Part of link after author (e.g. dogs-playing-above-logarska-valley)
Private posting key: Get it on Steemit.com -> Wallet -> Permissions -> Posting -> Show private key
Voter: Your username

I hope you learned something new and you understand this tutorial. If you have any questions, ask in comments ;)
You can find full code at my GitHub

If you have any problems, open web console (Ctrl + shift + k in Mozzila Firefox) and you will see logs. It can be too small voting weight, to small Voting power etc.

Proof of Work Done

https://github.com/fbslo/Steem.js

#utopian-io #javascript #teamslovenia #steemjs
6 years ago in #tutorials by
$25.68
  • Past Payouts $25.68, 0.00 TRX
  • - Author $20.86, 0.00 TRX
  • - Curators $4.82, 0.00 TRX
227 votes
Reply 1
Sort:  
  • Trending
    • [-]
     6 years ago 

    Hey, thanks for using my post :)

    Here is the proof of work:
    image.png

    $0.00
      Reply

      Coin Marketplace

      STEEM 0.30
      TRX 0.11
      JST 0.033
      BTC 64223.84
      ETH 3158.34
      USDT 1.00
      SBD 4.29