├── 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 | 34 | 35 | 36 |
37 | 38 |
39 |
40 |
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 | 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 |
14 |
00:00:00
15 |
16 |
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 |
19 |
00:00:00:00
20 |
21 |
22 | 26 | 30 | 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 | 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"); --------------------------------------------------------------------------------