SAFESPACE

Topics:

• Using Html and CSS syntax in order to create a basic design for an app

• Using JS in order add any information that was necessary to the app

For this project, our team wanted to create an app which took the texts from users and return said text every day.

Description

Part Uno

• In order to create the website the UI team envisioned a page which was both inviting and practical in its use. Therefore we needed to design a website which saw that the user had access to a lot of knowledge about the app straight off the bat.

• Basic HTML and CSS is necessary for the design of this site as well as use of flexbox and block displays.

• The use of LESS was implemented for this project in order to manipulate the CSS. Various LESS files were created for different portions of the project in order for the code to be easier to read and more concise. For example, the header portion of the html had it's styling manipulated by the header.less file. Elements which were used for the most part for every single part of the page is located in the global.less file.

Part Dos

• The JS needed for the app requires a knowledge of all the basic functions and the use of arrays and their manipulations.

• Use of constructors and DOM events are to be used in order to activate and manipulate the tabs.

• In order for JS to work the group had to create two classes which will be able to control the tabs and the elements associated with them. The Tablink class for example is used to take a component and create components with it's traits. These components will be the tabs in this project and with it method will be capable of being selected. The second class should be the class which shows the information associated with the first class's component.

Attributes

General Attributes:

• h1,h2,h3
  • font-family: "Source Sans Pro", Helvetica, sans-serif;
  • font-size: 16pt;
  • font-weight: 300;
  • line-height: 1.65em;
  • color: #666;
• Button
  • border-radius: 4px;
  • border: 1px solid grey;
  • padding: 15px 115px 15px 115px;
• Img
  • height: 100px;
  • width: 100px;
• a
  • text-align: center;
  • display: flex;
  • padding: 10px 25px;
  • border: 2px white solid;
• media
  • max-width: 500px
• colors
  • General Colors: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);