Assignments

Solution

1. Intro Javascript / HTML Form Fills

Prompt:

Points: 10

Using a combination of HTML, CSS and JavaScript, create an interactive “poetry creator” on a web page. The guidelines below walk you through the HTML elements you need, but feel free to change the style of the output. The important thing is that the JavaScript and HTML function correctly.

Guidelines:

1. Create two separate side-by-side containers
• A container for your poem entry form that should include a text input form and a button to “submit” your poem entries
• A container to display your poetry that fills itself in with the text you enter in the entry form
2. Each container should have a hover effect
3. Stretch goal: try to write the form so the displayed text doesn’t disappear as you add more lines
1. Hint: use the += operator to concatenate the new strings you enter to a single accumulating string you display in the container on the right.

Here’s a screenshot of the final output. Your page doesn’t have to replicate exactly what is shown here.

Tips/resources for getting started:

• In-Class JavaScript Forms example on Codepen.io
• A collection of step-by-step coding examples on Codepen.io specific to this homework assignment (this is really helpful if you don’t know how to start!)
• Intro JavaScript tutorials that reinforce the basics we covered in class (the “Basic JavaScript” section in JavaScript Algorithms and Data Structures Certification) Do as many of these as you want, but I recommend completing tutorials 1-28 to help you with this homework assignment.

How to submit:

You can submit this assignment in either of these two ways:

• Create your page in a Pen in Codepen.io, and submit a link to your Pen to this Canvas Assignment
• Create an Assignment06 folder and the necessary HTML, CSS and JavaScript files in VS Code (index.html, style.css, main.js). Push your changes to your class portfolio website on GitHub pages, and add a link to Assignment 06 on your Assignments page. Submit a link to your Assignments page in Assignment 06 on Canvas

How to receive full credit:

• The link you submit should take me to the correct page to view your answer. MAKE SURE TO TEST YOUR LINK BEFORE SUBMITTING.
• You should have two side-by-side containers
• You should have a text input form
• You should have a button
• When the button is pressed, text in the input form should appear in the container on the right.