Welcome to P1 Intellijs’ College Application Service

Running site

Scrum Team Members and Contributions

m221p1-intellijs	Scrum Board	Repo Contributors	——	——	——	——
Name	GitHub ID	Tasks	Scrum Board	Commits	Profile	Repl.it (FRQs)
Kyle Myint	kylem314	Issues	Scrum Board	Commit Page	Profile	Add Repl
Charlie Zhu	1855387	Issues	Scrum Board	Commit Page	Profile	Add Repl
Yajat Yadav	yajatyadav	Issues	Scrum Board	Commit Page	Profile	Add Repl
Eric Wang	elw55555	Issues	Scrum Board	Commit Page	Profile	Add Repl
Ak Prathipati	akprathipati	Issues	Scrum Board	Commit Page	Profile	Add Repl

Wiki

Our wiki offers in-depth documentation for various aspects of our project.

Deployment

Contributing Guidelines

Project Theme + Technicals

Week 11 PBL Final

PBL theme consistent through project and described in Github Pages

Our PBL theme is a college application service for students, including features such as deadlines, due dates, and application fees. Our features include thge use a database of college application information to create features such as a calendar with deadlines, FAQ’s with a search function, and a slideshow of colleges with additional information. In addition, students can log in and set colleges they’re interested in applying to, opening a page with information specific to them and being able to opt to get notifications for upcoming deadlines.

Sassy / Bootstrap illustration in GitHub pages

• Sass partials are utilized within our project to organize the project below
• Variable assignment are done below, so that the hexadecimal value of the colors don’t need to be needlessly retyped:

  $light: #f7f7f7;
  $dark: #222121;
  $lime: #00cc66;
  $orangeRed: #fb4b4e;
  $blue: #2541b2;
  

• Example shown here:

  .navbar {
  background: $light; // see how instead of having to retype the hexadecimal, I can just reference it like this WOWOW so COOL
  height: 80px;
  display: flex;
  justify-content: space-between;
  padding: 0.5rem calc((100vw - 1200px) / 2);
  z-index: 10;
  position: relative;
  

• Nested styling is used within our project below in the hero section of the SCSS:

  .hero {
  background-color: $light; // see how the rest of the code is indented within .hero
  
  &__container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    justify-items: center;
    margin: 0 auto;
    height: 90vh;
    z-index: 1;
    width: 100%;
    max-width: 1200px;
    padding-right: 24px;
    padding-left: 24px;
  
    @include tablet { // these will be explained next
      grid-template-columns: 1fr;
      height: 100%;
    }
  
    &--left {
      width: 100%;
      line-height: 1.2;
  
      @include tablet {
        padding: 5rem 0;
      }
  
      @include mobile {
        line-height: 1.5;
      }
    }
  
    &--left h1 {
      font-size: 4rem;
      color: $lime;
  
      @include mobile {
        font-size: 1.5rem;
      }
    }
  
    &--left h2 {
      font-size: 4rem;
      color: $dark;
  
      @include mobile {
        font-size: 2rem;
      }
    }
  
    &--left p {
      font-size: 2rem;
      color: $dark;
      margin-top: 1rem;
      font-weight: 700;
  
      @include mobile {
        font-size: 1.5rem;
      }
    }
  
    &--btn {
      font-size: 1rem;
      background-color: $lime;
      padding: 14px 32px;
      border: none;
      border-radius: 4px;
      color: $light;
      margin-top: 2rem;
      cursor: pointer;
      position: relative;
      transition: all 0.3s;
      outline: none;
    }
  
    &--btn a {
      position: relative;
      z-index: 2;
      color: $light;
      text-decoration: none;
    }
  
    &--btn:after { // code animates home page button so that it transitions to red when hovered
      position: absolute;
      content: '';
      top: 0;
      left: 0;
      width: 0;
      height: 100%;
      background: $orangeRed;
      transition: all 0.3s;
      border-radius: 4px;
    }
  
    &--btn:hover:after {
      width: 100%;
    }
  
    &--right {
      text-align: center;
    }
  
    &--img {
      height: 100%;
      width: 100%;
    }
  }
  }
  

• You can see how this code works in tandem with the Hero section of the HTML, the class definitions are associated with every definition of styling coded above: ``` html

// each of the classes here correspond to what's defined above in the scss

College Apps Are Coming!

Be Prepared

Sign up now to join the list.

```

Database - CRUD operations on project centered database tables and describe in GitHub Pages

• Webpage displaying the college list, with options to add, update, and delete colleges
• Used Bootstrap and Sassy when designing the page

• This is our POJO
• contains an generated id, a String for college name, and Date for deadline

• these are the methods for performing all of the CRUD operations

• using thymeleaf (th:each and th:text) to generate the table containing all the college info

Deployed Project 24/7 - Deployment Overview and Policies described in GitHub Pages

• These are the cmd steps that allow you to update and deploy your website using AWS
• Must first create a key on the AWS console
• Can then use their example ssh when following these steps to simply update and deploy the website
• Main commands are sudo git pull to update and sudo mvn package to initalize/deploy

Async Operation (ie JavaScript fetch) described in GitHub pages

• Use a Javascript method for searching
• The function masks certain results based on user input and doesn’t require refreshing the page

Week 3 (12/13-12/17) About pages + Unit 3 FRQ

Review ticket

Name	Link to code	Link to page
Kyle Myint	Link	Link
Charlie Zhu	Link	Link
Yajat Yadav	Link	Link
Eric Wang	Link	Link
Ak Prathipati	Link	Link