Prepare for the experience of a lifetime... with JavaScript
hive-169321·@anomadsoul·
0.000 HBDPrepare for the experience of a lifetime... with JavaScript
I'm nowhere near ready to actually have a job as a FullStack Developer, but I'm slowly but steadily reaching that status; in the meantime, all I can do is grind.
Grinding, grinding, grinding. When we are talking code, it all comes down to grinding. The more you grind, practice your skills, find out about new tweaks, practice what you should already know by heart, and just putting your code to work... the more you will learn.
So that's what I am doing. I am already pretty efficient with my HTML and CSS code, I still need a lot of practice and a hell lot to learn regarding JavaScript - and don't worry, I've been taking my lessons religiously even though I haven't posted about JavaScript for something like two weeks; but the point is, these little projects are mainly about HTML and CSS and grinding my skills.
This is tenth post already about little projects based off online ideas and my plan is to join all of these ideas once I am ready and create my own CV website of my own where I'll showcase all that I've learned in a sort of interactive website. Heads up, I'm getting there, slowly but steady, more slowly than steady to be honest but what the hell, slow and steady wins the race.
## Automatic typer
This will be a short project. I want to create an auto typing effect, so that it looks as if something is writing by itself, I am going to play with the speed of the typing and some other cool features. This is perfect for a Website's Hero or something like that.
<center><sub> This is the end result, pretty simple, but you'll see the whole process</sub></center>
### HTML Code
````
<body>
<h1 id="text">Welcome to the Hive Blockchain...</h1>
<div class="container">
<label for="speed">Speed:</label>
<input
type="number"
name="typingSpeed"
id="speed"
value="1"
min="1"
max="5"
step="1"
/>
</div>
<script src="script.js"></script>
</body>
</html>
````
### CSS Code
````@import url("https://fonts.googleapis.com/css2?family=Poppins");
* {
box-sizing: border-box;
}
body {
background-image: linear-gradient(90deg, #f51c1c, #ca6c65);
font-family: "Poppins", sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
margin: 0;
}
.container {
position: absolute;
bottom: 20px;
background: rgba(0, 0, 0, 0.1);
padding: 10px 20px;
font-size: 18px;
}
input {
width: 50px;
padding: 5px;
font-size: 18px;
background-color: #da7d7d;
border: none;
text-align: center;
}
input:focus {
outline: none;
}
````
### JavaScript
````
const textElement = document.getElementById("text");
const speedElement = document.getElementById("speed");
const text = "Prepare for the experience of a lifetime...";
````
The index variable depends of where we are in the *text* position.
````
let index = 1;
let speedValue = 100;
````
The higher the number, the slower the typing
````
let speed = speedValue / speedElement.value;
typingBegins();
function typingBegins() {
textElement.innerText = text.slice(0, index);
index++;
if (index > text.length) {
index = 1;
}
// This is to keep calling the function
setTimeout(typingBegins, speed);
}
````
I could hardcode the timeout time, but it is better to make it dynamic and set it to whatever the speed is
The input speed is not working yet, I still need to add an event listener to the *up and down arrows*
````
speedElement.addEventListener(
"input",
(e) => (speed = speedValue / e.target.value)
);
````
***
***
***
<sub>These projects are based on a CSS, HTML and JS paid course I got on Udemy by [Brad Traversy](https://www.udemy.com/course/50-projects-50-days/learn/lecture/23595546#content). I made my own changes and tweaks but the template so to speak, is his idea and I do not claim them to be my own. If you are looking to practice CSS and JavaScript, his courses are the way to go, check them out on Udemy.</sub>
👍 joeyarnoldvn, stortebeker, joele, jemmanuel, borbolet, gerber, ezzy, exyle, steem.leo, mice-k, polish.hive, dcityrewards, hivecur, reazuliqbal, daan, dune69, felander, caladan, pkocjan, bestboom, swisswitness, dlike, engrave, bobby.madagascar, followjohngalt, cakemonster, mfblack, milu-the-dog, triplea.bot, maxuvd, ribary, jelly13, dcrops, iansart, steem.services, linco, tiffin, ctime, shmoogleosukami, merlin7, tomiscurious, aleister, horpey, cheer-up, maxer27, crypto-whiz, anech512, yogacoach, holoferncro, rubencress, tesmoforia, kgakakillerg, karinxxl, actifitsmart, dhingvimal, lunaticpandora, jeffjagoe, isaria, fatman, investegg, abdulmath, dougbudlong, krommus, cryptosharon, clayboyn, sportschain, jagoe, nicollefiallo, yacobh, forykw, meanbees, abcor, abacam, kosimoos, dylanhobalart, petrarodriguez, slobberchops, jaynie, m-san, anomadsoul, jim888, nanzo-scoop, ak2020, t-bot, mummyimperfect, emily-cook, mafeeva, scoopstakes, nanzo-snaps, espoem, ctrpch, dickturpin, hope-on-fire, themarkymark, upmyvote, buildawhale, makerhacks, apeminingclub, tobias-g, recoveryinc, samrisso, netvalar, x30, arunbiju969, deadsparrow, da-dawn, dying, eturnerx, davidesimoncini, juanmiguelsalas, soyrosa, trans-juanmi, kilianmiguel, steem-on-2020, helgalubevi, stellazinc, edb, oluwoleolaide, tommy-gun, galenkp, beautifulwreck, steem-star, gloriaolar, satoshi-group, petrvl, belahejna, maajaanaa, slunicko, sanjeevm, rmach, abh12345, jayna, philnewton, misterengagement, jasonbu, manniman, tryskele, joalvarez, acidyo, mister-meeseeks, ghaazi, rendrianarma, leveluplifestyle, auliaarma, ninnu, passion-fruit, fortune-master, floatinglin, viviehardika, osavi, borran, thrasher666, fw206, aioflureedb, photographercr, emdy4, harpreetjanda, reward.app, tipy, jokinmenipieleen, techlhab, farpetrad,