Portfolio - making <input> field placeholders disappear and labels appear when typing text? How do I do that?


I am working on TinkApp’s Portfolio and I need help with making the placeholder field disappear when the user is typing text and the label to appear at the same time as per the MockUp Portfolio here

I am not sure where to start from so I can make the labels react to the users when they are typing the text. I assume that’s JQuery. However, I really don’t know how to make it.

I tested whether JQuery is working on my pen but no success. Not sure whether I need to add an additional library to my pen.

Please, help me step by step build this interactive labels.


As a good learning option, you can use the “Inspect Element” option if you are familiar with that. Then you can look at how the user is doing it to get an idea of how to do it. This will provide the CSS attributes for the different controls.
But as you suspected, it is using JQuery to display the Label. You can look at the “Source” and find the page with the source code on it.
To use Inspect Element place cursor over an element then right click and select “Inspect” or “Inspect Element”. You can also select the F12 key which will also bring up the Developer Tools where you can view CSS, HTML and many other things.

I already looked up the code in Dev tools and I saw the HTML and the CSS in the Style tab but I am not sure where/how to see the JQuery.
I only did the 3 hour exercises on freeCodeCamp on JQuery and I am stuck with these part of the portfolio for days.
I will appreciate some help

You might be right.
I haven’t even started JavaScript yet (except for the 3 hour JQuery on freeCodeCamp) but this project is listed as a beginner project and after the HTML, CSS and JQuery and I thought I was supposed to be capable of completing it.

Hi SkyC,

I added JQuery and wrote a test code in JS just to check if the JQuery is working but it seems something is wrong as I can’t make it work. Can you take a look?