AP CSP Period 4: Team Gaico

Flask Portfolio Starter

Runtime link: https://portfolio.nighthawkcodingsociety.com/

Contributors

Names	Profile	Tasks	Scrumboard	Commits
Sanjay	SanjayB06	Tasks	Scrumboard	Commits
Matthew	Pqhantom	Tasks	Scrumboard	Commits
Gavin	GavinYWu	Tasks	Scrumboard	Commits
Samuel	Samuelwaang	Tasks	Scrumboard	Commits

Pair Share Journals

Names	Journal
Sanjay	Samuel & Sanjay
Gavin	Gavin & Matthew
Matthew	Gavin & Matthew
Samuel	Samuel & Sanjay

Week 9

Task	Description of Task	Link to Task
API Trivia	Add the actual trivia quiz to our project	API Trivia
Topic List	Add a list or dictionary of our trivia topics	Topics List
New Color Scheme	Change the color scheme from the previous green and pink to dark blue and grey	New Color Scheme
Wireframe Page	Add a page on our project showing the previous wireframes we have done	Wireframe Page
History Trivia Page	Make the page for the history trivia topic	History Trivia Page

Names	Description of what User did	Link to Tangible
Sanjay	Make the skeleton for the trivia quiz Add trivia quiz to our project	API Trivia Added Skeleton Quiz Functionality
Gavin	Add dictionary of the different trivia topics	Topic List
Matthew	Change the color scheme from the previous green and pink to dark blue and grey	New Color Scheme
Samuel	Add a page on our project showing the previous wireframes we have done Make the page for the history trivia topic	Wireframe Page History Trivia Page

Week 8

Task	Description of Task	Link to Task
Hover Navbar	Add hovering effect for navbar	Hover Navbar
More Navbar Menus	Add more dropdowns for navbar	More Navbar Menus
Redesign Unsigned Addition	Change font color and table in binar_addition.html	Redesign Unsigned Addition
Change Color Scheme	Change the color scheme from blue and yellow to pink and green	Change Color Scheme

Names	Description of what User did	Link to Tangible
Sanjay	Redesign whole navbar and restyle binary.html	Hover Navbar
Gavin	Complete unsigned addition from last week Redesign Unsigned Addition page	Unsigned Addition Unsigned Addition Design
Matthew	Add second dropdown in navbar called Minilabs containing Binarylabs, Conceptuals, and Wireframing Activity	More Navbar Menus
Samuel	Change color scheme of binary.html and navbar	Restyling

Week 7

Task	Description of Task	Link to Task
Extend ASCII to Unicode	Change ASCII to unicode	Extend ASCII to Unicode
Multiply and divide by 2	Add multiplication and division to binary.html	Multiply and divide by 2
Signed Addition	Add negative values to binary	Signed Addition
Logic Gates	Make a table displaying the understanding of CB materials	Logic Gates
Unsigned Addition	Add three rows of bits with the first two rows displaying the values and the last row showing the sum or the difference of the first two rows	Unsigned Addition
Color Codes	Display three rows of 8 bits. Allow for code to be 0 to 255, show color for RGB. Also, show color for R,G,B independently	Color Codes

Names	Description of what User did	Link to Tangible
Sanjay	ASCII/Unicode Conversion Changing ASCII to UNICODE based on binary value Left and Right Shift (muliplication and division) on binary page.	Minor Color Code Styling ASCII/UNICODE Conversion + Extra Task Left and Right shift
Gavin	Create new HTML file with 3 rows of 8 bits for addition	Unsigned Addition
Matthew	Created color code page Minor styling on Color Code page	Color Code Creation Minor Styling on Color Code Page
Samuel	Created logic gates page Logic gates styling	Logic Gates Styling on Logic Gates Page

Week 6

Task	Description of Task	Link to Task
Research/Study sheet/journal - Bases	Take notes for base	Research/Study sheet/journal - Bases
RGB Values with Image - Frontend	Add greyscale for RGB	RGB Greyscale
RGB Values with an Image, Backend	Add text on top of images in RGB	RGB- adding text on image
RGB Values with an Image, New Development	Display the RGB value of the image	RGB Values with an Image, New Development
Documentation	Cite examples from code describing our project layout and explaining the layout files and reasoning behind organization	Documentation
Add Loop to RGB image Manipulation	Add second image to RGB.html	Add Loop to RGB image Manipulation
Add Image Rotation	Make image rotate when entering the RGB page	Add Image Rotation

Names	Description of what User did	Link to Tangible
Sanjay	Rename the RGB file Add RGB to greyscale Make greyscale able to toggle back to original	RGB File rename RGB grayscale RGB Grayscale Toggles back to Original
Gavin	Adding loop to RGB image manipulation adding image rotation	Adding Loop to RGB Image Manipulation Adding Image Rotation
Matthew	Fix navbar by updating the addresses FIx visual error on Binary page	Refix Navbar Remove Selector
Samuel	Takes notes for base Fix the table in the Binary page Put text on the image in RGB page	Research for Bases Fix Binary Table Put Text on Image in RGB

Week 5

Task	Description of Task	Link to Task
Scrum/Pair Activity - OOs and TOs	Take notes for tpt week 5	Scrum/Pair Activity - OOs and TOs
Scrum/Pair Activity 3.1	Take notes for 3.1 video on Gavin and Matthew's Journal	Scrum/Pair Activity 3.1
Scrum/Pair Activity 3.2	Take notes for 3.2 video on Sanjay and Samuel's Journal	Scrum/Pair Activity 3.2)
Add RGB to our Project	Add the code for RGB to our project	Add RGB to our Project

Names	Description of what User did	Link to Tangible
Sanjay	Add RGB file code	RGB File
Gavin	Make tables for "Contributors" section and "Pair Share Journals" section Make task and commit table for week 4 Take notes for 3.1 videos from Collegeboard	Readme Table Week 4 Table 3.1 Notes
Matthew	Fix RGB compatibility issues	RGB Fix
Samuel	Fix code for push mistake Take notes for 3.2 vdieos from Collegeboard	Fix Code 1 Fix Code 2 3.2 Notes

Week 4

Task	Description of Task	Link to Task
Dropdown Greet Menu	Add dropdown for greet menu	Dropdown Greet Menu
Add binary.html to project	Add binary page to our project	Add binary.html to project
Change Binary Background Color	Change the background color for binary page	Change Binary Background Color
Change on/off switches on binary.html	Change the on and off light bulbs for binary page	Change on/off switches on binary.html
ASCII Conversion	Add ASCII conversion for binary page	ASCII Conversion
Design our own nav bar	Redesign our navbar for the project	Design our own nav bar
Reorganize directories and folders	Organize our code	Reorganize Directories and Folders)

Names	Description of what User did	Link to Commits
Sanjay	Enables ASCII Conversion based on binary switches Fixes navbar on the binary page Reorganizes directories and folders	Sanjay About Page ASCII Conversion Enabled New NavBar on Binary Page Reorganize Directories and Folders
Gavin	Create tables for readme Hard code bits to 16 Add light bulbs Remove the extra arrow on the dropdown on navbar	Readme Table Set Hard Coded Bits to 16 Lightbulbs Fix Dropdown Issues
Matthew	Add about us dropdown Change light bulb for binary page Add table on binary page Fix ASCII and style binary page Fix input on binary page	Navbar Dropdown Navbar Formatting Current Lightbulbs Binary Formatting/Add Table Edit Ascii Conversion & Style Binary Page Binary Input Fixed
Samuel	Attempt to change light bulbs for binary page Change background color for binary page	Change Binary Picture Change Binary Background

Idea

Starter code should be fun and practical.

Visual thoughts

Organize with Bootstrap menu

Add some color and fun through VANTA Visuals (birds, halo, solar, net)

Show some practical and fun links (hrefs) like Twitter, Git, Youtube

Show project specific links (hrefs) per page

Implementation progress (August 13th, 2021)

Project entry point is main.py, this enables Flask Web App and provides capability to renders templates (HTML files)

The main.py is the Web Server Gateway Interface, essentially it contains a HTTP route and HTML file relationship. The Python code constructs WSGI relationships for index, kangaroos, walruses, and hawkers.

The project structure contains many directories and files. The template directory (containing html files) and static directory (containing js files) are common standards for HTML coding. Static files can be pictures and videos, in this project they are mostly javascript backgrounds.

WSGI templates: index.html, kangaroos.html, ... are aligned with routes in main.py.

Other templates support WSGI templates. The base.html template contains common Head, Style, Body, Script definitions. WSGI templates often "include" or "extend" these templates. This is a way to reuse code.

The VANTA javascript statics (backgrounds) are shown and defaulted in base.html (birds), but are block replaced as needed in other templates (solar, net, ...)

The Bootstrap Navbar code is in navbar.html. The base.html code includes navbar.html. The WSGI html files extend base.html files. This is a process of management and correlation to optimize code management. For instance, if the menu changes discovery of navbar.html is easy, one change reflects on all WSGI html files.

Jinja2 variables usage is to isolate data and allow redefinitions of attributes in templates. Observe "{% set variable = %}" syntax for definition and "{{ variable }}" for reference.

The base.html uses combination of Bootstrap grid styling and custom CSS styling. Grid styling in observe with the "" markers. A Bootstrap Grid has a width of 12, thus four "Col-3" markers could fit on a Grid row.

A key purpose of this project is to embed links to other content. The "href=" definition embeds hyperlinks into the rendered HTML. The base.html file shows usage of "href={{github}}", the "{{github}}" is a Jinja2 variable. Jinja2 variables are pre-processed by Python, a variable swap with value, before being sent to the browser.

IDE management (things that happened beyond plan)

Recall on ".gitignore" solution to the pains of temporary files. Start a ".gitignore" and avoid promoting temporary files to Git, for instance IDE xml files.

A project needs to establish a "requirements.txt" to keep track of Python packages used by the project. This help in other IDEs and Deployment. IntelliJ has menu Tool -> Sync Python Requirements to start file.

AP CSP Period 4: Team Gaico

Scrum Board

Insights with Contributors and Commits

Table of Contents

1. Contributors

2. Pair Share Journal 1 Gavin & Matthew

2.5 Pair Share Journal 2 Samuel & Sanjay

3. Project Ideation - We are going to make a trivia game

4. Sprint 0: Introduction - we installed intellij, we made a fork of the repository, setup intellij

##Project Ideation: ##Idea: A fun and interactive trivia game/website that can be used as a studying tool or simply just for fun.