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.



You will need to create a few classes for the elements associated with each <input>.

  1. Empty: The default look and feel you want before the user enters any text or after the user deletes all the text in an <input> element.
  2. In Focus: The way you want the labels to appear when text is entered
  3. Not in focus: How you want the label to appear when there is text in the <input> but it doesn’t have focus.

After that, you use JavaScript to add/remove relevant CSS classes to the <label> elements depending on which of the 3 states the <input> is in (empty/ in focus / not in focus).

Unless you are comfortable with JavaScript at this point, I think it’s fine to leave these things until you are closer to getting your certificate. It will be much easier to do at that point in your education compared to now. I think they added some “fancy” features to the portfolio project to show you what you will be capable of doing by the time you get your certificate - some goals to consider :slight_smile:


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?


Hi TinkApp,

You aren’t expected to know the JavaScript required to build the full portfolio example. Questions like yours pop up about the portfolio regularly in the HelpFrontEnd chat room. It’s good you’re trying though :slight_smile: your codepen at the moment is failing because you are missing quotes around the word button.

$(document).ready (function(){
  $('button').addClass ("animated bounce");

You can debug these errors by looking at your browser’s debug console - on Windows/Linux, Ctrl+Shift+J, on Mac OS Command+Option+J.