diff --git a/.gitignore b/.gitignore index e9e67717..3e8e622f 100644 --- a/.gitignore +++ b/.gitignore @@ -8,7 +8,7 @@ Code/Theo/quote_login.py Code/josh/labs/API_lab/.env env secrets.* - +images/ Code/Theo/django/blog/db.sqlite3 @@ -20,7 +20,8 @@ Code/Theo/django/blog/db.sqlite3 *.pot *.pyc __pycache__ -db.sqlite3 +*db.sqlite3 + media uploads/ @@ -134,3 +135,4 @@ GitHub.sublime-settings .history .vscode/settings.json +Code/Austen/js-05/scripts/secrets.js diff --git a/3 JavaScript/demo/quoteAPISolution/index.css b/3 JavaScript/demo/quoteAPISolution/index.css new file mode 100644 index 00000000..503f3faf --- /dev/null +++ b/3 JavaScript/demo/quoteAPISolution/index.css @@ -0,0 +1,139 @@ +@import url("https://fonts.googleapis.com/css2?family=Questrial&family=Varela+Round&display=swap"); + +* { + font-family: "Questrial", sans-serif; +} + +h1, +blockquote { + font-family: "Varela Round", sans-serif; +} + +h1 { + font-size: 3rem; +} +html, +body, +blockquote { + margin: 0; + padding: 0; +} + +.container { + background-color: burlywood; + min-height: 100vh; + width: 100%; + + padding-top: 100px; + + display: flex; + flex-direction: column; + align-items: center; + + position: relative; +} + +form { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + width: 100%; +} +#search-query-input { + width: 70vw; + padding: 15px; + margin: 25px; + border: none; + border-radius: 100px; + + font-size: 1.5rem; +} + +#search-query-input:focus { + outline: 2px solid teal; +} + +.button-icon { + font-size: 3rem; + transition: all 0.3s ease-in-out; +} + +.button-icon:hover { + cursor: pointer; + color: teal; +} + +#page-controls { + display: flex; + flex-direction: column; + align-items: center; + width: 60vw; +} + +#page-change-arrows { + display: flex; + align-items: center; + justify-content: space-around; + margin: 20px; + width: 60vw; +} + +#current-page-number { + font-size: 2rem; +} + +#quotes { + display: flex; + flex-direction: column; + align-items: center; +} + +blockquote { + background-color: rgba(165, 60, 60); + border-radius: 10px; + padding: 30px; + margin: 30px 0px; + max-width: 80%; + + font-size: 2rem; +} + +blockquote cite { + font-size: 1.5rem; + float: right; + margin-top: 20px; +} + +@media screen and (min-width: 768px) { + #search-query { + width: 40vw; + } + + #page-change-arrows { + width: 20vw; + } +} + +.spinner { + animation: spin 2s infinite linear; + color:rgba(165, 42, 42, 0.8) +} + +@keyframes spin { + 0% { + transform: rotate(0deg) + } + 25% { + transform: rotate(90deg) + } + 50% { + transform: rotate(180deg) + } + 75% { + transform: rotate(279deg) + } + 100% { + transform: rotate(360deg) + } +} \ No newline at end of file diff --git a/3 JavaScript/demo/quoteAPISolution/index.html b/3 JavaScript/demo/quoteAPISolution/index.html new file mode 100644 index 00000000..21dabacf --- /dev/null +++ b/3 JavaScript/demo/quoteAPISolution/index.html @@ -0,0 +1,48 @@ + + +
+ + + + + + + + + + + +{{userData}}+ +
+ Rated {{product.rating}} / 5 by {{product.rating_count}} users +
+ ++ {{product.description|truncatewords:20}} +
+ ++ {% for category in product.categories.all %} +
{{pic.caption}}
+First | ++ {% if user.first_name %} + {{user.first_name}} + {% else %} + Not Provided + {% endif %} + | +|
---|---|---|
Last | +{% if user.last_name %} + {{user.last_name}} + {% else %} + Not Provided + {% endif %} | +|
Joined | +{{user.date_joined|date}} | +
this is the page content for the index page
+{% endblock %} +``` + +**detail.html** +````html +{% extends 'myapp/base.html' %} +{% block title %}Details{% endblock %} +{% block content %} +this is content for the detail page
+{% endblock %} +```` + +## Filters + +Filters allow you to change how values are rendered in the template. + + diff --git a/4 Django/docs/05 Forms.md b/4 Django/docs/05 Forms.md new file mode 100644 index 00000000..fc17ba48 --- /dev/null +++ b/4 Django/docs/05 Forms.md @@ -0,0 +1,149 @@ + + +# Forms + +- [Overview](#overview) +- [Django Forms](#django-forms) + - [The ModelForm Class](#the-modelform-class) + - [Using Forms with CSS Frameworks](#using-forms-with-css-frameworks) + + + +## Overview + +A `form` is an HTML element that can transmit data from the front-end (client) to the back-end (server). Read more about forms [here](../../2%20Flask%20+%20HTML%20+%20CSS/docs/11%20HTML%20Forms.md). There are 5 important parts to a form: + +1. The `action` is the path or url to which the form's data will be submitted. +2. The `method` is the HTTP method to send the request in (POST, GET). +3. The `input` elements inside a form need name attributes, which will be used to retreive the data on the back-end. +4. The `