Merge branch 'main' into add-project-view

.github/workflows/main.yml

@@ -0,0 +1,13 @@
+name: Project Main Branch Tests # name of the test
+
+on: [push] # the Github Action will activate "on" the event that you "push" to the repo
+
+jobs: # the things being executed
+  tests: # the name of your status check, will become important when you do branch protection
+    runs-on: ubuntu-latest # which device on Github's server that you are running the Actions on
+    steps:
+      - uses: actions/checkout@v4 # using version 4 of Actions
+      - name: Install Dependencies
+        run: npm install
+      # - name: project card tests
+      #   run: npm test ./__tests__/project-card.test.js # the actual testing line

.gitignore

@@ -1 +1,3 @@
 .DS_Store
+node_modules
+assets/scripts/storage.js

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "liveServer.settings.port": 5501
+}

README.md

@@ -1,2 +1,19 @@
 # Dev-Journal
+
 Main project for CSE 110. Includes calendar, journal entries, contact pages, progression meter, a task list, all within a polish UI
+
+# Project cards
+
+
+# projects.JSON
+
+```JSON
+  {
+    "id": 1,
+    "name": "warmup",
+    "desc": "a warmup project",
+    "image": "https://fakestoreapi.com/img/81fPKd-2AYL._AC_SL1500_.jpg",
+    "progress": 79
+  },
+
+```

assets/components/project-card.js

@@ -0,0 +1,181 @@
+/**
+ * project-card element
+ */
+class ProjectCard extends HTMLElement {
+  constructor() {
+    super(); // inherets everything from HTMLElement
+    this.attachShadow({ mode: 'open' }); // Creates the Shadow DOM
+  }
+
+  set data(data) {
+    this.json = data; // Store the data passed in for later
+    this.progress = data.progress; // NOTE: progres should be dynamically calculated but for testing just give a number
+
+    // Store the element styles in a <style> block, needed bc of the shadow DOM
+    const styles = document.createElement('style');
+    styles.innerHTML = `.project-card {
+                          align-items: center;
+                          background-color: rgba(255, 255, 255, 0.712);
+                          border-radius: 5px;
+                          display: grid;
+                          grid-template-areas:
+                            'name'
+                            'project-image'
+                            'desc'
+                            'progress-bar'
+                            'actions';
+                          grid-template-rows: 10% 40% 35% 5% 10%;
+                          height: 100%;
+                          max-height: 600px;
+                          min-height: 300px;
+                          filter: drop-shadow(0px 0px 10px rgb(0, 0, 0, 0.2));
+                          padding: 0px 20px;
+                          width: 100%;
+                          max-width: 400px;
+                          min-width: 200px;
+                        }
+                        .project-card .name {
+                          color: rgb(0, 0, 0);
+                          font-size: 1.8em;
+                          font-weight: bold;
+                          margin: 0;
+                        }
+
+                        .project-card .name:hover {
+                          font-size: 2em;
+                          margin: 0;
+                          white-space: wrap;
+                          overflow: auto;
+                          text-overflow: unset;
+                          transition: 0.1s ease all;
+                        }
+
+                        .project-card button {
+                          background-color: rgb(255, 208, 0);
+                          border: none;
+                          border-radius: 5px;
+                          color: black;
+                          justify-self: center;
+                          max-height: 35px;
+                          padding: 8px 20px;
+                          transition: 0.1s ease all;
+                        }
+
+                        .project-card button:hover {
+                          background-color: rgb(255, 166, 0);
+                          cursor: pointer;
+                          transition: 0.1s ease all;
+                        }
+
+                        .project-card .project-image {
+                          align-self: center;
+                          justify-self: center;
+                          object-fit: fill;
+                          height: 100%;
+                          width: 100%;
+                        }
+                        .project-card .progress-bar {
+                          width: 100%;
+                          background-color: grey;
+                        }
+
+                        .project-card .desc {
+                          width: 90%;
+                          height: 80%;
+                          align-self: center;
+                          overflow: auto;
+                          text-align: left;
+                          padding-top: 5%;
+                          padding-left: 5%;
+                          padding-right: 5%;
+                          text-anchor: middle;
+                          border-radius: 5% 5% 5% 5%;
+                          background-color: rgba(0, 0, 0, 0.164);
+                        }
+                        .progress-bar {
+                          height: 100%;
+                        }
+                        .progress-bar > .progress-bar-fill {
+                          width: 12%;
+                          height: 100%;
+                          background-color: rgb(0, 128, 122);
+                          text-align: center;
+                          line-height: 30px;
+                          color: white;
+                        }
+    `;
+
+    // Create the outer wrapper for the project card to nest inside
+    const wrapper = document.createElement('div');
+    wrapper.classList.add('project-card');
+
+    // Create the prject card name
+    const title = document.createElement('p');
+    title.classList.add('name');
+    title.innerHTML = data.name;
+
+    // Create the project card image element
+    const img = document.createElement('img');
+    img.setAttribute('src', data.image);
+    img.setAttribute('alt', data.name);
+    img.classList.add('project-image');
+
+    // Create the description
+    const desc = document.createElement('div');
+    desc.classList.add('desc');
+    desc.innerText = data.desc;
+
+    //create progress bar
+    const pb = document.createElement('div');
+    pb.classList.add('progress-bar');
+    const pbf = document.createElement('div');
+    pbf.classList.add('progress-bar-fill');
+    pbf.style.width = data.progress + '%';
+    pb.appendChild(pbf);
+    pbf.innerText = data.progress;
+
+    // Create the actions
+    const actions = document.createElement('div');
+    actions.classList.add('actions');
+    const debugAddProgress = document.createElement('button');
+    debugAddProgress.addEventListener('click', () => {
+      const pbf = this.shadowRoot.querySelector(
+        '.progress-bar > .progress-bar-fill'
+      );
+      var progress = Number(pbf.innerText);
+      if (progress >= 100) {
+        progress = 0;
+      } else {
+        progress = progress + Math.floor(Math.random() * 10);
+      }
+      pbf.style.width = progress + '%';
+      pbf.innerText = progress;
+    });
+    debugAddProgress.innerText = 'progress + random';
+    const open = document.createElement('button');
+    open.addEventListener('click', _ => {
+      alert('open');
+    });
+    open.innerText = 'open';
+    const options = document.createElement('button');
+    options.addEventListener('click', _ => {
+      alert('options');
+    });
+
+    options.innerText = 'options';
+
+    actions.append(debugAddProgress, open, options);
+
+    // Add all of the above elements to the wrapper
+    wrapper.append(title, img, desc, pb, actions);
+
+    // Append the wrapper and the styles to the Shadow DOM
+    this.shadowRoot.append(styles, wrapper);
+  }
+
+  get data() {
+    return this.json;
+  }
+}
+
+customElements.define('project-card', ProjectCard);

assets/json/projects.json

@@ -0,0 +1,16 @@
+[
+  {
+    "id": 1,
+    "name": "warmup",
+    "desc": "a warmup project",
+    "image": "https://fakestoreapi.com/img/81fPKd-2AYL._AC_SL1500_.jpg",
+    "progress": 79
+  },
+  {
+    "id": 2,
+    "name": "final project",
+    "desc": "a random project with very longggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg desc",
+    "image": "https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg",
+    "progress": 12
+  }
+]

assets/scripts/homepage.js

@@ -0,0 +1,62 @@
+let projects; // The variable we'll use to add our array of projects we fetch
+let projectsPath = 'assets/json/projects.json'; // the URL to fetch from
+
+// Bind the init() function to run once the page loads
+window.addEventListener('DOMContentLoaded', init);
+/** Initializes every function, they all stem from here */
+async function init() {
+  // Attempt to fetch the project items
+  try {
+    await fetchItems();
+  } catch (err) {
+    console.log(`Error fetch items: ${err}`);
+    return; // Return if fetch fails
+  }
+  populatePage(); // Add <project-cards> elements to page with fetched data
+}
+
+/**
+ * Fetches all of the project-cards from projectsPath top and stores them
+ * inside the global items variable.
+ * @returns {Promise} Resolves if the items are found it localStorage or if they
+ *                    are fetched correctly
+ */
+async function fetchItems() {
+  return new Promise((resolve, reject) => {
+    const localProjects = localStorage.getItem('projects');
+    if (projects) {
+      projects = JSON.parse(localProjects);
+      resolve();
+    } else {
+      //if nothing in the local storage, that means it is the first fetch from JSON
+      fetch(projectsPath)
+        // Grab the response first, catch any errors here
+        .then(response => response.json())
+        .catch(err => reject(err))
+        // Grab the data next, cach errors here as well
+        .then(data => {
+          if (data) {
+            localStorage.setItem('projects', JSON.stringify(data));
+            projects = data;
+            resolve();
+          }
+        })
+        .catch(err => reject(err));
+    }
+  });
+}
+
+/**
+ * Adds the Fetched projects items to the webpage
+ */
+function populatePage() {
+  if (!projects) return;
+  // Iterate over each of the items in the array
+  projects.forEach(item => {
+    // Create <project-card> element and populate it with item data
+    let pc = document.createElement('project-card');
+    pc.data = item;
+    // Add the item to the webpage
+    document.querySelector('#project-cards-parent').appendChild(pc);
+  });
+}

assets/styles/project-card.css

@@ -0,0 +1,91 @@
+.project-card {
+  align-items: center;
+  background-color: rgba(255, 255, 255, 0.712);
+  border-radius: 5px;
+  display: grid;
+  grid-template-areas:
+    'name'
+    'project-image'
+    'desc'
+    'progress-bar'
+    'actions';
+  grid-template-rows: 10% 40% 35% 5% 10%;
+  height: 80%;
+  max-height: 600px;
+  min-height: 300px;
+  filter: drop-shadow(0px 0px 6px rgb(0, 0, 0, 0.2));
+  margin: 0 30px 30px 0;
+  padding: 10px 20px;
+  width: 50%;
+  max-width: 400px;
+  min-width: 200px;
+}
+.project-card .name {
+  color: rgb(0, 0, 0);
+  font-size: 1.8em;
+  font-weight: bold;
+  margin: 0;
+}
+
+.project-card .name:hover {
+  font-size: 2em;
+  margin: 0;
+  white-space: wrap;
+  overflow: auto;
+  text-overflow: unset;
+  transition: 0.1s ease all;
+}
+
+.project-card button {
+  background-color: rgb(255, 208, 0);
+  border: none;
+  border-radius: 5px;
+  color: black;
+  justify-self: center;
+  max-height: 35px;
+  padding: 8px 20px;
+  transition: 0.1s ease all;
+}
+
+.project-card button:hover {
+  background-color: rgb(255, 166, 0);
+  cursor: pointer;
+  transition: 0.1s ease all;
+}
+
+.project-card .project-image {
+  align-self: center;
+  justify-self: center;
+  object-fit: fill;
+  height: 100%;
+  width: 100%;
+}
+.project-card .progress-bar {
+  width: 100%;
+  background-color: grey;
+}
+
+.project-card .desc {
+  width: 90%;
+  height: 80%;
+  align-self: center;
+  overflow: auto;
+  text-align: left;
+  padding-top: 5%;
+  padding-left: 5%;
+  padding-right: 5%;
+  text-anchor: middle;
+  border-radius: 5% 5% 5% 5%;
+  background-color: rgba(0, 0, 0, 0.164);
+}
+.progress-bar {
+  height: 100%;
+}
+.progress-bar > .progress-bar-fill {
+  width: 12%;
+  height: 100%;
+  background-color: rgb(0, 128, 122);
+  text-align: center;
+  line-height: 30px;
+  color: white;
+}