diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000..d24f072
Binary files /dev/null and b/.DS_Store differ
diff --git a/README.md b/README.md
index 83ce771..27173fe 100644
--- a/README.md
+++ b/README.md
@@ -1,22 +1,52 @@
-# 📊 Project: Complex API 2
+# Poetry Word Cloud Generator
-### Goal: Use data returned from one api to make a request to another api and display the data returned
+- An application that generates a random classic poem and then turns it into a word cloud using a chain of APIs.
-### How to submit your code for review:
+## [Live Demo](https://jj-javascript.github.io/Poetry-Word-Cloud-Generator/)
-- Fork and clone this repo
-- Create a new branch called answer
-- Checkout answer branch
-- Push to your fork
-- Issue a pull request
-- Your pull request description should contain the following:
- - (1 to 5 no 3) I completed the challenge
- - (1 to 5 no 3) I feel good about my code
- - Anything specific on which you want feedback!
+## Table of Contents
+1. [Project Overview](#project-overview)
+2. [Features](#features)
+3. [Technologies Used](#technologies-used)
+4. [Installation](#installation)
+5. [Usage](#usage)
-Example:
-```
-I completed the challenge: 5
-I feel good about my code: 4
-I'm not sure if my constructors are setup cleanly...
+## Project Overview
+
+Poetry Word Cloud Generator is an application that lets users view classic poems in dynamic word cloud shapes.
+
+
+
+
+
+## Features
+
+- Button to generate random classic poem.
+- Word Cloud Generation.
+
+## Technologies Used
+
+
+
+## Installation
+
+1. Clone the repository:
+
+```bash
+git clone https://github.com/yourusername/Poetry-Word-Cloud-Generator.git
+````
+
+2. Navigate to the project directory:
+
+```bash
+cd poetry-word-cloud-generator
```
+
+3. Open Project File
+
+4. Use in browser
+
+## Usage
+
+1. Click "Click for Cloud" button to generate poem.
+2. Watch as the poem is turned into a word cloud.
diff --git a/css/style.css b/css/style.css
new file mode 100644
index 0000000..e89e0a7
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,38 @@
+*{
+ box-sizing: border-box;
+ background-color:honeydew;
+}
+
+h1{
+ text-align: center;
+}
+
+.button{
+ display: flex;
+ justify-content: center;
+}
+
+button{
+ width: 30%;
+ font-size: 120%;
+ font-weight: bold;
+}
+
+p{
+ overflow: scroll;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ font-family: "Cormorant SC", serif;
+ font-weight: 300;
+ font-style: normal;
+ font-size: 1em;
+}
+
+img{
+ display: flex;
+ justify-content: center;
+ width: 100%;
+}
+
+
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..34b000a
--- /dev/null
+++ b/index.html
@@ -0,0 +1,26 @@
+
+
+
+
+
+ Poetry Word Cloud Generator
+
+
+
+
+
+
Poetry Word Cloud Generator
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/js/main.js b/js/main.js
new file mode 100644
index 0000000..33b3141
--- /dev/null
+++ b/js/main.js
@@ -0,0 +1,38 @@
+// alert("La buena guana bana");
+
+
+document.querySelector('button').addEventListener('click', getPoem)
+
+
+// const img = "https://quickchart.io/wordcloud?text=How%soon hath Time, the subtle thief of youth,,Stoln on his wing my three and twentieth year!,My hasting days fly on wtih full career,,But my late spring no bud or blossom shew'th.,Perhaps my semblance might deceive the truth,,That I to manhood am arrived so near,,And inward ripeness doth much less appear,,That some more timely-happy spirits endu'th.,Yet be it less or more, or soon or slow,,It shall be still in strictest measure even,To that same lot, however mean or high,,Toward which Time leads me, and the will of Heaven;,All is, if I have grace to use it so,,As ever in my great Taskmaster's eye."
+
+
+function getPoem () {
+ const api_URL = "https://poetrydb.org/random/1.text"
+ const poemPlace = document.querySelector('p').innerHTML
+
+ document.querySelector('p').innerHTML = ''
+
+ fetch(api_URL)
+ .then(res => res.json())
+ .then(data => {
+ console.log(data)
+ document.querySelector('p').innerHTML += `
${data[0].lines}
`
+ getCloud(data[0].lines)
+}
+
+)}
+
+// Mentor Karim Hassan helped me debug this to get the image to populate
+function getCloud (text) {
+ const cloud_URL = "https://quickchart.io/wordcloud?text="
+ const imgText = document.querySelector('div').innerHTML
+ console.log(text.join(' '))
+ const cleanText = encodeURIComponent(text.slice(0,20).join(' '))
+ console.log(cleanText)
+ fetch(`https://quickchart.io/wordcloud?text=${cleanText}`)
+ .then(res => {
+ document.querySelector('img').src = res.url
+})
+
+}
\ No newline at end of file
+
+## Installation
+
+1. Clone the repository:
+
+```bash
+git clone https://github.com/yourusername/Poetry-Word-Cloud-Generator.git
+````
+
+2. Navigate to the project directory:
+
+```bash
+cd poetry-word-cloud-generator
```
+
+3. Open Project File
+
+4. Use in browser
+
+## Usage
+
+1. Click "Click for Cloud" button to generate poem.
+2. Watch as the poem is turned into a word cloud.
diff --git a/css/style.css b/css/style.css
new file mode 100644
index 0000000..e89e0a7
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,38 @@
+*{
+ box-sizing: border-box;
+ background-color:honeydew;
+}
+
+h1{
+ text-align: center;
+}
+
+.button{
+ display: flex;
+ justify-content: center;
+}
+
+button{
+ width: 30%;
+ font-size: 120%;
+ font-weight: bold;
+}
+
+p{
+ overflow: scroll;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ font-family: "Cormorant SC", serif;
+ font-weight: 300;
+ font-style: normal;
+ font-size: 1em;
+}
+
+img{
+ display: flex;
+ justify-content: center;
+ width: 100%;
+}
+
+
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..34b000a
--- /dev/null
+++ b/index.html
@@ -0,0 +1,26 @@
+