From 255bc381549e74d33e7b577e7241302bade4ce0b Mon Sep 17 00:00:00 2001 From: vextv Date: Mon, 7 Oct 2024 20:15:11 +0200 Subject: [PATCH 1/6] changed structure --- .idea/src/01_counter/styles.css | 190 ---------------------------- .idea/src/styles.css | 213 ++++++++++++++++++++++++++++++++ 2 files changed, 213 insertions(+), 190 deletions(-) delete mode 100644 .idea/src/01_counter/styles.css create mode 100644 .idea/src/styles.css diff --git a/.idea/src/01_counter/styles.css b/.idea/src/01_counter/styles.css deleted file mode 100644 index 84e807e..0000000 --- a/.idea/src/01_counter/styles.css +++ /dev/null @@ -1,190 +0,0 @@ -/* -=============== -Fonts -=============== -*/ -@import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto:400,700&display=swap"); - -/* -=============== -Variables -=============== -*/ - -:root { - /* dark shades of primary color*/ - --clr-primary-1: hsl(205, 86%, 17%); - --clr-primary-2: hsl(205, 77%, 27%); - --clr-primary-3: hsl(205, 72%, 37%); - --clr-primary-4: hsl(205, 63%, 48%); - /* primary/main color */ - --clr-primary-5: hsl(205, 78%, 60%); - /* lighter shades of primary color */ - --clr-primary-6: hsl(205, 89%, 70%); - --clr-primary-7: hsl(205, 90%, 76%); - --clr-primary-8: hsl(205, 86%, 81%); - --clr-primary-9: hsl(205, 90%, 88%); - --clr-primary-10: hsl(205, 100%, 96%); - /* darkest grey - used for headings */ - --clr-grey-1: hsl(209, 61%, 16%); - --clr-grey-2: hsl(211, 39%, 23%); - --clr-grey-3: hsl(209, 34%, 30%); - --clr-grey-4: hsl(209, 28%, 39%); - /* grey used for paragraphs */ - --clr-grey-5: hsl(210, 22%, 49%); - --clr-grey-6: hsl(209, 23%, 60%); - --clr-grey-7: hsl(211, 27%, 70%); - --clr-grey-8: hsl(210, 31%, 80%); - --clr-grey-9: hsl(212, 33%, 89%); - --clr-grey-10: hsl(210, 36%, 96%); - --clr-white: #fff; - --clr-red-dark: hsl(360, 67%, 44%); - --clr-red-light: hsl(360, 71%, 66%); - --clr-green-dark: hsl(125, 67%, 44%); - --clr-green-light: hsl(125, 71%, 66%); - --clr-black: #222; - --ff-primary: "Roboto", sans-serif; - --ff-secondary: "Open Sans", sans-serif; - --transition: all 0.3s linear; - --spacing: 0.1rem; - --radius: 0.25rem; - --light-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); - --dark-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); - --max-width: 1170px; - --fixed-width: 620px; -} -/* -=============== -Global Styles -=============== -*/ - -*, -::after, -::before { - margin: 0; - padding: 0; - box-sizing: border-box; -} -body { - font-family: var(--ff-secondary); - background: var(--clr-grey-10); - color: var(--clr-grey-1); - line-height: 1.5; - font-size: 0.875rem; -} -ul { - list-style-type: none; -} -a { - text-decoration: none; -} -h1, -h2, -h3, -h4 { - letter-spacing: var(--spacing); - text-transform: capitalize; - line-height: 1.25; - margin-bottom: 0.75rem; - font-family: var(--ff-primary); -} -h1 { - font-size: 3rem; -} -h2 { - font-size: 2rem; -} -h3 { - font-size: 1.25rem; -} -h4 { - font-size: 0.875rem; -} -p { - margin-bottom: 1.25rem; - color: var(--clr-grey-5); -} -@media screen and (min-width: 800px) { - h1 { - font-size: 4rem; - } - h2 { - font-size: 2.5rem; - } - h3 { - font-size: 1.75rem; - } - h4 { - font-size: 1rem; - } - body { - font-size: 1rem; - } - h1, - h2, - h3, - h4 { - line-height: 1; - } -} -/* global classes */ - -/* section */ -.section { - padding: 5rem 0; -} - -.section-center { - width: 90vw; - margin: 0 auto; - max-width: 1170px; -} -@media screen and (min-width: 992px) { - .section-center { - width: 95vw; - } -} -main { - min-height: 100vh; - display: grid; - place-items: center; -} - -/* -=============== -Counter -=============== -*/ - -main { - min-height: 100vh; - display: grid; - place-items: center; -} -.container { - text-align: center; -} -#value { - font-size: 6rem; - font-weight: bold; -} -.btn { - text-transform: uppercase; - background: transparent; - color: var(--clr-black); - padding: 0.375rem 0.75rem; - letter-spacing: var(--spacing); - display: inline-block; - transition: var(--transition); - font-size: 0.875rem; - border: 2px solid var(--clr-black); - cursor: pointer; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); - border-radius: var(--radius); - margin: 0.5rem; -} -.btn:hover { - color: var(--clr-white); - background: var(--clr-black); -} \ No newline at end of file diff --git a/.idea/src/styles.css b/.idea/src/styles.css new file mode 100644 index 0000000..c7a060f --- /dev/null +++ b/.idea/src/styles.css @@ -0,0 +1,213 @@ +/* +=============== +Fonts +=============== +*/ +@import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto:400,700&display=swap"); + +/* +=============== +Variables +=============== +*/ + +:root { + /* dark shades of primary color*/ + --clr-primary-1: hsl(205, 86%, 17%); + --clr-primary-2: hsl(205, 77%, 27%); + --clr-primary-3: hsl(205, 72%, 37%); + --clr-primary-4: hsl(205, 63%, 48%); + /* primary/main color */ + --clr-primary-5: hsl(205, 78%, 60%); + /* lighter shades of primary color */ + --clr-primary-6: hsl(205, 89%, 70%); + --clr-primary-7: hsl(205, 90%, 76%); + --clr-primary-8: hsl(205, 86%, 81%); + --clr-primary-9: hsl(205, 90%, 88%); + --clr-primary-10: hsl(205, 100%, 96%); + /* darkest grey - used for headings */ + --clr-grey-1: hsl(209, 61%, 16%); + --clr-grey-2: hsl(211, 39%, 23%); + --clr-grey-3: hsl(209, 34%, 30%); + --clr-grey-4: hsl(209, 28%, 39%); + /* grey used for paragraphs */ + --clr-grey-5: hsl(210, 22%, 49%); + --clr-grey-6: hsl(209, 23%, 60%); + --clr-grey-7: hsl(211, 27%, 70%); + --clr-grey-8: hsl(210, 31%, 80%); + --clr-grey-9: hsl(212, 33%, 89%); + --clr-grey-10: hsl(210, 36%, 96%); + --clr-white: #fff; + --clr-red-dark: hsl(360, 67%, 44%); + --clr-red-light: hsl(360, 71%, 66%); + --clr-green-dark: hsl(125, 67%, 44%); + --clr-green-light: hsl(125, 71%, 66%); + --clr-black: #222; + --ff-primary: "Roboto", sans-serif; + --ff-secondary: "Open Sans", sans-serif; + --transition: all 0.3s linear; + --spacing: 0.1rem; + --radius: 0.25rem; + --light-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); + --dark-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); + --max-width: 1170px; + --fixed-width: 620px; +} + +/* +=============== +Global Styles +=============== +*/ + +*, +::after, +::before { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: var(--ff-secondary); + background: var(--clr-grey-10); + color: var(--clr-grey-1); + line-height: 1.5; + font-size: 0.875rem; +} + +ul { + list-style-type: none; +} + +a { + text-decoration: none; +} + +h1, +h2, +h3, +h4 { + letter-spacing: var(--spacing); + text-transform: capitalize; + line-height: 1.25; + margin-bottom: 0.75rem; + font-family: var(--ff-primary); +} + +h1 { + font-size: 3rem; +} + +h2 { + font-size: 2rem; +} + +h3 { + font-size: 1.25rem; +} + +h4 { + font-size: 0.875rem; +} + +p { + margin-bottom: 1.25rem; + color: var(--clr-grey-5); +} + +@media screen and (min-width: 800px) { + h1 { + font-size: 4rem; + } + + h2 { + font-size: 2.5rem; + } + + h3 { + font-size: 1.75rem; + } + + h4 { + font-size: 1rem; + } + + body { + font-size: 1rem; + } + + h1, + h2, + h3, + h4 { + line-height: 1; + } +} + +/* global classes */ + +/* section */ +.section { + padding: 5rem 0; +} + +.section-center { + width: 90vw; + margin: 0 auto; + max-width: 1170px; +} + +@media screen and (min-width: 992px) { + .section-center { + width: 95vw; + } +} + +main { + min-height: 100vh; + display: grid; + place-items: center; +} + +/* +=============== +Counter +=============== +*/ + +main { + min-height: 100vh; + display: grid; + place-items: center; +} + +.container { + text-align: center; +} + +#value { + font-size: 6rem; + font-weight: bold; +} + +.btn { + text-transform: uppercase; + background: transparent; + color: var(--clr-black); + padding: 0.375rem 0.75rem; + letter-spacing: var(--spacing); + display: inline-block; + transition: var(--transition); + font-size: 0.875rem; + border: 2px solid var(--clr-black); + cursor: pointer; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); + border-radius: var(--radius); + margin: 0.5rem; +} + +.btn:hover { + color: var(--clr-white); + background: var(--clr-black); +} \ No newline at end of file -- 2.39.5 From 5aee9eea39de3e4e8a4be019ab0c5b954227f62e Mon Sep 17 00:00:00 2001 From: vextv Date: Tue, 8 Oct 2024 18:16:38 +0200 Subject: [PATCH 2/6] changed structure --- .gitignore | 1 + {.idea/src => src}/01_counter/app.js | 4 ++-- {.idea/src => src}/01_counter/index.html | 2 +- {.idea/src => src}/styles.css | 6 ------ 4 files changed, 4 insertions(+), 9 deletions(-) rename {.idea/src => src}/01_counter/app.js (89%) rename {.idea/src => src}/01_counter/index.html (90%) rename {.idea/src => src}/styles.css (97%) diff --git a/.gitignore b/.gitignore index ceaea36..3715fa6 100644 --- a/.gitignore +++ b/.gitignore @@ -130,3 +130,4 @@ dist .yarn/install-state.gz .pnp.* +/.idea/git_toolbox_blame.xml diff --git a/.idea/src/01_counter/app.js b/src/01_counter/app.js similarity index 89% rename from .idea/src/01_counter/app.js rename to src/01_counter/app.js index b609b85..44f3afb 100644 --- a/.idea/src/01_counter/app.js +++ b/src/01_counter/app.js @@ -3,9 +3,9 @@ let count = 0; // select value and buttons const value = document.querySelector("#value"); -const btns = document.querySelectorAll(".btn"); +const buttons = document.querySelectorAll(".btn"); -btns.forEach(function (btn) { +buttons.forEach(function (btn) { btn.addEventListener("click", function (e) { const styles = e.currentTarget.classList; if (styles.contains("decrease")) { diff --git a/.idea/src/01_counter/index.html b/src/01_counter/index.html similarity index 90% rename from .idea/src/01_counter/index.html rename to src/01_counter/index.html index c43c7f4..12bb760 100644 --- a/.idea/src/01_counter/index.html +++ b/src/01_counter/index.html @@ -7,7 +7,7 @@ Counter - +
diff --git a/.idea/src/styles.css b/src/styles.css similarity index 97% rename from .idea/src/styles.css rename to src/styles.css index c7a060f..cf1668c 100644 --- a/.idea/src/styles.css +++ b/src/styles.css @@ -176,12 +176,6 @@ Counter =============== */ -main { - min-height: 100vh; - display: grid; - place-items: center; -} - .container { text-align: center; } -- 2.39.5 From a4db6712a4b40cee4a65290175af92f798e68331 Mon Sep 17 00:00:00 2001 From: vextv Date: Tue, 8 Oct 2024 21:04:24 +0200 Subject: [PATCH 3/6] added sql scripts --- sql/createDB.sql | 27 +++++++++++++++++++++++++++ sql/rollbackDB.sql | 17 +++++++++++++++++ 2 files changed, 44 insertions(+) create mode 100644 sql/createDB.sql create mode 100644 sql/rollbackDB.sql diff --git a/sql/createDB.sql b/sql/createDB.sql new file mode 100644 index 0000000..3c52805 --- /dev/null +++ b/sql/createDB.sql @@ -0,0 +1,27 @@ +CREATE +DATABASE autohaendler; +\c +autohaendler + +CREATE TYPE color; +CREATE TYPE make; +CREATE TYPE model; +CREATE TYPE engine; +CREATE TYPE price; +CREATE TYPE doors; + +CREATE +EXTENSION IF NOT EXISTS "uuid-ossp"; + +CREATE TABLE autohaendler_stock +( + id UUID NOT NULL DEFAULT uuid_generate_v4(), + color TEXT NOT NULL, + make TEXT NOT NULL, + model TEXT NOT NULL, + engine TEXT NOT NULL, + price TEXT NOT NULL, + doors TEXT NOT NULL, +); + +INSERT INTO autohaendler_stock (color, make, model, engine, price, doors); diff --git a/sql/rollbackDB.sql b/sql/rollbackDB.sql new file mode 100644 index 0000000..07aa47c --- /dev/null +++ b/sql/rollbackDB.sql @@ -0,0 +1,17 @@ +\c +autohaendler + +DROP TABLE autohaendler; + +DROP TYPE IF EXISTS color; +DROP TYPE IF EXISTS make; +DROP TYPE IF EXISTS model; +DROP TYPE IF EXISTS engine; +DROP TYPE IF EXISTS price; +DROP TYPE IF EXISTS doors; + +\c +postgres + +DROP +DATABASE autohaendler; -- 2.39.5 From 0513c50b674f4f58aa767882680d70c971bbe9eb Mon Sep 17 00:00:00 2001 From: vextv Date: Thu, 10 Oct 2024 21:51:25 +0200 Subject: [PATCH 4/6] added more code examples --- .idea/dataSources.xml | 18 +++++++++ .idea/sqldialects.xml | 7 ++++ sql/createDB.sql | 5 +-- .../database_calls/getDatabaseTable.php | 38 +++++++++++++++++++ .../example/database_calls/startAjax.js | 16 ++++++++ src/{ => frontend}/01_counter/app.js | 0 src/{ => frontend}/01_counter/index.html | 0 src/frontend/example/index.html | 11 ++++++ 8 files changed, 92 insertions(+), 3 deletions(-) create mode 100644 .idea/dataSources.xml create mode 100644 .idea/sqldialects.xml create mode 100644 src/backend/example/database_calls/getDatabaseTable.php create mode 100644 src/backend/example/database_calls/startAjax.js rename src/{ => frontend}/01_counter/app.js (100%) rename src/{ => frontend}/01_counter/index.html (100%) create mode 100644 src/frontend/example/index.html diff --git a/.idea/dataSources.xml b/.idea/dataSources.xml new file mode 100644 index 0000000..63a12b6 --- /dev/null +++ b/.idea/dataSources.xml @@ -0,0 +1,18 @@ + + + + + postgresql + true + org.postgresql.Driver + jdbc:postgresql://localhost:5432/postgres + + + + + + + $ProjectFileDir$ + + + \ No newline at end of file diff --git a/.idea/sqldialects.xml b/.idea/sqldialects.xml new file mode 100644 index 0000000..7ed6e52 --- /dev/null +++ b/.idea/sqldialects.xml @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/sql/createDB.sql b/sql/createDB.sql index 3c52805..c5b57e8 100644 --- a/sql/createDB.sql +++ b/sql/createDB.sql @@ -1,5 +1,5 @@ CREATE -DATABASE autohaendler; + DATABASE autohaendler; \c autohaendler @@ -11,11 +11,10 @@ CREATE TYPE price; CREATE TYPE doors; CREATE -EXTENSION IF NOT EXISTS "uuid-ossp"; + EXTENSION IF NOT EXISTS "uuid-ossp"; CREATE TABLE autohaendler_stock ( - id UUID NOT NULL DEFAULT uuid_generate_v4(), color TEXT NOT NULL, make TEXT NOT NULL, model TEXT NOT NULL, diff --git a/src/backend/example/database_calls/getDatabaseTable.php b/src/backend/example/database_calls/getDatabaseTable.php new file mode 100644 index 0000000..cfab334 --- /dev/null +++ b/src/backend/example/database_calls/getDatabaseTable.php @@ -0,0 +1,38 @@ +set_charset("utf8mb4"); +// close connection on error +if ($conn->connect_error) { + die("Connection failed: " . $conn->connect_error); +} + +// prepare SQL statement and execute on database +$sql = "SELECT * FROM table"; +// get data from database +$result = $conn->query($sql); +$conn->close(); + +// check if result is empty & has more than "0" rows +if (!empty($result) && (int)$result->num_rows > 0) { + while ($row = $result->fetch_assoc()) { + $sqlArray[] = $row; + } + echo json_encode($sqlArray); +} else { + echo "0 results"; +} +exit(); diff --git a/src/backend/example/database_calls/startAjax.js b/src/backend/example/database_calls/startAjax.js new file mode 100644 index 0000000..7e97f61 --- /dev/null +++ b/src/backend/example/database_calls/startAjax.js @@ -0,0 +1,16 @@ +$(document).ready(function () { + + // ajax function to call PHP script on webserver + $.ajax({ + type: "POST", // use what "type" is necessary, POST is most common + url: "getDatabaseTable.php", // path to .php file that will be executed + dataType: "json", // return type of the PHP script + success: function (data) { + console.log("successfully called PHP file!") + // implement logic to write json into HTML here + }, + error: function () { + console.log("failed to call PHP file!") + } + }); +}) \ No newline at end of file diff --git a/src/01_counter/app.js b/src/frontend/01_counter/app.js similarity index 100% rename from src/01_counter/app.js rename to src/frontend/01_counter/app.js diff --git a/src/01_counter/index.html b/src/frontend/01_counter/index.html similarity index 100% rename from src/01_counter/index.html rename to src/frontend/01_counter/index.html diff --git a/src/frontend/example/index.html b/src/frontend/example/index.html new file mode 100644 index 0000000..64b999f --- /dev/null +++ b/src/frontend/example/index.html @@ -0,0 +1,11 @@ + + + + + Example 1 + + + + + + \ No newline at end of file -- 2.39.5 From a5ff4aa7f7b23d904508d9d1fae20cb19a04352f Mon Sep 17 00:00:00 2001 From: vextv Date: Thu, 10 Oct 2024 22:03:35 +0200 Subject: [PATCH 5/6] added more code examples --- {sql => sql_scripts}/createDB.sql | 0 {sql => sql_scripts}/rollbackDB.sql | 0 .../database_calls/getDatabaseTable.php | 2 +- .../example/database_calls/startAjax.js | 1 + src/frontend/{ => example}/01_counter/app.js | 0 .../{ => example}/01_counter/index.html | 0 .../example/grid_layout/grid_layout.css | 37 +++++++++++++++++++ src/frontend/example/grid_layout/index.html | 18 +++++++++ src/frontend/example/index.html | 11 ------ 9 files changed, 57 insertions(+), 12 deletions(-) rename {sql => sql_scripts}/createDB.sql (100%) rename {sql => sql_scripts}/rollbackDB.sql (100%) rename src/frontend/{ => example}/01_counter/app.js (100%) rename src/frontend/{ => example}/01_counter/index.html (100%) create mode 100644 src/frontend/example/grid_layout/grid_layout.css create mode 100644 src/frontend/example/grid_layout/index.html delete mode 100644 src/frontend/example/index.html diff --git a/sql/createDB.sql b/sql_scripts/createDB.sql similarity index 100% rename from sql/createDB.sql rename to sql_scripts/createDB.sql diff --git a/sql/rollbackDB.sql b/sql_scripts/rollbackDB.sql similarity index 100% rename from sql/rollbackDB.sql rename to sql_scripts/rollbackDB.sql diff --git a/src/backend/example/database_calls/getDatabaseTable.php b/src/backend/example/database_calls/getDatabaseTable.php index cfab334..e8323de 100644 --- a/src/backend/example/database_calls/getDatabaseTable.php +++ b/src/backend/example/database_calls/getDatabaseTable.php @@ -3,7 +3,7 @@ $hostname = "hostname/IP"; $username = "username"; $password = "password"; $db_name = "databaseName"; -$port = "webport"; +$port = "port"; $sqlArray = []; diff --git a/src/backend/example/database_calls/startAjax.js b/src/backend/example/database_calls/startAjax.js index 7e97f61..6d68ea2 100644 --- a/src/backend/example/database_calls/startAjax.js +++ b/src/backend/example/database_calls/startAjax.js @@ -7,6 +7,7 @@ $(document).ready(function () { dataType: "json", // return type of the PHP script success: function (data) { console.log("successfully called PHP file!") + console.log(data) // implement logic to write json into HTML here }, error: function () { diff --git a/src/frontend/01_counter/app.js b/src/frontend/example/01_counter/app.js similarity index 100% rename from src/frontend/01_counter/app.js rename to src/frontend/example/01_counter/app.js diff --git a/src/frontend/01_counter/index.html b/src/frontend/example/01_counter/index.html similarity index 100% rename from src/frontend/01_counter/index.html rename to src/frontend/example/01_counter/index.html diff --git a/src/frontend/example/grid_layout/grid_layout.css b/src/frontend/example/grid_layout/grid_layout.css new file mode 100644 index 0000000..9be4f0e --- /dev/null +++ b/src/frontend/example/grid_layout/grid_layout.css @@ -0,0 +1,37 @@ +.item1 { + grid-area: header; +} + +.item2 { + grid-area: menu; +} + +.item3 { + grid-area: main; +} + +.item4 { + grid-area: right; +} + +.item5 { + grid-area: footer; +} + +.grid-container { + display: grid; + grid-template-areas: + 'header header header header header header' + 'menu main main main main right' + 'menu footer footer footer footer footer'; + gap: 10px; + background-color: whitesmoke; + padding: 10px; +} + +.grid-container > div { + background-color: rgba(255, 255, 255, 0.8); + text-align: center; + padding: 20px 0; + font-size: 30px; +} \ No newline at end of file diff --git a/src/frontend/example/grid_layout/index.html b/src/frontend/example/grid_layout/index.html new file mode 100644 index 0000000..1d2c511 --- /dev/null +++ b/src/frontend/example/grid_layout/index.html @@ -0,0 +1,18 @@ + + + + + Example 1 + + + + +
+
header
+
menu
+
main
+
right
+
footer
+
+ + \ No newline at end of file diff --git a/src/frontend/example/index.html b/src/frontend/example/index.html deleted file mode 100644 index 64b999f..0000000 --- a/src/frontend/example/index.html +++ /dev/null @@ -1,11 +0,0 @@ - - - - - Example 1 - - - - - - \ No newline at end of file -- 2.39.5 From 9852d0367f52519fc8bef17676ee06ce2b6b714b Mon Sep 17 00:00:00 2001 From: vextv Date: Sun, 13 Oct 2024 16:07:52 +0200 Subject: [PATCH 6/6] added more code examples --- .idea/Webshop.iml | 1 + .idea/git_toolbox_prj.xml | 15 + .idea/jsLibraryMappings.xml | 6 + .idea/sqldialects.xml | 4 +- src/frontend/example/01_counter/index.html | 2 +- .../example/01_counter}/styles.css | 0 src/frontend/example/05_sidebar/app.js | 16 + src/frontend/example/05_sidebar/index.html | 69 +++++ src/frontend/example/05_sidebar/logo.svg | 17 ++ src/frontend/example/05_sidebar/styles.css | 289 ++++++++++++++++++ src/frontend/example/grid_layout/index.html | 2 +- src/frontend/example/toggle_dark_light/app.js | 4 + .../example/toggle_dark_light/index.html | 17 ++ .../example/toggle_dark_light/styles.css | 11 + 14 files changed, 449 insertions(+), 4 deletions(-) create mode 100644 .idea/git_toolbox_prj.xml create mode 100644 .idea/jsLibraryMappings.xml rename src/{ => frontend/example/01_counter}/styles.css (100%) create mode 100644 src/frontend/example/05_sidebar/app.js create mode 100644 src/frontend/example/05_sidebar/index.html create mode 100644 src/frontend/example/05_sidebar/logo.svg create mode 100644 src/frontend/example/05_sidebar/styles.css create mode 100644 src/frontend/example/toggle_dark_light/app.js create mode 100644 src/frontend/example/toggle_dark_light/index.html create mode 100644 src/frontend/example/toggle_dark_light/styles.css diff --git a/.idea/Webshop.iml b/.idea/Webshop.iml index d6ebd48..533a2cb 100644 --- a/.idea/Webshop.iml +++ b/.idea/Webshop.iml @@ -5,5 +5,6 @@ + \ No newline at end of file diff --git a/.idea/git_toolbox_prj.xml b/.idea/git_toolbox_prj.xml new file mode 100644 index 0000000..02b915b --- /dev/null +++ b/.idea/git_toolbox_prj.xml @@ -0,0 +1,15 @@ + + + + + + + \ No newline at end of file diff --git a/.idea/jsLibraryMappings.xml b/.idea/jsLibraryMappings.xml new file mode 100644 index 0000000..9da3653 --- /dev/null +++ b/.idea/jsLibraryMappings.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/.idea/sqldialects.xml b/.idea/sqldialects.xml index 7ed6e52..a8b32a1 100644 --- a/.idea/sqldialects.xml +++ b/.idea/sqldialects.xml @@ -1,7 +1,7 @@ - - + + \ No newline at end of file diff --git a/src/frontend/example/01_counter/index.html b/src/frontend/example/01_counter/index.html index 12bb760..b1e6e92 100644 --- a/src/frontend/example/01_counter/index.html +++ b/src/frontend/example/01_counter/index.html @@ -7,7 +7,7 @@ Counter - +
diff --git a/src/styles.css b/src/frontend/example/01_counter/styles.css similarity index 100% rename from src/styles.css rename to src/frontend/example/01_counter/styles.css diff --git a/src/frontend/example/05_sidebar/app.js b/src/frontend/example/05_sidebar/app.js new file mode 100644 index 0000000..0bf53f3 --- /dev/null +++ b/src/frontend/example/05_sidebar/app.js @@ -0,0 +1,16 @@ +const toggleBtn = document.querySelector(".sidebar-toggle"); +const closeBtn = document.querySelector(".close-btn"); +const sidebar = document.querySelector(".sidebar"); + +toggleBtn.addEventListener("click", function () { + // if (sidebar.classList.contains("show-sidebar")) { + // sidebar.classList.remove("show-sidebar"); + // } else { + // sidebar.classList.add("show-sidebar"); + // } + sidebar.classList.toggle("show-sidebar"); +}); + +closeBtn.addEventListener("click", function () { + sidebar.classList.remove("show-sidebar"); +}); diff --git a/src/frontend/example/05_sidebar/index.html b/src/frontend/example/05_sidebar/index.html new file mode 100644 index 0000000..f4fb120 --- /dev/null +++ b/src/frontend/example/05_sidebar/index.html @@ -0,0 +1,69 @@ + + + + + + Sidebar + + + + + + + + + + \ No newline at end of file diff --git a/src/frontend/example/05_sidebar/logo.svg b/src/frontend/example/05_sidebar/logo.svg new file mode 100644 index 0000000..cccc49b --- /dev/null +++ b/src/frontend/example/05_sidebar/logo.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/src/frontend/example/05_sidebar/styles.css b/src/frontend/example/05_sidebar/styles.css new file mode 100644 index 0000000..2bfcaf8 --- /dev/null +++ b/src/frontend/example/05_sidebar/styles.css @@ -0,0 +1,289 @@ +/* +=============== +Fonts +=============== +*/ +@import url('https://fonts.googleapis.com/css?family=Open+Sans|Roboto:400,700&display=swap'); + +/* +=============== +Variables +=============== +*/ + +:root { + /* dark shades of primary color*/ + --clr-primary-1: hsl(205, 86%, 17%); + --clr-primary-2: hsl(205, 77%, 27%); + --clr-primary-3: hsl(205, 72%, 37%); + --clr-primary-4: hsl(205, 63%, 48%); + /* primary/main color */ + --clr-primary-5: hsl(205, 78%, 60%); + /* lighter shades of primary color */ + --clr-primary-6: hsl(205, 89%, 70%); + --clr-primary-7: hsl(205, 90%, 76%); + --clr-primary-8: hsl(205, 86%, 81%); + --clr-primary-9: hsl(205, 90%, 88%); + --clr-primary-10: hsl(205, 100%, 96%); + /* darkest grey - used for headings */ + --clr-grey-1: hsl(209, 61%, 16%); + --clr-grey-2: hsl(211, 39%, 23%); + --clr-grey-3: hsl(209, 34%, 30%); + --clr-grey-4: hsl(209, 28%, 39%); + /* grey used for paragraphs */ + --clr-grey-5: hsl(210, 22%, 49%); + --clr-grey-6: hsl(209, 23%, 60%); + --clr-grey-7: hsl(211, 27%, 70%); + --clr-grey-8: hsl(210, 31%, 80%); + --clr-grey-9: hsl(212, 33%, 89%); + --clr-grey-10: hsl(210, 36%, 96%); + --clr-white: #fff; + --clr-red-dark: hsl(360, 67%, 44%); + --clr-red-light: hsl(360, 71%, 66%); + --clr-green-dark: hsl(125, 67%, 44%); + --clr-green-light: hsl(125, 71%, 66%); + --clr-black: #222; + --ff-primary: 'Roboto', sans-serif; + --ff-secondary: 'Open Sans', sans-serif; + --transition: all 0.3s linear; + --spacing: 0.1rem; + --radius: 0.25rem; + --light-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); + --dark-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); + --max-width: 1170px; + --fixed-width: 620px; +} + +/* +=============== +Global Styles +=============== +*/ + +*, +::after, +::before { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: var(--ff-secondary); + background: var(--clr-grey-10); + color: var(--clr-grey-1); + line-height: 1.5; + font-size: 0.875rem; +} + +ul { + list-style-type: none; +} + +a { + text-decoration: none; +} + +h1, +h2, +h3, +h4 { + letter-spacing: var(--spacing); + text-transform: capitalize; + line-height: 1.25; + margin-bottom: 0.75rem; + font-family: var(--ff-primary); +} + +h1 { + font-size: 3rem; +} + +h2 { + font-size: 2rem; +} + +h3 { + font-size: 1.25rem; +} + +h4 { + font-size: 0.875rem; +} + +p { + margin-bottom: 1.25rem; + color: var(--clr-grey-5); +} + +@media screen and (min-width: 800px) { + h1 { + font-size: 4rem; + } + + h2 { + font-size: 2.5rem; + } + + h3 { + font-size: 1.75rem; + } + + h4 { + font-size: 1rem; + } + + body { + font-size: 1rem; + } + + h1, + h2, + h3, + h4 { + line-height: 1; + } +} + +/* global classes */ + +/* section */ +.section { + padding: 5rem 0; +} + +.section-center { + width: 90vw; + margin: 0 auto; + max-width: 1170px; +} + +@media screen and (min-width: 992px) { + .section-center { + width: 95vw; + } +} + +main { + min-height: 100vh; + display: grid; + place-items: center; +} + +/* +=============== +Sidebar +=============== +*/ +.sidebar-toggle { + position: fixed; + top: 2rem; + right: 3rem; + font-size: 2rem; + background: transparent; + border-color: transparent; + color: var(--clr-primary-5); + transition: var(--transition); + cursor: pointer; + animation: bounce 2s ease-in-out infinite; +} + +.sidebar-toggle:hover { + color: var(--clr-primary-7); +} + +@keyframes bounce { + 0% { + transform: scale(1); + } + 50% { + transform: scale(1.5); + } + 100% { + transform: scale(1); + } +} + +.sidebar-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 1rem 1.5rem; +} + +.close-btn { + font-size: 1.75rem; + background: transparent; + border-color: transparent; + color: var(--clr-primary-5); + transition: var(--transition); + cursor: pointer; + color: var(--clr-red-dark); +} + +.close-btn:hover { + color: var(--clr-red-light); + transform: rotate(360deg); +} + +.logo { + justify-self: center; + height: 40px; +} + +.links a { + display: block; + font-size: 1.5rem; + text-transform: capitalize; + padding: 1rem 1.5rem; + color: var(--clr-grey-5); + transition: var(--transition); +} + +.links a:hover { + background: var(--clr-primary-8); + color: var(--clr-primary-5); + padding-left: 1.75rem; +} + +.social-icons { + justify-self: center; + display: flex; + padding-bottom: 2rem; +} + +.social-icons a { + font-size: 1.5rem; + margin: 0 0.5rem; + color: var(--clr-primary-5); + transition: var(--transition); +} + +.social-icons a:hover { + color: var(--clr-primary-1); +} + +.sidebar { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: var(--clr-white); + display: grid; + grid-template-rows: auto 1fr auto; + row-gap: 1rem; + box-shadow: var(--clr-red-dark); + transition: var(--transition); + /* transform: translate(-100%); */ +} + +.show-sidebar { + transform: translate(0); +} + +@media screen and (min-width: 676px) { + .sidebar { + width: 400px; + } +} diff --git a/src/frontend/example/grid_layout/index.html b/src/frontend/example/grid_layout/index.html index 1d2c511..39c892c 100644 --- a/src/frontend/example/grid_layout/index.html +++ b/src/frontend/example/grid_layout/index.html @@ -3,7 +3,7 @@ Example 1 - + diff --git a/src/frontend/example/toggle_dark_light/app.js b/src/frontend/example/toggle_dark_light/app.js new file mode 100644 index 0000000..9b25a26 --- /dev/null +++ b/src/frontend/example/toggle_dark_light/app.js @@ -0,0 +1,4 @@ +function switchLightDark() { + let element = document.body + element.classList.toggle("dark-mode") +} \ No newline at end of file diff --git a/src/frontend/example/toggle_dark_light/index.html b/src/frontend/example/toggle_dark_light/index.html new file mode 100644 index 0000000..2b0ee21 --- /dev/null +++ b/src/frontend/example/toggle_dark_light/index.html @@ -0,0 +1,17 @@ + + + + + + Darkmode + + + +

Toggle Dark/Light Mode

+

Click the button to toggle between dark and light mode for this page.

+ + + + + + \ No newline at end of file diff --git a/src/frontend/example/toggle_dark_light/styles.css b/src/frontend/example/toggle_dark_light/styles.css new file mode 100644 index 0000000..aebb339 --- /dev/null +++ b/src/frontend/example/toggle_dark_light/styles.css @@ -0,0 +1,11 @@ +body { + padding: 25px; + background-color: white; + color: black; + font-size: 25px; +} + +.dark-mode { + background-color: black; + color: white; +} \ No newline at end of file -- 2.39.5