gauvain/codecademy
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Adding Form a Story project

Browse Source
This commit is contained in:
gauvainboiche
2025-07-29 16:14:37 +02:00
parent 1a9e0c8e2b
commit c15ff7a816
6 changed files with 301 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
form_a_story/ai_project_review.json Normal file
View File

@@ -0,0 +1,53 @@
{
"purpose": [
{
"description": "Great job! Your form collects all the required information for the story, including animals, adjective, verb, number, yes/no, speed, quote, and a meaningful message. The form submits to story.html using GET as required.",
"old_code": "",
"new_code": ""
},
{
"description": "The label for the first animal should be 'Animal:' instead of 'First Animal :', and similarly for the other animal and adjective fields. This will better match the project instructions.",
"old_code": "<label for=\"animal-1\">First Animal :</label>",
"new_code": "<label for=\"animal-1\">Animal:</label>"
},
{
"description": "The label for the adjective should be 'Adjective (ends in -ed):' and for the verb 'Verb (ends in -ing):' to match the instructions.",
"old_code": "<label for=\"adj-1\">First Adjectiv (ends in -ed) :</label>",
"new_code": "<label for=\"adj-1\">Adjective (ends in -ed):</label>"
}
],
"readability": [
{
"description": "Your code is well-structured and each input is clearly labeled, making it easy to follow.",
"old_code": "",
"new_code": ""
},
{
"description": "Consider removing extra spaces before colons in your labels for consistency and readability.",
"old_code": "<label for=\"animal-2\">Second Animal :</label>",
"new_code": "<label for=\"animal-2\">Another Animal:</label>"
},
{
"description": "Add placeholder text to your inputs to provide users with example values, as suggested in the challenge task.",
"old_code": "<input type=\"text\" id=\"animal-1\" name=\"animal-1\" value=\"fox\" required>",
"new_code": "<input type=\"text\" id=\"animal-1\" name=\"animal-1\" value=\"fox\" placeholder=\"e.g. tortoise\" required>"
}
],
"performance": [
{
"description": "You used the 'required' attribute and appropriate input types for validation, which is great for user experience.",
"old_code": "",
"new_code": ""
},
{
"description": "For the radio buttons, you only need the 'required' attribute on one of the options, not both.",
"old_code": "<input type=\"radio\" id=\"yes\" name=\"answer\" value=\"yes\" required>\n<label for=\"yes\">Yes</label>\n<input type=\"radio\" id=\"no\" name=\"answer\" value=\"no\" required>\n<label for=\"no\">No</label>",
"new_code": "<input type=\"radio\" id=\"yes\" name=\"answer\" value=\"yes\" required>\n<label for=\"yes\">Yes</label>\n<input type=\"radio\" id=\"no\" name=\"answer\" value=\"no\">\n<label for=\"no\">No</label>"
},
{
"description": "You can add more validation to your number input, such as min, max, and step, which you already did. Consider adding minlength or pattern attributes to text fields for even better validation.",
"old_code": "<input type=\"text\" id=\"adj-1\" name=\"adj-1\" value=\"gawked\" required>",
"new_code": "<input type=\"text\" id=\"adj-1\" name=\"adj-1\" value=\"gawked\" pattern=\".*ed$\" required>"
}
]
}

80
form_a_story/index.html Normal file
View File

@@ -0,0 +1,80 @@
<!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://content.codecademy.com/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>
<!--Add your form below:-->
<form action="/story.html" method="GET">
<!-- Text selection -->
<label for="animal-1">First Animal :</label>
<input type="text" id="animal-1" name="animal-1" value="fox" required>
<br>
<label for="animal-2">Second Animal :</label>
<input type="text" id="animal-2" name="animal-2" value="bunny" required>
<br>
<label for="animal-3">Third Animal :</label>
<input type="text" id="animal-3" name="animal-3" value="capybara" required>
<br>
<label for="adj-1">First Adjectiv (ends in -ed) :</label>
<input type="text" id="adj-1" name="adj-1" value="gawked" required>
<br>
<label for="verb-1">First Verb (ends in -ing) :</label>
<input type="text" id="verb-1" name="verb-1" value="running" required>
<br>
<!-- Number selection -->
<label for="num-1">Number :</label>
<input type="number" id="num-1" name="num-1" value="100" min="10" max="500" step="10" required>
<br>
<!-- Radio selection -->
<span>Yes or No :</span>
<input type="radio" id="yes" name="answer" value="yes" required>
<label for="yes">Yes</label>
<input type="radio" id="no" name="answer" value="no" required>
<label for="no">No</label>
<br>
<!-- List selection -->
<label for="speed">Relative speed :</label>
<select id="speed" name="speed" required>
<option value="slower">Slower</option>
<option value="faster">Faster</option>
</select>
<br>
<label for="quote">Motivational Quote :</label>
<input type="text" id="quote" name="quote" list="quote-choices" required>
<datalist id="quote-choices">
<option value="humility is key">Humility is key.</option>
<option value="brag after winning">Brag after winning.</option>
<option value="never get cocky">Never get cocky.</option>
</datalist>
<br>
<!-- Text input -->
<label for="message"></label>
<textarea id="message" name="message" rows="8" cols="40" required></textarea>
<br>
<!-- Final rendering of the story -->
<input type="submit" value="Form My Story!">
</form>
</section>
</body>
</html>

54
form_a_story/main.js Normal file
View File

@@ -0,0 +1,54 @@
// Grab values from the submitted form in the URL
const words = new URLSearchParams(window.location.search);
// Cleans up and capitalizes the names of the animals
function cleanAndCap (str){
if(!str) return null
let temp = str.trim()
return temp[0].toUpperCase() + temp.substring(1)
}
// Assigning the variables with values used in the story
const firstAnimal= cleanAndCap(words.get('animal-1'));
const secondAnimal = cleanAndCap(words.get('animal-2'));
const answer = cleanAndCap(words.get('answer'));
const conjunction = answer === 'Yes' ? 'and' : 'but';
const speed = words.get('speed');
const adj1 = words.get('adj-1');
const thirdAnimal = cleanAndCap(words.get('animal-3'));
const quote = words.get('quote');
const verb1 = words.get('verb-1');
const num1 = words.get('num-1');
const message = words.get('message');
// The string containing HTML and text which will populate the story.html page
const story = `<p>A <span class="word" title="id: animal-1">${firstAnimal}</span> was making fun of the <span class="word" title="id: animal-2">${secondAnimal}</span> one day for being so slow.</p>
<p>"Do you ever get anywhere?" he asked with a mocking laugh.</p>
<p>"<span class="word" title="id: answer">${answer}</span>," replied the <span class="word" title="id: animal-2">${secondAnimal}</span>, "${conjunction} I get there <span class="word" title="id: speed">${speed}</span> than you think. I'll run you a race and prove it."</p>
<p>The <span class="word" title="id: animal-1">${firstAnimal}</span> was much <span class="word" title="id: adj-1">${adj1}</span> at the idea of running a race with the <span class="word" title="id: animal-2">${secondAnimal}</span>, but for the fun of the thing he agreed. So the <span class="word" title="id: animal-3">${thirdAnimal}</span>, who had consented to act as judge, marked the distance yelled, "<span class="word" title="id: quote">${quote}</span>".</p>
<p>The <span class="word" title="id: animal-1">${firstAnimal}</span> was soon far out of sight, and to make the <span class="word" title="id: animal-2">${secondAnimal}</span> feel very deeply how ridiculous it was for him to try a race with a <span class="word" title="id: animal-1">${firstAnimal}</span>, he went off the course to practice <span class="word" title="id: verb-1">${verb1}</span> for <span class="word" title="id: num-1">${num1}</span> hours until the <span class="word" title="id: animal-2">${secondAnimal}</span> should catch up.</p>
<p>The <span class="word" title="id: animal-2">${secondAnimal}</span> meanwhile kept going slowly but steadily, and, after a time, passed the place where the <span class="word" title="animal-1">${firstAnimal}</span> was <span class="word" title="id: verb-1">${verb1}</span>. The <span class="word" title="id: animal-1">${firstAnimal}</span> was so caught up in <span class="word" title="id: verb-1">${verb1}</span>; and when at last he did stop, the <span class="word" title="id: animal-2">${secondAnimal}</span> was near the goal. The <span class="word" title="id: animal-1">${firstAnimal}</span> now ran his swiftest, but he could not overtake the <span class="word" title="id: animal-2">${secondAnimal}</span> in time.</p>`;
// Grabbing the title element
const title = document.getElementById('title');
// Populating the title element with text
title.innerHTML = `The <span class="word" title="id: animal-1">${firstAnimal}</span> And The <span class="word" title="id: animal-2">${secondAnimal}</span>`;
// Grabbing the story element
const storyEl = document.getElementById('story');
// Populating the story element with the value of the story variable
storyEl.innerHTML = story;
// Grabbing the moral-message element
const moralMessage = document.getElementById('moral-message');
// Populating the moral-message element with text
moralMessage.innerHTML = `<span class="italics" title="id: message">"${message}"</span>`;

33
form_a_story/original.html Normal file
View File

@@ -0,0 +1,33 @@
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Completed Story</title>
<script type="text/javascript" src="main.js" defer></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section id="top">
<img src="https://content.codecademy.com/courses/learn-html-forms/formAStoryLogo.svg" alt="Form A Story Logo">
</section>
<section id="main">
<h1 id="orig-title">The Tortoise and the Hare</h1>
<article id="orig-story">
<p>A Hare was making fun of the Tortoise one day for being so slow.</p>
<p>"Do you ever get anywhere?" he asked with a mocking laugh.</p>
<p>"Yes," replied the Tortoise, "and I get there sooner than you think. I'll run you a race and prove it."</p>
<p>The Hare was much amused at the idea of running a race with the Tortoise, but for the fun of the thing he agreed. So the Fox, who had consented to act as judge, marked the distance and started the runners off.</p>
<p>The Hare was soon far out of sight, and to make the Tortoise feel very deeply how ridiculous it was for him to try a race with a Hare, he lay down beside the course to take a nap until the Tortoise should catch up.</p>
<p>The Tortoise meanwhile kept going slowly but steadily, and, after a time, passed the place where the Hare was sleeping. But the Hare slept on very peacefully; and when at last he did wake up, the Tortoise was near the goal. The Hare now ran his swiftest, but he could not overtake the Tortoise in time.</p>
</article>
<hr>
<a href="index.html">Start Over!</a>
</section>
</body>
</html>

25
form_a_story/story.html Normal file
View File

@@ -0,0 +1,25 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Completed Story</title>
<script type="text/javascript" src="main.js" defer></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section id="top">
<img src="https://content.codecademy.com/courses/learn-html-forms/formAStoryLogo.svg" alt="Form A Story Logo">
</section>
<section id="main">
<h1 id="title"></h1>
<article id="story"></article>
<h2 id="moral">Moral of the story:</h2>
<article id="moral-message"></article>
<hr>
<a href="index.html">Start Over!</a>
<span> || </span>
<a href="original.html">Original Story</a>
</section>
</body>
</html>

56
form_a_story/style.css Normal file
View File

@@ -0,0 +1,56 @@
body {
background-color: rgb(255, 199, 64);
font-family: "Open Sans", Arial;
}
form {
line-height: 27px;
}
h2 {
font-size: 20px;
}
input[type="text"], input[type="number"] {
min-height: 15px;
border-radius: 5px;
border:1px solid #cccccc;
}
input[type="radio"] {
margin-left: 12px;
}
#main {
background-color: rgba(255,255,255,0.8);
text-align: center;
height: 80vh;
border-radius: 15px;
margin: 2% 10%;
overflow: auto;
}
#story {
padding: 0 3%;
}
#top {
background-color: rgb(255, 255, 255);
margin: 2% 10%;
border-radius: 15px;
}
#top img {
display: block;
width: 35%;
margin: 0 auto;
}
.italics {
font-style: italic;
}
.word {
font-weight: bold;
text-decoration: underline;
}