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>
<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>
<script src="./steem.min.js"></script>
<script src="//cdn.steemjs.com/lib/latest/steem.min.js"></script>
<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>
<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>
<center><input type="button" value="VOTE NOW" id='button' onclick='myfunction()' />button></center>
</form>
</div>
<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