پروژه 2: مدخل نهایی مجله

هم من و هم شریکم هر دو می‌توانیم موافق باشیم که این پروژه فراز و نشیب‌هایی داشته است، اما از توانایی‌مان در تولید نتیجه نهایی خوشحالیم. اطمینان از اینکه همه چیز تا حد جزییات عالی است به ما آموخت که پیروی از دستورات و عدم خلاقیت واقعاً بر سلامت روان شما تأثیر می گذارد، اما به شما یک چیز یا در مورد زندگی می آموزد.

همانطور که در زیر می بینید، برای پروژه خود ما به حدود 12 عنصر در HTML اصلی خود پایان دادیم. ایجاد این عناصر به ما این امکان را می دهد که نتیجه نشان هایی را که روی صفحه نمایش داده می شوند ایجاد کنیم. از طراحی، تصاویر، محتوا، این عناصر به ما اجازه می‌دهند که نشان‌ها را به‌طور مؤثری نمایش دهیم.

  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';
  }

سخت‌ترین بخش این پروژه، همانطور که بسیاری دیگر در کلاس ما می‌توانند با آن موافق باشند، این بود که نوار جستجو عملاً کار کند. فرآیند طراحی کارت ها و پر کردن آنها با محتوا و ایجاد API و اطمینان از اینکه همه چیز قابل ارائه به نظر می رسد، همه با عملکرد نوار جستجوی قدرتمند مطابقت ندارند. ایده آن هفته به هفته در ذهن ما ماندگار شد زیرا همه چیزهای دیگر پروژه خود را مرتب کردیم. و در حالی که ساعت در حال حرکت بود، و پروژه قرار بود به پایان برسد، یک ویدیوی منحصر به فرد که توسط خود آقای برایان اولندایک منتشر شد، همه ما را نجات داد. گرفتن نوار جستجو برای جستجوی واقعی موارد در صفحه برای ما چیزی جز یک رمز و راز نبود، اما هنگامی که به ما مثالی از نحوه کارکرد آن داده شد، آن را اجرا کردیم و آن را به کار انداختیم!

و از طرف دیگر، بخش ساده‌تری از این پروژه مدیریت محتوای درون نشان‌ها بود تا مرتب و مرتب به نظر برسند، زیرا تمام این کارها چند CSS ساده و فداکاری بود.

 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);
  }

به طور کلی، این پروژه یک تجربه یادگیری عالی بوده است، و به من نگاهی اجمالی داد که چگونه از طریق رنج و ضرب‌الاجل، می‌توانید چیزی تولید کنید که نیمه مناسب به نظر برسد.