From dace49e33ffe8e8fccd00698803613cc9769f8cf Mon Sep 17 00:00:00 2001
From: WizardOfWhimsical <st.rayis1085@gmail.com>
Date: Wed, 17 Sep 2025 13:10:11 -0400
Subject: [PATCH 1/8] updated todo list in readMe.

---
 README.md | 38 ++++++++++++++++++++++++++++++++++++--
 1 file changed, 36 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 57fc944..1d57f3a 100644
--- a/README.md
+++ b/README.md
@@ -178,5 +178,39 @@ this is for when i forget where i am at and so i can see me little wins!
             [] can make for edit and populational read, 
             [] for edit just reshow modal and populate with the mesage info?
 Reviewer
-    []  A click on your "Leave me a Message" button, should redirect to the your message form
-        going into nav to add link to the page for html
\ No newline at end of file
+    [x]  A click on your "Leave me a Message" button, should redirect to the your message form
+        going into nav to add link to the page for html
+
+
+    [] Open your index.js file, starting below the code from the previous lesson
+    [] Using the Fetch API, 
+    [] create a "GET" request to https://api.github.com/users/{GITHUB_USERNAME}/repos where {GITHUB_USERNAME} is your username for your GitHub account
+        hint: the fetch function
+        hint: "GET" is the default method for fetch
+    [] Chain a then method to your fetch call
+    [] pass it a function that returns the response JSON data
+    [] Chain another then method and pass it a callback function to parse the response and store it in a variable named repositories
+        hint: JSON.parse(this.response)
+    [] Console.log the value of repositories to better see the data returned from your API fetch
+    [] Save and refresh your browser (or just check your browser for changes if using live extension)
+    [] You should see the list of your GitHub repositories displayed in your console.
+
+    [] Chain a catch() function to your fetch call to handle errors from the server so the user would know what happened if your Projects section was empty.
+        [] try{}catch{} inside the fetch function. then()catch() on chaining promises
+
+    [] Create a variable names projectSection; using "DOM Selection" to select the projects section by id
+    [] Create a variable named projectList; using "DOM Selection" query the projectSection (instead of the entire document) to select the
+element
+    [] Create a for loop to iterate over your repositories Array, starting at index 0
+    [] Inside the loop, create a variable named project to make a new list item (li) element
+        hint: createElement method
+    [] On the next line, set the inner text of your project variable to the current Array element's name property
+        hint: access the Array element using bracket notation
+    [] On the next line, append the project element to the projectList element
+        hint: appendChild method
+    [] Save and refresh your browser (or just check your browser for changes if using live extension)
+You should see your list of repositories beneath the "Projects" heading on your portfolio site
+
+ Add styling to your projects list, be sure to account for any changes you want in media queries
+ STRETCH GOAL: Use flexbox (or grid) to style your list of repositories
+By the end of this assignment, you should have a working API fetch to your GitHub account and be able to see a list of your repository names in the Projects section of your portfolio.  Were there to be a server error during the API fetch, your site would return an error message.  Your project list should be styled using flexbos or grid.
\ No newline at end of file

From f25c0aa5f1f3d772fd27a52c650a9e84c0939aec Mon Sep 17 00:00:00 2001
From: WizardOfWhimsical <st.rayis1085@gmail.com>
Date: Wed, 17 Sep 2025 20:22:11 -0400
Subject: [PATCH 2/8] added fetch with console.log()

---
 html/projects.html    |  3 ++-
 js/projects.js        | 21 +++++++++++++++++++++
 styles/rootColors.css |  4 ++--
 3 files changed, 25 insertions(+), 3 deletions(-)
 create mode 100644 js/projects.js

diff --git a/html/projects.html b/html/projects.html
index fffbe95..ce26d96 100644
--- a/html/projects.html
+++ b/html/projects.html
@@ -42,6 +42,7 @@ <h2>Contact Me:</h2>
     <script src="../js/footer.js"></script>
     <script src="../js/utils.js"></script>
     <script src="../js/dynamicForm.js"></script>
-<script src="../js/messages.js"></script>
+    <script src="../js/messages.js"></script>
+    <script src="../js/projects.js"></script>
   </body>
 </html>
diff --git a/js/projects.js b/js/projects.js
new file mode 100644
index 0000000..1765e6b
--- /dev/null
+++ b/js/projects.js
@@ -0,0 +1,21 @@
+
+
+
+
+
+
+fetchGitHubRepoData()
+
+
+async function fetchGitHubRepoData(){
+  try{
+    const githubFetch = await fetch("https://api.github.com/users/{GITHUB_USERNAME}/repos")
+    if(!githubFetch.ok){
+      throw new Error("Response is not OK")
+    }
+    const fetchData = await githubFetch.json()
+    console.log(fetchData)
+  }catch(e){
+    console.error("Catch Error Handler: ", e)
+  }
+}
\ No newline at end of file
diff --git a/styles/rootColors.css b/styles/rootColors.css
index 82f1753..3167772 100644
--- a/styles/rootColors.css
+++ b/styles/rootColors.css
@@ -12,8 +12,8 @@
           rgb(206, 146, 61) 0,
           rgba(237, 171, 84, 0.855),
           rgba(244, 218, 169, 0.604)100%);
-    --buttonBg: radial-gradient(
-        circle at center,
+    --buttonBg: linear-gradient(
+        to bottom left,
          rgb(162, 109, 178),
          rgba(207, 87, 243, 0.714),
          rgba(255, 255, 240, 0.895));

From adb8bc0a61900a0e058803cd6c8a493ce69ff0cd Mon Sep 17 00:00:00 2001
From: WizardOfWhimsical <st.rayis1085@gmail.com>
Date: Wed, 17 Sep 2025 23:02:09 -0400
Subject: [PATCH 3/8]  got loop created, will process rest later

---
 README.md           | 24 +++++++++++-------------
 js/projects.js      | 39 +++++++++++++++++++++++++++++++++++----
 styles/projects.css |  9 ++++++++-
 3 files changed, 54 insertions(+), 18 deletions(-)

diff --git a/README.md b/README.md
index 1d57f3a..d2fb927 100644
--- a/README.md
+++ b/README.md
@@ -180,23 +180,21 @@ this is for when i forget where i am at and so i can see me little wins!
 Reviewer
     [x]  A click on your "Leave me a Message" button, should redirect to the your message form
         going into nav to add link to the page for html
-
-
-    [] Open your index.js file, starting below the code from the previous lesson
-    [] Using the Fetch API, 
-    [] create a "GET" request to https://api.github.com/users/{GITHUB_USERNAME}/repos where {GITHUB_USERNAME} is your username for your GitHub account
+    [x] Open your index.js file, starting below the code from the previous lesson
+    [x] Using the Fetch API, 
+    [x] create a "GET" request to https://api.github.com/users/{GITHUB_USERNAME}/repos where {GITHUB_USERNAME} is your username for your GitHub account
         hint: the fetch function
         hint: "GET" is the default method for fetch
-    [] Chain a then method to your fetch call
-    [] pass it a function that returns the response JSON data
-    [] Chain another then method and pass it a callback function to parse the response and store it in a variable named repositories
+    [x] Chain a then method to your fetch call
+    [x] pass it a function that returns the response JSON data
+    [x] Chain another then method and pass it a callback function to parse the response and store it in a variable named repositories
         hint: JSON.parse(this.response)
-    [] Console.log the value of repositories to better see the data returned from your API fetch
-    [] Save and refresh your browser (or just check your browser for changes if using live extension)
-    [] You should see the list of your GitHub repositories displayed in your console.
+    [x] Console.log the value of repositories to better see the data returned from your API fetch
+    [x] Save and refresh your browser (or just check your browser for changes if using live extension)
+    [x] You should see the list of your GitHub repositories displayed in your console.
 
-    [] Chain a catch() function to your fetch call to handle errors from the server so the user would know what happened if your Projects section was empty.
-        [] try{}catch{} inside the fetch function. then()catch() on chaining promises
+    [x] Chain a catch() function to your fetch call to handle errors from the server so the user would know what happened if your Projects section was empty.
+        [x] try{}catch{} inside the fetch function. then()catch() on chaining promises
 
     [] Create a variable names projectSection; using "DOM Selection" to select the projects section by id
     [] Create a variable named projectList; using "DOM Selection" query the projectSection (instead of the entire document) to select the
diff --git a/js/projects.js b/js/projects.js
index 1765e6b..cbadc87 100644
--- a/js/projects.js
+++ b/js/projects.js
@@ -4,18 +4,49 @@
 
 
 
-fetchGitHubRepoData()
+fetchGitHubRepoData().then(data=>{
+  for(let d of data){
+    console.log(d)
+  }
+})
 
 
 async function fetchGitHubRepoData(){
   try{
-    const githubFetch = await fetch("https://api.github.com/users/{GITHUB_USERNAME}/repos")
-    if(!githubFetch.ok){
+    const githubFetch = await fetch("https://api.github.com/users/WizardOfWhimsical/repos")
+    if(githubFetch.status === 404) {
+    throw new Error("GitHub API: Resource not found (404)");
+    }else if(!githubFetch.ok){
       throw new Error("Response is not OK")
     }
     const fetchData = await githubFetch.json()
+    if(fetchData.length === 0){
+      throw new Error("Response was ok, but repo returned empty")
+    }
     console.log(fetchData)
+     return fetchData
   }catch(e){
     console.error("Catch Error Handler: ", e)
   }
-}
\ No newline at end of file
+}
+
+
+// function fetchGitHubRepoData(){
+//     fetch("https://api.github.com/users/WizardOfWhimsical/repos")
+//     .then((res) => {
+//     if(!res.ok){
+//       throw new Error("Response is not OK")
+//     }else if(res.length === 0){
+//       throw new Error("Response was ok, but data returned empty")
+//     }
+//     return res.json()
+//     })
+//     .then((r) => {
+//       //i will fill if need be with what i want.
+//       console.log(r)
+//       // return r
+//     })
+//   .catch((e)=>{
+//     console.error("Catch Error Handler: ", e)
+//   })
+// }
\ No newline at end of file
diff --git a/styles/projects.css b/styles/projects.css
index 3a31500..9cef7fa 100644
--- a/styles/projects.css
+++ b/styles/projects.css
@@ -1 +1,8 @@
-@import url("./styles.css");
\ No newline at end of file
+@import url("./styles.css");
+
+section div{
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
\ No newline at end of file

From e9de7ccce72c64c3b07825448f10b9ccdf17950c Mon Sep 17 00:00:00 2001
From: WizardOfWhimsical <st.rayis1085@gmail.com>
Date: Sat, 20 Sep 2025 00:57:58 -0400
Subject: [PATCH 4/8] adder repoItem class

---
 README.md      |  7 ++---
 js/projects.js |  9 +++++-
 js/utils.js    | 76 +++++++++++++++++++++++++++++++++-----------------
 3 files changed, 60 insertions(+), 32 deletions(-)

diff --git a/README.md b/README.md
index d2fb927..a66ebb5 100644
--- a/README.md
+++ b/README.md
@@ -176,8 +176,7 @@ this is for when i forget where i am at and so i can see me little wins!
         [] messages stay one line and have "..." for trail off on long messages.
         [] create button that pulls up full message in a modal to read
             [] can make for edit and populational read, 
-            [] for edit just reshow modal and populate with the mesage info?
-Reviewer
+            [] for edit just reshow modal and populate with the mesage info? 
     [x]  A click on your "Leave me a Message" button, should redirect to the your message form
         going into nav to add link to the page for html
     [x] Open your index.js file, starting below the code from the previous lesson
@@ -192,13 +191,11 @@ Reviewer
     [x] Console.log the value of repositories to better see the data returned from your API fetch
     [x] Save and refresh your browser (or just check your browser for changes if using live extension)
     [x] You should see the list of your GitHub repositories displayed in your console.
-
     [x] Chain a catch() function to your fetch call to handle errors from the server so the user would know what happened if your Projects section was empty.
         [x] try{}catch{} inside the fetch function. then()catch() on chaining promises
 
     [] Create a variable names projectSection; using "DOM Selection" to select the projects section by id
-    [] Create a variable named projectList; using "DOM Selection" query the projectSection (instead of the entire document) to select the
-element
+    [] Create a variable named projectList; using "DOM Selection" query the projectSection (instead of the entire document) to select the element
     [] Create a for loop to iterate over your repositories Array, starting at index 0
     [] Inside the loop, create a variable named project to make a new list item (li) element
         hint: createElement method
diff --git a/js/projects.js b/js/projects.js
index cbadc87..37d98af 100644
--- a/js/projects.js
+++ b/js/projects.js
@@ -5,9 +5,12 @@
 
 
 fetchGitHubRepoData().then(data=>{
+
+// i like how this shows up in console
   for(let d of data){
     console.log(d)
   }
+
 })
 
 
@@ -49,4 +52,8 @@ async function fetchGitHubRepoData(){
 //   .catch((e)=>{
 //     console.error("Catch Error Handler: ", e)
 //   })
-// }
\ No newline at end of file
+// }
+
+  // for(let i = 0; i < data.length; i++){
+  //   console.log(data[i])
+  // }
\ No newline at end of file
diff --git a/js/utils.js b/js/utils.js
index ac489fd..2445b4e 100644
--- a/js/utils.js
+++ b/js/utils.js
@@ -49,6 +49,30 @@ function futureFetchSimulation(arrayOfMessages) {
   })
 }
 
+class RepoItemPuntInDOM{
+  constructor(obj){
+    this.name = obj.name;
+    this.url = `https://wizardofwhimsical.github.io/${obj.name}`;
+    this.desription =  obj.desription
+  }
+  createHeader(){
+    return document.createElement("h2").innertext = this.name;
+  }
+  createSpan(){
+    return document.createElement("span").innerText = this.desription;
+  }
+  createAnchor(){
+    const url = document.createElement("a");
+    url.innerText = `${this.name} Site`;
+    url.setAttribute("href", this.url);
+    return url
+  }
+  appendRepoListItem(parent){
+    const container = document.createElement("div");
+    container.append(this.createHeader(), this.createSpan(), this.createAnchor);
+    return container
+  }
+}
 
 function setAttributes(el, attr){
   for(let key in attr){
@@ -62,41 +86,41 @@ function setAttributes(el, attr){
  *    My Locale Dev Model
  *
  * **************************/
-// function navigateToMessagesPage() {
-//   const currentPath = window.location.pathname;
-//   const fileName = currentPath.split("/").pop();
-//   switch (fileName) {
-//     case "index.html":
-//       window.location.href = "./html/messages.html";
-//       break;
-//     case "messages.html":
-//         section.classList.toggle("hidden");
-//         leaveMessageButton.classList.toggle("visible");
-//         messagesSection.classList.toggle("visible");
-//       break;
-//     default:
-//       window.location.href = "./messages.html";
-//   }
-// }
-/*************************
- * 
- *  Github Production Model
- *
- * **************************/
 function navigateToMessagesPage() {
-try {
   const currentPath = window.location.pathname;
   const fileName = currentPath.split("/").pop();
   switch (fileName) {
+    case "index.html":
+      window.location.href = "./html/messages.html";
+      break;
     case "messages.html":
         section.classList.toggle("hidden");
         leaveMessageButton.classList.toggle("visible");
         messagesSection.classList.toggle("visible");
       break;
     default:
-      window.location.href = "/Stephen-R-Lewis-Luna/html/messages.html";
+      window.location.href = "./messages.html";
   }
-} catch (error) {
-  console.error("❌ JS Error:", error);
-}
 }
+/*************************
+ * 
+ *  Github Production Model
+ *
+ * **************************/
+// function navigateToMessagesPage() {
+// try {
+//   const currentPath = window.location.pathname;
+//   const fileName = currentPath.split("/").pop();
+//   switch (fileName) {
+//     case "messages.html":
+//         section.classList.toggle("hidden");
+//         leaveMessageButton.classList.toggle("visible");
+//         messagesSection.classList.toggle("visible");
+//       break;
+//     default:
+//       window.location.href = "/Stephen-R-Lewis-Luna/html/messages.html";
+//   }
+// } catch (error) {
+//   console.error("❌ JS Error:", error);
+// }
+// }

From c2db8ea0fe496b21ceef25b4a7d0c3af21c070bb Mon Sep 17 00:00:00 2001
From: WizardOfWhimsical <st.rayis1085@gmail.com>
Date: Sat, 20 Sep 2025 01:25:14 -0400
Subject: [PATCH 5/8] forgot call

---
 html/projects.html |  4 ++--
 js/projects.js     | 11 +++++++++-
 js/utils.js        | 54 +++++++++++++++++++++++++---------------------
 3 files changed, 41 insertions(+), 28 deletions(-)

diff --git a/html/projects.html b/html/projects.html
index ce26d96..3cd80bf 100644
--- a/html/projects.html
+++ b/html/projects.html
@@ -22,10 +22,10 @@
       <!--end nav-->
     </header>
 
-    <section>
+    <section id="projects">
       <div>
         <h2>Projects</h2>
-        <ul id="projects"></ul>
+        <ul></ul>
       </div>
     </section>
 
diff --git a/js/projects.js b/js/projects.js
index 37d98af..5071b64 100644
--- a/js/projects.js
+++ b/js/projects.js
@@ -1,6 +1,7 @@
 
 
-
+const projectSection = document.getElementById("projects");
+const projectsList = projectSection.querySelector("ul")
 
 
 
@@ -9,6 +10,14 @@ fetchGitHubRepoData().then(data=>{
 // i like how this shows up in console
   for(let d of data){
     console.log(d)
+    console.log(d.has_pages)
+    // conditional to only show projects that are hosted 
+    if(d.has_pages){
+      let newItem = new RepoItemPutInDOM(d)
+      newItem.appendRepoListItem(projectsList)
+      
+    }
+    
   }
 
 })
diff --git a/js/utils.js b/js/utils.js
index 2445b4e..018e47e 100644
--- a/js/utils.js
+++ b/js/utils.js
@@ -33,6 +33,35 @@ createElement() {
   }
 }
 
+class RepoItemPutInDOM {
+  constructor(obj){
+    this.name = obj.name;
+    this.url = `https://wizardofwhimsical.github.io/${obj.name}`;
+    this.description =  obj.description
+  }
+  createHeader(){
+    const header = document.createElement("h2")
+     header.innerText = this.name;
+     return header
+  };
+  createSpan(){
+    const span = document.createElement("span")
+    span.innerText = this.description;
+    return span
+  };
+  createAnchor(){
+    const anchorTag = document.createElement("a");
+    anchorTag.innerText = `${this.name} Site`;
+    anchorTag.setAttribute("href", this.url);
+    return anchorTag
+  };
+  appendRepoListItem(parent){
+    const container = document.createElement("li");
+    container.append(this.createHeader(), this.createSpan(), this.createAnchor());
+    parent.append(container) 
+  }
+}
+
 function clearList() {
   if (messageList.querySelectorAll("li").length > 0) {
   messageList.querySelectorAll("li").forEach((li) => {
@@ -49,31 +78,6 @@ function futureFetchSimulation(arrayOfMessages) {
   })
 }
 
-class RepoItemPuntInDOM{
-  constructor(obj){
-    this.name = obj.name;
-    this.url = `https://wizardofwhimsical.github.io/${obj.name}`;
-    this.desription =  obj.desription
-  }
-  createHeader(){
-    return document.createElement("h2").innertext = this.name;
-  }
-  createSpan(){
-    return document.createElement("span").innerText = this.desription;
-  }
-  createAnchor(){
-    const url = document.createElement("a");
-    url.innerText = `${this.name} Site`;
-    url.setAttribute("href", this.url);
-    return url
-  }
-  appendRepoListItem(parent){
-    const container = document.createElement("div");
-    container.append(this.createHeader(), this.createSpan(), this.createAnchor);
-    return container
-  }
-}
-
 function setAttributes(el, attr){
   for(let key in attr){
     el.setAttribute(key, attr[key]);

From 75f6431c64f9ce9717a7b2089e1d25fdcbcc011a Mon Sep 17 00:00:00 2001
From: WizardOfWhimsical <st.rayis1085@gmail.com>
Date: Sun, 21 Sep 2025 20:24:55 -0400
Subject: [PATCH 6/8] doing this as save before i do something foolish

---
 html/projects.html  |  2 +-
 js/projects.js      | 26 ++------------------------
 js/utils.js         | 19 +++++++++++++++++++
 styles/projects.css | 33 +++++++++++++++++++++++++++++++++
 4 files changed, 55 insertions(+), 25 deletions(-)

diff --git a/html/projects.html b/html/projects.html
index 3cd80bf..22a91e2 100644
--- a/html/projects.html
+++ b/html/projects.html
@@ -22,7 +22,7 @@
       <!--end nav-->
     </header>
 
-    <section id="projects">
+    <section  id="projects">
       <div>
         <h2>Projects</h2>
         <ul></ul>
diff --git a/js/projects.js b/js/projects.js
index 5071b64..f21a506 100644
--- a/js/projects.js
+++ b/js/projects.js
@@ -7,7 +7,7 @@ const projectsList = projectSection.querySelector("ul")
 
 fetchGitHubRepoData().then(data=>{
 
-// i like how this shows up in console
+// i like how this shows up in console. the reg loop just showed [object]
   for(let d of data){
     console.log(d)
     console.log(d.has_pages)
@@ -16,33 +16,11 @@ fetchGitHubRepoData().then(data=>{
       let newItem = new RepoItemPutInDOM(d)
       newItem.appendRepoListItem(projectsList)
       
-    }
-    
+    }   
   }
-
 })
 
 
-async function fetchGitHubRepoData(){
-  try{
-    const githubFetch = await fetch("https://api.github.com/users/WizardOfWhimsical/repos")
-    if(githubFetch.status === 404) {
-    throw new Error("GitHub API: Resource not found (404)");
-    }else if(!githubFetch.ok){
-      throw new Error("Response is not OK")
-    }
-    const fetchData = await githubFetch.json()
-    if(fetchData.length === 0){
-      throw new Error("Response was ok, but repo returned empty")
-    }
-    console.log(fetchData)
-     return fetchData
-  }catch(e){
-    console.error("Catch Error Handler: ", e)
-  }
-}
-
-
 // function fetchGitHubRepoData(){
 //     fetch("https://api.github.com/users/WizardOfWhimsical/repos")
 //     .then((res) => {
diff --git a/js/utils.js b/js/utils.js
index 018e47e..44818f8 100644
--- a/js/utils.js
+++ b/js/utils.js
@@ -62,6 +62,25 @@ class RepoItemPutInDOM {
   }
 }
 
+async function fetchGitHubRepoData(){
+  try{
+    const githubFetch = await fetch("https://api.github.com/users/WizardOfWhimsical/repos")
+    if(githubFetch.status === 404) {
+    throw new Error("GitHub API: Resource not found (404)");
+    }else if(!githubFetch.ok){
+      throw new Error("Response is not OK")
+    }
+    const fetchData = await githubFetch.json()
+    if(fetchData.length === 0){
+      throw new Error("Response was ok, but repo returned empty")
+    }
+    console.log(fetchData)
+     return fetchData
+  }catch(e){
+    console.error("Catch Error Handler: ", e)
+  }
+}
+
 function clearList() {
   if (messageList.querySelectorAll("li").length > 0) {
   messageList.querySelectorAll("li").forEach((li) => {
diff --git a/styles/projects.css b/styles/projects.css
index 9cef7fa..472274c 100644
--- a/styles/projects.css
+++ b/styles/projects.css
@@ -1,8 +1,41 @@
 @import url("./styles.css");
 
 section div{
+  width: 100vw;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
+}
+
+section div ul{
+  width: 100vw;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+}
+
+section div ul li{
+  width: 100vw;
+  height: 3em;
+  display: flex;
+  /* flex-direction: column; */
+  justify-content: space-around;
+  align-items: center;
+}
+
+section div ul li h2{
+justify-self: flex-start;
+}
+
+section div ul li span{
+width:60vw;
+overflow: hidden;
+}
+
+a{
+  text-decoration: none;
+  font-size: 1.5em;
+  color: var(--lightPrimary)
 }
\ No newline at end of file

From c38868474454fd211acf65e7f7533e2b1740b09d Mon Sep 17 00:00:00 2001
From: WizardOfWhimsical <st.rayis1085@gmail.com>
Date: Wed, 24 Sep 2025 20:30:59 -0400
Subject: [PATCH 7/8] i will be waiting your report

---
 README.md           | 203 +-------------------------------------------
 js/utils.js         |  19 +----
 styles/projects.css |  12 +--
 3 files changed, 5 insertions(+), 229 deletions(-)

diff --git a/README.md b/README.md
index a66ebb5..6178583 100644
--- a/README.md
+++ b/README.md
@@ -7,205 +7,4 @@ To be honest, I do have high hopes for myself. I plan of doing stuff i have no b
 with tech i have no business playing with. I do hope to maybe blow some minds or it could all 
 just be smoke and mirrors i have conviced myself exist.
 
-# CheckList
-this is for when i forget where i am at and so i can see me little wins!
-
-    [x] Create css/ folder
-    [x] Create index.css inside css/
-    [x] Link CSS file in head of index.html
-    [x] Apply background color to page body
-    [x] Change default text color
-    [x] Customize font family
-    [x] Add spacing (padding/margin) between sections
-    [x] Align content of one section
-    [x] Style headings (size, weight, color)
-    [x] Style name at top of page
-    [x] Style experience list items into blocks
-    [x] Style connect links
-    
-    [x] Split index.html into multiple HTML pages
-    [x] Ensure new HTML pages have correct links to their own CSS
-    [x] Create html/ folder for non-index pages
-    [x] Begin rough buildout of experience.html and socials.html
-    [x] Create a modular system of CSS files (base, navbar, variables)
-    [x] Design a navbar for multi-page navigation
-    [x] Commit to using raw CSS only (no Bootstrap)
-    [I FAIL to comply!] Choose and apply a modern color palette
-    [x] Plan for animations (fade-in, slide, etc.)
-    [x] Include hobbies/interests section on about/index page
-    [x] Design with white space, clarity, and readability in mind
-    [x] Prepare for accessibility and inclusive design in nav and link structure
-    [x] Push changes to GitHub (still pending final commit/push)
-    [x] Visual debugging still pending
-
-    [x] In your index.html file, 
-       [x] add a navigational header to your webpage using the <nav> element.
-    [x] Add two sections to your index.html file:
-        [x] The first section will be "Skills". <h2> with ul->empty 
-        [x] The second section will be "Projects". <h2> with ul->empty via API call
-    [x] The navigation menu should include a link to each of your sections
-        [x] "About" 
-        [x] "Experience"
-        [x] "Skills"
-        [x] "Projects"
-        [x] "Connect"
-    STRETCH GOAL (Optional) 
-        [x] Make the header sticky/fixed on the page using code in your index.css file.
-        [x] change the layout of your "Experience" section using rows and columns
-            [x]use Flexbox - (Think Cards)
-                [x] job titles to the left, 
-                [x] dates worked that job to the right
-                [x] and brief description of the job below the title.
-    [x] update the "Connect" section to use Flexbox to improve the layout of your social media icons or links
-    [] set up .gitignore
-    [x] set socials in a footer so they are all on everypage and gets rid of html
-
-
-    [] Will you design mobile-first?
-    [x] Will you design desktop-first?
-    [x] Add comment notation to keep your styles organized:
-    [x] Add a comment section for Mobile Styles
-    [x] index/css - pushed
-    [-] skills/css - nothing really there
-    [x] exp/css - pushed
-    [-] projects/css - nothing there
-    [x] Add a comment section for Desktop Styles
-    [-] A media query for tablet-sized screens
-    [x] A media query for mobile-sized screens
-    [-] For each media query, make changes to at least 3 different HTML elements:
-    [x] Each element must have two style changes
-    [x] You should have a minimum of 6 changes per media query
-    Suggested types of changes include:
-        [x] Font size
-        [x] Color
-        [] Font style
-        [x] Padding or margin
-        [x] Background color
-
-    [x] Create a folder called js at the same level as index.html, readme.md, and css folder
-    [x] Inside the js folder, create a JavaScript file called index.js
-    [x] Open index.html file
-    [x] Before the closing </body> tag, insert a <script> element with a src attribute that specifies the relative path to js/index.js
-    [x] Save and open index.html in your browser (or use live extension in VSCode)
-    [x] In index.js, use DOM manipulation to add a footer element to index.html
-    [x] Create a variable today and assign it a new Date object
-    [x] Create a variable thisYear and assign it the current year using getFullYear
-    [x] Create a variable footer and assign it the footer element using DOM selection
-    [x] Create a variable copyright and use it to create a new <p> element
-    [x] Set the innerHTML of copyright to display your name and the current year (include © for stretch goal)
-    [x] Append the copyright element to the footer
-    [x] In index.html, above the "Connect" section, add a new <section> element with id="skills"
-    [x] Inside the new section, add an <h2> element with text "Skills"
-    [x] After the <h2> element, add an empty unordered list <ul>
-    [x] In index.js, create an array skills containing your technical skills
-    [x] Create a variable skillsSection and select the skills section by id
-    [x] Create a variable skillsList and select the <ul> inside skillsSection
-    [x] Create a for loop to iterate over the skills array
-    [x] Inside the loop, create a variable skill to make a new <li> element
-    [x] Set the inner text of skill to the current array element
-    [x] Append the skill element to skillsList
-    [x] In index.css, use flexbox or grid to organize and style the list of skills (include adjustments in media queries)
-
-    [x] Open your index.html file
-    [x] Above the <footer> element, add an empty <section> element
-    [x] Inside the new <section> element, create a level-two heading that says "Leave a Message"
-    [x] After the heading, create an HTML <form> element with a name attribute that equals "leave_message"
-    [x] Inside the <form> element, add the following:
-    [x] <input> element with attributes: type "text", name "usersName", and required true
-    [x] <input> element with attributes: type "email", name "usersEmail", and required true
-    [x]  section
-    [x]      h2
-    [x]      form
-    [x]          label (name, email)
-    [x]          input (name, email)
-    [x] <textarea> element with attributes: name "usersMessage" and required true 
-    [x] <button> element that says "Submit" and has type attribute equal to "submit" 
-    [x] Each form field should also have a corresponding <label> element (Optional) Use <br> elements to stack the form fields 
-    [x] Save and refresh your browser (or just check your browser for changes if using live extension) 
-    [x] Add navigation to the message form: Add a link in your <nav> section that takes the user to the 'Leave a Message' section when clicked
-    [x] After the <section> element from the previous step, create a new <section> element with an id of "messages"
-    [x] Inside that element, create a level-two heading that says "Messages"
-    [x] After the heading, add an empty unordered list (<ul>) element
-    [x] Save and refresh your browser (or just check your browser for changes if using live extension)
-
-    [x] Open your index.js file and start at the bottom
-    [x] Create a variable named messageForm that uses "DOM Selection" to select the "leave_message" form by name attribute
-    [x] Add an event listener to the messageForm element that handles the "submit" event hint: addEventListener method
-    [x] Inside the callback function for your event listener, create three new variables (one for each of the three form fields) and retrieve the value from the event hint: event.target is the form, event.target.usersName is the first input element
-    [x] Inside the callback function for your event listener, add a console.log statement to log the three variables you created in the previous step
-    [x] Save and refresh your browser (or just check your browser for changes if using live extension)
-    [x] Open the console in your browser if you haven't already by either right clicking on your page and select "Inspect" or by using the menu bar to open the Developer tools.
-    [x] Fill out the HTML form in your browser and hit "Submit"
-    [x] Note: at this point, you should notice that the browser is refreshing automatically when you submit your form which is not the desired behavior
-    [x] Inside the callback function, above the other code you just wrote, add a new line to prevent the default refreshing behavior of the "submit" event hint: preventDefault method
-    [x] Save and refresh your browser (or just check your browser for changes if using live extension)
-    [x] Fill out the HTML form in your browser and hit "Submit"
-    [x] You should see that the page does not refresh and your values are logged in the console
-    [x] Note: at this point, you should notice that the form is submitting properly but the form fields are not reset after submit
-    [x] Inside the callback function, on the very last line, add a new line of code to clear the form hint: reset method
-    [x] Save and refresh your browser (or just check your browser for changes if using live extension)
-    [x] Create a variable named messageSection and use "DOM Selection" to select the #messages section by id
-    [x] Create a variable named messageList and use "DOM Selection" to query the messageSection (instead of the entire document) to find the <ul> element
-    [x] Create a variable named newMessage that makes a new list item (li) element
-
-    [x] <a> element that displays the "usersName" and is a clickable link to the "usersEmail" (hint: use the mailto: prefix)
-    [x] <span> element that displays the "usersMessage"
-    [x] Create a variable named removeButton that makes a new <button> element
-        [x] Set the inner text to "remove"
-        [x] Set the type attribute to "button"
-        [x] Add an event listener to the removeButton element that handles the "click" event
-    [x] Inside the callback function, create a variable named entry that finds the button's parent element using DOM Traversal (hint: parentNode property)
-    [x] Remove the entry element from the DOM (hint: remove method)
-    [x] Append the removeButton to the newMessage element
-    [x] hint: appendChild method
-    [x] Append the newMessage to the messageList element
-    [x] Save and refresh your browser (or just check your browser for changes if using live extension)
-    [x] Style your Message Form
-    [x] Open your index.css file
-    [x] Style your message form fields and buttons keeping in mind:
-    [x] adequate spacing so form fields aren't crowded
-    [x] appropriate sizing in media queries so a user on a mobile device can easily touch/tap into the fields to type
-    [x] button sizing to accommodate click and touch/tap interactions
-
-    [x] (Optional) Hide the #messages section, including the Messages header, when the list is empty
-    [] (Optional) Create an "edit" button for each message entry that allows the user to input a new/modified message
-
-    [x] spacing on experience page for cards looks a little off, set media query 
-    [x] footer js above things in the html in the inspect is driving me nut, locate and fix!
-    [] set scroll for message block in list incase of long message
-        [] messages stay one line and have "..." for trail off on long messages.
-        [] create button that pulls up full message in a modal to read
-            [] can make for edit and populational read, 
-            [] for edit just reshow modal and populate with the mesage info? 
-    [x]  A click on your "Leave me a Message" button, should redirect to the your message form
-        going into nav to add link to the page for html
-    [x] Open your index.js file, starting below the code from the previous lesson
-    [x] Using the Fetch API, 
-    [x] create a "GET" request to https://api.github.com/users/{GITHUB_USERNAME}/repos where {GITHUB_USERNAME} is your username for your GitHub account
-        hint: the fetch function
-        hint: "GET" is the default method for fetch
-    [x] Chain a then method to your fetch call
-    [x] pass it a function that returns the response JSON data
-    [x] Chain another then method and pass it a callback function to parse the response and store it in a variable named repositories
-        hint: JSON.parse(this.response)
-    [x] Console.log the value of repositories to better see the data returned from your API fetch
-    [x] Save and refresh your browser (or just check your browser for changes if using live extension)
-    [x] You should see the list of your GitHub repositories displayed in your console.
-    [x] Chain a catch() function to your fetch call to handle errors from the server so the user would know what happened if your Projects section was empty.
-        [x] try{}catch{} inside the fetch function. then()catch() on chaining promises
-
-    [] Create a variable names projectSection; using "DOM Selection" to select the projects section by id
-    [] Create a variable named projectList; using "DOM Selection" query the projectSection (instead of the entire document) to select the element
-    [] Create a for loop to iterate over your repositories Array, starting at index 0
-    [] Inside the loop, create a variable named project to make a new list item (li) element
-        hint: createElement method
-    [] On the next line, set the inner text of your project variable to the current Array element's name property
-        hint: access the Array element using bracket notation
-    [] On the next line, append the project element to the projectList element
-        hint: appendChild method
-    [] Save and refresh your browser (or just check your browser for changes if using live extension)
-You should see your list of repositories beneath the "Projects" heading on your portfolio site
-
- Add styling to your projects list, be sure to account for any changes you want in media queries
- STRETCH GOAL: Use flexbox (or grid) to style your list of repositories
-By the end of this assignment, you should have a working API fetch to your GitHub account and be able to see a list of your repository names in the Projects section of your portfolio.  Were there to be a server error during the API fetch, your site would return an error message.  Your project list should be styled using flexbos or grid.
\ No newline at end of file
+[Marvel-Gambit](https://github.com/WizardOfWhimsical/MarvelsGambit)
\ No newline at end of file
diff --git a/js/utils.js b/js/utils.js
index 44818f8..ae7c761 100644
--- a/js/utils.js
+++ b/js/utils.js
@@ -13,9 +13,7 @@ createElement() {
   createButton() {
     const removeButton = document.createElement("button");
     removeButton.setAttribute("type", "button");
-    removeButton.classList.add("button-uniform")
-    removeButton.classList.add("callToActionButton")
-    removeButton.classList.add("grabbingCursor");
+    removeButton.classList.add("button-uniform","callToActionButton","grabbingCursor")
     removeButton.textContent = "Remove";
     removeButton.addEventListener("click", function () {
       const entry = this.parentNode;
@@ -36,19 +34,8 @@ createElement() {
 class RepoItemPutInDOM {
   constructor(obj){
     this.name = obj.name;
-    this.url = `https://wizardofwhimsical.github.io/${obj.name}`;
-    this.description =  obj.description
+    this.url = `https://wizardofwhimsical.github.io/${this.name}`;
   }
-  createHeader(){
-    const header = document.createElement("h2")
-     header.innerText = this.name;
-     return header
-  };
-  createSpan(){
-    const span = document.createElement("span")
-    span.innerText = this.description;
-    return span
-  };
   createAnchor(){
     const anchorTag = document.createElement("a");
     anchorTag.innerText = `${this.name} Site`;
@@ -57,7 +44,7 @@ class RepoItemPutInDOM {
   };
   appendRepoListItem(parent){
     const container = document.createElement("li");
-    container.append(this.createHeader(), this.createSpan(), this.createAnchor());
+    container.append(this.createAnchor());
     parent.append(container) 
   }
 }
diff --git a/styles/projects.css b/styles/projects.css
index 472274c..b09235f 100644
--- a/styles/projects.css
+++ b/styles/projects.css
@@ -24,17 +24,7 @@ section div ul li{
   justify-content: space-around;
   align-items: center;
 }
-
-section div ul li h2{
-justify-self: flex-start;
-}
-
-section div ul li span{
-width:60vw;
-overflow: hidden;
-}
-
-a{
+section div ul li a{
   text-decoration: none;
   font-size: 1.5em;
   color: var(--lightPrimary)

From c28d383f6e2f5f06d45466b3b34f8717669b1f1c Mon Sep 17 00:00:00 2001
From: WizardOfWhimsical <st.rayis1085@gmail.com>
Date: Wed, 24 Sep 2025 20:32:52 -0400
Subject: [PATCH 8/8] had to uncomment out code

---
 js/utils.js | 58 ++++++++++++++++++++++++++++-------------------------
 1 file changed, 31 insertions(+), 27 deletions(-)

diff --git a/js/utils.js b/js/utils.js
index ae7c761..2598cae 100644
--- a/js/utils.js
+++ b/js/utils.js
@@ -1,4 +1,8 @@
-
+/**
+ * 
+ * I was informed i went about this orginzation all wrong. i will do better next time
+ * 
+ */
 class Message {
   constructor(userName, userEmail, userMessage) {
     this.userName = userName;
@@ -96,41 +100,41 @@ function setAttributes(el, attr){
  *    My Locale Dev Model
  *
  * **************************/
-function navigateToMessagesPage() {
-  const currentPath = window.location.pathname;
-  const fileName = currentPath.split("/").pop();
-  switch (fileName) {
-    case "index.html":
-      window.location.href = "./html/messages.html";
-      break;
-    case "messages.html":
-        section.classList.toggle("hidden");
-        leaveMessageButton.classList.toggle("visible");
-        messagesSection.classList.toggle("visible");
-      break;
-    default:
-      window.location.href = "./messages.html";
-  }
-}
-/*************************
- * 
- *  Github Production Model
- *
- * **************************/
 // function navigateToMessagesPage() {
-// try {
 //   const currentPath = window.location.pathname;
 //   const fileName = currentPath.split("/").pop();
 //   switch (fileName) {
+//     case "index.html":
+//       window.location.href = "./html/messages.html";
+//       break;
 //     case "messages.html":
 //         section.classList.toggle("hidden");
 //         leaveMessageButton.classList.toggle("visible");
 //         messagesSection.classList.toggle("visible");
 //       break;
 //     default:
-//       window.location.href = "/Stephen-R-Lewis-Luna/html/messages.html";
+//       window.location.href = "./messages.html";
 //   }
-// } catch (error) {
-//   console.error("❌ JS Error:", error);
-// }
 // }
+/*************************
+ * 
+ *  Github Production Model
+ *
+ * **************************/
+function navigateToMessagesPage() {
+try {
+  const currentPath = window.location.pathname;
+  const fileName = currentPath.split("/").pop();
+  switch (fileName) {
+    case "messages.html":
+        section.classList.toggle("hidden");
+        leaveMessageButton.classList.toggle("visible");
+        messagesSection.classList.toggle("visible");
+      break;
+    default:
+      window.location.href = "/Stephen-R-Lewis-Luna/html/messages.html";
+  }
+} catch (error) {
+  console.error("❌ JS Error:", error);
+}
+}