├── LICENSE
├── README.md
├── bubblesort-visualizer-vue3
├── README.md
├── visualizer-method-2
│ ├── index.html
│ └── index.js
└── vue-cli-app-file-method-1
│ └── App.vue
├── docker
├── README.MD
├── mariadb-adminer-docker
│ └── docker-compose.yml
├── mongo-docker
│ ├── README.md
│ └── docker-compose.yml
├── mongo-express-docker
│ └── docker-compose.yml
└── read-env-file-docker
│ ├── docker-compose.yml
│ └── variables.env
├── frontend-projects
├── README.md
├── countdown-timer-static
│ ├── README.md
│ ├── images
│ │ └── example1.jpg
│ ├── index.html
│ ├── index.js
│ └── style.css
├── counter
│ ├── README.md
│ ├── index.html
│ ├── index.js
│ └── style.css
├── counting-up-animation
│ ├── README.md
│ ├── index.html
│ ├── index.js
│ └── style.css
├── digital-clock
│ ├── README.md
│ ├── index.html
│ ├── index.js
│ └── style.css
└── stopwatch
│ ├── README.md
│ ├── index.html
│ ├── stopwatch.js
│ └── style.css
├── mysql-go-docker
├── Dockerfile
├── docker-compose.yml
└── main.go
├── mysql_docker
├── README.Md
└── docker-compose.yml
├── phpmyadmin_docker
└── docker-compose.yml
├── postgres-go-docker
├── Dockerfile
├── README.md
├── docker-compose.yml
└── main.go
├── postgres_docker
├── README.md
└── docker-compose.yml
├── postgres_phppgadmin
├── README.md
└── docker-compose.yml
├── redis-go-docker
├── Dockerfile
├── docker-compose.yml
├── main.go
└── redis.conf
└── vue3-hello-world-example
├── index.html
└── main.js
/LICENSE:
--------------------------------------------------------------------------------
1 | Apache License
2 | Version 2.0, January 2004
3 | http://www.apache.org/licenses/
4 |
5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
6 |
7 | 1. Definitions.
8 |
9 | "License" shall mean the terms and conditions for use, reproduction,
10 | and distribution as defined by Sections 1 through 9 of this document.
11 |
12 | "Licensor" shall mean the copyright owner or entity authorized by
13 | the copyright owner that is granting the License.
14 |
15 | "Legal Entity" shall mean the union of the acting entity and all
16 | other entities that control, are controlled by, or are under common
17 | control with that entity. For the purposes of this definition,
18 | "control" means (i) the power, direct or indirect, to cause the
19 | direction or management of such entity, whether by contract or
20 | otherwise, or (ii) ownership of fifty percent (50%) or more of the
21 | outstanding shares, or (iii) beneficial ownership of such entity.
22 |
23 | "You" (or "Your") shall mean an individual or Legal Entity
24 | exercising permissions granted by this License.
25 |
26 | "Source" form shall mean the preferred form for making modifications,
27 | including but not limited to software source code, documentation
28 | source, and configuration files.
29 |
30 | "Object" form shall mean any form resulting from mechanical
31 | transformation or translation of a Source form, including but
32 | not limited to compiled object code, generated documentation,
33 | and conversions to other media types.
34 |
35 | "Work" shall mean the work of authorship, whether in Source or
36 | Object form, made available under the License, as indicated by a
37 | copyright notice that is included in or attached to the work
38 | (an example is provided in the Appendix below).
39 |
40 | "Derivative Works" shall mean any work, whether in Source or Object
41 | form, that is based on (or derived from) the Work and for which the
42 | editorial revisions, annotations, elaborations, or other modifications
43 | represent, as a whole, an original work of authorship. For the purposes
44 | of this License, Derivative Works shall not include works that remain
45 | separable from, or merely link (or bind by name) to the interfaces of,
46 | the Work and Derivative Works thereof.
47 |
48 | "Contribution" shall mean any work of authorship, including
49 | the original version of the Work and any modifications or additions
50 | to that Work or Derivative Works thereof, that is intentionally
51 | submitted to Licensor for inclusion in the Work by the copyright owner
52 | or by an individual or Legal Entity authorized to submit on behalf of
53 | the copyright owner. For the purposes of this definition, "submitted"
54 | means any form of electronic, verbal, or written communication sent
55 | to the Licensor or its representatives, including but not limited to
56 | communication on electronic mailing lists, source code control systems,
57 | and issue tracking systems that are managed by, or on behalf of, the
58 | Licensor for the purpose of discussing and improving the Work, but
59 | excluding communication that is conspicuously marked or otherwise
60 | designated in writing by the copyright owner as "Not a Contribution."
61 |
62 | "Contributor" shall mean Licensor and any individual or Legal Entity
63 | on behalf of whom a Contribution has been received by Licensor and
64 | subsequently incorporated within the Work.
65 |
66 | 2. Grant of Copyright License. Subject to the terms and conditions of
67 | this License, each Contributor hereby grants to You a perpetual,
68 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable
69 | copyright license to reproduce, prepare Derivative Works of,
70 | publicly display, publicly perform, sublicense, and distribute the
71 | Work and such Derivative Works in Source or Object form.
72 |
73 | 3. Grant of Patent License. Subject to the terms and conditions of
74 | this License, each Contributor hereby grants to You a perpetual,
75 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable
76 | (except as stated in this section) patent license to make, have made,
77 | use, offer to sell, sell, import, and otherwise transfer the Work,
78 | where such license applies only to those patent claims licensable
79 | by such Contributor that are necessarily infringed by their
80 | Contribution(s) alone or by combination of their Contribution(s)
81 | with the Work to which such Contribution(s) was submitted. If You
82 | institute patent litigation against any entity (including a
83 | cross-claim or counterclaim in a lawsuit) alleging that the Work
84 | or a Contribution incorporated within the Work constitutes direct
85 | or contributory patent infringement, then any patent licenses
86 | granted to You under this License for that Work shall terminate
87 | as of the date such litigation is filed.
88 |
89 | 4. Redistribution. You may reproduce and distribute copies of the
90 | Work or Derivative Works thereof in any medium, with or without
91 | modifications, and in Source or Object form, provided that You
92 | meet the following conditions:
93 |
94 | (a) You must give any other recipients of the Work or
95 | Derivative Works a copy of this License; and
96 |
97 | (b) You must cause any modified files to carry prominent notices
98 | stating that You changed the files; and
99 |
100 | (c) You must retain, in the Source form of any Derivative Works
101 | that You distribute, all copyright, patent, trademark, and
102 | attribution notices from the Source form of the Work,
103 | excluding those notices that do not pertain to any part of
104 | the Derivative Works; and
105 |
106 | (d) If the Work includes a "NOTICE" text file as part of its
107 | distribution, then any Derivative Works that You distribute must
108 | include a readable copy of the attribution notices contained
109 | within such NOTICE file, excluding those notices that do not
110 | pertain to any part of the Derivative Works, in at least one
111 | of the following places: within a NOTICE text file distributed
112 | as part of the Derivative Works; within the Source form or
113 | documentation, if provided along with the Derivative Works; or,
114 | within a display generated by the Derivative Works, if and
115 | wherever such third-party notices normally appear. The contents
116 | of the NOTICE file are for informational purposes only and
117 | do not modify the License. You may add Your own attribution
118 | notices within Derivative Works that You distribute, alongside
119 | or as an addendum to the NOTICE text from the Work, provided
120 | that such additional attribution notices cannot be construed
121 | as modifying the License.
122 |
123 | You may add Your own copyright statement to Your modifications and
124 | may provide additional or different license terms and conditions
125 | for use, reproduction, or distribution of Your modifications, or
126 | for any such Derivative Works as a whole, provided Your use,
127 | reproduction, and distribution of the Work otherwise complies with
128 | the conditions stated in this License.
129 |
130 | 5. Submission of Contributions. Unless You explicitly state otherwise,
131 | any Contribution intentionally submitted for inclusion in the Work
132 | by You to the Licensor shall be under the terms and conditions of
133 | this License, without any additional terms or conditions.
134 | Notwithstanding the above, nothing herein shall supersede or modify
135 | the terms of any separate license agreement you may have executed
136 | with Licensor regarding such Contributions.
137 |
138 | 6. Trademarks. This License does not grant permission to use the trade
139 | names, trademarks, service marks, or product names of the Licensor,
140 | except as required for reasonable and customary use in describing the
141 | origin of the Work and reproducing the content of the NOTICE file.
142 |
143 | 7. Disclaimer of Warranty. Unless required by applicable law or
144 | agreed to in writing, Licensor provides the Work (and each
145 | Contributor provides its Contributions) on an "AS IS" BASIS,
146 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
147 | implied, including, without limitation, any warranties or conditions
148 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
149 | PARTICULAR PURPOSE. You are solely responsible for determining the
150 | appropriateness of using or redistributing the Work and assume any
151 | risks associated with Your exercise of permissions under this License.
152 |
153 | 8. Limitation of Liability. In no event and under no legal theory,
154 | whether in tort (including negligence), contract, or otherwise,
155 | unless required by applicable law (such as deliberate and grossly
156 | negligent acts) or agreed to in writing, shall any Contributor be
157 | liable to You for damages, including any direct, indirect, special,
158 | incidental, or consequential damages of any character arising as a
159 | result of this License or out of the use or inability to use the
160 | Work (including but not limited to damages for loss of goodwill,
161 | work stoppage, computer failure or malfunction, or any and all
162 | other commercial damages or losses), even if such Contributor
163 | has been advised of the possibility of such damages.
164 |
165 | 9. Accepting Warranty or Additional Liability. While redistributing
166 | the Work or Derivative Works thereof, You may choose to offer,
167 | and charge a fee for, acceptance of support, warranty, indemnity,
168 | or other liability obligations and/or rights consistent with this
169 | License. However, in accepting such obligations, You may act only
170 | on Your own behalf and on Your sole responsibility, not on behalf
171 | of any other Contributor, and only if You agree to indemnify,
172 | defend, and hold each Contributor harmless for any liability
173 | incurred by, or claims asserted against, such Contributor by reason
174 | of your accepting any such warranty or additional liability.
175 |
176 | END OF TERMS AND CONDITIONS
177 |
178 | APPENDIX: How to apply the Apache License to your work.
179 |
180 | To apply the Apache License to your work, attach the following
181 | boilerplate notice, with the fields enclosed by brackets "[]"
182 | replaced with your own identifying information. (Don't include
183 | the brackets!) The text should be enclosed in the appropriate
184 | comment syntax for the file format. We also recommend that a
185 | file or class name and description of purpose be included on the
186 | same "printed page" as the copyright notice for easier
187 | identification within third-party archives.
188 |
189 | Copyright [yyyy] [name of copyright owner]
190 |
191 | Licensed under the Apache License, Version 2.0 (the "License");
192 | you may not use this file except in compliance with the License.
193 | You may obtain a copy of the License at
194 |
195 | http://www.apache.org/licenses/LICENSE-2.0
196 |
197 | Unless required by applicable law or agreed to in writing, software
198 | distributed under the License is distributed on an "AS IS" BASIS,
199 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
200 | See the License for the specific language governing permissions and
201 | limitations under the License.
202 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # youtube-projects-code
2 |
3 | Channel [link](https://www.youtube.com/channel/UCD2Mv8gCmF2kX4yS1zG7UsQ)
4 |
5 | A single location to copy and paste code from my youtube videos.
6 |
--------------------------------------------------------------------------------
/bubblesort-visualizer-vue3/README.md:
--------------------------------------------------------------------------------
1 | # bubble sort visualizer with Vue 3
2 | This project was originally created using the vue cli. The only modifications required is in the file App.vue.
3 | This has all the required changes to create the visualizer.
4 |
--------------------------------------------------------------------------------
/bubblesort-visualizer-vue3/visualizer-method-2/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Bubble Sort Visualizer
8 |
28 |
29 |
30 |
31 |
32 |
Sorting Algorithm Visualizer
33 |
Bubble Sort
34 |
Shuffle
35 |
36 |
41 |
42 |
43 |
44 |
45 |
46 |
--------------------------------------------------------------------------------
/bubblesort-visualizer-vue3/visualizer-method-2/index.js:
--------------------------------------------------------------------------------
1 | const app = Vue.createApp({
2 | data() {
3 | return {
4 | array: [],
5 | size: 30,
6 | };
7 | },
8 | methods: {
9 | fillArray() {
10 | // populate array with random numbers between 5 and 750
11 | this.array = [];
12 | for (let i = 0; i < this.size; i++) {
13 | this.array.push(this.getRndInteger(5, 750));
14 | }
15 | },
16 | getRndInteger(min, max) {
17 | return Math.floor(Math.random() * (max - min + 1)) + min;
18 | },
19 | async bubbleSort() {
20 | let len = this.array.length;
21 | let checked;
22 | do {
23 | checked = false;
24 | for (let i = 0; i < len; i++) {
25 | if (this.array[i] > this.array[i + 1]) {
26 | let tmp = this.array[i];
27 | this.array[i] = this.array[i + 1];
28 | this.array[i + 1] = tmp;
29 | // sleep - to visualize / see the changes
30 | await this.sleep();
31 | checked = true;
32 | }
33 | }
34 | } while (checked);
35 | },
36 | sleep() {
37 | return new Promise((resolve) => setTimeout(resolve, 100));
38 | },
39 | },
40 | created() {
41 | this.fillArray();
42 | }
43 | });
44 |
45 | app.mount("#app");
46 |
--------------------------------------------------------------------------------
/bubblesort-visualizer-vue3/vue-cli-app-file-method-1/App.vue:
--------------------------------------------------------------------------------
1 |
2 | Sorting Algorithm Visualizer
3 | Bubble Sort
4 | Shuffle
5 |
6 |
11 |
12 |
13 |
63 |
64 |
86 |
--------------------------------------------------------------------------------
/docker/README.MD:
--------------------------------------------------------------------------------
1 | ## General Docker Commands
2 |
3 | Start services in a docker-compose.yml file
4 | ```
5 | docker-compose up -d
6 | ```
7 |
8 | Stop and remove services and it's volumes
9 | ```
10 | docker-compose down -v
11 | ```
--------------------------------------------------------------------------------
/docker/mariadb-adminer-docker/docker-compose.yml:
--------------------------------------------------------------------------------
1 | version: '3.8'
2 | services:
3 | # add the mariadb service
4 | mariadb:
5 | image: mariadb:latest
6 | container_name: mariadb
7 | restart: unless-stopped
8 | environment:
9 | MARIADB_ROOT_PASSWORD: password
10 |
11 | # Optional GUI for mariadb
12 | adminer:
13 | image: adminer
14 | restart: always
15 | ports:
16 | - 8080:8080
17 |
18 | # To use the CLI to access mariadb directly execute the following:
19 | # docker exec -it mariadb mysql --user=root --password=password
20 |
21 | # Login details for the mariadb GUI localhost:8080:
22 | # Server = name of the mariadb container. "mariadb" in my case.
23 | # Username = root
24 | # Password = password (same as the password mentioned above)
--------------------------------------------------------------------------------
/docker/mongo-docker/README.md:
--------------------------------------------------------------------------------
1 | ## How to use ssh / mongo shell
2 |
3 | Run the following commands.
4 | Access the mongo shell through the docker container:
5 |
6 | ```
7 | docker exec -it mongodb bash
8 | ```
9 |
10 | Run the mongo shell with privileges:
11 |
12 | ```
13 | mongo --username root --password password --authenticationDatabase admin
14 | ```
15 |
16 | Show the dbs:
17 |
18 | ```
19 | db
20 | ```
21 |
22 | Use the database - if none exists it will create one with the name:
23 |
24 | ```
25 | use "nameofdatabase"
26 | ```
27 |
28 | Insert an item into a new collection called myNewCollection - it will auto create:
29 |
30 | ```
31 | db.myNewCollection.insertOne( {x:1});
32 | ```
33 |
34 | Show all the collections:
35 |
36 | ```
37 | show collections
38 | ```
39 |
40 | Show all the times in the collection:
41 |
42 | ```
43 | db.myNewCollection.find()
44 | ```
--------------------------------------------------------------------------------
/docker/mongo-docker/docker-compose.yml:
--------------------------------------------------------------------------------
1 | version: '3.8'
2 | services:
3 | mongodb:
4 | image: mongo:latest # use the latest image.
5 | container_name: mongodb
6 | restart: unless-stopped
7 | environment: # set required env variables to access mongo
8 | MONGO_INITDB_ROOT_USERNAME: root
9 | MONGO_INITDB_ROOT_PASSWORD: password
10 | ports:
11 | - 27017:27017
12 | volumes: # optional to preserve database after container is deleted.
13 | - ./database-data:/data/db
14 |
--------------------------------------------------------------------------------
/docker/mongo-express-docker/docker-compose.yml:
--------------------------------------------------------------------------------
1 | version: '3.8'
2 | services:
3 | mongodb:
4 | image: mongo:latest # use the latest image.
5 | container_name: mongodb
6 | restart: unless-stopped
7 | environment: # set required env variables to access mongo
8 | MONGO_INITDB_ROOT_USERNAME: root
9 | MONGO_INITDB_ROOT_PASSWORD: password
10 | ports:
11 | - 27017:27017
12 | volumes: # optional to preserve database after container is deleted.
13 | - ./database-data:/data/db
14 |
15 | # Mongo Express Service
16 | mongo-express:
17 | image: mongo-express:latest # latest image
18 | container_name: mongo-express
19 | restart: unless-stopped
20 | ports:
21 | - 8081:8081
22 | environment:
23 | ME_CONFIG_MONGODB_ADMINUSERNAME: root
24 | ME_CONFIG_MONGODB_ADMINPASSWORD: password
25 | ME_CONFIG_MONGODB_SERVER: mongodb
26 | # use the name of the mongo container above for server env var.
27 | # In our case this is mongodb
--------------------------------------------------------------------------------
/docker/read-env-file-docker/docker-compose.yml:
--------------------------------------------------------------------------------
1 | # Sample service to change and read from env file instead
2 | version: '3.8'
3 | services:
4 | mongodb:
5 | image: mongo:latest # use the latest image.
6 | container_name: mongodb
7 | restart: unless-stopped
8 | env_file:
9 | - variables.env
10 | ports:
11 | - 27017:27017
12 |
13 | # docker exec env
14 | # This will list all of the env details in the container.
--------------------------------------------------------------------------------
/docker/read-env-file-docker/variables.env:
--------------------------------------------------------------------------------
1 | MONGO_INITDB_ROOT_USERNAME=root
2 | MONGO_INITDB_ROOT_PASSWORD=password
3 | test=1234
--------------------------------------------------------------------------------
/frontend-projects/README.md:
--------------------------------------------------------------------------------
1 | # Frontend web projects
2 | This folder is dedicated to frontend related projects, primarily vanilla javascript, html and css. See each project link for a quick preview and code. Migrated from my other repo to group youtube code together.
3 |
4 | ### Project List
5 | | # | Project |
6 | |---|---------|
7 | | 1 |[Stopwatch](./stopwatch) |
8 | | 2 |[Digital Clock](./digital-clock) |
9 | | 3 |[Counting Up Animation](./counting-up-animation) |
10 | | 4 |[Counter](./counter) |
11 | | 5 |[Countdown timer static](./countdown-timer-static) |
12 |
13 |
--------------------------------------------------------------------------------
/frontend-projects/countdown-timer-static/README.md:
--------------------------------------------------------------------------------
1 | # Countdown timer Project
2 | A countdown timer that uses dates for it's calculations. The deadline is decided by a date in the code.
3 |
4 | ### Preview
5 |
6 |
7 | ### Helpful links
8 | * [Unsplash background image](https://unsplash.com/photos/wM70mc7KCqM)
--------------------------------------------------------------------------------
/frontend-projects/countdown-timer-static/images/example1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jasoncheung94/youtube-projects-code/88d1e9abe542fe3a2f1e9f4dce9ab726862bc329/frontend-projects/countdown-timer-static/images/example1.jpg
--------------------------------------------------------------------------------
/frontend-projects/countdown-timer-static/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Countdown timer
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
Counting down
16 |
17 |
18 |
Time
19 | Day
20 |
21 |
22 |
Time
23 | hour
24 |
25 |
26 |
Time
27 | minute
28 |
29 |
30 |
Time
31 | Second
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
--------------------------------------------------------------------------------
/frontend-projects/countdown-timer-static/index.js:
--------------------------------------------------------------------------------
1 | const countdown = () => {
2 | // Specify the date and time we are counting down to.
3 | const countDate = new Date("Jan 1, 2035 00:00:00").getTime();
4 | const now = new Date().getTime();
5 | const remainingTime = countDate - now;
6 |
7 | const second = 1000;
8 | const minute = second * 60;
9 | const hour = minute * 60;
10 | const day = hour * 24;
11 |
12 | const textDay = Math.floor(remainingTime / day);
13 | const textHour = Math.floor((remainingTime % day) / hour);
14 | const textMinute = Math.floor((remainingTime % hour) / minute);
15 | const textSecond = Math.floor((remainingTime % minute) / second);
16 |
17 | document.querySelector(".day").innerText = textDay > 0 ? textDay : 0;
18 | document.querySelector(".hour").innerText = textHour > 0 ? textHour : 0;
19 | document.querySelector(".minute").innerText = textMinute > 0 ? textMinute : 0;
20 | document.querySelector(".second").innerText = textSecond > 0 ? textSecond : 0;
21 | };
22 |
23 | // should use 500 as setInterval won't always run on time.
24 | setInterval(countdown, 500);
25 |
--------------------------------------------------------------------------------
/frontend-projects/countdown-timer-static/style.css:
--------------------------------------------------------------------------------
1 | * {
2 | margin: 0;
3 | padding: 0;
4 | box-sizing: border-box;
5 | }
6 |
7 | body {
8 | font-family: "Lato", sans-serif;
9 | }
10 |
11 | h2 {
12 | font-size: 5rem;
13 | font-weight: bold;
14 | padding: 3rem;
15 | }
16 |
17 | .coming-soon {
18 | min-height: 100vh;
19 | display: flex;
20 | align-items: center;
21 | flex-direction: column;
22 | justify-content: center;
23 | background-image: url("./images/example1.jpg");
24 | background-size: 100%;
25 | }
26 |
27 | .countdown {
28 | display: flex;
29 | justify-content: space-around;
30 | text-align: center;
31 | margin-bottom: 40%;
32 | }
33 |
34 | .day,
35 | .hour,
36 | .minute,
37 | .second {
38 | font-size: 3rem;
39 | }
40 |
41 | .waiting {
42 | height: 50vh;
43 | }
44 |
--------------------------------------------------------------------------------
/frontend-projects/counter/README.md:
--------------------------------------------------------------------------------
1 | # Counter Project
2 | A simple implementation and minimal animation of a counter.
3 |
4 | ### Preview
5 |
6 |
7 | ### Helpful links
8 |
--------------------------------------------------------------------------------
/frontend-projects/counter/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 | Counter
10 |
11 |
12 |
13 |
14 |
0
15 |
16 | +
17 | -
18 |
19 |
20 |
21 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/frontend-projects/counter/index.js:
--------------------------------------------------------------------------------
1 | let incrementButton = document.getElementById("increment");
2 | let decrementButton = document.getElementById("decrement");
3 | let counter = document.getElementById("counter");
4 | let count = 0;
5 |
6 | incrementButton.addEventListener("click", function () {
7 | count++;
8 | counter.textContent = count;
9 | updateStyles(count);
10 | });
11 |
12 | decrementButton.addEventListener("click", () => {
13 | count--;
14 | counter.textContent = count;
15 | updateStyles(count);
16 | });
17 |
18 | function updateStyles(count) {
19 | if (count < 0) {
20 | counter.classList.add("negative");
21 | } else if (count > 0) {
22 | counter.classList.add("positive");
23 | } else {
24 | counter.className = "";
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/frontend-projects/counter/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-family: sans-serif;
3 | }
4 | #counter {
5 | font-size: 10rem;
6 | }
7 |
8 | .container {
9 | display: grid;
10 | width: 100%;
11 | height: 100vh;
12 | align-content: center;
13 | justify-items: center;
14 | }
15 |
16 | button {
17 | border: none;
18 | box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
19 | font-weight: bold;
20 | font-size: 2rem;
21 | border-radius: 50%;
22 | width: 5rem;
23 | height: 5rem;
24 | margin: 1rem;
25 | transition: background-color 250ms ease-in-out, transform 50ms ease-in-out;
26 | cursor: pointer;
27 | }
28 |
29 | button:hover {
30 | background-color: rgb(218, 218, 218);
31 | border: 4px solid rgb(0, 0, 0) !important;
32 | }
33 | button:active {
34 | transform: scale(0.9);
35 | }
36 |
37 | #increment {
38 | border: 4px solid #20bf6b;
39 | }
40 | #decrement {
41 | border: 4px solid red;
42 | }
43 |
44 | .negative {
45 | color: red;
46 | animation: pulse 500ms ease-in-out;
47 | }
48 |
49 | .positive {
50 | color: #20bf6b;
51 | animation: pulse 500ms ease-in-out;
52 | }
53 |
54 | @keyframes pulse {
55 | 0% {
56 | transform: scale(1);
57 | }
58 | 50% {
59 | transform: scale(1.2);
60 | }
61 | 100% {
62 | transform: scale(1);
63 | }
64 | }
65 |
--------------------------------------------------------------------------------
/frontend-projects/counting-up-animation/README.md:
--------------------------------------------------------------------------------
1 | # Counting up animation Project
2 | A simple implementation and minimal animation of counting up to a target number.
3 |
4 | ### Preview
5 |
6 |
7 | ### Helpful links
8 | * [font-awesome cdn](https://cdnjs.com/libraries/font-awesome)
9 | * https://fontawesome.com/v5.15/how-to-use/on-the-web/referencing-icons/basic-use
10 |
--------------------------------------------------------------------------------
/frontend-projects/counting-up-animation/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 | Coutning up animation
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
0
21 |
Subscribers
22 |
23 |
24 |
25 |
0
26 |
Connections
27 |
28 |
29 |
30 |
0
31 |
Page followers
32 |
33 |
34 |
35 |
0
36 |
Followers
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
--------------------------------------------------------------------------------
/frontend-projects/counting-up-animation/index.js:
--------------------------------------------------------------------------------
1 | const counters = document.querySelectorAll(".counter");
2 | const speed = 400; // speed of counting
3 |
4 | counters.forEach((counter) => {
5 | const updateCounter = () => {
6 | // + symbol converts a string to number.
7 | const target = +counter.getAttribute("data-target");
8 | const count = +counter.innerText;
9 |
10 | const increment = target / speed;
11 |
12 | if (count < target) {
13 | counter.innerText = Math.floor(count + increment);
14 | setTimeout(updateCounter, 1);
15 | } else {
16 | counter.innerText = target;
17 | }
18 | };
19 | updateCounter();
20 | });
21 |
--------------------------------------------------------------------------------
/frontend-projects/counting-up-animation/style.css:
--------------------------------------------------------------------------------
1 | .fa-youtube {
2 | color: #ff0000;
3 | }
4 | .fa-linkedin {
5 | color: #0077b5;
6 | }
7 | .fa-facebook {
8 | color: #4267b2;
9 | }
10 | .fa-twitter {
11 | color: #00acee;
12 | }
13 |
14 | body {
15 | font-family: "Roboto", sans-serif;
16 | font-size: 20px;
17 | }
18 |
19 | .counter-container{
20 | display: flex;
21 | height: 100vh;
22 | align-items: center;
23 | justify-content: center;
24 | }
25 |
26 | .counter-container > div{
27 | flex: 1;
28 | max-width: 250px;
29 | text-align: center;
30 | }
31 |
32 | .counter {font-weight: bold;}
--------------------------------------------------------------------------------
/frontend-projects/digital-clock/README.md:
--------------------------------------------------------------------------------
1 | # Counting up animation Project
2 | A simple implementation and minimal animation of counting up to a target number.
3 |
4 | ### Preview
5 |
6 |
7 | ### Helpful links
8 |
--------------------------------------------------------------------------------
/frontend-projects/digital-clock/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 | Digital Clock
10 |
11 |
12 |
13 |
17 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/frontend-projects/digital-clock/index.js:
--------------------------------------------------------------------------------
1 | function displayDateTime() {
2 | var date = new Date();
3 | var hours = date.getHours();
4 | var minutes = date.getMinutes();
5 | var seconds = date.getSeconds();
6 | var meridiemoffset = "AM";
7 |
8 | // handle mightight use case.
9 | if (hours == 0) {
10 | hours = 12;
11 | }
12 |
13 | if (hours > 12) {
14 | hours = hours - 12;
15 | meridiemoffset = "PM";
16 | }
17 |
18 | hours = hours < 10 ? "0" + hours : hours;
19 | minutes = minutes < 10 ? "0" + minutes : minutes;
20 | seconds = seconds < 10 ? "0" + seconds : seconds;
21 |
22 | // display the time
23 | var time = hours + ":" + minutes + ":" + seconds + " " + meridiemoffset;
24 | document.getElementById("digitalClock").innerText = time;
25 |
26 | // display the date
27 | let options = {
28 | weekday: "long",
29 | year: "numeric",
30 | month: "long",
31 | day: "numeric",
32 | };
33 | document.getElementById("date").innerHTML = date.toLocaleString(
34 | "en-GB",
35 | options
36 | );
37 | // timeout of 500ms for accurate time display.
38 | setTimeout(displayDateTime, 500);
39 | }
40 | displayDateTime();
41 |
42 | // optional to have an onload event to display the time.
43 | // window.onload = (event) => {
44 | // displayDateTime();
45 | // };
46 |
--------------------------------------------------------------------------------
/frontend-projects/digital-clock/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | background-color: rgb(0, 0, 0);
3 | }
4 |
5 | #digitalClock {
6 | color: #17d4fe;
7 | font-family: "Digital-7";
8 | font-size: 120px;
9 | letter-spacing: 7px;
10 | }
11 |
12 | #date {
13 | color: white;
14 | font-size: 50px;
15 | text-align: center;
16 | }
17 |
18 | .container {
19 | display: grid;
20 | justify-content: center;
21 | align-content: center;
22 | height: 100vh;
23 | }
24 |
--------------------------------------------------------------------------------
/frontend-projects/stopwatch/README.md:
--------------------------------------------------------------------------------
1 | # Stopwatch Project
2 | A stopwatch that records time in hours, minutes, seconds, milliseconds. This is implemented using dates instead of timer intervals for accuracy.
3 |
4 | ### Preview
5 |
6 |
7 | ### Helpful links
8 | * [Icons and CDN for awesome fonts](https://www.w3schools.com/icons/fontawesome_icons_intro.asp)
--------------------------------------------------------------------------------
/frontend-projects/stopwatch/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Stopwatch
8 |
9 |
13 |
14 |
15 |
16 |
17 |
Stopwatch
18 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
--------------------------------------------------------------------------------
/frontend-projects/stopwatch/stopwatch.js:
--------------------------------------------------------------------------------
1 | let elapsed = 0;
2 | var interval;
3 | let timerDisplay = document.getElementById("time");
4 |
5 | function start() {
6 | let startTime = Date.now() - elapsed;
7 | interval = setInterval(() => {
8 | elapsed = Date.now() - startTime;
9 | displayTime(elapsed);
10 | }, 10);
11 | displayButton("stop");
12 | }
13 |
14 | function pause() {
15 | clearInterval(interval);
16 | displayButton("start");
17 | }
18 |
19 | function reset() {
20 | clearInterval(interval);
21 | elapsed = 0;
22 | displayTime(0);
23 | displayButton("start");
24 | }
25 |
26 | function displayTime(time) {
27 | let milliseconds = Math.floor((time % 1000) / 10);
28 | let seconds = Math.floor(time / 1000) % 60;
29 | let minutes = Math.floor(time / 60000) % 60;
30 | let hours = Math.floor(time / 3600000) % 60;
31 |
32 | milliseconds = milliseconds < 10 ? "0" + milliseconds : milliseconds;
33 | seconds = seconds < 10 ? "0" + seconds : seconds;
34 | minutes = minutes < 10 ? "0" + minutes : minutes;
35 | hours = hours < 10 ? "0" + hours : hours;
36 |
37 | timerDisplay.innerHTML =
38 | hours + ":" + minutes + ":" + seconds + ":" + milliseconds;
39 | }
40 |
41 | function displayButton(buttonType) {
42 | let show = buttonType == "start" ? startButton : pauseButton;
43 | let hide = buttonType == "start" ? pauseButton : startButton;
44 | show.style.display = "inline-block";
45 | hide.style.display = "none";
46 | }
47 |
48 | // create event listeners
49 | let startButton = document.getElementById("start");
50 | let pauseButton = document.getElementById("pause");
51 | let resetButton = document.getElementById("reset");
52 |
53 | startButton.addEventListener("click", start);
54 | pauseButton.addEventListener("click", pause);
55 | resetButton.addEventListener("click", reset);
56 |
--------------------------------------------------------------------------------
/frontend-projects/stopwatch/style.css:
--------------------------------------------------------------------------------
1 | .circle {
2 | height: 450px;
3 | width: 450px;
4 | border: 5px solid;
5 | border-radius: 50%;
6 | display: flex;
7 | justify-content: center;
8 | align-items: center;
9 | padding: 2px 16px;
10 | }
11 |
12 | .time {
13 | font-weight: 900;
14 | font-size: 70px;
15 | font-family: "Lucida Console", "Courier New", monospace;
16 | }
17 |
18 | #pause {
19 | display: none;
20 | }
21 |
22 | .stopwatch {
23 | display: grid;
24 | justify-items: center;
25 | grid-row-gap: 20px;
26 | }
27 |
28 | h1 {
29 | font-size: 70px;
30 | font-family: monospace;
31 | font-weight: 200;
32 | }
33 |
34 | /* design the buttons */
35 | button {
36 | background-color: white;
37 | border: none;
38 | color: white;
39 | padding: 15px 32px;
40 | text-align: center;
41 | text-decoration: none;
42 | display: inline-block;
43 | font-size: 40px;
44 | }
45 | #start { background-color: green;}
46 | #pause {background-color: red;}
47 | #reset {color: black;}
48 |
--------------------------------------------------------------------------------
/mysql-go-docker/Dockerfile:
--------------------------------------------------------------------------------
1 | # Specify the base image for the go app.
2 | FROM golang:1.15
3 | # Specify that we now need to execute any commands in this directory.
4 | WORKDIR /go/src/github.com/go-mysql
5 | # Copy everything from this project into the filesystem of the container.
6 | COPY . .
7 | # Obtain the package needed to run redis commands. Alternatively use GO Modules.
8 | RUN go get -u github.com/go-sql-driver/mysql
9 | # Compile the binary exe for our app.
10 | RUN go build -o main .
11 | # Start the application.
12 | CMD ["./main"]
--------------------------------------------------------------------------------
/mysql-go-docker/docker-compose.yml:
--------------------------------------------------------------------------------
1 | version: '3.8'
2 |
3 | services:
4 | go:
5 | build: # Use the Dockerfile from the current directory to build container.
6 | context: .
7 | container_name: go
8 | ports:
9 | - "8080:8080"
10 | depends_on:
11 | - "db"
12 |
13 | db:
14 | image: mysql:latest # use latest version of mysql
15 | container_name: db # add a name for the container
16 | command: --default-authentication-plugin=mysql_native_password
17 | restart: unless-stopped
18 | environment: # add default values, see docs for more info.
19 | MYSQL_USER: user
20 | MYSQL_ROOT_PASSWORD: mypassword
21 | MYSQL_PASSWORD: mypassword
22 | MYSQL_DATABASE: testdb # create this database on startup
23 | volumes:
24 | - my-db:/var/lib/mysql
25 | ports:
26 | - '3306:3306'
27 |
28 | volumes: # add volume to persist data.
29 | my-db:
--------------------------------------------------------------------------------
/mysql-go-docker/main.go:
--------------------------------------------------------------------------------
1 | package main
2 |
3 | import (
4 | "database/sql"
5 | "fmt"
6 | "log"
7 | "time"
8 |
9 | _ "github.com/go-sql-driver/mysql"
10 | )
11 |
12 | // go get -u github.com/go-sql-driver/mysql if package is missing!
13 | // If you encounter problems like I did with a newer version of Go. Run the following:
14 | // GO111MODULE="off" go get github.com/go-sql-driver/mysql
15 | // Restart IDE
16 |
17 | func main() {
18 | // Connect to the database with the name of the database container and it's login details.
19 | fmt.Println("Connecting to db")
20 | conn, err := sql.Open("mysql", "root:mypassword@tcp(db:3306)/testdb")
21 | if err != nil {
22 | log.Fatal(err)
23 | }
24 | defer conn.Close()
25 |
26 | // MySQL server isn't fully active yet.
27 | // Block until connection is accepted. This is a docker problem with v3 & container doesn't start
28 | // up in time.
29 | for conn.Ping() != nil {
30 | fmt.Println("Attempting connection to db")
31 | time.Sleep(5 * time.Second)
32 | }
33 | fmt.Println("Connected")
34 |
35 | // Optional: Below is a quick demo.
36 | // drop table if it already exists
37 | fmt.Println("Dropping table")
38 | _, err = conn.Exec(`DROP TABLE IF EXISTS People;`)
39 | if err != nil {
40 | panic(err)
41 | }
42 |
43 | // create a new table
44 | fmt.Println("Creating table")
45 | _, err = conn.Exec(`
46 | CREATE TABLE People (
47 | ID int,
48 | LastName varchar(255),
49 | FirstName varchar(255),
50 | Address varchar(255),
51 | City varchar(255)
52 | );
53 | `)
54 | if err != nil {
55 | log.Fatal(err)
56 | }
57 |
58 | // Insert into the new table
59 | fmt.Println("Inserting person")
60 | _, err = conn.Exec("INSERT INTO People VALUES (1, 'test', 'test', 'test', 'test');")
61 | if err != nil {
62 | log.Fatal(err)
63 | }
64 |
65 | // Create struct to store data assuming non NULL values for testing purposes.
66 | var person struct {
67 | ID int
68 | LastName string
69 | FirstName string
70 | Address string
71 | City string
72 | }
73 |
74 | // Get all the users
75 | fmt.Println("Getting person")
76 | result, err := conn.Query("SELECT * FROM People;")
77 | if err != nil {
78 | log.Fatal(err)
79 | }
80 | defer result.Close()
81 |
82 | // Get the results and store them in person.
83 | if result.Next() {
84 | err = result.Scan(
85 | &person.ID,
86 | &person.LastName,
87 | &person.FirstName,
88 | &person.Address,
89 | &person.City,
90 | )
91 | if err != nil {
92 | log.Fatal(err)
93 | }
94 | fmt.Printf("%+v", person)
95 | }
96 |
97 | // For testing only - sleep to keep container alive.
98 | // time.Sleep(1 * time.Minute)
99 | }
100 |
--------------------------------------------------------------------------------
/mysql_docker/README.Md:
--------------------------------------------------------------------------------
1 | # mysql with docker compose
2 | To start run the command within the same directory as the docker-compose.yml file: `docker-compose up -d --build`
3 |
--------------------------------------------------------------------------------
/mysql_docker/docker-compose.yml:
--------------------------------------------------------------------------------
1 | version: '3.8'
2 |
3 | services:
4 | db:
5 | image: mysql:latest # use latest version of mysql
6 | container_name: db # add a name for the container
7 | command: --default-authentication-plugin=mysql_native_password
8 | restart: unless-stopped
9 | environment: # add default values, see docs for more info.
10 | MYSQL_USER: user
11 | MYSQL_ROOT_PASSWORD: mypassword
12 | MYSQL_PASSWORD: mypassword
13 | MYSQL_DATABASE: testdb # create this database on startup
14 | volumes:
15 | - my-db:/var/lib/mysql
16 | ports:
17 | - '3306:3306'
18 |
19 | volumes: # add persistent data even if container is removed.
20 | my-db:
--------------------------------------------------------------------------------
/phpmyadmin_docker/docker-compose.yml:
--------------------------------------------------------------------------------
1 | version: "3.8"
2 |
3 | services: # adds 2 services: mysql and phpmyadmin to connect with
4 | db:
5 | image: mysql:latest # use latest version of mysql
6 | container_name: db # add a name for the container
7 | command: --default-authentication-plugin=mysql_native_password
8 | restart: unless-stopped
9 | environment: # add default values, see docs for more info.
10 | MYSQL_USER: user
11 | MYSQL_ROOT_PASSWORD: mypassword
12 | MYSQL_PASSWORD: mypassword
13 | MYSQL_DATABASE: testdb # create this database on startup
14 | volumes:
15 | - my-db:/var/lib/mysql
16 | ports:
17 | - '3306:3306'
18 |
19 | phpmyadmin:
20 | container_name: phpmyadmin
21 | image: phpmyadmin/phpmyadmin:latest
22 | ports:
23 | - "8082:80"
24 | environment:
25 | MYSQL_ROOT_PASSWORD: mypassword #(Required) set the password for the root superuser account.
26 | PMA_HOST: db # define the address/hostname of the mysql server eg mysql container name.
27 | PMA_USER: root # this is the root user to login on startup
28 | PMA_PASSWORD: mypassword # use the root password to login on startup.
29 | # Create a new user on startup (optional)
30 | # MYSQL_USER: newuser
31 | # MYSQL_PASSWORD: mypassword
32 |
33 | volumes: # add persistent data even if container is removed.
34 | my-db:
--------------------------------------------------------------------------------
/postgres-go-docker/Dockerfile:
--------------------------------------------------------------------------------
1 | # Specify the base image for the go app.
2 | FROM golang:1.15
3 | # Specify that we now need to execute any commands in this directory.
4 | WORKDIR /go/src/github.com/postgres-go
5 | # Copy everything from this project into the filesystem of the container.
6 | COPY . .
7 | # Obtain the package needed to run code. Alternatively use GO Modules.
8 | RUN go get -u github.com/lib/pq
9 | # Compile the binary exe for our app.
10 | RUN go build -o main .
11 | # Start the application.
12 | CMD ["./main"]
--------------------------------------------------------------------------------
/postgres-go-docker/README.md:
--------------------------------------------------------------------------------
1 | ### Example commands
2 | Start the containers: `docker-compose up -d`
3 |
4 | Rebuild and start: `docker-compose up -d --build`
5 |
6 | Login: `docker exec -it postgres psql -U user`
7 |
8 | This command will be determined by the docker-compose.yml file if different env variables are used.
9 |
10 | Eg. `docker exec -it postgres psql -U user testdb` as this takes a database name.
11 |
12 | Show tables: `\dt`
13 |
14 | Show databases: `\l`
15 |
16 |
17 | ```
18 | CREATE TABLE COMPANY (ID INT PRIMARY KEY NOT NULL, NAME text);
19 | INSERT INTO company(id,name) values (1,'test');
20 | SELECT * from company;
21 | ```
22 |
--------------------------------------------------------------------------------
/postgres-go-docker/docker-compose.yml:
--------------------------------------------------------------------------------
1 | # Specify the version for docker-compose.yml
2 | version: "3.8"
3 |
4 | # add the serivces needed (postgres,go)
5 | services:
6 | postgres:
7 | container_name: postgres
8 | image: postgres:latest
9 | environment:
10 | POSTGRES_USER: user
11 | POSTGRES_PASSWORD: mypassword
12 | # Optional: Give a name to the database, otherwise
13 | # use the default value POSTGRES_USER as a database name (user in this case.)
14 | # POSTGRES_DB: testdb
15 | ports:
16 | - "5432:5432"
17 | volumes:
18 | - dbdata:/var/lib/postgresql/data
19 |
20 | go:
21 | container_name: go
22 | # build the Dockerfile, alternatively use an image.
23 | build:
24 | context: .
25 | depends_on:
26 | - "postgres"
27 |
28 | volumes:
29 | dbdata: # create the volume for persisting data.
30 |
--------------------------------------------------------------------------------
/postgres-go-docker/main.go:
--------------------------------------------------------------------------------
1 | package main
2 |
3 | import (
4 | "database/sql"
5 | "fmt"
6 | "time"
7 |
8 | _ "github.com/lib/pq"
9 | )
10 |
11 | // Get this package if it's missing.
12 | // go get -u github.com/lib/pq
13 | // If you encounter problems like I did with a newer version of Go. Run the following:
14 | // GO111MODULE="off" go get -u github.com/lib/pq
15 | // Restart IDE
16 |
17 | func main() {
18 | fmt.Println("connecting")
19 | // these details match the docker-compose.yml file.
20 | postgresInfo := fmt.Sprintf("host=%s port=%d user=%s password=%s dbname=%s sslmode=disable",
21 | "postgres", 5432, "user", "mypassword", "user")
22 | db, err := sql.Open("postgres", postgresInfo)
23 | if err != nil {
24 | panic(err)
25 | }
26 | defer db.Close()
27 |
28 | start := time.Now()
29 | for db.Ping() != nil {
30 | if start.After(start.Add(10 * time.Second)) {
31 | fmt.Println("failed to connect after 10 secs.")
32 | break
33 | }
34 | }
35 | fmt.Println("connected:", db.Ping() == nil)
36 | _, err = db.Exec(`DROP TABLE IF EXISTS COMPANY;`)
37 | if err != nil {
38 | panic(err)
39 | }
40 | _, err = db.Exec(`CREATE TABLE COMPANY (ID INT PRIMARY KEY NOT NULL, NAME text);`)
41 | if err != nil {
42 | panic(err)
43 | }
44 | fmt.Println("table company is created")
45 | }
46 |
--------------------------------------------------------------------------------
/postgres_docker/README.md:
--------------------------------------------------------------------------------
1 | ### Example commands
2 | Login: `docker exec -it postgres psql -U user`
3 |
4 | This command will be determined by the docker-compose.yml file if different env variables are used.
5 |
6 | Eg. `docker exec -it postgres psql -U user testdb` as this takes a database name.
7 |
8 | Show tables: `\dt`
9 |
10 | Show databases: `\l`
11 |
12 |
13 | ```
14 | CREATE TABLE COMPANY (ID INT PRIMARY KEY NOT NULL, NAME text);
15 | INSERT INTO company(id,name) values (1,'test');
16 | SELECT * from company;
17 | ```
18 |
--------------------------------------------------------------------------------
/postgres_docker/docker-compose.yml:
--------------------------------------------------------------------------------
1 | # Specify the version for docker-compose.yml
2 | version: "3.8"
3 |
4 | # add the serivces needed (postgres)
5 | services:
6 | postgres:
7 | container_name: postgres
8 | image: postgres:latest
9 | environment:
10 | POSTGRES_USER: user
11 | POSTGRES_PASSWORD: mypassword
12 | # Optional: Give a name to the database, otherwise
13 | # use the default value POSTGRES_USER as a database name (user in this case.)
14 | # POSTGRES_DB: testdb
15 | ports:
16 | - "5432:5432"
17 | volumes:
18 | - dbdata:/var/lib/postgresql/data
19 |
20 | volumes:
21 | dbdata: # create the volume for persisting data.
22 |
--------------------------------------------------------------------------------
/postgres_phppgadmin/README.md:
--------------------------------------------------------------------------------
1 | ### Example commands
2 | Start up the containers: `docker-compose up -d`
3 |
4 | Login to postgres: `docker exec -it postgres psql -U user`
5 |
6 | This command will be determined by the docker-compose.yml file if different env variables are used.
7 |
8 | Eg. `docker exec -it postgres psql -U user testdb` as this takes a database name.
9 |
10 | Show tables: `\dt`
11 |
12 | Show databases: `\l`
13 |
14 |
15 | ```
16 | CREATE TABLE COMPANY (ID INT PRIMARY KEY NOT NULL, NAME text);
17 | INSERT INTO company(id,name) values (1,'test');
18 | SELECT * from company;
19 | ```
20 |
21 | Go to `http://localhost:10080/` to view phppgadmin
22 |
23 |
--------------------------------------------------------------------------------
/postgres_phppgadmin/docker-compose.yml:
--------------------------------------------------------------------------------
1 | # Specify the version for docker-compose.yml
2 | version: "3.8"
3 |
4 | # add the serivces needed (postgres,phppgadmin)
5 | services:
6 | postgres:
7 | container_name: postgres
8 | image: postgres:latest
9 | environment:
10 | POSTGRES_USER: user
11 | POSTGRES_PASSWORD: mypassword
12 | # Optional: Give a name to the database, otherwise
13 | # use the default value POSTGRES_USER as a database name (user in this case.)
14 | # POSTGRES_DB: testdb
15 | ports:
16 | - "5432:5432"
17 | volumes:
18 | - dbdata:/var/lib/postgresql/data
19 |
20 | phppgadmin:
21 | container_name: phppgadmin
22 | image: neimheadh/phppgadmin:latest
23 | ports:
24 | - "8080:80" # web browsers block the port 100080. Use 8080 instead.
25 | environment:
26 | - POSTGRES_HOST=postgres
27 | - POSTGRES_PORT=5432
28 | - POSTGRES_USER=user
29 | - POSTGRES_PASS=mypassword
30 |
31 | volumes:
32 | dbdata: # create the volume for persisting data.
33 |
--------------------------------------------------------------------------------
/redis-go-docker/Dockerfile:
--------------------------------------------------------------------------------
1 | # Specify the base image for the go app.
2 | FROM golang:1.15
3 | # Specify that we now need to execute any commands in this directory.
4 | WORKDIR /go/src/github.com/redis_docker
5 | # Copy everything from this project into the filesystem of the container.
6 | COPY . .
7 | # Obtain the package needed to run redis commands. Alternatively use GO Modules.
8 | RUN go get github.com/go-redis/redis
9 | # Compile the binary exe for our app.
10 | RUN go build -o main .
11 | # Start the application.
12 | CMD ["./main"]
13 |
14 |
15 | # NOTE: if there is any changes to this project ie code change to main.go . You must rebuild the
16 | # image to update it with these new changes.
--------------------------------------------------------------------------------
/redis-go-docker/docker-compose.yml:
--------------------------------------------------------------------------------
1 | # 1. Specify the version for docker-compose.yml
2 | version: "3.8"
3 |
4 | # 2. Generate the serivces needed (redis)
5 | services:
6 | redis:
7 | container_name: "redis"
8 | image: redis:alpine
9 | # Specify the redis.conf file to use and add a password.
10 | command: redis-server /usr/local/etc/redis/redis.conf --requirepass mypassword
11 | ports:
12 | - "6379:6379"
13 | # map the volumes to that redis has the custom conf file from this project.
14 | volumes:
15 | - $PWD/redis.conf:/usr/local/etc/redis/redis.conf
16 |
17 | go:
18 | container_name: "redisapi"
19 | build:
20 | # build the image using the Dockerfile we have in this project. Can use an image instead.
21 | context: .
22 | ports:
23 | - "8080:8080"
--------------------------------------------------------------------------------
/redis-go-docker/main.go:
--------------------------------------------------------------------------------
1 | package main
2 |
3 | import (
4 | "context"
5 | "fmt"
6 | "time"
7 |
8 | "github.com/go-redis/redis"
9 | )
10 |
11 | // go get -u github.com/go-redis/redis
12 | // If you encounter problems like I did with a newer version of Go. Run the following:
13 | // GO111MODULE="off" go get -u github.com/go-redis/redis and restart the IDE.
14 | // Restart IDE
15 |
16 | func main() {
17 | fmt.Println("Hello everyone!")
18 |
19 | // Setup the connection to redis. "redis" is the name of the container which lets
20 | // docker handle the networking. "mypassword" is the password used in docker-compose.yml.
21 | client := redis.NewClient(&redis.Options{
22 | Addr: "redis:6379",
23 | Password: "mypassword",
24 | DB: 0,
25 | })
26 |
27 | // Set a key and value for testing.
28 | time.Sleep(5 * time.Second)
29 | err := client.Set(context.Background(), "key", "value", 0).Err()
30 | if err != nil {
31 | panic(err)
32 | }
33 | fmt.Println("key is set")
34 | // For testing purposes sleep for 10 mins to keep container alive. Should serve as a web app.
35 | time.Sleep(10 * time.Minute)
36 |
37 | }
38 |
--------------------------------------------------------------------------------
/redis-go-docker/redis.conf:
--------------------------------------------------------------------------------
1 | # Use the official redis.conf file supplied by redis.
2 | # As a test use a simple config for testing.
3 | maxmemory 41943040
--------------------------------------------------------------------------------
/vue3-hello-world-example/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Example Vue3
5 |
6 |
7 |
8 |
9 |
10 |
11 |
This is a Vue 3 example
12 |
13 | {{ message }}
14 | Change Text
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
40 |
--------------------------------------------------------------------------------
/vue3-hello-world-example/main.js:
--------------------------------------------------------------------------------
1 | const app = Vue.createApp({
2 | data(){
3 | return {
4 | message: "Welcome!"
5 | };
6 | },
7 | methods: {
8 | sayHello(){
9 | this.message = "Hello!"
10 | }
11 | }
12 | });
13 |
14 | app.mount("#app");
--------------------------------------------------------------------------------