Ulrich
October 11, 2022, 11:07pm
1
Tell us what’s happening:
I’m stuck in the input function I don’t know how to do it
Your code so far
<html>
<body>
<main>
<h1>CatPhotoApp</h1>
<section>
<h2>Cat Photos</h2>
<!-- TODO: Add link to cat photos -->
<p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
</section>
<section>
<h2>Cat Lists</h2>
<h3>Things cats love:</h3>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<figure>
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
<figcaption>Cats <em>love</em> lasagna.</figcaption>
</figure>
<h3>Top 3 things cats hate:</h3>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<figure>
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
<figcaption>Cats <strong>hate</strong> other cats.</figcaption>
</figure>
</section>
<section>
<h2>Cat Form</h2>
<form action="https://freecatphotoapp.com/submit-cat-photo">
0 <input type="text" name="catphotourl" cat photo url="">
0 <input type="text" name="catphotourl" cat photo url="">
0 <input type="text" name="catphotourl" cat photo url="">
0 <input type="text" name="catphotourl" cat photo url="">
0 <input type="text" name="catphotourl" cat photo url="">
0 <input type="text" name="catphotourl" cat photo url="">
0 <input type="text" name="catphotourl" cat photo url="">
0 <input type="text" name="catphotourl" cat photo url="">
0 <input type="https://freecatphotoapp.com" >
</form>
</section>
</main>
</body>
</html>
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36 Edg/106.0.1370.37
Challenge: Learn HTML by Building a Cat Photo App - Step 40
Link to the challenge:
You only need to keep one input element and add the attribute “placeholder” to it with a value of “cat photo URL” … it should look like this, for example:
<input placeholder="dog photo URL" type="text" name="dogphotourl">
the placeholder attribute is used to have a subdued text inside of a text box prior to the user inputting their own text.
Ulrich
October 11, 2022, 11:27pm
3
I try that but the code don’t work and also
hbar1st
October 11, 2022, 11:31pm
4
this looks wrong…
Please reset the step.
(click the reset button to change all of this back to what it was)
after this you will be presented with one line of code in the editor:
<input type="text" name="catphotourl">
You are to add a placeholder attribute to that one line of code.
Remember, an html attribute is just a key=“value” pair (just like type is an attribute with value of “text” for eg)
So add placeholder the same way you would add the type attribute
Ulrich
October 11, 2022, 11:37pm
5
I don’t understand
I’ve try to replace the value of this but the refuse
hbar1st
October 11, 2022, 11:41pm
6
which part did you not understand?
I hope you are able to click on the Reset button at least?
Ulrich
October 11, 2022, 11:46pm
7
I did and I did as you said but the code still don’t work
hbar1st
October 12, 2022, 12:00am
8
okay, please post your new code here?
Ulrich
October 12, 2022, 12:04am
9
<input placeholder="https://freecatphotoapp.com" type="text" name="catphotourl" >
hbar1st
October 12, 2022, 12:05am
11
I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
You can also use the “preformatted text” tool in the editor (</>
) to add backticks around text.
See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').
hbar1st
October 12, 2022, 12:06am
12
Ulrich:
okay, you have a placeholder attribute now, that is a good step forward.
But you don’t have the proper value for it.
The exercise says:
Add the placeholder text cat photo URL
to your input
element.
So you should use the text they gave instead
Ulrich
October 12, 2022, 12:09am
13
I just try but it still no working
hbar1st
October 12, 2022, 12:14am
17
I can’t test your code as you have posted an image.
Please post your actual code.
hbar1st
October 12, 2022, 12:17am
19
I can’t see it because you have not enclosed it in a code block.
Please take a look at the instructions I posted earlier
I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.
[Pre-formatted-text]
See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').
Ulrich
October 12, 2022, 12:20am
20
<input placeholder="cat photo URL" type="text" name="catphotourl">
I’ve try as you said but is not working