Hello Everyone
<p dir="auto">In the previous post, we have discussed some elements of HTML. As we do not have a full tutorial on HTML but I try to use and explain some elements in the random tutorials.<br />
In this tutorial, I am going to use an element of an HTML called "Range". This is very cool Element of HTML. We are going to use it for a voting tool. We will create a tool that will vote for us and we will able to change the voting weight by the range element. This will be a very basic tool that will help you understand the Hive Library and HTML as well. So let's begin.
<ul>
<li>I have a very basic HTML file open in my visual studio and a JavaScrip file which is already linked.
<p dir="auto"><img src="https://images.hive.blog/DQmUsz8q9rTvKeBFWRdnrYo2RyZzLNL31iHtqpUpALsdREC/image.png" alt="image.png" />
<p dir="auto">To cast a vote we need the following things.
<ul>
<li>User Name
<li>Author Name
<li>Posting Key
<li>Permalink
<li>Voting Weight<br />
So to create a page we need 3 Text elements, 1 password, and 1 range element.
<pre><code><!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<form>
User Name <input type="text" id="UserName" ><br><br>
Posting Key<input type="password" id="pKey"><br><br>
Author Name <input type="text" id="author"><br><br>
Permlink <input type="text" id="link"><br><br>
Voting Weight<input type="range" max="100" min="1" onclick="update()"><br>
<br> <input type="button" value="Click to vote" onclick="vote()">
</form>
</body>
<script src="index.js"></script>
</html>
<p dir="auto"><img src="https://images.hive.blog/DQmdnRg21fnZ4wbSgRpjrLb4EEmct81xQfXBcm9vqkgvMkt/image.png" alt="image.png" />
<p dir="auto">Now le's include the hive Library by Hivejs CDN.
<p dir="auto"><img src="https://images.hive.blog/DQmS6x66MXzQdbG7Bv3PEyZgNLaPrtomrbyBX7wg5UqFrcZ/image.png" alt="image.png" />
<p dir="auto">First of all, let's get the values of each element and assign it to a variable.
<p dir="auto"><img src="https://images.hive.blog/DQmZMCcWvQTyKXZX6vDVT7Q1QoAkXsmKpCYU9htqTHJPh9b/image.png" alt="image.png" />
<p dir="auto">Now we have all the values assigned to variables. Whenever someone clicks on the "click to vote" button a function will be called which is "vote()".
<ul>
<li>Now we need to put all the value into the api of Hive library.<br />
But let me use the "update()" function which I declared in the HTML page. This function will be called whenever someone clicks on scroll or the range. This will show the value of the range on HTML inside a "div".
<p dir="auto"><img src="https://images.hive.blog/DQmcjMvBmMg75XyEwNsW8EKH8m1Mv5NKy6rg5H4SmSYtQag/image.png" alt="image.png" />
<p dir="auto"><img src="https://images.hive.blog/DQmRwpz7LBYSifggxJg4sYcMajm5J5tkUnBLj1mAA3ptiz6/image.png" alt="image.png" />
<ul>
<li>Now let's use this
<p dir="auto"><img src="https://images.hive.blog/DQmSa4SkcWTwM1kDjrm47ahaUd6hHJGx6K6niJuihLuanpb/image.png" alt="image.png" />
<ul>
<li>Ok! with some little changes we are good to go.
<p dir="auto"><img src="https://images.hive.blog/DQmXwafdrQ5BEHamhWh2TdYSgyWrgyq53XfAqV6nKdzDDbm/image.png" alt="image.png" /><br />
Let's choose newly created post and vote it with our newly created tool
<p dir="auto"><img src="https://images.hive.blog/DQmeh89HNf4jpn8qmjgcGtGAtWfGN8zeykcyBxdJ1DyGz3r/image.png" alt="image.png" />
<ul>
<li>Let's vote it
<p dir="auto"><img src="https://images.hive.blog/DQmW5eAVzhShmAwYuzAmzbkyG5K4e2ZTAWuyus7vXn1VDQp/image.png" alt="image.png" />
<p dir="auto"><span>Let's vote <a href="/@appreciator">@appreciator with 100% voting weight.
<p dir="auto"><img src="https://images.hive.blog/DQmQjYqin8BdusL1yquqX6fZEnPDH1R1EDZhqE7yDg7yZAZ/image.png" alt="image.png" />
<p dir="auto"><center><br />
<strong>I think this much is enough for today. Now if you like the post please upvote and comment if you want to give me some advise<br />
<img src="https://images.hive.blog/DQmd3WcHH8i6U2JkmnrvEvd4FwjDQxJtG3Tnhzxdjswktdx/ntitled-1.png" alt="ntitled-1.png" />
I have picked your post for my daily hive voting initiative, Keep it up and Hive On!!
Your post has been curated by us! Received 22.00% upvote from @opb. Do consider delegate to us to help support our project.
Do join our discord channel to give us feedback, https://discord.gg/bwb2ENt
* This bot is upvoting based on the criteria : 1. Not plagiarised, 2. Persistent previous quality posts, 3. Active engagement with other usersDo upvote this commment if you 💚 our service :)