diff --git a/form_a_story/ai_project_review.json b/form_a_story/ai_project_review.json new file mode 100644 index 0000000..3fcb5eb --- /dev/null +++ b/form_a_story/ai_project_review.json @@ -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": "", + "new_code": "" + }, + { + "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": "", + "new_code": "" + } + ], + "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": "", + "new_code": "" + }, + { + "description": "Add placeholder text to your inputs to provide users with example values, as suggested in the challenge task.", + "old_code": "", + "new_code": "" + } + ], + "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": "\n\n\n", + "new_code": "\n\n\n" + }, + { + "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": "", + "new_code": "" + } + ] +} \ No newline at end of file diff --git a/form_a_story/index.html b/form_a_story/index.html new file mode 100644 index 0000000..cc130e4 --- /dev/null +++ b/form_a_story/index.html @@ -0,0 +1,80 @@ + + + + + + + Form a Story + + +
+ Form A Story Logo +
+ +
+

Complete the Form -
Complete the Story!

+
+ +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + + +
+ + + Yes or No : + + + + +
+ + + + +
+ + + + + + + + +
+ + + + +
+ + + +
+
+ + diff --git a/form_a_story/main.js b/form_a_story/main.js new file mode 100644 index 0000000..34a3169 --- /dev/null +++ b/form_a_story/main.js @@ -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 = `

A ${firstAnimal} was making fun of the ${secondAnimal} one day for being so slow.

+ +

"Do you ever get anywhere?" he asked with a mocking laugh.

+ +

"${answer}," replied the ${secondAnimal}, "${conjunction} I get there ${speed} than you think. I'll run you a race and prove it."

+ +

The ${firstAnimal} was much ${adj1} at the idea of running a race with the ${secondAnimal}, but for the fun of the thing he agreed. So the ${thirdAnimal}, who had consented to act as judge, marked the distance yelled, "${quote}".

+ +

The ${firstAnimal} was soon far out of sight, and to make the ${secondAnimal} feel very deeply how ridiculous it was for him to try a race with a ${firstAnimal}, he went off the course to practice ${verb1} for ${num1} hours until the ${secondAnimal} should catch up.

+ +

The ${secondAnimal} meanwhile kept going slowly but steadily, and, after a time, passed the place where the ${firstAnimal} was ${verb1}. The ${firstAnimal} was so caught up in ${verb1}; and when at last he did stop, the ${secondAnimal} was near the goal. The ${firstAnimal} now ran his swiftest, but he could not overtake the ${secondAnimal} in time.

`; + +// Grabbing the title element +const title = document.getElementById('title'); +// Populating the title element with text +title.innerHTML = `The ${firstAnimal} And The ${secondAnimal}`; + +// 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 = `"${message}"`; diff --git a/form_a_story/original.html b/form_a_story/original.html new file mode 100644 index 0000000..0faa347 --- /dev/null +++ b/form_a_story/original.html @@ -0,0 +1,33 @@ + + + + Completed Story + + + + +
+ Form A Story Logo +
+
+

The Tortoise and the Hare

+
+

A Hare was making fun of the Tortoise one day for being so slow.

+ +

"Do you ever get anywhere?" he asked with a mocking laugh.

+ +

"Yes," replied the Tortoise, "and I get there sooner than you think. I'll run you a race and prove it."

+ +

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.

+ +

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.

+ +

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.

+
+ +
+ Start Over! +
+ + + diff --git a/form_a_story/story.html b/form_a_story/story.html new file mode 100644 index 0000000..984c5d9 --- /dev/null +++ b/form_a_story/story.html @@ -0,0 +1,25 @@ + + + + + Completed Story + + + + +
+ Form A Story Logo +
+
+

+
+

Moral of the story:

+
+
+ Start Over! + || + Original Story +
+ + + diff --git a/form_a_story/style.css b/form_a_story/style.css new file mode 100644 index 0000000..e3c591a --- /dev/null +++ b/form_a_story/style.css @@ -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; +}