├── day-1 ├── .prettierrc ├── 00-js-vs-vue │ ├── js-version │ │ ├── app.js │ │ └── index.html │ └── vue-version │ │ ├── app.js │ │ └── index.html ├── 01-vue-template │ ├── app.js │ └── index.html ├── 02-events │ ├── app.css │ ├── app.js │ └── index.html ├── 03-methods-template-example │ ├── app.css │ ├── app.js │ └── index.html ├── 04-counter-app │ ├── app.css │ ├── app.js │ └── index.html ├── 05-life-cycle │ ├── app.js │ └── index.html ├── 06-dynamic-class-style │ ├── app.css │ ├── app.js │ └── index.html ├── 07-conditions │ ├── app.js │ └── index.html ├── 08-loops-example │ ├── app.css │ ├── app.js │ └── index.html ├── 08-loops │ ├── app.js │ └── index.html └── odevler │ ├── class-list-app │ ├── index.html │ ├── readme.txt │ └── style.css │ ├── comment-like-dislike-app │ ├── index.html │ ├── readme.txt │ └── style.css │ ├── cozum-1 │ ├── index.html │ └── style.css │ ├── cozum-2 │ ├── app.js │ ├── index.html │ └── style.css │ ├── cozum-3 │ ├── app.js │ ├── index.html │ └── style.css │ ├── css-class-app │ ├── app.js │ ├── index.html │ ├── readme.txt │ └── style.css │ ├── odev-1 │ ├── index.html │ └── style.css │ ├── odev-2 │ ├── app.js │ ├── index.html │ └── style.css │ └── odev-3 │ ├── app.js │ ├── index.html │ └── style.css ├── day-2 ├── .prettierrc ├── 00-component │ ├── app.js │ └── index.html ├── 01-component-bookmark-app │ ├── assets │ │ ├── app.js │ │ └── style.css │ └── index.html ├── 02-vue-cli │ ├── README.md │ ├── babel.config.js │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ └── index.html │ └── src │ │ ├── App.vue │ │ ├── assets │ │ ├── logo.png │ │ └── style.css │ │ ├── components │ │ └── appBookmarkItem.vue │ │ └── main.js ├── 03-vue-cli-like-dislike-app │ ├── README.md │ ├── babel.config.js │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ └── index.html │ └── src │ │ ├── App.vue │ │ ├── assets │ │ ├── logo.png │ │ └── style.css │ │ ├── components │ │ ├── appFooter.vue │ │ ├── appHeader.vue │ │ ├── commentSection │ │ │ ├── commentList.vue │ │ │ ├── commentListItem.vue │ │ │ └── index.vue │ │ ├── mostLikeSection │ │ │ └── index.vue │ │ └── statsSection │ │ │ └── index.vue │ │ └── main.js ├── 04-advanced-component-usage │ ├── README.md │ ├── babel.config.js │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ └── index.html │ └── src │ │ ├── App.vue │ │ ├── assets │ │ ├── app.css │ │ └── logo.png │ │ ├── components │ │ └── appModal.vue │ │ └── main.js ├── 05-dynamic-components │ ├── README.md │ ├── babel.config.js │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ └── index.html │ └── src │ │ ├── App.vue │ │ ├── assets │ │ └── logo.png │ │ ├── components │ │ ├── blueComp.vue │ │ ├── greenComp.vue │ │ └── redComp.vue │ │ └── main.js └── 06-axios-http-request │ ├── README.md │ ├── babel.config.js │ ├── data.json │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ └── index.html │ ├── src │ ├── App.vue │ ├── assets │ │ ├── logo.png │ │ └── style.css │ ├── components │ │ ├── appHeader.vue │ │ ├── appMovieSection.vue │ │ └── movieItem.vue │ └── main.js │ └── tema │ ├── README.md │ ├── favorites.html │ ├── index.html │ └── style.css └── day-3 ├── .prettierrc ├── 00-vue-router ├── README.md ├── babel.config.js ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ └── index.html └── src │ ├── App.vue │ ├── assets │ └── logo.png │ ├── components │ └── appHeader.vue │ ├── main.js │ ├── router.js │ └── views │ ├── About.vue │ ├── Contact.vue │ ├── Home.vue │ └── Invoices.vue ├── 01-vuex ├── README.md ├── babel.config.js ├── db.json ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ └── index.html └── src │ ├── App.vue │ ├── assets │ └── logo.png │ ├── components │ └── HelloWorld.vue │ ├── main.js │ └── store.js └── 02-vuex-modules ├── README.md ├── babel.config.js ├── db.json ├── package-lock.json ├── package.json ├── public ├── favicon.ico └── index.html └── src ├── App.vue ├── assets └── logo.png ├── components └── appHeader.vue ├── main.js ├── router.js ├── store ├── index.js └── modules │ ├── categories │ └── index.js │ └── products │ └── index.js └── views ├── Category ├── List │ └── index.vue └── New │ └── index.vue ├── Home └── index.vue └── Product ├── List └── index.vue └── New └── index.vue /day-1/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "printWidth": 150 3 | } 4 | -------------------------------------------------------------------------------- /day-1/00-js-vs-vue/js-version/app.js: -------------------------------------------------------------------------------- 1 | const todoList = document.querySelector("#todoList"); 2 | const todoInput = document.querySelector("#todoInput"); 3 | const addButton = document.querySelector("#addButton"); 4 | 5 | addButton.addEventListener("click", () => { 6 | const liElement = document.createElement("li"); 7 | liElement.textContent = todoInput.value; 8 | todoList.appendChild(liElement); 9 | todoInput.value = ""; 10 | }); 11 | -------------------------------------------------------------------------------- /day-1/00-js-vs-vue/js-version/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | JS Version 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /day-1/00-js-vs-vue/vue-version/app.js: -------------------------------------------------------------------------------- 1 | // const todoList = document.querySelector("#todoList"); 2 | // const todoInput = document.querySelector("#todoInput"); 3 | // const addButton = document.querySelector("#addButton"); 4 | 5 | // addButton.addEventListener("click", () => { 6 | // const liElement = document.createElement("li"); 7 | // liElement.textContent = todoInput.value; 8 | // todoList.appendChild(liElement); 9 | // todoInput.value = ""; 10 | // }); 11 | 12 | // vue3 13 | const app = Vue.createApp({ 14 | data() { 15 | return { 16 | todoList: [], 17 | todoValue: null, 18 | }; 19 | }, 20 | methods: { 21 | addTodo() { 22 | this.todoList.push(this.todoValue); 23 | this.todoValue = ""; 24 | }, 25 | }, 26 | }).mount("#app"); 27 | -------------------------------------------------------------------------------- /day-1/00-js-vs-vue/vue-version/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vue Version 8 | 9 | 10 | 11 |
12 | 13 | 14 | 17 |
18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /day-1/01-vue-template/app.js: -------------------------------------------------------------------------------- 1 | Vue.createApp({ 2 | data() { 3 | return { 4 | title: "Bu Vue Tarafından gelmiş bir Başlık!!!", 5 | description: "Bu Vue Tarafından gelmiş bir açıklama!!", 6 | erdemSen: "Bu custom bir mesaj..", 7 | htmlTemplate: "Bu benim kalın mesajım
Bu da italik", 8 | link: "https://www.youtube.com/kablosuzkedii", 9 | imageUrl: "https://i.ytimg.com/vi/sfEq69Iw-Wo/maxresdefault.jpg", 10 | imageAltText: "bilginc-akademi", 11 | }; 12 | }, 13 | }).mount("#app"); 14 | -------------------------------------------------------------------------------- /day-1/01-vue-template/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 14 | 15 | 16 | 17 |
18 |
19 |

{{ title }}

20 |

{{ description }}

21 |
22 |

{{ erdemSen }}

23 |
24 |
25 |
26 | Kablosuzkedi Youtube Kanalı! 27 | 28 |
29 |
30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /day-1/02-events/app.css: -------------------------------------------------------------------------------- 1 | .box { 2 | width: 700px; 3 | height: 400px; 4 | border: 2px solid #aaa; 5 | background-color: #ccc; 6 | } 7 | -------------------------------------------------------------------------------- /day-1/02-events/app.js: -------------------------------------------------------------------------------- 1 | Vue.createApp({ 2 | data() { 3 | return { 4 | title: "Event Dinlemek..", 5 | myNumber: 0, 6 | personalName: "Gokhan Kandemir", 7 | x: "-", 8 | y: "-", 9 | }; 10 | }, 11 | methods: { 12 | changeTitle() { 13 | this.title = "Bu Değiştirilmiş bir Başlık bilgisidir..."; 14 | this.counter(); 15 | }, 16 | counter() { 17 | this.myNumber++; 18 | }, 19 | getTitle() { 20 | return "##" + this.title + "##"; 21 | }, 22 | inputChanged(customValue, event) { 23 | // console.log("event :>> ", event); 24 | console.log("customValue :>> ", customValue); 25 | this.personalName = event.target.value; 26 | // console.log(event.target.value); 27 | }, 28 | updateCoords(event) { 29 | this.x = event.offsetX; 30 | this.y = event.offsetY; 31 | }, 32 | }, 33 | }).mount("#app"); 34 | -------------------------------------------------------------------------------- /day-1/02-events/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 14 | 15 | 16 | 17 | 18 |
19 |
20 |
21 |
22 |

{{ title }}

23 | 26 | 27 | 30 | {{ myNumber }} 31 |

{{ getTitle() }}

32 | 33 |
34 |
35 | 40 | 41 | 42 | 43 | {{ personalName }} 44 |
45 | 46 |
47 |
52 | {{x}} x {{y}} 53 | 54 | 56 |
57 |
58 |
59 |
60 | 61 | 62 | 63 | 64 | -------------------------------------------------------------------------------- /day-1/03-methods-template-example/app.css: -------------------------------------------------------------------------------- 1 | .box { 2 | width: 700px; 3 | height: 400px; 4 | border: 2px solid #aaa; 5 | background-color: #ccc; 6 | } 7 | -------------------------------------------------------------------------------- /day-1/03-methods-template-example/app.js: -------------------------------------------------------------------------------- 1 | Vue.createApp({ 2 | data() { 3 | return { 4 | petList: [ 5 | { gender: "cat", name: "Poğaça" }, 6 | { gender: "dog", name: "Larissa" }, 7 | { gender: "dog", name: "Pars" }, 8 | { gender: "fish", name: "Ciklet" }, 9 | ], 10 | aboutMe: { 11 | name: "Depte", 12 | lname: "Kandemir", 13 | birthDay: "14-02-2018", 14 | }, 15 | }; 16 | }, 17 | methods: { 18 | getPetList(gender) { 19 | return this.petList.filter((p) => p.gender === gender); 20 | }, 21 | getAboutMe() { 22 | return this.aboutMe; 23 | }, 24 | }, 25 | }).mount("#app"); 26 | -------------------------------------------------------------------------------- /day-1/03-methods-template-example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 14 | 15 | 16 | 17 | 18 |
19 |
20 |
21 |
22 |

{{ petList }}

23 |

{{ getAboutMe() }}

24 |
25 |

{{ getPetList('cat') }} 

26 |
27 |

{{ getPetList('dog') }} 

28 |
29 |

{{ getPetList('cat') }} 

30 |
31 |
32 |
33 |
34 | 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /day-1/04-counter-app/app.css: -------------------------------------------------------------------------------- 1 | .box { 2 | width: 700px; 3 | height: 400px; 4 | border: 2px solid #aaa; 5 | background-color: #ccc; 6 | } 7 | -------------------------------------------------------------------------------- /day-1/04-counter-app/app.js: -------------------------------------------------------------------------------- 1 | Vue.createApp({ 2 | data() { 3 | return { 4 | counter: 0, 5 | counter2: 0, 6 | counterResult: "", 7 | }; 8 | }, 9 | methods: { 10 | inc() { 11 | this.counter++; 12 | }, 13 | dec() { 14 | this.counter--; 15 | }, 16 | inc2() { 17 | this.counter2++; 18 | }, 19 | dec2() { 20 | this.counter2--; 21 | }, 22 | }, 23 | computed: { 24 | getCounter() { 25 | console.log("Counter1 Değeri Değişti..."); 26 | return `Counter 1'in Değeri : ${this.counter}`; 27 | }, 28 | getCounter2() { 29 | console.log("Counter2 Değeri Değişti..."); 30 | return `Counter 2'in Değeri : ${this.counter2}`; 31 | }, 32 | updatedCounterValue() { 33 | return this.counter + 2; 34 | }, 35 | // counterResult() { 36 | // return this.counter >= 10 ? "Counter1 10 değerinden büyüktür.." : "-"; 37 | // }, 38 | }, 39 | watch: { 40 | counter(newValue, oldValue) { 41 | console.log(`${oldValue} => ${newValue}`); 42 | if (newValue === 5) { 43 | alert("Değer Aşımı"); 44 | } 45 | }, 46 | getCounter(value) { 47 | console.log("Watcher", value); 48 | }, 49 | }, 50 | }).mount("#app"); 51 | -------------------------------------------------------------------------------- /day-1/04-counter-app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Counter App 8 | 14 | 15 | 16 | 17 | 18 |
19 |
20 |
21 |
22 |

Counter App

23 |

24 | {{ getCounter }} / 25 | {{ updatedCounterValue }}   26 |

27 |
{{ counterResult }}
28 | 29 | 30 |
31 |
32 |

Counter App

33 |

{{ getCounter2 }} 

34 | 35 | 36 |
37 |
38 |
39 |
40 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /day-1/05-life-cycle/app.js: -------------------------------------------------------------------------------- 1 | Vue.createApp({ 2 | data() { 3 | return { 4 | counter: 0, 5 | }; 6 | }, 7 | methods: {}, 8 | beforeCreate() { 9 | console.log("beforeCreate çalıştı..."); 10 | }, 11 | created() { 12 | console.log("created çalıştı..."); 13 | this.counter = 10; 14 | }, 15 | beforeMount() { 16 | console.log("beforeMount çalıştı..."); 17 | }, 18 | mounted() { 19 | console.log("mounted çalıştı..."); 20 | }, 21 | beforeUpdate() { 22 | console.log("beforeUpdate çalıştı..."); 23 | }, 24 | updated() { 25 | console.log("updated çalıştı..."); 26 | }, 27 | }).mount("#app"); 28 | -------------------------------------------------------------------------------- /day-1/05-life-cycle/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | LifeCycle 8 | 14 | 15 | 16 | 17 |
18 |
19 |
20 |
21 |

{{ counter }}

22 | 23 | 26 |
27 |
28 |
29 |
30 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /day-1/06-dynamic-class-style/app.css: -------------------------------------------------------------------------------- 1 | .box { 2 | width: 200px; 3 | height: 200px; 4 | background-color: transparent; 5 | display: flex; 6 | justify-content: center; 7 | align-items: center; 8 | } 9 | .red { 10 | background-color: crimson; 11 | } 12 | .blue { 13 | background-color: darkblue; 14 | } 15 | .purple { 16 | background-color: purple; 17 | color: #fff; 18 | } 19 | 20 | .border { 21 | border: 5px dashed #000 !important; 22 | } 23 | 24 | .border-radius { 25 | border-radius: 10px; 26 | } 27 | 28 | .biggerFont { 29 | font-size: 40px; 30 | } 31 | 32 | .invalid-border { 33 | border: 1px solid crimson !important; 34 | } 35 | -------------------------------------------------------------------------------- /day-1/06-dynamic-class-style/app.js: -------------------------------------------------------------------------------- 1 | Vue.createApp({ 2 | data() { 3 | return { 4 | activeClass: "", 5 | counter: 0, 6 | demoClass: { 7 | red: true, 8 | border: true, 9 | "border-radius": true, 10 | biggerFont: true, 11 | }, 12 | name: null, 13 | submitted: false, 14 | activeBoxStyle: { 15 | marginTop: "10px", 16 | backgroundColor: "blue", 17 | borderRadius: "10px", 18 | border: "2px solid yellow", 19 | }, 20 | }; 21 | }, 22 | methods: { 23 | onSubmit() { 24 | this.submitted = true; 25 | }, 26 | }, 27 | computed: { 28 | activeBoxClass() { 29 | return { 30 | // [this.activeClass]: true, 31 | red: this.counter >= 0 && this.counter <= 5, 32 | purple: this.counter > 5, 33 | border: this.counter >= 5 && this.counter <= 10, 34 | "border-radius": this.counter >= 7 && this.counter <= 12, 35 | biggerFont: this.counter >= 20, 36 | }; 37 | }, 38 | validationClasses() { 39 | return { 40 | "invalid-border": this.submitted && !this.name, 41 | }; 42 | }, 43 | }, 44 | }).mount("#app"); 45 | -------------------------------------------------------------------------------- /day-1/06-dynamic-class-style/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | LifeCycle 8 | 14 | 15 | 16 | 17 | 18 |
19 |
20 |
21 |
22 |

{{ counter }}

23 | 24 | 25 |
26 | 27 | 28 | 29 |
Ben bir Kutuyum!!
30 | 31 |
32 | Bu Style için kullandığım Box 33 |
34 | 35 |
Bu Style için kullandığım Box
36 |
37 |
38 |
39 | 40 | 41 |
42 |
43 |
44 |
45 |
46 | 47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /day-1/07-conditions/app.js: -------------------------------------------------------------------------------- 1 | const app = Vue.createApp({ 2 | data() { 3 | return { 4 | showBox: false, 5 | username: null, 6 | invalid: false, 7 | phone: 0, 8 | }; 9 | }, 10 | methods: { 11 | onSubmit() { 12 | if (!this.username) { 13 | this.invalid = true; 14 | } else { 15 | this.invalid = false; 16 | } 17 | }, 18 | }, 19 | watch: { 20 | username() { 21 | // this.submitted = false; 22 | }, 23 | }, 24 | }); 25 | app.mount("#app"); 26 | -------------------------------------------------------------------------------- /day-1/07-conditions/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Conditions 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 |
16 |

17 | 18 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae deserunt quasi iusto laudantium amet qui harum ab dolor non, magnam 19 | veritatis ratione unde ut. Officiis error nulla quas ad incidunt. 20 |

21 |

Bu ShowBox False olduğunda gözükecek bölüm...

22 | 23 |
24 |
25 | Lütfen Kullanıcı Adınızı Giriniz! 26 | 27 |
28 | 29 |
30 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /day-1/08-loops-example/app.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gkandemi/softtech-bootcamp-1/bf2b1784304b7d21c79902d9e1c9be4439cb311b/day-1/08-loops-example/app.css -------------------------------------------------------------------------------- /day-1/08-loops-example/app.js: -------------------------------------------------------------------------------- 1 | Vue.createApp({ 2 | data() { 3 | return { 4 | categoryList: null, 5 | courseName: null, 6 | conceptName: null, 7 | searchKey: "", 8 | conceptOptionList: [ 9 | { 10 | name: "Frontend", 11 | color: "bg-warning", 12 | }, 13 | { 14 | name: "Backend", 15 | color: "bg-success", 16 | }, 17 | { 18 | name: "DevOPS", 19 | color: "bg-dark", 20 | }, 21 | { 22 | name: "Cloud", 23 | color: "bg-info", 24 | }, 25 | ], 26 | }; 27 | }, 28 | methods: { 29 | addNewCategory(event) { 30 | this.categoryList.push(event.target.value); 31 | event.target.value = ""; 32 | }, 33 | onSubmit() { 34 | console.log(this.courseName, this.conceptName); 35 | this.categoryList.push({ 36 | title: this.courseName, 37 | id: new Date().getTime(), 38 | concept: { 39 | ...this.conceptOptionList.find((c) => c.name === this.conceptName), 40 | }, 41 | }); 42 | this.courseName = null; 43 | this.conceptName = null; 44 | }, 45 | deleteItem(itemID) { 46 | this.categoryList = this.categoryList.filter((c) => c.id !== itemID); 47 | }, 48 | }, 49 | created() { 50 | setTimeout(() => { 51 | this.categoryList = [ 52 | { 53 | title: "Vue.js", 54 | id: 1, 55 | concept: { 56 | name: "Frontend", 57 | color: "bg-warning", 58 | }, 59 | }, 60 | { 61 | title: "JavaScript", 62 | id: 2, 63 | concept: { 64 | name: "Frontend", 65 | color: "bg-warning", 66 | }, 67 | }, 68 | { 69 | title: "PHP", 70 | id: 3, 71 | concept: { 72 | name: "Backend", 73 | color: "bg-success", 74 | }, 75 | }, 76 | { 77 | title: ".Net", 78 | id: 4, 79 | concept: { 80 | name: "Backend", 81 | color: "bg-success", 82 | }, 83 | }, 84 | { 85 | title: "React", 86 | id: 5, 87 | concept: { 88 | name: "Frontend", 89 | color: "bg-warning", 90 | }, 91 | }, 92 | { 93 | title: "Angular", 94 | id: 6, 95 | concept: { 96 | name: "Frontend", 97 | color: "bg-warning", 98 | }, 99 | }, 100 | { 101 | title: "Svelte", 102 | id: 7, 103 | concept: { 104 | name: "Frontend", 105 | color: "bg-warning", 106 | }, 107 | }, 108 | { 109 | title: "Webpack", 110 | id: 8, 111 | concept: { 112 | name: "Frontend", 113 | color: "bg-warning", 114 | }, 115 | }, 116 | { 117 | title: "GO", 118 | id: 9, 119 | concept: { 120 | name: "Backend", 121 | color: "bg-success", 122 | }, 123 | }, 124 | { 125 | title: "Python", 126 | id: 10, 127 | concept: { 128 | name: "Backend", 129 | color: "bg-success", 130 | }, 131 | }, 132 | { 133 | title: "Docker", 134 | id: 11, 135 | concept: { 136 | name: "DevOPS", 137 | color: "bg-dark", 138 | }, 139 | }, 140 | { 141 | title: "AWS", 142 | id: 12, 143 | concept: { 144 | name: "Cloud", 145 | color: "bg-info", 146 | }, 147 | }, 148 | ]; 149 | }, 1000); 150 | }, 151 | computed: { 152 | categoryAvailable() { 153 | return this.categoryList !== null && this.categoryList.length > 0; 154 | }, 155 | filterItems() { 156 | return this.categoryList.filter((c) => c.title.toLowerCase().includes(this.searchKey.toLowerCase())); 157 | }, 158 | }, 159 | }).mount("#app"); 160 | -------------------------------------------------------------------------------- /day-1/08-loops-example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | LifeCycle 8 | 14 | 15 | 16 | 17 | 18 |
19 |
20 |
21 |
22 |

Eğitim Kategorileri

23 | 24 |
25 |
26 | 27 | 28 |
29 |
30 | 31 | 34 |
35 |
36 | 37 |
38 |
39 | 40 | 57 |
Buralar çok ıssız yeni bir ders ekleyiniz...
58 |
59 |
60 |
61 |
62 | 63 | 64 | 65 | 66 | -------------------------------------------------------------------------------- /day-1/08-loops/app.js: -------------------------------------------------------------------------------- 1 | Vue.createApp({ 2 | data() { 3 | return { 4 | petList: [], 5 | }; 6 | }, 7 | methods: { 8 | addNewPet(event) { 9 | this.petList.push(event.target.value); 10 | event.target.value = ""; 11 | }, 12 | }, 13 | }).mount("#app"); 14 | -------------------------------------------------------------------------------- /day-1/08-loops/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | LifeCycle 8 | 14 | 15 | 16 | 17 |
18 |
19 |
20 |
21 |

Evcil Evlatlarımız

22 |
23 | 29 |
30 |
    31 |
  • 32 |
    33 | #{{ index + 1 }} | 34 | {{ petItem }} 35 |
    36 | 37 |
    • 38 |
39 |
Buralar çok ıssız yeni bir evlat ekleyiniz...
40 |
41 |
42 |
43 |
44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /day-1/odevler/class-list-app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Class List App 8 | 9 | 10 | 11 |
Class List App
12 |
13 |
14 |
15 |
    16 |
  • 17 | 21 |
    • 22 |
  • 23 | 27 |
    • 28 |
  • 29 | 33 |
    • 34 |
  • 35 | 39 |
    • 40 |
  • 41 | 45 |
    • 46 |
  • 47 | 51 |
    • 52 |
53 | 54 | 55 |
56 |
57 |
58 | 59 | 60 | -------------------------------------------------------------------------------- /day-1/odevler/class-list-app/readme.txt: -------------------------------------------------------------------------------- 1 | ÖDEV 2 | Yukarıda bulunan checkbox elementlerine tıklanıldığında, checkbox'ın sahip olduğu Class bilgisini textarea elementine verecek Vue uygulamasını yazınız. 3 | When the above checkbox elements are clicked, write the Vue application that will give the Class information of the checkbox to the textarea element. 4 | 5 | İPUCU 6 | Background Color, Border, Color, Font Bold, Border Radius, Font Italic için birer CSS Class'ı oluşturarak, her bir checkbox için v-model ile kontrol yapabilirsiniz. 7 | By creating a CSS Class for Background Color, Border, Color, Font Bold, Border Radius, Font Italic, you can control each checkbox with a v-model. -------------------------------------------------------------------------------- /day-1/odevler/comment-like-dislike-app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Comment Like/Dislike App 8 | 9 | 10 | 11 |
Comment Like/Dislike App
12 |
13 |
14 |
15 |

16 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint deserunt, tempore accusamus iusto nobis dolore ratione itaque perferendis 17 | delectus? Nostrum corporis, quod voluptates quis consequuntur eveniet beatae dolor aperiam ad. 18 |

19 |
20 | 21 | 22 |
23 |
24 | 25 |
26 |

27 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint deserunt, tempore accusamus iusto nobis dolore ratione itaque perferendis 28 | delectus? Nostrum corporis, quod voluptates quis consequuntur eveniet beatae dolor aperiam ad. 29 |

30 |
31 | 32 | 33 |
34 |
35 | 36 |
37 |

38 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint deserunt, tempore accusamus iusto nobis dolore ratione itaque perferendis 39 | delectus? Nostrum corporis, quod voluptates quis consequuntur eveniet beatae dolor aperiam ad. 40 |

41 |
42 | 43 | 44 |
45 |
46 | 47 |
48 |

49 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint deserunt, tempore accusamus iusto nobis dolore ratione itaque perferendis 50 | delectus? Nostrum corporis, quod voluptates quis consequuntur eveniet beatae dolor aperiam ad. 51 |

52 |
53 | 54 | 55 |
56 |
57 |
58 |
59 | 60 | 61 | -------------------------------------------------------------------------------- /day-1/odevler/comment-like-dislike-app/readme.txt: -------------------------------------------------------------------------------- 1 | ÖDEV 2 | 1 - ) data üzerinde bulunan bir comments isimli bir Array üzerinden ".comment--item" elementini v-for ile döndürünüz. 3 | 1 - ) iterate the ".comment - item" element with v-for over an Array named comments on the data. 4 | 2 - ) Kullanıcı Beğendim / Beğenmedim butonuna tıkladığında, üzerinde yazan sayaçları arttırınız. Yani Beğendim (5) Beğenmedim (10) gibi. 5 | 2 - ) When the user clicks on the Like / Dislike button, increase the counters written on it. So I Like (5) Like I Don't Like (10). 6 | 7 | İPUCU: 8 | Beğeni sayılarını comments içerisinde tutabilirsiniz. 9 | You can keep the number of likes in the comments. 10 | 11 | NOT: 12 | Beğeni sayılarının sürekli artmasının bir önemi yoktur. 13 | It doesn't matter that the number of likes is constantly increasing. -------------------------------------------------------------------------------- /day-1/odevler/comment-like-dislike-app/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | font-family: Arial, Helvetica, sans-serif; 5 | -webkit-box-sizing: border-box; 6 | box-sizing: border-box; 7 | } 8 | 9 | .bg-success { 10 | background-color: #6dc454 !important; 11 | color: #fff; 12 | } 13 | 14 | .bg-danger { 15 | background-color: #c64b4b !important; 16 | color: #fff; 17 | } 18 | 19 | .bg-primary { 20 | background-color: #316bc2 !important; 21 | color: #fff; 22 | } 23 | 24 | .bg-dark { 25 | background-color: #333 !important; 26 | color: #fff; 27 | } 28 | 29 | .text-left { 30 | text-align: left; 31 | } 32 | 33 | .text-right { 34 | text-align: right; 35 | } 36 | 37 | .text-center { 38 | text-align: center; 39 | } 40 | 41 | .text-info { 42 | color: #05a0f4; 43 | } 44 | 45 | .text-success { 46 | color: #6dc454; 47 | } 48 | 49 | .text-danger { 50 | color: #c64b4b; 51 | } 52 | 53 | .text-primary { 54 | color: #316bc2; 55 | } 56 | 57 | .text-dark { 58 | color: #333; 59 | } 60 | 61 | .text-muted { 62 | color: #ccc; 63 | } 64 | 65 | .font-weight-bold { 66 | font-weight: bold; 67 | } 68 | 69 | .font-italic { 70 | font-style: italic; 71 | } 72 | 73 | .mt-20 { 74 | margin-top: 20px; 75 | } 76 | 77 | .mb-20 { 78 | margin-bottom: 20px; 79 | } 80 | 81 | .ml-20 { 82 | margin-left: 20px; 83 | } 84 | 85 | .mr-20 { 86 | margin-right: 20px; 87 | } 88 | 89 | .mt-10 { 90 | margin-top: 10px; 91 | } 92 | 93 | .mb-10 { 94 | margin-bottom: 10px; 95 | } 96 | 97 | .ml-10 { 98 | margin-left: 10px; 99 | } 100 | 101 | .mr-10 { 102 | margin-right: 10px; 103 | } 104 | 105 | .mt-5 { 106 | margin-top: 5px; 107 | } 108 | 109 | .mb-5 { 110 | margin-bottom: 5px; 111 | } 112 | 113 | .ml-5 { 114 | margin-left: 5px; 115 | } 116 | 117 | .mr-5 { 118 | margin-right: 5px; 119 | } 120 | 121 | .pt-10 { 122 | padding-top: 10px; 123 | } 124 | 125 | .pb-10 { 126 | padding-bottom: 10px; 127 | } 128 | 129 | .pl-10 { 130 | padding-left: 10px; 131 | } 132 | 133 | .pr-10 { 134 | padding-right: 10px; 135 | } 136 | 137 | .pt-5 { 138 | padding-top: 5px; 139 | } 140 | 141 | .pb-5 { 142 | padding-bottom: 5px; 143 | } 144 | 145 | .pl-5 { 146 | padding-left: 5px; 147 | } 148 | 149 | .pr-5 { 150 | padding-right: 5px; 151 | } 152 | 153 | .pt-20 { 154 | padding-top: 20px; 155 | } 156 | 157 | .pb-20 { 158 | padding-bottom: 20px; 159 | } 160 | 161 | .pl-20 { 162 | padding-left: 20px; 163 | } 164 | 165 | .pr-20 { 166 | padding-right: 20px; 167 | } 168 | 169 | .d-flex { 170 | display: -webkit-box; 171 | display: -ms-flexbox; 172 | display: flex; 173 | } 174 | 175 | .justify-content-start { 176 | -webkit-box-pack: start; 177 | -ms-flex-pack: start; 178 | justify-content: flex-start; 179 | } 180 | 181 | .justify-content-center { 182 | -webkit-box-pack: center; 183 | -ms-flex-pack: center; 184 | justify-content: center; 185 | } 186 | 187 | .justify-content-end { 188 | -webkit-box-pack: end; 189 | -ms-flex-pack: end; 190 | justify-content: flex-end; 191 | } 192 | 193 | .justify-content-between { 194 | -webkit-box-pack: justify; 195 | -ms-flex-pack: justify; 196 | justify-content: space-between; 197 | } 198 | 199 | .align-items-start { 200 | -webkit-box-align: start; 201 | -ms-flex-align: start; 202 | align-items: flex-start; 203 | } 204 | 205 | .align-items-center { 206 | -webkit-box-align: center; 207 | -ms-flex-align: center; 208 | align-items: center; 209 | } 210 | 211 | .align-items-end { 212 | -webkit-box-align: end; 213 | -ms-flex-align: end; 214 | align-items: flex-end; 215 | } 216 | 217 | .w-10 { 218 | width: 10% !important; 219 | max-width: 10% !important; 220 | min-width: 10% !important; 221 | } 222 | 223 | .w-20 { 224 | width: 20% !important; 225 | max-width: 20% !important; 226 | min-width: 20% !important; 227 | } 228 | 229 | .w-30 { 230 | width: 30% !important; 231 | max-width: 30% !important; 232 | min-width: 30% !important; 233 | } 234 | 235 | .w-40 { 236 | width: 40% !important; 237 | max-width: 40% !important; 238 | min-width: 40% !important; 239 | } 240 | 241 | .w-50 { 242 | width: 50% !important; 243 | max-width: 50% !important; 244 | min-width: 50% !important; 245 | } 246 | 247 | .w-60 { 248 | width: 60% !important; 249 | max-width: 60% !important; 250 | min-width: 60% !important; 251 | } 252 | 253 | .w-70 { 254 | width: 70% !important; 255 | max-width: 70% !important; 256 | min-width: 70% !important; 257 | } 258 | 259 | .w-80 { 260 | width: 80% !important; 261 | max-width: 80% !important; 262 | min-width: 80% !important; 263 | } 264 | 265 | .w-90 { 266 | width: 90% !important; 267 | max-width: 90% !important; 268 | min-width: 90% !important; 269 | } 270 | 271 | .w-100 { 272 | width: 100% !important; 273 | max-width: 100% !important; 274 | min-width: 100% !important; 275 | } 276 | 277 | .card { 278 | background-color: #efefef; 279 | min-width: 500px; 280 | padding: 10px; 281 | border-radius: 3px; 282 | border-bottom: 1px solid #ccc; 283 | } 284 | 285 | .card-light { 286 | background-color: #fffafa; 287 | border: 1px solid #eee; 288 | border-bottom: 1px solid #ccc; 289 | } 290 | 291 | button { 292 | padding: 10px; 293 | font-size: 15px; 294 | outline: none; 295 | border: none; 296 | border-radius: 5px; 297 | border-bottom: 1px solid #ccc; 298 | background-color: #dad0d0; 299 | cursor: pointer; 300 | } 301 | 302 | button:hover { 303 | background-color: #f0eded; 304 | } 305 | 306 | button:active { 307 | background-color: white; 308 | } 309 | 310 | button.btn-primary { 311 | background-color: #316bc2; 312 | color: #fff; 313 | } 314 | 315 | button.btn-primary:hover { 316 | background-color: #5386d3; 317 | color: #fff; 318 | } 319 | 320 | button.btn-primary:active { 321 | background-color: #7ba3de; 322 | color: #fff; 323 | } 324 | 325 | button.btn-warning { 326 | background-color: #f5e20c; 327 | color: #000; 328 | } 329 | 330 | button.btn-warning:hover { 331 | background-color: #f9ee6e; 332 | color: #000; 333 | } 334 | 335 | button.btn-warning:active { 336 | background-color: #fbf49f; 337 | color: #000; 338 | } 339 | 340 | button.btn-info { 341 | background-color: #05a0f4; 342 | color: #fff; 343 | } 344 | 345 | button.btn-info:hover { 346 | background-color: #31b4fb; 347 | color: #fff; 348 | } 349 | 350 | button.btn-info:active { 351 | background-color: #63c6fc; 352 | color: #fff; 353 | } 354 | 355 | button.btn-success { 356 | background-color: #6dc454; 357 | color: #fff; 358 | } 359 | 360 | button.btn-success:hover { 361 | background-color: #8dd17a; 362 | color: #fff; 363 | } 364 | 365 | button.btn-success:active { 366 | background-color: #aedea0; 367 | color: #fff; 368 | } 369 | 370 | button.btn-danger { 371 | background-color: #c64b4b; 372 | color: #fff; 373 | } 374 | 375 | button.btn-danger:hover { 376 | background-color: #d27272; 377 | color: #fff; 378 | } 379 | 380 | button.btn-danger:active { 381 | background-color: #df9898; 382 | color: #fff; 383 | } 384 | 385 | .btn-sm { 386 | padding: 7px; 387 | font-size: 12px; 388 | } 389 | 390 | .form-group { 391 | display: -webkit-box; 392 | display: -ms-flexbox; 393 | display: flex; 394 | -webkit-box-orient: vertical; 395 | -webkit-box-direction: normal; 396 | -ms-flex-direction: column; 397 | flex-direction: column; 398 | -webkit-box-pack: start; 399 | -ms-flex-pack: start; 400 | justify-content: start; 401 | margin-bottom: 10px; 402 | } 403 | 404 | p { 405 | font-size: 14px; 406 | } 407 | 408 | label { 409 | font-size: 15px; 410 | display: inline-block; 411 | margin-bottom: 5px; 412 | } 413 | 414 | select { 415 | outline: none; 416 | padding: 5px 10px; 417 | border: 1px solid #324354; 418 | } 419 | 420 | input { 421 | outline: none; 422 | padding: 5px 10px; 423 | border: 1px solid #324354; 424 | } 425 | 426 | textarea { 427 | outline: none; 428 | resize: none; 429 | padding: 5px 10px; 430 | border: 1px solid #324354; 431 | } 432 | 433 | header { 434 | height: 50px; 435 | margin-bottom: 10px; 436 | display: -webkit-box; 437 | display: -ms-flexbox; 438 | display: flex; 439 | -webkit-box-pack: center; 440 | -ms-flex-pack: center; 441 | justify-content: center; 442 | -webkit-box-align: center; 443 | -ms-flex-align: center; 444 | align-items: center; 445 | background-color: #324354; 446 | color: #fff; 447 | font-size: 20px; 448 | border-bottom: 2px solid #222b34; 449 | } 450 | 451 | .container { 452 | width: 100%; 453 | height: auto; 454 | padding: 10px; 455 | display: -webkit-box; 456 | display: -ms-flexbox; 457 | display: flex; 458 | -webkit-box-pack: center; 459 | -ms-flex-pack: center; 460 | justify-content: center; 461 | -webkit-box-align: start; 462 | -ms-flex-align: start; 463 | align-items: start; 464 | } 465 | 466 | ul.list { 467 | margin-top: 10px; 468 | list-style-type: none; 469 | } 470 | 471 | ul.list li { 472 | padding: 5px 10px; 473 | background-color: #efefef; 474 | margin-bottom: 5px; 475 | border: 1px solid #ccc; 476 | display: -webkit-box; 477 | display: -ms-flexbox; 478 | display: flex; 479 | -webkit-box-pack: justify; 480 | -ms-flex-pack: justify; 481 | justify-content: space-between; 482 | -webkit-box-align: center; 483 | -ms-flex-align: center; 484 | align-items: center; 485 | } 486 | 487 | .pokemon--wars--app--container .game--area { 488 | display: -webkit-box; 489 | display: -ms-flexbox; 490 | display: flex; 491 | -webkit-box-orient: vertical; 492 | -webkit-box-direction: normal; 493 | -ms-flex-direction: column; 494 | flex-direction: column; 495 | -webkit-box-pack: center; 496 | -ms-flex-pack: center; 497 | justify-content: center; 498 | -webkit-box-align: center; 499 | -ms-flex-align: center; 500 | align-items: center; 501 | width: 100%; 502 | padding: 10px; 503 | } 504 | 505 | .pokemon--wars--app--container .game--area h2 { 506 | margin-bottom: 20px; 507 | } 508 | 509 | .pokemon--wars--app--container .selection--container { 510 | display: -webkit-box; 511 | display: -ms-flexbox; 512 | display: flex; 513 | -webkit-box-orient: vertical; 514 | -webkit-box-direction: normal; 515 | -ms-flex-direction: column; 516 | flex-direction: column; 517 | -webkit-box-pack: center; 518 | -ms-flex-pack: center; 519 | justify-content: center; 520 | -webkit-box-align: center; 521 | -ms-flex-align: center; 522 | align-items: center; 523 | width: 100%; 524 | padding: 10px; 525 | margin-bottom: 20px; 526 | } 527 | 528 | .pokemon--wars--app--container .selection--container img { 529 | -webkit-transition: all 0.5s; 530 | transition: all 0.5s; 531 | margin-right: 30px; 532 | } 533 | 534 | .pokemon--wars--app--container .selection--container img:last-child { 535 | margin-right: none; 536 | } 537 | 538 | .pokemon--wars--app--container .selection--container img.pikachu.selected-pokemon { 539 | border-radius: 10px; 540 | background-color: #f8c953c8; 541 | -webkit-transition: all 0.5s; 542 | transition: all 0.5s; 543 | } 544 | 545 | .pokemon--wars--app--container .selection--container img.pikachu:hover { 546 | border-radius: 10px; 547 | background-color: #f8c953c8; 548 | -webkit-transition: all 0.5s; 549 | transition: all 0.5s; 550 | } 551 | 552 | .pokemon--wars--app--container .selection--container img.bulbasaur.selected-pokemon { 553 | border-radius: 10px; 554 | background-color: #6ddba8c8; 555 | } 556 | 557 | .pokemon--wars--app--container .selection--container img.bulbasaur:hover { 558 | border-radius: 10px; 559 | background-color: #6ddba8c8; 560 | } 561 | 562 | .pokemon--wars--app--container .selection--container img.charmander.selected-pokemon { 563 | border-radius: 10px; 564 | background-color: #f7973fc8; 565 | } 566 | 567 | .pokemon--wars--app--container .selection--container img.charmander:hover { 568 | border-radius: 10px; 569 | background-color: #f7973fc8; 570 | } 571 | 572 | .pokemon--wars--app--container .selection--container img.squirtle.selected-pokemon { 573 | border-radius: 10px; 574 | background-color: #78eeffc8; 575 | } 576 | 577 | .pokemon--wars--app--container .selection--container img.squirtle:hover { 578 | border-radius: 10px; 579 | background-color: #78eeffc8; 580 | } 581 | 582 | .pokemon--wars--app--container .fight--area { 583 | width: 750px; 584 | } 585 | 586 | .pokemon--wars--app--container .health--container { 587 | display: -webkit-box; 588 | display: -ms-flexbox; 589 | display: flex; 590 | -webkit-box-pack: justify; 591 | -ms-flex-pack: justify; 592 | justify-content: space-between; 593 | -webkit-box-align: end; 594 | -ms-flex-align: end; 595 | align-items: flex-end; 596 | } 597 | 598 | .pokemon--wars--app--container .name--health--bar { 599 | display: -webkit-box; 600 | display: -ms-flexbox; 601 | display: flex; 602 | -webkit-box-pack: start; 603 | -ms-flex-pack: start; 604 | justify-content: start; 605 | -webkit-box-align: center; 606 | -ms-flex-align: center; 607 | align-items: center; 608 | } 609 | 610 | .pokemon--wars--app--container .name--health--bar img { 611 | width: 70px; 612 | border-radius: 5px; 613 | } 614 | 615 | .pokemon--wars--app--container .name--health--bar img.pikachu { 616 | background-color: #f8c953c8; 617 | border: 2px solid #f8c953; 618 | } 619 | 620 | .pokemon--wars--app--container .name--health--bar img.bulbasaur { 621 | background-color: #6ddba8c8; 622 | border: 2px solid #6ddba8; 623 | } 624 | 625 | .pokemon--wars--app--container .name--health--bar img.charmander { 626 | background-color: #f7973fc8; 627 | border: 2px solid #f7973f; 628 | } 629 | 630 | .pokemon--wars--app--container .name--health--bar img.squirtle { 631 | background-color: #78eeffc8; 632 | border: 2px solid #78eeff; 633 | } 634 | 635 | .pokemon--wars--app--container .player--name { 636 | font-size: 18px; 637 | font-weight: bold; 638 | color: #324354; 639 | } 640 | 641 | .pokemon--wars--app--container .vs--container { 642 | font-size: 35px; 643 | color: #f7983f; 644 | font-weight: bold; 645 | font-style: italic; 646 | } 647 | 648 | .pokemon--wars--app--container progress { 649 | height: 50px; 650 | width: 280px; 651 | } 652 | 653 | .pokemon--wars--app--container progress[value] { 654 | -webkit-appearance: none; 655 | -moz-appearance: none; 656 | appearance: none; 657 | width: 250px; 658 | height: 35px; 659 | } 660 | 661 | .pokemon--wars--app--container progress.pikachu[value]::-webkit-progress-bar { 662 | background-color: #f7983f27; 663 | border: 2px solid #f7983f; 664 | } 665 | 666 | .pokemon--wars--app--container progress.pikachu[value]::-webkit-progress-value { 667 | background-color: #f7973fc8; 668 | } 669 | 670 | .pokemon--wars--app--container progress.bulbasaur[value]::-webkit-progress-bar { 671 | background-color: #6ddba827; 672 | border: 2px solid #6ddba8; 673 | } 674 | 675 | .pokemon--wars--app--container progress.bulbasaur[value]::-webkit-progress-value { 676 | background-color: #6ddba8c8; 677 | } 678 | 679 | .pokemon--wars--app--container progress.charmander[value]::-webkit-progress-bar { 680 | background-color: #f7973f27; 681 | border: 2px solid #f7973f; 682 | } 683 | 684 | .pokemon--wars--app--container progress.charmander[value]::-webkit-progress-value { 685 | background-color: #f7973fc8; 686 | } 687 | 688 | .pokemon--wars--app--container progress.squirtle[value]::-webkit-progress-bar { 689 | background-color: #78eeff27; 690 | border: 2px solid #78eeff; 691 | } 692 | 693 | .pokemon--wars--app--container progress.squirtle[value]::-webkit-progress-value { 694 | background-color: #78eeffc8; 695 | } 696 | 697 | .pokemon--wars--app--container .attack--button--container { 698 | margin-top: 50px; 699 | } 700 | 701 | .pokemon--wars--app--container .logger--container { 702 | width: 400px; 703 | margin: 0 auto; 704 | margin-top: 50px; 705 | } 706 | 707 | .pokemon--wars--app--container .logger--container img { 708 | width: 40px; 709 | } 710 | 711 | .pokemon--wars--app--container .logger--container li { 712 | display: -webkit-box; 713 | display: -ms-flexbox; 714 | display: flex; 715 | -webkit-box-pack: justify; 716 | -ms-flex-pack: justify; 717 | justify-content: space-between; 718 | -webkit-box-align: center; 719 | -ms-flex-align: center; 720 | align-items: center; 721 | border-radius: 5px; 722 | } 723 | 724 | .pokemon--wars--app--container .game--finished--container { 725 | margin-top: 100px; 726 | font-size: 50px; 727 | } 728 | 729 | .css--class--app .css--palette { 730 | list-style-type: none; 731 | display: -webkit-box; 732 | display: -ms-flexbox; 733 | display: flex; 734 | -webkit-box-pack: center; 735 | -ms-flex-pack: center; 736 | justify-content: center; 737 | -webkit-box-align: center; 738 | -ms-flex-align: center; 739 | align-items: center; 740 | } 741 | 742 | .css--class--app .css--palette li { 743 | width: 50px; 744 | height: 50px; 745 | background-color: #ccc; 746 | border-radius: 50%; 747 | margin-left: 5px; 748 | border: 1px solid #bbb; 749 | } 750 | 751 | .css--class--app .result-box { 752 | width: 100%; 753 | height: 100px; 754 | background-color: #18bf71; 755 | margin-top: 15px; 756 | border-radius: 5px; 757 | border-bottom: 1px solid #ccc; 758 | -webkit-transition: background-color 0.5s; 759 | transition: background-color 0.5s; 760 | } 761 | 762 | .bookmark--app--container { 763 | display: -ms-grid; 764 | display: grid; 765 | -ms-grid-columns: (1fr) [3]; 766 | grid-template-columns: repeat(3, 1fr); 767 | grid-gap: 10px; 768 | -webkit-box-align: center; 769 | -ms-flex-align: center; 770 | align-items: center; 771 | } 772 | 773 | .bookmark--app--container .bookmark-item { 774 | width: 400px; 775 | background-color: #efefef; 776 | border-bottom: 1px solid #ccc; 777 | border-radius: 5px; 778 | padding: 10px; 779 | } 780 | 781 | .bookmark--app--container .bookmark-item .header { 782 | display: -webkit-box; 783 | display: -ms-flexbox; 784 | display: flex; 785 | -webkit-box-pack: justify; 786 | -ms-flex-pack: justify; 787 | justify-content: space-between; 788 | -webkit-box-align: center; 789 | -ms-flex-align: center; 790 | align-items: center; 791 | } 792 | 793 | .course--planner-app--container .user--action--container { 794 | display: -webkit-box; 795 | display: -ms-flexbox; 796 | display: flex; 797 | -webkit-box-pack: justify; 798 | -ms-flex-pack: justify; 799 | justify-content: space-between; 800 | -webkit-box-align: center; 801 | -ms-flex-align: center; 802 | align-items: center; 803 | } 804 | 805 | .course--planner-app--container .user--action--container .form-group { 806 | width: 80%; 807 | margin-right: 5px; 808 | } 809 | 810 | .bet--coupon--app .competition-list { 811 | padding: 0; 812 | border-radius: 5px; 813 | border: 1px solid #efefef; 814 | border-bottom: 1px solid #ccc; 815 | } 816 | 817 | .bet--coupon--app .my-coupon { 818 | padding: 0; 819 | border-radius: 5px; 820 | border: 1px solid #efefef; 821 | border-bottom: 1px solid #ccc; 822 | min-width: 400px !important; 823 | } 824 | 825 | .bet--coupon--app .my-coupon .card--header { 826 | background-color: #05a0f4 !important; 827 | } 828 | 829 | .bet--coupon--app .card--header { 830 | background-color: #324354 !important; 831 | color: #fff; 832 | border-top-left-radius: 5px; 833 | border-top-right-radius: 5px; 834 | padding: 10px; 835 | } 836 | 837 | .bet--coupon--app .card--body { 838 | background-color: #fff !important; 839 | padding: 10px; 840 | } 841 | 842 | .bet--coupon--app .competition-item { 843 | margin-bottom: 5px; 844 | padding: 10px 0; 845 | border-bottom: 1px solid #efefef; 846 | display: -webkit-box; 847 | display: -ms-flexbox; 848 | display: flex; 849 | -webkit-box-pack: justify; 850 | -ms-flex-pack: justify; 851 | justify-content: space-between; 852 | -webkit-box-align: center; 853 | -ms-flex-align: center; 854 | align-items: center; 855 | } 856 | 857 | .bet--coupon--app .competition-item:last-child { 858 | border-bottom: none; 859 | } 860 | 861 | .bet--coupon--app .competition-item .info--container { 862 | display: -webkit-box; 863 | display: -ms-flexbox; 864 | display: flex; 865 | -webkit-box-pack: start; 866 | -ms-flex-pack: start; 867 | justify-content: start; 868 | -webkit-box-align: start; 869 | -ms-flex-align: start; 870 | align-items: start; 871 | -webkit-box-orient: vertical; 872 | -webkit-box-direction: normal; 873 | -ms-flex-direction: column; 874 | flex-direction: column; 875 | } 876 | 877 | .bet--coupon--app .competition-item .rates { 878 | width: 150px; 879 | text-align: right; 880 | display: -ms-grid; 881 | display: grid; 882 | -ms-grid-columns: (1fr) [3]; 883 | grid-template-columns: repeat(3, 1fr); 884 | } 885 | 886 | .bet--coupon--app .coupon-item { 887 | border-bottom: 1px solid #efefef; 888 | margin-bottom: 5px; 889 | padding: 10px 0; 890 | } 891 | 892 | .bet--coupon--app .coupon-item:last-child { 893 | border-bottom: none; 894 | } 895 | 896 | .bet--coupon--app .coupon--total--container { 897 | max-width: 300px; 898 | } 899 | 900 | .bet--coupon--app .coupon--total--container .my-coupon { 901 | min-width: 300px !important; 902 | } 903 | 904 | .bet--coupon--app .coupon--total--container .multiply--container { 905 | min-width: 300px !important; 906 | } 907 | 908 | .bet--coupon--app .coupon--total--container .multiply--container button:not(:last-child) { 909 | margin-right: 5px; 910 | margin-bottom: 5px; 911 | } 912 | 913 | .bet--coupon--app .multiply--buttons { 914 | -ms-flex-wrap: wrap; 915 | flex-wrap: wrap; 916 | } 917 | 918 | .contact--card--app { 919 | display: -ms-grid; 920 | display: grid; 921 | -ms-grid-columns: (1fr) [4]; 922 | grid-template-columns: repeat(4, 1fr); 923 | grid-gap: 20px; 924 | -webkit-box-align: center; 925 | -ms-flex-align: center; 926 | align-items: center; 927 | } 928 | 929 | .contact--card--app .contact-item { 930 | width: 180px; 931 | min-height: 282px; 932 | border-radius: 5px; 933 | background-color: #fff !important; 934 | } 935 | 936 | .contact--card--app .contact-item .invitation--header { 937 | width: 180px; 938 | height: 62px; 939 | background: url("https://static-exp1.licdn.com/sc/h/cpemy7gsm8bzfb5nnbbnswfdm"); 940 | background-size: cover; 941 | background-repeat: no-repeat; 942 | background-position: center; 943 | } 944 | 945 | .contact--card--app .contact-item .contact--info--container { 946 | padding: 10px; 947 | margin-top: 45px; 948 | } 949 | 950 | .contact--card--app .contact-item .contact--info--container p { 951 | font-size: 15px !important; 952 | } 953 | 954 | .contact--card--app .contact-item .contact--info--container a { 955 | font-size: 15px !important; 956 | } 957 | 958 | .contact--card--app .contact-item .action--button--container { 959 | margin-top: 10px; 960 | } 961 | 962 | .contact--card--app .contact-item .contact--image { 963 | border-radius: 50%; 964 | width: 100px; 965 | height: 100px; 966 | } 967 | 968 | .comment--like--dislike--app { 969 | width: 750px; 970 | } 971 | 972 | .chat--app--container .card { 973 | padding: 0; 974 | border-radius: 5px; 975 | border: 1px solid #efefef; 976 | border-bottom: 1px solid #ccc; 977 | max-width: 400px !important; 978 | } 979 | 980 | .chat--app--container .card .card--header { 981 | background-color: #316bc2 !important; 982 | color: #fff; 983 | border-top-left-radius: 5px; 984 | border-top-right-radius: 5px; 985 | padding: 10px; 986 | } 987 | 988 | .chat--app--container .card .card--body { 989 | background-color: #fff !important; 990 | padding: 10px; 991 | } 992 | 993 | .chat--app--container .card .card--body .active-user-item { 994 | margin-bottom: 20px; 995 | } 996 | 997 | .chat--app--container .card .card--body .active-user-item:last-child { 998 | margin-bottom: 0; 999 | } 1000 | 1001 | .chat--app--container .card .card--body .active-user-item .badge { 1002 | background-color: #efefef; 1003 | color: #333; 1004 | text-transform: uppercase; 1005 | padding: 10px; 1006 | width: 40px; 1007 | height: 40px; 1008 | border-radius: 50%; 1009 | } 1010 | 1011 | .chat--app--container .card .messages { 1012 | list-style-type: none; 1013 | display: -webkit-box; 1014 | display: -ms-flexbox; 1015 | display: flex; 1016 | -webkit-box-pack: start; 1017 | -ms-flex-pack: start; 1018 | justify-content: flex-start; 1019 | -webkit-box-align: start; 1020 | -ms-flex-align: start; 1021 | align-items: flex-start; 1022 | -webkit-box-orient: vertical; 1023 | -webkit-box-direction: normal; 1024 | -ms-flex-direction: column; 1025 | flex-direction: column; 1026 | padding: 10px; 1027 | height: calc(100vh - 200px); 1028 | overflow-y: scroll; 1029 | } 1030 | 1031 | .chat--app--container .card .messages li { 1032 | max-width: 300px; 1033 | padding: 5px 10px; 1034 | margin-bottom: 15px; 1035 | border-bottom: 1px solid #ccc; 1036 | border-radius: 10px; 1037 | background-color: #fffafa; 1038 | display: -webkit-box; 1039 | display: -ms-flexbox; 1040 | display: flex; 1041 | -webkit-box-pack: start; 1042 | -ms-flex-pack: start; 1043 | justify-content: start; 1044 | -webkit-box-orient: vertical; 1045 | -webkit-box-direction: normal; 1046 | -ms-flex-direction: column; 1047 | flex-direction: column; 1048 | -webkit-box-align: center; 1049 | -ms-flex-align: center; 1050 | align-items: center; 1051 | } 1052 | 1053 | .chat--app--container .card .messages li small { 1054 | margin-top: 10px; 1055 | -ms-flex-item-align: end; 1056 | align-self: flex-end; 1057 | font-size: 12px; 1058 | color: #ccc; 1059 | font-style: italic; 1060 | } 1061 | 1062 | .chat--app--container .card .messages li.current-user { 1063 | -ms-flex-item-align: end; 1064 | align-self: flex-end; 1065 | background-color: #05a0f4; 1066 | color: #fff; 1067 | } 1068 | 1069 | .chat--app--container .card .text-container { 1070 | margin-top: 30px; 1071 | } 1072 | 1073 | .chat--app--container .card .text-container input { 1074 | border: none; 1075 | padding: 10px; 1076 | height: 37px; 1077 | width: calc(500px - 70px); 1078 | border-bottom-left-radius: 5px; 1079 | } 1080 | 1081 | .chat--app--container .card .text-container button { 1082 | border-radius: 0 !important; 1083 | margin-bottom: 0; 1084 | border: none; 1085 | border-bottom-right-radius: 5px !important; 1086 | } 1087 | 1088 | .class--list--app .class-list { 1089 | list-style-type: none !important; 1090 | display: -ms-grid; 1091 | display: grid; 1092 | -ms-grid-columns: (1fr) [3]; 1093 | grid-template-columns: repeat(3, 1fr); 1094 | } 1095 | 1096 | .class--list--app .class-list li { 1097 | margin-bottom: 5px; 1098 | display: -webkit-box; 1099 | display: -ms-flexbox; 1100 | display: flex; 1101 | -webkit-box-pack: start; 1102 | -ms-flex-pack: start; 1103 | justify-content: start; 1104 | -webkit-box-align: center; 1105 | -ms-flex-align: center; 1106 | align-items: center; 1107 | } 1108 | 1109 | .class--list--app textarea { 1110 | width: 100%; 1111 | margin-top: 20px; 1112 | } 1113 | 1114 | .rate--calculator--app .rate-list { 1115 | list-style-type: none !important; 1116 | display: -ms-grid; 1117 | display: grid; 1118 | -ms-grid-columns: (1fr) [6]; 1119 | grid-template-columns: repeat(6, 1fr); 1120 | } 1121 | 1122 | .rate--calculator--app .rate-list li { 1123 | margin-bottom: 5px; 1124 | display: -webkit-box; 1125 | display: -ms-flexbox; 1126 | display: flex; 1127 | -webkit-box-pack: start; 1128 | -ms-flex-pack: start; 1129 | justify-content: start; 1130 | -webkit-box-align: center; 1131 | -ms-flex-align: center; 1132 | align-items: center; 1133 | } 1134 | 1135 | .rate--calculator--app input#money { 1136 | margin-top: 15px; 1137 | } 1138 | 1139 | .rate--calculator--app .rates-container { 1140 | margin-top: 20px; 1141 | list-style-type: none; 1142 | display: -ms-grid; 1143 | display: grid; 1144 | -ms-grid-columns: (1fr) [3]; 1145 | grid-template-columns: repeat(3, 1fr); 1146 | } 1147 | 1148 | .rate--calculator--app .rates-container li { 1149 | display: -webkit-box; 1150 | display: -ms-flexbox; 1151 | display: flex; 1152 | -webkit-box-pack: start; 1153 | -ms-flex-pack: start; 1154 | justify-content: start; 1155 | -webkit-box-align: center; 1156 | -ms-flex-align: center; 1157 | align-items: center; 1158 | margin-bottom: 5px; 1159 | } 1160 | 1161 | .rate--calculator--app .rates-container li:last-child { 1162 | margin-bottom: 0; 1163 | } 1164 | 1165 | .rate--calculator--app .rates-container li strong { 1166 | margin-right: 5px; 1167 | } 1168 | /*# sourceMappingURL=style.css.map */ 1169 | -------------------------------------------------------------------------------- /day-1/odevler/cozum-1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Ödev 1 | Template üzerine Veri Yazdırmak 8 | 9 | 10 | 11 | 12 |
Ödev 1 | Template Üzerine Veri Yazdırmak
13 | 14 |
15 |
16 | 17 |

VueJS Muazzam bir Framework - {{ name }} ({{ age }})

18 | 19 | 20 |

{{ age * 5 }}

21 | 22 | 23 | 24 |

{{ randomNumber() }}

25 | 26 | 27 | 28 | 29 | 30 |
31 | 32 | 37 |
38 |
39 |
40 | 41 | 72 | 73 | 74 | -------------------------------------------------------------------------------- /day-1/odevler/cozum-2/app.js: -------------------------------------------------------------------------------- 1 | const app = Vue.createApp({ 2 | data() { 3 | return { 4 | value: "", 5 | value2: "", 6 | }; 7 | }, 8 | methods: { 9 | showMeAlert() { 10 | alert("Bu bir alert.."); 11 | }, 12 | keyDownEvent(e) { 13 | console.log("Event", e); 14 | this.value = e.target.value; 15 | }, 16 | keyDownEvent2(e) { 17 | console.log("Event", e); 18 | this.value2 = e.target.value; 19 | }, 20 | }, 21 | }); 22 | app.mount("#exercise"); 23 | -------------------------------------------------------------------------------- /day-1/odevler/cozum-2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Ödev 2 | Event 8 | 9 | 10 | 11 | 12 |
Ödev 2 | Events
13 |
14 |
15 | 16 |
17 | 18 |
19 | 20 | 21 |
22 | 23 |

{{ value }}

24 |
25 | 26 | 28 | 29 |
30 | 31 |

{{ value2 }}

32 |
33 |
34 |
35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /day-1/odevler/cozum-3/app.js: -------------------------------------------------------------------------------- 1 | const app = Vue.createApp({ 2 | data() { 3 | return { 4 | value: 0, 5 | result2: null, 6 | }; 7 | }, 8 | computed: { 9 | result() { 10 | return this.value === 33 ? "Tamamlandı" : "Henüz tamamlanmadı.."; 11 | }, 12 | }, 13 | watch: { 14 | value(v) { 15 | if (v === 33) { 16 | this.result2 = "Tamamlandı"; 17 | } else { 18 | this.result2 = "Henüz tamamlanmadı"; 19 | } 20 | }, 21 | result() { 22 | setTimeout(() => { 23 | this.value = 0; 24 | }, 2000); 25 | }, 26 | }, 27 | }); 28 | app.mount("#exercise"); 29 | 30 | // Vue 2 31 | // new Vue({ 32 | // el: "#exercise", 33 | // data: { 34 | // value: 0, 35 | // }, 36 | // }); 37 | 38 | // Vue 3 39 | // const app = Vue.createApp({ 40 | // data() { 41 | // return {}; 42 | // }, 43 | // }) 44 | // app.mount("#exercise"); 45 | -------------------------------------------------------------------------------- /day-1/odevler/cozum-3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Reactivity 8 | 9 | 10 | 11 | 12 |
Ödev 3 | Reactivity
13 |
14 |
15 |
16 | 17 | 18 |
19 |

Şuanki Değer: {{ value }}

20 | 21 | 22 |

{{ result }}

23 |

{{ result2 }}

24 |
25 | 26 | 27 |
28 | 29 |

{{ value }}

30 |
31 |
32 |
33 |
34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /day-1/odevler/css-class-app/app.js: -------------------------------------------------------------------------------- 1 | Vue.createApp({ 2 | data() { 3 | return { 4 | activeColor: "", 5 | color_palette: [ 6 | { 7 | id: "red", 8 | css_class: "red-box", 9 | }, 10 | { 11 | id: "green", 12 | css_class: "green-box", 13 | }, 14 | { 15 | id: "blue", 16 | css_class: "blue-box", 17 | }, 18 | ], 19 | }; 20 | }, 21 | }).mount("#app"); 22 | -------------------------------------------------------------------------------- /day-1/odevler/css-class-app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CSS Class App 8 | 9 | 10 | 11 | 22 | 23 | 24 |
CSS Class App
25 |
26 |
27 | 30 |
31 |
32 |
33 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /day-1/odevler/css-class-app/readme.txt: -------------------------------------------------------------------------------- 1 | ÖDEV: 2 | Yukarıda bulunan renk paletlerine tıklanıldığında .result-box elementinin rengini tıklanılan palete göre değiştirecek Vue uygulamasını yazınız. 3 | When clicking on the color palettes above, write the Vue application that will change the color of the .result-box element according to the clicked palette. 4 | 5 | İPUCU: 6 | data içerisinde yer alan color_palette isimli Array türündeki bir property üzerinden, .css--palette elementinin içinde bulunan li elementlerini v-for ile döndürün. 7 |
  • elementine click eventi yardımıyla .result-box isimli elementin alacağı rengi class binding ile yapabilirsiniz. 8 | "red-box", "green-box", "blue-box" isimli css class'larını tanımlamanız gerekmektedir. 9 | 10 | iterate the li elements in the .css - palette element with v-for over a property of type Array named color_palette in the data. 11 | With the help of the click event on the
  • element, you can make the color of the element named .result-box with the class binding. 12 | You should define css classes named "red-box", "green-box", "blue-box" 13 | 14 | Sample Data: 15 | color_palette = [ 16 | { 17 | id: "red", 18 | css_class: "red-box", 19 | }, 20 | { 21 | id: "green", 22 | css_class: "green-box", 23 | }, 24 | { 25 | id: "blue", 26 | css_class: "blue-box", 27 | } 28 | ]; -------------------------------------------------------------------------------- /day-1/odevler/odev-1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Ödev 1 | Template üzerine Veri Yazdırmak 8 | 9 | 10 | 11 | 12 |
    Ödev 1 | Template Üzerine Veri Yazdırmak
    13 | 14 |
    15 |
    16 | 17 |

    VueJS Muazzam bir Framework - NAME (AGE)

    18 | 19 |

    20 | 21 | 22 |

    23 | 24 | 25 | 26 | 27 |
    28 | 29 |
    30 |
    31 |
    32 | 33 | 34 | -------------------------------------------------------------------------------- /day-1/odevler/odev-1/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | font-family: Arial, Helvetica, sans-serif; 5 | -webkit-box-sizing: border-box; 6 | box-sizing: border-box; 7 | } 8 | 9 | .bg-success { 10 | background-color: #6dc454 !important; 11 | color: #fff; 12 | } 13 | 14 | .bg-danger { 15 | background-color: #c64b4b !important; 16 | color: #fff; 17 | } 18 | 19 | .bg-primary { 20 | background-color: #316bc2 !important; 21 | color: #fff; 22 | } 23 | 24 | .bg-dark { 25 | background-color: #333 !important; 26 | color: #fff; 27 | } 28 | 29 | .text-left { 30 | text-align: left; 31 | } 32 | 33 | .text-right { 34 | text-align: right; 35 | } 36 | 37 | .text-center { 38 | text-align: center; 39 | } 40 | 41 | .text-info { 42 | color: #05a0f4; 43 | } 44 | 45 | .text-success { 46 | color: #6dc454; 47 | } 48 | 49 | .text-danger { 50 | color: #c64b4b; 51 | } 52 | 53 | .text-primary { 54 | color: #316bc2; 55 | } 56 | 57 | .text-dark { 58 | color: #333; 59 | } 60 | 61 | .text-muted { 62 | color: #ccc; 63 | } 64 | 65 | .font-weight-bold { 66 | font-weight: bold; 67 | } 68 | 69 | .font-italic { 70 | font-style: italic; 71 | } 72 | 73 | .mt-20 { 74 | margin-top: 20px; 75 | } 76 | 77 | .mb-20 { 78 | margin-bottom: 20px; 79 | } 80 | 81 | .ml-20 { 82 | margin-left: 20px; 83 | } 84 | 85 | .mr-20 { 86 | margin-right: 20px; 87 | } 88 | 89 | .mt-10 { 90 | margin-top: 10px; 91 | } 92 | 93 | .mb-10 { 94 | margin-bottom: 10px; 95 | } 96 | 97 | .ml-10 { 98 | margin-left: 10px; 99 | } 100 | 101 | .mr-10 { 102 | margin-right: 10px; 103 | } 104 | 105 | .mt-5 { 106 | margin-top: 5px; 107 | } 108 | 109 | .mb-5 { 110 | margin-bottom: 5px; 111 | } 112 | 113 | .ml-5 { 114 | margin-left: 5px; 115 | } 116 | 117 | .mr-5 { 118 | margin-right: 5px; 119 | } 120 | 121 | .pt-10 { 122 | padding-top: 10px; 123 | } 124 | 125 | .pb-10 { 126 | padding-bottom: 10px; 127 | } 128 | 129 | .pl-10 { 130 | padding-left: 10px; 131 | } 132 | 133 | .pr-10 { 134 | padding-right: 10px; 135 | } 136 | 137 | .pt-5 { 138 | padding-top: 5px; 139 | } 140 | 141 | .pb-5 { 142 | padding-bottom: 5px; 143 | } 144 | 145 | .pl-5 { 146 | padding-left: 5px; 147 | } 148 | 149 | .pr-5 { 150 | padding-right: 5px; 151 | } 152 | 153 | .pt-20 { 154 | padding-top: 20px; 155 | } 156 | 157 | .pb-20 { 158 | padding-bottom: 20px; 159 | } 160 | 161 | .pl-20 { 162 | padding-left: 20px; 163 | } 164 | 165 | .pr-20 { 166 | padding-right: 20px; 167 | } 168 | 169 | .d-flex { 170 | display: -webkit-box; 171 | display: -ms-flexbox; 172 | display: flex; 173 | } 174 | 175 | .justify-content-start { 176 | -webkit-box-pack: start; 177 | -ms-flex-pack: start; 178 | justify-content: flex-start; 179 | } 180 | 181 | .justify-content-center { 182 | -webkit-box-pack: center; 183 | -ms-flex-pack: center; 184 | justify-content: center; 185 | } 186 | 187 | .justify-content-end { 188 | -webkit-box-pack: end; 189 | -ms-flex-pack: end; 190 | justify-content: flex-end; 191 | } 192 | 193 | .justify-content-between { 194 | -webkit-box-pack: justify; 195 | -ms-flex-pack: justify; 196 | justify-content: space-between; 197 | } 198 | 199 | .align-items-start { 200 | -webkit-box-align: start; 201 | -ms-flex-align: start; 202 | align-items: flex-start; 203 | } 204 | 205 | .align-items-center { 206 | -webkit-box-align: center; 207 | -ms-flex-align: center; 208 | align-items: center; 209 | } 210 | 211 | .align-items-end { 212 | -webkit-box-align: end; 213 | -ms-flex-align: end; 214 | align-items: flex-end; 215 | } 216 | 217 | .w-10 { 218 | width: 10% !important; 219 | max-width: 10% !important; 220 | min-width: 10% !important; 221 | } 222 | 223 | .w-20 { 224 | width: 20% !important; 225 | max-width: 20% !important; 226 | min-width: 20% !important; 227 | } 228 | 229 | .w-30 { 230 | width: 30% !important; 231 | max-width: 30% !important; 232 | min-width: 30% !important; 233 | } 234 | 235 | .w-40 { 236 | width: 40% !important; 237 | max-width: 40% !important; 238 | min-width: 40% !important; 239 | } 240 | 241 | .w-50 { 242 | width: 50% !important; 243 | max-width: 50% !important; 244 | min-width: 50% !important; 245 | } 246 | 247 | .w-60 { 248 | width: 60% !important; 249 | max-width: 60% !important; 250 | min-width: 60% !important; 251 | } 252 | 253 | .w-70 { 254 | width: 70% !important; 255 | max-width: 70% !important; 256 | min-width: 70% !important; 257 | } 258 | 259 | .w-80 { 260 | width: 80% !important; 261 | max-width: 80% !important; 262 | min-width: 80% !important; 263 | } 264 | 265 | .w-90 { 266 | width: 90% !important; 267 | max-width: 90% !important; 268 | min-width: 90% !important; 269 | } 270 | 271 | .w-100 { 272 | width: 100% !important; 273 | max-width: 100% !important; 274 | min-width: 100% !important; 275 | } 276 | 277 | .card { 278 | background-color: #efefef; 279 | min-width: 500px; 280 | padding: 10px; 281 | border-radius: 3px; 282 | border-bottom: 1px solid #ccc; 283 | } 284 | 285 | .card-light { 286 | background-color: #fffafa; 287 | border: 1px solid #eee; 288 | border-bottom: 1px solid #ccc; 289 | } 290 | 291 | button { 292 | padding: 10px; 293 | font-size: 15px; 294 | outline: none; 295 | border: none; 296 | border-radius: 5px; 297 | border-bottom: 1px solid #ccc; 298 | background-color: #dad0d0; 299 | cursor: pointer; 300 | } 301 | 302 | button:hover { 303 | background-color: #f0eded; 304 | } 305 | 306 | button:active { 307 | background-color: white; 308 | } 309 | 310 | button.btn-primary { 311 | background-color: #316bc2; 312 | color: #fff; 313 | } 314 | 315 | button.btn-primary:hover { 316 | background-color: #5386d3; 317 | color: #fff; 318 | } 319 | 320 | button.btn-primary:active { 321 | background-color: #7ba3de; 322 | color: #fff; 323 | } 324 | 325 | button.btn-warning { 326 | background-color: #f5e20c; 327 | color: #000; 328 | } 329 | 330 | button.btn-warning:hover { 331 | background-color: #f9ee6e; 332 | color: #000; 333 | } 334 | 335 | button.btn-warning:active { 336 | background-color: #fbf49f; 337 | color: #000; 338 | } 339 | 340 | button.btn-info { 341 | background-color: #05a0f4; 342 | color: #fff; 343 | } 344 | 345 | button.btn-info:hover { 346 | background-color: #31b4fb; 347 | color: #fff; 348 | } 349 | 350 | button.btn-info:active { 351 | background-color: #63c6fc; 352 | color: #fff; 353 | } 354 | 355 | button.btn-success { 356 | background-color: #6dc454; 357 | color: #fff; 358 | } 359 | 360 | button.btn-success:hover { 361 | background-color: #8dd17a; 362 | color: #fff; 363 | } 364 | 365 | button.btn-success:active { 366 | background-color: #aedea0; 367 | color: #fff; 368 | } 369 | 370 | button.btn-danger { 371 | background-color: #c64b4b; 372 | color: #fff; 373 | } 374 | 375 | button.btn-danger:hover { 376 | background-color: #d27272; 377 | color: #fff; 378 | } 379 | 380 | button.btn-danger:active { 381 | background-color: #df9898; 382 | color: #fff; 383 | } 384 | 385 | .btn-sm { 386 | padding: 7px; 387 | font-size: 12px; 388 | } 389 | 390 | .form-group { 391 | display: -webkit-box; 392 | display: -ms-flexbox; 393 | display: flex; 394 | -webkit-box-orient: vertical; 395 | -webkit-box-direction: normal; 396 | -ms-flex-direction: column; 397 | flex-direction: column; 398 | -webkit-box-pack: start; 399 | -ms-flex-pack: start; 400 | justify-content: start; 401 | margin-bottom: 10px; 402 | } 403 | 404 | p { 405 | font-size: 14px; 406 | } 407 | 408 | label { 409 | font-size: 15px; 410 | display: inline-block; 411 | margin-bottom: 5px; 412 | } 413 | 414 | select { 415 | outline: none; 416 | padding: 5px 10px; 417 | border: 1px solid #324354; 418 | } 419 | 420 | input { 421 | outline: none; 422 | padding: 5px 10px; 423 | border: 1px solid #324354; 424 | } 425 | 426 | textarea { 427 | outline: none; 428 | resize: none; 429 | padding: 5px 10px; 430 | border: 1px solid #324354; 431 | } 432 | 433 | header { 434 | height: 50px; 435 | margin-bottom: 10px; 436 | display: -webkit-box; 437 | display: -ms-flexbox; 438 | display: flex; 439 | -webkit-box-pack: center; 440 | -ms-flex-pack: center; 441 | justify-content: center; 442 | -webkit-box-align: center; 443 | -ms-flex-align: center; 444 | align-items: center; 445 | background-color: #324354; 446 | color: #fff; 447 | font-size: 20px; 448 | border-bottom: 2px solid #222b34; 449 | } 450 | 451 | .container { 452 | width: 100%; 453 | height: auto; 454 | padding: 10px; 455 | display: -webkit-box; 456 | display: -ms-flexbox; 457 | display: flex; 458 | -webkit-box-pack: center; 459 | -ms-flex-pack: center; 460 | justify-content: center; 461 | -webkit-box-align: start; 462 | -ms-flex-align: start; 463 | align-items: start; 464 | } 465 | 466 | ul.list { 467 | margin-top: 10px; 468 | list-style-type: none; 469 | } 470 | 471 | ul.list li { 472 | padding: 5px 10px; 473 | background-color: #efefef; 474 | margin-bottom: 5px; 475 | border: 1px solid #ccc; 476 | display: -webkit-box; 477 | display: -ms-flexbox; 478 | display: flex; 479 | -webkit-box-pack: justify; 480 | -ms-flex-pack: justify; 481 | justify-content: space-between; 482 | -webkit-box-align: center; 483 | -ms-flex-align: center; 484 | align-items: center; 485 | } 486 | 487 | .pokemon--wars--app--container .game--area { 488 | display: -webkit-box; 489 | display: -ms-flexbox; 490 | display: flex; 491 | -webkit-box-orient: vertical; 492 | -webkit-box-direction: normal; 493 | -ms-flex-direction: column; 494 | flex-direction: column; 495 | -webkit-box-pack: center; 496 | -ms-flex-pack: center; 497 | justify-content: center; 498 | -webkit-box-align: center; 499 | -ms-flex-align: center; 500 | align-items: center; 501 | width: 100%; 502 | padding: 10px; 503 | } 504 | 505 | .pokemon--wars--app--container .game--area h2 { 506 | margin-bottom: 20px; 507 | } 508 | 509 | .pokemon--wars--app--container .selection--container { 510 | display: -webkit-box; 511 | display: -ms-flexbox; 512 | display: flex; 513 | -webkit-box-orient: vertical; 514 | -webkit-box-direction: normal; 515 | -ms-flex-direction: column; 516 | flex-direction: column; 517 | -webkit-box-pack: center; 518 | -ms-flex-pack: center; 519 | justify-content: center; 520 | -webkit-box-align: center; 521 | -ms-flex-align: center; 522 | align-items: center; 523 | width: 100%; 524 | padding: 10px; 525 | margin-bottom: 20px; 526 | } 527 | 528 | .pokemon--wars--app--container .selection--container img { 529 | -webkit-transition: all 0.5s; 530 | transition: all 0.5s; 531 | margin-right: 30px; 532 | } 533 | 534 | .pokemon--wars--app--container .selection--container img:last-child { 535 | margin-right: none; 536 | } 537 | 538 | .pokemon--wars--app--container .selection--container img.pikachu.selected-pokemon { 539 | border-radius: 10px; 540 | background-color: #f8c953c8; 541 | -webkit-transition: all 0.5s; 542 | transition: all 0.5s; 543 | } 544 | 545 | .pokemon--wars--app--container .selection--container img.pikachu:hover { 546 | border-radius: 10px; 547 | background-color: #f8c953c8; 548 | -webkit-transition: all 0.5s; 549 | transition: all 0.5s; 550 | } 551 | 552 | .pokemon--wars--app--container .selection--container img.bulbasaur.selected-pokemon { 553 | border-radius: 10px; 554 | background-color: #6ddba8c8; 555 | } 556 | 557 | .pokemon--wars--app--container .selection--container img.bulbasaur:hover { 558 | border-radius: 10px; 559 | background-color: #6ddba8c8; 560 | } 561 | 562 | .pokemon--wars--app--container .selection--container img.charmander.selected-pokemon { 563 | border-radius: 10px; 564 | background-color: #f7973fc8; 565 | } 566 | 567 | .pokemon--wars--app--container .selection--container img.charmander:hover { 568 | border-radius: 10px; 569 | background-color: #f7973fc8; 570 | } 571 | 572 | .pokemon--wars--app--container .selection--container img.squirtle.selected-pokemon { 573 | border-radius: 10px; 574 | background-color: #78eeffc8; 575 | } 576 | 577 | .pokemon--wars--app--container .selection--container img.squirtle:hover { 578 | border-radius: 10px; 579 | background-color: #78eeffc8; 580 | } 581 | 582 | .pokemon--wars--app--container .fight--area { 583 | width: 750px; 584 | } 585 | 586 | .pokemon--wars--app--container .health--container { 587 | display: -webkit-box; 588 | display: -ms-flexbox; 589 | display: flex; 590 | -webkit-box-pack: justify; 591 | -ms-flex-pack: justify; 592 | justify-content: space-between; 593 | -webkit-box-align: end; 594 | -ms-flex-align: end; 595 | align-items: flex-end; 596 | } 597 | 598 | .pokemon--wars--app--container .name--health--bar { 599 | display: -webkit-box; 600 | display: -ms-flexbox; 601 | display: flex; 602 | -webkit-box-pack: start; 603 | -ms-flex-pack: start; 604 | justify-content: start; 605 | -webkit-box-align: center; 606 | -ms-flex-align: center; 607 | align-items: center; 608 | } 609 | 610 | .pokemon--wars--app--container .name--health--bar img { 611 | width: 70px; 612 | border-radius: 5px; 613 | } 614 | 615 | .pokemon--wars--app--container .name--health--bar img.pikachu { 616 | background-color: #f8c953c8; 617 | border: 2px solid #f8c953; 618 | } 619 | 620 | .pokemon--wars--app--container .name--health--bar img.bulbasaur { 621 | background-color: #6ddba8c8; 622 | border: 2px solid #6ddba8; 623 | } 624 | 625 | .pokemon--wars--app--container .name--health--bar img.charmander { 626 | background-color: #f7973fc8; 627 | border: 2px solid #f7973f; 628 | } 629 | 630 | .pokemon--wars--app--container .name--health--bar img.squirtle { 631 | background-color: #78eeffc8; 632 | border: 2px solid #78eeff; 633 | } 634 | 635 | .pokemon--wars--app--container .player--name { 636 | font-size: 18px; 637 | font-weight: bold; 638 | color: #324354; 639 | } 640 | 641 | .pokemon--wars--app--container .vs--container { 642 | font-size: 35px; 643 | color: #f7983f; 644 | font-weight: bold; 645 | font-style: italic; 646 | } 647 | 648 | .pokemon--wars--app--container progress { 649 | height: 50px; 650 | width: 280px; 651 | } 652 | 653 | .pokemon--wars--app--container progress[value] { 654 | -webkit-appearance: none; 655 | -moz-appearance: none; 656 | appearance: none; 657 | width: 250px; 658 | height: 35px; 659 | } 660 | 661 | .pokemon--wars--app--container progress.pikachu[value]::-webkit-progress-bar { 662 | background-color: #f7983f27; 663 | border: 2px solid #f7983f; 664 | } 665 | 666 | .pokemon--wars--app--container progress.pikachu[value]::-webkit-progress-value { 667 | background-color: #f7973fc8; 668 | } 669 | 670 | .pokemon--wars--app--container progress.bulbasaur[value]::-webkit-progress-bar { 671 | background-color: #6ddba827; 672 | border: 2px solid #6ddba8; 673 | } 674 | 675 | .pokemon--wars--app--container progress.bulbasaur[value]::-webkit-progress-value { 676 | background-color: #6ddba8c8; 677 | } 678 | 679 | .pokemon--wars--app--container progress.charmander[value]::-webkit-progress-bar { 680 | background-color: #f7973f27; 681 | border: 2px solid #f7973f; 682 | } 683 | 684 | .pokemon--wars--app--container progress.charmander[value]::-webkit-progress-value { 685 | background-color: #f7973fc8; 686 | } 687 | 688 | .pokemon--wars--app--container progress.squirtle[value]::-webkit-progress-bar { 689 | background-color: #78eeff27; 690 | border: 2px solid #78eeff; 691 | } 692 | 693 | .pokemon--wars--app--container progress.squirtle[value]::-webkit-progress-value { 694 | background-color: #78eeffc8; 695 | } 696 | 697 | .pokemon--wars--app--container .attack--button--container { 698 | margin-top: 50px; 699 | } 700 | 701 | .pokemon--wars--app--container .logger--container { 702 | width: 400px; 703 | margin: 0 auto; 704 | margin-top: 50px; 705 | } 706 | 707 | .pokemon--wars--app--container .logger--container img { 708 | width: 40px; 709 | } 710 | 711 | .pokemon--wars--app--container .logger--container li { 712 | display: -webkit-box; 713 | display: -ms-flexbox; 714 | display: flex; 715 | -webkit-box-pack: justify; 716 | -ms-flex-pack: justify; 717 | justify-content: space-between; 718 | -webkit-box-align: center; 719 | -ms-flex-align: center; 720 | align-items: center; 721 | border-radius: 5px; 722 | } 723 | 724 | .pokemon--wars--app--container .game--finished--container { 725 | margin-top: 100px; 726 | font-size: 50px; 727 | } 728 | 729 | .css--class--app .css--palette { 730 | list-style-type: none; 731 | display: -webkit-box; 732 | display: -ms-flexbox; 733 | display: flex; 734 | -webkit-box-pack: center; 735 | -ms-flex-pack: center; 736 | justify-content: center; 737 | -webkit-box-align: center; 738 | -ms-flex-align: center; 739 | align-items: center; 740 | } 741 | 742 | .css--class--app .css--palette li { 743 | width: 50px; 744 | height: 50px; 745 | background-color: #ccc; 746 | border-radius: 50%; 747 | margin-left: 5px; 748 | border: 1px solid #bbb; 749 | } 750 | 751 | .css--class--app .result-box { 752 | width: 100%; 753 | height: 100px; 754 | background-color: #18bf71; 755 | margin-top: 15px; 756 | border-radius: 5px; 757 | border-bottom: 1px solid #ccc; 758 | -webkit-transition: background-color 0.5s; 759 | transition: background-color 0.5s; 760 | } 761 | 762 | .bookmark--app--container { 763 | display: -ms-grid; 764 | display: grid; 765 | -ms-grid-columns: (1fr)[3]; 766 | grid-template-columns: repeat(3, 1fr); 767 | grid-gap: 10px; 768 | -webkit-box-align: center; 769 | -ms-flex-align: center; 770 | align-items: center; 771 | } 772 | 773 | .bookmark--app--container .bookmark-item { 774 | width: 400px; 775 | background-color: #efefef; 776 | border-bottom: 1px solid #ccc; 777 | border-radius: 5px; 778 | padding: 10px; 779 | } 780 | 781 | .bookmark--app--container .bookmark-item .header { 782 | display: -webkit-box; 783 | display: -ms-flexbox; 784 | display: flex; 785 | -webkit-box-pack: justify; 786 | -ms-flex-pack: justify; 787 | justify-content: space-between; 788 | -webkit-box-align: center; 789 | -ms-flex-align: center; 790 | align-items: center; 791 | } 792 | 793 | .course--planner-app--container .user--action--container { 794 | display: -webkit-box; 795 | display: -ms-flexbox; 796 | display: flex; 797 | -webkit-box-pack: justify; 798 | -ms-flex-pack: justify; 799 | justify-content: space-between; 800 | -webkit-box-align: center; 801 | -ms-flex-align: center; 802 | align-items: center; 803 | } 804 | 805 | .course--planner-app--container .user--action--container .form-group { 806 | width: 80%; 807 | margin-right: 5px; 808 | } 809 | 810 | .bet--coupon--app .competition-list { 811 | padding: 0; 812 | border-radius: 5px; 813 | border: 1px solid #efefef; 814 | border-bottom: 1px solid #ccc; 815 | } 816 | 817 | .bet--coupon--app .my-coupon { 818 | padding: 0; 819 | border-radius: 5px; 820 | border: 1px solid #efefef; 821 | border-bottom: 1px solid #ccc; 822 | min-width: 400px !important; 823 | } 824 | 825 | .bet--coupon--app .my-coupon .card--header { 826 | background-color: #05a0f4 !important; 827 | } 828 | 829 | .bet--coupon--app .card--header { 830 | background-color: #324354 !important; 831 | color: #fff; 832 | border-top-left-radius: 5px; 833 | border-top-right-radius: 5px; 834 | padding: 10px; 835 | } 836 | 837 | .bet--coupon--app .card--body { 838 | background-color: #fff !important; 839 | padding: 10px; 840 | } 841 | 842 | .bet--coupon--app .competition-item { 843 | margin-bottom: 5px; 844 | padding: 10px 0; 845 | border-bottom: 1px solid #efefef; 846 | display: -webkit-box; 847 | display: -ms-flexbox; 848 | display: flex; 849 | -webkit-box-pack: justify; 850 | -ms-flex-pack: justify; 851 | justify-content: space-between; 852 | -webkit-box-align: center; 853 | -ms-flex-align: center; 854 | align-items: center; 855 | } 856 | 857 | .bet--coupon--app .competition-item:last-child { 858 | border-bottom: none; 859 | } 860 | 861 | .bet--coupon--app .competition-item .info--container { 862 | display: -webkit-box; 863 | display: -ms-flexbox; 864 | display: flex; 865 | -webkit-box-pack: start; 866 | -ms-flex-pack: start; 867 | justify-content: start; 868 | -webkit-box-align: start; 869 | -ms-flex-align: start; 870 | align-items: start; 871 | -webkit-box-orient: vertical; 872 | -webkit-box-direction: normal; 873 | -ms-flex-direction: column; 874 | flex-direction: column; 875 | } 876 | 877 | .bet--coupon--app .competition-item .rates { 878 | width: 150px; 879 | text-align: right; 880 | display: -ms-grid; 881 | display: grid; 882 | -ms-grid-columns: (1fr)[3]; 883 | grid-template-columns: repeat(3, 1fr); 884 | } 885 | 886 | .bet--coupon--app .coupon-item { 887 | border-bottom: 1px solid #efefef; 888 | margin-bottom: 5px; 889 | padding: 10px 0; 890 | } 891 | 892 | .bet--coupon--app .coupon-item:last-child { 893 | border-bottom: none; 894 | } 895 | 896 | .bet--coupon--app .coupon--total--container { 897 | max-width: 300px; 898 | } 899 | 900 | .bet--coupon--app .coupon--total--container .my-coupon { 901 | min-width: 300px !important; 902 | } 903 | 904 | .bet--coupon--app .coupon--total--container .multiply--container { 905 | min-width: 300px !important; 906 | } 907 | 908 | .bet--coupon--app .coupon--total--container .multiply--container button:not(:last-child) { 909 | margin-right: 5px; 910 | margin-bottom: 5px; 911 | } 912 | 913 | .bet--coupon--app .multiply--buttons { 914 | -ms-flex-wrap: wrap; 915 | flex-wrap: wrap; 916 | } 917 | 918 | .contact--card--app { 919 | display: -ms-grid; 920 | display: grid; 921 | -ms-grid-columns: (1fr)[4]; 922 | grid-template-columns: repeat(4, 1fr); 923 | grid-gap: 20px; 924 | -webkit-box-align: center; 925 | -ms-flex-align: center; 926 | align-items: center; 927 | } 928 | 929 | .contact--card--app .contact-item { 930 | width: 180px; 931 | min-height: 282px; 932 | border-radius: 5px; 933 | background-color: #fff !important; 934 | } 935 | 936 | .contact--card--app .contact-item .invitation--header { 937 | width: 180px; 938 | height: 62px; 939 | background: url("https://static-exp1.licdn.com/sc/h/cpemy7gsm8bzfb5nnbbnswfdm"); 940 | background-size: cover; 941 | background-repeat: no-repeat; 942 | background-position: center; 943 | } 944 | 945 | .contact--card--app .contact-item .contact--info--container { 946 | padding: 10px; 947 | margin-top: 45px; 948 | } 949 | 950 | .contact--card--app .contact-item .contact--info--container p { 951 | font-size: 15px !important; 952 | } 953 | 954 | .contact--card--app .contact-item .contact--info--container a { 955 | font-size: 15px !important; 956 | } 957 | 958 | .contact--card--app .contact-item .action--button--container { 959 | margin-top: 10px; 960 | } 961 | 962 | .contact--card--app .contact-item .contact--image { 963 | border-radius: 50%; 964 | width: 100px; 965 | height: 100px; 966 | } 967 | 968 | .comment--like--dislike--app { 969 | width: 750px; 970 | } 971 | 972 | .chat--app--container .card { 973 | padding: 0; 974 | border-radius: 5px; 975 | border: 1px solid #efefef; 976 | border-bottom: 1px solid #ccc; 977 | max-width: 400px !important; 978 | } 979 | 980 | .chat--app--container .card .card--header { 981 | background-color: #316bc2 !important; 982 | color: #fff; 983 | border-top-left-radius: 5px; 984 | border-top-right-radius: 5px; 985 | padding: 10px; 986 | } 987 | 988 | .chat--app--container .card .card--body { 989 | background-color: #fff !important; 990 | padding: 10px; 991 | } 992 | 993 | .chat--app--container .card .card--body .active-user-item { 994 | margin-bottom: 20px; 995 | } 996 | 997 | .chat--app--container .card .card--body .active-user-item:last-child { 998 | margin-bottom: 0; 999 | } 1000 | 1001 | .chat--app--container .card .card--body .active-user-item .badge { 1002 | background-color: #efefef; 1003 | color: #333; 1004 | text-transform: uppercase; 1005 | padding: 10px; 1006 | width: 40px; 1007 | height: 40px; 1008 | border-radius: 50%; 1009 | } 1010 | 1011 | .chat--app--container .card .messages { 1012 | list-style-type: none; 1013 | display: -webkit-box; 1014 | display: -ms-flexbox; 1015 | display: flex; 1016 | -webkit-box-pack: start; 1017 | -ms-flex-pack: start; 1018 | justify-content: flex-start; 1019 | -webkit-box-align: start; 1020 | -ms-flex-align: start; 1021 | align-items: flex-start; 1022 | -webkit-box-orient: vertical; 1023 | -webkit-box-direction: normal; 1024 | -ms-flex-direction: column; 1025 | flex-direction: column; 1026 | padding: 10px; 1027 | height: calc(100vh - 200px); 1028 | overflow-y: scroll; 1029 | } 1030 | 1031 | .chat--app--container .card .messages li { 1032 | max-width: 300px; 1033 | padding: 5px 10px; 1034 | margin-bottom: 15px; 1035 | border-bottom: 1px solid #ccc; 1036 | border-radius: 10px; 1037 | background-color: #fffafa; 1038 | display: -webkit-box; 1039 | display: -ms-flexbox; 1040 | display: flex; 1041 | -webkit-box-pack: start; 1042 | -ms-flex-pack: start; 1043 | justify-content: start; 1044 | -webkit-box-orient: vertical; 1045 | -webkit-box-direction: normal; 1046 | -ms-flex-direction: column; 1047 | flex-direction: column; 1048 | -webkit-box-align: center; 1049 | -ms-flex-align: center; 1050 | align-items: center; 1051 | } 1052 | 1053 | .chat--app--container .card .messages li small { 1054 | margin-top: 10px; 1055 | -ms-flex-item-align: end; 1056 | align-self: flex-end; 1057 | font-size: 12px; 1058 | color: #ccc; 1059 | font-style: italic; 1060 | } 1061 | 1062 | .chat--app--container .card .messages li.current-user { 1063 | -ms-flex-item-align: end; 1064 | align-self: flex-end; 1065 | background-color: #05a0f4; 1066 | color: #fff; 1067 | } 1068 | 1069 | .chat--app--container .card .text-container { 1070 | margin-top: 30px; 1071 | } 1072 | 1073 | .chat--app--container .card .text-container input { 1074 | border: none; 1075 | padding: 10px; 1076 | height: 37px; 1077 | width: calc(500px - 70px); 1078 | border-bottom-left-radius: 5px; 1079 | } 1080 | 1081 | .chat--app--container .card .text-container button { 1082 | border-radius: 0 !important; 1083 | margin-bottom: 0; 1084 | border: none; 1085 | border-bottom-right-radius: 5px !important; 1086 | } 1087 | 1088 | .class--list--app .class-list { 1089 | list-style-type: none !important; 1090 | display: -ms-grid; 1091 | display: grid; 1092 | -ms-grid-columns: (1fr)[3]; 1093 | grid-template-columns: repeat(3, 1fr); 1094 | } 1095 | 1096 | .class--list--app .class-list li { 1097 | margin-bottom: 5px; 1098 | display: -webkit-box; 1099 | display: -ms-flexbox; 1100 | display: flex; 1101 | -webkit-box-pack: start; 1102 | -ms-flex-pack: start; 1103 | justify-content: start; 1104 | -webkit-box-align: center; 1105 | -ms-flex-align: center; 1106 | align-items: center; 1107 | } 1108 | 1109 | .class--list--app textarea { 1110 | width: 100%; 1111 | margin-top: 20px; 1112 | } 1113 | 1114 | .rate--calculator--app .rate-list { 1115 | list-style-type: none !important; 1116 | display: -ms-grid; 1117 | display: grid; 1118 | -ms-grid-columns: (1fr)[6]; 1119 | grid-template-columns: repeat(6, 1fr); 1120 | } 1121 | 1122 | .rate--calculator--app .rate-list li { 1123 | margin-bottom: 5px; 1124 | display: -webkit-box; 1125 | display: -ms-flexbox; 1126 | display: flex; 1127 | -webkit-box-pack: start; 1128 | -ms-flex-pack: start; 1129 | justify-content: start; 1130 | -webkit-box-align: center; 1131 | -ms-flex-align: center; 1132 | align-items: center; 1133 | } 1134 | 1135 | .rate--calculator--app input#money { 1136 | margin-top: 15px; 1137 | } 1138 | 1139 | .rate--calculator--app .rates-container { 1140 | margin-top: 20px; 1141 | list-style-type: none; 1142 | display: -ms-grid; 1143 | display: grid; 1144 | -ms-grid-columns: (1fr)[3]; 1145 | grid-template-columns: repeat(3, 1fr); 1146 | } 1147 | 1148 | .rate--calculator--app .rates-container li { 1149 | display: -webkit-box; 1150 | display: -ms-flexbox; 1151 | display: flex; 1152 | -webkit-box-pack: start; 1153 | -ms-flex-pack: start; 1154 | justify-content: start; 1155 | -webkit-box-align: center; 1156 | -ms-flex-align: center; 1157 | align-items: center; 1158 | margin-bottom: 5px; 1159 | } 1160 | 1161 | .rate--calculator--app .rates-container li:last-child { 1162 | margin-bottom: 0; 1163 | } 1164 | 1165 | .rate--calculator--app .rates-container li strong { 1166 | margin-right: 5px; 1167 | } 1168 | /*# sourceMappingURL=style.css.map */ -------------------------------------------------------------------------------- /day-1/odevler/odev-2/app.js: -------------------------------------------------------------------------------- 1 | const app = Vue.createApp({ 2 | data() { 3 | return { 4 | value: "", 5 | }; 6 | }, 7 | }); 8 | app.mount("#exercise"); 9 | -------------------------------------------------------------------------------- /day-1/odevler/odev-2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Ödev 2 | Event 8 | 9 | 10 | 11 | 12 |
    Ödev 2 | Events
    13 |
    14 |
    15 | 16 |
    17 | 18 |
    19 | 20 |
    21 | 22 |

    {{ value }}

    23 |
    24 | 25 |
    26 | 27 |

    {{ value }}

    28 |
    29 |
    30 |
    31 | 32 | 33 | -------------------------------------------------------------------------------- /day-1/odevler/odev-3/app.js: -------------------------------------------------------------------------------- 1 | new Vue({ 2 | el: '#exercise', 3 | data: { 4 | value: 0 5 | } 6 | }); -------------------------------------------------------------------------------- /day-1/odevler/odev-3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Reactivity 8 | 9 | 10 | 11 | 12 |
    Ödev 3 | Reactivity
    13 |
    14 |
    15 |
    16 | 17 | 18 |
    19 |

    Şuanki Değer: {{ value }}

    20 | 21 | 22 |

    {{ result }}

    23 |
    24 | 25 | 26 |
    27 | 28 |

    {{ value }}

    29 |
    30 |
    31 |
    32 |
    33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /day-2/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "printWidth": 150 3 | } 4 | -------------------------------------------------------------------------------- /day-2/00-component/app.js: -------------------------------------------------------------------------------- 1 | // const app = new Vue({ 2 | // el : "#app", 3 | // data : {}, 4 | // methods : {}, 5 | // computed : {}, 6 | // watch : {}, 7 | // mounted(){}, 8 | // created(){} 9 | // }) 10 | 11 | const app = Vue.createApp({ 12 | data() { 13 | return {}; 14 | }, 15 | }); 16 | 17 | app.component("counter-app", { 18 | data() { 19 | return { 20 | counter: 0, 21 | }; 22 | }, 23 | template: ` 24 |
    25 |

    {{ counter }}

    26 | 27 | 28 |
    `, 29 | }); 30 | 31 | app.mount("#app"); 32 | -------------------------------------------------------------------------------- /day-2/00-component/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vue Component 8 | 14 | 15 | 16 | 17 |
    18 |
    19 |
    20 |

    Component Nedir?

    21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 |
    30 |
    31 |
    32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /day-2/01-component-bookmark-app/assets/app.js: -------------------------------------------------------------------------------- 1 | const app = Vue.createApp({ 2 | data() { 3 | return { 4 | bookmarkList: [ 5 | { 6 | id: 1, 7 | title: "Bookmark 1", 8 | description: "Description 1", 9 | url: "url1", 10 | }, 11 | { 12 | id: 2, 13 | title: "Bookmark 2", 14 | description: "Description 2", 15 | url: "url2", 16 | }, 17 | { 18 | id: 3, 19 | title: "Bookmark 3", 20 | description: "Description 3", 21 | url: "url3", 22 | }, 23 | ], 24 | }; 25 | }, 26 | }); 27 | 28 | app.component("bookmark-item", { 29 | data() { 30 | return {}; 31 | }, 32 | template: ` 33 |
    34 |
    35 |

    Bookmark 1

    36 | 37 |
    38 |

    Açıklama

    39 | 40 |
    41 | `, 42 | }); 43 | 44 | app.mount("#app"); 45 | -------------------------------------------------------------------------------- /day-2/01-component-bookmark-app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | BookMark App 8 | 9 | 10 | 11 | 12 |
    Bookmark App
    13 |
    14 |
    15 | 19 |
    20 |
    21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /day-2/02-vue-cli/README.md: -------------------------------------------------------------------------------- 1 | # 02-vue-cli 2 | 3 | ## Project setup 4 | ``` 5 | npm install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | npm run serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | npm run build 16 | ``` 17 | 18 | ### Lints and fixes files 19 | ``` 20 | npm run lint 21 | ``` 22 | 23 | ### Customize configuration 24 | See [Configuration Reference](https://cli.vuejs.org/config/). 25 | -------------------------------------------------------------------------------- /day-2/02-vue-cli/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /day-2/02-vue-cli/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "02-vue-cli", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "core-js": "^3.6.5", 12 | "vue": "^3.0.0" 13 | }, 14 | "devDependencies": { 15 | "@vue/cli-plugin-babel": "~4.5.0", 16 | "@vue/cli-plugin-eslint": "~4.5.0", 17 | "@vue/cli-service": "~4.5.0", 18 | "@vue/compiler-sfc": "^3.0.0", 19 | "babel-eslint": "^10.1.0", 20 | "eslint": "^6.7.2", 21 | "eslint-plugin-vue": "^7.0.0" 22 | }, 23 | "eslintConfig": { 24 | "root": true, 25 | "env": { 26 | "node": true 27 | }, 28 | "extends": [ 29 | "plugin:vue/vue3-essential", 30 | "eslint:recommended" 31 | ], 32 | "parserOptions": { 33 | "parser": "babel-eslint" 34 | }, 35 | "rules": {} 36 | }, 37 | "browserslist": [ 38 | "> 1%", 39 | "last 2 versions", 40 | "not dead" 41 | ] 42 | } 43 | -------------------------------------------------------------------------------- /day-2/02-vue-cli/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gkandemi/softtech-bootcamp-1/bf2b1784304b7d21c79902d9e1c9be4439cb311b/day-2/02-vue-cli/public/favicon.ico -------------------------------------------------------------------------------- /day-2/02-vue-cli/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 15 | 16 | 17 | 24 |
    25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /day-2/02-vue-cli/src/App.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 49 | -------------------------------------------------------------------------------- /day-2/02-vue-cli/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gkandemi/softtech-bootcamp-1/bf2b1784304b7d21c79902d9e1c9be4439cb311b/day-2/02-vue-cli/src/assets/logo.png -------------------------------------------------------------------------------- /day-2/02-vue-cli/src/components/appBookmarkItem.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 17 | -------------------------------------------------------------------------------- /day-2/02-vue-cli/src/main.js: -------------------------------------------------------------------------------- 1 | import { createApp } from "vue"; 2 | import App from "./App.vue"; 3 | 4 | import "@/assets/style.css"; 5 | 6 | createApp(App).mount("#app"); 7 | -------------------------------------------------------------------------------- /day-2/03-vue-cli-like-dislike-app/README.md: -------------------------------------------------------------------------------- 1 | # 03-vue-cli-like-dislike-app 2 | 3 | ## Project setup 4 | ``` 5 | npm install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | npm run serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | npm run build 16 | ``` 17 | 18 | ### Lints and fixes files 19 | ``` 20 | npm run lint 21 | ``` 22 | 23 | ### Customize configuration 24 | See [Configuration Reference](https://cli.vuejs.org/config/). 25 | -------------------------------------------------------------------------------- /day-2/03-vue-cli-like-dislike-app/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /day-2/03-vue-cli-like-dislike-app/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "03-vue-cli-like-dislike-app", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "core-js": "^3.6.5", 12 | "vue": "^3.0.0" 13 | }, 14 | "devDependencies": { 15 | "@vue/cli-plugin-babel": "~4.5.0", 16 | "@vue/cli-plugin-eslint": "~4.5.0", 17 | "@vue/cli-service": "~4.5.0", 18 | "@vue/compiler-sfc": "^3.0.0", 19 | "babel-eslint": "^10.1.0", 20 | "eslint": "^6.7.2", 21 | "eslint-plugin-vue": "^7.0.0" 22 | }, 23 | "eslintConfig": { 24 | "root": true, 25 | "env": { 26 | "node": true 27 | }, 28 | "extends": [ 29 | "plugin:vue/vue3-essential", 30 | "eslint:recommended" 31 | ], 32 | "parserOptions": { 33 | "parser": "babel-eslint" 34 | }, 35 | "rules": {} 36 | }, 37 | "browserslist": [ 38 | "> 1%", 39 | "last 2 versions", 40 | "not dead" 41 | ] 42 | } 43 | -------------------------------------------------------------------------------- /day-2/03-vue-cli-like-dislike-app/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gkandemi/softtech-bootcamp-1/bf2b1784304b7d21c79902d9e1c9be4439cb311b/day-2/03-vue-cli-like-dislike-app/public/favicon.ico -------------------------------------------------------------------------------- /day-2/03-vue-cli-like-dislike-app/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 10 | 11 | 14 |
    15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /day-2/03-vue-cli-like-dislike-app/src/App.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 57 | 58 | 68 | -------------------------------------------------------------------------------- /day-2/03-vue-cli-like-dislike-app/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gkandemi/softtech-bootcamp-1/bf2b1784304b7d21c79902d9e1c9be4439cb311b/day-2/03-vue-cli-like-dislike-app/src/assets/logo.png -------------------------------------------------------------------------------- /day-2/03-vue-cli-like-dislike-app/src/components/appFooter.vue: -------------------------------------------------------------------------------- 1 | 6 | 11 | -------------------------------------------------------------------------------- /day-2/03-vue-cli-like-dislike-app/src/components/appHeader.vue: -------------------------------------------------------------------------------- 1 | 4 | 9 | -------------------------------------------------------------------------------- /day-2/03-vue-cli-like-dislike-app/src/components/commentSection/commentList.vue: -------------------------------------------------------------------------------- 1 | 5 | 16 | -------------------------------------------------------------------------------- /day-2/03-vue-cli-like-dislike-app/src/components/commentSection/commentListItem.vue: -------------------------------------------------------------------------------- 1 | 10 | 15 | -------------------------------------------------------------------------------- /day-2/03-vue-cli-like-dislike-app/src/components/commentSection/index.vue: -------------------------------------------------------------------------------- 1 | 12 | 34 | -------------------------------------------------------------------------------- /day-2/03-vue-cli-like-dislike-app/src/components/mostLikeSection/index.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /day-2/03-vue-cli-like-dislike-app/src/components/statsSection/index.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /day-2/03-vue-cli-like-dislike-app/src/main.js: -------------------------------------------------------------------------------- 1 | import { createApp } from "vue"; 2 | import App from "./App.vue"; 3 | 4 | import "@/assets/style.css"; 5 | 6 | createApp(App).mount("#app"); 7 | -------------------------------------------------------------------------------- /day-2/04-advanced-component-usage/README.md: -------------------------------------------------------------------------------- 1 | # 04-advanced-component-usage 2 | 3 | ## Project setup 4 | ``` 5 | npm install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | npm run serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | npm run build 16 | ``` 17 | 18 | ### Lints and fixes files 19 | ``` 20 | npm run lint 21 | ``` 22 | 23 | ### Customize configuration 24 | See [Configuration Reference](https://cli.vuejs.org/config/). 25 | -------------------------------------------------------------------------------- /day-2/04-advanced-component-usage/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /day-2/04-advanced-component-usage/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "04-advanced-component-usage", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "core-js": "^3.6.5", 12 | "vue": "^3.0.0" 13 | }, 14 | "devDependencies": { 15 | "@vue/cli-plugin-babel": "~4.5.0", 16 | "@vue/cli-plugin-eslint": "~4.5.0", 17 | "@vue/cli-service": "~4.5.0", 18 | "@vue/compiler-sfc": "^3.0.0", 19 | "babel-eslint": "^10.1.0", 20 | "eslint": "^6.7.2", 21 | "eslint-plugin-vue": "^7.0.0" 22 | }, 23 | "eslintConfig": { 24 | "root": true, 25 | "env": { 26 | "node": true 27 | }, 28 | "extends": [ 29 | "plugin:vue/vue3-essential", 30 | "eslint:recommended" 31 | ], 32 | "parserOptions": { 33 | "parser": "babel-eslint" 34 | }, 35 | "rules": {} 36 | }, 37 | "browserslist": [ 38 | "> 1%", 39 | "last 2 versions", 40 | "not dead" 41 | ] 42 | } 43 | -------------------------------------------------------------------------------- /day-2/04-advanced-component-usage/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gkandemi/softtech-bootcamp-1/bf2b1784304b7d21c79902d9e1c9be4439cb311b/day-2/04-advanced-component-usage/public/favicon.ico -------------------------------------------------------------------------------- /day-2/04-advanced-component-usage/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 15 | 16 | 17 | 23 |
    24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /day-2/04-advanced-component-usage/src/App.vue: -------------------------------------------------------------------------------- 1 | 26 | 39 | -------------------------------------------------------------------------------- /day-2/04-advanced-component-usage/src/assets/app.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | font-family: Arial, Helvetica, sans-serif; 6 | } 7 | 8 | .modal .overlay { 9 | width: 100vw; 10 | height: 100vh; 11 | position: absolute; 12 | top: 0; 13 | left: 0; 14 | background-color: rgba(0, 0, 0, 0.5); 15 | z-index: 5; 16 | } 17 | 18 | .modal .modal-content { 19 | border-radius: 4px; 20 | width: 700px; 21 | height: 400px; 22 | position: absolute; 23 | top: 50%; 24 | left: 50%; 25 | transform: translate(-50%, -50%); 26 | background-color: white; 27 | border: 2px solid #666; 28 | z-index: 6; 29 | } 30 | 31 | .modal-content .header, 32 | .modal-content .footer { 33 | height: 50px; 34 | background-color: #ccc; 35 | display: flex; 36 | justify-content: flex-start; 37 | align-items: center; 38 | padding: 5px; 39 | border-bottom: 1px solid #aaa; 40 | } 41 | .modal-content .content { 42 | padding: 5px; 43 | } 44 | .modal-content .footer { 45 | border-top: 1px solid #aaa; 46 | position: fixed; 47 | bottom: 0; 48 | width: 100%; 49 | display: flex; 50 | justify-content: space-between; 51 | align-items: center; 52 | } 53 | -------------------------------------------------------------------------------- /day-2/04-advanced-component-usage/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gkandemi/softtech-bootcamp-1/bf2b1784304b7d21c79902d9e1c9be4439cb311b/day-2/04-advanced-component-usage/src/assets/logo.png -------------------------------------------------------------------------------- /day-2/04-advanced-component-usage/src/components/appModal.vue: -------------------------------------------------------------------------------- 1 | 20 | -------------------------------------------------------------------------------- /day-2/04-advanced-component-usage/src/main.js: -------------------------------------------------------------------------------- 1 | import { createApp } from "vue"; 2 | import App from "./App.vue"; 3 | 4 | import "@/assets/app.css"; 5 | 6 | createApp(App).mount("#app"); 7 | -------------------------------------------------------------------------------- /day-2/05-dynamic-components/README.md: -------------------------------------------------------------------------------- 1 | # 05-dynamic-components 2 | 3 | ## Project setup 4 | ``` 5 | npm install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | npm run serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | npm run build 16 | ``` 17 | 18 | ### Lints and fixes files 19 | ``` 20 | npm run lint 21 | ``` 22 | 23 | ### Customize configuration 24 | See [Configuration Reference](https://cli.vuejs.org/config/). 25 | -------------------------------------------------------------------------------- /day-2/05-dynamic-components/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /day-2/05-dynamic-components/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "05-dynamic-components", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "core-js": "^3.6.5", 12 | "vue": "^3.0.0" 13 | }, 14 | "devDependencies": { 15 | "@vue/cli-plugin-babel": "~4.5.0", 16 | "@vue/cli-plugin-eslint": "~4.5.0", 17 | "@vue/cli-service": "~4.5.0", 18 | "@vue/compiler-sfc": "^3.0.0", 19 | "babel-eslint": "^10.1.0", 20 | "eslint": "^6.7.2", 21 | "eslint-plugin-vue": "^7.0.0" 22 | }, 23 | "eslintConfig": { 24 | "root": true, 25 | "env": { 26 | "node": true 27 | }, 28 | "extends": [ 29 | "plugin:vue/vue3-essential", 30 | "eslint:recommended" 31 | ], 32 | "parserOptions": { 33 | "parser": "babel-eslint" 34 | }, 35 | "rules": {} 36 | }, 37 | "browserslist": [ 38 | "> 1%", 39 | "last 2 versions", 40 | "not dead" 41 | ] 42 | } 43 | -------------------------------------------------------------------------------- /day-2/05-dynamic-components/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gkandemi/softtech-bootcamp-1/bf2b1784304b7d21c79902d9e1c9be4439cb311b/day-2/05-dynamic-components/public/favicon.ico -------------------------------------------------------------------------------- /day-2/05-dynamic-components/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 14 | <%= htmlWebpackPlugin.options.title %> 15 | 16 | 17 | 23 |
    24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /day-2/05-dynamic-components/src/App.vue: -------------------------------------------------------------------------------- 1 | 22 | 44 | -------------------------------------------------------------------------------- /day-2/05-dynamic-components/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gkandemi/softtech-bootcamp-1/bf2b1784304b7d21c79902d9e1c9be4439cb311b/day-2/05-dynamic-components/src/assets/logo.png -------------------------------------------------------------------------------- /day-2/05-dynamic-components/src/components/blueComp.vue: -------------------------------------------------------------------------------- 1 | 6 | 19 | -------------------------------------------------------------------------------- /day-2/05-dynamic-components/src/components/greenComp.vue: -------------------------------------------------------------------------------- 1 | 7 | 20 | -------------------------------------------------------------------------------- /day-2/05-dynamic-components/src/components/redComp.vue: -------------------------------------------------------------------------------- 1 | 6 | 19 | -------------------------------------------------------------------------------- /day-2/05-dynamic-components/src/main.js: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import App from './App.vue' 3 | 4 | createApp(App).mount('#app') 5 | -------------------------------------------------------------------------------- /day-2/06-axios-http-request/README.md: -------------------------------------------------------------------------------- 1 | # 06-axios-http-request 2 | 3 | ## Project setup 4 | ``` 5 | npm install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | npm run serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | npm run build 16 | ``` 17 | 18 | ### Lints and fixes files 19 | ``` 20 | npm run lint 21 | ``` 22 | 23 | ### Customize configuration 24 | See [Configuration Reference](https://cli.vuejs.org/config/). 25 | -------------------------------------------------------------------------------- /day-2/06-axios-http-request/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /day-2/06-axios-http-request/data.json: -------------------------------------------------------------------------------- 1 | { 2 | "favorites": [ 3 | { 4 | "Title": "Hababam Sinifi", 5 | "Year": "1975", 6 | "imdbID": "tt0252487", 7 | "Type": "movie", 8 | "Poster": "https://m.media-amazon.com/images/M/MV5BOWI4NGQ1M2YtNDM2Yi00YzAzLWJmZmYtMjkxZWMwNmM5Y2NhXkEyXkFqcGdeQXVyMjQ2OTI2MzU@._V1_SX300.jpg", 9 | "id": 1 10 | }, 11 | { 12 | "Title": "Hababam Sinifi Güle Güle", 13 | "Year": "1981", 14 | "imdbID": "tt0488834", 15 | "Type": "movie", 16 | "Poster": "https://m.media-amazon.com/images/M/MV5BZDUwNThmZmYtMjQ0Mi00NDFjLWJjNmMtNTEyYjc2ODJmZjZjXkEyXkFqcGdeQXVyNTM3NzExMDQ@._V1_SX300.jpg", 17 | "id": 2 18 | }, 19 | { 20 | "Title": "Hababam Sinifi Yeniden", 21 | "Year": "2019", 22 | "imdbID": "tt8941422", 23 | "Type": "movie", 24 | "Poster": "https://m.media-amazon.com/images/M/MV5BYTYyNTg2ZDEtZWY1Mi00NGMzLWI5OGMtODk4ZGNjOWMzMzczXkEyXkFqcGdeQXVyMTkyOTU2NzQ@._V1_SX300.jpg", 25 | "id": 3 26 | }, 27 | { 28 | "Title": "Iron Man", 29 | "Year": "2008", 30 | "imdbID": "tt0371746", 31 | "Type": "movie", 32 | "Poster": "https://m.media-amazon.com/images/M/MV5BMTczNTI2ODUwOF5BMl5BanBnXkFtZTcwMTU0NTIzMw@@._V1_SX300.jpg", 33 | "id": 4 34 | }, 35 | { 36 | "Title": "The Man from Earth", 37 | "Year": "2007", 38 | "imdbID": "tt0756683", 39 | "Type": "movie", 40 | "Poster": "https://m.media-amazon.com/images/M/MV5BMzQ5NGQwOTUtNWJlZi00ZTFiLWI0ZTEtOGU3MTA2ZGU5OWZiXkEyXkFqcGdeQXVyMTczNjQwOTY@._V1_SX300.jpg", 41 | "id": 5 42 | } 43 | ] 44 | } -------------------------------------------------------------------------------- /day-2/06-axios-http-request/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "06-axios-http-request", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "axios": "^0.21.1", 12 | "core-js": "^3.6.5", 13 | "vue": "^3.0.0" 14 | }, 15 | "devDependencies": { 16 | "@vue/cli-plugin-babel": "~4.5.0", 17 | "@vue/cli-plugin-eslint": "~4.5.0", 18 | "@vue/cli-service": "~4.5.0", 19 | "@vue/compiler-sfc": "^3.0.0", 20 | "babel-eslint": "^10.1.0", 21 | "eslint": "^6.7.2", 22 | "eslint-plugin-vue": "^7.0.0" 23 | }, 24 | "eslintConfig": { 25 | "root": true, 26 | "env": { 27 | "node": true 28 | }, 29 | "extends": [ 30 | "plugin:vue/vue3-essential", 31 | "eslint:recommended" 32 | ], 33 | "parserOptions": { 34 | "parser": "babel-eslint" 35 | }, 36 | "rules": {} 37 | }, 38 | "browserslist": [ 39 | "> 1%", 40 | "last 2 versions", 41 | "not dead" 42 | ] 43 | } 44 | -------------------------------------------------------------------------------- /day-2/06-axios-http-request/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gkandemi/softtech-bootcamp-1/bf2b1784304b7d21c79902d9e1c9be4439cb311b/day-2/06-axios-http-request/public/favicon.ico -------------------------------------------------------------------------------- /day-2/06-axios-http-request/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 10 | 11 | 14 |
    15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /day-2/06-axios-http-request/src/App.vue: -------------------------------------------------------------------------------- 1 | 7 | 17 | -------------------------------------------------------------------------------- /day-2/06-axios-http-request/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gkandemi/softtech-bootcamp-1/bf2b1784304b7d21c79902d9e1c9be4439cb311b/day-2/06-axios-http-request/src/assets/logo.png -------------------------------------------------------------------------------- /day-2/06-axios-http-request/src/assets/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css"); 2 | @import url("https://fonts.googleapis.com/css?family=Exo+2:400,700&display=swap"); 3 | 4 | body { 5 | font-family: "Exo 2", sans-serif; 6 | margin: 0; 7 | padding: 0; 8 | box-sizing: border-box; 9 | } 10 | 11 | .app { 12 | display: flex; 13 | justify-content: center; 14 | align-items: center; 15 | flex-direction: column; 16 | } 17 | 18 | header { 19 | height: 75px; 20 | background-color: #c00000; 21 | /* width: 100%; */ 22 | color: #fff; 23 | font-size: 23px; 24 | display: flex; 25 | justify-content: space-between; 26 | align-items: center; 27 | margin-bottom: 20px; 28 | padding: 0 10px !important; 29 | } 30 | 31 | header ul { 32 | list-style-type: none; 33 | margin: 0 !important; 34 | padding: 0px; 35 | width: 300px; 36 | } 37 | 38 | header ul li { 39 | float: left; 40 | margin-right: 10px; 41 | } 42 | 43 | header ul li a { 44 | color: #fff; 45 | text-decoration: none; 46 | display: block; 47 | padding: 5px; 48 | border: 2px solid transparent; 49 | transition: all 0.2s ease; 50 | } 51 | 52 | header ul li a:hover { 53 | border: 2px solid #fff; 54 | background-color: #fff; 55 | color: #c00000; 56 | border-radius: 5px; 57 | transition: all 0.2s ease; 58 | } 59 | 60 | header ul li a.active { 61 | border: 2px solid #fff; 62 | background-color: #fff; 63 | color: #c00000; 64 | border-radius: 5px; 65 | transition: all 0.2s ease; 66 | } 67 | 68 | .search_text { 69 | border: 1px solid #ccc; 70 | padding: 10px 20px; 71 | font-size: 18px; 72 | outline: none; 73 | color: #666; 74 | width: 300px; 75 | margin-bottom: 20px; 76 | } 77 | 78 | .movie-container { 79 | background-color: #f4f4f4; 80 | width: 600px; 81 | display: grid; 82 | grid-template-columns: 1fr 2fr; 83 | border: 1px solid #c00000; 84 | border-bottom: 3px solid #c00000; 85 | cursor: default; 86 | transition: all 0.2s; 87 | border-radius: 5px; 88 | margin-bottom: 10px; 89 | } 90 | 91 | .movie-container:hover { 92 | -webkit-box-shadow: 2px 10px 5px -8px rgba(0, 0, 0, 0.75); 93 | -moz-box-shadow: 2px 10px 5px -8px rgba(0, 0, 0, 0.75); 94 | box-shadow: 2px 10px 5px -8px rgba(0, 0, 0, 0.75); 95 | transition: all 0.2s; 96 | } 97 | 98 | .image-container { 99 | display: flex; 100 | justify-content: center; 101 | align-items: center; 102 | padding: 10px; 103 | } 104 | 105 | .image-container img { 106 | width: 150px; 107 | height: 150px; 108 | border-radius: 50%; 109 | } 110 | 111 | .info { 112 | padding: 0 10px; 113 | padding-bottom: 10px; 114 | } 115 | 116 | .info p { 117 | color: #666; 118 | text-align: justify; 119 | } 120 | 121 | .info .button { 122 | border: none; 123 | background-color: #f5c517; 124 | border: 1px solid #f5c517; 125 | padding: 10px 20px; 126 | color: black; 127 | font-weight: bold; 128 | font-size: 15px; 129 | outline: none; 130 | float: right; 131 | cursor: pointer; 132 | text-decoration: none; 133 | border-radius: 10px; 134 | } 135 | .info .button:hover { 136 | background-color: #fadb68; 137 | transition: all 0.3s; 138 | } 139 | 140 | .action_container { 141 | display: flex; 142 | justify-content: space-between; 143 | align-items: center; 144 | } 145 | 146 | .action_container i { 147 | color: #ccc; 148 | font-size: 20px; 149 | cursor: pointer; 150 | } 151 | 152 | .action_container i:hover { 153 | color: #b0514c; 154 | } 155 | .action_container i.is_favourite { 156 | color: #c00000; 157 | } 158 | -------------------------------------------------------------------------------- /day-2/06-axios-http-request/src/components/appHeader.vue: -------------------------------------------------------------------------------- 1 | 14 | -------------------------------------------------------------------------------- /day-2/06-axios-http-request/src/components/appMovieSection.vue: -------------------------------------------------------------------------------- 1 | 16 | 40 | -------------------------------------------------------------------------------- /day-2/06-axios-http-request/src/components/movieItem.vue: -------------------------------------------------------------------------------- 1 | 16 | 34 | -------------------------------------------------------------------------------- /day-2/06-axios-http-request/src/main.js: -------------------------------------------------------------------------------- 1 | import { createApp } from "vue"; 2 | import App from "./App.vue"; 3 | 4 | import "@/assets/style.css"; 5 | 6 | createApp(App).mount("#app"); 7 | 8 | // 5a96bbee 9 | -------------------------------------------------------------------------------- /day-2/06-axios-http-request/tema/README.md: -------------------------------------------------------------------------------- 1 | # Film, Dizi arama ve Favorileri Yönetme Uygulaması 2 | 3 | #Açıklama 4 | 5 | Bu uygulama film ve dizileri **OmDb API** üzerinden arayıp bulabildiğiniz ve bunları favorilerinize ekleyip çıkartabildiğiniz bir uygulamadır. Bunun için ilk olarak yapmanız gereken [OmDb API](http://www.omdbapi.com/) üzerinden bir **api key** almanız gerekmektedir. 6 | 7 | [kablosuzkedi | Movie Search App](https://www.youtube.com/watch?v=V2j9ENz0hP4&t=2563s) 8 | 9 | Bu Api key vasıtasıyla **OmDb** üzerinden film ve dizi araştırması yapabilirsiniz. Bu film ve dizileri **JSON Server** kullanarak favorilerinize ekleyebilir ve çıkarabilirsiniz. 10 | 11 | Yine de uygulamanın açıklaması için Telegram grubundan bir video paylaşacağım. 12 | 13 | Bu işlemleri yapmak için ihtiyacınız olan yapılar ise; 14 | 15 | axios, components, vue cli, vue router 16 | 17 | Başarılar dilerim :) 18 | 19 | #Explanation 20 | 21 | This application is an application that you can search and find movies and TV series via the ** OmDb API ** and add them to your favorites. First of all, you need to get a ** api key ** from [OmDb API] (http://www.omdbapi.com/). 22 | 23 | [kablosuzkedi | Movie Search App](https://www.youtube.com/watch?v=V2j9ENz0hP4&t=2563s) 24 | 25 | With this Api key, you can search for movies and series on the ** OmDb **. You can add and remove these movies and TV shows using ** JSON Server ** to your favorites. 26 | 27 | Still, I will share a video from Telegram group for an explanation of the application. 28 | 29 | The structures you need to do these operations are; 30 | 31 | axios, components, vue cli, vue router 32 | 33 | Good luck :) 34 | -------------------------------------------------------------------------------- /day-2/06-axios-http-request/tema/favorites.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Movie App | kablosuzkedi 8 | 9 | 10 | 11 | 12 |
    13 | 21 | Movie App | kablosuzkedi 22 |
    23 |
    24 |
    25 |
    26 |
    27 | 28 |
    29 |
    30 |

    Burada filmin başlığı yer alır.

    31 |

    Burada filmin açıklaması yer alır.

    32 |
    33 | 34 | IMDb 35 |
    36 |
    37 |
    38 |
    39 |
    40 | 41 |
    42 |
    43 |

    Burada filmin başlığı yer alır.

    44 |

    Burada filmin açıklaması yer alır.

    45 |
    46 | 47 | IMDb 48 |
    49 |
    50 |
    51 |
    52 |
    53 | 54 |
    55 |
    56 |

    Burada filmin başlığı yer alır.

    57 |

    Burada filmin açıklaması yer alır.

    58 |
    59 | 60 | IMDb 61 |
    62 |
    63 |
    64 |
    65 |
    66 | 67 |
    68 |
    69 |

    Burada filmin başlığı yer alır.

    70 |

    Burada filmin açıklaması yer alır.

    71 |
    72 | 73 | IMDb 74 |
    75 |
    76 |
    77 |
    78 |
    79 | 80 | 81 | 82 | -------------------------------------------------------------------------------- /day-2/06-axios-http-request/tema/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Movie App | kablosuzkedi 8 | 9 | 10 | 11 | 12 |
    13 | 21 | Movie App | kablosuzkedi 22 |
    23 |
    24 | 30 |
    31 |
    32 |
    33 | 34 |
    35 |
    36 |

    Burada filmin başlığı yer alır.

    37 |

    Burada filmin açıklaması yer alır.

    38 |
    39 | 40 | IMDb 41 |
    42 |
    43 |
    44 |
    45 |
    46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /day-2/06-axios-http-request/tema/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css"); 2 | @import url("https://fonts.googleapis.com/css?family=Exo+2:400,700&display=swap"); 3 | 4 | body { 5 | font-family: "Exo 2", sans-serif; 6 | margin: 0; 7 | padding: 0; 8 | box-sizing: border-box; 9 | } 10 | 11 | #app { 12 | display: flex; 13 | justify-content: center; 14 | align-items: center; 15 | flex-direction: column; 16 | } 17 | 18 | header { 19 | height: 75px; 20 | background-color: #c00000; 21 | /* width: 100%; */ 22 | color: #fff; 23 | font-size: 23px; 24 | display: flex; 25 | justify-content: space-between; 26 | align-items: center; 27 | margin-bottom: 20px; 28 | padding: 0 10px !important; 29 | } 30 | 31 | header ul { 32 | list-style-type: none; 33 | margin: 0 !important; 34 | padding: 0px; 35 | width: 300px; 36 | } 37 | 38 | header ul li { 39 | float: left; 40 | margin-right: 10px; 41 | } 42 | 43 | header ul li a { 44 | color: #fff; 45 | text-decoration: none; 46 | display: block; 47 | padding: 5px; 48 | border: 2px solid transparent; 49 | transition: all 0.2s ease; 50 | } 51 | 52 | header ul li a:hover { 53 | border: 2px solid #fff; 54 | background-color: #fff; 55 | color: #c00000; 56 | border-radius: 5px; 57 | transition: all 0.2s ease; 58 | } 59 | 60 | header ul li a.active { 61 | border: 2px solid #fff; 62 | background-color: #fff; 63 | color: #c00000; 64 | border-radius: 5px; 65 | transition: all 0.2s ease; 66 | } 67 | 68 | .search_text { 69 | border: 1px solid #ccc; 70 | padding: 10px 20px; 71 | font-size: 18px; 72 | outline: none; 73 | color: #666; 74 | width: 300px; 75 | margin-bottom: 20px; 76 | } 77 | 78 | .movie-container { 79 | background-color: #f4f4f4; 80 | width: 600px; 81 | display: grid; 82 | grid-template-columns: 1fr 2fr; 83 | border: 1px solid #c00000; 84 | border-bottom: 3px solid #c00000; 85 | cursor: default; 86 | transition: all 0.2s; 87 | border-radius: 5px; 88 | margin-bottom: 10px; 89 | } 90 | 91 | .movie-container:hover { 92 | -webkit-box-shadow: 2px 10px 5px -8px rgba(0, 0, 0, 0.75); 93 | -moz-box-shadow: 2px 10px 5px -8px rgba(0, 0, 0, 0.75); 94 | box-shadow: 2px 10px 5px -8px rgba(0, 0, 0, 0.75); 95 | transition: all 0.2s; 96 | } 97 | 98 | .image-container { 99 | display: flex; 100 | justify-content: center; 101 | align-items: center; 102 | padding: 10px; 103 | } 104 | 105 | .image-container img { 106 | width: 150px; 107 | height: 150px; 108 | border-radius: 50%; 109 | } 110 | 111 | .info { 112 | padding: 0 10px; 113 | padding-bottom: 10px; 114 | } 115 | 116 | .info p { 117 | color: #666; 118 | text-align: justify; 119 | } 120 | 121 | .info .button { 122 | border: none; 123 | background-color: #f5c517; 124 | border: 1px solid #f5c517; 125 | padding: 10px 20px; 126 | color: black; 127 | font-weight: bold; 128 | font-size: 15px; 129 | outline: none; 130 | float: right; 131 | cursor: pointer; 132 | text-decoration: none; 133 | border-radius: 10px; 134 | } 135 | .info .button:hover { 136 | background-color: #fadb68; 137 | transition: all 0.3s; 138 | } 139 | 140 | .action_container { 141 | display: flex; 142 | justify-content: space-between; 143 | align-items: center; 144 | } 145 | 146 | .action_container i { 147 | color: #ccc; 148 | font-size: 20px; 149 | cursor: pointer; 150 | } 151 | 152 | .action_container i:hover { 153 | color: #b0514c; 154 | } 155 | .action_container i.is_favourite { 156 | color: #c00000; 157 | } 158 | -------------------------------------------------------------------------------- /day-3/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "printWidth": 150 3 | } 4 | -------------------------------------------------------------------------------- /day-3/00-vue-router/README.md: -------------------------------------------------------------------------------- 1 | # 00-vue-router 2 | 3 | ## Project setup 4 | ``` 5 | npm install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | npm run serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | npm run build 16 | ``` 17 | 18 | ### Lints and fixes files 19 | ``` 20 | npm run lint 21 | ``` 22 | 23 | ### Customize configuration 24 | See [Configuration Reference](https://cli.vuejs.org/config/). 25 | -------------------------------------------------------------------------------- /day-3/00-vue-router/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /day-3/00-vue-router/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "00-vue-router", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "core-js": "^3.6.5", 12 | "vue": "^3.0.0", 13 | "vue-router": "^4.0.5" 14 | }, 15 | "devDependencies": { 16 | "@vue/cli-plugin-babel": "~4.5.0", 17 | "@vue/cli-plugin-eslint": "~4.5.0", 18 | "@vue/cli-service": "~4.5.0", 19 | "@vue/compiler-sfc": "^3.0.0", 20 | "babel-eslint": "^10.1.0", 21 | "eslint": "^6.7.2", 22 | "eslint-plugin-vue": "^7.0.0" 23 | }, 24 | "eslintConfig": { 25 | "root": true, 26 | "env": { 27 | "node": true 28 | }, 29 | "extends": [ 30 | "plugin:vue/vue3-essential", 31 | "eslint:recommended" 32 | ], 33 | "parserOptions": { 34 | "parser": "babel-eslint" 35 | }, 36 | "rules": {} 37 | }, 38 | "browserslist": [ 39 | "> 1%", 40 | "last 2 versions", 41 | "not dead" 42 | ] 43 | } 44 | -------------------------------------------------------------------------------- /day-3/00-vue-router/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gkandemi/softtech-bootcamp-1/bf2b1784304b7d21c79902d9e1c9be4439cb311b/day-3/00-vue-router/public/favicon.ico -------------------------------------------------------------------------------- /day-3/00-vue-router/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 14 | <%= htmlWebpackPlugin.options.title %> 15 | 16 | 17 | 24 |
    25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /day-3/00-vue-router/src/App.vue: -------------------------------------------------------------------------------- 1 | 8 | 16 | -------------------------------------------------------------------------------- /day-3/00-vue-router/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gkandemi/softtech-bootcamp-1/bf2b1784304b7d21c79902d9e1c9be4439cb311b/day-3/00-vue-router/src/assets/logo.png -------------------------------------------------------------------------------- /day-3/00-vue-router/src/components/appHeader.vue: -------------------------------------------------------------------------------- 1 | 30 | -------------------------------------------------------------------------------- /day-3/00-vue-router/src/main.js: -------------------------------------------------------------------------------- 1 | import { createApp } from "vue"; 2 | import App from "./App.vue"; 3 | import router from "./router"; 4 | 5 | const app = createApp(App); 6 | 7 | app.use(router); 8 | app.mount("#app"); 9 | -------------------------------------------------------------------------------- /day-3/00-vue-router/src/router.js: -------------------------------------------------------------------------------- 1 | import Home from "@/views/Home"; 2 | import About from "@/views/About"; 3 | import Contact from "@/views/Contact"; 4 | import Invoices from "@/views/Invoices"; 5 | 6 | import { createRouter, createWebHashHistory } from "vue-router"; 7 | 8 | const customRoutes = [ 9 | { 10 | name: "Home", 11 | path: "/", 12 | component: Home, 13 | }, 14 | { 15 | name: "About", 16 | path: "/about", 17 | component: About, 18 | }, 19 | { 20 | name: "Contact", 21 | path: "/contact", 22 | component: Contact, 23 | }, 24 | { 25 | name: "Invoices", 26 | path: "/invoices/:clientID", 27 | component: Invoices, 28 | }, 29 | ]; 30 | 31 | const router = createRouter({ 32 | routes: customRoutes, 33 | history: createWebHashHistory(), 34 | }); 35 | 36 | router.beforeEach((to, from) => { 37 | console.log("BeforeEach", to, from); 38 | }); 39 | 40 | export default router; 41 | -------------------------------------------------------------------------------- /day-3/00-vue-router/src/views/About.vue: -------------------------------------------------------------------------------- 1 | 37 | 48 | -------------------------------------------------------------------------------- /day-3/00-vue-router/src/views/Contact.vue: -------------------------------------------------------------------------------- 1 | 16 | 21 | -------------------------------------------------------------------------------- /day-3/00-vue-router/src/views/Home.vue: -------------------------------------------------------------------------------- 1 | 34 | 58 | -------------------------------------------------------------------------------- /day-3/00-vue-router/src/views/Invoices.vue: -------------------------------------------------------------------------------- 1 | 44 | 82 | -------------------------------------------------------------------------------- /day-3/01-vuex/README.md: -------------------------------------------------------------------------------- 1 | # 01-vuex 2 | 3 | ## Project setup 4 | ``` 5 | npm install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | npm run serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | npm run build 16 | ``` 17 | 18 | ### Lints and fixes files 19 | ``` 20 | npm run lint 21 | ``` 22 | 23 | ### Customize configuration 24 | See [Configuration Reference](https://cli.vuejs.org/config/). 25 | -------------------------------------------------------------------------------- /day-3/01-vuex/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /day-3/01-vuex/db.json: -------------------------------------------------------------------------------- 1 | { 2 | "products": [ 3 | { 4 | "name": "asdasdsa", 5 | "id": 1 6 | }, 7 | { 8 | "name": "fghfgh", 9 | "id": 2 10 | } 11 | ] 12 | } -------------------------------------------------------------------------------- /day-3/01-vuex/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "01-vuex", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "axios": "^0.21.1", 12 | "core-js": "^3.6.5", 13 | "vue": "^3.0.0", 14 | "vuex": "^4.0.0" 15 | }, 16 | "devDependencies": { 17 | "@vue/cli-plugin-babel": "~4.5.0", 18 | "@vue/cli-plugin-eslint": "~4.5.0", 19 | "@vue/cli-service": "~4.5.0", 20 | "@vue/compiler-sfc": "^3.0.0", 21 | "babel-eslint": "^10.1.0", 22 | "eslint": "^6.7.2", 23 | "eslint-plugin-vue": "^7.0.0" 24 | }, 25 | "eslintConfig": { 26 | "root": true, 27 | "env": { 28 | "node": true 29 | }, 30 | "extends": [ 31 | "plugin:vue/vue3-essential", 32 | "eslint:recommended" 33 | ], 34 | "parserOptions": { 35 | "parser": "babel-eslint" 36 | }, 37 | "rules": {} 38 | }, 39 | "browserslist": [ 40 | "> 1%", 41 | "last 2 versions", 42 | "not dead" 43 | ] 44 | } 45 | -------------------------------------------------------------------------------- /day-3/01-vuex/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gkandemi/softtech-bootcamp-1/bf2b1784304b7d21c79902d9e1c9be4439cb311b/day-3/01-vuex/public/favicon.ico -------------------------------------------------------------------------------- /day-3/01-vuex/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 15 | 16 | 17 | 24 |
    25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /day-3/01-vuex/src/App.vue: -------------------------------------------------------------------------------- 1 | 23 | 59 | -------------------------------------------------------------------------------- /day-3/01-vuex/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gkandemi/softtech-bootcamp-1/bf2b1784304b7d21c79902d9e1c9be4439cb311b/day-3/01-vuex/src/assets/logo.png -------------------------------------------------------------------------------- /day-3/01-vuex/src/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 32 | 33 | 41 | 42 | 43 | 59 | -------------------------------------------------------------------------------- /day-3/01-vuex/src/main.js: -------------------------------------------------------------------------------- 1 | import { createApp } from "vue"; 2 | import App from "./App.vue"; 3 | import store from "./store"; 4 | 5 | const app = createApp(App); 6 | app.use(store); 7 | app.mount("#app"); 8 | -------------------------------------------------------------------------------- /day-3/01-vuex/src/store.js: -------------------------------------------------------------------------------- 1 | import { createStore } from "vuex"; 2 | import axios from "axios"; 3 | 4 | const store = createStore({ 5 | state: { 6 | productList: [], 7 | incoming_price: 100, 8 | categoryList: ["Vue", "React", "PHP"], 9 | user: { 10 | name: "kablosuzkedi", 11 | full_name: "Gokhan Kandemir", 12 | id: 123 13 | } 14 | }, 15 | mutations: { 16 | setProducts(state, products) { 17 | state.productList = products; 18 | }, 19 | addProduct(state, product) { 20 | state.productList.push(product); 21 | }, 22 | removeProduct(state, product) { 23 | state.productList = state.productList.filter(p => p.id !== product.id); 24 | } 25 | }, 26 | actions: { 27 | saveProduct({ commit }, product) { 28 | axios.post("http://localhost:3000/products", product).then(product_save_response => { 29 | commit("addProduct", product_save_response.data); 30 | }); 31 | }, 32 | fetchProducts({ commit }) { 33 | axios.get("http://localhost:3000/products").then(products_response => { 34 | commit("setProducts", products_response.data || []); 35 | }); 36 | }, 37 | deleteProduct({ commit }, product) { 38 | axios.delete(`http://localhost:3000/products/${product.id}`).then(() => { 39 | commit("removeProduct", product); 40 | }); 41 | } 42 | }, 43 | getters: { 44 | productList: state => state.productList, 45 | categoryList: state => state.categoryList 46 | } 47 | }); 48 | 49 | export default store; 50 | -------------------------------------------------------------------------------- /day-3/02-vuex-modules/README.md: -------------------------------------------------------------------------------- 1 | # 02-vuex-modules 2 | 3 | ## Project setup 4 | ``` 5 | npm install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | npm run serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | npm run build 16 | ``` 17 | 18 | ### Lints and fixes files 19 | ``` 20 | npm run lint 21 | ``` 22 | 23 | ### Customize configuration 24 | See [Configuration Reference](https://cli.vuejs.org/config/). 25 | -------------------------------------------------------------------------------- /day-3/02-vuex-modules/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /day-3/02-vuex-modules/db.json: -------------------------------------------------------------------------------- 1 | { 2 | "categories": [ 3 | { 4 | "name": "Frontend", 5 | "created_at": "2021-03-26T12:14:29.420Z", 6 | "id": 1 7 | }, 8 | { 9 | "name": "Backend", 10 | "created_at": "2021-03-26T12:14:34.831Z", 11 | "id": 2 12 | }, 13 | { 14 | "name": "DevOPS", 15 | "created_at": "2021-03-26T12:14:39.666Z", 16 | "id": 3 17 | }, 18 | { 19 | "name": "AWS", 20 | "created_at": "2021-03-26T12:15:06.883Z", 21 | "id": 4 22 | } 23 | ], 24 | "products": [ 25 | { 26 | "name": "S3", 27 | "categoryId": 4, 28 | "created_at": "2021-03-26T12:44:18.882Z", 29 | "id": 1 30 | }, 31 | { 32 | "name": "aaaa", 33 | "categoryId": 3, 34 | "created_at": "2021-03-26T12:45:18.688Z", 35 | "id": 2 36 | }, 37 | { 38 | "name": "Ürün 1", 39 | "categoryId": 3, 40 | "created_at": "2021-03-26T12:47:29.707Z", 41 | "id": 3 42 | }, 43 | { 44 | "name": "aaaaa", 45 | "categoryId": 3, 46 | "created_at": "2021-03-26T12:52:50.192Z", 47 | "id": 4 48 | }, 49 | { 50 | "name": "Optional Chaning", 51 | "categoryId": 1, 52 | "created_at": "2021-03-26T12:54:08.699Z", 53 | "id": 5 54 | }, 55 | { 56 | "name": "aaaa", 57 | "categoryId": 3, 58 | "created_at": "2021-03-26T12:56:07.668Z", 59 | "id": 6 60 | }, 61 | { 62 | "name": "aasdfds", 63 | "categoryId": 3, 64 | "created_at": "2021-03-26T12:56:47.078Z", 65 | "id": 7 66 | }, 67 | { 68 | "name": "Yeni ürün", 69 | "categoryId": 3, 70 | "created_at": "2021-03-26T12:59:37.855Z", 71 | "id": 8 72 | } 73 | ] 74 | } -------------------------------------------------------------------------------- /day-3/02-vuex-modules/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "02-vuex-modules", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "axios": "^0.21.1", 12 | "core-js": "^3.6.5", 13 | "vue": "^3.0.0", 14 | "vue-router": "^4.0.5", 15 | "vuex": "^4.0.0" 16 | }, 17 | "devDependencies": { 18 | "@vue/cli-plugin-babel": "~4.5.0", 19 | "@vue/cli-plugin-eslint": "~4.5.0", 20 | "@vue/cli-service": "~4.5.0", 21 | "@vue/compiler-sfc": "^3.0.0", 22 | "babel-eslint": "^10.1.0", 23 | "eslint": "^6.7.2", 24 | "eslint-plugin-vue": "^7.0.0" 25 | }, 26 | "eslintConfig": { 27 | "root": true, 28 | "env": { 29 | "node": true 30 | }, 31 | "extends": [ 32 | "plugin:vue/vue3-essential", 33 | "eslint:recommended" 34 | ], 35 | "parserOptions": { 36 | "parser": "babel-eslint" 37 | }, 38 | "rules": {} 39 | }, 40 | "browserslist": [ 41 | "> 1%", 42 | "last 2 versions", 43 | "not dead" 44 | ] 45 | } 46 | -------------------------------------------------------------------------------- /day-3/02-vuex-modules/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gkandemi/softtech-bootcamp-1/bf2b1784304b7d21c79902d9e1c9be4439cb311b/day-3/02-vuex-modules/public/favicon.ico -------------------------------------------------------------------------------- /day-3/02-vuex-modules/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 15 | 16 | 17 | 23 |
    24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /day-3/02-vuex-modules/src/App.vue: -------------------------------------------------------------------------------- 1 | 5 | 17 | -------------------------------------------------------------------------------- /day-3/02-vuex-modules/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gkandemi/softtech-bootcamp-1/bf2b1784304b7d21c79902d9e1c9be4439cb311b/day-3/02-vuex-modules/src/assets/logo.png -------------------------------------------------------------------------------- /day-3/02-vuex-modules/src/components/appHeader.vue: -------------------------------------------------------------------------------- 1 | 21 | -------------------------------------------------------------------------------- /day-3/02-vuex-modules/src/main.js: -------------------------------------------------------------------------------- 1 | import { createApp } from "vue"; 2 | import App from "./App.vue"; 3 | 4 | import router from "./router"; 5 | import store from "./store"; 6 | 7 | const app = createApp(App); 8 | 9 | app.use(router); 10 | app.use(store); 11 | app.mount("#app"); 12 | -------------------------------------------------------------------------------- /day-3/02-vuex-modules/src/router.js: -------------------------------------------------------------------------------- 1 | import { createRouter, createWebHashHistory } from "vue-router"; 2 | import Home from "@/views/Home"; 3 | import CategoryList from "@/views/Category/List"; 4 | import NewCategory from "@/views/Category/New"; 5 | import ProductList from "@/views/Product/List"; 6 | import NewProduct from "@/views/Product/New"; 7 | 8 | const routes = [ 9 | { 10 | name: "HomePage", 11 | path: "/", 12 | component: Home 13 | }, 14 | { 15 | name: "CategoryList", 16 | path: "/categories", 17 | component: CategoryList 18 | }, 19 | { 20 | name: "NewCategory", 21 | path: "/category/new", 22 | component: NewCategory 23 | }, 24 | { 25 | name: "ProductList", 26 | path: "/products", 27 | component: ProductList 28 | }, 29 | { 30 | name: "NewProduct", 31 | path: "/product/new", 32 | component: NewProduct 33 | } 34 | ]; 35 | 36 | const router = createRouter({ 37 | routes, 38 | history: createWebHashHistory() 39 | }); 40 | 41 | export default router; 42 | -------------------------------------------------------------------------------- /day-3/02-vuex-modules/src/store/index.js: -------------------------------------------------------------------------------- 1 | import { createStore } from "vuex"; 2 | 3 | import categories from "./modules/categories"; 4 | import products from "./modules/products"; 5 | 6 | const store = createStore({ 7 | state: { 8 | user: "Gokhan", 9 | productList: [] 10 | }, 11 | mutations: { 12 | updateUser(state, user) { 13 | state.user = user; 14 | } 15 | }, 16 | actions: {}, 17 | getters: {}, 18 | modules: { 19 | products, 20 | categories 21 | } 22 | }); 23 | 24 | export default store; 25 | -------------------------------------------------------------------------------- /day-3/02-vuex-modules/src/store/modules/categories/index.js: -------------------------------------------------------------------------------- 1 | import axios from "axios"; 2 | export default { 3 | namespaced: true, 4 | state: { 5 | categoryList: [] 6 | }, 7 | mutations: { 8 | addCategory(state, category) { 9 | state.categoryList.push(category); 10 | }, 11 | setCategories(state, categories) { 12 | state.categoryList = categories; 13 | }, 14 | removeCategory(state, category) { 15 | state.categoryList = state.categoryList.filter(c => c.id !== category.id); 16 | } 17 | }, 18 | actions: { 19 | saveCategory({ commit }, category) { 20 | axios.post("http://localhost:3000/categories", { name: category, created_at: new Date() }).then(category_save_response => { 21 | commit("addCategory", category_save_response.data); 22 | }); 23 | }, 24 | fetchCategories({ commit }) { 25 | axios.get("http://localhost:3000/categories").then(category_response => { 26 | commit("setCategories", category_response.data); 27 | }); 28 | }, 29 | deleteCategory({ commit }, category) { 30 | axios.delete(`http://localhost:3000/categories/${category.id}`).then(() => { 31 | commit("removeCategory", category); 32 | }); 33 | } 34 | }, 35 | getters: { 36 | categoryList: state => state.categoryList 37 | } 38 | }; 39 | -------------------------------------------------------------------------------- /day-3/02-vuex-modules/src/store/modules/products/index.js: -------------------------------------------------------------------------------- 1 | import axios from "axios"; 2 | import router from "../../../router"; 3 | import categories from "../categories"; 4 | export default { 5 | namespaced: true, 6 | state: { 7 | productList: [] 8 | }, 9 | mutations: { 10 | setProducts(state, products) { 11 | state.productList = products; 12 | }, 13 | addProduct(state, product) { 14 | const matchedCategory = categories.state.categoryList?.find(c => c.id === product.categoryId); 15 | if (matchedCategory) { 16 | state.productList.push({ 17 | ...product, 18 | category: { 19 | ...matchedCategory 20 | } 21 | }); 22 | } else { 23 | state.productList.push(product); 24 | } 25 | }, 26 | removeProduct(state, product) { 27 | state.productList = state.productList.filter(p => p.id !== product.id); 28 | } 29 | }, 30 | actions: { 31 | saveProduct({ commit }, product) { 32 | axios.post("http://localhost:3000/products", { ...product, created_at: new Date() }).then(product_save_response => { 33 | commit("addProduct", product_save_response.data); 34 | router.push("/products"); 35 | }); 36 | }, 37 | deleteProduct({ commit }, product) { 38 | axios.delete(`http://localhost:3000/products/${product.id}`).then(() => { 39 | commit("removeProduct", product); 40 | }); 41 | }, 42 | fetchProducts({ commit }) { 43 | axios.get("http://localhost:3000/products?_expand=category").then(product_response => { 44 | console.log("product_response :>> ", product_response); 45 | commit("setProducts", product_response.data); 46 | }); 47 | } 48 | }, 49 | getters: { 50 | productList: state => state.productList 51 | } 52 | }; 53 | -------------------------------------------------------------------------------- /day-3/02-vuex-modules/src/views/Category/List/index.vue: -------------------------------------------------------------------------------- 1 | 40 | 59 | -------------------------------------------------------------------------------- /day-3/02-vuex-modules/src/views/Category/New/index.vue: -------------------------------------------------------------------------------- 1 | 17 | 32 | -------------------------------------------------------------------------------- /day-3/02-vuex-modules/src/views/Home/index.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 17 | -------------------------------------------------------------------------------- /day-3/02-vuex-modules/src/views/Product/List/index.vue: -------------------------------------------------------------------------------- 1 | 41 | 69 | -------------------------------------------------------------------------------- /day-3/02-vuex-modules/src/views/Product/New/index.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | 48 | --------------------------------------------------------------------------------