SanjayB06 / flask_portfolio

Tri 1: Python and Flask Intro
1 stars 0 forks source link

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.