Learn html,css,vanill JS with practice part 1 (auto type text)
Hi, just in case, you might wondering what is this series about, this series is about learning html,css, and javascript directly with practice because practice makes perfect. you can get all the code on my github https://github.com/FaRusDev/portofolio_fadli/ here, and directly practice it, so without any further explanation let’s start this series.
Now we will learning how to make simple auto typing text animation on website, the main idea is if user type the words on input field, it will automatically type in the browser with customable speed. here is the result :
How is that ? are you ready ? let’s start it.
First, open your favorite editor and create a folder also named it anything you want, then make 3 files, they are index.html, style.css and script.js… here is mine
then open the index.html and type this code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- connecting to style css -->
<link rel="stylesheet" href="style.css">
<title>Auto Type Text</title>
</head>
<body>
<!-- this is the display input to the browser -->
<h1 id="text">Starting....</h1>
<div class="input__container">
<!-- the input for text that you want to display -->
<label for="textToDisplay">Text : </label>
<input type="text" name="textToDisplay" id="txt" placeholder="input type to display above">
<!-- the input for speed of animation that you want to display -->
<label for="speed">Speed : </label>
<input type="number" name="speed" id="speed" value="1" min="1" max="10" step="1">
<!-- button to start the animation -->
<button class="btn" id="btn" onclick="displayText()">Run Text</button>
</div>
<script src="script.js"></script>
</body>
</html>this is the skeleton of our project, as you see above nothing too special just a simple H1 and some input, just look at the number input with min value and max value, it’s just barrier to make users can’t input number whatever they want, also look at the onclick function on button, you have to type it if you want to run javascript function when it clicked.
Next, let’s move to the style.css file, and type this code :
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap');
*{
box-sizing: border-box;
}
body{
font-family: 'Montserrat', sans-serif;
background-color: #2f9c95;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
margin: 0;
}
#text{
color: #f1f7ee;
}
.input__container{
position: absolute;
bottom: 20px;
background: rgba(0, 0, 0, 0.1);
padding: 10px 20px;
font-size: 18px;
border-radius: 10px;
color: #f1f7ee;
}
.input__container input {
width: 100%;
padding: 3px;
font-size: 18px;
background-color: #f1f7ee;
border: none;
text-align: center;
border-radius: 5px;
margin-bottom: 10px;
}
.input__container input:focus{
outline: none;
}
.btn{
text-align: center;
padding: 10px;
width: 100%;
border-radius: 5px;
border: none;
background-color: #f29e4c;
color: #f1f7ee;
cursor: pointer;
}
.btn:hover{
background-color: #ca2e55;
}first, we import some font for our project, you can try to use any font that you want just try to looking at google font website.
on body element, we just try to center all the item inside and make the height to 100vh, it will make your body element’s height following your screen size, input some background color, also make it display flex and the flex-direction to column to make all the element inside body element start from up to bottom. The other element is just to style the element inside, nothing special. Just in case you don’t know what is the function of some code, you can absolutely looking for it on google or w3school.
Next for the last part let’s do the script.js here we go
//take all element based on their id
const text = document.getElementById('text')
const speed = document.getElementById('speed')
const textToDisplay = document.getElementById('txt')
const button = document.getElementById('btn')
//count slice string
let sliceString = 1
//setting speed 1000ms divided by speed value that you input
let speedVal = 1000 / speed.value
function displayText(){
//modif your h1 inner text to be value that you input on input element
//also slice it start from 1 (it's from the sliceString variable)
text.innerText = textToDisplay.value.slice(0, sliceString)
//after you slice it then it has to automatically move forward
//so we have to move to the next letter and set it as the new beginning of counting
sliceString = sliceString+1
//condition if the text that you input is already done
//then you have to make the sliceString to 1 again to start over the counting
if (sliceString > textToDisplay.value.length){
sliceString = 1
}
//this is the function to set the speed of the letter typed on the h1 element
//this is the example of callback function
setTimeout(displayText,speedVal)
}
//here is to set the speed when you type the speed on input element
speed.addEventListener('input', (e) => speedVal = 300 / e.target.value)
i wrote some comment up there to make it clear what is the function of some code. Feel free to type it and take your time to analyze it. There is nothing special just a simple standard javascript function. Back again you call the function directly from html so you don’t have to create onclick function on javascript file just to remind you here it the code of calling the javascript function from html with the name of the function.
<!-- button to start the animation -->
<button class="btn" id="btn" onclick="displayText()">Run Text</button>you see, it’s the displayText() function from our javascript file.
so that’s it. you can run it directly from your browser or using live server if you using vs code.
Hopefully, it can help you with your practice, see you in the next part of this series, feel free to check my profile to see the other part of this series.
