Resilient-Labs · jj-javascript · Oct 6, 2025 · Oct 7, 2025 · Nov 11, 2025 · Nov 11, 2025
diff --git a/.DS_Store b/.DS_Store
diff --git 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.
+
+<img width="1920" height="960" alt="Poetry Word Cloud 1" src="https://github.com/user-attachments/assets/75c5a863-5629-45eb-89f9-e07d7700ea81" />
+<img width="1920" height="955" alt="Poetry Word Cloud 2" src="https://github.com/user-attachments/assets/b13f4319-38a7-47c0-bbad-339db7af37f7" />
+
+
+## Features
+
+- Button to generate random classic poem.
+- Word Cloud Generation.
+
+## Technologies Used
+
+<a href="https://code.visualstudio.com/" target="_blank" rel="noreferrer"><img src="https://raw.githubusercontent.com/danielcranney/readme-generator/main/public/icons/skills/visualstudiocode-colored.svg" alt="VS Code" title="VS Code" width="36" height="36" /></a> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank" rel="noreferrer"><img src="https://raw.githubusercontent.com/danielcranney/readme-generator/main/public/icons/skills/javascript-colored.svg" alt="JavaScript" title="JavaScript" width="36" height="36" /></a>  <a href="https://developer.mozilla.org/en-US/docs/Glossary/HTML5" target="_blank" rel="noreferrer"><img src="https://raw.githubusercontent.com/danielcranney/readme-generator/main/public/icons/skills/html5-colored.svg" alt="HTML5" title="HTML5" width="36" height="36" /></a>  <a href="https://www.w3.org/TR/CSS/#css" target="_blank" rel="noreferrer"><img src="https://raw.githubusercontent.com/danielcranney/readme-generator/main/public/icons/skills/css3-colored.svg" alt="CSS3" title="CSS3" width="36" height="36"/></a>  <a href="https://git-scm.com/" target="_blank" rel="noreferrer"><img src="https://raw.githubusercontent.com/danielcranney/readme-generator/main/public/icons/skills/git-colored.svg" alt="Git" title="Git" width="36" height="36" /></a>
+
+## 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
@@ -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
@@ -0,0 +1,26 @@
+<DOCTYPE! html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <meta name="description" content="An app that will turn poems into wordclouds"
+        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+        <title>Poetry Word Cloud Generator</title>
+        <link rel="stylesheet" href="css/style.css">
+        <style>@import url('https://fonts.googleapis.com/css2?family=Cormorant+SC:wght@300;400;500;600;700&display=swap');</style>
+    </head>
+
+<body>
+    <h1>Poetry Word Cloud Generator</h1>
+    <!-- <label for="author">Choose An Author</label>
+    <select name="author" id="authorlist">
+    </select>
+    <label for="poem">Choose A Poem</label>
+    <select name="poem" id="poemlist">
+    </select> -->
+    <section class="button">
+    <button>☁️Click For Cloud☁️</button>
+    </section>
+    <p></p>
+    <script type="text/javascript" src="js/main.js"></script>
+</body>
+</html>
diff --git a/js/main.js 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 += `<div><img>${data[0].lines}</div>`
+            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
+})
+
+}