# COMPSCI Notes

## Dictionaries

List of key and value pairs, e.g.:

student_scores = { "Alex": 95, "Ben": 87, "Chloe": 92 }

### Accessing values:

student_scores["Alex"]

In an f-string:

print(f"Alex scored {student_scores['Alex']}")

### Adding/updating values:

student_scores["Alex"] = 97   # -> {Alex: 97}

### Deleting key:

student_scores.pop("Ben")

### Deleting value:

student_scores["Alex"] = None   # or ""

---

## Python (Web/Forms context)

Names and values — kinda like dictionaries.

p.input(type="radio", name="age", value=35)

p.input(type="radio", name="age", value=45)

If user selects the radio with 35, then age = 35.
request.form("age") will yield 35.

### Labels

p.label(for="name")("what the label reads")

---

## Routes

Two servers are used:

### @app.get(add_player)
- The displayed server where users enter their info.
- Example:

p.input(type="submit", formation="/add_player")

- When submitted, data from this form is sent to /add_player and user is sent to that link.
- Can have multiple buttons with different formation links, allowing each button to send info to different places.

### @app.post(add_player)
- The place where info is processed.
- Example:

request.form.get("username")
data = get_data()
add_player(data, ID, username, faculty)
save_data(data)

- Gets user info and saves it into a JSON file.
- Important: return redirect("player/{ID}") — allows user to be sent to another page after data is processed.

---

## Links

When to use: you just want navigation (no data submission).

p.a(href="/Link")("Name of link")

---

## Cookies

Before using cookies:

from flask import Flask, session
app.secret_key = "your_secret_key"

Must have!

### Storing data in session

Data structure: dictionary

### Reading/creating session

login = session.get("username", value)

### Writing session

login.append("value")

### Saving session

session['username'] = login

### Removing session (both key and value)

session['username'].clear()

session = {"username": None}

### Things to beware

Do not do this at the start of a function:

session = []

Every time it runs, it wipes the session data.

---

## JSON Files

Before using JSON:

from jsonhelpers import *

### Creating JSON file

create_if_not_exist('filename', datastructure)

### Reading JSON file

data = read_json_file("File name")

### Editing JSON file

data.append(stuff_you_wanna_add)

### Saving JSON file

write_json_file(filename, info_to_save)   # e.g., data

---

## Usability Heuristics

1. Visibility of System Status
2. Match Between the System and the Real World (mapping)
3. User Control and Freedom (user can back out if make error)
4. Consistency and Standards (consistent naming and structures)
5. Error Prevention (constraints)
6. Recognition Rather than Recall (intuitive)
7. Flexibility and Efficiency of Use
8. Aesthetic and Minimalist Design
9. Help Users Recognize, Diagnose, and Recover from Errors
10. Help and Documentation provided

---

## CSS

Before writing CSS:
```html
p.html(
    p.head(
        p.link(rel="stylesheet", href="static/file_name.css")
    )
    p.body(...)
)
```
### Basic structure without class or ID

selector (e.g., h1) {
    property: value;
}

### Classes / ID

- Classes can be reused.

HTML side:
```html
p.p("Hello", class_="important")
p.p("Warning", class_="important")
```
CSS side:
```css
.important {
    color: blue;
}
```
### Divs example
- html side:
```html
p.div(class_="header")(
    p.h1("Chess Tournament"),
    p.p("Welcome!")
)
```
- css side:
```css
.header {
    background-color: blue;
    color: white;
    padding: 20px;
}

.header h1 {
    color: red;
}
```
----> >>> Can customise within induvidual divs

### ID

HTML side:
```html
p.div(
    p.h1(id="header")("Chess Tournament")
)
```
CSS side:
```css
#header {
    background: black;
}
```

---

## Grids Example

### HTML side
```html
def grids():
    return p.div(class_="container")(
        p.div(class_="header")(
            p.p("header stuff goes here")
        ),
        p.div(class_="menu")(
            p.p("navigation"),
            p.p("buttons"),
            p.p("go here")
        ),
        p.div(class_="content")(
            p.p("main content goes here")
        ),
        p.div(class_="footer")(
            p.p("Footer stuff here")
        )
    )
```

### CSS side

/* ========== CSS GRID LAYOUT ========== */

markdown
```css

.container {
    display: grid;
    grid-template-areas:
        "header header"
        "menu content"
        "menu footer";
    grid-template-columns: 200px 1fr;
    gap: 12px;
    background-color: #f6f1e6;
    padding: 20px;
    border-radius: 12px;
    border: 2px solid #3361af;
}

/* ========== SHARED BOX STYLING ========== */

.container div {
    background-color: #a2c4ea;
    padding: 16px;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* ========== GRID AREA ASSIGNMENTS ========== */

.header {
    grid-area: header;
    font-size: 1.5rem;
    font-weight: bold;
}

.menu {
    grid-area: menu;
}

.content {
    grid-area: content;
}

.footer {
    grid-area: footer;
}
```
---

## Common Errors

- KeyError — missing dictionary key
- TypeError — wrong data types
- NameError — variable not defined
- SyntaxError — wrong Python syntax
