Please give me the code to do this, I could not figure it out last time I did it and want to see where I went wrong

$($for practice and learning purposes!!! this is an old pr$0$ject$)$

You might be better off just looking at the screenshots!!

Task $1$: Create an index.html

As always, create the proper folders and an index, css$,$ and JavaScript files for this lab. And make sure you also put a link from your art$101$ homepage to

this lab

As usual, create an index.html with three organized sections: Challenge, Problems, and Results

Use heading, div, and paragraph tags to organize your page

Include jQuery in the of your HTML along with your css and JavaScript with: Task $2$: Create a CSS file for your lab

Do all the usual things to gussy up your page letting your creativity fly. Once you get your JavaScript working, you may want to go back and customize

the results of your JavaScript in CSS$.$ Here's what mine looks like:

$.$text p $\{$

display: inline$-$block;

max$-$width: $60\%$;

margin: $3px$;

padding: $5px10$px;

border$-$radius: $15$px;

background$-$color: darkgray;

color: white;

font$-$family: sans$-$serif;

font$-$size: $0\mathrm{.}8em$;

$(3)$

Task $3$: Create a JavaScript file

Create a new javascript file $($or use the existing template$)$ in your code editor in your lab's js folder.

Comment block: Put a comment block at the top of your program. Here's what mine looks like:

lab.js $-$ This simple JavaScript$/$jQuery script appends new elements to an output div

Requirements: jQuery must be loaded for this script to work.

Author: Wes modes

Date: $2023$

$*/$

Let's create a little helper function that will generate some fake dialogue:

function generateRandomText$()\{$

const text $=$ "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut const text $=$ "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut

enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

const min$=3$;

const max$=100$

const randLen $=$ Math.floor$($Math$.$ random$()**(max-$min$+1)$;

$//$ Get a random starting index to slice the Lorem Ipsum text

const randStart $=$ Math.floor$($Math$.$random$()*($text$.$length $-$ randLen $+1))$;

$//$ Generate the random Lorem Ipsum$-$like text

return text.slice$($randStart$,$ randStart $+$ randLen$)$;

$(3)$

Add an event listener for your button:

Within the event listener call back, call our little helper function and save the results:

Now, select your output div and append a new div with your newText:

Test your button.

Remember:

Experiment with new commands in the JavaScript console to see how they work

Add comments to your function to say what it does

In the body of your HTML add a section in which we can put our output:

Put a button under your output div:

Add a link to your JavaScript file in your index page.

Take a screenshot of your source code in the editor.

Task $2$: Create a CSS file for your lab

Do all the usual things to gussy up your page letting your creativity fly. Once you get your JavaScript working, you may want to go back and customize

the results of your JavaScript in CSS$.$ Here's what mine looks like:

$.$text $p\{$

display: inline$-$block;

max$-$width: $60\%$