3 Things I've learned by building the form-input-wave project
I'm following Florin Pop and traversymedia 50 Javascript, HTML, and CSS tutorials on Udemy. This is a great way to put into practice CSS properties I've learned but use rarely as well as do refresh some JavaScript DOM manipulation concepts. While going through the form-input-wave tutorial I got a better understanding on how some of the display properties work (inline, inline-block and block). I might write about this soon so do check back.
Here are the 3 main takeaways:
- How one can create a span for each character of a word.
Simply by using the array split method from JS and adding the span around the element and then joining the word back using the join method, voila :) Here's the example of it:
<h1 class="title" id="title">Hello, world!</h1>
<script>
const title = document.getElementById("title");
title.innerHTML = title.innerText
.split('')
.map((letter, index) =>
`<span
style="color:${"#"+Math.floor(Math.random()*16777215)
.toString(16)}">${letter}</span>`)
.join('')
</script>
<span style="color:${"#"+Math.floor(Math.random()*16777215)
.toString(16)}">${letter}</span>
To make more of sense it I added in the span
some inline style to generate a random color. I took the random color generating code from this post.
Showcasing code with visual example:
Besides this I've also learned about the propriety pointer-events
and what happens when this is set to none.
- What
pointer-events:none;
can be used for.
When we choose pointer-events:none;
the element is never the target of a pointer event. The pointer will go "through" an element and target whatever is "underneath" that element instead. *source
This was needed as the label was initial set on the input box and it was hard to select the input otherwise. You can see that per the position:absolute;
.
.form-control label {
position: absolute;
top: 15px;
left: 0px;
pointer-events: none;
}
In the picture below one can see that the labe is on the input field which is exactly where the line is. Therefore if there would be no pointer-events: none;
one would not be able to select with the pointer the input field when clicking on Email.
In example 2 we can see that once the field is selected the label goes up as we set it with CSS in the project. I will highlight this next.
- Move up the label of a input field by a certain measure using the
transform
propriety.
In order to do this one would use the transform property translateY
and give it a negative value. It's Y as it is on the Y axis and negative so it goes up.
.form-control input:focus + label span,
.form-control input:valid + label span {
color: #91cbed;
transform: translateY(-48px);
}
That's all for now! Thanks for reading 🙈