Project 2: Final Journal Entry

Both me and my partner can both agree that this project has had it's ups and downs, but we are happy with our ability to produce the final outcome. Making sure everything was perfect down to the minute detail taught us that following orders and not being creative really does take a toll on your mental health, but it teaches you a thing or to about life.

For our project we ended settling for about 12 elements within our main HTML as you can see below. The creation of these elements allowed us to create the outcome of the badges that are displayed on the screen. From the design, to images, to content, these elements allowed us to effectively display the badges in a presentable manner.

  constructor() {
    super();
    this.version = 'STARTING';
    this.badgeName = 'Amazon Cognito';
    this.badgeIcon = new URL(
      "https://www.drupal.org/files/styles/grid-3-2x/public/project-images/553dbabbd287c26ca83aef42.jpg?itok=ruAqqobg"
    ).href;
    this.badgeDescription = 'Learn the basics of how Amazon Cognito works, and how you can use it to create User Sign In, Sign In, Access Control, User Pools, and Identity Pools';
    this.link = 'https://docs.aws.amazon.com/cognito/latest/developerguide/tutorials.html';
    this.creatorName = 'Joshua Hantman';
    this.badgeCompletionTime = '4.0 hours';
    this.stepOne = 'Creating your first Lamda Function';
    this.stepTwo = 'Putting in your Hello Lamda Node.js code';
    this.hoursCompletionStepOne = '2.0 hours';
    this.hoursCompletionStepTwo = '2.0 hours';
    this.hyperLinkText = 'Amazon Cognito Info Link';
    this.pfpImg = 'https://pbs.twimg.com/profile_images/1605284457602338822/xISpy4TU_400x400.jpg';
  }

The hardest part of this project, as many others within our class can agree with, was getting the search bar to actually work. The designing process of the cards and filling them with content and creating the API and making sure everything looked presentable were all no match for the mighty search bar function. The idea of it lingered through our minds week after week as we got everything else within our project in order. And as the clock was ticking, and the project was set to be due, a singular video, dropped by Mr. Bryan Ollendyke himself saved us all. Getting the search bar to actually search for stuff on the page was nothing but a mystery to us but once we were given an example of how this may work, we implemented it and got it to work!

And on the other side of that, an easier portion of this project was managing the content within the badges to look neat and tidy, as all this took was some simple CSS and dedication.

 firstUpdated() {
    const ach = this.shadowRoot.querySelector(".accord-header");
    ach.addEventListener("click", () => {
      const accordianContent = ach.nextElementSibling;
      const accorianImg = ach.querySelector('.dropDown');

      accordianContent.classList.toggle("collapse");
      accorianImg.classList.toggle('rotate');

      if (accordianContent.classList.contains('collapse')) {
        ach.style.borderRadius = "6px";
      }
      else {
        ach.style.borderRadius = "6px 6px 0px 0px";
        accordianContent.querySelector('.accord-body').style.borderRadius = "0px 0px 6px 6px";
      }

    }, false);
  }

Overall, this project has been a great learning experience, and gave me a glimpse of how through suffering and a deadline, you can produce something that looks half-decent.