HTML Project Problem

I was working on this project in Introduction to HTML: https://www.codecademy.com/courses/learn-html/projects/form-a-story?action=resume_content_item

I have already created the button, and according to the walk-through video, when I click it, I should see the story with blank spaces, but instead, this is what happens:

Though I’m sure I followed the instructions carefully. Can anybody help?

1 Like

What are the instructions asking you to do actually? (Sorry but I can’t view that project without premium.)

Did the site in the mini browser to the right “https://localhost/story.html” pop up after clicking on your button? Your project file is called index.html but the browser is showing the content of a file called story.html - I don’t see a link to that page in your index.html - that’s why I’m asking for more info.

If all you need is seeing your button try navigating to “https://localhost/index.html” in the mini browser.

1 Like

Thank you for you reply.

My problem was actually that when I pressed my button, I am supposed to see the story with blank spaces, instead of what happened in the screenshot I sent you previously.

Here is what it actually asked me to do.

We’™ll be collecting information from our users using a <form> so, first, we have to add a <form> under the <hr> element inside the <body> of index.html .

Assign the <form> an action of "story.html" and a method of "GET" .

We’™ll be sending information from our form to story.html using a GET request.

In the <form> , create a submit button by adding an <input> with a type of "submit" . Assign the value a value of "Form My Story!" . Save your code to see the button rendered.

.We’ll be collecting information from our users using a <form> so, first, we have to add a <form> under the <hr> element inside the <body> of index.html .

Assign the <form> an action of "story.html" and a method of "GET" .

Weโ€™ll be sending information from our form to story.html using a GET request.

In the <form> , create a submit button by adding an <input> with a type of "submit" . Assign the value a value of "Form My Story!" . Save your code to see the button rendered.

And Here is a screenshot of what I did

.

And also, yes, https://localhost/story.html" did pop up after I pressed the button.

1 Like

Here is my code, maybe it can be of any assistance:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
    <title>Form a Story</title>
  </head>
  <body>
    <section id="top">
      <img src="https://s3.amazonaws.com/codecademy-content/courses/learn-html-forms/formAStoryLogo.svg" alt="Form A Story Logo">
    </section>

    <section id="main">
      <h1>Complete the Form -<br> Complete the Story!</h1>
      <hr>
      	<form action="story.html" method="GET">
          <label for="animal-1">Animal:</label>
          <input id="animal-1" name="animal-1" type="text" required>
          <br>
          <label for="animal-2">Another Animal:</label>
          <input id="animal-2" name="animal-2" type="text" required>
          <br>
          <label for="animal-3">One More Animal:</label>
          <input id="animal-3" name="animal-3" type="text" required>
          <br>
          <label for="adj-1">Adjective (past tense)</label>
          <input for="adj-1" name="adj-1" type="text" required>
          <br>
          <label for="verb-1">Verb (ends in -ing)</label>
          <input for="verb-1" name="verb-1" type="text" required>
          <br>
          <label for="num-1">Number:</label>
          <input id="num-1" name="num-1" type="number" required>
          <br>
          <span> Yes or No:</span>
          <input id="yes" type="radio" name="answer" value="yes" required>
          <label for="yes">Yes</label>
          <input id="no" type="radio" name="answer" value="no" required>
          <label for="no">No</label>
          <br>
          <label for="speed">Relative speed (ends in -er):</label>
          <select id="speed" required>
            <option value="faster">Faster</option>
            <option value="slower">Slower</option>
          </select>
          <br>
          <label for="quote">Motivational Quote:</label>
          <input id="quote" name="quote" type="text" list="quote-choices" required>
          <datalist id="quote-choices">
            <option value="winner gets ice cream!"></option>
            <option value="winner winner chicken dinner"></option>
            <option value="hasta la vista baby!"></option>
          </datalist>
          <br>
          <label for="message">Meaningful Message:</label>
          <br>
          <textarea id="message" name="message" required rows="8" cols="40"></textarea>
          <br>  
          <input type="submit" value="Form my Story!">	
      	</form>  
    </section>
  </body>
</html>
4 Likes

Besides the missing form closing tag </form> I wonder if it will work already by capitalizing some letters of the value so it matches the Form My Story! it asked you to put in there.

Some lessons are very case sensitive.

1 Like

I’m sorry, but your code doesn’t seem to work. The same thing happened Thank you for the thought though

1 Like

Thats weird because it does work for me ;). I finished this exercise with this code…

1 Like

Unfortunately, that doesn’t work either. Do you think it might be effected by the web browser I’m using? I’m using Edge.

1 Like

I don’t think so but trying out a different browser won’t hurt I guess. :slight_smile:

1 Like

I tried it with chrome, and it worked! Thank you for lending some help.

2 Likes