[ { "path": ".prettierrc", "content": "{\n \"printWidth\": 150\n}" }, { "path": "ders-1/0-js-vs-vue/js/app.js", "content": "const todoText = document.querySelector(\"#todoText\");\nconst addBtn = document.querySelector(\"#addBtn\");\nconst todoList = document.querySelector(\"#todoList\");\n\naddBtn.addEventListener(\"click\", () => {\n const listItem = document.createElement(\"li\");\n listItem.textContent = todoText.value;\n todoList.append(listItem);\n});\n" }, { "path": "ders-1/0-js-vs-vue/js/index.html", "content": "\n\n \n \n \n \n Document\n \n \n \n \n \n \n \n\n" }, { "path": "ders-1/0-js-vs-vue/vue/app.js", "content": "const app = Vue.createApp({\n data() {\n return {\n todoText: null,\n todoList: [],\n };\n },\n methods: {\n addTodo() {\n this.todoList.push(this.todoText);\n },\n },\n}).mount(\"#app\");\n" }, { "path": "ders-1/0-js-vs-vue/vue/index.html", "content": "\n\n \n \n \n \n Document\n \n \n \n
\n \n \n \n
\n \n \n\n" }, { "path": "ders-1/1-vue-instance/app.js", "content": "const app = Vue.createApp({\n data() {\n return {\n title: \"Vue.js Bootcamp 1.gün\",\n content: \"Lorem ipsum dolor sit amet..\",\n eduflow: {\n title: \"Müfredat ve açıklamalar için tıklayınız\",\n target: \"_blank\",\n url: \"https://eduflow.kablosuzkedi.com\",\n alt: \"mufredat-kablosuzkedi-vue-bootcamp\",\n },\n owner: \"Pogaca\",\n coords: {\n x: 0,\n y: 0,\n },\n };\n },\n methods: {\n changeTitle(pTitle) {\n this.title = pTitle;\n },\n updateCoords(message, event) {\n // console.log(message, event.x, event.y);\n this.changeTitle(`${event.x},${event.y}`);\n this.coords = {\n x: event.x,\n y: event.y,\n };\n },\n },\n}).mount(\"#app\");\n// Vue2 Version\n// new Vue({\n// el : \"#app\",\n// data : {\n\n// }\n// })\n" }, { "path": "ders-1/1-vue-instance/index.html", "content": "\n\n \n \n \n \n Document\n \n \n \n \n
\n

{{ title }}

\n

{{ content }}

\n \n {{ eduflow.title }}\n
\n
\n \n \n
\n {{ coords.x }},{{ coords.y }}\n \n \n \n\n" }, { "path": "ders-1/1-vue-instance/style.css", "content": ".box {\n margin-top: 10px;\n border: 2px dashed #666;\n width: 200px;\n height: 200px;\n background-color: beige;\n}\n" }, { "path": "ders-1/2-events/app.js", "content": "const app = Vue.createApp({\n data() {\n return {\n fullName: \"Küpeli\",\n };\n },\n methods: {\n updateValue(kamil) {\n this.fullName = kamil.target.value;\n },\n },\n}).mount(\"#app\");\n" }, { "path": "ders-1/2-events/index.html", "content": "\n\n \n \n \n \n Events\n \n \n \n \n
\n
\n
\n

Event

\n \n \n \n\n {{ fullName }}\n
\n \n
\n
\n
\n \n \n\n" }, { "path": "ders-1/3-counter-app/.prettierrc", "content": "{\n \"printWidth\": 150\n}" }, { "path": "ders-1/3-counter-app/app.js", "content": "const app = Vue.createApp({\n data() {\n return {\n counter: 0,\n counter2: 0,\n };\n },\n methods: {},\n computed: {\n getCounterResult() {\n console.log(\"Counter 1 Çalıştı\");\n return this.counter > 5 ? \"BÜYÜK\" : \"KÜÇÜK\";\n },\n getCounter2Result() {\n console.log(\"Counter 2 Çalıştı\");\n return this.counter2 > 5 ? \"BÜYÜK\" : \"KÜÇÜK\";\n },\n },\n watch: {\n counter(newValue, oldValue) {\n console.log(\"Counter\", oldValue, \"=>\", newValue);\n },\n getCounterResult(newValue, oldValue) {\n console.log(\"RESULT\", oldValue, \"=>\", newValue);\n },\n },\n // methods: {\n // inc() {\n // this.counter++;\n // },\n // dec() {\n // this.counter--;\n // },\n // },\n}).mount(\"#app\");\n" }, { "path": "ders-1/3-counter-app/index.html", "content": "\n\n \n \n \n \n Counter\n \n \n \n \n
\n
\n
\n

{{ counter }}

\n
\n \n \n
\n
{{ getCounterResult }}
\n
\n\n
\n

{{ counter2 }}

\n
\n \n \n
\n
{{ getCounter2Result }}
\n
\n
\n
\n\n \n \n\n" }, { "path": "ders-1/4-reactivity-examples/app.js", "content": "const app = Vue.createApp({\n data() {\n return {\n search: \"\",\n itemList: [\"elma\", \"armut\", \"kiraz\", \"çilek\"],\n // filteredList: [],\n };\n },\n methods: {\n searchList() {\n // this.filteredList = this.itemList.filter((i) => i.includes(this.search));\n },\n },\n computed: {\n filteredList() {\n return this.itemList.filter((i) => i.includes(this.search));\n },\n },\n});\napp.mount(\"#app\");\n" }, { "path": "ders-1/4-reactivity-examples/index.html", "content": "\n\n \n \n \n \n Document\n \n \n \n \n
\n
\n
\n \n \n 
\n                {{ itemList }}\n                \n          
\n                {{ filteredList }}\n                \n
\n
\n
\n \n \n\n" }, { "path": "ders-1/5-life-cycle-hooks/app.js", "content": "const app = Vue.createApp({\n data() {\n return {\n title: \"Test Başlığı\",\n itemList: [],\n };\n },\n beforeCreate() {\n console.log(\"beforeCreate Çalıştı..\");\n },\n created() {\n console.log(\"created Çalıştı..\");\n setTimeout(() => {\n this.itemList = [1, 2, 3, 4, 5, 56, 7, 8];\n }, 2000);\n\n setTimeout(() => {\n this.title = \"Bu yeni başlık.\";\n }, 3000);\n },\n beforeMount() {\n console.log(\"beforeMount Çalıştı..\");\n },\n mounted() {\n console.log(\"mounted Çalıştı..\");\n },\n beforeUpdate() {\n console.log(\"beforeUpdate Çalıştı..\");\n },\n updated() {\n console.log(\"updated Çalıştı..\");\n },\n beforeUnmount() {\n console.log(\"beforeUnmount Çalıştı..\");\n },\n unmounted() {\n console.log(\"unmounted Çalıştı..\");\n },\n});\n\napp.mount(\"#app\");\n\nsetTimeout(() => {\n app.unmount();\n}, 5000);\n// const app2 = Vue.createApp({})\n" }, { "path": "ders-1/5-life-cycle-hooks/index.html", "content": "\n\n \n \n \n \n Life Cycle Hooks\n \n \n \n
\n {{ title }}\n 
\n        {{ itemList }}\n
\n
\n \n \n\n" }, { "path": "ders-1/6-class-style-binding/app.js", "content": "const app = Vue.createApp({\n data() {\n return {\n showBorder: false,\n redBG: false,\n boxClass: \"border red\",\n bgColor: \"cyan\",\n };\n },\n computed: {\n boxClasses() {\n return { border: this.showBorder, red: this.redBG };\n },\n },\n}).mount(\"#app\");\n" }, { "path": "ders-1/6-class-style-binding/index.html", "content": "\n\n \n \n \n \n Class Style Binding\n \n \n \n \n
\n \n \n \n
\n \n \n \n\n" }, { "path": "ders-1/6-class-style-binding/style.css", "content": "* {\n margin: 0;\n padding: 0;\n font-family: \"Courier New\", Courier, monospace;\n}\n\nbody {\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 10px;\n}\n\n.box {\n width: 100px;\n height: 100px;\n background-color: #dedede;\n}\n\n.border {\n border: 3px dashed #666;\n}\n\n.red {\n background-color: red;\n}\n\n.green {\n background-color: green;\n}\n\n.blue {\n background-color: blue;\n}\n" }, { "path": "ders-1/7-conditions/app.js", "content": "const app = Vue.createApp({\n data() {\n return {\n showContainer: false,\n counter: 0,\n };\n },\n computed: {\n counterBoxClass() {\n return { \"bg-success text-white\": this.counter > 0, \"bg-danger text-white\": this.counter < 0 };\n },\n },\n}).mount(\"#app\");\n" }, { "path": "ders-1/7-conditions/index.html", "content": "\n\n \n \n \n \n Document\n \n \n \n \n
\n
\n
\n
\n \n

BAŞLANGIÇTA GÖZÜKECEK

\n

SONRA GÖZÜKECEK

\n
\n\n

{{ counter }}

\n \n \n

Counter Negatif

\n

0\">Counter Pozitif

\n

Counter 0

\n\n
\n\n

Counter Negatif

\n

0\">Counter Pozitif

\n

Counter 0

\n
\n
\n
\n
\n \n \n\n" }, { "path": "ders-1/8-loops/app.js", "content": "const app = Vue.createApp({\n data() {\n return {\n todoList: [\n { id: 1, text: \"Vue Bootcamp Hafta 1\", completed: false },\n { id: 2, text: \"Vue Bootcamp Hafta 2\", completed: false },\n { id: 3, text: \"Vue Bootcamp Hafta 3\", completed: false },\n { id: 4, text: \"Vue Bootcamp Hafta 4\", completed: false },\n { id: 5, text: \"Vue Bootcamp Hafta 5\", completed: false },\n { id: 6, text: \"Vue Bootcamp Hafta 6\", completed: false },\n { id: 7, text: \"Vue Bootcamp Hafta 7\", completed: false },\n ],\n };\n },\n methods: {\n addTodo(event) {\n this.todoList.push({\n id: new Date().getTime(),\n text: event.target.value,\n completed: false,\n });\n event.target.value = \"\";\n },\n removeItem(todoItem) {\n this.todoList = this.todoList.filter((todo) => todo !== todoItem);\n },\n },\n computed: {\n completedItemCount() {\n return this.todoList.filter((t) => t.completed).length;\n },\n unCompletedItemCount() {\n return this.todoList.filter((t) => !t.completed).length;\n },\n },\n}).mount(\"#app\");\n" }, { "path": "ders-1/8-loops/index.html", "content": "\n\n \n \n \n \n Loops\n \n \n \n \n \n
\n
\n
\n
\n

Todo List

\n
\n \n
\n
0\">\n
    \n \n
    \n \n \n
    \n \n \n
\n
\n Tamamlanmış item sayısı :{{ completedItemCount }} \n Tamamlanmamış item sayısı :{{ unCompletedItemCount }} \n
\n
\n\n
Henüz eklenmiş bir todo bulunmamaktadır.
\n
\n
\n 
 {{ todoList }} 
\n
\n
\n
\n
\n \n \n\n" }, { "path": "ders-1/odevler/class-list-app/index.html", "content": "\n\n \n \n \n \n Class List App\n \n \n \n
Class List App
\n
\n
\n
\n
    \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
\n\n \n
\n
\n
\n \n\n" }, { "path": "ders-1/odevler/class-list-app/readme.txt", "content": "ÖDEV\nYukarıda bulunan checkbox elementlerine tıklanıldığında, checkbox'ın sahip olduğu Class bilgisini textarea elementine verecek Vue uygulamasını yazınız.\nWhen the above checkbox elements are clicked, write the Vue application that will give the Class information of the checkbox to the textarea element.\n\nİPUCU\nBackground 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.\nBy creating a CSS Class for Background Color, Border, Color, Font Bold, Border Radius, Font Italic, you can control each checkbox with a v-model." }, { "path": "ders-1/odevler/class-list-app/style.css", "content": "* {\n margin: 0;\n padding: 0;\n font-family: Arial, Helvetica, sans-serif;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n\n.bg-success {\n background-color: #6dc454 !important;\n color: #fff;\n}\n\n.bg-danger {\n background-color: #c64b4b !important;\n color: #fff;\n}\n\n.bg-primary {\n background-color: #316bc2 !important;\n color: #fff;\n}\n\n.bg-dark {\n background-color: #333 !important;\n color: #fff;\n}\n\n.text-left {\n text-align: left;\n}\n\n.text-right {\n text-align: right;\n}\n\n.text-center {\n text-align: center;\n}\n\n.text-info {\n color: #05a0f4;\n}\n\n.text-success {\n color: #6dc454;\n}\n\n.text-danger {\n color: #c64b4b;\n}\n\n.text-primary {\n color: #316bc2;\n}\n\n.text-dark {\n color: #333;\n}\n\n.text-muted {\n color: #ccc;\n}\n\n.font-weight-bold {\n font-weight: bold;\n}\n\n.font-italic {\n font-style: italic;\n}\n\n.mt-20 {\n margin-top: 20px;\n}\n\n.mb-20 {\n margin-bottom: 20px;\n}\n\n.ml-20 {\n margin-left: 20px;\n}\n\n.mr-20 {\n margin-right: 20px;\n}\n\n.mt-10 {\n margin-top: 10px;\n}\n\n.mb-10 {\n margin-bottom: 10px;\n}\n\n.ml-10 {\n margin-left: 10px;\n}\n\n.mr-10 {\n margin-right: 10px;\n}\n\n.mt-5 {\n margin-top: 5px;\n}\n\n.mb-5 {\n margin-bottom: 5px;\n}\n\n.ml-5 {\n margin-left: 5px;\n}\n\n.mr-5 {\n margin-right: 5px;\n}\n\n.pt-10 {\n padding-top: 10px;\n}\n\n.pb-10 {\n padding-bottom: 10px;\n}\n\n.pl-10 {\n padding-left: 10px;\n}\n\n.pr-10 {\n padding-right: 10px;\n}\n\n.pt-5 {\n padding-top: 5px;\n}\n\n.pb-5 {\n padding-bottom: 5px;\n}\n\n.pl-5 {\n padding-left: 5px;\n}\n\n.pr-5 {\n padding-right: 5px;\n}\n\n.pt-20 {\n padding-top: 20px;\n}\n\n.pb-20 {\n padding-bottom: 20px;\n}\n\n.pl-20 {\n padding-left: 20px;\n}\n\n.pr-20 {\n padding-right: 20px;\n}\n\n.d-flex {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n}\n\n.justify-content-start {\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: flex-start;\n}\n\n.justify-content-center {\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n}\n\n.justify-content-end {\n -webkit-box-pack: end;\n -ms-flex-pack: end;\n justify-content: flex-end;\n}\n\n.justify-content-between {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n}\n\n.align-items-start {\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n}\n\n.align-items-center {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.align-items-end {\n -webkit-box-align: end;\n -ms-flex-align: end;\n align-items: flex-end;\n}\n\n.w-10 {\n width: 10% !important;\n max-width: 10% !important;\n min-width: 10% !important;\n}\n\n.w-20 {\n width: 20% !important;\n max-width: 20% !important;\n min-width: 20% !important;\n}\n\n.w-30 {\n width: 30% !important;\n max-width: 30% !important;\n min-width: 30% !important;\n}\n\n.w-40 {\n width: 40% !important;\n max-width: 40% !important;\n min-width: 40% !important;\n}\n\n.w-50 {\n width: 50% !important;\n max-width: 50% !important;\n min-width: 50% !important;\n}\n\n.w-60 {\n width: 60% !important;\n max-width: 60% !important;\n min-width: 60% !important;\n}\n\n.w-70 {\n width: 70% !important;\n max-width: 70% !important;\n min-width: 70% !important;\n}\n\n.w-80 {\n width: 80% !important;\n max-width: 80% !important;\n min-width: 80% !important;\n}\n\n.w-90 {\n width: 90% !important;\n max-width: 90% !important;\n min-width: 90% !important;\n}\n\n.w-100 {\n width: 100% !important;\n max-width: 100% !important;\n min-width: 100% !important;\n}\n\n.card {\n background-color: #efefef;\n min-width: 500px;\n padding: 10px;\n border-radius: 3px;\n border-bottom: 1px solid #ccc;\n}\n\n.card-light {\n background-color: #fffafa;\n border: 1px solid #eee;\n border-bottom: 1px solid #ccc;\n}\n\nbutton {\n padding: 10px;\n font-size: 15px;\n outline: none;\n border: none;\n border-radius: 5px;\n border-bottom: 1px solid #ccc;\n background-color: #dad0d0;\n cursor: pointer;\n}\n\nbutton:hover {\n background-color: #f0eded;\n}\n\nbutton:active {\n background-color: white;\n}\n\nbutton.btn-primary {\n background-color: #316bc2;\n color: #fff;\n}\n\nbutton.btn-primary:hover {\n background-color: #5386d3;\n color: #fff;\n}\n\nbutton.btn-primary:active {\n background-color: #7ba3de;\n color: #fff;\n}\n\nbutton.btn-warning {\n background-color: #f5e20c;\n color: #000;\n}\n\nbutton.btn-warning:hover {\n background-color: #f9ee6e;\n color: #000;\n}\n\nbutton.btn-warning:active {\n background-color: #fbf49f;\n color: #000;\n}\n\nbutton.btn-info {\n background-color: #05a0f4;\n color: #fff;\n}\n\nbutton.btn-info:hover {\n background-color: #31b4fb;\n color: #fff;\n}\n\nbutton.btn-info:active {\n background-color: #63c6fc;\n color: #fff;\n}\n\nbutton.btn-success {\n background-color: #6dc454;\n color: #fff;\n}\n\nbutton.btn-success:hover {\n background-color: #8dd17a;\n color: #fff;\n}\n\nbutton.btn-success:active {\n background-color: #aedea0;\n color: #fff;\n}\n\nbutton.btn-danger {\n background-color: #c64b4b;\n color: #fff;\n}\n\nbutton.btn-danger:hover {\n background-color: #d27272;\n color: #fff;\n}\n\nbutton.btn-danger:active {\n background-color: #df9898;\n color: #fff;\n}\n\n.btn-sm {\n padding: 7px;\n font-size: 12px;\n}\n\n.form-group {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n margin-bottom: 10px;\n}\n\np {\n font-size: 14px;\n}\n\nlabel {\n font-size: 15px;\n display: inline-block;\n margin-bottom: 5px;\n}\n\nselect {\n outline: none;\n padding: 5px 10px;\n border: 1px solid #324354;\n}\n\ninput {\n outline: none;\n padding: 5px 10px;\n border: 1px solid #324354;\n}\n\ntextarea {\n outline: none;\n resize: none;\n padding: 5px 10px;\n border: 1px solid #324354;\n}\n\nheader {\n height: 50px;\n margin-bottom: 10px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n background-color: #324354;\n color: #fff;\n font-size: 20px;\n border-bottom: 2px solid #222b34;\n}\n\n.container {\n width: 100%;\n height: auto;\n padding: 10px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: start;\n}\n\nul.list {\n margin-top: 10px;\n list-style-type: none;\n}\n\nul.list li {\n padding: 5px 10px;\n background-color: #efefef;\n margin-bottom: 5px;\n border: 1px solid #ccc;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.pokemon--wars--app--container .game--area {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n width: 100%;\n padding: 10px;\n}\n\n.pokemon--wars--app--container .game--area h2 {\n margin-bottom: 20px;\n}\n\n.pokemon--wars--app--container .selection--container {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n width: 100%;\n padding: 10px;\n margin-bottom: 20px;\n}\n\n.pokemon--wars--app--container .selection--container img {\n -webkit-transition: all 0.5s;\n transition: all 0.5s;\n margin-right: 30px;\n}\n\n.pokemon--wars--app--container .selection--container img:last-child {\n margin-right: none;\n}\n\n.pokemon--wars--app--container .selection--container img.pikachu.selected-pokemon {\n border-radius: 10px;\n background-color: #f8c953c8;\n -webkit-transition: all 0.5s;\n transition: all 0.5s;\n}\n\n.pokemon--wars--app--container .selection--container img.pikachu:hover {\n border-radius: 10px;\n background-color: #f8c953c8;\n -webkit-transition: all 0.5s;\n transition: all 0.5s;\n}\n\n.pokemon--wars--app--container .selection--container img.bulbasaur.selected-pokemon {\n border-radius: 10px;\n background-color: #6ddba8c8;\n}\n\n.pokemon--wars--app--container .selection--container img.bulbasaur:hover {\n border-radius: 10px;\n background-color: #6ddba8c8;\n}\n\n.pokemon--wars--app--container .selection--container img.charmander.selected-pokemon {\n border-radius: 10px;\n background-color: #f7973fc8;\n}\n\n.pokemon--wars--app--container .selection--container img.charmander:hover {\n border-radius: 10px;\n background-color: #f7973fc8;\n}\n\n.pokemon--wars--app--container .selection--container img.squirtle.selected-pokemon {\n border-radius: 10px;\n background-color: #78eeffc8;\n}\n\n.pokemon--wars--app--container .selection--container img.squirtle:hover {\n border-radius: 10px;\n background-color: #78eeffc8;\n}\n\n.pokemon--wars--app--container .fight--area {\n width: 750px;\n}\n\n.pokemon--wars--app--container .health--container {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: end;\n -ms-flex-align: end;\n align-items: flex-end;\n}\n\n.pokemon--wars--app--container .name--health--bar {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.pokemon--wars--app--container .name--health--bar img {\n width: 70px;\n border-radius: 5px;\n}\n\n.pokemon--wars--app--container .name--health--bar img.pikachu {\n background-color: #f8c953c8;\n border: 2px solid #f8c953;\n}\n\n.pokemon--wars--app--container .name--health--bar img.bulbasaur {\n background-color: #6ddba8c8;\n border: 2px solid #6ddba8;\n}\n\n.pokemon--wars--app--container .name--health--bar img.charmander {\n background-color: #f7973fc8;\n border: 2px solid #f7973f;\n}\n\n.pokemon--wars--app--container .name--health--bar img.squirtle {\n background-color: #78eeffc8;\n border: 2px solid #78eeff;\n}\n\n.pokemon--wars--app--container .player--name {\n font-size: 18px;\n font-weight: bold;\n color: #324354;\n}\n\n.pokemon--wars--app--container .vs--container {\n font-size: 35px;\n color: #f7983f;\n font-weight: bold;\n font-style: italic;\n}\n\n.pokemon--wars--app--container progress {\n height: 50px;\n width: 280px;\n}\n\n.pokemon--wars--app--container progress[value] {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n width: 250px;\n height: 35px;\n}\n\n.pokemon--wars--app--container progress.pikachu[value]::-webkit-progress-bar {\n background-color: #f7983f27;\n border: 2px solid #f7983f;\n}\n\n.pokemon--wars--app--container progress.pikachu[value]::-webkit-progress-value {\n background-color: #f7973fc8;\n}\n\n.pokemon--wars--app--container progress.bulbasaur[value]::-webkit-progress-bar {\n background-color: #6ddba827;\n border: 2px solid #6ddba8;\n}\n\n.pokemon--wars--app--container progress.bulbasaur[value]::-webkit-progress-value {\n background-color: #6ddba8c8;\n}\n\n.pokemon--wars--app--container progress.charmander[value]::-webkit-progress-bar {\n background-color: #f7973f27;\n border: 2px solid #f7973f;\n}\n\n.pokemon--wars--app--container progress.charmander[value]::-webkit-progress-value {\n background-color: #f7973fc8;\n}\n\n.pokemon--wars--app--container progress.squirtle[value]::-webkit-progress-bar {\n background-color: #78eeff27;\n border: 2px solid #78eeff;\n}\n\n.pokemon--wars--app--container progress.squirtle[value]::-webkit-progress-value {\n background-color: #78eeffc8;\n}\n\n.pokemon--wars--app--container .attack--button--container {\n margin-top: 50px;\n}\n\n.pokemon--wars--app--container .logger--container {\n width: 400px;\n margin: 0 auto;\n margin-top: 50px;\n}\n\n.pokemon--wars--app--container .logger--container img {\n width: 40px;\n}\n\n.pokemon--wars--app--container .logger--container li {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n border-radius: 5px;\n}\n\n.pokemon--wars--app--container .game--finished--container {\n margin-top: 100px;\n font-size: 50px;\n}\n\n.css--class--app .css--palette {\n list-style-type: none;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.css--class--app .css--palette li {\n width: 50px;\n height: 50px;\n background-color: #ccc;\n border-radius: 50%;\n margin-left: 5px;\n border: 1px solid #bbb;\n}\n\n.css--class--app .result-box {\n width: 100%;\n height: 100px;\n background-color: #18bf71;\n margin-top: 15px;\n border-radius: 5px;\n border-bottom: 1px solid #ccc;\n -webkit-transition: background-color 0.5s;\n transition: background-color 0.5s;\n}\n\n.bookmark--app--container {\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[3];\n grid-template-columns: repeat(3, 1fr);\n grid-gap: 10px;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.bookmark--app--container .bookmark-item {\n width: 400px;\n background-color: #efefef;\n border-bottom: 1px solid #ccc;\n border-radius: 5px;\n padding: 10px;\n}\n\n.bookmark--app--container .bookmark-item .header {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.course--planner-app--container .user--action--container {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.course--planner-app--container .user--action--container .form-group {\n width: 80%;\n margin-right: 5px;\n}\n\n.bet--coupon--app .competition-list {\n padding: 0;\n border-radius: 5px;\n border: 1px solid #efefef;\n border-bottom: 1px solid #ccc;\n}\n\n.bet--coupon--app .my-coupon {\n padding: 0;\n border-radius: 5px;\n border: 1px solid #efefef;\n border-bottom: 1px solid #ccc;\n min-width: 400px !important;\n}\n\n.bet--coupon--app .my-coupon .card--header {\n background-color: #05a0f4 !important;\n}\n\n.bet--coupon--app .card--header {\n background-color: #324354 !important;\n color: #fff;\n border-top-left-radius: 5px;\n border-top-right-radius: 5px;\n padding: 10px;\n}\n\n.bet--coupon--app .card--body {\n background-color: #fff !important;\n padding: 10px;\n}\n\n.bet--coupon--app .competition-item {\n margin-bottom: 5px;\n padding: 10px 0;\n border-bottom: 1px solid #efefef;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.bet--coupon--app .competition-item:last-child {\n border-bottom: none;\n}\n\n.bet--coupon--app .competition-item .info--container {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: start;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n}\n\n.bet--coupon--app .competition-item .rates {\n width: 150px;\n text-align: right;\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[3];\n grid-template-columns: repeat(3, 1fr);\n}\n\n.bet--coupon--app .coupon-item {\n border-bottom: 1px solid #efefef;\n margin-bottom: 5px;\n padding: 10px 0;\n}\n\n.bet--coupon--app .coupon-item:last-child {\n border-bottom: none;\n}\n\n.bet--coupon--app .coupon--total--container {\n max-width: 300px;\n}\n\n.bet--coupon--app .coupon--total--container .my-coupon {\n min-width: 300px !important;\n}\n\n.bet--coupon--app .coupon--total--container .multiply--container {\n min-width: 300px !important;\n}\n\n.bet--coupon--app .coupon--total--container .multiply--container button:not(:last-child) {\n margin-right: 5px;\n margin-bottom: 5px;\n}\n\n.bet--coupon--app .multiply--buttons {\n -ms-flex-wrap: wrap;\n flex-wrap: wrap;\n}\n\n.contact--card--app {\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[4];\n grid-template-columns: repeat(4, 1fr);\n grid-gap: 20px;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.contact--card--app .contact-item {\n width: 180px;\n min-height: 282px;\n border-radius: 5px;\n background-color: #fff !important;\n}\n\n.contact--card--app .contact-item .invitation--header {\n width: 180px;\n height: 62px;\n background: url(\"https://static-exp1.licdn.com/sc/h/cpemy7gsm8bzfb5nnbbnswfdm\");\n background-size: cover;\n background-repeat: no-repeat;\n background-position: center;\n}\n\n.contact--card--app .contact-item .contact--info--container {\n padding: 10px;\n margin-top: 45px;\n}\n\n.contact--card--app .contact-item .contact--info--container p {\n font-size: 15px !important;\n}\n\n.contact--card--app .contact-item .contact--info--container a {\n font-size: 15px !important;\n}\n\n.contact--card--app .contact-item .action--button--container {\n margin-top: 10px;\n}\n\n.contact--card--app .contact-item .contact--image {\n border-radius: 50%;\n width: 100px;\n height: 100px;\n}\n\n.comment--like--dislike--app {\n width: 750px;\n}\n\n.chat--app--container .card {\n padding: 0;\n border-radius: 5px;\n border: 1px solid #efefef;\n border-bottom: 1px solid #ccc;\n max-width: 400px !important;\n}\n\n.chat--app--container .card .card--header {\n background-color: #316bc2 !important;\n color: #fff;\n border-top-left-radius: 5px;\n border-top-right-radius: 5px;\n padding: 10px;\n}\n\n.chat--app--container .card .card--body {\n background-color: #fff !important;\n padding: 10px;\n}\n\n.chat--app--container .card .card--body .active-user-item {\n margin-bottom: 20px;\n}\n\n.chat--app--container .card .card--body .active-user-item:last-child {\n margin-bottom: 0;\n}\n\n.chat--app--container .card .card--body .active-user-item .badge {\n background-color: #efefef;\n color: #333;\n text-transform: uppercase;\n padding: 10px;\n width: 40px;\n height: 40px;\n border-radius: 50%;\n}\n\n.chat--app--container .card .messages {\n list-style-type: none;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: flex-start;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n padding: 10px;\n height: calc(100vh - 200px);\n overflow-y: scroll;\n}\n\n.chat--app--container .card .messages li {\n max-width: 300px;\n padding: 5px 10px;\n margin-bottom: 15px;\n border-bottom: 1px solid #ccc;\n border-radius: 10px;\n background-color: #fffafa;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.chat--app--container .card .messages li small {\n margin-top: 10px;\n -ms-flex-item-align: end;\n align-self: flex-end;\n font-size: 12px;\n color: #ccc;\n font-style: italic;\n}\n\n.chat--app--container .card .messages li.current-user {\n -ms-flex-item-align: end;\n align-self: flex-end;\n background-color: #05a0f4;\n color: #fff;\n}\n\n.chat--app--container .card .text-container {\n margin-top: 30px;\n}\n\n.chat--app--container .card .text-container input {\n border: none;\n padding: 10px;\n height: 37px;\n width: calc(500px - 70px);\n border-bottom-left-radius: 5px;\n}\n\n.chat--app--container .card .text-container button {\n border-radius: 0 !important;\n margin-bottom: 0;\n border: none;\n border-bottom-right-radius: 5px !important;\n}\n\n.class--list--app .class-list {\n list-style-type: none !important;\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[3];\n grid-template-columns: repeat(3, 1fr);\n}\n\n.class--list--app .class-list li {\n margin-bottom: 5px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.class--list--app textarea {\n width: 100%;\n margin-top: 20px;\n}\n\n.rate--calculator--app .rate-list {\n list-style-type: none !important;\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[6];\n grid-template-columns: repeat(6, 1fr);\n}\n\n.rate--calculator--app .rate-list li {\n margin-bottom: 5px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.rate--calculator--app input#money {\n margin-top: 15px;\n}\n\n.rate--calculator--app .rates-container {\n margin-top: 20px;\n list-style-type: none;\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[3];\n grid-template-columns: repeat(3, 1fr);\n}\n\n.rate--calculator--app .rates-container li {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n margin-bottom: 5px;\n}\n\n.rate--calculator--app .rates-container li:last-child {\n margin-bottom: 0;\n}\n\n.rate--calculator--app .rates-container li strong {\n margin-right: 5px;\n}\n/*# sourceMappingURL=style.css.map */" }, { "path": "ders-1/odevler/comment-like-dislike-app/index.html", "content": "\n\n \n \n \n \n Comment Like/Dislike App\n \n \n \n
Comment Like/Dislike App
\n
\n \n
\n \n\n" }, { "path": "ders-1/odevler/comment-like-dislike-app/readme.txt", "content": "ÖDEV\n1 - ) data üzerinde bulunan bir comments isimli bir Array üzerinden \".comment--item\" elementini v-for ile döndürünüz.\n1 - ) iterate the \".comment - item\" element with v-for over an Array named comments on the data.\n2 - ) 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.\n2 - ) 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).\n\nİPUCU:\nBeğeni sayılarını comments içerisinde tutabilirsiniz.\nYou can keep the number of likes in the comments.\n\nNOT:\nBeğeni sayılarının sürekli artmasının bir önemi yoktur.\nIt doesn't matter that the number of likes is constantly increasing." }, { "path": "ders-1/odevler/comment-like-dislike-app/style.css", "content": "* {\n margin: 0;\n padding: 0;\n font-family: Arial, Helvetica, sans-serif;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n\n.bg-success {\n background-color: #6dc454 !important;\n color: #fff;\n}\n\n.bg-danger {\n background-color: #c64b4b !important;\n color: #fff;\n}\n\n.bg-primary {\n background-color: #316bc2 !important;\n color: #fff;\n}\n\n.bg-dark {\n background-color: #333 !important;\n color: #fff;\n}\n\n.text-left {\n text-align: left;\n}\n\n.text-right {\n text-align: right;\n}\n\n.text-center {\n text-align: center;\n}\n\n.text-info {\n color: #05a0f4;\n}\n\n.text-success {\n color: #6dc454;\n}\n\n.text-danger {\n color: #c64b4b;\n}\n\n.text-primary {\n color: #316bc2;\n}\n\n.text-dark {\n color: #333;\n}\n\n.text-muted {\n color: #ccc;\n}\n\n.font-weight-bold {\n font-weight: bold;\n}\n\n.font-italic {\n font-style: italic;\n}\n\n.mt-20 {\n margin-top: 20px;\n}\n\n.mb-20 {\n margin-bottom: 20px;\n}\n\n.ml-20 {\n margin-left: 20px;\n}\n\n.mr-20 {\n margin-right: 20px;\n}\n\n.mt-10 {\n margin-top: 10px;\n}\n\n.mb-10 {\n margin-bottom: 10px;\n}\n\n.ml-10 {\n margin-left: 10px;\n}\n\n.mr-10 {\n margin-right: 10px;\n}\n\n.mt-5 {\n margin-top: 5px;\n}\n\n.mb-5 {\n margin-bottom: 5px;\n}\n\n.ml-5 {\n margin-left: 5px;\n}\n\n.mr-5 {\n margin-right: 5px;\n}\n\n.pt-10 {\n padding-top: 10px;\n}\n\n.pb-10 {\n padding-bottom: 10px;\n}\n\n.pl-10 {\n padding-left: 10px;\n}\n\n.pr-10 {\n padding-right: 10px;\n}\n\n.pt-5 {\n padding-top: 5px;\n}\n\n.pb-5 {\n padding-bottom: 5px;\n}\n\n.pl-5 {\n padding-left: 5px;\n}\n\n.pr-5 {\n padding-right: 5px;\n}\n\n.pt-20 {\n padding-top: 20px;\n}\n\n.pb-20 {\n padding-bottom: 20px;\n}\n\n.pl-20 {\n padding-left: 20px;\n}\n\n.pr-20 {\n padding-right: 20px;\n}\n\n.d-flex {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n}\n\n.justify-content-start {\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: flex-start;\n}\n\n.justify-content-center {\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n}\n\n.justify-content-end {\n -webkit-box-pack: end;\n -ms-flex-pack: end;\n justify-content: flex-end;\n}\n\n.justify-content-between {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n}\n\n.align-items-start {\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n}\n\n.align-items-center {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.align-items-end {\n -webkit-box-align: end;\n -ms-flex-align: end;\n align-items: flex-end;\n}\n\n.w-10 {\n width: 10% !important;\n max-width: 10% !important;\n min-width: 10% !important;\n}\n\n.w-20 {\n width: 20% !important;\n max-width: 20% !important;\n min-width: 20% !important;\n}\n\n.w-30 {\n width: 30% !important;\n max-width: 30% !important;\n min-width: 30% !important;\n}\n\n.w-40 {\n width: 40% !important;\n max-width: 40% !important;\n min-width: 40% !important;\n}\n\n.w-50 {\n width: 50% !important;\n max-width: 50% !important;\n min-width: 50% !important;\n}\n\n.w-60 {\n width: 60% !important;\n max-width: 60% !important;\n min-width: 60% !important;\n}\n\n.w-70 {\n width: 70% !important;\n max-width: 70% !important;\n min-width: 70% !important;\n}\n\n.w-80 {\n width: 80% !important;\n max-width: 80% !important;\n min-width: 80% !important;\n}\n\n.w-90 {\n width: 90% !important;\n max-width: 90% !important;\n min-width: 90% !important;\n}\n\n.w-100 {\n width: 100% !important;\n max-width: 100% !important;\n min-width: 100% !important;\n}\n\n.card {\n background-color: #efefef;\n min-width: 500px;\n padding: 10px;\n border-radius: 3px;\n border-bottom: 1px solid #ccc;\n}\n\n.card-light {\n background-color: #fffafa;\n border: 1px solid #eee;\n border-bottom: 1px solid #ccc;\n}\n\nbutton {\n padding: 10px;\n font-size: 15px;\n outline: none;\n border: none;\n border-radius: 5px;\n border-bottom: 1px solid #ccc;\n background-color: #dad0d0;\n cursor: pointer;\n}\n\nbutton:hover {\n background-color: #f0eded;\n}\n\nbutton:active {\n background-color: white;\n}\n\nbutton.btn-primary {\n background-color: #316bc2;\n color: #fff;\n}\n\nbutton.btn-primary:hover {\n background-color: #5386d3;\n color: #fff;\n}\n\nbutton.btn-primary:active {\n background-color: #7ba3de;\n color: #fff;\n}\n\nbutton.btn-warning {\n background-color: #f5e20c;\n color: #000;\n}\n\nbutton.btn-warning:hover {\n background-color: #f9ee6e;\n color: #000;\n}\n\nbutton.btn-warning:active {\n background-color: #fbf49f;\n color: #000;\n}\n\nbutton.btn-info {\n background-color: #05a0f4;\n color: #fff;\n}\n\nbutton.btn-info:hover {\n background-color: #31b4fb;\n color: #fff;\n}\n\nbutton.btn-info:active {\n background-color: #63c6fc;\n color: #fff;\n}\n\nbutton.btn-success {\n background-color: #6dc454;\n color: #fff;\n}\n\nbutton.btn-success:hover {\n background-color: #8dd17a;\n color: #fff;\n}\n\nbutton.btn-success:active {\n background-color: #aedea0;\n color: #fff;\n}\n\nbutton.btn-danger {\n background-color: #c64b4b;\n color: #fff;\n}\n\nbutton.btn-danger:hover {\n background-color: #d27272;\n color: #fff;\n}\n\nbutton.btn-danger:active {\n background-color: #df9898;\n color: #fff;\n}\n\n.btn-sm {\n padding: 7px;\n font-size: 12px;\n}\n\n.form-group {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n margin-bottom: 10px;\n}\n\np {\n font-size: 14px;\n}\n\nlabel {\n font-size: 15px;\n display: inline-block;\n margin-bottom: 5px;\n}\n\nselect {\n outline: none;\n padding: 5px 10px;\n border: 1px solid #324354;\n}\n\ninput {\n outline: none;\n padding: 5px 10px;\n border: 1px solid #324354;\n}\n\ntextarea {\n outline: none;\n resize: none;\n padding: 5px 10px;\n border: 1px solid #324354;\n}\n\nheader {\n height: 50px;\n margin-bottom: 10px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n background-color: #324354;\n color: #fff;\n font-size: 20px;\n border-bottom: 2px solid #222b34;\n}\n\n.container {\n width: 100%;\n height: auto;\n padding: 10px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: start;\n}\n\nul.list {\n margin-top: 10px;\n list-style-type: none;\n}\n\nul.list li {\n padding: 5px 10px;\n background-color: #efefef;\n margin-bottom: 5px;\n border: 1px solid #ccc;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.pokemon--wars--app--container .game--area {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n width: 100%;\n padding: 10px;\n}\n\n.pokemon--wars--app--container .game--area h2 {\n margin-bottom: 20px;\n}\n\n.pokemon--wars--app--container .selection--container {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n width: 100%;\n padding: 10px;\n margin-bottom: 20px;\n}\n\n.pokemon--wars--app--container .selection--container img {\n -webkit-transition: all 0.5s;\n transition: all 0.5s;\n margin-right: 30px;\n}\n\n.pokemon--wars--app--container .selection--container img:last-child {\n margin-right: none;\n}\n\n.pokemon--wars--app--container .selection--container img.pikachu.selected-pokemon {\n border-radius: 10px;\n background-color: #f8c953c8;\n -webkit-transition: all 0.5s;\n transition: all 0.5s;\n}\n\n.pokemon--wars--app--container .selection--container img.pikachu:hover {\n border-radius: 10px;\n background-color: #f8c953c8;\n -webkit-transition: all 0.5s;\n transition: all 0.5s;\n}\n\n.pokemon--wars--app--container .selection--container img.bulbasaur.selected-pokemon {\n border-radius: 10px;\n background-color: #6ddba8c8;\n}\n\n.pokemon--wars--app--container .selection--container img.bulbasaur:hover {\n border-radius: 10px;\n background-color: #6ddba8c8;\n}\n\n.pokemon--wars--app--container .selection--container img.charmander.selected-pokemon {\n border-radius: 10px;\n background-color: #f7973fc8;\n}\n\n.pokemon--wars--app--container .selection--container img.charmander:hover {\n border-radius: 10px;\n background-color: #f7973fc8;\n}\n\n.pokemon--wars--app--container .selection--container img.squirtle.selected-pokemon {\n border-radius: 10px;\n background-color: #78eeffc8;\n}\n\n.pokemon--wars--app--container .selection--container img.squirtle:hover {\n border-radius: 10px;\n background-color: #78eeffc8;\n}\n\n.pokemon--wars--app--container .fight--area {\n width: 750px;\n}\n\n.pokemon--wars--app--container .health--container {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: end;\n -ms-flex-align: end;\n align-items: flex-end;\n}\n\n.pokemon--wars--app--container .name--health--bar {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.pokemon--wars--app--container .name--health--bar img {\n width: 70px;\n border-radius: 5px;\n}\n\n.pokemon--wars--app--container .name--health--bar img.pikachu {\n background-color: #f8c953c8;\n border: 2px solid #f8c953;\n}\n\n.pokemon--wars--app--container .name--health--bar img.bulbasaur {\n background-color: #6ddba8c8;\n border: 2px solid #6ddba8;\n}\n\n.pokemon--wars--app--container .name--health--bar img.charmander {\n background-color: #f7973fc8;\n border: 2px solid #f7973f;\n}\n\n.pokemon--wars--app--container .name--health--bar img.squirtle {\n background-color: #78eeffc8;\n border: 2px solid #78eeff;\n}\n\n.pokemon--wars--app--container .player--name {\n font-size: 18px;\n font-weight: bold;\n color: #324354;\n}\n\n.pokemon--wars--app--container .vs--container {\n font-size: 35px;\n color: #f7983f;\n font-weight: bold;\n font-style: italic;\n}\n\n.pokemon--wars--app--container progress {\n height: 50px;\n width: 280px;\n}\n\n.pokemon--wars--app--container progress[value] {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n width: 250px;\n height: 35px;\n}\n\n.pokemon--wars--app--container progress.pikachu[value]::-webkit-progress-bar {\n background-color: #f7983f27;\n border: 2px solid #f7983f;\n}\n\n.pokemon--wars--app--container progress.pikachu[value]::-webkit-progress-value {\n background-color: #f7973fc8;\n}\n\n.pokemon--wars--app--container progress.bulbasaur[value]::-webkit-progress-bar {\n background-color: #6ddba827;\n border: 2px solid #6ddba8;\n}\n\n.pokemon--wars--app--container progress.bulbasaur[value]::-webkit-progress-value {\n background-color: #6ddba8c8;\n}\n\n.pokemon--wars--app--container progress.charmander[value]::-webkit-progress-bar {\n background-color: #f7973f27;\n border: 2px solid #f7973f;\n}\n\n.pokemon--wars--app--container progress.charmander[value]::-webkit-progress-value {\n background-color: #f7973fc8;\n}\n\n.pokemon--wars--app--container progress.squirtle[value]::-webkit-progress-bar {\n background-color: #78eeff27;\n border: 2px solid #78eeff;\n}\n\n.pokemon--wars--app--container progress.squirtle[value]::-webkit-progress-value {\n background-color: #78eeffc8;\n}\n\n.pokemon--wars--app--container .attack--button--container {\n margin-top: 50px;\n}\n\n.pokemon--wars--app--container .logger--container {\n width: 400px;\n margin: 0 auto;\n margin-top: 50px;\n}\n\n.pokemon--wars--app--container .logger--container img {\n width: 40px;\n}\n\n.pokemon--wars--app--container .logger--container li {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n border-radius: 5px;\n}\n\n.pokemon--wars--app--container .game--finished--container {\n margin-top: 100px;\n font-size: 50px;\n}\n\n.css--class--app .css--palette {\n list-style-type: none;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.css--class--app .css--palette li {\n width: 50px;\n height: 50px;\n background-color: #ccc;\n border-radius: 50%;\n margin-left: 5px;\n border: 1px solid #bbb;\n}\n\n.css--class--app .result-box {\n width: 100%;\n height: 100px;\n background-color: #18bf71;\n margin-top: 15px;\n border-radius: 5px;\n border-bottom: 1px solid #ccc;\n -webkit-transition: background-color 0.5s;\n transition: background-color 0.5s;\n}\n\n.bookmark--app--container {\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr) [3];\n grid-template-columns: repeat(3, 1fr);\n grid-gap: 10px;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.bookmark--app--container .bookmark-item {\n width: 400px;\n background-color: #efefef;\n border-bottom: 1px solid #ccc;\n border-radius: 5px;\n padding: 10px;\n}\n\n.bookmark--app--container .bookmark-item .header {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.course--planner-app--container .user--action--container {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.course--planner-app--container .user--action--container .form-group {\n width: 80%;\n margin-right: 5px;\n}\n\n.bet--coupon--app .competition-list {\n padding: 0;\n border-radius: 5px;\n border: 1px solid #efefef;\n border-bottom: 1px solid #ccc;\n}\n\n.bet--coupon--app .my-coupon {\n padding: 0;\n border-radius: 5px;\n border: 1px solid #efefef;\n border-bottom: 1px solid #ccc;\n min-width: 400px !important;\n}\n\n.bet--coupon--app .my-coupon .card--header {\n background-color: #05a0f4 !important;\n}\n\n.bet--coupon--app .card--header {\n background-color: #324354 !important;\n color: #fff;\n border-top-left-radius: 5px;\n border-top-right-radius: 5px;\n padding: 10px;\n}\n\n.bet--coupon--app .card--body {\n background-color: #fff !important;\n padding: 10px;\n}\n\n.bet--coupon--app .competition-item {\n margin-bottom: 5px;\n padding: 10px 0;\n border-bottom: 1px solid #efefef;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.bet--coupon--app .competition-item:last-child {\n border-bottom: none;\n}\n\n.bet--coupon--app .competition-item .info--container {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: start;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n}\n\n.bet--coupon--app .competition-item .rates {\n width: 150px;\n text-align: right;\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr) [3];\n grid-template-columns: repeat(3, 1fr);\n}\n\n.bet--coupon--app .coupon-item {\n border-bottom: 1px solid #efefef;\n margin-bottom: 5px;\n padding: 10px 0;\n}\n\n.bet--coupon--app .coupon-item:last-child {\n border-bottom: none;\n}\n\n.bet--coupon--app .coupon--total--container {\n max-width: 300px;\n}\n\n.bet--coupon--app .coupon--total--container .my-coupon {\n min-width: 300px !important;\n}\n\n.bet--coupon--app .coupon--total--container .multiply--container {\n min-width: 300px !important;\n}\n\n.bet--coupon--app .coupon--total--container .multiply--container button:not(:last-child) {\n margin-right: 5px;\n margin-bottom: 5px;\n}\n\n.bet--coupon--app .multiply--buttons {\n -ms-flex-wrap: wrap;\n flex-wrap: wrap;\n}\n\n.contact--card--app {\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr) [4];\n grid-template-columns: repeat(4, 1fr);\n grid-gap: 20px;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.contact--card--app .contact-item {\n width: 180px;\n min-height: 282px;\n border-radius: 5px;\n background-color: #fff !important;\n}\n\n.contact--card--app .contact-item .invitation--header {\n width: 180px;\n height: 62px;\n background: url(\"https://static-exp1.licdn.com/sc/h/cpemy7gsm8bzfb5nnbbnswfdm\");\n background-size: cover;\n background-repeat: no-repeat;\n background-position: center;\n}\n\n.contact--card--app .contact-item .contact--info--container {\n padding: 10px;\n margin-top: 45px;\n}\n\n.contact--card--app .contact-item .contact--info--container p {\n font-size: 15px !important;\n}\n\n.contact--card--app .contact-item .contact--info--container a {\n font-size: 15px !important;\n}\n\n.contact--card--app .contact-item .action--button--container {\n margin-top: 10px;\n}\n\n.contact--card--app .contact-item .contact--image {\n border-radius: 50%;\n width: 100px;\n height: 100px;\n}\n\n.comment--like--dislike--app {\n width: 750px;\n}\n\n.chat--app--container .card {\n padding: 0;\n border-radius: 5px;\n border: 1px solid #efefef;\n border-bottom: 1px solid #ccc;\n max-width: 400px !important;\n}\n\n.chat--app--container .card .card--header {\n background-color: #316bc2 !important;\n color: #fff;\n border-top-left-radius: 5px;\n border-top-right-radius: 5px;\n padding: 10px;\n}\n\n.chat--app--container .card .card--body {\n background-color: #fff !important;\n padding: 10px;\n}\n\n.chat--app--container .card .card--body .active-user-item {\n margin-bottom: 20px;\n}\n\n.chat--app--container .card .card--body .active-user-item:last-child {\n margin-bottom: 0;\n}\n\n.chat--app--container .card .card--body .active-user-item .badge {\n background-color: #efefef;\n color: #333;\n text-transform: uppercase;\n padding: 10px;\n width: 40px;\n height: 40px;\n border-radius: 50%;\n}\n\n.chat--app--container .card .messages {\n list-style-type: none;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: flex-start;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n padding: 10px;\n height: calc(100vh - 200px);\n overflow-y: scroll;\n}\n\n.chat--app--container .card .messages li {\n max-width: 300px;\n padding: 5px 10px;\n margin-bottom: 15px;\n border-bottom: 1px solid #ccc;\n border-radius: 10px;\n background-color: #fffafa;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.chat--app--container .card .messages li small {\n margin-top: 10px;\n -ms-flex-item-align: end;\n align-self: flex-end;\n font-size: 12px;\n color: #ccc;\n font-style: italic;\n}\n\n.chat--app--container .card .messages li.current-user {\n -ms-flex-item-align: end;\n align-self: flex-end;\n background-color: #05a0f4;\n color: #fff;\n}\n\n.chat--app--container .card .text-container {\n margin-top: 30px;\n}\n\n.chat--app--container .card .text-container input {\n border: none;\n padding: 10px;\n height: 37px;\n width: calc(500px - 70px);\n border-bottom-left-radius: 5px;\n}\n\n.chat--app--container .card .text-container button {\n border-radius: 0 !important;\n margin-bottom: 0;\n border: none;\n border-bottom-right-radius: 5px !important;\n}\n\n.class--list--app .class-list {\n list-style-type: none !important;\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr) [3];\n grid-template-columns: repeat(3, 1fr);\n}\n\n.class--list--app .class-list li {\n margin-bottom: 5px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.class--list--app textarea {\n width: 100%;\n margin-top: 20px;\n}\n\n.rate--calculator--app .rate-list {\n list-style-type: none !important;\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr) [6];\n grid-template-columns: repeat(6, 1fr);\n}\n\n.rate--calculator--app .rate-list li {\n margin-bottom: 5px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.rate--calculator--app input#money {\n margin-top: 15px;\n}\n\n.rate--calculator--app .rates-container {\n margin-top: 20px;\n list-style-type: none;\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr) [3];\n grid-template-columns: repeat(3, 1fr);\n}\n\n.rate--calculator--app .rates-container li {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n margin-bottom: 5px;\n}\n\n.rate--calculator--app .rates-container li:last-child {\n margin-bottom: 0;\n}\n\n.rate--calculator--app .rates-container li strong {\n margin-right: 5px;\n}\n/*# sourceMappingURL=style.css.map */\n" }, { "path": "ders-1/odevler/cozum-1/index.html", "content": "\n\n \n \n \n \n Ödev 1 | Template üzerine Veri Yazdırmak\n \n \n \n \n
Ödev 1 | Template Üzerine Veri Yazdırmak
\n\n
\n
\n \n

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

\n\n \n

{{ age * 5 }}

\n\n \n \n

{{ randomNumber() }}

\n\n \n \n\n \n
\n \n \n
\n
\n
\n\n \n \n\n" }, { "path": "ders-1/odevler/cozum-1/style.css", "content": "* {\n margin: 0;\n padding: 0;\n font-family: Arial, Helvetica, sans-serif;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n\n.bg-success {\n background-color: #6dc454 !important;\n color: #fff;\n}\n\n.bg-danger {\n background-color: #c64b4b !important;\n color: #fff;\n}\n\n.bg-primary {\n background-color: #316bc2 !important;\n color: #fff;\n}\n\n.bg-dark {\n background-color: #333 !important;\n color: #fff;\n}\n\n.text-left {\n text-align: left;\n}\n\n.text-right {\n text-align: right;\n}\n\n.text-center {\n text-align: center;\n}\n\n.text-info {\n color: #05a0f4;\n}\n\n.text-success {\n color: #6dc454;\n}\n\n.text-danger {\n color: #c64b4b;\n}\n\n.text-primary {\n color: #316bc2;\n}\n\n.text-dark {\n color: #333;\n}\n\n.text-muted {\n color: #ccc;\n}\n\n.font-weight-bold {\n font-weight: bold;\n}\n\n.font-italic {\n font-style: italic;\n}\n\n.mt-20 {\n margin-top: 20px;\n}\n\n.mb-20 {\n margin-bottom: 20px;\n}\n\n.ml-20 {\n margin-left: 20px;\n}\n\n.mr-20 {\n margin-right: 20px;\n}\n\n.mt-10 {\n margin-top: 10px;\n}\n\n.mb-10 {\n margin-bottom: 10px;\n}\n\n.ml-10 {\n margin-left: 10px;\n}\n\n.mr-10 {\n margin-right: 10px;\n}\n\n.mt-5 {\n margin-top: 5px;\n}\n\n.mb-5 {\n margin-bottom: 5px;\n}\n\n.ml-5 {\n margin-left: 5px;\n}\n\n.mr-5 {\n margin-right: 5px;\n}\n\n.pt-10 {\n padding-top: 10px;\n}\n\n.pb-10 {\n padding-bottom: 10px;\n}\n\n.pl-10 {\n padding-left: 10px;\n}\n\n.pr-10 {\n padding-right: 10px;\n}\n\n.pt-5 {\n padding-top: 5px;\n}\n\n.pb-5 {\n padding-bottom: 5px;\n}\n\n.pl-5 {\n padding-left: 5px;\n}\n\n.pr-5 {\n padding-right: 5px;\n}\n\n.pt-20 {\n padding-top: 20px;\n}\n\n.pb-20 {\n padding-bottom: 20px;\n}\n\n.pl-20 {\n padding-left: 20px;\n}\n\n.pr-20 {\n padding-right: 20px;\n}\n\n.d-flex {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n}\n\n.justify-content-start {\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: flex-start;\n}\n\n.justify-content-center {\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n}\n\n.justify-content-end {\n -webkit-box-pack: end;\n -ms-flex-pack: end;\n justify-content: flex-end;\n}\n\n.justify-content-between {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n}\n\n.align-items-start {\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n}\n\n.align-items-center {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.align-items-end {\n -webkit-box-align: end;\n -ms-flex-align: end;\n align-items: flex-end;\n}\n\n.w-10 {\n width: 10% !important;\n max-width: 10% !important;\n min-width: 10% !important;\n}\n\n.w-20 {\n width: 20% !important;\n max-width: 20% !important;\n min-width: 20% !important;\n}\n\n.w-30 {\n width: 30% !important;\n max-width: 30% !important;\n min-width: 30% !important;\n}\n\n.w-40 {\n width: 40% !important;\n max-width: 40% !important;\n min-width: 40% !important;\n}\n\n.w-50 {\n width: 50% !important;\n max-width: 50% !important;\n min-width: 50% !important;\n}\n\n.w-60 {\n width: 60% !important;\n max-width: 60% !important;\n min-width: 60% !important;\n}\n\n.w-70 {\n width: 70% !important;\n max-width: 70% !important;\n min-width: 70% !important;\n}\n\n.w-80 {\n width: 80% !important;\n max-width: 80% !important;\n min-width: 80% !important;\n}\n\n.w-90 {\n width: 90% !important;\n max-width: 90% !important;\n min-width: 90% !important;\n}\n\n.w-100 {\n width: 100% !important;\n max-width: 100% !important;\n min-width: 100% !important;\n}\n\n.card {\n background-color: #efefef;\n min-width: 500px;\n padding: 10px;\n border-radius: 3px;\n border-bottom: 1px solid #ccc;\n}\n\n.card-light {\n background-color: #fffafa;\n border: 1px solid #eee;\n border-bottom: 1px solid #ccc;\n}\n\nbutton {\n padding: 10px;\n font-size: 15px;\n outline: none;\n border: none;\n border-radius: 5px;\n border-bottom: 1px solid #ccc;\n background-color: #dad0d0;\n cursor: pointer;\n}\n\nbutton:hover {\n background-color: #f0eded;\n}\n\nbutton:active {\n background-color: white;\n}\n\nbutton.btn-primary {\n background-color: #316bc2;\n color: #fff;\n}\n\nbutton.btn-primary:hover {\n background-color: #5386d3;\n color: #fff;\n}\n\nbutton.btn-primary:active {\n background-color: #7ba3de;\n color: #fff;\n}\n\nbutton.btn-warning {\n background-color: #f5e20c;\n color: #000;\n}\n\nbutton.btn-warning:hover {\n background-color: #f9ee6e;\n color: #000;\n}\n\nbutton.btn-warning:active {\n background-color: #fbf49f;\n color: #000;\n}\n\nbutton.btn-info {\n background-color: #05a0f4;\n color: #fff;\n}\n\nbutton.btn-info:hover {\n background-color: #31b4fb;\n color: #fff;\n}\n\nbutton.btn-info:active {\n background-color: #63c6fc;\n color: #fff;\n}\n\nbutton.btn-success {\n background-color: #6dc454;\n color: #fff;\n}\n\nbutton.btn-success:hover {\n background-color: #8dd17a;\n color: #fff;\n}\n\nbutton.btn-success:active {\n background-color: #aedea0;\n color: #fff;\n}\n\nbutton.btn-danger {\n background-color: #c64b4b;\n color: #fff;\n}\n\nbutton.btn-danger:hover {\n background-color: #d27272;\n color: #fff;\n}\n\nbutton.btn-danger:active {\n background-color: #df9898;\n color: #fff;\n}\n\n.btn-sm {\n padding: 7px;\n font-size: 12px;\n}\n\n.form-group {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n margin-bottom: 10px;\n}\n\np {\n font-size: 14px;\n}\n\nlabel {\n font-size: 15px;\n display: inline-block;\n margin-bottom: 5px;\n}\n\nselect {\n outline: none;\n padding: 5px 10px;\n border: 1px solid #324354;\n}\n\ninput {\n outline: none;\n padding: 5px 10px;\n border: 1px solid #324354;\n}\n\ntextarea {\n outline: none;\n resize: none;\n padding: 5px 10px;\n border: 1px solid #324354;\n}\n\nheader {\n height: 50px;\n margin-bottom: 10px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n background-color: #324354;\n color: #fff;\n font-size: 20px;\n border-bottom: 2px solid #222b34;\n}\n\n.container {\n width: 100%;\n height: auto;\n padding: 10px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: start;\n}\n\nul.list {\n margin-top: 10px;\n list-style-type: none;\n}\n\nul.list li {\n padding: 5px 10px;\n background-color: #efefef;\n margin-bottom: 5px;\n border: 1px solid #ccc;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.pokemon--wars--app--container .game--area {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n width: 100%;\n padding: 10px;\n}\n\n.pokemon--wars--app--container .game--area h2 {\n margin-bottom: 20px;\n}\n\n.pokemon--wars--app--container .selection--container {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n width: 100%;\n padding: 10px;\n margin-bottom: 20px;\n}\n\n.pokemon--wars--app--container .selection--container img {\n -webkit-transition: all 0.5s;\n transition: all 0.5s;\n margin-right: 30px;\n}\n\n.pokemon--wars--app--container .selection--container img:last-child {\n margin-right: none;\n}\n\n.pokemon--wars--app--container .selection--container img.pikachu.selected-pokemon {\n border-radius: 10px;\n background-color: #f8c953c8;\n -webkit-transition: all 0.5s;\n transition: all 0.5s;\n}\n\n.pokemon--wars--app--container .selection--container img.pikachu:hover {\n border-radius: 10px;\n background-color: #f8c953c8;\n -webkit-transition: all 0.5s;\n transition: all 0.5s;\n}\n\n.pokemon--wars--app--container .selection--container img.bulbasaur.selected-pokemon {\n border-radius: 10px;\n background-color: #6ddba8c8;\n}\n\n.pokemon--wars--app--container .selection--container img.bulbasaur:hover {\n border-radius: 10px;\n background-color: #6ddba8c8;\n}\n\n.pokemon--wars--app--container .selection--container img.charmander.selected-pokemon {\n border-radius: 10px;\n background-color: #f7973fc8;\n}\n\n.pokemon--wars--app--container .selection--container img.charmander:hover {\n border-radius: 10px;\n background-color: #f7973fc8;\n}\n\n.pokemon--wars--app--container .selection--container img.squirtle.selected-pokemon {\n border-radius: 10px;\n background-color: #78eeffc8;\n}\n\n.pokemon--wars--app--container .selection--container img.squirtle:hover {\n border-radius: 10px;\n background-color: #78eeffc8;\n}\n\n.pokemon--wars--app--container .fight--area {\n width: 750px;\n}\n\n.pokemon--wars--app--container .health--container {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: end;\n -ms-flex-align: end;\n align-items: flex-end;\n}\n\n.pokemon--wars--app--container .name--health--bar {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.pokemon--wars--app--container .name--health--bar img {\n width: 70px;\n border-radius: 5px;\n}\n\n.pokemon--wars--app--container .name--health--bar img.pikachu {\n background-color: #f8c953c8;\n border: 2px solid #f8c953;\n}\n\n.pokemon--wars--app--container .name--health--bar img.bulbasaur {\n background-color: #6ddba8c8;\n border: 2px solid #6ddba8;\n}\n\n.pokemon--wars--app--container .name--health--bar img.charmander {\n background-color: #f7973fc8;\n border: 2px solid #f7973f;\n}\n\n.pokemon--wars--app--container .name--health--bar img.squirtle {\n background-color: #78eeffc8;\n border: 2px solid #78eeff;\n}\n\n.pokemon--wars--app--container .player--name {\n font-size: 18px;\n font-weight: bold;\n color: #324354;\n}\n\n.pokemon--wars--app--container .vs--container {\n font-size: 35px;\n color: #f7983f;\n font-weight: bold;\n font-style: italic;\n}\n\n.pokemon--wars--app--container progress {\n height: 50px;\n width: 280px;\n}\n\n.pokemon--wars--app--container progress[value] {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n width: 250px;\n height: 35px;\n}\n\n.pokemon--wars--app--container progress.pikachu[value]::-webkit-progress-bar {\n background-color: #f7983f27;\n border: 2px solid #f7983f;\n}\n\n.pokemon--wars--app--container progress.pikachu[value]::-webkit-progress-value {\n background-color: #f7973fc8;\n}\n\n.pokemon--wars--app--container progress.bulbasaur[value]::-webkit-progress-bar {\n background-color: #6ddba827;\n border: 2px solid #6ddba8;\n}\n\n.pokemon--wars--app--container progress.bulbasaur[value]::-webkit-progress-value {\n background-color: #6ddba8c8;\n}\n\n.pokemon--wars--app--container progress.charmander[value]::-webkit-progress-bar {\n background-color: #f7973f27;\n border: 2px solid #f7973f;\n}\n\n.pokemon--wars--app--container progress.charmander[value]::-webkit-progress-value {\n background-color: #f7973fc8;\n}\n\n.pokemon--wars--app--container progress.squirtle[value]::-webkit-progress-bar {\n background-color: #78eeff27;\n border: 2px solid #78eeff;\n}\n\n.pokemon--wars--app--container progress.squirtle[value]::-webkit-progress-value {\n background-color: #78eeffc8;\n}\n\n.pokemon--wars--app--container .attack--button--container {\n margin-top: 50px;\n}\n\n.pokemon--wars--app--container .logger--container {\n width: 400px;\n margin: 0 auto;\n margin-top: 50px;\n}\n\n.pokemon--wars--app--container .logger--container img {\n width: 40px;\n}\n\n.pokemon--wars--app--container .logger--container li {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n border-radius: 5px;\n}\n\n.pokemon--wars--app--container .game--finished--container {\n margin-top: 100px;\n font-size: 50px;\n}\n\n.css--class--app .css--palette {\n list-style-type: none;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.css--class--app .css--palette li {\n width: 50px;\n height: 50px;\n background-color: #ccc;\n border-radius: 50%;\n margin-left: 5px;\n border: 1px solid #bbb;\n}\n\n.css--class--app .result-box {\n width: 100%;\n height: 100px;\n background-color: #18bf71;\n margin-top: 15px;\n border-radius: 5px;\n border-bottom: 1px solid #ccc;\n -webkit-transition: background-color 0.5s;\n transition: background-color 0.5s;\n}\n\n.bookmark--app--container {\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[3];\n grid-template-columns: repeat(3, 1fr);\n grid-gap: 10px;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.bookmark--app--container .bookmark-item {\n width: 400px;\n background-color: #efefef;\n border-bottom: 1px solid #ccc;\n border-radius: 5px;\n padding: 10px;\n}\n\n.bookmark--app--container .bookmark-item .header {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.course--planner-app--container .user--action--container {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.course--planner-app--container .user--action--container .form-group {\n width: 80%;\n margin-right: 5px;\n}\n\n.bet--coupon--app .competition-list {\n padding: 0;\n border-radius: 5px;\n border: 1px solid #efefef;\n border-bottom: 1px solid #ccc;\n}\n\n.bet--coupon--app .my-coupon {\n padding: 0;\n border-radius: 5px;\n border: 1px solid #efefef;\n border-bottom: 1px solid #ccc;\n min-width: 400px !important;\n}\n\n.bet--coupon--app .my-coupon .card--header {\n background-color: #05a0f4 !important;\n}\n\n.bet--coupon--app .card--header {\n background-color: #324354 !important;\n color: #fff;\n border-top-left-radius: 5px;\n border-top-right-radius: 5px;\n padding: 10px;\n}\n\n.bet--coupon--app .card--body {\n background-color: #fff !important;\n padding: 10px;\n}\n\n.bet--coupon--app .competition-item {\n margin-bottom: 5px;\n padding: 10px 0;\n border-bottom: 1px solid #efefef;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.bet--coupon--app .competition-item:last-child {\n border-bottom: none;\n}\n\n.bet--coupon--app .competition-item .info--container {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: start;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n}\n\n.bet--coupon--app .competition-item .rates {\n width: 150px;\n text-align: right;\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[3];\n grid-template-columns: repeat(3, 1fr);\n}\n\n.bet--coupon--app .coupon-item {\n border-bottom: 1px solid #efefef;\n margin-bottom: 5px;\n padding: 10px 0;\n}\n\n.bet--coupon--app .coupon-item:last-child {\n border-bottom: none;\n}\n\n.bet--coupon--app .coupon--total--container {\n max-width: 300px;\n}\n\n.bet--coupon--app .coupon--total--container .my-coupon {\n min-width: 300px !important;\n}\n\n.bet--coupon--app .coupon--total--container .multiply--container {\n min-width: 300px !important;\n}\n\n.bet--coupon--app .coupon--total--container .multiply--container button:not(:last-child) {\n margin-right: 5px;\n margin-bottom: 5px;\n}\n\n.bet--coupon--app .multiply--buttons {\n -ms-flex-wrap: wrap;\n flex-wrap: wrap;\n}\n\n.contact--card--app {\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[4];\n grid-template-columns: repeat(4, 1fr);\n grid-gap: 20px;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.contact--card--app .contact-item {\n width: 180px;\n min-height: 282px;\n border-radius: 5px;\n background-color: #fff !important;\n}\n\n.contact--card--app .contact-item .invitation--header {\n width: 180px;\n height: 62px;\n background: url(\"https://static-exp1.licdn.com/sc/h/cpemy7gsm8bzfb5nnbbnswfdm\");\n background-size: cover;\n background-repeat: no-repeat;\n background-position: center;\n}\n\n.contact--card--app .contact-item .contact--info--container {\n padding: 10px;\n margin-top: 45px;\n}\n\n.contact--card--app .contact-item .contact--info--container p {\n font-size: 15px !important;\n}\n\n.contact--card--app .contact-item .contact--info--container a {\n font-size: 15px !important;\n}\n\n.contact--card--app .contact-item .action--button--container {\n margin-top: 10px;\n}\n\n.contact--card--app .contact-item .contact--image {\n border-radius: 50%;\n width: 100px;\n height: 100px;\n}\n\n.comment--like--dislike--app {\n width: 750px;\n}\n\n.chat--app--container .card {\n padding: 0;\n border-radius: 5px;\n border: 1px solid #efefef;\n border-bottom: 1px solid #ccc;\n max-width: 400px !important;\n}\n\n.chat--app--container .card .card--header {\n background-color: #316bc2 !important;\n color: #fff;\n border-top-left-radius: 5px;\n border-top-right-radius: 5px;\n padding: 10px;\n}\n\n.chat--app--container .card .card--body {\n background-color: #fff !important;\n padding: 10px;\n}\n\n.chat--app--container .card .card--body .active-user-item {\n margin-bottom: 20px;\n}\n\n.chat--app--container .card .card--body .active-user-item:last-child {\n margin-bottom: 0;\n}\n\n.chat--app--container .card .card--body .active-user-item .badge {\n background-color: #efefef;\n color: #333;\n text-transform: uppercase;\n padding: 10px;\n width: 40px;\n height: 40px;\n border-radius: 50%;\n}\n\n.chat--app--container .card .messages {\n list-style-type: none;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: flex-start;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n padding: 10px;\n height: calc(100vh - 200px);\n overflow-y: scroll;\n}\n\n.chat--app--container .card .messages li {\n max-width: 300px;\n padding: 5px 10px;\n margin-bottom: 15px;\n border-bottom: 1px solid #ccc;\n border-radius: 10px;\n background-color: #fffafa;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.chat--app--container .card .messages li small {\n margin-top: 10px;\n -ms-flex-item-align: end;\n align-self: flex-end;\n font-size: 12px;\n color: #ccc;\n font-style: italic;\n}\n\n.chat--app--container .card .messages li.current-user {\n -ms-flex-item-align: end;\n align-self: flex-end;\n background-color: #05a0f4;\n color: #fff;\n}\n\n.chat--app--container .card .text-container {\n margin-top: 30px;\n}\n\n.chat--app--container .card .text-container input {\n border: none;\n padding: 10px;\n height: 37px;\n width: calc(500px - 70px);\n border-bottom-left-radius: 5px;\n}\n\n.chat--app--container .card .text-container button {\n border-radius: 0 !important;\n margin-bottom: 0;\n border: none;\n border-bottom-right-radius: 5px !important;\n}\n\n.class--list--app .class-list {\n list-style-type: none !important;\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[3];\n grid-template-columns: repeat(3, 1fr);\n}\n\n.class--list--app .class-list li {\n margin-bottom: 5px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.class--list--app textarea {\n width: 100%;\n margin-top: 20px;\n}\n\n.rate--calculator--app .rate-list {\n list-style-type: none !important;\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[6];\n grid-template-columns: repeat(6, 1fr);\n}\n\n.rate--calculator--app .rate-list li {\n margin-bottom: 5px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.rate--calculator--app input#money {\n margin-top: 15px;\n}\n\n.rate--calculator--app .rates-container {\n margin-top: 20px;\n list-style-type: none;\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[3];\n grid-template-columns: repeat(3, 1fr);\n}\n\n.rate--calculator--app .rates-container li {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n margin-bottom: 5px;\n}\n\n.rate--calculator--app .rates-container li:last-child {\n margin-bottom: 0;\n}\n\n.rate--calculator--app .rates-container li strong {\n margin-right: 5px;\n}\n/*# sourceMappingURL=style.css.map */" }, { "path": "ders-1/odevler/cozum-2/app.js", "content": "const app = Vue.createApp({\n data() {\n return {\n value: \"\",\n value2: \"\",\n };\n },\n methods: {\n showMeAlert() {\n alert(\"Bu bir alert..\");\n },\n keyDownEvent(e) {\n console.log(\"Event\", e);\n this.value = e.target.value;\n },\n keyDownEvent2(e) {\n console.log(\"Event\", e);\n this.value2 = e.target.value;\n },\n },\n});\napp.mount(\"#exercise\");\n" }, { "path": "ders-1/odevler/cozum-2/index.html", "content": "\n\n \n \n \n \n Ödev 2 | Event\n \n \n \n \n
Ödev 2 | Events
\n
\n
\n \n
\n \n
\n\n \n
\n \n

{{ value }}

\n
\n \n \n\n
\n \n

{{ value2 }}

\n
\n
\n
\n \n \n\n" }, { "path": "ders-1/odevler/cozum-2/style.css", "content": "* {\n margin: 0;\n padding: 0;\n font-family: Arial, Helvetica, sans-serif;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n\n.bg-success {\n background-color: #6dc454 !important;\n color: #fff;\n}\n\n.bg-danger {\n background-color: #c64b4b !important;\n color: #fff;\n}\n\n.bg-primary {\n background-color: #316bc2 !important;\n color: #fff;\n}\n\n.bg-dark {\n background-color: #333 !important;\n color: #fff;\n}\n\n.text-left {\n text-align: left;\n}\n\n.text-right {\n text-align: right;\n}\n\n.text-center {\n text-align: center;\n}\n\n.text-info {\n color: #05a0f4;\n}\n\n.text-success {\n color: #6dc454;\n}\n\n.text-danger {\n color: #c64b4b;\n}\n\n.text-primary {\n color: #316bc2;\n}\n\n.text-dark {\n color: #333;\n}\n\n.text-muted {\n color: #ccc;\n}\n\n.font-weight-bold {\n font-weight: bold;\n}\n\n.font-italic {\n font-style: italic;\n}\n\n.mt-20 {\n margin-top: 20px;\n}\n\n.mb-20 {\n margin-bottom: 20px;\n}\n\n.ml-20 {\n margin-left: 20px;\n}\n\n.mr-20 {\n margin-right: 20px;\n}\n\n.mt-10 {\n margin-top: 10px;\n}\n\n.mb-10 {\n margin-bottom: 10px;\n}\n\n.ml-10 {\n margin-left: 10px;\n}\n\n.mr-10 {\n margin-right: 10px;\n}\n\n.mt-5 {\n margin-top: 5px;\n}\n\n.mb-5 {\n margin-bottom: 5px;\n}\n\n.ml-5 {\n margin-left: 5px;\n}\n\n.mr-5 {\n margin-right: 5px;\n}\n\n.pt-10 {\n padding-top: 10px;\n}\n\n.pb-10 {\n padding-bottom: 10px;\n}\n\n.pl-10 {\n padding-left: 10px;\n}\n\n.pr-10 {\n padding-right: 10px;\n}\n\n.pt-5 {\n padding-top: 5px;\n}\n\n.pb-5 {\n padding-bottom: 5px;\n}\n\n.pl-5 {\n padding-left: 5px;\n}\n\n.pr-5 {\n padding-right: 5px;\n}\n\n.pt-20 {\n padding-top: 20px;\n}\n\n.pb-20 {\n padding-bottom: 20px;\n}\n\n.pl-20 {\n padding-left: 20px;\n}\n\n.pr-20 {\n padding-right: 20px;\n}\n\n.d-flex {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n}\n\n.justify-content-start {\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: flex-start;\n}\n\n.justify-content-center {\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n}\n\n.justify-content-end {\n -webkit-box-pack: end;\n -ms-flex-pack: end;\n justify-content: flex-end;\n}\n\n.justify-content-between {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n}\n\n.align-items-start {\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n}\n\n.align-items-center {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.align-items-end {\n -webkit-box-align: end;\n -ms-flex-align: end;\n align-items: flex-end;\n}\n\n.w-10 {\n width: 10% !important;\n max-width: 10% !important;\n min-width: 10% !important;\n}\n\n.w-20 {\n width: 20% !important;\n max-width: 20% !important;\n min-width: 20% !important;\n}\n\n.w-30 {\n width: 30% !important;\n max-width: 30% !important;\n min-width: 30% !important;\n}\n\n.w-40 {\n width: 40% !important;\n max-width: 40% !important;\n min-width: 40% !important;\n}\n\n.w-50 {\n width: 50% !important;\n max-width: 50% !important;\n min-width: 50% !important;\n}\n\n.w-60 {\n width: 60% !important;\n max-width: 60% !important;\n min-width: 60% !important;\n}\n\n.w-70 {\n width: 70% !important;\n max-width: 70% !important;\n min-width: 70% !important;\n}\n\n.w-80 {\n width: 80% !important;\n max-width: 80% !important;\n min-width: 80% !important;\n}\n\n.w-90 {\n width: 90% !important;\n max-width: 90% !important;\n min-width: 90% !important;\n}\n\n.w-100 {\n width: 100% !important;\n max-width: 100% !important;\n min-width: 100% !important;\n}\n\n.card {\n background-color: #efefef;\n min-width: 500px;\n padding: 10px;\n border-radius: 3px;\n border-bottom: 1px solid #ccc;\n}\n\n.card-light {\n background-color: #fffafa;\n border: 1px solid #eee;\n border-bottom: 1px solid #ccc;\n}\n\nbutton {\n padding: 10px;\n font-size: 15px;\n outline: none;\n border: none;\n border-radius: 5px;\n border-bottom: 1px solid #ccc;\n background-color: #dad0d0;\n cursor: pointer;\n}\n\nbutton:hover {\n background-color: #f0eded;\n}\n\nbutton:active {\n background-color: white;\n}\n\nbutton.btn-primary {\n background-color: #316bc2;\n color: #fff;\n}\n\nbutton.btn-primary:hover {\n background-color: #5386d3;\n color: #fff;\n}\n\nbutton.btn-primary:active {\n background-color: #7ba3de;\n color: #fff;\n}\n\nbutton.btn-warning {\n background-color: #f5e20c;\n color: #000;\n}\n\nbutton.btn-warning:hover {\n background-color: #f9ee6e;\n color: #000;\n}\n\nbutton.btn-warning:active {\n background-color: #fbf49f;\n color: #000;\n}\n\nbutton.btn-info {\n background-color: #05a0f4;\n color: #fff;\n}\n\nbutton.btn-info:hover {\n background-color: #31b4fb;\n color: #fff;\n}\n\nbutton.btn-info:active {\n background-color: #63c6fc;\n color: #fff;\n}\n\nbutton.btn-success {\n background-color: #6dc454;\n color: #fff;\n}\n\nbutton.btn-success:hover {\n background-color: #8dd17a;\n color: #fff;\n}\n\nbutton.btn-success:active {\n background-color: #aedea0;\n color: #fff;\n}\n\nbutton.btn-danger {\n background-color: #c64b4b;\n color: #fff;\n}\n\nbutton.btn-danger:hover {\n background-color: #d27272;\n color: #fff;\n}\n\nbutton.btn-danger:active {\n background-color: #df9898;\n color: #fff;\n}\n\n.btn-sm {\n padding: 7px;\n font-size: 12px;\n}\n\n.form-group {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n margin-bottom: 10px;\n}\n\np {\n font-size: 14px;\n}\n\nlabel {\n font-size: 15px;\n display: inline-block;\n margin-bottom: 5px;\n}\n\nselect {\n outline: none;\n padding: 5px 10px;\n border: 1px solid #324354;\n}\n\ninput {\n outline: none;\n padding: 5px 10px;\n border: 1px solid #324354;\n}\n\ntextarea {\n outline: none;\n resize: none;\n padding: 5px 10px;\n border: 1px solid #324354;\n}\n\nheader {\n height: 50px;\n margin-bottom: 10px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n background-color: #324354;\n color: #fff;\n font-size: 20px;\n border-bottom: 2px solid #222b34;\n}\n\n.container {\n width: 100%;\n height: auto;\n padding: 10px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: start;\n}\n\nul.list {\n margin-top: 10px;\n list-style-type: none;\n}\n\nul.list li {\n padding: 5px 10px;\n background-color: #efefef;\n margin-bottom: 5px;\n border: 1px solid #ccc;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.pokemon--wars--app--container .game--area {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n width: 100%;\n padding: 10px;\n}\n\n.pokemon--wars--app--container .game--area h2 {\n margin-bottom: 20px;\n}\n\n.pokemon--wars--app--container .selection--container {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n width: 100%;\n padding: 10px;\n margin-bottom: 20px;\n}\n\n.pokemon--wars--app--container .selection--container img {\n -webkit-transition: all 0.5s;\n transition: all 0.5s;\n margin-right: 30px;\n}\n\n.pokemon--wars--app--container .selection--container img:last-child {\n margin-right: none;\n}\n\n.pokemon--wars--app--container .selection--container img.pikachu.selected-pokemon {\n border-radius: 10px;\n background-color: #f8c953c8;\n -webkit-transition: all 0.5s;\n transition: all 0.5s;\n}\n\n.pokemon--wars--app--container .selection--container img.pikachu:hover {\n border-radius: 10px;\n background-color: #f8c953c8;\n -webkit-transition: all 0.5s;\n transition: all 0.5s;\n}\n\n.pokemon--wars--app--container .selection--container img.bulbasaur.selected-pokemon {\n border-radius: 10px;\n background-color: #6ddba8c8;\n}\n\n.pokemon--wars--app--container .selection--container img.bulbasaur:hover {\n border-radius: 10px;\n background-color: #6ddba8c8;\n}\n\n.pokemon--wars--app--container .selection--container img.charmander.selected-pokemon {\n border-radius: 10px;\n background-color: #f7973fc8;\n}\n\n.pokemon--wars--app--container .selection--container img.charmander:hover {\n border-radius: 10px;\n background-color: #f7973fc8;\n}\n\n.pokemon--wars--app--container .selection--container img.squirtle.selected-pokemon {\n border-radius: 10px;\n background-color: #78eeffc8;\n}\n\n.pokemon--wars--app--container .selection--container img.squirtle:hover {\n border-radius: 10px;\n background-color: #78eeffc8;\n}\n\n.pokemon--wars--app--container .fight--area {\n width: 750px;\n}\n\n.pokemon--wars--app--container .health--container {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: end;\n -ms-flex-align: end;\n align-items: flex-end;\n}\n\n.pokemon--wars--app--container .name--health--bar {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.pokemon--wars--app--container .name--health--bar img {\n width: 70px;\n border-radius: 5px;\n}\n\n.pokemon--wars--app--container .name--health--bar img.pikachu {\n background-color: #f8c953c8;\n border: 2px solid #f8c953;\n}\n\n.pokemon--wars--app--container .name--health--bar img.bulbasaur {\n background-color: #6ddba8c8;\n border: 2px solid #6ddba8;\n}\n\n.pokemon--wars--app--container .name--health--bar img.charmander {\n background-color: #f7973fc8;\n border: 2px solid #f7973f;\n}\n\n.pokemon--wars--app--container .name--health--bar img.squirtle {\n background-color: #78eeffc8;\n border: 2px solid #78eeff;\n}\n\n.pokemon--wars--app--container .player--name {\n font-size: 18px;\n font-weight: bold;\n color: #324354;\n}\n\n.pokemon--wars--app--container .vs--container {\n font-size: 35px;\n color: #f7983f;\n font-weight: bold;\n font-style: italic;\n}\n\n.pokemon--wars--app--container progress {\n height: 50px;\n width: 280px;\n}\n\n.pokemon--wars--app--container progress[value] {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n width: 250px;\n height: 35px;\n}\n\n.pokemon--wars--app--container progress.pikachu[value]::-webkit-progress-bar {\n background-color: #f7983f27;\n border: 2px solid #f7983f;\n}\n\n.pokemon--wars--app--container progress.pikachu[value]::-webkit-progress-value {\n background-color: #f7973fc8;\n}\n\n.pokemon--wars--app--container progress.bulbasaur[value]::-webkit-progress-bar {\n background-color: #6ddba827;\n border: 2px solid #6ddba8;\n}\n\n.pokemon--wars--app--container progress.bulbasaur[value]::-webkit-progress-value {\n background-color: #6ddba8c8;\n}\n\n.pokemon--wars--app--container progress.charmander[value]::-webkit-progress-bar {\n background-color: #f7973f27;\n border: 2px solid #f7973f;\n}\n\n.pokemon--wars--app--container progress.charmander[value]::-webkit-progress-value {\n background-color: #f7973fc8;\n}\n\n.pokemon--wars--app--container progress.squirtle[value]::-webkit-progress-bar {\n background-color: #78eeff27;\n border: 2px solid #78eeff;\n}\n\n.pokemon--wars--app--container progress.squirtle[value]::-webkit-progress-value {\n background-color: #78eeffc8;\n}\n\n.pokemon--wars--app--container .attack--button--container {\n margin-top: 50px;\n}\n\n.pokemon--wars--app--container .logger--container {\n width: 400px;\n margin: 0 auto;\n margin-top: 50px;\n}\n\n.pokemon--wars--app--container .logger--container img {\n width: 40px;\n}\n\n.pokemon--wars--app--container .logger--container li {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n border-radius: 5px;\n}\n\n.pokemon--wars--app--container .game--finished--container {\n margin-top: 100px;\n font-size: 50px;\n}\n\n.css--class--app .css--palette {\n list-style-type: none;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.css--class--app .css--palette li {\n width: 50px;\n height: 50px;\n background-color: #ccc;\n border-radius: 50%;\n margin-left: 5px;\n border: 1px solid #bbb;\n}\n\n.css--class--app .result-box {\n width: 100%;\n height: 100px;\n background-color: #18bf71;\n margin-top: 15px;\n border-radius: 5px;\n border-bottom: 1px solid #ccc;\n -webkit-transition: background-color 0.5s;\n transition: background-color 0.5s;\n}\n\n.bookmark--app--container {\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[3];\n grid-template-columns: repeat(3, 1fr);\n grid-gap: 10px;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.bookmark--app--container .bookmark-item {\n width: 400px;\n background-color: #efefef;\n border-bottom: 1px solid #ccc;\n border-radius: 5px;\n padding: 10px;\n}\n\n.bookmark--app--container .bookmark-item .header {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.course--planner-app--container .user--action--container {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.course--planner-app--container .user--action--container .form-group {\n width: 80%;\n margin-right: 5px;\n}\n\n.bet--coupon--app .competition-list {\n padding: 0;\n border-radius: 5px;\n border: 1px solid #efefef;\n border-bottom: 1px solid #ccc;\n}\n\n.bet--coupon--app .my-coupon {\n padding: 0;\n border-radius: 5px;\n border: 1px solid #efefef;\n border-bottom: 1px solid #ccc;\n min-width: 400px !important;\n}\n\n.bet--coupon--app .my-coupon .card--header {\n background-color: #05a0f4 !important;\n}\n\n.bet--coupon--app .card--header {\n background-color: #324354 !important;\n color: #fff;\n border-top-left-radius: 5px;\n border-top-right-radius: 5px;\n padding: 10px;\n}\n\n.bet--coupon--app .card--body {\n background-color: #fff !important;\n padding: 10px;\n}\n\n.bet--coupon--app .competition-item {\n margin-bottom: 5px;\n padding: 10px 0;\n border-bottom: 1px solid #efefef;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.bet--coupon--app .competition-item:last-child {\n border-bottom: none;\n}\n\n.bet--coupon--app .competition-item .info--container {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: start;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n}\n\n.bet--coupon--app .competition-item .rates {\n width: 150px;\n text-align: right;\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[3];\n grid-template-columns: repeat(3, 1fr);\n}\n\n.bet--coupon--app .coupon-item {\n border-bottom: 1px solid #efefef;\n margin-bottom: 5px;\n padding: 10px 0;\n}\n\n.bet--coupon--app .coupon-item:last-child {\n border-bottom: none;\n}\n\n.bet--coupon--app .coupon--total--container {\n max-width: 300px;\n}\n\n.bet--coupon--app .coupon--total--container .my-coupon {\n min-width: 300px !important;\n}\n\n.bet--coupon--app .coupon--total--container .multiply--container {\n min-width: 300px !important;\n}\n\n.bet--coupon--app .coupon--total--container .multiply--container button:not(:last-child) {\n margin-right: 5px;\n margin-bottom: 5px;\n}\n\n.bet--coupon--app .multiply--buttons {\n -ms-flex-wrap: wrap;\n flex-wrap: wrap;\n}\n\n.contact--card--app {\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[4];\n grid-template-columns: repeat(4, 1fr);\n grid-gap: 20px;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.contact--card--app .contact-item {\n width: 180px;\n min-height: 282px;\n border-radius: 5px;\n background-color: #fff !important;\n}\n\n.contact--card--app .contact-item .invitation--header {\n width: 180px;\n height: 62px;\n background: url(\"https://static-exp1.licdn.com/sc/h/cpemy7gsm8bzfb5nnbbnswfdm\");\n background-size: cover;\n background-repeat: no-repeat;\n background-position: center;\n}\n\n.contact--card--app .contact-item .contact--info--container {\n padding: 10px;\n margin-top: 45px;\n}\n\n.contact--card--app .contact-item .contact--info--container p {\n font-size: 15px !important;\n}\n\n.contact--card--app .contact-item .contact--info--container a {\n font-size: 15px !important;\n}\n\n.contact--card--app .contact-item .action--button--container {\n margin-top: 10px;\n}\n\n.contact--card--app .contact-item .contact--image {\n border-radius: 50%;\n width: 100px;\n height: 100px;\n}\n\n.comment--like--dislike--app {\n width: 750px;\n}\n\n.chat--app--container .card {\n padding: 0;\n border-radius: 5px;\n border: 1px solid #efefef;\n border-bottom: 1px solid #ccc;\n max-width: 400px !important;\n}\n\n.chat--app--container .card .card--header {\n background-color: #316bc2 !important;\n color: #fff;\n border-top-left-radius: 5px;\n border-top-right-radius: 5px;\n padding: 10px;\n}\n\n.chat--app--container .card .card--body {\n background-color: #fff !important;\n padding: 10px;\n}\n\n.chat--app--container .card .card--body .active-user-item {\n margin-bottom: 20px;\n}\n\n.chat--app--container .card .card--body .active-user-item:last-child {\n margin-bottom: 0;\n}\n\n.chat--app--container .card .card--body .active-user-item .badge {\n background-color: #efefef;\n color: #333;\n text-transform: uppercase;\n padding: 10px;\n width: 40px;\n height: 40px;\n border-radius: 50%;\n}\n\n.chat--app--container .card .messages {\n list-style-type: none;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: flex-start;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n padding: 10px;\n height: calc(100vh - 200px);\n overflow-y: scroll;\n}\n\n.chat--app--container .card .messages li {\n max-width: 300px;\n padding: 5px 10px;\n margin-bottom: 15px;\n border-bottom: 1px solid #ccc;\n border-radius: 10px;\n background-color: #fffafa;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.chat--app--container .card .messages li small {\n margin-top: 10px;\n -ms-flex-item-align: end;\n align-self: flex-end;\n font-size: 12px;\n color: #ccc;\n font-style: italic;\n}\n\n.chat--app--container .card .messages li.current-user {\n -ms-flex-item-align: end;\n align-self: flex-end;\n background-color: #05a0f4;\n color: #fff;\n}\n\n.chat--app--container .card .text-container {\n margin-top: 30px;\n}\n\n.chat--app--container .card .text-container input {\n border: none;\n padding: 10px;\n height: 37px;\n width: calc(500px - 70px);\n border-bottom-left-radius: 5px;\n}\n\n.chat--app--container .card .text-container button {\n border-radius: 0 !important;\n margin-bottom: 0;\n border: none;\n border-bottom-right-radius: 5px !important;\n}\n\n.class--list--app .class-list {\n list-style-type: none !important;\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[3];\n grid-template-columns: repeat(3, 1fr);\n}\n\n.class--list--app .class-list li {\n margin-bottom: 5px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.class--list--app textarea {\n width: 100%;\n margin-top: 20px;\n}\n\n.rate--calculator--app .rate-list {\n list-style-type: none !important;\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[6];\n grid-template-columns: repeat(6, 1fr);\n}\n\n.rate--calculator--app .rate-list li {\n margin-bottom: 5px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.rate--calculator--app input#money {\n margin-top: 15px;\n}\n\n.rate--calculator--app .rates-container {\n margin-top: 20px;\n list-style-type: none;\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[3];\n grid-template-columns: repeat(3, 1fr);\n}\n\n.rate--calculator--app .rates-container li {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n margin-bottom: 5px;\n}\n\n.rate--calculator--app .rates-container li:last-child {\n margin-bottom: 0;\n}\n\n.rate--calculator--app .rates-container li strong {\n margin-right: 5px;\n}\n/*# sourceMappingURL=style.css.map */" }, { "path": "ders-1/odevler/cozum-3/app.js", "content": "const app = Vue.createApp({\n data() {\n return {\n value: 0,\n result2: null,\n };\n },\n computed: {\n result() {\n return this.value === 33 ? \"Tamamlandı\" : \"Henüz tamamlanmadı..\";\n },\n },\n watch: {\n value(v) {\n if (v === 33) {\n this.result2 = \"Tamamlandı\";\n } else {\n this.result2 = \"Henüz tamamlanmadı\";\n }\n },\n result() {\n setTimeout(() => {\n this.value = 0;\n }, 2000);\n },\n },\n});\napp.mount(\"#exercise\");\n\n// Vue 2\n// new Vue({\n// el: \"#exercise\",\n// data: {\n// value: 0,\n// },\n// });\n\n// Vue 3\n// const app = Vue.createApp({\n// data() {\n// return {};\n// },\n// })\n// app.mount(\"#exercise\");\n" }, { "path": "ders-1/odevler/cozum-3/index.html", "content": "\n\n \n \n \n \n Reactivity\n \n \n \n \n
Ödev 3 | Reactivity
\n
\n
\n
\n \n \n
\n

Şuanki Değer: {{ value }}

\n \n \n

{{ result }}

\n

{{ result2 }}

\n
\n \n \n
\n \n

{{ value }}

\n
\n
\n
\n
\n \n \n\n" }, { "path": "ders-1/odevler/cozum-3/style.css", "content": "* {\n margin: 0;\n padding: 0;\n font-family: Arial, Helvetica, sans-serif;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n\n.bg-success {\n background-color: #6dc454 !important;\n color: #fff;\n}\n\n.bg-danger {\n background-color: #c64b4b !important;\n color: #fff;\n}\n\n.bg-primary {\n background-color: #316bc2 !important;\n color: #fff;\n}\n\n.bg-dark {\n background-color: #333 !important;\n color: #fff;\n}\n\n.text-left {\n text-align: left;\n}\n\n.text-right {\n text-align: right;\n}\n\n.text-center {\n text-align: center;\n}\n\n.text-info {\n color: #05a0f4;\n}\n\n.text-success {\n color: #6dc454;\n}\n\n.text-danger {\n color: #c64b4b;\n}\n\n.text-primary {\n color: #316bc2;\n}\n\n.text-dark {\n color: #333;\n}\n\n.text-muted {\n color: #ccc;\n}\n\n.font-weight-bold {\n font-weight: bold;\n}\n\n.font-italic {\n font-style: italic;\n}\n\n.mt-20 {\n margin-top: 20px;\n}\n\n.mb-20 {\n margin-bottom: 20px;\n}\n\n.ml-20 {\n margin-left: 20px;\n}\n\n.mr-20 {\n margin-right: 20px;\n}\n\n.mt-10 {\n margin-top: 10px;\n}\n\n.mb-10 {\n margin-bottom: 10px;\n}\n\n.ml-10 {\n margin-left: 10px;\n}\n\n.mr-10 {\n margin-right: 10px;\n}\n\n.mt-5 {\n margin-top: 5px;\n}\n\n.mb-5 {\n margin-bottom: 5px;\n}\n\n.ml-5 {\n margin-left: 5px;\n}\n\n.mr-5 {\n margin-right: 5px;\n}\n\n.pt-10 {\n padding-top: 10px;\n}\n\n.pb-10 {\n padding-bottom: 10px;\n}\n\n.pl-10 {\n padding-left: 10px;\n}\n\n.pr-10 {\n padding-right: 10px;\n}\n\n.pt-5 {\n padding-top: 5px;\n}\n\n.pb-5 {\n padding-bottom: 5px;\n}\n\n.pl-5 {\n padding-left: 5px;\n}\n\n.pr-5 {\n padding-right: 5px;\n}\n\n.pt-20 {\n padding-top: 20px;\n}\n\n.pb-20 {\n padding-bottom: 20px;\n}\n\n.pl-20 {\n padding-left: 20px;\n}\n\n.pr-20 {\n padding-right: 20px;\n}\n\n.d-flex {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n}\n\n.justify-content-start {\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: flex-start;\n}\n\n.justify-content-center {\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n}\n\n.justify-content-end {\n -webkit-box-pack: end;\n -ms-flex-pack: end;\n justify-content: flex-end;\n}\n\n.justify-content-between {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n}\n\n.align-items-start {\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n}\n\n.align-items-center {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.align-items-end {\n -webkit-box-align: end;\n -ms-flex-align: end;\n align-items: flex-end;\n}\n\n.w-10 {\n width: 10% !important;\n max-width: 10% !important;\n min-width: 10% !important;\n}\n\n.w-20 {\n width: 20% !important;\n max-width: 20% !important;\n min-width: 20% !important;\n}\n\n.w-30 {\n width: 30% !important;\n max-width: 30% !important;\n min-width: 30% !important;\n}\n\n.w-40 {\n width: 40% !important;\n max-width: 40% !important;\n min-width: 40% !important;\n}\n\n.w-50 {\n width: 50% !important;\n max-width: 50% !important;\n min-width: 50% !important;\n}\n\n.w-60 {\n width: 60% !important;\n max-width: 60% !important;\n min-width: 60% !important;\n}\n\n.w-70 {\n width: 70% !important;\n max-width: 70% !important;\n min-width: 70% !important;\n}\n\n.w-80 {\n width: 80% !important;\n max-width: 80% !important;\n min-width: 80% !important;\n}\n\n.w-90 {\n width: 90% !important;\n max-width: 90% !important;\n min-width: 90% !important;\n}\n\n.w-100 {\n width: 100% !important;\n max-width: 100% !important;\n min-width: 100% !important;\n}\n\n.card {\n background-color: #efefef;\n min-width: 500px;\n padding: 10px;\n border-radius: 3px;\n border-bottom: 1px solid #ccc;\n}\n\n.card-light {\n background-color: #fffafa;\n border: 1px solid #eee;\n border-bottom: 1px solid #ccc;\n}\n\nbutton {\n padding: 10px;\n font-size: 15px;\n outline: none;\n border: none;\n border-radius: 5px;\n border-bottom: 1px solid #ccc;\n background-color: #dad0d0;\n cursor: pointer;\n}\n\nbutton:hover {\n background-color: #f0eded;\n}\n\nbutton:active {\n background-color: white;\n}\n\nbutton.btn-primary {\n background-color: #316bc2;\n color: #fff;\n}\n\nbutton.btn-primary:hover {\n background-color: #5386d3;\n color: #fff;\n}\n\nbutton.btn-primary:active {\n background-color: #7ba3de;\n color: #fff;\n}\n\nbutton.btn-warning {\n background-color: #f5e20c;\n color: #000;\n}\n\nbutton.btn-warning:hover {\n background-color: #f9ee6e;\n color: #000;\n}\n\nbutton.btn-warning:active {\n background-color: #fbf49f;\n color: #000;\n}\n\nbutton.btn-info {\n background-color: #05a0f4;\n color: #fff;\n}\n\nbutton.btn-info:hover {\n background-color: #31b4fb;\n color: #fff;\n}\n\nbutton.btn-info:active {\n background-color: #63c6fc;\n color: #fff;\n}\n\nbutton.btn-success {\n background-color: #6dc454;\n color: #fff;\n}\n\nbutton.btn-success:hover {\n background-color: #8dd17a;\n color: #fff;\n}\n\nbutton.btn-success:active {\n background-color: #aedea0;\n color: #fff;\n}\n\nbutton.btn-danger {\n background-color: #c64b4b;\n color: #fff;\n}\n\nbutton.btn-danger:hover {\n background-color: #d27272;\n color: #fff;\n}\n\nbutton.btn-danger:active {\n background-color: #df9898;\n color: #fff;\n}\n\n.btn-sm {\n padding: 7px;\n font-size: 12px;\n}\n\n.form-group {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n margin-bottom: 10px;\n}\n\np {\n font-size: 14px;\n}\n\nlabel {\n font-size: 15px;\n display: inline-block;\n margin-bottom: 5px;\n}\n\nselect {\n outline: none;\n padding: 5px 10px;\n border: 1px solid #324354;\n}\n\ninput {\n outline: none;\n padding: 5px 10px;\n border: 1px solid #324354;\n}\n\ntextarea {\n outline: none;\n resize: none;\n padding: 5px 10px;\n border: 1px solid #324354;\n}\n\nheader {\n height: 50px;\n margin-bottom: 10px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n background-color: #324354;\n color: #fff;\n font-size: 20px;\n border-bottom: 2px solid #222b34;\n}\n\n.container {\n width: 100%;\n height: auto;\n padding: 10px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: start;\n}\n\nul.list {\n margin-top: 10px;\n list-style-type: none;\n}\n\nul.list li {\n padding: 5px 10px;\n background-color: #efefef;\n margin-bottom: 5px;\n border: 1px solid #ccc;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.pokemon--wars--app--container .game--area {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n width: 100%;\n padding: 10px;\n}\n\n.pokemon--wars--app--container .game--area h2 {\n margin-bottom: 20px;\n}\n\n.pokemon--wars--app--container .selection--container {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n width: 100%;\n padding: 10px;\n margin-bottom: 20px;\n}\n\n.pokemon--wars--app--container .selection--container img {\n -webkit-transition: all 0.5s;\n transition: all 0.5s;\n margin-right: 30px;\n}\n\n.pokemon--wars--app--container .selection--container img:last-child {\n margin-right: none;\n}\n\n.pokemon--wars--app--container .selection--container img.pikachu.selected-pokemon {\n border-radius: 10px;\n background-color: #f8c953c8;\n -webkit-transition: all 0.5s;\n transition: all 0.5s;\n}\n\n.pokemon--wars--app--container .selection--container img.pikachu:hover {\n border-radius: 10px;\n background-color: #f8c953c8;\n -webkit-transition: all 0.5s;\n transition: all 0.5s;\n}\n\n.pokemon--wars--app--container .selection--container img.bulbasaur.selected-pokemon {\n border-radius: 10px;\n background-color: #6ddba8c8;\n}\n\n.pokemon--wars--app--container .selection--container img.bulbasaur:hover {\n border-radius: 10px;\n background-color: #6ddba8c8;\n}\n\n.pokemon--wars--app--container .selection--container img.charmander.selected-pokemon {\n border-radius: 10px;\n background-color: #f7973fc8;\n}\n\n.pokemon--wars--app--container .selection--container img.charmander:hover {\n border-radius: 10px;\n background-color: #f7973fc8;\n}\n\n.pokemon--wars--app--container .selection--container img.squirtle.selected-pokemon {\n border-radius: 10px;\n background-color: #78eeffc8;\n}\n\n.pokemon--wars--app--container .selection--container img.squirtle:hover {\n border-radius: 10px;\n background-color: #78eeffc8;\n}\n\n.pokemon--wars--app--container .fight--area {\n width: 750px;\n}\n\n.pokemon--wars--app--container .health--container {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: end;\n -ms-flex-align: end;\n align-items: flex-end;\n}\n\n.pokemon--wars--app--container .name--health--bar {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.pokemon--wars--app--container .name--health--bar img {\n width: 70px;\n border-radius: 5px;\n}\n\n.pokemon--wars--app--container .name--health--bar img.pikachu {\n background-color: #f8c953c8;\n border: 2px solid #f8c953;\n}\n\n.pokemon--wars--app--container .name--health--bar img.bulbasaur {\n background-color: #6ddba8c8;\n border: 2px solid #6ddba8;\n}\n\n.pokemon--wars--app--container .name--health--bar img.charmander {\n background-color: #f7973fc8;\n border: 2px solid #f7973f;\n}\n\n.pokemon--wars--app--container .name--health--bar img.squirtle {\n background-color: #78eeffc8;\n border: 2px solid #78eeff;\n}\n\n.pokemon--wars--app--container .player--name {\n font-size: 18px;\n font-weight: bold;\n color: #324354;\n}\n\n.pokemon--wars--app--container .vs--container {\n font-size: 35px;\n color: #f7983f;\n font-weight: bold;\n font-style: italic;\n}\n\n.pokemon--wars--app--container progress {\n height: 50px;\n width: 280px;\n}\n\n.pokemon--wars--app--container progress[value] {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n width: 250px;\n height: 35px;\n}\n\n.pokemon--wars--app--container progress.pikachu[value]::-webkit-progress-bar {\n background-color: #f7983f27;\n border: 2px solid #f7983f;\n}\n\n.pokemon--wars--app--container progress.pikachu[value]::-webkit-progress-value {\n background-color: #f7973fc8;\n}\n\n.pokemon--wars--app--container progress.bulbasaur[value]::-webkit-progress-bar {\n background-color: #6ddba827;\n border: 2px solid #6ddba8;\n}\n\n.pokemon--wars--app--container progress.bulbasaur[value]::-webkit-progress-value {\n background-color: #6ddba8c8;\n}\n\n.pokemon--wars--app--container progress.charmander[value]::-webkit-progress-bar {\n background-color: #f7973f27;\n border: 2px solid #f7973f;\n}\n\n.pokemon--wars--app--container progress.charmander[value]::-webkit-progress-value {\n background-color: #f7973fc8;\n}\n\n.pokemon--wars--app--container progress.squirtle[value]::-webkit-progress-bar {\n background-color: #78eeff27;\n border: 2px solid #78eeff;\n}\n\n.pokemon--wars--app--container progress.squirtle[value]::-webkit-progress-value {\n background-color: #78eeffc8;\n}\n\n.pokemon--wars--app--container .attack--button--container {\n margin-top: 50px;\n}\n\n.pokemon--wars--app--container .logger--container {\n width: 400px;\n margin: 0 auto;\n margin-top: 50px;\n}\n\n.pokemon--wars--app--container .logger--container img {\n width: 40px;\n}\n\n.pokemon--wars--app--container .logger--container li {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n border-radius: 5px;\n}\n\n.pokemon--wars--app--container .game--finished--container {\n margin-top: 100px;\n font-size: 50px;\n}\n\n.css--class--app .css--palette {\n list-style-type: none;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.css--class--app .css--palette li {\n width: 50px;\n height: 50px;\n background-color: #ccc;\n border-radius: 50%;\n margin-left: 5px;\n border: 1px solid #bbb;\n}\n\n.css--class--app .result-box {\n width: 100%;\n height: 100px;\n background-color: #18bf71;\n margin-top: 15px;\n border-radius: 5px;\n border-bottom: 1px solid #ccc;\n -webkit-transition: background-color 0.5s;\n transition: background-color 0.5s;\n}\n\n.bookmark--app--container {\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[3];\n grid-template-columns: repeat(3, 1fr);\n grid-gap: 10px;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.bookmark--app--container .bookmark-item {\n width: 400px;\n background-color: #efefef;\n border-bottom: 1px solid #ccc;\n border-radius: 5px;\n padding: 10px;\n}\n\n.bookmark--app--container .bookmark-item .header {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.course--planner-app--container .user--action--container {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.course--planner-app--container .user--action--container .form-group {\n width: 80%;\n margin-right: 5px;\n}\n\n.bet--coupon--app .competition-list {\n padding: 0;\n border-radius: 5px;\n border: 1px solid #efefef;\n border-bottom: 1px solid #ccc;\n}\n\n.bet--coupon--app .my-coupon {\n padding: 0;\n border-radius: 5px;\n border: 1px solid #efefef;\n border-bottom: 1px solid #ccc;\n min-width: 400px !important;\n}\n\n.bet--coupon--app .my-coupon .card--header {\n background-color: #05a0f4 !important;\n}\n\n.bet--coupon--app .card--header {\n background-color: #324354 !important;\n color: #fff;\n border-top-left-radius: 5px;\n border-top-right-radius: 5px;\n padding: 10px;\n}\n\n.bet--coupon--app .card--body {\n background-color: #fff !important;\n padding: 10px;\n}\n\n.bet--coupon--app .competition-item {\n margin-bottom: 5px;\n padding: 10px 0;\n border-bottom: 1px solid #efefef;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.bet--coupon--app .competition-item:last-child {\n border-bottom: none;\n}\n\n.bet--coupon--app .competition-item .info--container {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: start;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n}\n\n.bet--coupon--app .competition-item .rates {\n width: 150px;\n text-align: right;\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[3];\n grid-template-columns: repeat(3, 1fr);\n}\n\n.bet--coupon--app .coupon-item {\n border-bottom: 1px solid #efefef;\n margin-bottom: 5px;\n padding: 10px 0;\n}\n\n.bet--coupon--app .coupon-item:last-child {\n border-bottom: none;\n}\n\n.bet--coupon--app .coupon--total--container {\n max-width: 300px;\n}\n\n.bet--coupon--app .coupon--total--container .my-coupon {\n min-width: 300px !important;\n}\n\n.bet--coupon--app .coupon--total--container .multiply--container {\n min-width: 300px !important;\n}\n\n.bet--coupon--app .coupon--total--container .multiply--container button:not(:last-child) {\n margin-right: 5px;\n margin-bottom: 5px;\n}\n\n.bet--coupon--app .multiply--buttons {\n -ms-flex-wrap: wrap;\n flex-wrap: wrap;\n}\n\n.contact--card--app {\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[4];\n grid-template-columns: repeat(4, 1fr);\n grid-gap: 20px;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.contact--card--app .contact-item {\n width: 180px;\n min-height: 282px;\n border-radius: 5px;\n background-color: #fff !important;\n}\n\n.contact--card--app .contact-item .invitation--header {\n width: 180px;\n height: 62px;\n background: url(\"https://static-exp1.licdn.com/sc/h/cpemy7gsm8bzfb5nnbbnswfdm\");\n background-size: cover;\n background-repeat: no-repeat;\n background-position: center;\n}\n\n.contact--card--app .contact-item .contact--info--container {\n padding: 10px;\n margin-top: 45px;\n}\n\n.contact--card--app .contact-item .contact--info--container p {\n font-size: 15px !important;\n}\n\n.contact--card--app .contact-item .contact--info--container a {\n font-size: 15px !important;\n}\n\n.contact--card--app .contact-item .action--button--container {\n margin-top: 10px;\n}\n\n.contact--card--app .contact-item .contact--image {\n border-radius: 50%;\n width: 100px;\n height: 100px;\n}\n\n.comment--like--dislike--app {\n width: 750px;\n}\n\n.chat--app--container .card {\n padding: 0;\n border-radius: 5px;\n border: 1px solid #efefef;\n border-bottom: 1px solid #ccc;\n max-width: 400px !important;\n}\n\n.chat--app--container .card .card--header {\n background-color: #316bc2 !important;\n color: #fff;\n border-top-left-radius: 5px;\n border-top-right-radius: 5px;\n padding: 10px;\n}\n\n.chat--app--container .card .card--body {\n background-color: #fff !important;\n padding: 10px;\n}\n\n.chat--app--container .card .card--body .active-user-item {\n margin-bottom: 20px;\n}\n\n.chat--app--container .card .card--body .active-user-item:last-child {\n margin-bottom: 0;\n}\n\n.chat--app--container .card .card--body .active-user-item .badge {\n background-color: #efefef;\n color: #333;\n text-transform: uppercase;\n padding: 10px;\n width: 40px;\n height: 40px;\n border-radius: 50%;\n}\n\n.chat--app--container .card .messages {\n list-style-type: none;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: flex-start;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n padding: 10px;\n height: calc(100vh - 200px);\n overflow-y: scroll;\n}\n\n.chat--app--container .card .messages li {\n max-width: 300px;\n padding: 5px 10px;\n margin-bottom: 15px;\n border-bottom: 1px solid #ccc;\n border-radius: 10px;\n background-color: #fffafa;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.chat--app--container .card .messages li small {\n margin-top: 10px;\n -ms-flex-item-align: end;\n align-self: flex-end;\n font-size: 12px;\n color: #ccc;\n font-style: italic;\n}\n\n.chat--app--container .card .messages li.current-user {\n -ms-flex-item-align: end;\n align-self: flex-end;\n background-color: #05a0f4;\n color: #fff;\n}\n\n.chat--app--container .card .text-container {\n margin-top: 30px;\n}\n\n.chat--app--container .card .text-container input {\n border: none;\n padding: 10px;\n height: 37px;\n width: calc(500px - 70px);\n border-bottom-left-radius: 5px;\n}\n\n.chat--app--container .card .text-container button {\n border-radius: 0 !important;\n margin-bottom: 0;\n border: none;\n border-bottom-right-radius: 5px !important;\n}\n\n.class--list--app .class-list {\n list-style-type: none !important;\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[3];\n grid-template-columns: repeat(3, 1fr);\n}\n\n.class--list--app .class-list li {\n margin-bottom: 5px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.class--list--app textarea {\n width: 100%;\n margin-top: 20px;\n}\n\n.rate--calculator--app .rate-list {\n list-style-type: none !important;\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[6];\n grid-template-columns: repeat(6, 1fr);\n}\n\n.rate--calculator--app .rate-list li {\n margin-bottom: 5px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.rate--calculator--app input#money {\n margin-top: 15px;\n}\n\n.rate--calculator--app .rates-container {\n margin-top: 20px;\n list-style-type: none;\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[3];\n grid-template-columns: repeat(3, 1fr);\n}\n\n.rate--calculator--app .rates-container li {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n margin-bottom: 5px;\n}\n\n.rate--calculator--app .rates-container li:last-child {\n margin-bottom: 0;\n}\n\n.rate--calculator--app .rates-container li strong {\n margin-right: 5px;\n}\n/*# sourceMappingURL=style.css.map */" }, { "path": "ders-1/odevler/css-class-app/app.js", "content": "Vue.createApp({\n data() {\n return {\n activeColor: \"\",\n color_palette: [\n {\n id: \"red\",\n css_class: \"red-box\",\n },\n {\n id: \"green\",\n css_class: \"green-box\",\n },\n {\n id: \"blue\",\n css_class: \"blue-box\",\n },\n ],\n };\n },\n}).mount(\"#app\");\n" }, { "path": "ders-1/odevler/css-class-app/index.html", "content": "\n\n \n \n \n \n CSS Class App\n \n \n\n \n \n \n
CSS Class App
\n
\n
\n
    \n
  • \n
\n
\n
\n
\n\n \n \n\n" }, { "path": "ders-1/odevler/css-class-app/readme.txt", "content": "ÖDEV:\nYukarı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.\nWhen 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.\n\nİPUCU:\ndata 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.\n
  • elementine click eventi yardımıyla .result-box isimli elementin alacağı rengi class binding ile yapabilirsiniz.\n\"red-box\", \"green-box\", \"blue-box\" isimli css class'larını tanımlamanız gerekmektedir.\n\niterate the li elements in the .css - palette element with v-for over a property of type Array named color_palette in the data.\nWith the help of the click event on the
  • element, you can make the color of the element named .result-box with the class binding.\nYou should define css classes named \"red-box\", \"green-box\", \"blue-box\"\n\nSample Data:\ncolor_palette = [\n {\n id: \"red\",\n css_class: \"red-box\",\n },\n {\n id: \"green\",\n css_class: \"green-box\",\n },\n {\n id: \"blue\",\n css_class: \"blue-box\",\n }\n];" }, { "path": "ders-1/odevler/css-class-app/style.css", "content": "* {\n margin: 0;\n padding: 0;\n font-family: Arial, Helvetica, sans-serif;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n\n.bg-success {\n background-color: #6dc454 !important;\n color: #fff;\n}\n\n.bg-danger {\n background-color: #c64b4b !important;\n color: #fff;\n}\n\n.bg-primary {\n background-color: #316bc2 !important;\n color: #fff;\n}\n\n.bg-dark {\n background-color: #333 !important;\n color: #fff;\n}\n\n.text-left {\n text-align: left;\n}\n\n.text-right {\n text-align: right;\n}\n\n.text-center {\n text-align: center;\n}\n\n.text-info {\n color: #05a0f4;\n}\n\n.text-success {\n color: #6dc454;\n}\n\n.text-danger {\n color: #c64b4b;\n}\n\n.text-primary {\n color: #316bc2;\n}\n\n.text-dark {\n color: #333;\n}\n\n.text-muted {\n color: #ccc;\n}\n\n.font-weight-bold {\n font-weight: bold;\n}\n\n.font-italic {\n font-style: italic;\n}\n\n.mt-20 {\n margin-top: 20px;\n}\n\n.mb-20 {\n margin-bottom: 20px;\n}\n\n.ml-20 {\n margin-left: 20px;\n}\n\n.mr-20 {\n margin-right: 20px;\n}\n\n.mt-10 {\n margin-top: 10px;\n}\n\n.mb-10 {\n margin-bottom: 10px;\n}\n\n.ml-10 {\n margin-left: 10px;\n}\n\n.mr-10 {\n margin-right: 10px;\n}\n\n.mt-5 {\n margin-top: 5px;\n}\n\n.mb-5 {\n margin-bottom: 5px;\n}\n\n.ml-5 {\n margin-left: 5px;\n}\n\n.mr-5 {\n margin-right: 5px;\n}\n\n.pt-10 {\n padding-top: 10px;\n}\n\n.pb-10 {\n padding-bottom: 10px;\n}\n\n.pl-10 {\n padding-left: 10px;\n}\n\n.pr-10 {\n padding-right: 10px;\n}\n\n.pt-5 {\n padding-top: 5px;\n}\n\n.pb-5 {\n padding-bottom: 5px;\n}\n\n.pl-5 {\n padding-left: 5px;\n}\n\n.pr-5 {\n padding-right: 5px;\n}\n\n.pt-20 {\n padding-top: 20px;\n}\n\n.pb-20 {\n padding-bottom: 20px;\n}\n\n.pl-20 {\n padding-left: 20px;\n}\n\n.pr-20 {\n padding-right: 20px;\n}\n\n.d-flex {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n}\n\n.justify-content-start {\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: flex-start;\n}\n\n.justify-content-center {\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n}\n\n.justify-content-end {\n -webkit-box-pack: end;\n -ms-flex-pack: end;\n justify-content: flex-end;\n}\n\n.justify-content-between {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n}\n\n.align-items-start {\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n}\n\n.align-items-center {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.align-items-end {\n -webkit-box-align: end;\n -ms-flex-align: end;\n align-items: flex-end;\n}\n\n.w-10 {\n width: 10% !important;\n max-width: 10% !important;\n min-width: 10% !important;\n}\n\n.w-20 {\n width: 20% !important;\n max-width: 20% !important;\n min-width: 20% !important;\n}\n\n.w-30 {\n width: 30% !important;\n max-width: 30% !important;\n min-width: 30% !important;\n}\n\n.w-40 {\n width: 40% !important;\n max-width: 40% !important;\n min-width: 40% !important;\n}\n\n.w-50 {\n width: 50% !important;\n max-width: 50% !important;\n min-width: 50% !important;\n}\n\n.w-60 {\n width: 60% !important;\n max-width: 60% !important;\n min-width: 60% !important;\n}\n\n.w-70 {\n width: 70% !important;\n max-width: 70% !important;\n min-width: 70% !important;\n}\n\n.w-80 {\n width: 80% !important;\n max-width: 80% !important;\n min-width: 80% !important;\n}\n\n.w-90 {\n width: 90% !important;\n max-width: 90% !important;\n min-width: 90% !important;\n}\n\n.w-100 {\n width: 100% !important;\n max-width: 100% !important;\n min-width: 100% !important;\n}\n\n.card {\n background-color: #efefef;\n min-width: 500px;\n padding: 10px;\n border-radius: 3px;\n border-bottom: 1px solid #ccc;\n}\n\n.card-light {\n background-color: #fffafa;\n border: 1px solid #eee;\n border-bottom: 1px solid #ccc;\n}\n\nbutton {\n padding: 10px;\n font-size: 15px;\n outline: none;\n border: none;\n border-radius: 5px;\n border-bottom: 1px solid #ccc;\n background-color: #dad0d0;\n cursor: pointer;\n}\n\nbutton:hover {\n background-color: #f0eded;\n}\n\nbutton:active {\n background-color: white;\n}\n\nbutton.btn-primary {\n background-color: #316bc2;\n color: #fff;\n}\n\nbutton.btn-primary:hover {\n background-color: #5386d3;\n color: #fff;\n}\n\nbutton.btn-primary:active {\n background-color: #7ba3de;\n color: #fff;\n}\n\nbutton.btn-warning {\n background-color: #f5e20c;\n color: #000;\n}\n\nbutton.btn-warning:hover {\n background-color: #f9ee6e;\n color: #000;\n}\n\nbutton.btn-warning:active {\n background-color: #fbf49f;\n color: #000;\n}\n\nbutton.btn-info {\n background-color: #05a0f4;\n color: #fff;\n}\n\nbutton.btn-info:hover {\n background-color: #31b4fb;\n color: #fff;\n}\n\nbutton.btn-info:active {\n background-color: #63c6fc;\n color: #fff;\n}\n\nbutton.btn-success {\n background-color: #6dc454;\n color: #fff;\n}\n\nbutton.btn-success:hover {\n background-color: #8dd17a;\n color: #fff;\n}\n\nbutton.btn-success:active {\n background-color: #aedea0;\n color: #fff;\n}\n\nbutton.btn-danger {\n background-color: #c64b4b;\n color: #fff;\n}\n\nbutton.btn-danger:hover {\n background-color: #d27272;\n color: #fff;\n}\n\nbutton.btn-danger:active {\n background-color: #df9898;\n color: #fff;\n}\n\n.btn-sm {\n padding: 7px;\n font-size: 12px;\n}\n\n.form-group {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n margin-bottom: 10px;\n}\n\np {\n font-size: 14px;\n}\n\nlabel {\n font-size: 15px;\n display: inline-block;\n margin-bottom: 5px;\n}\n\nselect {\n outline: none;\n padding: 5px 10px;\n border: 1px solid #324354;\n}\n\ninput {\n outline: none;\n padding: 5px 10px;\n border: 1px solid #324354;\n}\n\ntextarea {\n outline: none;\n resize: none;\n padding: 5px 10px;\n border: 1px solid #324354;\n}\n\nheader {\n height: 50px;\n margin-bottom: 10px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n background-color: #324354;\n color: #fff;\n font-size: 20px;\n border-bottom: 2px solid #222b34;\n}\n\n.container {\n width: 100%;\n height: auto;\n padding: 10px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: start;\n}\n\nul.list {\n margin-top: 10px;\n list-style-type: none;\n}\n\nul.list li {\n padding: 5px 10px;\n background-color: #efefef;\n margin-bottom: 5px;\n border: 1px solid #ccc;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.pokemon--wars--app--container .game--area {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n width: 100%;\n padding: 10px;\n}\n\n.pokemon--wars--app--container .game--area h2 {\n margin-bottom: 20px;\n}\n\n.pokemon--wars--app--container .selection--container {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n width: 100%;\n padding: 10px;\n margin-bottom: 20px;\n}\n\n.pokemon--wars--app--container .selection--container img {\n -webkit-transition: all 0.5s;\n transition: all 0.5s;\n margin-right: 30px;\n}\n\n.pokemon--wars--app--container .selection--container img:last-child {\n margin-right: none;\n}\n\n.pokemon--wars--app--container .selection--container img.pikachu.selected-pokemon {\n border-radius: 10px;\n background-color: #f8c953c8;\n -webkit-transition: all 0.5s;\n transition: all 0.5s;\n}\n\n.pokemon--wars--app--container .selection--container img.pikachu:hover {\n border-radius: 10px;\n background-color: #f8c953c8;\n -webkit-transition: all 0.5s;\n transition: all 0.5s;\n}\n\n.pokemon--wars--app--container .selection--container img.bulbasaur.selected-pokemon {\n border-radius: 10px;\n background-color: #6ddba8c8;\n}\n\n.pokemon--wars--app--container .selection--container img.bulbasaur:hover {\n border-radius: 10px;\n background-color: #6ddba8c8;\n}\n\n.pokemon--wars--app--container .selection--container img.charmander.selected-pokemon {\n border-radius: 10px;\n background-color: #f7973fc8;\n}\n\n.pokemon--wars--app--container .selection--container img.charmander:hover {\n border-radius: 10px;\n background-color: #f7973fc8;\n}\n\n.pokemon--wars--app--container .selection--container img.squirtle.selected-pokemon {\n border-radius: 10px;\n background-color: #78eeffc8;\n}\n\n.pokemon--wars--app--container .selection--container img.squirtle:hover {\n border-radius: 10px;\n background-color: #78eeffc8;\n}\n\n.pokemon--wars--app--container .fight--area {\n width: 750px;\n}\n\n.pokemon--wars--app--container .health--container {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: end;\n -ms-flex-align: end;\n align-items: flex-end;\n}\n\n.pokemon--wars--app--container .name--health--bar {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.pokemon--wars--app--container .name--health--bar img {\n width: 70px;\n border-radius: 5px;\n}\n\n.pokemon--wars--app--container .name--health--bar img.pikachu {\n background-color: #f8c953c8;\n border: 2px solid #f8c953;\n}\n\n.pokemon--wars--app--container .name--health--bar img.bulbasaur {\n background-color: #6ddba8c8;\n border: 2px solid #6ddba8;\n}\n\n.pokemon--wars--app--container .name--health--bar img.charmander {\n background-color: #f7973fc8;\n border: 2px solid #f7973f;\n}\n\n.pokemon--wars--app--container .name--health--bar img.squirtle {\n background-color: #78eeffc8;\n border: 2px solid #78eeff;\n}\n\n.pokemon--wars--app--container .player--name {\n font-size: 18px;\n font-weight: bold;\n color: #324354;\n}\n\n.pokemon--wars--app--container .vs--container {\n font-size: 35px;\n color: #f7983f;\n font-weight: bold;\n font-style: italic;\n}\n\n.pokemon--wars--app--container progress {\n height: 50px;\n width: 280px;\n}\n\n.pokemon--wars--app--container progress[value] {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n width: 250px;\n height: 35px;\n}\n\n.pokemon--wars--app--container progress.pikachu[value]::-webkit-progress-bar {\n background-color: #f7983f27;\n border: 2px solid #f7983f;\n}\n\n.pokemon--wars--app--container progress.pikachu[value]::-webkit-progress-value {\n background-color: #f7973fc8;\n}\n\n.pokemon--wars--app--container progress.bulbasaur[value]::-webkit-progress-bar {\n background-color: #6ddba827;\n border: 2px solid #6ddba8;\n}\n\n.pokemon--wars--app--container progress.bulbasaur[value]::-webkit-progress-value {\n background-color: #6ddba8c8;\n}\n\n.pokemon--wars--app--container progress.charmander[value]::-webkit-progress-bar {\n background-color: #f7973f27;\n border: 2px solid #f7973f;\n}\n\n.pokemon--wars--app--container progress.charmander[value]::-webkit-progress-value {\n background-color: #f7973fc8;\n}\n\n.pokemon--wars--app--container progress.squirtle[value]::-webkit-progress-bar {\n background-color: #78eeff27;\n border: 2px solid #78eeff;\n}\n\n.pokemon--wars--app--container progress.squirtle[value]::-webkit-progress-value {\n background-color: #78eeffc8;\n}\n\n.pokemon--wars--app--container .attack--button--container {\n margin-top: 50px;\n}\n\n.pokemon--wars--app--container .logger--container {\n width: 400px;\n margin: 0 auto;\n margin-top: 50px;\n}\n\n.pokemon--wars--app--container .logger--container img {\n width: 40px;\n}\n\n.pokemon--wars--app--container .logger--container li {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n border-radius: 5px;\n}\n\n.pokemon--wars--app--container .game--finished--container {\n margin-top: 100px;\n font-size: 50px;\n}\n\n.css--class--app .css--palette {\n list-style-type: none;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.css--class--app .css--palette li {\n width: 50px;\n height: 50px;\n background-color: #ccc;\n border-radius: 50%;\n margin-left: 5px;\n border: 1px solid #bbb;\n}\n\n.css--class--app .result-box {\n width: 100%;\n height: 100px;\n background-color: #18bf71;\n margin-top: 15px;\n border-radius: 5px;\n border-bottom: 1px solid #ccc;\n -webkit-transition: background-color 0.5s;\n transition: background-color 0.5s;\n}\n\n.bookmark--app--container {\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[3];\n grid-template-columns: repeat(3, 1fr);\n grid-gap: 10px;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.bookmark--app--container .bookmark-item {\n width: 400px;\n background-color: #efefef;\n border-bottom: 1px solid #ccc;\n border-radius: 5px;\n padding: 10px;\n}\n\n.bookmark--app--container .bookmark-item .header {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.course--planner-app--container .user--action--container {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.course--planner-app--container .user--action--container .form-group {\n width: 80%;\n margin-right: 5px;\n}\n\n.bet--coupon--app .competition-list {\n padding: 0;\n border-radius: 5px;\n border: 1px solid #efefef;\n border-bottom: 1px solid #ccc;\n}\n\n.bet--coupon--app .my-coupon {\n padding: 0;\n border-radius: 5px;\n border: 1px solid #efefef;\n border-bottom: 1px solid #ccc;\n min-width: 400px !important;\n}\n\n.bet--coupon--app .my-coupon .card--header {\n background-color: #05a0f4 !important;\n}\n\n.bet--coupon--app .card--header {\n background-color: #324354 !important;\n color: #fff;\n border-top-left-radius: 5px;\n border-top-right-radius: 5px;\n padding: 10px;\n}\n\n.bet--coupon--app .card--body {\n background-color: #fff !important;\n padding: 10px;\n}\n\n.bet--coupon--app .competition-item {\n margin-bottom: 5px;\n padding: 10px 0;\n border-bottom: 1px solid #efefef;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.bet--coupon--app .competition-item:last-child {\n border-bottom: none;\n}\n\n.bet--coupon--app .competition-item .info--container {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: start;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n}\n\n.bet--coupon--app .competition-item .rates {\n width: 150px;\n text-align: right;\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[3];\n grid-template-columns: repeat(3, 1fr);\n}\n\n.bet--coupon--app .coupon-item {\n border-bottom: 1px solid #efefef;\n margin-bottom: 5px;\n padding: 10px 0;\n}\n\n.bet--coupon--app .coupon-item:last-child {\n border-bottom: none;\n}\n\n.bet--coupon--app .coupon--total--container {\n max-width: 300px;\n}\n\n.bet--coupon--app .coupon--total--container .my-coupon {\n min-width: 300px !important;\n}\n\n.bet--coupon--app .coupon--total--container .multiply--container {\n min-width: 300px !important;\n}\n\n.bet--coupon--app .coupon--total--container .multiply--container button:not(:last-child) {\n margin-right: 5px;\n margin-bottom: 5px;\n}\n\n.bet--coupon--app .multiply--buttons {\n -ms-flex-wrap: wrap;\n flex-wrap: wrap;\n}\n\n.contact--card--app {\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[4];\n grid-template-columns: repeat(4, 1fr);\n grid-gap: 20px;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.contact--card--app .contact-item {\n width: 180px;\n min-height: 282px;\n border-radius: 5px;\n background-color: #fff !important;\n}\n\n.contact--card--app .contact-item .invitation--header {\n width: 180px;\n height: 62px;\n background: url(\"https://static-exp1.licdn.com/sc/h/cpemy7gsm8bzfb5nnbbnswfdm\");\n background-size: cover;\n background-repeat: no-repeat;\n background-position: center;\n}\n\n.contact--card--app .contact-item .contact--info--container {\n padding: 10px;\n margin-top: 45px;\n}\n\n.contact--card--app .contact-item .contact--info--container p {\n font-size: 15px !important;\n}\n\n.contact--card--app .contact-item .contact--info--container a {\n font-size: 15px !important;\n}\n\n.contact--card--app .contact-item .action--button--container {\n margin-top: 10px;\n}\n\n.contact--card--app .contact-item .contact--image {\n border-radius: 50%;\n width: 100px;\n height: 100px;\n}\n\n.comment--like--dislike--app {\n width: 750px;\n}\n\n.chat--app--container .card {\n padding: 0;\n border-radius: 5px;\n border: 1px solid #efefef;\n border-bottom: 1px solid #ccc;\n max-width: 400px !important;\n}\n\n.chat--app--container .card .card--header {\n background-color: #316bc2 !important;\n color: #fff;\n border-top-left-radius: 5px;\n border-top-right-radius: 5px;\n padding: 10px;\n}\n\n.chat--app--container .card .card--body {\n background-color: #fff !important;\n padding: 10px;\n}\n\n.chat--app--container .card .card--body .active-user-item {\n margin-bottom: 20px;\n}\n\n.chat--app--container .card .card--body .active-user-item:last-child {\n margin-bottom: 0;\n}\n\n.chat--app--container .card .card--body .active-user-item .badge {\n background-color: #efefef;\n color: #333;\n text-transform: uppercase;\n padding: 10px;\n width: 40px;\n height: 40px;\n border-radius: 50%;\n}\n\n.chat--app--container .card .messages {\n list-style-type: none;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: flex-start;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n padding: 10px;\n height: calc(100vh - 200px);\n overflow-y: scroll;\n}\n\n.chat--app--container .card .messages li {\n max-width: 300px;\n padding: 5px 10px;\n margin-bottom: 15px;\n border-bottom: 1px solid #ccc;\n border-radius: 10px;\n background-color: #fffafa;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.chat--app--container .card .messages li small {\n margin-top: 10px;\n -ms-flex-item-align: end;\n align-self: flex-end;\n font-size: 12px;\n color: #ccc;\n font-style: italic;\n}\n\n.chat--app--container .card .messages li.current-user {\n -ms-flex-item-align: end;\n align-self: flex-end;\n background-color: #05a0f4;\n color: #fff;\n}\n\n.chat--app--container .card .text-container {\n margin-top: 30px;\n}\n\n.chat--app--container .card .text-container input {\n border: none;\n padding: 10px;\n height: 37px;\n width: calc(500px - 70px);\n border-bottom-left-radius: 5px;\n}\n\n.chat--app--container .card .text-container button {\n border-radius: 0 !important;\n margin-bottom: 0;\n border: none;\n border-bottom-right-radius: 5px !important;\n}\n\n.class--list--app .class-list {\n list-style-type: none !important;\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[3];\n grid-template-columns: repeat(3, 1fr);\n}\n\n.class--list--app .class-list li {\n margin-bottom: 5px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.class--list--app textarea {\n width: 100%;\n margin-top: 20px;\n}\n\n.rate--calculator--app .rate-list {\n list-style-type: none !important;\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[6];\n grid-template-columns: repeat(6, 1fr);\n}\n\n.rate--calculator--app .rate-list li {\n margin-bottom: 5px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.rate--calculator--app input#money {\n margin-top: 15px;\n}\n\n.rate--calculator--app .rates-container {\n margin-top: 20px;\n list-style-type: none;\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[3];\n grid-template-columns: repeat(3, 1fr);\n}\n\n.rate--calculator--app .rates-container li {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n margin-bottom: 5px;\n}\n\n.rate--calculator--app .rates-container li:last-child {\n margin-bottom: 0;\n}\n\n.rate--calculator--app .rates-container li strong {\n margin-right: 5px;\n}\n/*# sourceMappingURL=style.css.map */" }, { "path": "ders-1/odevler/odev-1/index.html", "content": "\n\n \n \n \n \n Ödev 1 | Template üzerine Veri Yazdırmak\n \n \n \n \n
    Ödev 1 | Template Üzerine Veri Yazdırmak
    \n\n
    \n
    \n \n

    VueJS Muazzam bir Framework - NAME (AGE)

    \n \n

    \n\n \n

    \n\n \n\n \n
    \n \n
    \n
    \n
    \n \n\n" }, { "path": "ders-1/odevler/odev-1/style.css", "content": "* {\n margin: 0;\n padding: 0;\n font-family: Arial, Helvetica, sans-serif;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n\n.bg-success {\n background-color: #6dc454 !important;\n color: #fff;\n}\n\n.bg-danger {\n background-color: #c64b4b !important;\n color: #fff;\n}\n\n.bg-primary {\n background-color: #316bc2 !important;\n color: #fff;\n}\n\n.bg-dark {\n background-color: #333 !important;\n color: #fff;\n}\n\n.text-left {\n text-align: left;\n}\n\n.text-right {\n text-align: right;\n}\n\n.text-center {\n text-align: center;\n}\n\n.text-info {\n color: #05a0f4;\n}\n\n.text-success {\n color: #6dc454;\n}\n\n.text-danger {\n color: #c64b4b;\n}\n\n.text-primary {\n color: #316bc2;\n}\n\n.text-dark {\n color: #333;\n}\n\n.text-muted {\n color: #ccc;\n}\n\n.font-weight-bold {\n font-weight: bold;\n}\n\n.font-italic {\n font-style: italic;\n}\n\n.mt-20 {\n margin-top: 20px;\n}\n\n.mb-20 {\n margin-bottom: 20px;\n}\n\n.ml-20 {\n margin-left: 20px;\n}\n\n.mr-20 {\n margin-right: 20px;\n}\n\n.mt-10 {\n margin-top: 10px;\n}\n\n.mb-10 {\n margin-bottom: 10px;\n}\n\n.ml-10 {\n margin-left: 10px;\n}\n\n.mr-10 {\n margin-right: 10px;\n}\n\n.mt-5 {\n margin-top: 5px;\n}\n\n.mb-5 {\n margin-bottom: 5px;\n}\n\n.ml-5 {\n margin-left: 5px;\n}\n\n.mr-5 {\n margin-right: 5px;\n}\n\n.pt-10 {\n padding-top: 10px;\n}\n\n.pb-10 {\n padding-bottom: 10px;\n}\n\n.pl-10 {\n padding-left: 10px;\n}\n\n.pr-10 {\n padding-right: 10px;\n}\n\n.pt-5 {\n padding-top: 5px;\n}\n\n.pb-5 {\n padding-bottom: 5px;\n}\n\n.pl-5 {\n padding-left: 5px;\n}\n\n.pr-5 {\n padding-right: 5px;\n}\n\n.pt-20 {\n padding-top: 20px;\n}\n\n.pb-20 {\n padding-bottom: 20px;\n}\n\n.pl-20 {\n padding-left: 20px;\n}\n\n.pr-20 {\n padding-right: 20px;\n}\n\n.d-flex {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n}\n\n.justify-content-start {\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: flex-start;\n}\n\n.justify-content-center {\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n}\n\n.justify-content-end {\n -webkit-box-pack: end;\n -ms-flex-pack: end;\n justify-content: flex-end;\n}\n\n.justify-content-between {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n}\n\n.align-items-start {\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n}\n\n.align-items-center {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.align-items-end {\n -webkit-box-align: end;\n -ms-flex-align: end;\n align-items: flex-end;\n}\n\n.w-10 {\n width: 10% !important;\n max-width: 10% !important;\n min-width: 10% !important;\n}\n\n.w-20 {\n width: 20% !important;\n max-width: 20% !important;\n min-width: 20% !important;\n}\n\n.w-30 {\n width: 30% !important;\n max-width: 30% !important;\n min-width: 30% !important;\n}\n\n.w-40 {\n width: 40% !important;\n max-width: 40% !important;\n min-width: 40% !important;\n}\n\n.w-50 {\n width: 50% !important;\n max-width: 50% !important;\n min-width: 50% !important;\n}\n\n.w-60 {\n width: 60% !important;\n max-width: 60% !important;\n min-width: 60% !important;\n}\n\n.w-70 {\n width: 70% !important;\n max-width: 70% !important;\n min-width: 70% !important;\n}\n\n.w-80 {\n width: 80% !important;\n max-width: 80% !important;\n min-width: 80% !important;\n}\n\n.w-90 {\n width: 90% !important;\n max-width: 90% !important;\n min-width: 90% !important;\n}\n\n.w-100 {\n width: 100% !important;\n max-width: 100% !important;\n min-width: 100% !important;\n}\n\n.card {\n background-color: #efefef;\n min-width: 500px;\n padding: 10px;\n border-radius: 3px;\n border-bottom: 1px solid #ccc;\n}\n\n.card-light {\n background-color: #fffafa;\n border: 1px solid #eee;\n border-bottom: 1px solid #ccc;\n}\n\nbutton {\n padding: 10px;\n font-size: 15px;\n outline: none;\n border: none;\n border-radius: 5px;\n border-bottom: 1px solid #ccc;\n background-color: #dad0d0;\n cursor: pointer;\n}\n\nbutton:hover {\n background-color: #f0eded;\n}\n\nbutton:active {\n background-color: white;\n}\n\nbutton.btn-primary {\n background-color: #316bc2;\n color: #fff;\n}\n\nbutton.btn-primary:hover {\n background-color: #5386d3;\n color: #fff;\n}\n\nbutton.btn-primary:active {\n background-color: #7ba3de;\n color: #fff;\n}\n\nbutton.btn-warning {\n background-color: #f5e20c;\n color: #000;\n}\n\nbutton.btn-warning:hover {\n background-color: #f9ee6e;\n color: #000;\n}\n\nbutton.btn-warning:active {\n background-color: #fbf49f;\n color: #000;\n}\n\nbutton.btn-info {\n background-color: #05a0f4;\n color: #fff;\n}\n\nbutton.btn-info:hover {\n background-color: #31b4fb;\n color: #fff;\n}\n\nbutton.btn-info:active {\n background-color: #63c6fc;\n color: #fff;\n}\n\nbutton.btn-success {\n background-color: #6dc454;\n color: #fff;\n}\n\nbutton.btn-success:hover {\n background-color: #8dd17a;\n color: #fff;\n}\n\nbutton.btn-success:active {\n background-color: #aedea0;\n color: #fff;\n}\n\nbutton.btn-danger {\n background-color: #c64b4b;\n color: #fff;\n}\n\nbutton.btn-danger:hover {\n background-color: #d27272;\n color: #fff;\n}\n\nbutton.btn-danger:active {\n background-color: #df9898;\n color: #fff;\n}\n\n.btn-sm {\n padding: 7px;\n font-size: 12px;\n}\n\n.form-group {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n margin-bottom: 10px;\n}\n\np {\n font-size: 14px;\n}\n\nlabel {\n font-size: 15px;\n display: inline-block;\n margin-bottom: 5px;\n}\n\nselect {\n outline: none;\n padding: 5px 10px;\n border: 1px solid #324354;\n}\n\ninput {\n outline: none;\n padding: 5px 10px;\n border: 1px solid #324354;\n}\n\ntextarea {\n outline: none;\n resize: none;\n padding: 5px 10px;\n border: 1px solid #324354;\n}\n\nheader {\n height: 50px;\n margin-bottom: 10px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n background-color: #324354;\n color: #fff;\n font-size: 20px;\n border-bottom: 2px solid #222b34;\n}\n\n.container {\n width: 100%;\n height: auto;\n padding: 10px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: start;\n}\n\nul.list {\n margin-top: 10px;\n list-style-type: none;\n}\n\nul.list li {\n padding: 5px 10px;\n background-color: #efefef;\n margin-bottom: 5px;\n border: 1px solid #ccc;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.pokemon--wars--app--container .game--area {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n width: 100%;\n padding: 10px;\n}\n\n.pokemon--wars--app--container .game--area h2 {\n margin-bottom: 20px;\n}\n\n.pokemon--wars--app--container .selection--container {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n width: 100%;\n padding: 10px;\n margin-bottom: 20px;\n}\n\n.pokemon--wars--app--container .selection--container img {\n -webkit-transition: all 0.5s;\n transition: all 0.5s;\n margin-right: 30px;\n}\n\n.pokemon--wars--app--container .selection--container img:last-child {\n margin-right: none;\n}\n\n.pokemon--wars--app--container .selection--container img.pikachu.selected-pokemon {\n border-radius: 10px;\n background-color: #f8c953c8;\n -webkit-transition: all 0.5s;\n transition: all 0.5s;\n}\n\n.pokemon--wars--app--container .selection--container img.pikachu:hover {\n border-radius: 10px;\n background-color: #f8c953c8;\n -webkit-transition: all 0.5s;\n transition: all 0.5s;\n}\n\n.pokemon--wars--app--container .selection--container img.bulbasaur.selected-pokemon {\n border-radius: 10px;\n background-color: #6ddba8c8;\n}\n\n.pokemon--wars--app--container .selection--container img.bulbasaur:hover {\n border-radius: 10px;\n background-color: #6ddba8c8;\n}\n\n.pokemon--wars--app--container .selection--container img.charmander.selected-pokemon {\n border-radius: 10px;\n background-color: #f7973fc8;\n}\n\n.pokemon--wars--app--container .selection--container img.charmander:hover {\n border-radius: 10px;\n background-color: #f7973fc8;\n}\n\n.pokemon--wars--app--container .selection--container img.squirtle.selected-pokemon {\n border-radius: 10px;\n background-color: #78eeffc8;\n}\n\n.pokemon--wars--app--container .selection--container img.squirtle:hover {\n border-radius: 10px;\n background-color: #78eeffc8;\n}\n\n.pokemon--wars--app--container .fight--area {\n width: 750px;\n}\n\n.pokemon--wars--app--container .health--container {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: end;\n -ms-flex-align: end;\n align-items: flex-end;\n}\n\n.pokemon--wars--app--container .name--health--bar {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.pokemon--wars--app--container .name--health--bar img {\n width: 70px;\n border-radius: 5px;\n}\n\n.pokemon--wars--app--container .name--health--bar img.pikachu {\n background-color: #f8c953c8;\n border: 2px solid #f8c953;\n}\n\n.pokemon--wars--app--container .name--health--bar img.bulbasaur {\n background-color: #6ddba8c8;\n border: 2px solid #6ddba8;\n}\n\n.pokemon--wars--app--container .name--health--bar img.charmander {\n background-color: #f7973fc8;\n border: 2px solid #f7973f;\n}\n\n.pokemon--wars--app--container .name--health--bar img.squirtle {\n background-color: #78eeffc8;\n border: 2px solid #78eeff;\n}\n\n.pokemon--wars--app--container .player--name {\n font-size: 18px;\n font-weight: bold;\n color: #324354;\n}\n\n.pokemon--wars--app--container .vs--container {\n font-size: 35px;\n color: #f7983f;\n font-weight: bold;\n font-style: italic;\n}\n\n.pokemon--wars--app--container progress {\n height: 50px;\n width: 280px;\n}\n\n.pokemon--wars--app--container progress[value] {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n width: 250px;\n height: 35px;\n}\n\n.pokemon--wars--app--container progress.pikachu[value]::-webkit-progress-bar {\n background-color: #f7983f27;\n border: 2px solid #f7983f;\n}\n\n.pokemon--wars--app--container progress.pikachu[value]::-webkit-progress-value {\n background-color: #f7973fc8;\n}\n\n.pokemon--wars--app--container progress.bulbasaur[value]::-webkit-progress-bar {\n background-color: #6ddba827;\n border: 2px solid #6ddba8;\n}\n\n.pokemon--wars--app--container progress.bulbasaur[value]::-webkit-progress-value {\n background-color: #6ddba8c8;\n}\n\n.pokemon--wars--app--container progress.charmander[value]::-webkit-progress-bar {\n background-color: #f7973f27;\n border: 2px solid #f7973f;\n}\n\n.pokemon--wars--app--container progress.charmander[value]::-webkit-progress-value {\n background-color: #f7973fc8;\n}\n\n.pokemon--wars--app--container progress.squirtle[value]::-webkit-progress-bar {\n background-color: #78eeff27;\n border: 2px solid #78eeff;\n}\n\n.pokemon--wars--app--container progress.squirtle[value]::-webkit-progress-value {\n background-color: #78eeffc8;\n}\n\n.pokemon--wars--app--container .attack--button--container {\n margin-top: 50px;\n}\n\n.pokemon--wars--app--container .logger--container {\n width: 400px;\n margin: 0 auto;\n margin-top: 50px;\n}\n\n.pokemon--wars--app--container .logger--container img {\n width: 40px;\n}\n\n.pokemon--wars--app--container .logger--container li {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n border-radius: 5px;\n}\n\n.pokemon--wars--app--container .game--finished--container {\n margin-top: 100px;\n font-size: 50px;\n}\n\n.css--class--app .css--palette {\n list-style-type: none;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.css--class--app .css--palette li {\n width: 50px;\n height: 50px;\n background-color: #ccc;\n border-radius: 50%;\n margin-left: 5px;\n border: 1px solid #bbb;\n}\n\n.css--class--app .result-box {\n width: 100%;\n height: 100px;\n background-color: #18bf71;\n margin-top: 15px;\n border-radius: 5px;\n border-bottom: 1px solid #ccc;\n -webkit-transition: background-color 0.5s;\n transition: background-color 0.5s;\n}\n\n.bookmark--app--container {\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[3];\n grid-template-columns: repeat(3, 1fr);\n grid-gap: 10px;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.bookmark--app--container .bookmark-item {\n width: 400px;\n background-color: #efefef;\n border-bottom: 1px solid #ccc;\n border-radius: 5px;\n padding: 10px;\n}\n\n.bookmark--app--container .bookmark-item .header {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.course--planner-app--container .user--action--container {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.course--planner-app--container .user--action--container .form-group {\n width: 80%;\n margin-right: 5px;\n}\n\n.bet--coupon--app .competition-list {\n padding: 0;\n border-radius: 5px;\n border: 1px solid #efefef;\n border-bottom: 1px solid #ccc;\n}\n\n.bet--coupon--app .my-coupon {\n padding: 0;\n border-radius: 5px;\n border: 1px solid #efefef;\n border-bottom: 1px solid #ccc;\n min-width: 400px !important;\n}\n\n.bet--coupon--app .my-coupon .card--header {\n background-color: #05a0f4 !important;\n}\n\n.bet--coupon--app .card--header {\n background-color: #324354 !important;\n color: #fff;\n border-top-left-radius: 5px;\n border-top-right-radius: 5px;\n padding: 10px;\n}\n\n.bet--coupon--app .card--body {\n background-color: #fff !important;\n padding: 10px;\n}\n\n.bet--coupon--app .competition-item {\n margin-bottom: 5px;\n padding: 10px 0;\n border-bottom: 1px solid #efefef;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.bet--coupon--app .competition-item:last-child {\n border-bottom: none;\n}\n\n.bet--coupon--app .competition-item .info--container {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: start;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n}\n\n.bet--coupon--app .competition-item .rates {\n width: 150px;\n text-align: right;\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[3];\n grid-template-columns: repeat(3, 1fr);\n}\n\n.bet--coupon--app .coupon-item {\n border-bottom: 1px solid #efefef;\n margin-bottom: 5px;\n padding: 10px 0;\n}\n\n.bet--coupon--app .coupon-item:last-child {\n border-bottom: none;\n}\n\n.bet--coupon--app .coupon--total--container {\n max-width: 300px;\n}\n\n.bet--coupon--app .coupon--total--container .my-coupon {\n min-width: 300px !important;\n}\n\n.bet--coupon--app .coupon--total--container .multiply--container {\n min-width: 300px !important;\n}\n\n.bet--coupon--app .coupon--total--container .multiply--container button:not(:last-child) {\n margin-right: 5px;\n margin-bottom: 5px;\n}\n\n.bet--coupon--app .multiply--buttons {\n -ms-flex-wrap: wrap;\n flex-wrap: wrap;\n}\n\n.contact--card--app {\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[4];\n grid-template-columns: repeat(4, 1fr);\n grid-gap: 20px;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.contact--card--app .contact-item {\n width: 180px;\n min-height: 282px;\n border-radius: 5px;\n background-color: #fff !important;\n}\n\n.contact--card--app .contact-item .invitation--header {\n width: 180px;\n height: 62px;\n background: url(\"https://static-exp1.licdn.com/sc/h/cpemy7gsm8bzfb5nnbbnswfdm\");\n background-size: cover;\n background-repeat: no-repeat;\n background-position: center;\n}\n\n.contact--card--app .contact-item .contact--info--container {\n padding: 10px;\n margin-top: 45px;\n}\n\n.contact--card--app .contact-item .contact--info--container p {\n font-size: 15px !important;\n}\n\n.contact--card--app .contact-item .contact--info--container a {\n font-size: 15px !important;\n}\n\n.contact--card--app .contact-item .action--button--container {\n margin-top: 10px;\n}\n\n.contact--card--app .contact-item .contact--image {\n border-radius: 50%;\n width: 100px;\n height: 100px;\n}\n\n.comment--like--dislike--app {\n width: 750px;\n}\n\n.chat--app--container .card {\n padding: 0;\n border-radius: 5px;\n border: 1px solid #efefef;\n border-bottom: 1px solid #ccc;\n max-width: 400px !important;\n}\n\n.chat--app--container .card .card--header {\n background-color: #316bc2 !important;\n color: #fff;\n border-top-left-radius: 5px;\n border-top-right-radius: 5px;\n padding: 10px;\n}\n\n.chat--app--container .card .card--body {\n background-color: #fff !important;\n padding: 10px;\n}\n\n.chat--app--container .card .card--body .active-user-item {\n margin-bottom: 20px;\n}\n\n.chat--app--container .card .card--body .active-user-item:last-child {\n margin-bottom: 0;\n}\n\n.chat--app--container .card .card--body .active-user-item .badge {\n background-color: #efefef;\n color: #333;\n text-transform: uppercase;\n padding: 10px;\n width: 40px;\n height: 40px;\n border-radius: 50%;\n}\n\n.chat--app--container .card .messages {\n list-style-type: none;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: flex-start;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n padding: 10px;\n height: calc(100vh - 200px);\n overflow-y: scroll;\n}\n\n.chat--app--container .card .messages li {\n max-width: 300px;\n padding: 5px 10px;\n margin-bottom: 15px;\n border-bottom: 1px solid #ccc;\n border-radius: 10px;\n background-color: #fffafa;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.chat--app--container .card .messages li small {\n margin-top: 10px;\n -ms-flex-item-align: end;\n align-self: flex-end;\n font-size: 12px;\n color: #ccc;\n font-style: italic;\n}\n\n.chat--app--container .card .messages li.current-user {\n -ms-flex-item-align: end;\n align-self: flex-end;\n background-color: #05a0f4;\n color: #fff;\n}\n\n.chat--app--container .card .text-container {\n margin-top: 30px;\n}\n\n.chat--app--container .card .text-container input {\n border: none;\n padding: 10px;\n height: 37px;\n width: calc(500px - 70px);\n border-bottom-left-radius: 5px;\n}\n\n.chat--app--container .card .text-container button {\n border-radius: 0 !important;\n margin-bottom: 0;\n border: none;\n border-bottom-right-radius: 5px !important;\n}\n\n.class--list--app .class-list {\n list-style-type: none !important;\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[3];\n grid-template-columns: repeat(3, 1fr);\n}\n\n.class--list--app .class-list li {\n margin-bottom: 5px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.class--list--app textarea {\n width: 100%;\n margin-top: 20px;\n}\n\n.rate--calculator--app .rate-list {\n list-style-type: none !important;\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[6];\n grid-template-columns: repeat(6, 1fr);\n}\n\n.rate--calculator--app .rate-list li {\n margin-bottom: 5px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.rate--calculator--app input#money {\n margin-top: 15px;\n}\n\n.rate--calculator--app .rates-container {\n margin-top: 20px;\n list-style-type: none;\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[3];\n grid-template-columns: repeat(3, 1fr);\n}\n\n.rate--calculator--app .rates-container li {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n margin-bottom: 5px;\n}\n\n.rate--calculator--app .rates-container li:last-child {\n margin-bottom: 0;\n}\n\n.rate--calculator--app .rates-container li strong {\n margin-right: 5px;\n}\n/*# sourceMappingURL=style.css.map */" }, { "path": "ders-1/odevler/odev-2/app.js", "content": "const app = Vue.createApp({\n data() {\n return {\n value: \"\",\n };\n },\n});\napp.mount(\"#exercise\");\n" }, { "path": "ders-1/odevler/odev-2/index.html", "content": "\n\n \n \n \n \n Ödev 2 | Event\n \n \n \n \n
    Ödev 2 | Events
    \n
    \n
    \n \n
    \n \n
    \n \n
    \n \n

    {{ value }}

    \n
    \n \n
    \n \n

    {{ value }}

    \n
    \n
    \n
    \n \n\n" }, { "path": "ders-1/odevler/odev-2/style.css", "content": "* {\n margin: 0;\n padding: 0;\n font-family: Arial, Helvetica, sans-serif;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n\n.bg-success {\n background-color: #6dc454 !important;\n color: #fff;\n}\n\n.bg-danger {\n background-color: #c64b4b !important;\n color: #fff;\n}\n\n.bg-primary {\n background-color: #316bc2 !important;\n color: #fff;\n}\n\n.bg-dark {\n background-color: #333 !important;\n color: #fff;\n}\n\n.text-left {\n text-align: left;\n}\n\n.text-right {\n text-align: right;\n}\n\n.text-center {\n text-align: center;\n}\n\n.text-info {\n color: #05a0f4;\n}\n\n.text-success {\n color: #6dc454;\n}\n\n.text-danger {\n color: #c64b4b;\n}\n\n.text-primary {\n color: #316bc2;\n}\n\n.text-dark {\n color: #333;\n}\n\n.text-muted {\n color: #ccc;\n}\n\n.font-weight-bold {\n font-weight: bold;\n}\n\n.font-italic {\n font-style: italic;\n}\n\n.mt-20 {\n margin-top: 20px;\n}\n\n.mb-20 {\n margin-bottom: 20px;\n}\n\n.ml-20 {\n margin-left: 20px;\n}\n\n.mr-20 {\n margin-right: 20px;\n}\n\n.mt-10 {\n margin-top: 10px;\n}\n\n.mb-10 {\n margin-bottom: 10px;\n}\n\n.ml-10 {\n margin-left: 10px;\n}\n\n.mr-10 {\n margin-right: 10px;\n}\n\n.mt-5 {\n margin-top: 5px;\n}\n\n.mb-5 {\n margin-bottom: 5px;\n}\n\n.ml-5 {\n margin-left: 5px;\n}\n\n.mr-5 {\n margin-right: 5px;\n}\n\n.pt-10 {\n padding-top: 10px;\n}\n\n.pb-10 {\n padding-bottom: 10px;\n}\n\n.pl-10 {\n padding-left: 10px;\n}\n\n.pr-10 {\n padding-right: 10px;\n}\n\n.pt-5 {\n padding-top: 5px;\n}\n\n.pb-5 {\n padding-bottom: 5px;\n}\n\n.pl-5 {\n padding-left: 5px;\n}\n\n.pr-5 {\n padding-right: 5px;\n}\n\n.pt-20 {\n padding-top: 20px;\n}\n\n.pb-20 {\n padding-bottom: 20px;\n}\n\n.pl-20 {\n padding-left: 20px;\n}\n\n.pr-20 {\n padding-right: 20px;\n}\n\n.d-flex {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n}\n\n.justify-content-start {\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: flex-start;\n}\n\n.justify-content-center {\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n}\n\n.justify-content-end {\n -webkit-box-pack: end;\n -ms-flex-pack: end;\n justify-content: flex-end;\n}\n\n.justify-content-between {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n}\n\n.align-items-start {\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n}\n\n.align-items-center {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.align-items-end {\n -webkit-box-align: end;\n -ms-flex-align: end;\n align-items: flex-end;\n}\n\n.w-10 {\n width: 10% !important;\n max-width: 10% !important;\n min-width: 10% !important;\n}\n\n.w-20 {\n width: 20% !important;\n max-width: 20% !important;\n min-width: 20% !important;\n}\n\n.w-30 {\n width: 30% !important;\n max-width: 30% !important;\n min-width: 30% !important;\n}\n\n.w-40 {\n width: 40% !important;\n max-width: 40% !important;\n min-width: 40% !important;\n}\n\n.w-50 {\n width: 50% !important;\n max-width: 50% !important;\n min-width: 50% !important;\n}\n\n.w-60 {\n width: 60% !important;\n max-width: 60% !important;\n min-width: 60% !important;\n}\n\n.w-70 {\n width: 70% !important;\n max-width: 70% !important;\n min-width: 70% !important;\n}\n\n.w-80 {\n width: 80% !important;\n max-width: 80% !important;\n min-width: 80% !important;\n}\n\n.w-90 {\n width: 90% !important;\n max-width: 90% !important;\n min-width: 90% !important;\n}\n\n.w-100 {\n width: 100% !important;\n max-width: 100% !important;\n min-width: 100% !important;\n}\n\n.card {\n background-color: #efefef;\n min-width: 500px;\n padding: 10px;\n border-radius: 3px;\n border-bottom: 1px solid #ccc;\n}\n\n.card-light {\n background-color: #fffafa;\n border: 1px solid #eee;\n border-bottom: 1px solid #ccc;\n}\n\nbutton {\n padding: 10px;\n font-size: 15px;\n outline: none;\n border: none;\n border-radius: 5px;\n border-bottom: 1px solid #ccc;\n background-color: #dad0d0;\n cursor: pointer;\n}\n\nbutton:hover {\n background-color: #f0eded;\n}\n\nbutton:active {\n background-color: white;\n}\n\nbutton.btn-primary {\n background-color: #316bc2;\n color: #fff;\n}\n\nbutton.btn-primary:hover {\n background-color: #5386d3;\n color: #fff;\n}\n\nbutton.btn-primary:active {\n background-color: #7ba3de;\n color: #fff;\n}\n\nbutton.btn-warning {\n background-color: #f5e20c;\n color: #000;\n}\n\nbutton.btn-warning:hover {\n background-color: #f9ee6e;\n color: #000;\n}\n\nbutton.btn-warning:active {\n background-color: #fbf49f;\n color: #000;\n}\n\nbutton.btn-info {\n background-color: #05a0f4;\n color: #fff;\n}\n\nbutton.btn-info:hover {\n background-color: #31b4fb;\n color: #fff;\n}\n\nbutton.btn-info:active {\n background-color: #63c6fc;\n color: #fff;\n}\n\nbutton.btn-success {\n background-color: #6dc454;\n color: #fff;\n}\n\nbutton.btn-success:hover {\n background-color: #8dd17a;\n color: #fff;\n}\n\nbutton.btn-success:active {\n background-color: #aedea0;\n color: #fff;\n}\n\nbutton.btn-danger {\n background-color: #c64b4b;\n color: #fff;\n}\n\nbutton.btn-danger:hover {\n background-color: #d27272;\n color: #fff;\n}\n\nbutton.btn-danger:active {\n background-color: #df9898;\n color: #fff;\n}\n\n.btn-sm {\n padding: 7px;\n font-size: 12px;\n}\n\n.form-group {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n margin-bottom: 10px;\n}\n\np {\n font-size: 14px;\n}\n\nlabel {\n font-size: 15px;\n display: inline-block;\n margin-bottom: 5px;\n}\n\nselect {\n outline: none;\n padding: 5px 10px;\n border: 1px solid #324354;\n}\n\ninput {\n outline: none;\n padding: 5px 10px;\n border: 1px solid #324354;\n}\n\ntextarea {\n outline: none;\n resize: none;\n padding: 5px 10px;\n border: 1px solid #324354;\n}\n\nheader {\n height: 50px;\n margin-bottom: 10px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n background-color: #324354;\n color: #fff;\n font-size: 20px;\n border-bottom: 2px solid #222b34;\n}\n\n.container {\n width: 100%;\n height: auto;\n padding: 10px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: start;\n}\n\nul.list {\n margin-top: 10px;\n list-style-type: none;\n}\n\nul.list li {\n padding: 5px 10px;\n background-color: #efefef;\n margin-bottom: 5px;\n border: 1px solid #ccc;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.pokemon--wars--app--container .game--area {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n width: 100%;\n padding: 10px;\n}\n\n.pokemon--wars--app--container .game--area h2 {\n margin-bottom: 20px;\n}\n\n.pokemon--wars--app--container .selection--container {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n width: 100%;\n padding: 10px;\n margin-bottom: 20px;\n}\n\n.pokemon--wars--app--container .selection--container img {\n -webkit-transition: all 0.5s;\n transition: all 0.5s;\n margin-right: 30px;\n}\n\n.pokemon--wars--app--container .selection--container img:last-child {\n margin-right: none;\n}\n\n.pokemon--wars--app--container .selection--container img.pikachu.selected-pokemon {\n border-radius: 10px;\n background-color: #f8c953c8;\n -webkit-transition: all 0.5s;\n transition: all 0.5s;\n}\n\n.pokemon--wars--app--container .selection--container img.pikachu:hover {\n border-radius: 10px;\n background-color: #f8c953c8;\n -webkit-transition: all 0.5s;\n transition: all 0.5s;\n}\n\n.pokemon--wars--app--container .selection--container img.bulbasaur.selected-pokemon {\n border-radius: 10px;\n background-color: #6ddba8c8;\n}\n\n.pokemon--wars--app--container .selection--container img.bulbasaur:hover {\n border-radius: 10px;\n background-color: #6ddba8c8;\n}\n\n.pokemon--wars--app--container .selection--container img.charmander.selected-pokemon {\n border-radius: 10px;\n background-color: #f7973fc8;\n}\n\n.pokemon--wars--app--container .selection--container img.charmander:hover {\n border-radius: 10px;\n background-color: #f7973fc8;\n}\n\n.pokemon--wars--app--container .selection--container img.squirtle.selected-pokemon {\n border-radius: 10px;\n background-color: #78eeffc8;\n}\n\n.pokemon--wars--app--container .selection--container img.squirtle:hover {\n border-radius: 10px;\n background-color: #78eeffc8;\n}\n\n.pokemon--wars--app--container .fight--area {\n width: 750px;\n}\n\n.pokemon--wars--app--container .health--container {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: end;\n -ms-flex-align: end;\n align-items: flex-end;\n}\n\n.pokemon--wars--app--container .name--health--bar {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.pokemon--wars--app--container .name--health--bar img {\n width: 70px;\n border-radius: 5px;\n}\n\n.pokemon--wars--app--container .name--health--bar img.pikachu {\n background-color: #f8c953c8;\n border: 2px solid #f8c953;\n}\n\n.pokemon--wars--app--container .name--health--bar img.bulbasaur {\n background-color: #6ddba8c8;\n border: 2px solid #6ddba8;\n}\n\n.pokemon--wars--app--container .name--health--bar img.charmander {\n background-color: #f7973fc8;\n border: 2px solid #f7973f;\n}\n\n.pokemon--wars--app--container .name--health--bar img.squirtle {\n background-color: #78eeffc8;\n border: 2px solid #78eeff;\n}\n\n.pokemon--wars--app--container .player--name {\n font-size: 18px;\n font-weight: bold;\n color: #324354;\n}\n\n.pokemon--wars--app--container .vs--container {\n font-size: 35px;\n color: #f7983f;\n font-weight: bold;\n font-style: italic;\n}\n\n.pokemon--wars--app--container progress {\n height: 50px;\n width: 280px;\n}\n\n.pokemon--wars--app--container progress[value] {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n width: 250px;\n height: 35px;\n}\n\n.pokemon--wars--app--container progress.pikachu[value]::-webkit-progress-bar {\n background-color: #f7983f27;\n border: 2px solid #f7983f;\n}\n\n.pokemon--wars--app--container progress.pikachu[value]::-webkit-progress-value {\n background-color: #f7973fc8;\n}\n\n.pokemon--wars--app--container progress.bulbasaur[value]::-webkit-progress-bar {\n background-color: #6ddba827;\n border: 2px solid #6ddba8;\n}\n\n.pokemon--wars--app--container progress.bulbasaur[value]::-webkit-progress-value {\n background-color: #6ddba8c8;\n}\n\n.pokemon--wars--app--container progress.charmander[value]::-webkit-progress-bar {\n background-color: #f7973f27;\n border: 2px solid #f7973f;\n}\n\n.pokemon--wars--app--container progress.charmander[value]::-webkit-progress-value {\n background-color: #f7973fc8;\n}\n\n.pokemon--wars--app--container progress.squirtle[value]::-webkit-progress-bar {\n background-color: #78eeff27;\n border: 2px solid #78eeff;\n}\n\n.pokemon--wars--app--container progress.squirtle[value]::-webkit-progress-value {\n background-color: #78eeffc8;\n}\n\n.pokemon--wars--app--container .attack--button--container {\n margin-top: 50px;\n}\n\n.pokemon--wars--app--container .logger--container {\n width: 400px;\n margin: 0 auto;\n margin-top: 50px;\n}\n\n.pokemon--wars--app--container .logger--container img {\n width: 40px;\n}\n\n.pokemon--wars--app--container .logger--container li {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n border-radius: 5px;\n}\n\n.pokemon--wars--app--container .game--finished--container {\n margin-top: 100px;\n font-size: 50px;\n}\n\n.css--class--app .css--palette {\n list-style-type: none;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.css--class--app .css--palette li {\n width: 50px;\n height: 50px;\n background-color: #ccc;\n border-radius: 50%;\n margin-left: 5px;\n border: 1px solid #bbb;\n}\n\n.css--class--app .result-box {\n width: 100%;\n height: 100px;\n background-color: #18bf71;\n margin-top: 15px;\n border-radius: 5px;\n border-bottom: 1px solid #ccc;\n -webkit-transition: background-color 0.5s;\n transition: background-color 0.5s;\n}\n\n.bookmark--app--container {\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[3];\n grid-template-columns: repeat(3, 1fr);\n grid-gap: 10px;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.bookmark--app--container .bookmark-item {\n width: 400px;\n background-color: #efefef;\n border-bottom: 1px solid #ccc;\n border-radius: 5px;\n padding: 10px;\n}\n\n.bookmark--app--container .bookmark-item .header {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.course--planner-app--container .user--action--container {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.course--planner-app--container .user--action--container .form-group {\n width: 80%;\n margin-right: 5px;\n}\n\n.bet--coupon--app .competition-list {\n padding: 0;\n border-radius: 5px;\n border: 1px solid #efefef;\n border-bottom: 1px solid #ccc;\n}\n\n.bet--coupon--app .my-coupon {\n padding: 0;\n border-radius: 5px;\n border: 1px solid #efefef;\n border-bottom: 1px solid #ccc;\n min-width: 400px !important;\n}\n\n.bet--coupon--app .my-coupon .card--header {\n background-color: #05a0f4 !important;\n}\n\n.bet--coupon--app .card--header {\n background-color: #324354 !important;\n color: #fff;\n border-top-left-radius: 5px;\n border-top-right-radius: 5px;\n padding: 10px;\n}\n\n.bet--coupon--app .card--body {\n background-color: #fff !important;\n padding: 10px;\n}\n\n.bet--coupon--app .competition-item {\n margin-bottom: 5px;\n padding: 10px 0;\n border-bottom: 1px solid #efefef;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.bet--coupon--app .competition-item:last-child {\n border-bottom: none;\n}\n\n.bet--coupon--app .competition-item .info--container {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: start;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n}\n\n.bet--coupon--app .competition-item .rates {\n width: 150px;\n text-align: right;\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[3];\n grid-template-columns: repeat(3, 1fr);\n}\n\n.bet--coupon--app .coupon-item {\n border-bottom: 1px solid #efefef;\n margin-bottom: 5px;\n padding: 10px 0;\n}\n\n.bet--coupon--app .coupon-item:last-child {\n border-bottom: none;\n}\n\n.bet--coupon--app .coupon--total--container {\n max-width: 300px;\n}\n\n.bet--coupon--app .coupon--total--container .my-coupon {\n min-width: 300px !important;\n}\n\n.bet--coupon--app .coupon--total--container .multiply--container {\n min-width: 300px !important;\n}\n\n.bet--coupon--app .coupon--total--container .multiply--container button:not(:last-child) {\n margin-right: 5px;\n margin-bottom: 5px;\n}\n\n.bet--coupon--app .multiply--buttons {\n -ms-flex-wrap: wrap;\n flex-wrap: wrap;\n}\n\n.contact--card--app {\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[4];\n grid-template-columns: repeat(4, 1fr);\n grid-gap: 20px;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.contact--card--app .contact-item {\n width: 180px;\n min-height: 282px;\n border-radius: 5px;\n background-color: #fff !important;\n}\n\n.contact--card--app .contact-item .invitation--header {\n width: 180px;\n height: 62px;\n background: url(\"https://static-exp1.licdn.com/sc/h/cpemy7gsm8bzfb5nnbbnswfdm\");\n background-size: cover;\n background-repeat: no-repeat;\n background-position: center;\n}\n\n.contact--card--app .contact-item .contact--info--container {\n padding: 10px;\n margin-top: 45px;\n}\n\n.contact--card--app .contact-item .contact--info--container p {\n font-size: 15px !important;\n}\n\n.contact--card--app .contact-item .contact--info--container a {\n font-size: 15px !important;\n}\n\n.contact--card--app .contact-item .action--button--container {\n margin-top: 10px;\n}\n\n.contact--card--app .contact-item .contact--image {\n border-radius: 50%;\n width: 100px;\n height: 100px;\n}\n\n.comment--like--dislike--app {\n width: 750px;\n}\n\n.chat--app--container .card {\n padding: 0;\n border-radius: 5px;\n border: 1px solid #efefef;\n border-bottom: 1px solid #ccc;\n max-width: 400px !important;\n}\n\n.chat--app--container .card .card--header {\n background-color: #316bc2 !important;\n color: #fff;\n border-top-left-radius: 5px;\n border-top-right-radius: 5px;\n padding: 10px;\n}\n\n.chat--app--container .card .card--body {\n background-color: #fff !important;\n padding: 10px;\n}\n\n.chat--app--container .card .card--body .active-user-item {\n margin-bottom: 20px;\n}\n\n.chat--app--container .card .card--body .active-user-item:last-child {\n margin-bottom: 0;\n}\n\n.chat--app--container .card .card--body .active-user-item .badge {\n background-color: #efefef;\n color: #333;\n text-transform: uppercase;\n padding: 10px;\n width: 40px;\n height: 40px;\n border-radius: 50%;\n}\n\n.chat--app--container .card .messages {\n list-style-type: none;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: flex-start;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n padding: 10px;\n height: calc(100vh - 200px);\n overflow-y: scroll;\n}\n\n.chat--app--container .card .messages li {\n max-width: 300px;\n padding: 5px 10px;\n margin-bottom: 15px;\n border-bottom: 1px solid #ccc;\n border-radius: 10px;\n background-color: #fffafa;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.chat--app--container .card .messages li small {\n margin-top: 10px;\n -ms-flex-item-align: end;\n align-self: flex-end;\n font-size: 12px;\n color: #ccc;\n font-style: italic;\n}\n\n.chat--app--container .card .messages li.current-user {\n -ms-flex-item-align: end;\n align-self: flex-end;\n background-color: #05a0f4;\n color: #fff;\n}\n\n.chat--app--container .card .text-container {\n margin-top: 30px;\n}\n\n.chat--app--container .card .text-container input {\n border: none;\n padding: 10px;\n height: 37px;\n width: calc(500px - 70px);\n border-bottom-left-radius: 5px;\n}\n\n.chat--app--container .card .text-container button {\n border-radius: 0 !important;\n margin-bottom: 0;\n border: none;\n border-bottom-right-radius: 5px !important;\n}\n\n.class--list--app .class-list {\n list-style-type: none !important;\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[3];\n grid-template-columns: repeat(3, 1fr);\n}\n\n.class--list--app .class-list li {\n margin-bottom: 5px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.class--list--app textarea {\n width: 100%;\n margin-top: 20px;\n}\n\n.rate--calculator--app .rate-list {\n list-style-type: none !important;\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[6];\n grid-template-columns: repeat(6, 1fr);\n}\n\n.rate--calculator--app .rate-list li {\n margin-bottom: 5px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.rate--calculator--app input#money {\n margin-top: 15px;\n}\n\n.rate--calculator--app .rates-container {\n margin-top: 20px;\n list-style-type: none;\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[3];\n grid-template-columns: repeat(3, 1fr);\n}\n\n.rate--calculator--app .rates-container li {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n margin-bottom: 5px;\n}\n\n.rate--calculator--app .rates-container li:last-child {\n margin-bottom: 0;\n}\n\n.rate--calculator--app .rates-container li strong {\n margin-right: 5px;\n}\n/*# sourceMappingURL=style.css.map */" }, { "path": "ders-1/odevler/odev-3/app.js", "content": "new Vue({\n el: '#exercise',\n data: {\n value: 0\n }\n });" }, { "path": "ders-1/odevler/odev-3/index.html", "content": "\n\n \n \n \n \n Reactivity\n \n \n \n \n
    Ödev 3 | Reactivity
    \n
    \n
    \n
    \n \n \n
    \n

    Şuanki Değer: {{ value }}

    \n \n \n

    {{ result }}

    \n
    \n \n \n
    \n \n

    {{ value }}

    \n
    \n
    \n
    \n
    \n \n \n\n" }, { "path": "ders-1/odevler/odev-3/style.css", "content": "* {\n margin: 0;\n padding: 0;\n font-family: Arial, Helvetica, sans-serif;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n\n.bg-success {\n background-color: #6dc454 !important;\n color: #fff;\n}\n\n.bg-danger {\n background-color: #c64b4b !important;\n color: #fff;\n}\n\n.bg-primary {\n background-color: #316bc2 !important;\n color: #fff;\n}\n\n.bg-dark {\n background-color: #333 !important;\n color: #fff;\n}\n\n.text-left {\n text-align: left;\n}\n\n.text-right {\n text-align: right;\n}\n\n.text-center {\n text-align: center;\n}\n\n.text-info {\n color: #05a0f4;\n}\n\n.text-success {\n color: #6dc454;\n}\n\n.text-danger {\n color: #c64b4b;\n}\n\n.text-primary {\n color: #316bc2;\n}\n\n.text-dark {\n color: #333;\n}\n\n.text-muted {\n color: #ccc;\n}\n\n.font-weight-bold {\n font-weight: bold;\n}\n\n.font-italic {\n font-style: italic;\n}\n\n.mt-20 {\n margin-top: 20px;\n}\n\n.mb-20 {\n margin-bottom: 20px;\n}\n\n.ml-20 {\n margin-left: 20px;\n}\n\n.mr-20 {\n margin-right: 20px;\n}\n\n.mt-10 {\n margin-top: 10px;\n}\n\n.mb-10 {\n margin-bottom: 10px;\n}\n\n.ml-10 {\n margin-left: 10px;\n}\n\n.mr-10 {\n margin-right: 10px;\n}\n\n.mt-5 {\n margin-top: 5px;\n}\n\n.mb-5 {\n margin-bottom: 5px;\n}\n\n.ml-5 {\n margin-left: 5px;\n}\n\n.mr-5 {\n margin-right: 5px;\n}\n\n.pt-10 {\n padding-top: 10px;\n}\n\n.pb-10 {\n padding-bottom: 10px;\n}\n\n.pl-10 {\n padding-left: 10px;\n}\n\n.pr-10 {\n padding-right: 10px;\n}\n\n.pt-5 {\n padding-top: 5px;\n}\n\n.pb-5 {\n padding-bottom: 5px;\n}\n\n.pl-5 {\n padding-left: 5px;\n}\n\n.pr-5 {\n padding-right: 5px;\n}\n\n.pt-20 {\n padding-top: 20px;\n}\n\n.pb-20 {\n padding-bottom: 20px;\n}\n\n.pl-20 {\n padding-left: 20px;\n}\n\n.pr-20 {\n padding-right: 20px;\n}\n\n.d-flex {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n}\n\n.justify-content-start {\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: flex-start;\n}\n\n.justify-content-center {\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n}\n\n.justify-content-end {\n -webkit-box-pack: end;\n -ms-flex-pack: end;\n justify-content: flex-end;\n}\n\n.justify-content-between {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n}\n\n.align-items-start {\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n}\n\n.align-items-center {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.align-items-end {\n -webkit-box-align: end;\n -ms-flex-align: end;\n align-items: flex-end;\n}\n\n.w-10 {\n width: 10% !important;\n max-width: 10% !important;\n min-width: 10% !important;\n}\n\n.w-20 {\n width: 20% !important;\n max-width: 20% !important;\n min-width: 20% !important;\n}\n\n.w-30 {\n width: 30% !important;\n max-width: 30% !important;\n min-width: 30% !important;\n}\n\n.w-40 {\n width: 40% !important;\n max-width: 40% !important;\n min-width: 40% !important;\n}\n\n.w-50 {\n width: 50% !important;\n max-width: 50% !important;\n min-width: 50% !important;\n}\n\n.w-60 {\n width: 60% !important;\n max-width: 60% !important;\n min-width: 60% !important;\n}\n\n.w-70 {\n width: 70% !important;\n max-width: 70% !important;\n min-width: 70% !important;\n}\n\n.w-80 {\n width: 80% !important;\n max-width: 80% !important;\n min-width: 80% !important;\n}\n\n.w-90 {\n width: 90% !important;\n max-width: 90% !important;\n min-width: 90% !important;\n}\n\n.w-100 {\n width: 100% !important;\n max-width: 100% !important;\n min-width: 100% !important;\n}\n\n.card {\n background-color: #efefef;\n min-width: 500px;\n padding: 10px;\n border-radius: 3px;\n border-bottom: 1px solid #ccc;\n}\n\n.card-light {\n background-color: #fffafa;\n border: 1px solid #eee;\n border-bottom: 1px solid #ccc;\n}\n\nbutton {\n padding: 10px;\n font-size: 15px;\n outline: none;\n border: none;\n border-radius: 5px;\n border-bottom: 1px solid #ccc;\n background-color: #dad0d0;\n cursor: pointer;\n}\n\nbutton:hover {\n background-color: #f0eded;\n}\n\nbutton:active {\n background-color: white;\n}\n\nbutton.btn-primary {\n background-color: #316bc2;\n color: #fff;\n}\n\nbutton.btn-primary:hover {\n background-color: #5386d3;\n color: #fff;\n}\n\nbutton.btn-primary:active {\n background-color: #7ba3de;\n color: #fff;\n}\n\nbutton.btn-warning {\n background-color: #f5e20c;\n color: #000;\n}\n\nbutton.btn-warning:hover {\n background-color: #f9ee6e;\n color: #000;\n}\n\nbutton.btn-warning:active {\n background-color: #fbf49f;\n color: #000;\n}\n\nbutton.btn-info {\n background-color: #05a0f4;\n color: #fff;\n}\n\nbutton.btn-info:hover {\n background-color: #31b4fb;\n color: #fff;\n}\n\nbutton.btn-info:active {\n background-color: #63c6fc;\n color: #fff;\n}\n\nbutton.btn-success {\n background-color: #6dc454;\n color: #fff;\n}\n\nbutton.btn-success:hover {\n background-color: #8dd17a;\n color: #fff;\n}\n\nbutton.btn-success:active {\n background-color: #aedea0;\n color: #fff;\n}\n\nbutton.btn-danger {\n background-color: #c64b4b;\n color: #fff;\n}\n\nbutton.btn-danger:hover {\n background-color: #d27272;\n color: #fff;\n}\n\nbutton.btn-danger:active {\n background-color: #df9898;\n color: #fff;\n}\n\n.btn-sm {\n padding: 7px;\n font-size: 12px;\n}\n\n.form-group {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n margin-bottom: 10px;\n}\n\np {\n font-size: 14px;\n}\n\nlabel {\n font-size: 15px;\n display: inline-block;\n margin-bottom: 5px;\n}\n\nselect {\n outline: none;\n padding: 5px 10px;\n border: 1px solid #324354;\n}\n\ninput {\n outline: none;\n padding: 5px 10px;\n border: 1px solid #324354;\n}\n\ntextarea {\n outline: none;\n resize: none;\n padding: 5px 10px;\n border: 1px solid #324354;\n}\n\nheader {\n height: 50px;\n margin-bottom: 10px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n background-color: #324354;\n color: #fff;\n font-size: 20px;\n border-bottom: 2px solid #222b34;\n}\n\n.container {\n width: 100%;\n height: auto;\n padding: 10px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: start;\n}\n\nul.list {\n margin-top: 10px;\n list-style-type: none;\n}\n\nul.list li {\n padding: 5px 10px;\n background-color: #efefef;\n margin-bottom: 5px;\n border: 1px solid #ccc;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.pokemon--wars--app--container .game--area {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n width: 100%;\n padding: 10px;\n}\n\n.pokemon--wars--app--container .game--area h2 {\n margin-bottom: 20px;\n}\n\n.pokemon--wars--app--container .selection--container {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n width: 100%;\n padding: 10px;\n margin-bottom: 20px;\n}\n\n.pokemon--wars--app--container .selection--container img {\n -webkit-transition: all 0.5s;\n transition: all 0.5s;\n margin-right: 30px;\n}\n\n.pokemon--wars--app--container .selection--container img:last-child {\n margin-right: none;\n}\n\n.pokemon--wars--app--container .selection--container img.pikachu.selected-pokemon {\n border-radius: 10px;\n background-color: #f8c953c8;\n -webkit-transition: all 0.5s;\n transition: all 0.5s;\n}\n\n.pokemon--wars--app--container .selection--container img.pikachu:hover {\n border-radius: 10px;\n background-color: #f8c953c8;\n -webkit-transition: all 0.5s;\n transition: all 0.5s;\n}\n\n.pokemon--wars--app--container .selection--container img.bulbasaur.selected-pokemon {\n border-radius: 10px;\n background-color: #6ddba8c8;\n}\n\n.pokemon--wars--app--container .selection--container img.bulbasaur:hover {\n border-radius: 10px;\n background-color: #6ddba8c8;\n}\n\n.pokemon--wars--app--container .selection--container img.charmander.selected-pokemon {\n border-radius: 10px;\n background-color: #f7973fc8;\n}\n\n.pokemon--wars--app--container .selection--container img.charmander:hover {\n border-radius: 10px;\n background-color: #f7973fc8;\n}\n\n.pokemon--wars--app--container .selection--container img.squirtle.selected-pokemon {\n border-radius: 10px;\n background-color: #78eeffc8;\n}\n\n.pokemon--wars--app--container .selection--container img.squirtle:hover {\n border-radius: 10px;\n background-color: #78eeffc8;\n}\n\n.pokemon--wars--app--container .fight--area {\n width: 750px;\n}\n\n.pokemon--wars--app--container .health--container {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: end;\n -ms-flex-align: end;\n align-items: flex-end;\n}\n\n.pokemon--wars--app--container .name--health--bar {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.pokemon--wars--app--container .name--health--bar img {\n width: 70px;\n border-radius: 5px;\n}\n\n.pokemon--wars--app--container .name--health--bar img.pikachu {\n background-color: #f8c953c8;\n border: 2px solid #f8c953;\n}\n\n.pokemon--wars--app--container .name--health--bar img.bulbasaur {\n background-color: #6ddba8c8;\n border: 2px solid #6ddba8;\n}\n\n.pokemon--wars--app--container .name--health--bar img.charmander {\n background-color: #f7973fc8;\n border: 2px solid #f7973f;\n}\n\n.pokemon--wars--app--container .name--health--bar img.squirtle {\n background-color: #78eeffc8;\n border: 2px solid #78eeff;\n}\n\n.pokemon--wars--app--container .player--name {\n font-size: 18px;\n font-weight: bold;\n color: #324354;\n}\n\n.pokemon--wars--app--container .vs--container {\n font-size: 35px;\n color: #f7983f;\n font-weight: bold;\n font-style: italic;\n}\n\n.pokemon--wars--app--container progress {\n height: 50px;\n width: 280px;\n}\n\n.pokemon--wars--app--container progress[value] {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n width: 250px;\n height: 35px;\n}\n\n.pokemon--wars--app--container progress.pikachu[value]::-webkit-progress-bar {\n background-color: #f7983f27;\n border: 2px solid #f7983f;\n}\n\n.pokemon--wars--app--container progress.pikachu[value]::-webkit-progress-value {\n background-color: #f7973fc8;\n}\n\n.pokemon--wars--app--container progress.bulbasaur[value]::-webkit-progress-bar {\n background-color: #6ddba827;\n border: 2px solid #6ddba8;\n}\n\n.pokemon--wars--app--container progress.bulbasaur[value]::-webkit-progress-value {\n background-color: #6ddba8c8;\n}\n\n.pokemon--wars--app--container progress.charmander[value]::-webkit-progress-bar {\n background-color: #f7973f27;\n border: 2px solid #f7973f;\n}\n\n.pokemon--wars--app--container progress.charmander[value]::-webkit-progress-value {\n background-color: #f7973fc8;\n}\n\n.pokemon--wars--app--container progress.squirtle[value]::-webkit-progress-bar {\n background-color: #78eeff27;\n border: 2px solid #78eeff;\n}\n\n.pokemon--wars--app--container progress.squirtle[value]::-webkit-progress-value {\n background-color: #78eeffc8;\n}\n\n.pokemon--wars--app--container .attack--button--container {\n margin-top: 50px;\n}\n\n.pokemon--wars--app--container .logger--container {\n width: 400px;\n margin: 0 auto;\n margin-top: 50px;\n}\n\n.pokemon--wars--app--container .logger--container img {\n width: 40px;\n}\n\n.pokemon--wars--app--container .logger--container li {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n border-radius: 5px;\n}\n\n.pokemon--wars--app--container .game--finished--container {\n margin-top: 100px;\n font-size: 50px;\n}\n\n.css--class--app .css--palette {\n list-style-type: none;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.css--class--app .css--palette li {\n width: 50px;\n height: 50px;\n background-color: #ccc;\n border-radius: 50%;\n margin-left: 5px;\n border: 1px solid #bbb;\n}\n\n.css--class--app .result-box {\n width: 100%;\n height: 100px;\n background-color: #18bf71;\n margin-top: 15px;\n border-radius: 5px;\n border-bottom: 1px solid #ccc;\n -webkit-transition: background-color 0.5s;\n transition: background-color 0.5s;\n}\n\n.bookmark--app--container {\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[3];\n grid-template-columns: repeat(3, 1fr);\n grid-gap: 10px;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.bookmark--app--container .bookmark-item {\n width: 400px;\n background-color: #efefef;\n border-bottom: 1px solid #ccc;\n border-radius: 5px;\n padding: 10px;\n}\n\n.bookmark--app--container .bookmark-item .header {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.course--planner-app--container .user--action--container {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.course--planner-app--container .user--action--container .form-group {\n width: 80%;\n margin-right: 5px;\n}\n\n.bet--coupon--app .competition-list {\n padding: 0;\n border-radius: 5px;\n border: 1px solid #efefef;\n border-bottom: 1px solid #ccc;\n}\n\n.bet--coupon--app .my-coupon {\n padding: 0;\n border-radius: 5px;\n border: 1px solid #efefef;\n border-bottom: 1px solid #ccc;\n min-width: 400px !important;\n}\n\n.bet--coupon--app .my-coupon .card--header {\n background-color: #05a0f4 !important;\n}\n\n.bet--coupon--app .card--header {\n background-color: #324354 !important;\n color: #fff;\n border-top-left-radius: 5px;\n border-top-right-radius: 5px;\n padding: 10px;\n}\n\n.bet--coupon--app .card--body {\n background-color: #fff !important;\n padding: 10px;\n}\n\n.bet--coupon--app .competition-item {\n margin-bottom: 5px;\n padding: 10px 0;\n border-bottom: 1px solid #efefef;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.bet--coupon--app .competition-item:last-child {\n border-bottom: none;\n}\n\n.bet--coupon--app .competition-item .info--container {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: start;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n}\n\n.bet--coupon--app .competition-item .rates {\n width: 150px;\n text-align: right;\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[3];\n grid-template-columns: repeat(3, 1fr);\n}\n\n.bet--coupon--app .coupon-item {\n border-bottom: 1px solid #efefef;\n margin-bottom: 5px;\n padding: 10px 0;\n}\n\n.bet--coupon--app .coupon-item:last-child {\n border-bottom: none;\n}\n\n.bet--coupon--app .coupon--total--container {\n max-width: 300px;\n}\n\n.bet--coupon--app .coupon--total--container .my-coupon {\n min-width: 300px !important;\n}\n\n.bet--coupon--app .coupon--total--container .multiply--container {\n min-width: 300px !important;\n}\n\n.bet--coupon--app .coupon--total--container .multiply--container button:not(:last-child) {\n margin-right: 5px;\n margin-bottom: 5px;\n}\n\n.bet--coupon--app .multiply--buttons {\n -ms-flex-wrap: wrap;\n flex-wrap: wrap;\n}\n\n.contact--card--app {\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[4];\n grid-template-columns: repeat(4, 1fr);\n grid-gap: 20px;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.contact--card--app .contact-item {\n width: 180px;\n min-height: 282px;\n border-radius: 5px;\n background-color: #fff !important;\n}\n\n.contact--card--app .contact-item .invitation--header {\n width: 180px;\n height: 62px;\n background: url(\"https://static-exp1.licdn.com/sc/h/cpemy7gsm8bzfb5nnbbnswfdm\");\n background-size: cover;\n background-repeat: no-repeat;\n background-position: center;\n}\n\n.contact--card--app .contact-item .contact--info--container {\n padding: 10px;\n margin-top: 45px;\n}\n\n.contact--card--app .contact-item .contact--info--container p {\n font-size: 15px !important;\n}\n\n.contact--card--app .contact-item .contact--info--container a {\n font-size: 15px !important;\n}\n\n.contact--card--app .contact-item .action--button--container {\n margin-top: 10px;\n}\n\n.contact--card--app .contact-item .contact--image {\n border-radius: 50%;\n width: 100px;\n height: 100px;\n}\n\n.comment--like--dislike--app {\n width: 750px;\n}\n\n.chat--app--container .card {\n padding: 0;\n border-radius: 5px;\n border: 1px solid #efefef;\n border-bottom: 1px solid #ccc;\n max-width: 400px !important;\n}\n\n.chat--app--container .card .card--header {\n background-color: #316bc2 !important;\n color: #fff;\n border-top-left-radius: 5px;\n border-top-right-radius: 5px;\n padding: 10px;\n}\n\n.chat--app--container .card .card--body {\n background-color: #fff !important;\n padding: 10px;\n}\n\n.chat--app--container .card .card--body .active-user-item {\n margin-bottom: 20px;\n}\n\n.chat--app--container .card .card--body .active-user-item:last-child {\n margin-bottom: 0;\n}\n\n.chat--app--container .card .card--body .active-user-item .badge {\n background-color: #efefef;\n color: #333;\n text-transform: uppercase;\n padding: 10px;\n width: 40px;\n height: 40px;\n border-radius: 50%;\n}\n\n.chat--app--container .card .messages {\n list-style-type: none;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: flex-start;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n padding: 10px;\n height: calc(100vh - 200px);\n overflow-y: scroll;\n}\n\n.chat--app--container .card .messages li {\n max-width: 300px;\n padding: 5px 10px;\n margin-bottom: 15px;\n border-bottom: 1px solid #ccc;\n border-radius: 10px;\n background-color: #fffafa;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.chat--app--container .card .messages li small {\n margin-top: 10px;\n -ms-flex-item-align: end;\n align-self: flex-end;\n font-size: 12px;\n color: #ccc;\n font-style: italic;\n}\n\n.chat--app--container .card .messages li.current-user {\n -ms-flex-item-align: end;\n align-self: flex-end;\n background-color: #05a0f4;\n color: #fff;\n}\n\n.chat--app--container .card .text-container {\n margin-top: 30px;\n}\n\n.chat--app--container .card .text-container input {\n border: none;\n padding: 10px;\n height: 37px;\n width: calc(500px - 70px);\n border-bottom-left-radius: 5px;\n}\n\n.chat--app--container .card .text-container button {\n border-radius: 0 !important;\n margin-bottom: 0;\n border: none;\n border-bottom-right-radius: 5px !important;\n}\n\n.class--list--app .class-list {\n list-style-type: none !important;\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[3];\n grid-template-columns: repeat(3, 1fr);\n}\n\n.class--list--app .class-list li {\n margin-bottom: 5px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.class--list--app textarea {\n width: 100%;\n margin-top: 20px;\n}\n\n.rate--calculator--app .rate-list {\n list-style-type: none !important;\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[6];\n grid-template-columns: repeat(6, 1fr);\n}\n\n.rate--calculator--app .rate-list li {\n margin-bottom: 5px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.rate--calculator--app input#money {\n margin-top: 15px;\n}\n\n.rate--calculator--app .rates-container {\n margin-top: 20px;\n list-style-type: none;\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[3];\n grid-template-columns: repeat(3, 1fr);\n}\n\n.rate--calculator--app .rates-container li {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n margin-bottom: 5px;\n}\n\n.rate--calculator--app .rates-container li:last-child {\n margin-bottom: 0;\n}\n\n.rate--calculator--app .rates-container li strong {\n margin-right: 5px;\n}\n/*# sourceMappingURL=style.css.map */" }, { "path": "ders-1-tekrar-dersi/-boilerplate/app.js", "content": "const app = Vue.createApp({\n data() {\n return {};\n },\n}).mount(\"#app\");\n" }, { "path": "ders-1-tekrar-dersi/-boilerplate/index.html", "content": "\n\n \n \n \n \n CSS ve Style Binding\n \n \n \n \n
    \n
    \n
    \n \n \n\n" }, { "path": "ders-1-tekrar-dersi/0-vue-vs-js/js/app.js", "content": "const todoText = document.querySelector(\"#todoText\");\nconst addBtn = document.querySelector(\"#addBtn\");\nconst todoList = document.querySelector(\"#todoList\");\n\naddBtn.addEventListener(\"click\", () => {\n const listItem = document.createElement(\"li\");\n listItem.textContent = todoText.value;\n todoList.append(listItem);\n todoText.value = \"\";\n});\n" }, { "path": "ders-1-tekrar-dersi/0-vue-vs-js/js/index.html", "content": "\n\n \n \n \n \n Document\n \n \n \n \n
      \n \n \n\n" }, { "path": "ders-1-tekrar-dersi/0-vue-vs-js/vue/app.js", "content": "const app = Vue.createApp({\n data() {\n return {\n todoText: null,\n todoList: [],\n };\n },\n methods: {\n addTodo() {\n this.todoList.push(this.todoText);\n this.todoText = \"\";\n },\n },\n}).mount(\"#app\");\n" }, { "path": "ders-1-tekrar-dersi/0-vue-vs-js/vue/index.html", "content": "\n\n \n \n \n \n Vue3 Version\n \n \n \n
      \n \n \n
        \n
      • {{ item }}
        • \n
      \n
      \n \n \n\n" }, { "path": "ders-1-tekrar-dersi/1-vue-instance-template-attribute-event/app.js", "content": "const app = Vue.createApp({\n data() {\n return {\n title: \"Bu Vue tarafından gelen bir bilgidir..\",\n content: \"lorem ipsum dolor sit amet\",\n hobbies: [1, 2, 3, 4, 5],\n personal: {\n name: \"Gokhan\",\n lname: \"Kandemir\",\n phone: \"xxxxx\",\n },\n details: `Müfredat için tıklayınız`,\n url: \"https://eduflow.kablosuzkedi.com\",\n coordX: 0,\n coordY: 0,\n fullName: \"Gokhan Kandemir\",\n };\n },\n methods: {\n updateTitle(title) {\n this.title = title || \"Bu benim yeni mesajım...\";\n },\n updateCoords(e) {\n // console.log(\"e :>> \", e);\n this.coordX = e.offsetX;\n this.coordY = e.offsetY;\n this.updateTitle(`${this.coordX},${this.coordY}`);\n },\n updateValue(customText, e) {\n console.log(customText, e);\n this.fullName = e.target.value;\n },\n },\n}).mount(\"#app\");\n\n// Vue2 Version..\n// new Vue({\n// el : \"#app\",\n// data : {}\n// })\n" }, { "path": "ders-1-tekrar-dersi/1-vue-instance-template-attribute-event/index.html", "content": "\n\n \n \n \n \n Template Instance\n \n \n \n \n
      \n

      Bu HTML üzerinden yazılan statik bir başlık..

      \n

      {{ title }}

      \n

      {{ content }}

      \n

      {{ hobbies[0] }}

      \n

      {{ personal.name }} 

      \n
      \n URL Test\n URL Test\n

      \n \n \n
      \n
      \n \n {{ coordX }}, {{ coordY }}\n
      \n\n

      \n\n \n \n \n {{ fullName }}\n \n \n \n\n" }, { "path": "ders-1-tekrar-dersi/2-vue-virtual-dom-life-cycle/app.js", "content": "const app = Vue.createApp({\n data() {\n return {\n counter: 0,\n counter2: 0,\n itemList: [],\n };\n },\n methods: {\n getResult() {\n console.log(\"Counter1 Çalıştı..\");\n return this.counter > 0\n ? \"Pozitif\"\n : this.counter < 0\n ? \"Negatif\"\n : \"Sıfır\";\n },\n getResult2() {\n console.log(\"Counter2 Çalıştı..\");\n return this.counter2 > 0\n ? \"Pozitif\"\n : this.counter2 < 0\n ? \"Negatif\"\n : \"Sıfır\";\n },\n },\n beforeCreate() {\n console.log(\"beforeCreate çalıştı\");\n },\n created() {\n console.log(\"created çalıştı\");\n setTimeout(() => {\n this.itemList = [1, 2, 3, 4, 5, 6, 7];\n }, 2000);\n },\n beforeMount() {\n console.log(\"beforeMount çalıştı\");\n },\n mounted() {\n console.log(\"mounted çalıştı\");\n },\n beforeUpdate() {\n console.log(\"beforeUpdate çalıştı\");\n },\n updated() {\n console.log(\"updated çalıştı\");\n },\n beforeUnmount() {\n console.log(\"beforeUnmount çalıştı\");\n },\n unmounted() {\n console.log(\"unmounted çalıştı\");\n },\n});\n\napp.mount(\"#app\");\n" }, { "path": "ders-1-tekrar-dersi/2-vue-virtual-dom-life-cycle/index.html", "content": "\n\n \n \n \n \n Document\n \n \n \n \n
      \n
      \n

      {{ counter }}

      \n \n \n

      {{ getResult() }}

      \n
      \n\n
      \n

      {{ counter2 }}

      \n \n \n

      {{ getResult2() }}

      \n
      \n\n
      {{ itemList }}
      \n
      \n \n \n\n" }, { "path": "ders-1-tekrar-dersi/3-reactivity/app.js", "content": "const app = Vue.createApp({\n data() {\n return {\n counter: 0,\n counter2: 0,\n itemList: [],\n };\n },\n methods: {\n addItem() {\n this.itemList.push(new Date().getTime());\n },\n },\n computed: {\n getResult() {\n // console.log(\"Counter1 Çalıştı..\");\n return this.counter > 0\n ? \"Pozitif\"\n : this.counter < 0\n ? \"Negatif\"\n : \"Sıfır\";\n },\n getResult2() {\n // console.log(\"Counter2 Çalıştı..\");\n return this.counter2 > 0\n ? \"Pozitif\"\n : this.counter2 < 0\n ? \"Negatif\"\n : \"Sıfır\";\n },\n },\n watch: {\n counter(newValue, oldValue) {\n // console.log(\"Counter Watcher Calisti..\", newValue, oldValue);\n },\n getResult(newValue, oldValue) {\n console.log(`Watcher : Result ${oldValue} => ${newValue}`);\n },\n itemList: {\n deep: true,\n handler(itemList) {\n console.log(\"itemList :>> \", itemList);\n },\n },\n // itemList(itemList) {\n // console.log(\"itemList :>> \", itemList);\n // },\n },\n});\n\napp.mount(\"#app\");\n" }, { "path": "ders-1-tekrar-dersi/3-reactivity/index.html", "content": "\n\n \n \n \n \n Reactivity\n \n \n \n \n
      \n
      \n

      {{ counter }}

      \n \n \n

      {{ getResult }}

      \n
      \n
      \n

      {{ counter2 }}

      \n \n \n

      {{ getResult2 }}

      \n
      \n\n
      \n 
      {{ itemList }} 
      \n \n
      \n
      \n \n \n\n" }, { "path": "ders-1-tekrar-dersi/4-css-style-binding/app.js", "content": "const app = Vue.createApp({\n data() {\n return {\n myClass: \"text-green bg-orange\",\n counter: 0,\n };\n },\n created() {\n setInterval(() => {\n this.counter++;\n }, 1000);\n },\n computed: {\n boxClass() {\n return {\n \"text-green\": this.counter === 0,\n \"text-orange\": this.counter === 1,\n \"text-default\": this.counter === 2,\n \"text-blue\": this.counter === 3,\n \"text-red\": this.counter === 4,\n };\n },\n },\n}).mount(\"#app\");\n" }, { "path": "ders-1-tekrar-dersi/4-css-style-binding/index.html", "content": "\n\n \n \n \n \n CSS ve Style Binding\n \n \n \n \n
      \n
      \n

      CSS ve Style Binding

      \n

      \n Lorem ipsum dolor sit amet consectetur, adipisicing elit. Excepturi,\n autem quae. Similique molestias, provident autem officia ex rem nemo\n non voluptates corporis voluptatibus aut animi dicta tempore. Eos, cum\n recusandae!\n

      \n
      \n
      \n \n \n\n" }, { "path": "ders-1-tekrar-dersi/5-conditions/app.js", "content": "const app = Vue.createApp({\n data() {\n return {\n showState: false,\n counter: 0,\n };\n },\n}).mount(\"#app\");\n" }, { "path": "ders-1-tekrar-dersi/5-conditions/index.html", "content": "\n\n \n \n \n \n Koşullar\n \n \n \n \n
      \n
      \n

      Gösterilecek başlık...

      \n
      Gizlenen başlık...
      \n \n
      \n\n
      \n

      Gösterilecek başlık...

      \n

      Gizlenen başlık...

      \n \n
      \n\n
      \n\n

      Negatif.

      \n

      0\">Pozitif

      \n

      Sıfır

      \n\n \n \n
      \n
      \n \n \n\n" }, { "path": "ders-1-tekrar-dersi/6-loops/app.js", "content": "const app = Vue.createApp({\n data() {\n return {\n memberList: [\n { id: 1, name: \"Cihan Özen\" },\n { id: 2, name: \"Ramazan Sancar\" },\n { id: 3, name: \"Enes Taha Sarı\" },\n { id: 4, name: \"Gökhan Kandemir\" },\n { id: 5, name: \"Defne Kandemir\" },\n { id: 6, name: \"Beek X (Berk)\" },\n { id: 7, name: \"Asy\" },\n { id: 8, name: \"Onur Şen\" },\n { id: 9, name: \"Emirhan Çifci\" },\n { id: 10, name: \"Tamer Karalürt\" },\n ],\n };\n },\n}).mount(\"#app\");\n" }, { "path": "ders-1-tekrar-dersi/6-loops/index.html", "content": "\n\n \n \n \n \n Döngüler\n \n \n \n \n
      \n
      \n
        \n
      • \n {{ member.name }}\n
        • \n
      \n
      \n
      \n \n \n\n" }, { "path": "ders-1-tekrar-dersi/odevler/class-list-app/app.js", "content": "const app = Vue.createApp({\n data() {\n return {\n styles: {\n backgroundColor: false,\n border: false,\n borderRadius: false,\n color: false,\n fontBold: false,\n fontItalic: false,\n },\n };\n },\n computed: {\n textAreaClass() {\n return {\n backgroundColor: this.styles.backgroundColor,\n border: this.styles.border,\n borderRadius: this.styles.borderRadius,\n color: this.styles.color,\n fontBold: this.styles.fontBold,\n fontItalic: this.styles.fontItalic,\n };\n },\n },\n}).mount(\"#app\");\n" }, { "path": "ders-1-tekrar-dersi/odevler/class-list-app/index.html", "content": "\n\n \n \n \n \n Class List App\n \n \n\n \n \n \n
      Class List App
      \n
      \n
      \n
      \n
        \n
      • \n \n
        • \n
      • \n \n
        • \n
      • \n \n
        • \n
      • \n \n
        • \n
      • \n \n
        • \n
      • \n \n
        • \n
      \n\n \n
      \n
      \n\n 
      \n        {{ styles }}\n
      \n
      \n \n \n\n" }, { "path": "ders-1-tekrar-dersi/odevler/class-list-app/readme.txt", "content": "ÖDEV\nYukarıda bulunan checkbox elementlerine tıklanıldığında, checkbox'ın sahip olduğu Class bilgisini textarea elementine verecek Vue uygulamasını yazınız.\nWhen the above checkbox elements are clicked, write the Vue application that will give the Class information of the checkbox to the textarea element.\n\nİPUCU\nBackground 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.\nBy creating a CSS Class for Background Color, Border, Color, Font Bold, Border Radius, Font Italic, you can control each checkbox with a v-model." }, { "path": "ders-1-tekrar-dersi/odevler/class-list-app/style.css", "content": "* {\n margin: 0;\n padding: 0;\n font-family: Arial, Helvetica, sans-serif;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n\n.bg-success {\n background-color: #6dc454 !important;\n color: #fff;\n}\n\n.bg-danger {\n background-color: #c64b4b !important;\n color: #fff;\n}\n\n.bg-primary {\n background-color: #316bc2 !important;\n color: #fff;\n}\n\n.bg-dark {\n background-color: #333 !important;\n color: #fff;\n}\n\n.text-left {\n text-align: left;\n}\n\n.text-right {\n text-align: right;\n}\n\n.text-center {\n text-align: center;\n}\n\n.text-info {\n color: #05a0f4;\n}\n\n.text-success {\n color: #6dc454;\n}\n\n.text-danger {\n color: #c64b4b;\n}\n\n.text-primary {\n color: #316bc2;\n}\n\n.text-dark {\n color: #333;\n}\n\n.text-muted {\n color: #ccc;\n}\n\n.font-weight-bold {\n font-weight: bold;\n}\n\n.font-italic {\n font-style: italic;\n}\n\n.mt-20 {\n margin-top: 20px;\n}\n\n.mb-20 {\n margin-bottom: 20px;\n}\n\n.ml-20 {\n margin-left: 20px;\n}\n\n.mr-20 {\n margin-right: 20px;\n}\n\n.mt-10 {\n margin-top: 10px;\n}\n\n.mb-10 {\n margin-bottom: 10px;\n}\n\n.ml-10 {\n margin-left: 10px;\n}\n\n.mr-10 {\n margin-right: 10px;\n}\n\n.mt-5 {\n margin-top: 5px;\n}\n\n.mb-5 {\n margin-bottom: 5px;\n}\n\n.ml-5 {\n margin-left: 5px;\n}\n\n.mr-5 {\n margin-right: 5px;\n}\n\n.pt-10 {\n padding-top: 10px;\n}\n\n.pb-10 {\n padding-bottom: 10px;\n}\n\n.pl-10 {\n padding-left: 10px;\n}\n\n.pr-10 {\n padding-right: 10px;\n}\n\n.pt-5 {\n padding-top: 5px;\n}\n\n.pb-5 {\n padding-bottom: 5px;\n}\n\n.pl-5 {\n padding-left: 5px;\n}\n\n.pr-5 {\n padding-right: 5px;\n}\n\n.pt-20 {\n padding-top: 20px;\n}\n\n.pb-20 {\n padding-bottom: 20px;\n}\n\n.pl-20 {\n padding-left: 20px;\n}\n\n.pr-20 {\n padding-right: 20px;\n}\n\n.d-flex {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n}\n\n.justify-content-start {\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: flex-start;\n}\n\n.justify-content-center {\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n}\n\n.justify-content-end {\n -webkit-box-pack: end;\n -ms-flex-pack: end;\n justify-content: flex-end;\n}\n\n.justify-content-between {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n}\n\n.align-items-start {\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n}\n\n.align-items-center {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.align-items-end {\n -webkit-box-align: end;\n -ms-flex-align: end;\n align-items: flex-end;\n}\n\n.w-10 {\n width: 10% !important;\n max-width: 10% !important;\n min-width: 10% !important;\n}\n\n.w-20 {\n width: 20% !important;\n max-width: 20% !important;\n min-width: 20% !important;\n}\n\n.w-30 {\n width: 30% !important;\n max-width: 30% !important;\n min-width: 30% !important;\n}\n\n.w-40 {\n width: 40% !important;\n max-width: 40% !important;\n min-width: 40% !important;\n}\n\n.w-50 {\n width: 50% !important;\n max-width: 50% !important;\n min-width: 50% !important;\n}\n\n.w-60 {\n width: 60% !important;\n max-width: 60% !important;\n min-width: 60% !important;\n}\n\n.w-70 {\n width: 70% !important;\n max-width: 70% !important;\n min-width: 70% !important;\n}\n\n.w-80 {\n width: 80% !important;\n max-width: 80% !important;\n min-width: 80% !important;\n}\n\n.w-90 {\n width: 90% !important;\n max-width: 90% !important;\n min-width: 90% !important;\n}\n\n.w-100 {\n width: 100% !important;\n max-width: 100% !important;\n min-width: 100% !important;\n}\n\n.card {\n background-color: #efefef;\n min-width: 500px;\n padding: 10px;\n border-radius: 3px;\n border-bottom: 1px solid #ccc;\n}\n\n.card-light {\n background-color: #fffafa;\n border: 1px solid #eee;\n border-bottom: 1px solid #ccc;\n}\n\nbutton {\n padding: 10px;\n font-size: 15px;\n outline: none;\n border: none;\n border-radius: 5px;\n border-bottom: 1px solid #ccc;\n background-color: #dad0d0;\n cursor: pointer;\n}\n\nbutton:hover {\n background-color: #f0eded;\n}\n\nbutton:active {\n background-color: white;\n}\n\nbutton.btn-primary {\n background-color: #316bc2;\n color: #fff;\n}\n\nbutton.btn-primary:hover {\n background-color: #5386d3;\n color: #fff;\n}\n\nbutton.btn-primary:active {\n background-color: #7ba3de;\n color: #fff;\n}\n\nbutton.btn-warning {\n background-color: #f5e20c;\n color: #000;\n}\n\nbutton.btn-warning:hover {\n background-color: #f9ee6e;\n color: #000;\n}\n\nbutton.btn-warning:active {\n background-color: #fbf49f;\n color: #000;\n}\n\nbutton.btn-info {\n background-color: #05a0f4;\n color: #fff;\n}\n\nbutton.btn-info:hover {\n background-color: #31b4fb;\n color: #fff;\n}\n\nbutton.btn-info:active {\n background-color: #63c6fc;\n color: #fff;\n}\n\nbutton.btn-success {\n background-color: #6dc454;\n color: #fff;\n}\n\nbutton.btn-success:hover {\n background-color: #8dd17a;\n color: #fff;\n}\n\nbutton.btn-success:active {\n background-color: #aedea0;\n color: #fff;\n}\n\nbutton.btn-danger {\n background-color: #c64b4b;\n color: #fff;\n}\n\nbutton.btn-danger:hover {\n background-color: #d27272;\n color: #fff;\n}\n\nbutton.btn-danger:active {\n background-color: #df9898;\n color: #fff;\n}\n\n.btn-sm {\n padding: 7px;\n font-size: 12px;\n}\n\n.form-group {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n margin-bottom: 10px;\n}\n\np {\n font-size: 14px;\n}\n\nlabel {\n font-size: 15px;\n display: inline-block;\n margin-bottom: 5px;\n}\n\nselect {\n outline: none;\n padding: 5px 10px;\n border: 1px solid #324354;\n}\n\ninput {\n outline: none;\n padding: 5px 10px;\n border: 1px solid #324354;\n}\n\ntextarea {\n outline: none;\n resize: none;\n padding: 5px 10px;\n border: 1px solid #324354;\n}\n\nheader {\n height: 50px;\n margin-bottom: 10px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n background-color: #324354;\n color: #fff;\n font-size: 20px;\n border-bottom: 2px solid #222b34;\n}\n\n.container {\n width: 100%;\n height: auto;\n padding: 10px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: start;\n}\n\nul.list {\n margin-top: 10px;\n list-style-type: none;\n}\n\nul.list li {\n padding: 5px 10px;\n background-color: #efefef;\n margin-bottom: 5px;\n border: 1px solid #ccc;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.pokemon--wars--app--container .game--area {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n width: 100%;\n padding: 10px;\n}\n\n.pokemon--wars--app--container .game--area h2 {\n margin-bottom: 20px;\n}\n\n.pokemon--wars--app--container .selection--container {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n width: 100%;\n padding: 10px;\n margin-bottom: 20px;\n}\n\n.pokemon--wars--app--container .selection--container img {\n -webkit-transition: all 0.5s;\n transition: all 0.5s;\n margin-right: 30px;\n}\n\n.pokemon--wars--app--container .selection--container img:last-child {\n margin-right: none;\n}\n\n.pokemon--wars--app--container .selection--container img.pikachu.selected-pokemon {\n border-radius: 10px;\n background-color: #f8c953c8;\n -webkit-transition: all 0.5s;\n transition: all 0.5s;\n}\n\n.pokemon--wars--app--container .selection--container img.pikachu:hover {\n border-radius: 10px;\n background-color: #f8c953c8;\n -webkit-transition: all 0.5s;\n transition: all 0.5s;\n}\n\n.pokemon--wars--app--container .selection--container img.bulbasaur.selected-pokemon {\n border-radius: 10px;\n background-color: #6ddba8c8;\n}\n\n.pokemon--wars--app--container .selection--container img.bulbasaur:hover {\n border-radius: 10px;\n background-color: #6ddba8c8;\n}\n\n.pokemon--wars--app--container .selection--container img.charmander.selected-pokemon {\n border-radius: 10px;\n background-color: #f7973fc8;\n}\n\n.pokemon--wars--app--container .selection--container img.charmander:hover {\n border-radius: 10px;\n background-color: #f7973fc8;\n}\n\n.pokemon--wars--app--container .selection--container img.squirtle.selected-pokemon {\n border-radius: 10px;\n background-color: #78eeffc8;\n}\n\n.pokemon--wars--app--container .selection--container img.squirtle:hover {\n border-radius: 10px;\n background-color: #78eeffc8;\n}\n\n.pokemon--wars--app--container .fight--area {\n width: 750px;\n}\n\n.pokemon--wars--app--container .health--container {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: end;\n -ms-flex-align: end;\n align-items: flex-end;\n}\n\n.pokemon--wars--app--container .name--health--bar {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.pokemon--wars--app--container .name--health--bar img {\n width: 70px;\n border-radius: 5px;\n}\n\n.pokemon--wars--app--container .name--health--bar img.pikachu {\n background-color: #f8c953c8;\n border: 2px solid #f8c953;\n}\n\n.pokemon--wars--app--container .name--health--bar img.bulbasaur {\n background-color: #6ddba8c8;\n border: 2px solid #6ddba8;\n}\n\n.pokemon--wars--app--container .name--health--bar img.charmander {\n background-color: #f7973fc8;\n border: 2px solid #f7973f;\n}\n\n.pokemon--wars--app--container .name--health--bar img.squirtle {\n background-color: #78eeffc8;\n border: 2px solid #78eeff;\n}\n\n.pokemon--wars--app--container .player--name {\n font-size: 18px;\n font-weight: bold;\n color: #324354;\n}\n\n.pokemon--wars--app--container .vs--container {\n font-size: 35px;\n color: #f7983f;\n font-weight: bold;\n font-style: italic;\n}\n\n.pokemon--wars--app--container progress {\n height: 50px;\n width: 280px;\n}\n\n.pokemon--wars--app--container progress[value] {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n width: 250px;\n height: 35px;\n}\n\n.pokemon--wars--app--container progress.pikachu[value]::-webkit-progress-bar {\n background-color: #f7983f27;\n border: 2px solid #f7983f;\n}\n\n.pokemon--wars--app--container progress.pikachu[value]::-webkit-progress-value {\n background-color: #f7973fc8;\n}\n\n.pokemon--wars--app--container progress.bulbasaur[value]::-webkit-progress-bar {\n background-color: #6ddba827;\n border: 2px solid #6ddba8;\n}\n\n.pokemon--wars--app--container progress.bulbasaur[value]::-webkit-progress-value {\n background-color: #6ddba8c8;\n}\n\n.pokemon--wars--app--container progress.charmander[value]::-webkit-progress-bar {\n background-color: #f7973f27;\n border: 2px solid #f7973f;\n}\n\n.pokemon--wars--app--container progress.charmander[value]::-webkit-progress-value {\n background-color: #f7973fc8;\n}\n\n.pokemon--wars--app--container progress.squirtle[value]::-webkit-progress-bar {\n background-color: #78eeff27;\n border: 2px solid #78eeff;\n}\n\n.pokemon--wars--app--container progress.squirtle[value]::-webkit-progress-value {\n background-color: #78eeffc8;\n}\n\n.pokemon--wars--app--container .attack--button--container {\n margin-top: 50px;\n}\n\n.pokemon--wars--app--container .logger--container {\n width: 400px;\n margin: 0 auto;\n margin-top: 50px;\n}\n\n.pokemon--wars--app--container .logger--container img {\n width: 40px;\n}\n\n.pokemon--wars--app--container .logger--container li {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n border-radius: 5px;\n}\n\n.pokemon--wars--app--container .game--finished--container {\n margin-top: 100px;\n font-size: 50px;\n}\n\n.css--class--app .css--palette {\n list-style-type: none;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.css--class--app .css--palette li {\n width: 50px;\n height: 50px;\n background-color: #ccc;\n border-radius: 50%;\n margin-left: 5px;\n border: 1px solid #bbb;\n}\n\n.css--class--app .result-box {\n width: 100%;\n height: 100px;\n background-color: #18bf71;\n margin-top: 15px;\n border-radius: 5px;\n border-bottom: 1px solid #ccc;\n -webkit-transition: background-color 0.5s;\n transition: background-color 0.5s;\n}\n\n.bookmark--app--container {\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[3];\n grid-template-columns: repeat(3, 1fr);\n grid-gap: 10px;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.bookmark--app--container .bookmark-item {\n width: 400px;\n background-color: #efefef;\n border-bottom: 1px solid #ccc;\n border-radius: 5px;\n padding: 10px;\n}\n\n.bookmark--app--container .bookmark-item .header {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.course--planner-app--container .user--action--container {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.course--planner-app--container .user--action--container .form-group {\n width: 80%;\n margin-right: 5px;\n}\n\n.bet--coupon--app .competition-list {\n padding: 0;\n border-radius: 5px;\n border: 1px solid #efefef;\n border-bottom: 1px solid #ccc;\n}\n\n.bet--coupon--app .my-coupon {\n padding: 0;\n border-radius: 5px;\n border: 1px solid #efefef;\n border-bottom: 1px solid #ccc;\n min-width: 400px !important;\n}\n\n.bet--coupon--app .my-coupon .card--header {\n background-color: #05a0f4 !important;\n}\n\n.bet--coupon--app .card--header {\n background-color: #324354 !important;\n color: #fff;\n border-top-left-radius: 5px;\n border-top-right-radius: 5px;\n padding: 10px;\n}\n\n.bet--coupon--app .card--body {\n background-color: #fff !important;\n padding: 10px;\n}\n\n.bet--coupon--app .competition-item {\n margin-bottom: 5px;\n padding: 10px 0;\n border-bottom: 1px solid #efefef;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.bet--coupon--app .competition-item:last-child {\n border-bottom: none;\n}\n\n.bet--coupon--app .competition-item .info--container {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: start;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n}\n\n.bet--coupon--app .competition-item .rates {\n width: 150px;\n text-align: right;\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[3];\n grid-template-columns: repeat(3, 1fr);\n}\n\n.bet--coupon--app .coupon-item {\n border-bottom: 1px solid #efefef;\n margin-bottom: 5px;\n padding: 10px 0;\n}\n\n.bet--coupon--app .coupon-item:last-child {\n border-bottom: none;\n}\n\n.bet--coupon--app .coupon--total--container {\n max-width: 300px;\n}\n\n.bet--coupon--app .coupon--total--container .my-coupon {\n min-width: 300px !important;\n}\n\n.bet--coupon--app .coupon--total--container .multiply--container {\n min-width: 300px !important;\n}\n\n.bet--coupon--app .coupon--total--container .multiply--container button:not(:last-child) {\n margin-right: 5px;\n margin-bottom: 5px;\n}\n\n.bet--coupon--app .multiply--buttons {\n -ms-flex-wrap: wrap;\n flex-wrap: wrap;\n}\n\n.contact--card--app {\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[4];\n grid-template-columns: repeat(4, 1fr);\n grid-gap: 20px;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.contact--card--app .contact-item {\n width: 180px;\n min-height: 282px;\n border-radius: 5px;\n background-color: #fff !important;\n}\n\n.contact--card--app .contact-item .invitation--header {\n width: 180px;\n height: 62px;\n background: url(\"https://static-exp1.licdn.com/sc/h/cpemy7gsm8bzfb5nnbbnswfdm\");\n background-size: cover;\n background-repeat: no-repeat;\n background-position: center;\n}\n\n.contact--card--app .contact-item .contact--info--container {\n padding: 10px;\n margin-top: 45px;\n}\n\n.contact--card--app .contact-item .contact--info--container p {\n font-size: 15px !important;\n}\n\n.contact--card--app .contact-item .contact--info--container a {\n font-size: 15px !important;\n}\n\n.contact--card--app .contact-item .action--button--container {\n margin-top: 10px;\n}\n\n.contact--card--app .contact-item .contact--image {\n border-radius: 50%;\n width: 100px;\n height: 100px;\n}\n\n.comment--like--dislike--app {\n width: 750px;\n}\n\n.chat--app--container .card {\n padding: 0;\n border-radius: 5px;\n border: 1px solid #efefef;\n border-bottom: 1px solid #ccc;\n max-width: 400px !important;\n}\n\n.chat--app--container .card .card--header {\n background-color: #316bc2 !important;\n color: #fff;\n border-top-left-radius: 5px;\n border-top-right-radius: 5px;\n padding: 10px;\n}\n\n.chat--app--container .card .card--body {\n background-color: #fff !important;\n padding: 10px;\n}\n\n.chat--app--container .card .card--body .active-user-item {\n margin-bottom: 20px;\n}\n\n.chat--app--container .card .card--body .active-user-item:last-child {\n margin-bottom: 0;\n}\n\n.chat--app--container .card .card--body .active-user-item .badge {\n background-color: #efefef;\n color: #333;\n text-transform: uppercase;\n padding: 10px;\n width: 40px;\n height: 40px;\n border-radius: 50%;\n}\n\n.chat--app--container .card .messages {\n list-style-type: none;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: flex-start;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n padding: 10px;\n height: calc(100vh - 200px);\n overflow-y: scroll;\n}\n\n.chat--app--container .card .messages li {\n max-width: 300px;\n padding: 5px 10px;\n margin-bottom: 15px;\n border-bottom: 1px solid #ccc;\n border-radius: 10px;\n background-color: #fffafa;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.chat--app--container .card .messages li small {\n margin-top: 10px;\n -ms-flex-item-align: end;\n align-self: flex-end;\n font-size: 12px;\n color: #ccc;\n font-style: italic;\n}\n\n.chat--app--container .card .messages li.current-user {\n -ms-flex-item-align: end;\n align-self: flex-end;\n background-color: #05a0f4;\n color: #fff;\n}\n\n.chat--app--container .card .text-container {\n margin-top: 30px;\n}\n\n.chat--app--container .card .text-container input {\n border: none;\n padding: 10px;\n height: 37px;\n width: calc(500px - 70px);\n border-bottom-left-radius: 5px;\n}\n\n.chat--app--container .card .text-container button {\n border-radius: 0 !important;\n margin-bottom: 0;\n border: none;\n border-bottom-right-radius: 5px !important;\n}\n\n.class--list--app .class-list {\n list-style-type: none !important;\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[3];\n grid-template-columns: repeat(3, 1fr);\n}\n\n.class--list--app .class-list li {\n margin-bottom: 5px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.class--list--app textarea {\n width: 100%;\n margin-top: 20px;\n}\n\n.rate--calculator--app .rate-list {\n list-style-type: none !important;\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[6];\n grid-template-columns: repeat(6, 1fr);\n}\n\n.rate--calculator--app .rate-list li {\n margin-bottom: 5px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.rate--calculator--app input#money {\n margin-top: 15px;\n}\n\n.rate--calculator--app .rates-container {\n margin-top: 20px;\n list-style-type: none;\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[3];\n grid-template-columns: repeat(3, 1fr);\n}\n\n.rate--calculator--app .rates-container li {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n margin-bottom: 5px;\n}\n\n.rate--calculator--app .rates-container li:last-child {\n margin-bottom: 0;\n}\n\n.rate--calculator--app .rates-container li strong {\n margin-right: 5px;\n}\n/*# sourceMappingURL=style.css.map */" }, { "path": "ders-1-tekrar-dersi/odevler/comment-like-dislike-app/index.html", "content": "\n\n \n \n \n \n Comment Like/Dislike App\n \n \n \n
      Comment Like/Dislike App
      \n
      \n \n
      \n \n\n" }, { "path": "ders-1-tekrar-dersi/odevler/comment-like-dislike-app/readme.txt", "content": "ÖDEV\n1 - ) data üzerinde bulunan bir comments isimli bir Array üzerinden \".comment--item\" elementini v-for ile döndürünüz.\n1 - ) iterate the \".comment - item\" element with v-for over an Array named comments on the data.\n2 - ) 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.\n2 - ) 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).\n\nİPUCU:\nBeğeni sayılarını comments içerisinde tutabilirsiniz.\nYou can keep the number of likes in the comments.\n\nNOT:\nBeğeni sayılarının sürekli artmasının bir önemi yoktur.\nIt doesn't matter that the number of likes is constantly increasing." }, { "path": "ders-1-tekrar-dersi/odevler/comment-like-dislike-app/style.css", "content": "* {\n margin: 0;\n padding: 0;\n font-family: Arial, Helvetica, sans-serif;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n\n.bg-success {\n background-color: #6dc454 !important;\n color: #fff;\n}\n\n.bg-danger {\n background-color: #c64b4b !important;\n color: #fff;\n}\n\n.bg-primary {\n background-color: #316bc2 !important;\n color: #fff;\n}\n\n.bg-dark {\n background-color: #333 !important;\n color: #fff;\n}\n\n.text-left {\n text-align: left;\n}\n\n.text-right {\n text-align: right;\n}\n\n.text-center {\n text-align: center;\n}\n\n.text-info {\n color: #05a0f4;\n}\n\n.text-success {\n color: #6dc454;\n}\n\n.text-danger {\n color: #c64b4b;\n}\n\n.text-primary {\n color: #316bc2;\n}\n\n.text-dark {\n color: #333;\n}\n\n.text-muted {\n color: #ccc;\n}\n\n.font-weight-bold {\n font-weight: bold;\n}\n\n.font-italic {\n font-style: italic;\n}\n\n.mt-20 {\n margin-top: 20px;\n}\n\n.mb-20 {\n margin-bottom: 20px;\n}\n\n.ml-20 {\n margin-left: 20px;\n}\n\n.mr-20 {\n margin-right: 20px;\n}\n\n.mt-10 {\n margin-top: 10px;\n}\n\n.mb-10 {\n margin-bottom: 10px;\n}\n\n.ml-10 {\n margin-left: 10px;\n}\n\n.mr-10 {\n margin-right: 10px;\n}\n\n.mt-5 {\n margin-top: 5px;\n}\n\n.mb-5 {\n margin-bottom: 5px;\n}\n\n.ml-5 {\n margin-left: 5px;\n}\n\n.mr-5 {\n margin-right: 5px;\n}\n\n.pt-10 {\n padding-top: 10px;\n}\n\n.pb-10 {\n padding-bottom: 10px;\n}\n\n.pl-10 {\n padding-left: 10px;\n}\n\n.pr-10 {\n padding-right: 10px;\n}\n\n.pt-5 {\n padding-top: 5px;\n}\n\n.pb-5 {\n padding-bottom: 5px;\n}\n\n.pl-5 {\n padding-left: 5px;\n}\n\n.pr-5 {\n padding-right: 5px;\n}\n\n.pt-20 {\n padding-top: 20px;\n}\n\n.pb-20 {\n padding-bottom: 20px;\n}\n\n.pl-20 {\n padding-left: 20px;\n}\n\n.pr-20 {\n padding-right: 20px;\n}\n\n.d-flex {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n}\n\n.justify-content-start {\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: flex-start;\n}\n\n.justify-content-center {\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n}\n\n.justify-content-end {\n -webkit-box-pack: end;\n -ms-flex-pack: end;\n justify-content: flex-end;\n}\n\n.justify-content-between {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n}\n\n.align-items-start {\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n}\n\n.align-items-center {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.align-items-end {\n -webkit-box-align: end;\n -ms-flex-align: end;\n align-items: flex-end;\n}\n\n.w-10 {\n width: 10% !important;\n max-width: 10% !important;\n min-width: 10% !important;\n}\n\n.w-20 {\n width: 20% !important;\n max-width: 20% !important;\n min-width: 20% !important;\n}\n\n.w-30 {\n width: 30% !important;\n max-width: 30% !important;\n min-width: 30% !important;\n}\n\n.w-40 {\n width: 40% !important;\n max-width: 40% !important;\n min-width: 40% !important;\n}\n\n.w-50 {\n width: 50% !important;\n max-width: 50% !important;\n min-width: 50% !important;\n}\n\n.w-60 {\n width: 60% !important;\n max-width: 60% !important;\n min-width: 60% !important;\n}\n\n.w-70 {\n width: 70% !important;\n max-width: 70% !important;\n min-width: 70% !important;\n}\n\n.w-80 {\n width: 80% !important;\n max-width: 80% !important;\n min-width: 80% !important;\n}\n\n.w-90 {\n width: 90% !important;\n max-width: 90% !important;\n min-width: 90% !important;\n}\n\n.w-100 {\n width: 100% !important;\n max-width: 100% !important;\n min-width: 100% !important;\n}\n\n.card {\n background-color: #efefef;\n min-width: 500px;\n padding: 10px;\n border-radius: 3px;\n border-bottom: 1px solid #ccc;\n}\n\n.card-light {\n background-color: #fffafa;\n border: 1px solid #eee;\n border-bottom: 1px solid #ccc;\n}\n\nbutton {\n padding: 10px;\n font-size: 15px;\n outline: none;\n border: none;\n border-radius: 5px;\n border-bottom: 1px solid #ccc;\n background-color: #dad0d0;\n cursor: pointer;\n}\n\nbutton:hover {\n background-color: #f0eded;\n}\n\nbutton:active {\n background-color: white;\n}\n\nbutton.btn-primary {\n background-color: #316bc2;\n color: #fff;\n}\n\nbutton.btn-primary:hover {\n background-color: #5386d3;\n color: #fff;\n}\n\nbutton.btn-primary:active {\n background-color: #7ba3de;\n color: #fff;\n}\n\nbutton.btn-warning {\n background-color: #f5e20c;\n color: #000;\n}\n\nbutton.btn-warning:hover {\n background-color: #f9ee6e;\n color: #000;\n}\n\nbutton.btn-warning:active {\n background-color: #fbf49f;\n color: #000;\n}\n\nbutton.btn-info {\n background-color: #05a0f4;\n color: #fff;\n}\n\nbutton.btn-info:hover {\n background-color: #31b4fb;\n color: #fff;\n}\n\nbutton.btn-info:active {\n background-color: #63c6fc;\n color: #fff;\n}\n\nbutton.btn-success {\n background-color: #6dc454;\n color: #fff;\n}\n\nbutton.btn-success:hover {\n background-color: #8dd17a;\n color: #fff;\n}\n\nbutton.btn-success:active {\n background-color: #aedea0;\n color: #fff;\n}\n\nbutton.btn-danger {\n background-color: #c64b4b;\n color: #fff;\n}\n\nbutton.btn-danger:hover {\n background-color: #d27272;\n color: #fff;\n}\n\nbutton.btn-danger:active {\n background-color: #df9898;\n color: #fff;\n}\n\n.btn-sm {\n padding: 7px;\n font-size: 12px;\n}\n\n.form-group {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n margin-bottom: 10px;\n}\n\np {\n font-size: 14px;\n}\n\nlabel {\n font-size: 15px;\n display: inline-block;\n margin-bottom: 5px;\n}\n\nselect {\n outline: none;\n padding: 5px 10px;\n border: 1px solid #324354;\n}\n\ninput {\n outline: none;\n padding: 5px 10px;\n border: 1px solid #324354;\n}\n\ntextarea {\n outline: none;\n resize: none;\n padding: 5px 10px;\n border: 1px solid #324354;\n}\n\nheader {\n height: 50px;\n margin-bottom: 10px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n background-color: #324354;\n color: #fff;\n font-size: 20px;\n border-bottom: 2px solid #222b34;\n}\n\n.container {\n width: 100%;\n height: auto;\n padding: 10px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: start;\n}\n\nul.list {\n margin-top: 10px;\n list-style-type: none;\n}\n\nul.list li {\n padding: 5px 10px;\n background-color: #efefef;\n margin-bottom: 5px;\n border: 1px solid #ccc;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.pokemon--wars--app--container .game--area {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n width: 100%;\n padding: 10px;\n}\n\n.pokemon--wars--app--container .game--area h2 {\n margin-bottom: 20px;\n}\n\n.pokemon--wars--app--container .selection--container {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n width: 100%;\n padding: 10px;\n margin-bottom: 20px;\n}\n\n.pokemon--wars--app--container .selection--container img {\n -webkit-transition: all 0.5s;\n transition: all 0.5s;\n margin-right: 30px;\n}\n\n.pokemon--wars--app--container .selection--container img:last-child {\n margin-right: none;\n}\n\n.pokemon--wars--app--container .selection--container img.pikachu.selected-pokemon {\n border-radius: 10px;\n background-color: #f8c953c8;\n -webkit-transition: all 0.5s;\n transition: all 0.5s;\n}\n\n.pokemon--wars--app--container .selection--container img.pikachu:hover {\n border-radius: 10px;\n background-color: #f8c953c8;\n -webkit-transition: all 0.5s;\n transition: all 0.5s;\n}\n\n.pokemon--wars--app--container .selection--container img.bulbasaur.selected-pokemon {\n border-radius: 10px;\n background-color: #6ddba8c8;\n}\n\n.pokemon--wars--app--container .selection--container img.bulbasaur:hover {\n border-radius: 10px;\n background-color: #6ddba8c8;\n}\n\n.pokemon--wars--app--container .selection--container img.charmander.selected-pokemon {\n border-radius: 10px;\n background-color: #f7973fc8;\n}\n\n.pokemon--wars--app--container .selection--container img.charmander:hover {\n border-radius: 10px;\n background-color: #f7973fc8;\n}\n\n.pokemon--wars--app--container .selection--container img.squirtle.selected-pokemon {\n border-radius: 10px;\n background-color: #78eeffc8;\n}\n\n.pokemon--wars--app--container .selection--container img.squirtle:hover {\n border-radius: 10px;\n background-color: #78eeffc8;\n}\n\n.pokemon--wars--app--container .fight--area {\n width: 750px;\n}\n\n.pokemon--wars--app--container .health--container {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: end;\n -ms-flex-align: end;\n align-items: flex-end;\n}\n\n.pokemon--wars--app--container .name--health--bar {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.pokemon--wars--app--container .name--health--bar img {\n width: 70px;\n border-radius: 5px;\n}\n\n.pokemon--wars--app--container .name--health--bar img.pikachu {\n background-color: #f8c953c8;\n border: 2px solid #f8c953;\n}\n\n.pokemon--wars--app--container .name--health--bar img.bulbasaur {\n background-color: #6ddba8c8;\n border: 2px solid #6ddba8;\n}\n\n.pokemon--wars--app--container .name--health--bar img.charmander {\n background-color: #f7973fc8;\n border: 2px solid #f7973f;\n}\n\n.pokemon--wars--app--container .name--health--bar img.squirtle {\n background-color: #78eeffc8;\n border: 2px solid #78eeff;\n}\n\n.pokemon--wars--app--container .player--name {\n font-size: 18px;\n font-weight: bold;\n color: #324354;\n}\n\n.pokemon--wars--app--container .vs--container {\n font-size: 35px;\n color: #f7983f;\n font-weight: bold;\n font-style: italic;\n}\n\n.pokemon--wars--app--container progress {\n height: 50px;\n width: 280px;\n}\n\n.pokemon--wars--app--container progress[value] {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n width: 250px;\n height: 35px;\n}\n\n.pokemon--wars--app--container progress.pikachu[value]::-webkit-progress-bar {\n background-color: #f7983f27;\n border: 2px solid #f7983f;\n}\n\n.pokemon--wars--app--container progress.pikachu[value]::-webkit-progress-value {\n background-color: #f7973fc8;\n}\n\n.pokemon--wars--app--container progress.bulbasaur[value]::-webkit-progress-bar {\n background-color: #6ddba827;\n border: 2px solid #6ddba8;\n}\n\n.pokemon--wars--app--container progress.bulbasaur[value]::-webkit-progress-value {\n background-color: #6ddba8c8;\n}\n\n.pokemon--wars--app--container progress.charmander[value]::-webkit-progress-bar {\n background-color: #f7973f27;\n border: 2px solid #f7973f;\n}\n\n.pokemon--wars--app--container progress.charmander[value]::-webkit-progress-value {\n background-color: #f7973fc8;\n}\n\n.pokemon--wars--app--container progress.squirtle[value]::-webkit-progress-bar {\n background-color: #78eeff27;\n border: 2px solid #78eeff;\n}\n\n.pokemon--wars--app--container progress.squirtle[value]::-webkit-progress-value {\n background-color: #78eeffc8;\n}\n\n.pokemon--wars--app--container .attack--button--container {\n margin-top: 50px;\n}\n\n.pokemon--wars--app--container .logger--container {\n width: 400px;\n margin: 0 auto;\n margin-top: 50px;\n}\n\n.pokemon--wars--app--container .logger--container img {\n width: 40px;\n}\n\n.pokemon--wars--app--container .logger--container li {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n border-radius: 5px;\n}\n\n.pokemon--wars--app--container .game--finished--container {\n margin-top: 100px;\n font-size: 50px;\n}\n\n.css--class--app .css--palette {\n list-style-type: none;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.css--class--app .css--palette li {\n width: 50px;\n height: 50px;\n background-color: #ccc;\n border-radius: 50%;\n margin-left: 5px;\n border: 1px solid #bbb;\n}\n\n.css--class--app .result-box {\n width: 100%;\n height: 100px;\n background-color: #18bf71;\n margin-top: 15px;\n border-radius: 5px;\n border-bottom: 1px solid #ccc;\n -webkit-transition: background-color 0.5s;\n transition: background-color 0.5s;\n}\n\n.bookmark--app--container {\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr) [3];\n grid-template-columns: repeat(3, 1fr);\n grid-gap: 10px;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.bookmark--app--container .bookmark-item {\n width: 400px;\n background-color: #efefef;\n border-bottom: 1px solid #ccc;\n border-radius: 5px;\n padding: 10px;\n}\n\n.bookmark--app--container .bookmark-item .header {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.course--planner-app--container .user--action--container {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.course--planner-app--container .user--action--container .form-group {\n width: 80%;\n margin-right: 5px;\n}\n\n.bet--coupon--app .competition-list {\n padding: 0;\n border-radius: 5px;\n border: 1px solid #efefef;\n border-bottom: 1px solid #ccc;\n}\n\n.bet--coupon--app .my-coupon {\n padding: 0;\n border-radius: 5px;\n border: 1px solid #efefef;\n border-bottom: 1px solid #ccc;\n min-width: 400px !important;\n}\n\n.bet--coupon--app .my-coupon .card--header {\n background-color: #05a0f4 !important;\n}\n\n.bet--coupon--app .card--header {\n background-color: #324354 !important;\n color: #fff;\n border-top-left-radius: 5px;\n border-top-right-radius: 5px;\n padding: 10px;\n}\n\n.bet--coupon--app .card--body {\n background-color: #fff !important;\n padding: 10px;\n}\n\n.bet--coupon--app .competition-item {\n margin-bottom: 5px;\n padding: 10px 0;\n border-bottom: 1px solid #efefef;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.bet--coupon--app .competition-item:last-child {\n border-bottom: none;\n}\n\n.bet--coupon--app .competition-item .info--container {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: start;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n}\n\n.bet--coupon--app .competition-item .rates {\n width: 150px;\n text-align: right;\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr) [3];\n grid-template-columns: repeat(3, 1fr);\n}\n\n.bet--coupon--app .coupon-item {\n border-bottom: 1px solid #efefef;\n margin-bottom: 5px;\n padding: 10px 0;\n}\n\n.bet--coupon--app .coupon-item:last-child {\n border-bottom: none;\n}\n\n.bet--coupon--app .coupon--total--container {\n max-width: 300px;\n}\n\n.bet--coupon--app .coupon--total--container .my-coupon {\n min-width: 300px !important;\n}\n\n.bet--coupon--app .coupon--total--container .multiply--container {\n min-width: 300px !important;\n}\n\n.bet--coupon--app .coupon--total--container .multiply--container button:not(:last-child) {\n margin-right: 5px;\n margin-bottom: 5px;\n}\n\n.bet--coupon--app .multiply--buttons {\n -ms-flex-wrap: wrap;\n flex-wrap: wrap;\n}\n\n.contact--card--app {\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr) [4];\n grid-template-columns: repeat(4, 1fr);\n grid-gap: 20px;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.contact--card--app .contact-item {\n width: 180px;\n min-height: 282px;\n border-radius: 5px;\n background-color: #fff !important;\n}\n\n.contact--card--app .contact-item .invitation--header {\n width: 180px;\n height: 62px;\n background: url(\"https://static-exp1.licdn.com/sc/h/cpemy7gsm8bzfb5nnbbnswfdm\");\n background-size: cover;\n background-repeat: no-repeat;\n background-position: center;\n}\n\n.contact--card--app .contact-item .contact--info--container {\n padding: 10px;\n margin-top: 45px;\n}\n\n.contact--card--app .contact-item .contact--info--container p {\n font-size: 15px !important;\n}\n\n.contact--card--app .contact-item .contact--info--container a {\n font-size: 15px !important;\n}\n\n.contact--card--app .contact-item .action--button--container {\n margin-top: 10px;\n}\n\n.contact--card--app .contact-item .contact--image {\n border-radius: 50%;\n width: 100px;\n height: 100px;\n}\n\n.comment--like--dislike--app {\n width: 750px;\n}\n\n.chat--app--container .card {\n padding: 0;\n border-radius: 5px;\n border: 1px solid #efefef;\n border-bottom: 1px solid #ccc;\n max-width: 400px !important;\n}\n\n.chat--app--container .card .card--header {\n background-color: #316bc2 !important;\n color: #fff;\n border-top-left-radius: 5px;\n border-top-right-radius: 5px;\n padding: 10px;\n}\n\n.chat--app--container .card .card--body {\n background-color: #fff !important;\n padding: 10px;\n}\n\n.chat--app--container .card .card--body .active-user-item {\n margin-bottom: 20px;\n}\n\n.chat--app--container .card .card--body .active-user-item:last-child {\n margin-bottom: 0;\n}\n\n.chat--app--container .card .card--body .active-user-item .badge {\n background-color: #efefef;\n color: #333;\n text-transform: uppercase;\n padding: 10px;\n width: 40px;\n height: 40px;\n border-radius: 50%;\n}\n\n.chat--app--container .card .messages {\n list-style-type: none;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: flex-start;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n padding: 10px;\n height: calc(100vh - 200px);\n overflow-y: scroll;\n}\n\n.chat--app--container .card .messages li {\n max-width: 300px;\n padding: 5px 10px;\n margin-bottom: 15px;\n border-bottom: 1px solid #ccc;\n border-radius: 10px;\n background-color: #fffafa;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.chat--app--container .card .messages li small {\n margin-top: 10px;\n -ms-flex-item-align: end;\n align-self: flex-end;\n font-size: 12px;\n color: #ccc;\n font-style: italic;\n}\n\n.chat--app--container .card .messages li.current-user {\n -ms-flex-item-align: end;\n align-self: flex-end;\n background-color: #05a0f4;\n color: #fff;\n}\n\n.chat--app--container .card .text-container {\n margin-top: 30px;\n}\n\n.chat--app--container .card .text-container input {\n border: none;\n padding: 10px;\n height: 37px;\n width: calc(500px - 70px);\n border-bottom-left-radius: 5px;\n}\n\n.chat--app--container .card .text-container button {\n border-radius: 0 !important;\n margin-bottom: 0;\n border: none;\n border-bottom-right-radius: 5px !important;\n}\n\n.class--list--app .class-list {\n list-style-type: none !important;\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr) [3];\n grid-template-columns: repeat(3, 1fr);\n}\n\n.class--list--app .class-list li {\n margin-bottom: 5px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.class--list--app textarea {\n width: 100%;\n margin-top: 20px;\n}\n\n.rate--calculator--app .rate-list {\n list-style-type: none !important;\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr) [6];\n grid-template-columns: repeat(6, 1fr);\n}\n\n.rate--calculator--app .rate-list li {\n margin-bottom: 5px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.rate--calculator--app input#money {\n margin-top: 15px;\n}\n\n.rate--calculator--app .rates-container {\n margin-top: 20px;\n list-style-type: none;\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr) [3];\n grid-template-columns: repeat(3, 1fr);\n}\n\n.rate--calculator--app .rates-container li {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n margin-bottom: 5px;\n}\n\n.rate--calculator--app .rates-container li:last-child {\n margin-bottom: 0;\n}\n\n.rate--calculator--app .rates-container li strong {\n margin-right: 5px;\n}\n/*# sourceMappingURL=style.css.map */\n" }, { "path": "ders-1-tekrar-dersi/odevler/cozum-1/index.html", "content": "\n\n \n \n \n \n Ödev 1 | Template üzerine Veri Yazdırmak\n \n \n \n \n
      Ödev 1 | Template Üzerine Veri Yazdırmak
      \n\n
      \n
      \n \n

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

      \n\n \n

      {{ age * 5 }}

      \n\n \n \n

      {{ randomNumber() }}

      \n\n \n \n\n \n
      \n \n \n
      \n
      \n
      \n\n \n \n\n" }, { "path": "ders-1-tekrar-dersi/odevler/cozum-1/style.css", "content": "* {\n margin: 0;\n padding: 0;\n font-family: Arial, Helvetica, sans-serif;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n\n.bg-success {\n background-color: #6dc454 !important;\n color: #fff;\n}\n\n.bg-danger {\n background-color: #c64b4b !important;\n color: #fff;\n}\n\n.bg-primary {\n background-color: #316bc2 !important;\n color: #fff;\n}\n\n.bg-dark {\n background-color: #333 !important;\n color: #fff;\n}\n\n.text-left {\n text-align: left;\n}\n\n.text-right {\n text-align: right;\n}\n\n.text-center {\n text-align: center;\n}\n\n.text-info {\n color: #05a0f4;\n}\n\n.text-success {\n color: #6dc454;\n}\n\n.text-danger {\n color: #c64b4b;\n}\n\n.text-primary {\n color: #316bc2;\n}\n\n.text-dark {\n color: #333;\n}\n\n.text-muted {\n color: #ccc;\n}\n\n.font-weight-bold {\n font-weight: bold;\n}\n\n.font-italic {\n font-style: italic;\n}\n\n.mt-20 {\n margin-top: 20px;\n}\n\n.mb-20 {\n margin-bottom: 20px;\n}\n\n.ml-20 {\n margin-left: 20px;\n}\n\n.mr-20 {\n margin-right: 20px;\n}\n\n.mt-10 {\n margin-top: 10px;\n}\n\n.mb-10 {\n margin-bottom: 10px;\n}\n\n.ml-10 {\n margin-left: 10px;\n}\n\n.mr-10 {\n margin-right: 10px;\n}\n\n.mt-5 {\n margin-top: 5px;\n}\n\n.mb-5 {\n margin-bottom: 5px;\n}\n\n.ml-5 {\n margin-left: 5px;\n}\n\n.mr-5 {\n margin-right: 5px;\n}\n\n.pt-10 {\n padding-top: 10px;\n}\n\n.pb-10 {\n padding-bottom: 10px;\n}\n\n.pl-10 {\n padding-left: 10px;\n}\n\n.pr-10 {\n padding-right: 10px;\n}\n\n.pt-5 {\n padding-top: 5px;\n}\n\n.pb-5 {\n padding-bottom: 5px;\n}\n\n.pl-5 {\n padding-left: 5px;\n}\n\n.pr-5 {\n padding-right: 5px;\n}\n\n.pt-20 {\n padding-top: 20px;\n}\n\n.pb-20 {\n padding-bottom: 20px;\n}\n\n.pl-20 {\n padding-left: 20px;\n}\n\n.pr-20 {\n padding-right: 20px;\n}\n\n.d-flex {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n}\n\n.justify-content-start {\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: flex-start;\n}\n\n.justify-content-center {\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n}\n\n.justify-content-end {\n -webkit-box-pack: end;\n -ms-flex-pack: end;\n justify-content: flex-end;\n}\n\n.justify-content-between {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n}\n\n.align-items-start {\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n}\n\n.align-items-center {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.align-items-end {\n -webkit-box-align: end;\n -ms-flex-align: end;\n align-items: flex-end;\n}\n\n.w-10 {\n width: 10% !important;\n max-width: 10% !important;\n min-width: 10% !important;\n}\n\n.w-20 {\n width: 20% !important;\n max-width: 20% !important;\n min-width: 20% !important;\n}\n\n.w-30 {\n width: 30% !important;\n max-width: 30% !important;\n min-width: 30% !important;\n}\n\n.w-40 {\n width: 40% !important;\n max-width: 40% !important;\n min-width: 40% !important;\n}\n\n.w-50 {\n width: 50% !important;\n max-width: 50% !important;\n min-width: 50% !important;\n}\n\n.w-60 {\n width: 60% !important;\n max-width: 60% !important;\n min-width: 60% !important;\n}\n\n.w-70 {\n width: 70% !important;\n max-width: 70% !important;\n min-width: 70% !important;\n}\n\n.w-80 {\n width: 80% !important;\n max-width: 80% !important;\n min-width: 80% !important;\n}\n\n.w-90 {\n width: 90% !important;\n max-width: 90% !important;\n min-width: 90% !important;\n}\n\n.w-100 {\n width: 100% !important;\n max-width: 100% !important;\n min-width: 100% !important;\n}\n\n.card {\n background-color: #efefef;\n min-width: 500px;\n padding: 10px;\n border-radius: 3px;\n border-bottom: 1px solid #ccc;\n}\n\n.card-light {\n background-color: #fffafa;\n border: 1px solid #eee;\n border-bottom: 1px solid #ccc;\n}\n\nbutton {\n padding: 10px;\n font-size: 15px;\n outline: none;\n border: none;\n border-radius: 5px;\n border-bottom: 1px solid #ccc;\n background-color: #dad0d0;\n cursor: pointer;\n}\n\nbutton:hover {\n background-color: #f0eded;\n}\n\nbutton:active {\n background-color: white;\n}\n\nbutton.btn-primary {\n background-color: #316bc2;\n color: #fff;\n}\n\nbutton.btn-primary:hover {\n background-color: #5386d3;\n color: #fff;\n}\n\nbutton.btn-primary:active {\n background-color: #7ba3de;\n color: #fff;\n}\n\nbutton.btn-warning {\n background-color: #f5e20c;\n color: #000;\n}\n\nbutton.btn-warning:hover {\n background-color: #f9ee6e;\n color: #000;\n}\n\nbutton.btn-warning:active {\n background-color: #fbf49f;\n color: #000;\n}\n\nbutton.btn-info {\n background-color: #05a0f4;\n color: #fff;\n}\n\nbutton.btn-info:hover {\n background-color: #31b4fb;\n color: #fff;\n}\n\nbutton.btn-info:active {\n background-color: #63c6fc;\n color: #fff;\n}\n\nbutton.btn-success {\n background-color: #6dc454;\n color: #fff;\n}\n\nbutton.btn-success:hover {\n background-color: #8dd17a;\n color: #fff;\n}\n\nbutton.btn-success:active {\n background-color: #aedea0;\n color: #fff;\n}\n\nbutton.btn-danger {\n background-color: #c64b4b;\n color: #fff;\n}\n\nbutton.btn-danger:hover {\n background-color: #d27272;\n color: #fff;\n}\n\nbutton.btn-danger:active {\n background-color: #df9898;\n color: #fff;\n}\n\n.btn-sm {\n padding: 7px;\n font-size: 12px;\n}\n\n.form-group {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n margin-bottom: 10px;\n}\n\np {\n font-size: 14px;\n}\n\nlabel {\n font-size: 15px;\n display: inline-block;\n margin-bottom: 5px;\n}\n\nselect {\n outline: none;\n padding: 5px 10px;\n border: 1px solid #324354;\n}\n\ninput {\n outline: none;\n padding: 5px 10px;\n border: 1px solid #324354;\n}\n\ntextarea {\n outline: none;\n resize: none;\n padding: 5px 10px;\n border: 1px solid #324354;\n}\n\nheader {\n height: 50px;\n margin-bottom: 10px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n background-color: #324354;\n color: #fff;\n font-size: 20px;\n border-bottom: 2px solid #222b34;\n}\n\n.container {\n width: 100%;\n height: auto;\n padding: 10px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: start;\n}\n\nul.list {\n margin-top: 10px;\n list-style-type: none;\n}\n\nul.list li {\n padding: 5px 10px;\n background-color: #efefef;\n margin-bottom: 5px;\n border: 1px solid #ccc;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.pokemon--wars--app--container .game--area {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n width: 100%;\n padding: 10px;\n}\n\n.pokemon--wars--app--container .game--area h2 {\n margin-bottom: 20px;\n}\n\n.pokemon--wars--app--container .selection--container {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n width: 100%;\n padding: 10px;\n margin-bottom: 20px;\n}\n\n.pokemon--wars--app--container .selection--container img {\n -webkit-transition: all 0.5s;\n transition: all 0.5s;\n margin-right: 30px;\n}\n\n.pokemon--wars--app--container .selection--container img:last-child {\n margin-right: none;\n}\n\n.pokemon--wars--app--container .selection--container img.pikachu.selected-pokemon {\n border-radius: 10px;\n background-color: #f8c953c8;\n -webkit-transition: all 0.5s;\n transition: all 0.5s;\n}\n\n.pokemon--wars--app--container .selection--container img.pikachu:hover {\n border-radius: 10px;\n background-color: #f8c953c8;\n -webkit-transition: all 0.5s;\n transition: all 0.5s;\n}\n\n.pokemon--wars--app--container .selection--container img.bulbasaur.selected-pokemon {\n border-radius: 10px;\n background-color: #6ddba8c8;\n}\n\n.pokemon--wars--app--container .selection--container img.bulbasaur:hover {\n border-radius: 10px;\n background-color: #6ddba8c8;\n}\n\n.pokemon--wars--app--container .selection--container img.charmander.selected-pokemon {\n border-radius: 10px;\n background-color: #f7973fc8;\n}\n\n.pokemon--wars--app--container .selection--container img.charmander:hover {\n border-radius: 10px;\n background-color: #f7973fc8;\n}\n\n.pokemon--wars--app--container .selection--container img.squirtle.selected-pokemon {\n border-radius: 10px;\n background-color: #78eeffc8;\n}\n\n.pokemon--wars--app--container .selection--container img.squirtle:hover {\n border-radius: 10px;\n background-color: #78eeffc8;\n}\n\n.pokemon--wars--app--container .fight--area {\n width: 750px;\n}\n\n.pokemon--wars--app--container .health--container {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: end;\n -ms-flex-align: end;\n align-items: flex-end;\n}\n\n.pokemon--wars--app--container .name--health--bar {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.pokemon--wars--app--container .name--health--bar img {\n width: 70px;\n border-radius: 5px;\n}\n\n.pokemon--wars--app--container .name--health--bar img.pikachu {\n background-color: #f8c953c8;\n border: 2px solid #f8c953;\n}\n\n.pokemon--wars--app--container .name--health--bar img.bulbasaur {\n background-color: #6ddba8c8;\n border: 2px solid #6ddba8;\n}\n\n.pokemon--wars--app--container .name--health--bar img.charmander {\n background-color: #f7973fc8;\n border: 2px solid #f7973f;\n}\n\n.pokemon--wars--app--container .name--health--bar img.squirtle {\n background-color: #78eeffc8;\n border: 2px solid #78eeff;\n}\n\n.pokemon--wars--app--container .player--name {\n font-size: 18px;\n font-weight: bold;\n color: #324354;\n}\n\n.pokemon--wars--app--container .vs--container {\n font-size: 35px;\n color: #f7983f;\n font-weight: bold;\n font-style: italic;\n}\n\n.pokemon--wars--app--container progress {\n height: 50px;\n width: 280px;\n}\n\n.pokemon--wars--app--container progress[value] {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n width: 250px;\n height: 35px;\n}\n\n.pokemon--wars--app--container progress.pikachu[value]::-webkit-progress-bar {\n background-color: #f7983f27;\n border: 2px solid #f7983f;\n}\n\n.pokemon--wars--app--container progress.pikachu[value]::-webkit-progress-value {\n background-color: #f7973fc8;\n}\n\n.pokemon--wars--app--container progress.bulbasaur[value]::-webkit-progress-bar {\n background-color: #6ddba827;\n border: 2px solid #6ddba8;\n}\n\n.pokemon--wars--app--container progress.bulbasaur[value]::-webkit-progress-value {\n background-color: #6ddba8c8;\n}\n\n.pokemon--wars--app--container progress.charmander[value]::-webkit-progress-bar {\n background-color: #f7973f27;\n border: 2px solid #f7973f;\n}\n\n.pokemon--wars--app--container progress.charmander[value]::-webkit-progress-value {\n background-color: #f7973fc8;\n}\n\n.pokemon--wars--app--container progress.squirtle[value]::-webkit-progress-bar {\n background-color: #78eeff27;\n border: 2px solid #78eeff;\n}\n\n.pokemon--wars--app--container progress.squirtle[value]::-webkit-progress-value {\n background-color: #78eeffc8;\n}\n\n.pokemon--wars--app--container .attack--button--container {\n margin-top: 50px;\n}\n\n.pokemon--wars--app--container .logger--container {\n width: 400px;\n margin: 0 auto;\n margin-top: 50px;\n}\n\n.pokemon--wars--app--container .logger--container img {\n width: 40px;\n}\n\n.pokemon--wars--app--container .logger--container li {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n border-radius: 5px;\n}\n\n.pokemon--wars--app--container .game--finished--container {\n margin-top: 100px;\n font-size: 50px;\n}\n\n.css--class--app .css--palette {\n list-style-type: none;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.css--class--app .css--palette li {\n width: 50px;\n height: 50px;\n background-color: #ccc;\n border-radius: 50%;\n margin-left: 5px;\n border: 1px solid #bbb;\n}\n\n.css--class--app .result-box {\n width: 100%;\n height: 100px;\n background-color: #18bf71;\n margin-top: 15px;\n border-radius: 5px;\n border-bottom: 1px solid #ccc;\n -webkit-transition: background-color 0.5s;\n transition: background-color 0.5s;\n}\n\n.bookmark--app--container {\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[3];\n grid-template-columns: repeat(3, 1fr);\n grid-gap: 10px;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.bookmark--app--container .bookmark-item {\n width: 400px;\n background-color: #efefef;\n border-bottom: 1px solid #ccc;\n border-radius: 5px;\n padding: 10px;\n}\n\n.bookmark--app--container .bookmark-item .header {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.course--planner-app--container .user--action--container {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.course--planner-app--container .user--action--container .form-group {\n width: 80%;\n margin-right: 5px;\n}\n\n.bet--coupon--app .competition-list {\n padding: 0;\n border-radius: 5px;\n border: 1px solid #efefef;\n border-bottom: 1px solid #ccc;\n}\n\n.bet--coupon--app .my-coupon {\n padding: 0;\n border-radius: 5px;\n border: 1px solid #efefef;\n border-bottom: 1px solid #ccc;\n min-width: 400px !important;\n}\n\n.bet--coupon--app .my-coupon .card--header {\n background-color: #05a0f4 !important;\n}\n\n.bet--coupon--app .card--header {\n background-color: #324354 !important;\n color: #fff;\n border-top-left-radius: 5px;\n border-top-right-radius: 5px;\n padding: 10px;\n}\n\n.bet--coupon--app .card--body {\n background-color: #fff !important;\n padding: 10px;\n}\n\n.bet--coupon--app .competition-item {\n margin-bottom: 5px;\n padding: 10px 0;\n border-bottom: 1px solid #efefef;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.bet--coupon--app .competition-item:last-child {\n border-bottom: none;\n}\n\n.bet--coupon--app .competition-item .info--container {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: start;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n}\n\n.bet--coupon--app .competition-item .rates {\n width: 150px;\n text-align: right;\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[3];\n grid-template-columns: repeat(3, 1fr);\n}\n\n.bet--coupon--app .coupon-item {\n border-bottom: 1px solid #efefef;\n margin-bottom: 5px;\n padding: 10px 0;\n}\n\n.bet--coupon--app .coupon-item:last-child {\n border-bottom: none;\n}\n\n.bet--coupon--app .coupon--total--container {\n max-width: 300px;\n}\n\n.bet--coupon--app .coupon--total--container .my-coupon {\n min-width: 300px !important;\n}\n\n.bet--coupon--app .coupon--total--container .multiply--container {\n min-width: 300px !important;\n}\n\n.bet--coupon--app .coupon--total--container .multiply--container button:not(:last-child) {\n margin-right: 5px;\n margin-bottom: 5px;\n}\n\n.bet--coupon--app .multiply--buttons {\n -ms-flex-wrap: wrap;\n flex-wrap: wrap;\n}\n\n.contact--card--app {\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[4];\n grid-template-columns: repeat(4, 1fr);\n grid-gap: 20px;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.contact--card--app .contact-item {\n width: 180px;\n min-height: 282px;\n border-radius: 5px;\n background-color: #fff !important;\n}\n\n.contact--card--app .contact-item .invitation--header {\n width: 180px;\n height: 62px;\n background: url(\"https://static-exp1.licdn.com/sc/h/cpemy7gsm8bzfb5nnbbnswfdm\");\n background-size: cover;\n background-repeat: no-repeat;\n background-position: center;\n}\n\n.contact--card--app .contact-item .contact--info--container {\n padding: 10px;\n margin-top: 45px;\n}\n\n.contact--card--app .contact-item .contact--info--container p {\n font-size: 15px !important;\n}\n\n.contact--card--app .contact-item .contact--info--container a {\n font-size: 15px !important;\n}\n\n.contact--card--app .contact-item .action--button--container {\n margin-top: 10px;\n}\n\n.contact--card--app .contact-item .contact--image {\n border-radius: 50%;\n width: 100px;\n height: 100px;\n}\n\n.comment--like--dislike--app {\n width: 750px;\n}\n\n.chat--app--container .card {\n padding: 0;\n border-radius: 5px;\n border: 1px solid #efefef;\n border-bottom: 1px solid #ccc;\n max-width: 400px !important;\n}\n\n.chat--app--container .card .card--header {\n background-color: #316bc2 !important;\n color: #fff;\n border-top-left-radius: 5px;\n border-top-right-radius: 5px;\n padding: 10px;\n}\n\n.chat--app--container .card .card--body {\n background-color: #fff !important;\n padding: 10px;\n}\n\n.chat--app--container .card .card--body .active-user-item {\n margin-bottom: 20px;\n}\n\n.chat--app--container .card .card--body .active-user-item:last-child {\n margin-bottom: 0;\n}\n\n.chat--app--container .card .card--body .active-user-item .badge {\n background-color: #efefef;\n color: #333;\n text-transform: uppercase;\n padding: 10px;\n width: 40px;\n height: 40px;\n border-radius: 50%;\n}\n\n.chat--app--container .card .messages {\n list-style-type: none;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: flex-start;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n padding: 10px;\n height: calc(100vh - 200px);\n overflow-y: scroll;\n}\n\n.chat--app--container .card .messages li {\n max-width: 300px;\n padding: 5px 10px;\n margin-bottom: 15px;\n border-bottom: 1px solid #ccc;\n border-radius: 10px;\n background-color: #fffafa;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.chat--app--container .card .messages li small {\n margin-top: 10px;\n -ms-flex-item-align: end;\n align-self: flex-end;\n font-size: 12px;\n color: #ccc;\n font-style: italic;\n}\n\n.chat--app--container .card .messages li.current-user {\n -ms-flex-item-align: end;\n align-self: flex-end;\n background-color: #05a0f4;\n color: #fff;\n}\n\n.chat--app--container .card .text-container {\n margin-top: 30px;\n}\n\n.chat--app--container .card .text-container input {\n border: none;\n padding: 10px;\n height: 37px;\n width: calc(500px - 70px);\n border-bottom-left-radius: 5px;\n}\n\n.chat--app--container .card .text-container button {\n border-radius: 0 !important;\n margin-bottom: 0;\n border: none;\n border-bottom-right-radius: 5px !important;\n}\n\n.class--list--app .class-list {\n list-style-type: none !important;\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[3];\n grid-template-columns: repeat(3, 1fr);\n}\n\n.class--list--app .class-list li {\n margin-bottom: 5px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.class--list--app textarea {\n width: 100%;\n margin-top: 20px;\n}\n\n.rate--calculator--app .rate-list {\n list-style-type: none !important;\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[6];\n grid-template-columns: repeat(6, 1fr);\n}\n\n.rate--calculator--app .rate-list li {\n margin-bottom: 5px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.rate--calculator--app input#money {\n margin-top: 15px;\n}\n\n.rate--calculator--app .rates-container {\n margin-top: 20px;\n list-style-type: none;\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[3];\n grid-template-columns: repeat(3, 1fr);\n}\n\n.rate--calculator--app .rates-container li {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n margin-bottom: 5px;\n}\n\n.rate--calculator--app .rates-container li:last-child {\n margin-bottom: 0;\n}\n\n.rate--calculator--app .rates-container li strong {\n margin-right: 5px;\n}\n/*# sourceMappingURL=style.css.map */" }, { "path": "ders-1-tekrar-dersi/odevler/cozum-2/app.js", "content": "const app = Vue.createApp({\n data() {\n return {\n value: \"\",\n value2: \"\",\n };\n },\n methods: {\n showMeAlert() {\n alert(\"Bu bir alert..\");\n },\n keyDownEvent(e) {\n console.log(\"Event\", e);\n this.value = e.target.value;\n },\n keyDownEvent2(e) {\n console.log(\"Event\", e);\n this.value2 = e.target.value;\n },\n },\n});\napp.mount(\"#exercise\");\n" }, { "path": "ders-1-tekrar-dersi/odevler/cozum-2/index.html", "content": "\n\n \n \n \n \n Ödev 2 | Event\n \n \n \n \n
      Ödev 2 | Events
      \n
      \n
      \n \n
      \n \n
      \n\n \n
      \n \n

      {{ value }}

      \n
      \n \n \n\n
      \n \n

      {{ value2 }}

      \n
      \n
      \n
      \n \n \n\n" }, { "path": "ders-1-tekrar-dersi/odevler/cozum-2/style.css", "content": "* {\n margin: 0;\n padding: 0;\n font-family: Arial, Helvetica, sans-serif;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n\n.bg-success {\n background-color: #6dc454 !important;\n color: #fff;\n}\n\n.bg-danger {\n background-color: #c64b4b !important;\n color: #fff;\n}\n\n.bg-primary {\n background-color: #316bc2 !important;\n color: #fff;\n}\n\n.bg-dark {\n background-color: #333 !important;\n color: #fff;\n}\n\n.text-left {\n text-align: left;\n}\n\n.text-right {\n text-align: right;\n}\n\n.text-center {\n text-align: center;\n}\n\n.text-info {\n color: #05a0f4;\n}\n\n.text-success {\n color: #6dc454;\n}\n\n.text-danger {\n color: #c64b4b;\n}\n\n.text-primary {\n color: #316bc2;\n}\n\n.text-dark {\n color: #333;\n}\n\n.text-muted {\n color: #ccc;\n}\n\n.font-weight-bold {\n font-weight: bold;\n}\n\n.font-italic {\n font-style: italic;\n}\n\n.mt-20 {\n margin-top: 20px;\n}\n\n.mb-20 {\n margin-bottom: 20px;\n}\n\n.ml-20 {\n margin-left: 20px;\n}\n\n.mr-20 {\n margin-right: 20px;\n}\n\n.mt-10 {\n margin-top: 10px;\n}\n\n.mb-10 {\n margin-bottom: 10px;\n}\n\n.ml-10 {\n margin-left: 10px;\n}\n\n.mr-10 {\n margin-right: 10px;\n}\n\n.mt-5 {\n margin-top: 5px;\n}\n\n.mb-5 {\n margin-bottom: 5px;\n}\n\n.ml-5 {\n margin-left: 5px;\n}\n\n.mr-5 {\n margin-right: 5px;\n}\n\n.pt-10 {\n padding-top: 10px;\n}\n\n.pb-10 {\n padding-bottom: 10px;\n}\n\n.pl-10 {\n padding-left: 10px;\n}\n\n.pr-10 {\n padding-right: 10px;\n}\n\n.pt-5 {\n padding-top: 5px;\n}\n\n.pb-5 {\n padding-bottom: 5px;\n}\n\n.pl-5 {\n padding-left: 5px;\n}\n\n.pr-5 {\n padding-right: 5px;\n}\n\n.pt-20 {\n padding-top: 20px;\n}\n\n.pb-20 {\n padding-bottom: 20px;\n}\n\n.pl-20 {\n padding-left: 20px;\n}\n\n.pr-20 {\n padding-right: 20px;\n}\n\n.d-flex {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n}\n\n.justify-content-start {\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: flex-start;\n}\n\n.justify-content-center {\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n}\n\n.justify-content-end {\n -webkit-box-pack: end;\n -ms-flex-pack: end;\n justify-content: flex-end;\n}\n\n.justify-content-between {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n}\n\n.align-items-start {\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n}\n\n.align-items-center {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.align-items-end {\n -webkit-box-align: end;\n -ms-flex-align: end;\n align-items: flex-end;\n}\n\n.w-10 {\n width: 10% !important;\n max-width: 10% !important;\n min-width: 10% !important;\n}\n\n.w-20 {\n width: 20% !important;\n max-width: 20% !important;\n min-width: 20% !important;\n}\n\n.w-30 {\n width: 30% !important;\n max-width: 30% !important;\n min-width: 30% !important;\n}\n\n.w-40 {\n width: 40% !important;\n max-width: 40% !important;\n min-width: 40% !important;\n}\n\n.w-50 {\n width: 50% !important;\n max-width: 50% !important;\n min-width: 50% !important;\n}\n\n.w-60 {\n width: 60% !important;\n max-width: 60% !important;\n min-width: 60% !important;\n}\n\n.w-70 {\n width: 70% !important;\n max-width: 70% !important;\n min-width: 70% !important;\n}\n\n.w-80 {\n width: 80% !important;\n max-width: 80% !important;\n min-width: 80% !important;\n}\n\n.w-90 {\n width: 90% !important;\n max-width: 90% !important;\n min-width: 90% !important;\n}\n\n.w-100 {\n width: 100% !important;\n max-width: 100% !important;\n min-width: 100% !important;\n}\n\n.card {\n background-color: #efefef;\n min-width: 500px;\n padding: 10px;\n border-radius: 3px;\n border-bottom: 1px solid #ccc;\n}\n\n.card-light {\n background-color: #fffafa;\n border: 1px solid #eee;\n border-bottom: 1px solid #ccc;\n}\n\nbutton {\n padding: 10px;\n font-size: 15px;\n outline: none;\n border: none;\n border-radius: 5px;\n border-bottom: 1px solid #ccc;\n background-color: #dad0d0;\n cursor: pointer;\n}\n\nbutton:hover {\n background-color: #f0eded;\n}\n\nbutton:active {\n background-color: white;\n}\n\nbutton.btn-primary {\n background-color: #316bc2;\n color: #fff;\n}\n\nbutton.btn-primary:hover {\n background-color: #5386d3;\n color: #fff;\n}\n\nbutton.btn-primary:active {\n background-color: #7ba3de;\n color: #fff;\n}\n\nbutton.btn-warning {\n background-color: #f5e20c;\n color: #000;\n}\n\nbutton.btn-warning:hover {\n background-color: #f9ee6e;\n color: #000;\n}\n\nbutton.btn-warning:active {\n background-color: #fbf49f;\n color: #000;\n}\n\nbutton.btn-info {\n background-color: #05a0f4;\n color: #fff;\n}\n\nbutton.btn-info:hover {\n background-color: #31b4fb;\n color: #fff;\n}\n\nbutton.btn-info:active {\n background-color: #63c6fc;\n color: #fff;\n}\n\nbutton.btn-success {\n background-color: #6dc454;\n color: #fff;\n}\n\nbutton.btn-success:hover {\n background-color: #8dd17a;\n color: #fff;\n}\n\nbutton.btn-success:active {\n background-color: #aedea0;\n color: #fff;\n}\n\nbutton.btn-danger {\n background-color: #c64b4b;\n color: #fff;\n}\n\nbutton.btn-danger:hover {\n background-color: #d27272;\n color: #fff;\n}\n\nbutton.btn-danger:active {\n background-color: #df9898;\n color: #fff;\n}\n\n.btn-sm {\n padding: 7px;\n font-size: 12px;\n}\n\n.form-group {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n margin-bottom: 10px;\n}\n\np {\n font-size: 14px;\n}\n\nlabel {\n font-size: 15px;\n display: inline-block;\n margin-bottom: 5px;\n}\n\nselect {\n outline: none;\n padding: 5px 10px;\n border: 1px solid #324354;\n}\n\ninput {\n outline: none;\n padding: 5px 10px;\n border: 1px solid #324354;\n}\n\ntextarea {\n outline: none;\n resize: none;\n padding: 5px 10px;\n border: 1px solid #324354;\n}\n\nheader {\n height: 50px;\n margin-bottom: 10px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n background-color: #324354;\n color: #fff;\n font-size: 20px;\n border-bottom: 2px solid #222b34;\n}\n\n.container {\n width: 100%;\n height: auto;\n padding: 10px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: start;\n}\n\nul.list {\n margin-top: 10px;\n list-style-type: none;\n}\n\nul.list li {\n padding: 5px 10px;\n background-color: #efefef;\n margin-bottom: 5px;\n border: 1px solid #ccc;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.pokemon--wars--app--container .game--area {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n width: 100%;\n padding: 10px;\n}\n\n.pokemon--wars--app--container .game--area h2 {\n margin-bottom: 20px;\n}\n\n.pokemon--wars--app--container .selection--container {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n width: 100%;\n padding: 10px;\n margin-bottom: 20px;\n}\n\n.pokemon--wars--app--container .selection--container img {\n -webkit-transition: all 0.5s;\n transition: all 0.5s;\n margin-right: 30px;\n}\n\n.pokemon--wars--app--container .selection--container img:last-child {\n margin-right: none;\n}\n\n.pokemon--wars--app--container .selection--container img.pikachu.selected-pokemon {\n border-radius: 10px;\n background-color: #f8c953c8;\n -webkit-transition: all 0.5s;\n transition: all 0.5s;\n}\n\n.pokemon--wars--app--container .selection--container img.pikachu:hover {\n border-radius: 10px;\n background-color: #f8c953c8;\n -webkit-transition: all 0.5s;\n transition: all 0.5s;\n}\n\n.pokemon--wars--app--container .selection--container img.bulbasaur.selected-pokemon {\n border-radius: 10px;\n background-color: #6ddba8c8;\n}\n\n.pokemon--wars--app--container .selection--container img.bulbasaur:hover {\n border-radius: 10px;\n background-color: #6ddba8c8;\n}\n\n.pokemon--wars--app--container .selection--container img.charmander.selected-pokemon {\n border-radius: 10px;\n background-color: #f7973fc8;\n}\n\n.pokemon--wars--app--container .selection--container img.charmander:hover {\n border-radius: 10px;\n background-color: #f7973fc8;\n}\n\n.pokemon--wars--app--container .selection--container img.squirtle.selected-pokemon {\n border-radius: 10px;\n background-color: #78eeffc8;\n}\n\n.pokemon--wars--app--container .selection--container img.squirtle:hover {\n border-radius: 10px;\n background-color: #78eeffc8;\n}\n\n.pokemon--wars--app--container .fight--area {\n width: 750px;\n}\n\n.pokemon--wars--app--container .health--container {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: end;\n -ms-flex-align: end;\n align-items: flex-end;\n}\n\n.pokemon--wars--app--container .name--health--bar {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.pokemon--wars--app--container .name--health--bar img {\n width: 70px;\n border-radius: 5px;\n}\n\n.pokemon--wars--app--container .name--health--bar img.pikachu {\n background-color: #f8c953c8;\n border: 2px solid #f8c953;\n}\n\n.pokemon--wars--app--container .name--health--bar img.bulbasaur {\n background-color: #6ddba8c8;\n border: 2px solid #6ddba8;\n}\n\n.pokemon--wars--app--container .name--health--bar img.charmander {\n background-color: #f7973fc8;\n border: 2px solid #f7973f;\n}\n\n.pokemon--wars--app--container .name--health--bar img.squirtle {\n background-color: #78eeffc8;\n border: 2px solid #78eeff;\n}\n\n.pokemon--wars--app--container .player--name {\n font-size: 18px;\n font-weight: bold;\n color: #324354;\n}\n\n.pokemon--wars--app--container .vs--container {\n font-size: 35px;\n color: #f7983f;\n font-weight: bold;\n font-style: italic;\n}\n\n.pokemon--wars--app--container progress {\n height: 50px;\n width: 280px;\n}\n\n.pokemon--wars--app--container progress[value] {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n width: 250px;\n height: 35px;\n}\n\n.pokemon--wars--app--container progress.pikachu[value]::-webkit-progress-bar {\n background-color: #f7983f27;\n border: 2px solid #f7983f;\n}\n\n.pokemon--wars--app--container progress.pikachu[value]::-webkit-progress-value {\n background-color: #f7973fc8;\n}\n\n.pokemon--wars--app--container progress.bulbasaur[value]::-webkit-progress-bar {\n background-color: #6ddba827;\n border: 2px solid #6ddba8;\n}\n\n.pokemon--wars--app--container progress.bulbasaur[value]::-webkit-progress-value {\n background-color: #6ddba8c8;\n}\n\n.pokemon--wars--app--container progress.charmander[value]::-webkit-progress-bar {\n background-color: #f7973f27;\n border: 2px solid #f7973f;\n}\n\n.pokemon--wars--app--container progress.charmander[value]::-webkit-progress-value {\n background-color: #f7973fc8;\n}\n\n.pokemon--wars--app--container progress.squirtle[value]::-webkit-progress-bar {\n background-color: #78eeff27;\n border: 2px solid #78eeff;\n}\n\n.pokemon--wars--app--container progress.squirtle[value]::-webkit-progress-value {\n background-color: #78eeffc8;\n}\n\n.pokemon--wars--app--container .attack--button--container {\n margin-top: 50px;\n}\n\n.pokemon--wars--app--container .logger--container {\n width: 400px;\n margin: 0 auto;\n margin-top: 50px;\n}\n\n.pokemon--wars--app--container .logger--container img {\n width: 40px;\n}\n\n.pokemon--wars--app--container .logger--container li {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n border-radius: 5px;\n}\n\n.pokemon--wars--app--container .game--finished--container {\n margin-top: 100px;\n font-size: 50px;\n}\n\n.css--class--app .css--palette {\n list-style-type: none;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.css--class--app .css--palette li {\n width: 50px;\n height: 50px;\n background-color: #ccc;\n border-radius: 50%;\n margin-left: 5px;\n border: 1px solid #bbb;\n}\n\n.css--class--app .result-box {\n width: 100%;\n height: 100px;\n background-color: #18bf71;\n margin-top: 15px;\n border-radius: 5px;\n border-bottom: 1px solid #ccc;\n -webkit-transition: background-color 0.5s;\n transition: background-color 0.5s;\n}\n\n.bookmark--app--container {\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[3];\n grid-template-columns: repeat(3, 1fr);\n grid-gap: 10px;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.bookmark--app--container .bookmark-item {\n width: 400px;\n background-color: #efefef;\n border-bottom: 1px solid #ccc;\n border-radius: 5px;\n padding: 10px;\n}\n\n.bookmark--app--container .bookmark-item .header {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.course--planner-app--container .user--action--container {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.course--planner-app--container .user--action--container .form-group {\n width: 80%;\n margin-right: 5px;\n}\n\n.bet--coupon--app .competition-list {\n padding: 0;\n border-radius: 5px;\n border: 1px solid #efefef;\n border-bottom: 1px solid #ccc;\n}\n\n.bet--coupon--app .my-coupon {\n padding: 0;\n border-radius: 5px;\n border: 1px solid #efefef;\n border-bottom: 1px solid #ccc;\n min-width: 400px !important;\n}\n\n.bet--coupon--app .my-coupon .card--header {\n background-color: #05a0f4 !important;\n}\n\n.bet--coupon--app .card--header {\n background-color: #324354 !important;\n color: #fff;\n border-top-left-radius: 5px;\n border-top-right-radius: 5px;\n padding: 10px;\n}\n\n.bet--coupon--app .card--body {\n background-color: #fff !important;\n padding: 10px;\n}\n\n.bet--coupon--app .competition-item {\n margin-bottom: 5px;\n padding: 10px 0;\n border-bottom: 1px solid #efefef;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.bet--coupon--app .competition-item:last-child {\n border-bottom: none;\n}\n\n.bet--coupon--app .competition-item .info--container {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: start;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n}\n\n.bet--coupon--app .competition-item .rates {\n width: 150px;\n text-align: right;\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[3];\n grid-template-columns: repeat(3, 1fr);\n}\n\n.bet--coupon--app .coupon-item {\n border-bottom: 1px solid #efefef;\n margin-bottom: 5px;\n padding: 10px 0;\n}\n\n.bet--coupon--app .coupon-item:last-child {\n border-bottom: none;\n}\n\n.bet--coupon--app .coupon--total--container {\n max-width: 300px;\n}\n\n.bet--coupon--app .coupon--total--container .my-coupon {\n min-width: 300px !important;\n}\n\n.bet--coupon--app .coupon--total--container .multiply--container {\n min-width: 300px !important;\n}\n\n.bet--coupon--app .coupon--total--container .multiply--container button:not(:last-child) {\n margin-right: 5px;\n margin-bottom: 5px;\n}\n\n.bet--coupon--app .multiply--buttons {\n -ms-flex-wrap: wrap;\n flex-wrap: wrap;\n}\n\n.contact--card--app {\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[4];\n grid-template-columns: repeat(4, 1fr);\n grid-gap: 20px;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.contact--card--app .contact-item {\n width: 180px;\n min-height: 282px;\n border-radius: 5px;\n background-color: #fff !important;\n}\n\n.contact--card--app .contact-item .invitation--header {\n width: 180px;\n height: 62px;\n background: url(\"https://static-exp1.licdn.com/sc/h/cpemy7gsm8bzfb5nnbbnswfdm\");\n background-size: cover;\n background-repeat: no-repeat;\n background-position: center;\n}\n\n.contact--card--app .contact-item .contact--info--container {\n padding: 10px;\n margin-top: 45px;\n}\n\n.contact--card--app .contact-item .contact--info--container p {\n font-size: 15px !important;\n}\n\n.contact--card--app .contact-item .contact--info--container a {\n font-size: 15px !important;\n}\n\n.contact--card--app .contact-item .action--button--container {\n margin-top: 10px;\n}\n\n.contact--card--app .contact-item .contact--image {\n border-radius: 50%;\n width: 100px;\n height: 100px;\n}\n\n.comment--like--dislike--app {\n width: 750px;\n}\n\n.chat--app--container .card {\n padding: 0;\n border-radius: 5px;\n border: 1px solid #efefef;\n border-bottom: 1px solid #ccc;\n max-width: 400px !important;\n}\n\n.chat--app--container .card .card--header {\n background-color: #316bc2 !important;\n color: #fff;\n border-top-left-radius: 5px;\n border-top-right-radius: 5px;\n padding: 10px;\n}\n\n.chat--app--container .card .card--body {\n background-color: #fff !important;\n padding: 10px;\n}\n\n.chat--app--container .card .card--body .active-user-item {\n margin-bottom: 20px;\n}\n\n.chat--app--container .card .card--body .active-user-item:last-child {\n margin-bottom: 0;\n}\n\n.chat--app--container .card .card--body .active-user-item .badge {\n background-color: #efefef;\n color: #333;\n text-transform: uppercase;\n padding: 10px;\n width: 40px;\n height: 40px;\n border-radius: 50%;\n}\n\n.chat--app--container .card .messages {\n list-style-type: none;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: flex-start;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n padding: 10px;\n height: calc(100vh - 200px);\n overflow-y: scroll;\n}\n\n.chat--app--container .card .messages li {\n max-width: 300px;\n padding: 5px 10px;\n margin-bottom: 15px;\n border-bottom: 1px solid #ccc;\n border-radius: 10px;\n background-color: #fffafa;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.chat--app--container .card .messages li small {\n margin-top: 10px;\n -ms-flex-item-align: end;\n align-self: flex-end;\n font-size: 12px;\n color: #ccc;\n font-style: italic;\n}\n\n.chat--app--container .card .messages li.current-user {\n -ms-flex-item-align: end;\n align-self: flex-end;\n background-color: #05a0f4;\n color: #fff;\n}\n\n.chat--app--container .card .text-container {\n margin-top: 30px;\n}\n\n.chat--app--container .card .text-container input {\n border: none;\n padding: 10px;\n height: 37px;\n width: calc(500px - 70px);\n border-bottom-left-radius: 5px;\n}\n\n.chat--app--container .card .text-container button {\n border-radius: 0 !important;\n margin-bottom: 0;\n border: none;\n border-bottom-right-radius: 5px !important;\n}\n\n.class--list--app .class-list {\n list-style-type: none !important;\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[3];\n grid-template-columns: repeat(3, 1fr);\n}\n\n.class--list--app .class-list li {\n margin-bottom: 5px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.class--list--app textarea {\n width: 100%;\n margin-top: 20px;\n}\n\n.rate--calculator--app .rate-list {\n list-style-type: none !important;\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[6];\n grid-template-columns: repeat(6, 1fr);\n}\n\n.rate--calculator--app .rate-list li {\n margin-bottom: 5px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.rate--calculator--app input#money {\n margin-top: 15px;\n}\n\n.rate--calculator--app .rates-container {\n margin-top: 20px;\n list-style-type: none;\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[3];\n grid-template-columns: repeat(3, 1fr);\n}\n\n.rate--calculator--app .rates-container li {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n margin-bottom: 5px;\n}\n\n.rate--calculator--app .rates-container li:last-child {\n margin-bottom: 0;\n}\n\n.rate--calculator--app .rates-container li strong {\n margin-right: 5px;\n}\n/*# sourceMappingURL=style.css.map */" }, { "path": "ders-1-tekrar-dersi/odevler/cozum-3/app.js", "content": "const app = Vue.createApp({\n data() {\n return {\n value: 0,\n result2: null,\n };\n },\n computed: {\n result() {\n return this.value === 33 ? \"Tamamlandı\" : \"Henüz tamamlanmadı..\";\n },\n },\n watch: {\n value(v) {\n if (v === 33) {\n this.result2 = \"Tamamlandı\";\n } else {\n this.result2 = \"Henüz tamamlanmadı\";\n }\n },\n result() {\n setTimeout(() => {\n this.value = 0;\n }, 2000);\n },\n },\n});\napp.mount(\"#exercise\");\n\n// Vue 2\n// new Vue({\n// el: \"#exercise\",\n// data: {\n// value: 0,\n// },\n// });\n\n// Vue 3\n// const app = Vue.createApp({\n// data() {\n// return {};\n// },\n// })\n// app.mount(\"#exercise\");\n" }, { "path": "ders-1-tekrar-dersi/odevler/cozum-3/index.html", "content": "\n\n \n \n \n \n Reactivity\n \n \n \n \n
      Ödev 3 | Reactivity
      \n
      \n
      \n
      \n \n \n
      \n

      Şuanki Değer: {{ value }}

      \n \n \n

      {{ result }}

      \n

      {{ result2 }}

      \n
      \n \n \n
      \n \n

      {{ value }}

      \n
      \n
      \n
      \n
      \n \n \n\n" }, { "path": "ders-1-tekrar-dersi/odevler/cozum-3/style.css", "content": "* {\n margin: 0;\n padding: 0;\n font-family: Arial, Helvetica, sans-serif;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n\n.bg-success {\n background-color: #6dc454 !important;\n color: #fff;\n}\n\n.bg-danger {\n background-color: #c64b4b !important;\n color: #fff;\n}\n\n.bg-primary {\n background-color: #316bc2 !important;\n color: #fff;\n}\n\n.bg-dark {\n background-color: #333 !important;\n color: #fff;\n}\n\n.text-left {\n text-align: left;\n}\n\n.text-right {\n text-align: right;\n}\n\n.text-center {\n text-align: center;\n}\n\n.text-info {\n color: #05a0f4;\n}\n\n.text-success {\n color: #6dc454;\n}\n\n.text-danger {\n color: #c64b4b;\n}\n\n.text-primary {\n color: #316bc2;\n}\n\n.text-dark {\n color: #333;\n}\n\n.text-muted {\n color: #ccc;\n}\n\n.font-weight-bold {\n font-weight: bold;\n}\n\n.font-italic {\n font-style: italic;\n}\n\n.mt-20 {\n margin-top: 20px;\n}\n\n.mb-20 {\n margin-bottom: 20px;\n}\n\n.ml-20 {\n margin-left: 20px;\n}\n\n.mr-20 {\n margin-right: 20px;\n}\n\n.mt-10 {\n margin-top: 10px;\n}\n\n.mb-10 {\n margin-bottom: 10px;\n}\n\n.ml-10 {\n margin-left: 10px;\n}\n\n.mr-10 {\n margin-right: 10px;\n}\n\n.mt-5 {\n margin-top: 5px;\n}\n\n.mb-5 {\n margin-bottom: 5px;\n}\n\n.ml-5 {\n margin-left: 5px;\n}\n\n.mr-5 {\n margin-right: 5px;\n}\n\n.pt-10 {\n padding-top: 10px;\n}\n\n.pb-10 {\n padding-bottom: 10px;\n}\n\n.pl-10 {\n padding-left: 10px;\n}\n\n.pr-10 {\n padding-right: 10px;\n}\n\n.pt-5 {\n padding-top: 5px;\n}\n\n.pb-5 {\n padding-bottom: 5px;\n}\n\n.pl-5 {\n padding-left: 5px;\n}\n\n.pr-5 {\n padding-right: 5px;\n}\n\n.pt-20 {\n padding-top: 20px;\n}\n\n.pb-20 {\n padding-bottom: 20px;\n}\n\n.pl-20 {\n padding-left: 20px;\n}\n\n.pr-20 {\n padding-right: 20px;\n}\n\n.d-flex {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n}\n\n.justify-content-start {\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: flex-start;\n}\n\n.justify-content-center {\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n}\n\n.justify-content-end {\n -webkit-box-pack: end;\n -ms-flex-pack: end;\n justify-content: flex-end;\n}\n\n.justify-content-between {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n}\n\n.align-items-start {\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n}\n\n.align-items-center {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.align-items-end {\n -webkit-box-align: end;\n -ms-flex-align: end;\n align-items: flex-end;\n}\n\n.w-10 {\n width: 10% !important;\n max-width: 10% !important;\n min-width: 10% !important;\n}\n\n.w-20 {\n width: 20% !important;\n max-width: 20% !important;\n min-width: 20% !important;\n}\n\n.w-30 {\n width: 30% !important;\n max-width: 30% !important;\n min-width: 30% !important;\n}\n\n.w-40 {\n width: 40% !important;\n max-width: 40% !important;\n min-width: 40% !important;\n}\n\n.w-50 {\n width: 50% !important;\n max-width: 50% !important;\n min-width: 50% !important;\n}\n\n.w-60 {\n width: 60% !important;\n max-width: 60% !important;\n min-width: 60% !important;\n}\n\n.w-70 {\n width: 70% !important;\n max-width: 70% !important;\n min-width: 70% !important;\n}\n\n.w-80 {\n width: 80% !important;\n max-width: 80% !important;\n min-width: 80% !important;\n}\n\n.w-90 {\n width: 90% !important;\n max-width: 90% !important;\n min-width: 90% !important;\n}\n\n.w-100 {\n width: 100% !important;\n max-width: 100% !important;\n min-width: 100% !important;\n}\n\n.card {\n background-color: #efefef;\n min-width: 500px;\n padding: 10px;\n border-radius: 3px;\n border-bottom: 1px solid #ccc;\n}\n\n.card-light {\n background-color: #fffafa;\n border: 1px solid #eee;\n border-bottom: 1px solid #ccc;\n}\n\nbutton {\n padding: 10px;\n font-size: 15px;\n outline: none;\n border: none;\n border-radius: 5px;\n border-bottom: 1px solid #ccc;\n background-color: #dad0d0;\n cursor: pointer;\n}\n\nbutton:hover {\n background-color: #f0eded;\n}\n\nbutton:active {\n background-color: white;\n}\n\nbutton.btn-primary {\n background-color: #316bc2;\n color: #fff;\n}\n\nbutton.btn-primary:hover {\n background-color: #5386d3;\n color: #fff;\n}\n\nbutton.btn-primary:active {\n background-color: #7ba3de;\n color: #fff;\n}\n\nbutton.btn-warning {\n background-color: #f5e20c;\n color: #000;\n}\n\nbutton.btn-warning:hover {\n background-color: #f9ee6e;\n color: #000;\n}\n\nbutton.btn-warning:active {\n background-color: #fbf49f;\n color: #000;\n}\n\nbutton.btn-info {\n background-color: #05a0f4;\n color: #fff;\n}\n\nbutton.btn-info:hover {\n background-color: #31b4fb;\n color: #fff;\n}\n\nbutton.btn-info:active {\n background-color: #63c6fc;\n color: #fff;\n}\n\nbutton.btn-success {\n background-color: #6dc454;\n color: #fff;\n}\n\nbutton.btn-success:hover {\n background-color: #8dd17a;\n color: #fff;\n}\n\nbutton.btn-success:active {\n background-color: #aedea0;\n color: #fff;\n}\n\nbutton.btn-danger {\n background-color: #c64b4b;\n color: #fff;\n}\n\nbutton.btn-danger:hover {\n background-color: #d27272;\n color: #fff;\n}\n\nbutton.btn-danger:active {\n background-color: #df9898;\n color: #fff;\n}\n\n.btn-sm {\n padding: 7px;\n font-size: 12px;\n}\n\n.form-group {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n margin-bottom: 10px;\n}\n\np {\n font-size: 14px;\n}\n\nlabel {\n font-size: 15px;\n display: inline-block;\n margin-bottom: 5px;\n}\n\nselect {\n outline: none;\n padding: 5px 10px;\n border: 1px solid #324354;\n}\n\ninput {\n outline: none;\n padding: 5px 10px;\n border: 1px solid #324354;\n}\n\ntextarea {\n outline: none;\n resize: none;\n padding: 5px 10px;\n border: 1px solid #324354;\n}\n\nheader {\n height: 50px;\n margin-bottom: 10px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n background-color: #324354;\n color: #fff;\n font-size: 20px;\n border-bottom: 2px solid #222b34;\n}\n\n.container {\n width: 100%;\n height: auto;\n padding: 10px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: start;\n}\n\nul.list {\n margin-top: 10px;\n list-style-type: none;\n}\n\nul.list li {\n padding: 5px 10px;\n background-color: #efefef;\n margin-bottom: 5px;\n border: 1px solid #ccc;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.pokemon--wars--app--container .game--area {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n width: 100%;\n padding: 10px;\n}\n\n.pokemon--wars--app--container .game--area h2 {\n margin-bottom: 20px;\n}\n\n.pokemon--wars--app--container .selection--container {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n width: 100%;\n padding: 10px;\n margin-bottom: 20px;\n}\n\n.pokemon--wars--app--container .selection--container img {\n -webkit-transition: all 0.5s;\n transition: all 0.5s;\n margin-right: 30px;\n}\n\n.pokemon--wars--app--container .selection--container img:last-child {\n margin-right: none;\n}\n\n.pokemon--wars--app--container .selection--container img.pikachu.selected-pokemon {\n border-radius: 10px;\n background-color: #f8c953c8;\n -webkit-transition: all 0.5s;\n transition: all 0.5s;\n}\n\n.pokemon--wars--app--container .selection--container img.pikachu:hover {\n border-radius: 10px;\n background-color: #f8c953c8;\n -webkit-transition: all 0.5s;\n transition: all 0.5s;\n}\n\n.pokemon--wars--app--container .selection--container img.bulbasaur.selected-pokemon {\n border-radius: 10px;\n background-color: #6ddba8c8;\n}\n\n.pokemon--wars--app--container .selection--container img.bulbasaur:hover {\n border-radius: 10px;\n background-color: #6ddba8c8;\n}\n\n.pokemon--wars--app--container .selection--container img.charmander.selected-pokemon {\n border-radius: 10px;\n background-color: #f7973fc8;\n}\n\n.pokemon--wars--app--container .selection--container img.charmander:hover {\n border-radius: 10px;\n background-color: #f7973fc8;\n}\n\n.pokemon--wars--app--container .selection--container img.squirtle.selected-pokemon {\n border-radius: 10px;\n background-color: #78eeffc8;\n}\n\n.pokemon--wars--app--container .selection--container img.squirtle:hover {\n border-radius: 10px;\n background-color: #78eeffc8;\n}\n\n.pokemon--wars--app--container .fight--area {\n width: 750px;\n}\n\n.pokemon--wars--app--container .health--container {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: end;\n -ms-flex-align: end;\n align-items: flex-end;\n}\n\n.pokemon--wars--app--container .name--health--bar {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.pokemon--wars--app--container .name--health--bar img {\n width: 70px;\n border-radius: 5px;\n}\n\n.pokemon--wars--app--container .name--health--bar img.pikachu {\n background-color: #f8c953c8;\n border: 2px solid #f8c953;\n}\n\n.pokemon--wars--app--container .name--health--bar img.bulbasaur {\n background-color: #6ddba8c8;\n border: 2px solid #6ddba8;\n}\n\n.pokemon--wars--app--container .name--health--bar img.charmander {\n background-color: #f7973fc8;\n border: 2px solid #f7973f;\n}\n\n.pokemon--wars--app--container .name--health--bar img.squirtle {\n background-color: #78eeffc8;\n border: 2px solid #78eeff;\n}\n\n.pokemon--wars--app--container .player--name {\n font-size: 18px;\n font-weight: bold;\n color: #324354;\n}\n\n.pokemon--wars--app--container .vs--container {\n font-size: 35px;\n color: #f7983f;\n font-weight: bold;\n font-style: italic;\n}\n\n.pokemon--wars--app--container progress {\n height: 50px;\n width: 280px;\n}\n\n.pokemon--wars--app--container progress[value] {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n width: 250px;\n height: 35px;\n}\n\n.pokemon--wars--app--container progress.pikachu[value]::-webkit-progress-bar {\n background-color: #f7983f27;\n border: 2px solid #f7983f;\n}\n\n.pokemon--wars--app--container progress.pikachu[value]::-webkit-progress-value {\n background-color: #f7973fc8;\n}\n\n.pokemon--wars--app--container progress.bulbasaur[value]::-webkit-progress-bar {\n background-color: #6ddba827;\n border: 2px solid #6ddba8;\n}\n\n.pokemon--wars--app--container progress.bulbasaur[value]::-webkit-progress-value {\n background-color: #6ddba8c8;\n}\n\n.pokemon--wars--app--container progress.charmander[value]::-webkit-progress-bar {\n background-color: #f7973f27;\n border: 2px solid #f7973f;\n}\n\n.pokemon--wars--app--container progress.charmander[value]::-webkit-progress-value {\n background-color: #f7973fc8;\n}\n\n.pokemon--wars--app--container progress.squirtle[value]::-webkit-progress-bar {\n background-color: #78eeff27;\n border: 2px solid #78eeff;\n}\n\n.pokemon--wars--app--container progress.squirtle[value]::-webkit-progress-value {\n background-color: #78eeffc8;\n}\n\n.pokemon--wars--app--container .attack--button--container {\n margin-top: 50px;\n}\n\n.pokemon--wars--app--container .logger--container {\n width: 400px;\n margin: 0 auto;\n margin-top: 50px;\n}\n\n.pokemon--wars--app--container .logger--container img {\n width: 40px;\n}\n\n.pokemon--wars--app--container .logger--container li {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n border-radius: 5px;\n}\n\n.pokemon--wars--app--container .game--finished--container {\n margin-top: 100px;\n font-size: 50px;\n}\n\n.css--class--app .css--palette {\n list-style-type: none;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.css--class--app .css--palette li {\n width: 50px;\n height: 50px;\n background-color: #ccc;\n border-radius: 50%;\n margin-left: 5px;\n border: 1px solid #bbb;\n}\n\n.css--class--app .result-box {\n width: 100%;\n height: 100px;\n background-color: #18bf71;\n margin-top: 15px;\n border-radius: 5px;\n border-bottom: 1px solid #ccc;\n -webkit-transition: background-color 0.5s;\n transition: background-color 0.5s;\n}\n\n.bookmark--app--container {\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[3];\n grid-template-columns: repeat(3, 1fr);\n grid-gap: 10px;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.bookmark--app--container .bookmark-item {\n width: 400px;\n background-color: #efefef;\n border-bottom: 1px solid #ccc;\n border-radius: 5px;\n padding: 10px;\n}\n\n.bookmark--app--container .bookmark-item .header {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.course--planner-app--container .user--action--container {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.course--planner-app--container .user--action--container .form-group {\n width: 80%;\n margin-right: 5px;\n}\n\n.bet--coupon--app .competition-list {\n padding: 0;\n border-radius: 5px;\n border: 1px solid #efefef;\n border-bottom: 1px solid #ccc;\n}\n\n.bet--coupon--app .my-coupon {\n padding: 0;\n border-radius: 5px;\n border: 1px solid #efefef;\n border-bottom: 1px solid #ccc;\n min-width: 400px !important;\n}\n\n.bet--coupon--app .my-coupon .card--header {\n background-color: #05a0f4 !important;\n}\n\n.bet--coupon--app .card--header {\n background-color: #324354 !important;\n color: #fff;\n border-top-left-radius: 5px;\n border-top-right-radius: 5px;\n padding: 10px;\n}\n\n.bet--coupon--app .card--body {\n background-color: #fff !important;\n padding: 10px;\n}\n\n.bet--coupon--app .competition-item {\n margin-bottom: 5px;\n padding: 10px 0;\n border-bottom: 1px solid #efefef;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.bet--coupon--app .competition-item:last-child {\n border-bottom: none;\n}\n\n.bet--coupon--app .competition-item .info--container {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: start;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n}\n\n.bet--coupon--app .competition-item .rates {\n width: 150px;\n text-align: right;\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[3];\n grid-template-columns: repeat(3, 1fr);\n}\n\n.bet--coupon--app .coupon-item {\n border-bottom: 1px solid #efefef;\n margin-bottom: 5px;\n padding: 10px 0;\n}\n\n.bet--coupon--app .coupon-item:last-child {\n border-bottom: none;\n}\n\n.bet--coupon--app .coupon--total--container {\n max-width: 300px;\n}\n\n.bet--coupon--app .coupon--total--container .my-coupon {\n min-width: 300px !important;\n}\n\n.bet--coupon--app .coupon--total--container .multiply--container {\n min-width: 300px !important;\n}\n\n.bet--coupon--app .coupon--total--container .multiply--container button:not(:last-child) {\n margin-right: 5px;\n margin-bottom: 5px;\n}\n\n.bet--coupon--app .multiply--buttons {\n -ms-flex-wrap: wrap;\n flex-wrap: wrap;\n}\n\n.contact--card--app {\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[4];\n grid-template-columns: repeat(4, 1fr);\n grid-gap: 20px;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.contact--card--app .contact-item {\n width: 180px;\n min-height: 282px;\n border-radius: 5px;\n background-color: #fff !important;\n}\n\n.contact--card--app .contact-item .invitation--header {\n width: 180px;\n height: 62px;\n background: url(\"https://static-exp1.licdn.com/sc/h/cpemy7gsm8bzfb5nnbbnswfdm\");\n background-size: cover;\n background-repeat: no-repeat;\n background-position: center;\n}\n\n.contact--card--app .contact-item .contact--info--container {\n padding: 10px;\n margin-top: 45px;\n}\n\n.contact--card--app .contact-item .contact--info--container p {\n font-size: 15px !important;\n}\n\n.contact--card--app .contact-item .contact--info--container a {\n font-size: 15px !important;\n}\n\n.contact--card--app .contact-item .action--button--container {\n margin-top: 10px;\n}\n\n.contact--card--app .contact-item .contact--image {\n border-radius: 50%;\n width: 100px;\n height: 100px;\n}\n\n.comment--like--dislike--app {\n width: 750px;\n}\n\n.chat--app--container .card {\n padding: 0;\n border-radius: 5px;\n border: 1px solid #efefef;\n border-bottom: 1px solid #ccc;\n max-width: 400px !important;\n}\n\n.chat--app--container .card .card--header {\n background-color: #316bc2 !important;\n color: #fff;\n border-top-left-radius: 5px;\n border-top-right-radius: 5px;\n padding: 10px;\n}\n\n.chat--app--container .card .card--body {\n background-color: #fff !important;\n padding: 10px;\n}\n\n.chat--app--container .card .card--body .active-user-item {\n margin-bottom: 20px;\n}\n\n.chat--app--container .card .card--body .active-user-item:last-child {\n margin-bottom: 0;\n}\n\n.chat--app--container .card .card--body .active-user-item .badge {\n background-color: #efefef;\n color: #333;\n text-transform: uppercase;\n padding: 10px;\n width: 40px;\n height: 40px;\n border-radius: 50%;\n}\n\n.chat--app--container .card .messages {\n list-style-type: none;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: flex-start;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n padding: 10px;\n height: calc(100vh - 200px);\n overflow-y: scroll;\n}\n\n.chat--app--container .card .messages li {\n max-width: 300px;\n padding: 5px 10px;\n margin-bottom: 15px;\n border-bottom: 1px solid #ccc;\n border-radius: 10px;\n background-color: #fffafa;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.chat--app--container .card .messages li small {\n margin-top: 10px;\n -ms-flex-item-align: end;\n align-self: flex-end;\n font-size: 12px;\n color: #ccc;\n font-style: italic;\n}\n\n.chat--app--container .card .messages li.current-user {\n -ms-flex-item-align: end;\n align-self: flex-end;\n background-color: #05a0f4;\n color: #fff;\n}\n\n.chat--app--container .card .text-container {\n margin-top: 30px;\n}\n\n.chat--app--container .card .text-container input {\n border: none;\n padding: 10px;\n height: 37px;\n width: calc(500px - 70px);\n border-bottom-left-radius: 5px;\n}\n\n.chat--app--container .card .text-container button {\n border-radius: 0 !important;\n margin-bottom: 0;\n border: none;\n border-bottom-right-radius: 5px !important;\n}\n\n.class--list--app .class-list {\n list-style-type: none !important;\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[3];\n grid-template-columns: repeat(3, 1fr);\n}\n\n.class--list--app .class-list li {\n margin-bottom: 5px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.class--list--app textarea {\n width: 100%;\n margin-top: 20px;\n}\n\n.rate--calculator--app .rate-list {\n list-style-type: none !important;\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[6];\n grid-template-columns: repeat(6, 1fr);\n}\n\n.rate--calculator--app .rate-list li {\n margin-bottom: 5px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.rate--calculator--app input#money {\n margin-top: 15px;\n}\n\n.rate--calculator--app .rates-container {\n margin-top: 20px;\n list-style-type: none;\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[3];\n grid-template-columns: repeat(3, 1fr);\n}\n\n.rate--calculator--app .rates-container li {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n margin-bottom: 5px;\n}\n\n.rate--calculator--app .rates-container li:last-child {\n margin-bottom: 0;\n}\n\n.rate--calculator--app .rates-container li strong {\n margin-right: 5px;\n}\n/*# sourceMappingURL=style.css.map */" }, { "path": "ders-1-tekrar-dersi/odevler/css-class-app/app.js", "content": "Vue.createApp({\n data() {\n return {\n activeColor: \"\",\n color_palette: [\n {\n id: \"red\",\n css_class: \"red-box\",\n },\n {\n id: \"green\",\n css_class: \"green-box\",\n },\n {\n id: \"blue\",\n css_class: \"blue-box\",\n },\n ],\n };\n },\n}).mount(\"#app\");\n" }, { "path": "ders-1-tekrar-dersi/odevler/css-class-app/index.html", "content": "\n\n \n \n \n \n CSS Class App\n \n \n\n \n \n \n
      CSS Class App
      \n
      \n
      \n
        \n
      • \n
      \n
      \n
      \n
      \n\n \n \n\n" }, { "path": "ders-1-tekrar-dersi/odevler/css-class-app/readme.txt", "content": "ÖDEV:\nYukarı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.\nWhen 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.\n\nİPUCU:\ndata 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.\n
    • elementine click eventi yardımıyla .result-box isimli elementin alacağı rengi class binding ile yapabilirsiniz.\n\"red-box\", \"green-box\", \"blue-box\" isimli css class'larını tanımlamanız gerekmektedir.\n\niterate the li elements in the .css - palette element with v-for over a property of type Array named color_palette in the data.\nWith the help of the click event on the
    • element, you can make the color of the element named .result-box with the class binding.\nYou should define css classes named \"red-box\", \"green-box\", \"blue-box\"\n\nSample Data:\ncolor_palette = [\n {\n id: \"red\",\n css_class: \"red-box\",\n },\n {\n id: \"green\",\n css_class: \"green-box\",\n },\n {\n id: \"blue\",\n css_class: \"blue-box\",\n }\n];" }, { "path": "ders-1-tekrar-dersi/odevler/css-class-app/style.css", "content": "* {\n margin: 0;\n padding: 0;\n font-family: Arial, Helvetica, sans-serif;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n\n.bg-success {\n background-color: #6dc454 !important;\n color: #fff;\n}\n\n.bg-danger {\n background-color: #c64b4b !important;\n color: #fff;\n}\n\n.bg-primary {\n background-color: #316bc2 !important;\n color: #fff;\n}\n\n.bg-dark {\n background-color: #333 !important;\n color: #fff;\n}\n\n.text-left {\n text-align: left;\n}\n\n.text-right {\n text-align: right;\n}\n\n.text-center {\n text-align: center;\n}\n\n.text-info {\n color: #05a0f4;\n}\n\n.text-success {\n color: #6dc454;\n}\n\n.text-danger {\n color: #c64b4b;\n}\n\n.text-primary {\n color: #316bc2;\n}\n\n.text-dark {\n color: #333;\n}\n\n.text-muted {\n color: #ccc;\n}\n\n.font-weight-bold {\n font-weight: bold;\n}\n\n.font-italic {\n font-style: italic;\n}\n\n.mt-20 {\n margin-top: 20px;\n}\n\n.mb-20 {\n margin-bottom: 20px;\n}\n\n.ml-20 {\n margin-left: 20px;\n}\n\n.mr-20 {\n margin-right: 20px;\n}\n\n.mt-10 {\n margin-top: 10px;\n}\n\n.mb-10 {\n margin-bottom: 10px;\n}\n\n.ml-10 {\n margin-left: 10px;\n}\n\n.mr-10 {\n margin-right: 10px;\n}\n\n.mt-5 {\n margin-top: 5px;\n}\n\n.mb-5 {\n margin-bottom: 5px;\n}\n\n.ml-5 {\n margin-left: 5px;\n}\n\n.mr-5 {\n margin-right: 5px;\n}\n\n.pt-10 {\n padding-top: 10px;\n}\n\n.pb-10 {\n padding-bottom: 10px;\n}\n\n.pl-10 {\n padding-left: 10px;\n}\n\n.pr-10 {\n padding-right: 10px;\n}\n\n.pt-5 {\n padding-top: 5px;\n}\n\n.pb-5 {\n padding-bottom: 5px;\n}\n\n.pl-5 {\n padding-left: 5px;\n}\n\n.pr-5 {\n padding-right: 5px;\n}\n\n.pt-20 {\n padding-top: 20px;\n}\n\n.pb-20 {\n padding-bottom: 20px;\n}\n\n.pl-20 {\n padding-left: 20px;\n}\n\n.pr-20 {\n padding-right: 20px;\n}\n\n.d-flex {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n}\n\n.justify-content-start {\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: flex-start;\n}\n\n.justify-content-center {\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n}\n\n.justify-content-end {\n -webkit-box-pack: end;\n -ms-flex-pack: end;\n justify-content: flex-end;\n}\n\n.justify-content-between {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n}\n\n.align-items-start {\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n}\n\n.align-items-center {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.align-items-end {\n -webkit-box-align: end;\n -ms-flex-align: end;\n align-items: flex-end;\n}\n\n.w-10 {\n width: 10% !important;\n max-width: 10% !important;\n min-width: 10% !important;\n}\n\n.w-20 {\n width: 20% !important;\n max-width: 20% !important;\n min-width: 20% !important;\n}\n\n.w-30 {\n width: 30% !important;\n max-width: 30% !important;\n min-width: 30% !important;\n}\n\n.w-40 {\n width: 40% !important;\n max-width: 40% !important;\n min-width: 40% !important;\n}\n\n.w-50 {\n width: 50% !important;\n max-width: 50% !important;\n min-width: 50% !important;\n}\n\n.w-60 {\n width: 60% !important;\n max-width: 60% !important;\n min-width: 60% !important;\n}\n\n.w-70 {\n width: 70% !important;\n max-width: 70% !important;\n min-width: 70% !important;\n}\n\n.w-80 {\n width: 80% !important;\n max-width: 80% !important;\n min-width: 80% !important;\n}\n\n.w-90 {\n width: 90% !important;\n max-width: 90% !important;\n min-width: 90% !important;\n}\n\n.w-100 {\n width: 100% !important;\n max-width: 100% !important;\n min-width: 100% !important;\n}\n\n.card {\n background-color: #efefef;\n min-width: 500px;\n padding: 10px;\n border-radius: 3px;\n border-bottom: 1px solid #ccc;\n}\n\n.card-light {\n background-color: #fffafa;\n border: 1px solid #eee;\n border-bottom: 1px solid #ccc;\n}\n\nbutton {\n padding: 10px;\n font-size: 15px;\n outline: none;\n border: none;\n border-radius: 5px;\n border-bottom: 1px solid #ccc;\n background-color: #dad0d0;\n cursor: pointer;\n}\n\nbutton:hover {\n background-color: #f0eded;\n}\n\nbutton:active {\n background-color: white;\n}\n\nbutton.btn-primary {\n background-color: #316bc2;\n color: #fff;\n}\n\nbutton.btn-primary:hover {\n background-color: #5386d3;\n color: #fff;\n}\n\nbutton.btn-primary:active {\n background-color: #7ba3de;\n color: #fff;\n}\n\nbutton.btn-warning {\n background-color: #f5e20c;\n color: #000;\n}\n\nbutton.btn-warning:hover {\n background-color: #f9ee6e;\n color: #000;\n}\n\nbutton.btn-warning:active {\n background-color: #fbf49f;\n color: #000;\n}\n\nbutton.btn-info {\n background-color: #05a0f4;\n color: #fff;\n}\n\nbutton.btn-info:hover {\n background-color: #31b4fb;\n color: #fff;\n}\n\nbutton.btn-info:active {\n background-color: #63c6fc;\n color: #fff;\n}\n\nbutton.btn-success {\n background-color: #6dc454;\n color: #fff;\n}\n\nbutton.btn-success:hover {\n background-color: #8dd17a;\n color: #fff;\n}\n\nbutton.btn-success:active {\n background-color: #aedea0;\n color: #fff;\n}\n\nbutton.btn-danger {\n background-color: #c64b4b;\n color: #fff;\n}\n\nbutton.btn-danger:hover {\n background-color: #d27272;\n color: #fff;\n}\n\nbutton.btn-danger:active {\n background-color: #df9898;\n color: #fff;\n}\n\n.btn-sm {\n padding: 7px;\n font-size: 12px;\n}\n\n.form-group {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n margin-bottom: 10px;\n}\n\np {\n font-size: 14px;\n}\n\nlabel {\n font-size: 15px;\n display: inline-block;\n margin-bottom: 5px;\n}\n\nselect {\n outline: none;\n padding: 5px 10px;\n border: 1px solid #324354;\n}\n\ninput {\n outline: none;\n padding: 5px 10px;\n border: 1px solid #324354;\n}\n\ntextarea {\n outline: none;\n resize: none;\n padding: 5px 10px;\n border: 1px solid #324354;\n}\n\nheader {\n height: 50px;\n margin-bottom: 10px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n background-color: #324354;\n color: #fff;\n font-size: 20px;\n border-bottom: 2px solid #222b34;\n}\n\n.container {\n width: 100%;\n height: auto;\n padding: 10px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: start;\n}\n\nul.list {\n margin-top: 10px;\n list-style-type: none;\n}\n\nul.list li {\n padding: 5px 10px;\n background-color: #efefef;\n margin-bottom: 5px;\n border: 1px solid #ccc;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.pokemon--wars--app--container .game--area {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n width: 100%;\n padding: 10px;\n}\n\n.pokemon--wars--app--container .game--area h2 {\n margin-bottom: 20px;\n}\n\n.pokemon--wars--app--container .selection--container {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n width: 100%;\n padding: 10px;\n margin-bottom: 20px;\n}\n\n.pokemon--wars--app--container .selection--container img {\n -webkit-transition: all 0.5s;\n transition: all 0.5s;\n margin-right: 30px;\n}\n\n.pokemon--wars--app--container .selection--container img:last-child {\n margin-right: none;\n}\n\n.pokemon--wars--app--container .selection--container img.pikachu.selected-pokemon {\n border-radius: 10px;\n background-color: #f8c953c8;\n -webkit-transition: all 0.5s;\n transition: all 0.5s;\n}\n\n.pokemon--wars--app--container .selection--container img.pikachu:hover {\n border-radius: 10px;\n background-color: #f8c953c8;\n -webkit-transition: all 0.5s;\n transition: all 0.5s;\n}\n\n.pokemon--wars--app--container .selection--container img.bulbasaur.selected-pokemon {\n border-radius: 10px;\n background-color: #6ddba8c8;\n}\n\n.pokemon--wars--app--container .selection--container img.bulbasaur:hover {\n border-radius: 10px;\n background-color: #6ddba8c8;\n}\n\n.pokemon--wars--app--container .selection--container img.charmander.selected-pokemon {\n border-radius: 10px;\n background-color: #f7973fc8;\n}\n\n.pokemon--wars--app--container .selection--container img.charmander:hover {\n border-radius: 10px;\n background-color: #f7973fc8;\n}\n\n.pokemon--wars--app--container .selection--container img.squirtle.selected-pokemon {\n border-radius: 10px;\n background-color: #78eeffc8;\n}\n\n.pokemon--wars--app--container .selection--container img.squirtle:hover {\n border-radius: 10px;\n background-color: #78eeffc8;\n}\n\n.pokemon--wars--app--container .fight--area {\n width: 750px;\n}\n\n.pokemon--wars--app--container .health--container {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: end;\n -ms-flex-align: end;\n align-items: flex-end;\n}\n\n.pokemon--wars--app--container .name--health--bar {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.pokemon--wars--app--container .name--health--bar img {\n width: 70px;\n border-radius: 5px;\n}\n\n.pokemon--wars--app--container .name--health--bar img.pikachu {\n background-color: #f8c953c8;\n border: 2px solid #f8c953;\n}\n\n.pokemon--wars--app--container .name--health--bar img.bulbasaur {\n background-color: #6ddba8c8;\n border: 2px solid #6ddba8;\n}\n\n.pokemon--wars--app--container .name--health--bar img.charmander {\n background-color: #f7973fc8;\n border: 2px solid #f7973f;\n}\n\n.pokemon--wars--app--container .name--health--bar img.squirtle {\n background-color: #78eeffc8;\n border: 2px solid #78eeff;\n}\n\n.pokemon--wars--app--container .player--name {\n font-size: 18px;\n font-weight: bold;\n color: #324354;\n}\n\n.pokemon--wars--app--container .vs--container {\n font-size: 35px;\n color: #f7983f;\n font-weight: bold;\n font-style: italic;\n}\n\n.pokemon--wars--app--container progress {\n height: 50px;\n width: 280px;\n}\n\n.pokemon--wars--app--container progress[value] {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n width: 250px;\n height: 35px;\n}\n\n.pokemon--wars--app--container progress.pikachu[value]::-webkit-progress-bar {\n background-color: #f7983f27;\n border: 2px solid #f7983f;\n}\n\n.pokemon--wars--app--container progress.pikachu[value]::-webkit-progress-value {\n background-color: #f7973fc8;\n}\n\n.pokemon--wars--app--container progress.bulbasaur[value]::-webkit-progress-bar {\n background-color: #6ddba827;\n border: 2px solid #6ddba8;\n}\n\n.pokemon--wars--app--container progress.bulbasaur[value]::-webkit-progress-value {\n background-color: #6ddba8c8;\n}\n\n.pokemon--wars--app--container progress.charmander[value]::-webkit-progress-bar {\n background-color: #f7973f27;\n border: 2px solid #f7973f;\n}\n\n.pokemon--wars--app--container progress.charmander[value]::-webkit-progress-value {\n background-color: #f7973fc8;\n}\n\n.pokemon--wars--app--container progress.squirtle[value]::-webkit-progress-bar {\n background-color: #78eeff27;\n border: 2px solid #78eeff;\n}\n\n.pokemon--wars--app--container progress.squirtle[value]::-webkit-progress-value {\n background-color: #78eeffc8;\n}\n\n.pokemon--wars--app--container .attack--button--container {\n margin-top: 50px;\n}\n\n.pokemon--wars--app--container .logger--container {\n width: 400px;\n margin: 0 auto;\n margin-top: 50px;\n}\n\n.pokemon--wars--app--container .logger--container img {\n width: 40px;\n}\n\n.pokemon--wars--app--container .logger--container li {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n border-radius: 5px;\n}\n\n.pokemon--wars--app--container .game--finished--container {\n margin-top: 100px;\n font-size: 50px;\n}\n\n.css--class--app .css--palette {\n list-style-type: none;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.css--class--app .css--palette li {\n width: 50px;\n height: 50px;\n background-color: #ccc;\n border-radius: 50%;\n margin-left: 5px;\n border: 1px solid #bbb;\n}\n\n.css--class--app .result-box {\n width: 100%;\n height: 100px;\n background-color: #18bf71;\n margin-top: 15px;\n border-radius: 5px;\n border-bottom: 1px solid #ccc;\n -webkit-transition: background-color 0.5s;\n transition: background-color 0.5s;\n}\n\n.bookmark--app--container {\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[3];\n grid-template-columns: repeat(3, 1fr);\n grid-gap: 10px;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.bookmark--app--container .bookmark-item {\n width: 400px;\n background-color: #efefef;\n border-bottom: 1px solid #ccc;\n border-radius: 5px;\n padding: 10px;\n}\n\n.bookmark--app--container .bookmark-item .header {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.course--planner-app--container .user--action--container {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.course--planner-app--container .user--action--container .form-group {\n width: 80%;\n margin-right: 5px;\n}\n\n.bet--coupon--app .competition-list {\n padding: 0;\n border-radius: 5px;\n border: 1px solid #efefef;\n border-bottom: 1px solid #ccc;\n}\n\n.bet--coupon--app .my-coupon {\n padding: 0;\n border-radius: 5px;\n border: 1px solid #efefef;\n border-bottom: 1px solid #ccc;\n min-width: 400px !important;\n}\n\n.bet--coupon--app .my-coupon .card--header {\n background-color: #05a0f4 !important;\n}\n\n.bet--coupon--app .card--header {\n background-color: #324354 !important;\n color: #fff;\n border-top-left-radius: 5px;\n border-top-right-radius: 5px;\n padding: 10px;\n}\n\n.bet--coupon--app .card--body {\n background-color: #fff !important;\n padding: 10px;\n}\n\n.bet--coupon--app .competition-item {\n margin-bottom: 5px;\n padding: 10px 0;\n border-bottom: 1px solid #efefef;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.bet--coupon--app .competition-item:last-child {\n border-bottom: none;\n}\n\n.bet--coupon--app .competition-item .info--container {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: start;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n}\n\n.bet--coupon--app .competition-item .rates {\n width: 150px;\n text-align: right;\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[3];\n grid-template-columns: repeat(3, 1fr);\n}\n\n.bet--coupon--app .coupon-item {\n border-bottom: 1px solid #efefef;\n margin-bottom: 5px;\n padding: 10px 0;\n}\n\n.bet--coupon--app .coupon-item:last-child {\n border-bottom: none;\n}\n\n.bet--coupon--app .coupon--total--container {\n max-width: 300px;\n}\n\n.bet--coupon--app .coupon--total--container .my-coupon {\n min-width: 300px !important;\n}\n\n.bet--coupon--app .coupon--total--container .multiply--container {\n min-width: 300px !important;\n}\n\n.bet--coupon--app .coupon--total--container .multiply--container button:not(:last-child) {\n margin-right: 5px;\n margin-bottom: 5px;\n}\n\n.bet--coupon--app .multiply--buttons {\n -ms-flex-wrap: wrap;\n flex-wrap: wrap;\n}\n\n.contact--card--app {\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[4];\n grid-template-columns: repeat(4, 1fr);\n grid-gap: 20px;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.contact--card--app .contact-item {\n width: 180px;\n min-height: 282px;\n border-radius: 5px;\n background-color: #fff !important;\n}\n\n.contact--card--app .contact-item .invitation--header {\n width: 180px;\n height: 62px;\n background: url(\"https://static-exp1.licdn.com/sc/h/cpemy7gsm8bzfb5nnbbnswfdm\");\n background-size: cover;\n background-repeat: no-repeat;\n background-position: center;\n}\n\n.contact--card--app .contact-item .contact--info--container {\n padding: 10px;\n margin-top: 45px;\n}\n\n.contact--card--app .contact-item .contact--info--container p {\n font-size: 15px !important;\n}\n\n.contact--card--app .contact-item .contact--info--container a {\n font-size: 15px !important;\n}\n\n.contact--card--app .contact-item .action--button--container {\n margin-top: 10px;\n}\n\n.contact--card--app .contact-item .contact--image {\n border-radius: 50%;\n width: 100px;\n height: 100px;\n}\n\n.comment--like--dislike--app {\n width: 750px;\n}\n\n.chat--app--container .card {\n padding: 0;\n border-radius: 5px;\n border: 1px solid #efefef;\n border-bottom: 1px solid #ccc;\n max-width: 400px !important;\n}\n\n.chat--app--container .card .card--header {\n background-color: #316bc2 !important;\n color: #fff;\n border-top-left-radius: 5px;\n border-top-right-radius: 5px;\n padding: 10px;\n}\n\n.chat--app--container .card .card--body {\n background-color: #fff !important;\n padding: 10px;\n}\n\n.chat--app--container .card .card--body .active-user-item {\n margin-bottom: 20px;\n}\n\n.chat--app--container .card .card--body .active-user-item:last-child {\n margin-bottom: 0;\n}\n\n.chat--app--container .card .card--body .active-user-item .badge {\n background-color: #efefef;\n color: #333;\n text-transform: uppercase;\n padding: 10px;\n width: 40px;\n height: 40px;\n border-radius: 50%;\n}\n\n.chat--app--container .card .messages {\n list-style-type: none;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: flex-start;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n padding: 10px;\n height: calc(100vh - 200px);\n overflow-y: scroll;\n}\n\n.chat--app--container .card .messages li {\n max-width: 300px;\n padding: 5px 10px;\n margin-bottom: 15px;\n border-bottom: 1px solid #ccc;\n border-radius: 10px;\n background-color: #fffafa;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.chat--app--container .card .messages li small {\n margin-top: 10px;\n -ms-flex-item-align: end;\n align-self: flex-end;\n font-size: 12px;\n color: #ccc;\n font-style: italic;\n}\n\n.chat--app--container .card .messages li.current-user {\n -ms-flex-item-align: end;\n align-self: flex-end;\n background-color: #05a0f4;\n color: #fff;\n}\n\n.chat--app--container .card .text-container {\n margin-top: 30px;\n}\n\n.chat--app--container .card .text-container input {\n border: none;\n padding: 10px;\n height: 37px;\n width: calc(500px - 70px);\n border-bottom-left-radius: 5px;\n}\n\n.chat--app--container .card .text-container button {\n border-radius: 0 !important;\n margin-bottom: 0;\n border: none;\n border-bottom-right-radius: 5px !important;\n}\n\n.class--list--app .class-list {\n list-style-type: none !important;\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[3];\n grid-template-columns: repeat(3, 1fr);\n}\n\n.class--list--app .class-list li {\n margin-bottom: 5px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.class--list--app textarea {\n width: 100%;\n margin-top: 20px;\n}\n\n.rate--calculator--app .rate-list {\n list-style-type: none !important;\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[6];\n grid-template-columns: repeat(6, 1fr);\n}\n\n.rate--calculator--app .rate-list li {\n margin-bottom: 5px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.rate--calculator--app input#money {\n margin-top: 15px;\n}\n\n.rate--calculator--app .rates-container {\n margin-top: 20px;\n list-style-type: none;\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[3];\n grid-template-columns: repeat(3, 1fr);\n}\n\n.rate--calculator--app .rates-container li {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n margin-bottom: 5px;\n}\n\n.rate--calculator--app .rates-container li:last-child {\n margin-bottom: 0;\n}\n\n.rate--calculator--app .rates-container li strong {\n margin-right: 5px;\n}\n/*# sourceMappingURL=style.css.map */" }, { "path": "ders-1-tekrar-dersi/odevler/odev-1/app.js", "content": "const app = Vue.createApp({\n data() {\n return {\n name: \"kablosuzkedi\",\n age: 33,\n imageUrl:\n \"http://kablosuzkedi.com/wp-content/uploads/2016/11/Ekran-Resmi-2016-11-12-01.39.36.png\",\n };\n },\n methods: {\n getRandom() {\n return Math.round(Math.random());\n },\n },\n}).mount(\"#exercise\");\n" }, { "path": "ders-1-tekrar-dersi/odevler/odev-1/index.html", "content": "\n\n \n \n \n \n Ödev 1 | Template üzerine Veri Yazdırmak\n \n \n \n \n
      Ödev 1 | Template Üzerine Veri Yazdırmak
      \n\n
      \n
      \n \n

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

      \n \n

      {{ age * 5 }}

      \n\n \n

      {{ getRandom() }}

      \n\n \n \"\"\n\n \n
      \n \n
      \n
      \n
      \n\n \n \n\n" }, { "path": "ders-1-tekrar-dersi/odevler/odev-1/style.css", "content": "* {\n margin: 0;\n padding: 0;\n font-family: Arial, Helvetica, sans-serif;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n\n.bg-success {\n background-color: #6dc454 !important;\n color: #fff;\n}\n\n.bg-danger {\n background-color: #c64b4b !important;\n color: #fff;\n}\n\n.bg-primary {\n background-color: #316bc2 !important;\n color: #fff;\n}\n\n.bg-dark {\n background-color: #333 !important;\n color: #fff;\n}\n\n.text-left {\n text-align: left;\n}\n\n.text-right {\n text-align: right;\n}\n\n.text-center {\n text-align: center;\n}\n\n.text-info {\n color: #05a0f4;\n}\n\n.text-success {\n color: #6dc454;\n}\n\n.text-danger {\n color: #c64b4b;\n}\n\n.text-primary {\n color: #316bc2;\n}\n\n.text-dark {\n color: #333;\n}\n\n.text-muted {\n color: #ccc;\n}\n\n.font-weight-bold {\n font-weight: bold;\n}\n\n.font-italic {\n font-style: italic;\n}\n\n.mt-20 {\n margin-top: 20px;\n}\n\n.mb-20 {\n margin-bottom: 20px;\n}\n\n.ml-20 {\n margin-left: 20px;\n}\n\n.mr-20 {\n margin-right: 20px;\n}\n\n.mt-10 {\n margin-top: 10px;\n}\n\n.mb-10 {\n margin-bottom: 10px;\n}\n\n.ml-10 {\n margin-left: 10px;\n}\n\n.mr-10 {\n margin-right: 10px;\n}\n\n.mt-5 {\n margin-top: 5px;\n}\n\n.mb-5 {\n margin-bottom: 5px;\n}\n\n.ml-5 {\n margin-left: 5px;\n}\n\n.mr-5 {\n margin-right: 5px;\n}\n\n.pt-10 {\n padding-top: 10px;\n}\n\n.pb-10 {\n padding-bottom: 10px;\n}\n\n.pl-10 {\n padding-left: 10px;\n}\n\n.pr-10 {\n padding-right: 10px;\n}\n\n.pt-5 {\n padding-top: 5px;\n}\n\n.pb-5 {\n padding-bottom: 5px;\n}\n\n.pl-5 {\n padding-left: 5px;\n}\n\n.pr-5 {\n padding-right: 5px;\n}\n\n.pt-20 {\n padding-top: 20px;\n}\n\n.pb-20 {\n padding-bottom: 20px;\n}\n\n.pl-20 {\n padding-left: 20px;\n}\n\n.pr-20 {\n padding-right: 20px;\n}\n\n.d-flex {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n}\n\n.justify-content-start {\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: flex-start;\n}\n\n.justify-content-center {\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n}\n\n.justify-content-end {\n -webkit-box-pack: end;\n -ms-flex-pack: end;\n justify-content: flex-end;\n}\n\n.justify-content-between {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n}\n\n.align-items-start {\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n}\n\n.align-items-center {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.align-items-end {\n -webkit-box-align: end;\n -ms-flex-align: end;\n align-items: flex-end;\n}\n\n.w-10 {\n width: 10% !important;\n max-width: 10% !important;\n min-width: 10% !important;\n}\n\n.w-20 {\n width: 20% !important;\n max-width: 20% !important;\n min-width: 20% !important;\n}\n\n.w-30 {\n width: 30% !important;\n max-width: 30% !important;\n min-width: 30% !important;\n}\n\n.w-40 {\n width: 40% !important;\n max-width: 40% !important;\n min-width: 40% !important;\n}\n\n.w-50 {\n width: 50% !important;\n max-width: 50% !important;\n min-width: 50% !important;\n}\n\n.w-60 {\n width: 60% !important;\n max-width: 60% !important;\n min-width: 60% !important;\n}\n\n.w-70 {\n width: 70% !important;\n max-width: 70% !important;\n min-width: 70% !important;\n}\n\n.w-80 {\n width: 80% !important;\n max-width: 80% !important;\n min-width: 80% !important;\n}\n\n.w-90 {\n width: 90% !important;\n max-width: 90% !important;\n min-width: 90% !important;\n}\n\n.w-100 {\n width: 100% !important;\n max-width: 100% !important;\n min-width: 100% !important;\n}\n\n.card {\n background-color: #efefef;\n min-width: 500px;\n padding: 10px;\n border-radius: 3px;\n border-bottom: 1px solid #ccc;\n}\n\n.card-light {\n background-color: #fffafa;\n border: 1px solid #eee;\n border-bottom: 1px solid #ccc;\n}\n\nbutton {\n padding: 10px;\n font-size: 15px;\n outline: none;\n border: none;\n border-radius: 5px;\n border-bottom: 1px solid #ccc;\n background-color: #dad0d0;\n cursor: pointer;\n}\n\nbutton:hover {\n background-color: #f0eded;\n}\n\nbutton:active {\n background-color: white;\n}\n\nbutton.btn-primary {\n background-color: #316bc2;\n color: #fff;\n}\n\nbutton.btn-primary:hover {\n background-color: #5386d3;\n color: #fff;\n}\n\nbutton.btn-primary:active {\n background-color: #7ba3de;\n color: #fff;\n}\n\nbutton.btn-warning {\n background-color: #f5e20c;\n color: #000;\n}\n\nbutton.btn-warning:hover {\n background-color: #f9ee6e;\n color: #000;\n}\n\nbutton.btn-warning:active {\n background-color: #fbf49f;\n color: #000;\n}\n\nbutton.btn-info {\n background-color: #05a0f4;\n color: #fff;\n}\n\nbutton.btn-info:hover {\n background-color: #31b4fb;\n color: #fff;\n}\n\nbutton.btn-info:active {\n background-color: #63c6fc;\n color: #fff;\n}\n\nbutton.btn-success {\n background-color: #6dc454;\n color: #fff;\n}\n\nbutton.btn-success:hover {\n background-color: #8dd17a;\n color: #fff;\n}\n\nbutton.btn-success:active {\n background-color: #aedea0;\n color: #fff;\n}\n\nbutton.btn-danger {\n background-color: #c64b4b;\n color: #fff;\n}\n\nbutton.btn-danger:hover {\n background-color: #d27272;\n color: #fff;\n}\n\nbutton.btn-danger:active {\n background-color: #df9898;\n color: #fff;\n}\n\n.btn-sm {\n padding: 7px;\n font-size: 12px;\n}\n\n.form-group {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n margin-bottom: 10px;\n}\n\np {\n font-size: 14px;\n}\n\nlabel {\n font-size: 15px;\n display: inline-block;\n margin-bottom: 5px;\n}\n\nselect {\n outline: none;\n padding: 5px 10px;\n border: 1px solid #324354;\n}\n\ninput {\n outline: none;\n padding: 5px 10px;\n border: 1px solid #324354;\n}\n\ntextarea {\n outline: none;\n resize: none;\n padding: 5px 10px;\n border: 1px solid #324354;\n}\n\nheader {\n height: 50px;\n margin-bottom: 10px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n background-color: #324354;\n color: #fff;\n font-size: 20px;\n border-bottom: 2px solid #222b34;\n}\n\n.container {\n width: 100%;\n height: auto;\n padding: 10px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: start;\n}\n\nul.list {\n margin-top: 10px;\n list-style-type: none;\n}\n\nul.list li {\n padding: 5px 10px;\n background-color: #efefef;\n margin-bottom: 5px;\n border: 1px solid #ccc;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.pokemon--wars--app--container .game--area {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n width: 100%;\n padding: 10px;\n}\n\n.pokemon--wars--app--container .game--area h2 {\n margin-bottom: 20px;\n}\n\n.pokemon--wars--app--container .selection--container {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n width: 100%;\n padding: 10px;\n margin-bottom: 20px;\n}\n\n.pokemon--wars--app--container .selection--container img {\n -webkit-transition: all 0.5s;\n transition: all 0.5s;\n margin-right: 30px;\n}\n\n.pokemon--wars--app--container .selection--container img:last-child {\n margin-right: none;\n}\n\n.pokemon--wars--app--container .selection--container img.pikachu.selected-pokemon {\n border-radius: 10px;\n background-color: #f8c953c8;\n -webkit-transition: all 0.5s;\n transition: all 0.5s;\n}\n\n.pokemon--wars--app--container .selection--container img.pikachu:hover {\n border-radius: 10px;\n background-color: #f8c953c8;\n -webkit-transition: all 0.5s;\n transition: all 0.5s;\n}\n\n.pokemon--wars--app--container .selection--container img.bulbasaur.selected-pokemon {\n border-radius: 10px;\n background-color: #6ddba8c8;\n}\n\n.pokemon--wars--app--container .selection--container img.bulbasaur:hover {\n border-radius: 10px;\n background-color: #6ddba8c8;\n}\n\n.pokemon--wars--app--container .selection--container img.charmander.selected-pokemon {\n border-radius: 10px;\n background-color: #f7973fc8;\n}\n\n.pokemon--wars--app--container .selection--container img.charmander:hover {\n border-radius: 10px;\n background-color: #f7973fc8;\n}\n\n.pokemon--wars--app--container .selection--container img.squirtle.selected-pokemon {\n border-radius: 10px;\n background-color: #78eeffc8;\n}\n\n.pokemon--wars--app--container .selection--container img.squirtle:hover {\n border-radius: 10px;\n background-color: #78eeffc8;\n}\n\n.pokemon--wars--app--container .fight--area {\n width: 750px;\n}\n\n.pokemon--wars--app--container .health--container {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: end;\n -ms-flex-align: end;\n align-items: flex-end;\n}\n\n.pokemon--wars--app--container .name--health--bar {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.pokemon--wars--app--container .name--health--bar img {\n width: 70px;\n border-radius: 5px;\n}\n\n.pokemon--wars--app--container .name--health--bar img.pikachu {\n background-color: #f8c953c8;\n border: 2px solid #f8c953;\n}\n\n.pokemon--wars--app--container .name--health--bar img.bulbasaur {\n background-color: #6ddba8c8;\n border: 2px solid #6ddba8;\n}\n\n.pokemon--wars--app--container .name--health--bar img.charmander {\n background-color: #f7973fc8;\n border: 2px solid #f7973f;\n}\n\n.pokemon--wars--app--container .name--health--bar img.squirtle {\n background-color: #78eeffc8;\n border: 2px solid #78eeff;\n}\n\n.pokemon--wars--app--container .player--name {\n font-size: 18px;\n font-weight: bold;\n color: #324354;\n}\n\n.pokemon--wars--app--container .vs--container {\n font-size: 35px;\n color: #f7983f;\n font-weight: bold;\n font-style: italic;\n}\n\n.pokemon--wars--app--container progress {\n height: 50px;\n width: 280px;\n}\n\n.pokemon--wars--app--container progress[value] {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n width: 250px;\n height: 35px;\n}\n\n.pokemon--wars--app--container progress.pikachu[value]::-webkit-progress-bar {\n background-color: #f7983f27;\n border: 2px solid #f7983f;\n}\n\n.pokemon--wars--app--container progress.pikachu[value]::-webkit-progress-value {\n background-color: #f7973fc8;\n}\n\n.pokemon--wars--app--container progress.bulbasaur[value]::-webkit-progress-bar {\n background-color: #6ddba827;\n border: 2px solid #6ddba8;\n}\n\n.pokemon--wars--app--container progress.bulbasaur[value]::-webkit-progress-value {\n background-color: #6ddba8c8;\n}\n\n.pokemon--wars--app--container progress.charmander[value]::-webkit-progress-bar {\n background-color: #f7973f27;\n border: 2px solid #f7973f;\n}\n\n.pokemon--wars--app--container progress.charmander[value]::-webkit-progress-value {\n background-color: #f7973fc8;\n}\n\n.pokemon--wars--app--container progress.squirtle[value]::-webkit-progress-bar {\n background-color: #78eeff27;\n border: 2px solid #78eeff;\n}\n\n.pokemon--wars--app--container progress.squirtle[value]::-webkit-progress-value {\n background-color: #78eeffc8;\n}\n\n.pokemon--wars--app--container .attack--button--container {\n margin-top: 50px;\n}\n\n.pokemon--wars--app--container .logger--container {\n width: 400px;\n margin: 0 auto;\n margin-top: 50px;\n}\n\n.pokemon--wars--app--container .logger--container img {\n width: 40px;\n}\n\n.pokemon--wars--app--container .logger--container li {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n border-radius: 5px;\n}\n\n.pokemon--wars--app--container .game--finished--container {\n margin-top: 100px;\n font-size: 50px;\n}\n\n.css--class--app .css--palette {\n list-style-type: none;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.css--class--app .css--palette li {\n width: 50px;\n height: 50px;\n background-color: #ccc;\n border-radius: 50%;\n margin-left: 5px;\n border: 1px solid #bbb;\n}\n\n.css--class--app .result-box {\n width: 100%;\n height: 100px;\n background-color: #18bf71;\n margin-top: 15px;\n border-radius: 5px;\n border-bottom: 1px solid #ccc;\n -webkit-transition: background-color 0.5s;\n transition: background-color 0.5s;\n}\n\n.bookmark--app--container {\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[3];\n grid-template-columns: repeat(3, 1fr);\n grid-gap: 10px;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.bookmark--app--container .bookmark-item {\n width: 400px;\n background-color: #efefef;\n border-bottom: 1px solid #ccc;\n border-radius: 5px;\n padding: 10px;\n}\n\n.bookmark--app--container .bookmark-item .header {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.course--planner-app--container .user--action--container {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.course--planner-app--container .user--action--container .form-group {\n width: 80%;\n margin-right: 5px;\n}\n\n.bet--coupon--app .competition-list {\n padding: 0;\n border-radius: 5px;\n border: 1px solid #efefef;\n border-bottom: 1px solid #ccc;\n}\n\n.bet--coupon--app .my-coupon {\n padding: 0;\n border-radius: 5px;\n border: 1px solid #efefef;\n border-bottom: 1px solid #ccc;\n min-width: 400px !important;\n}\n\n.bet--coupon--app .my-coupon .card--header {\n background-color: #05a0f4 !important;\n}\n\n.bet--coupon--app .card--header {\n background-color: #324354 !important;\n color: #fff;\n border-top-left-radius: 5px;\n border-top-right-radius: 5px;\n padding: 10px;\n}\n\n.bet--coupon--app .card--body {\n background-color: #fff !important;\n padding: 10px;\n}\n\n.bet--coupon--app .competition-item {\n margin-bottom: 5px;\n padding: 10px 0;\n border-bottom: 1px solid #efefef;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.bet--coupon--app .competition-item:last-child {\n border-bottom: none;\n}\n\n.bet--coupon--app .competition-item .info--container {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: start;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n}\n\n.bet--coupon--app .competition-item .rates {\n width: 150px;\n text-align: right;\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[3];\n grid-template-columns: repeat(3, 1fr);\n}\n\n.bet--coupon--app .coupon-item {\n border-bottom: 1px solid #efefef;\n margin-bottom: 5px;\n padding: 10px 0;\n}\n\n.bet--coupon--app .coupon-item:last-child {\n border-bottom: none;\n}\n\n.bet--coupon--app .coupon--total--container {\n max-width: 300px;\n}\n\n.bet--coupon--app .coupon--total--container .my-coupon {\n min-width: 300px !important;\n}\n\n.bet--coupon--app .coupon--total--container .multiply--container {\n min-width: 300px !important;\n}\n\n.bet--coupon--app .coupon--total--container .multiply--container button:not(:last-child) {\n margin-right: 5px;\n margin-bottom: 5px;\n}\n\n.bet--coupon--app .multiply--buttons {\n -ms-flex-wrap: wrap;\n flex-wrap: wrap;\n}\n\n.contact--card--app {\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[4];\n grid-template-columns: repeat(4, 1fr);\n grid-gap: 20px;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.contact--card--app .contact-item {\n width: 180px;\n min-height: 282px;\n border-radius: 5px;\n background-color: #fff !important;\n}\n\n.contact--card--app .contact-item .invitation--header {\n width: 180px;\n height: 62px;\n background: url(\"https://static-exp1.licdn.com/sc/h/cpemy7gsm8bzfb5nnbbnswfdm\");\n background-size: cover;\n background-repeat: no-repeat;\n background-position: center;\n}\n\n.contact--card--app .contact-item .contact--info--container {\n padding: 10px;\n margin-top: 45px;\n}\n\n.contact--card--app .contact-item .contact--info--container p {\n font-size: 15px !important;\n}\n\n.contact--card--app .contact-item .contact--info--container a {\n font-size: 15px !important;\n}\n\n.contact--card--app .contact-item .action--button--container {\n margin-top: 10px;\n}\n\n.contact--card--app .contact-item .contact--image {\n border-radius: 50%;\n width: 100px;\n height: 100px;\n}\n\n.comment--like--dislike--app {\n width: 750px;\n}\n\n.chat--app--container .card {\n padding: 0;\n border-radius: 5px;\n border: 1px solid #efefef;\n border-bottom: 1px solid #ccc;\n max-width: 400px !important;\n}\n\n.chat--app--container .card .card--header {\n background-color: #316bc2 !important;\n color: #fff;\n border-top-left-radius: 5px;\n border-top-right-radius: 5px;\n padding: 10px;\n}\n\n.chat--app--container .card .card--body {\n background-color: #fff !important;\n padding: 10px;\n}\n\n.chat--app--container .card .card--body .active-user-item {\n margin-bottom: 20px;\n}\n\n.chat--app--container .card .card--body .active-user-item:last-child {\n margin-bottom: 0;\n}\n\n.chat--app--container .card .card--body .active-user-item .badge {\n background-color: #efefef;\n color: #333;\n text-transform: uppercase;\n padding: 10px;\n width: 40px;\n height: 40px;\n border-radius: 50%;\n}\n\n.chat--app--container .card .messages {\n list-style-type: none;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: flex-start;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n padding: 10px;\n height: calc(100vh - 200px);\n overflow-y: scroll;\n}\n\n.chat--app--container .card .messages li {\n max-width: 300px;\n padding: 5px 10px;\n margin-bottom: 15px;\n border-bottom: 1px solid #ccc;\n border-radius: 10px;\n background-color: #fffafa;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.chat--app--container .card .messages li small {\n margin-top: 10px;\n -ms-flex-item-align: end;\n align-self: flex-end;\n font-size: 12px;\n color: #ccc;\n font-style: italic;\n}\n\n.chat--app--container .card .messages li.current-user {\n -ms-flex-item-align: end;\n align-self: flex-end;\n background-color: #05a0f4;\n color: #fff;\n}\n\n.chat--app--container .card .text-container {\n margin-top: 30px;\n}\n\n.chat--app--container .card .text-container input {\n border: none;\n padding: 10px;\n height: 37px;\n width: calc(500px - 70px);\n border-bottom-left-radius: 5px;\n}\n\n.chat--app--container .card .text-container button {\n border-radius: 0 !important;\n margin-bottom: 0;\n border: none;\n border-bottom-right-radius: 5px !important;\n}\n\n.class--list--app .class-list {\n list-style-type: none !important;\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[3];\n grid-template-columns: repeat(3, 1fr);\n}\n\n.class--list--app .class-list li {\n margin-bottom: 5px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.class--list--app textarea {\n width: 100%;\n margin-top: 20px;\n}\n\n.rate--calculator--app .rate-list {\n list-style-type: none !important;\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[6];\n grid-template-columns: repeat(6, 1fr);\n}\n\n.rate--calculator--app .rate-list li {\n margin-bottom: 5px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.rate--calculator--app input#money {\n margin-top: 15px;\n}\n\n.rate--calculator--app .rates-container {\n margin-top: 20px;\n list-style-type: none;\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[3];\n grid-template-columns: repeat(3, 1fr);\n}\n\n.rate--calculator--app .rates-container li {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n margin-bottom: 5px;\n}\n\n.rate--calculator--app .rates-container li:last-child {\n margin-bottom: 0;\n}\n\n.rate--calculator--app .rates-container li strong {\n margin-right: 5px;\n}\n/*# sourceMappingURL=style.css.map */" }, { "path": "ders-1-tekrar-dersi/odevler/odev-2/app.js", "content": "const app = Vue.createApp({\n data() {\n return {\n value: \"\",\n };\n },\n methods: {\n showAlert() {\n alert();\n },\n valueUpdated(e) {\n console.log(e.target.value);\n this.value = e.target.value;\n },\n },\n});\napp.mount(\"#exercise\");\n" }, { "path": "ders-1-tekrar-dersi/odevler/odev-2/index.html", "content": "\n\n \n \n \n \n Ödev 2 | Event\n \n \n \n \n
      Ödev 2 | Events
      \n
      \n
      \n \n
      \n \n
      \n \n
      \n \n \n

      {{ value }}

      \n
      \n \n
      \n \n

      {{ value }}

      \n
      \n
      \n
      \n\n \n \n\n" }, { "path": "ders-1-tekrar-dersi/odevler/odev-2/style.css", "content": "* {\n margin: 0;\n padding: 0;\n font-family: Arial, Helvetica, sans-serif;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n\n.bg-success {\n background-color: #6dc454 !important;\n color: #fff;\n}\n\n.bg-danger {\n background-color: #c64b4b !important;\n color: #fff;\n}\n\n.bg-primary {\n background-color: #316bc2 !important;\n color: #fff;\n}\n\n.bg-dark {\n background-color: #333 !important;\n color: #fff;\n}\n\n.text-left {\n text-align: left;\n}\n\n.text-right {\n text-align: right;\n}\n\n.text-center {\n text-align: center;\n}\n\n.text-info {\n color: #05a0f4;\n}\n\n.text-success {\n color: #6dc454;\n}\n\n.text-danger {\n color: #c64b4b;\n}\n\n.text-primary {\n color: #316bc2;\n}\n\n.text-dark {\n color: #333;\n}\n\n.text-muted {\n color: #ccc;\n}\n\n.font-weight-bold {\n font-weight: bold;\n}\n\n.font-italic {\n font-style: italic;\n}\n\n.mt-20 {\n margin-top: 20px;\n}\n\n.mb-20 {\n margin-bottom: 20px;\n}\n\n.ml-20 {\n margin-left: 20px;\n}\n\n.mr-20 {\n margin-right: 20px;\n}\n\n.mt-10 {\n margin-top: 10px;\n}\n\n.mb-10 {\n margin-bottom: 10px;\n}\n\n.ml-10 {\n margin-left: 10px;\n}\n\n.mr-10 {\n margin-right: 10px;\n}\n\n.mt-5 {\n margin-top: 5px;\n}\n\n.mb-5 {\n margin-bottom: 5px;\n}\n\n.ml-5 {\n margin-left: 5px;\n}\n\n.mr-5 {\n margin-right: 5px;\n}\n\n.pt-10 {\n padding-top: 10px;\n}\n\n.pb-10 {\n padding-bottom: 10px;\n}\n\n.pl-10 {\n padding-left: 10px;\n}\n\n.pr-10 {\n padding-right: 10px;\n}\n\n.pt-5 {\n padding-top: 5px;\n}\n\n.pb-5 {\n padding-bottom: 5px;\n}\n\n.pl-5 {\n padding-left: 5px;\n}\n\n.pr-5 {\n padding-right: 5px;\n}\n\n.pt-20 {\n padding-top: 20px;\n}\n\n.pb-20 {\n padding-bottom: 20px;\n}\n\n.pl-20 {\n padding-left: 20px;\n}\n\n.pr-20 {\n padding-right: 20px;\n}\n\n.d-flex {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n}\n\n.justify-content-start {\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: flex-start;\n}\n\n.justify-content-center {\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n}\n\n.justify-content-end {\n -webkit-box-pack: end;\n -ms-flex-pack: end;\n justify-content: flex-end;\n}\n\n.justify-content-between {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n}\n\n.align-items-start {\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n}\n\n.align-items-center {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.align-items-end {\n -webkit-box-align: end;\n -ms-flex-align: end;\n align-items: flex-end;\n}\n\n.w-10 {\n width: 10% !important;\n max-width: 10% !important;\n min-width: 10% !important;\n}\n\n.w-20 {\n width: 20% !important;\n max-width: 20% !important;\n min-width: 20% !important;\n}\n\n.w-30 {\n width: 30% !important;\n max-width: 30% !important;\n min-width: 30% !important;\n}\n\n.w-40 {\n width: 40% !important;\n max-width: 40% !important;\n min-width: 40% !important;\n}\n\n.w-50 {\n width: 50% !important;\n max-width: 50% !important;\n min-width: 50% !important;\n}\n\n.w-60 {\n width: 60% !important;\n max-width: 60% !important;\n min-width: 60% !important;\n}\n\n.w-70 {\n width: 70% !important;\n max-width: 70% !important;\n min-width: 70% !important;\n}\n\n.w-80 {\n width: 80% !important;\n max-width: 80% !important;\n min-width: 80% !important;\n}\n\n.w-90 {\n width: 90% !important;\n max-width: 90% !important;\n min-width: 90% !important;\n}\n\n.w-100 {\n width: 100% !important;\n max-width: 100% !important;\n min-width: 100% !important;\n}\n\n.card {\n background-color: #efefef;\n min-width: 500px;\n padding: 10px;\n border-radius: 3px;\n border-bottom: 1px solid #ccc;\n}\n\n.card-light {\n background-color: #fffafa;\n border: 1px solid #eee;\n border-bottom: 1px solid #ccc;\n}\n\nbutton {\n padding: 10px;\n font-size: 15px;\n outline: none;\n border: none;\n border-radius: 5px;\n border-bottom: 1px solid #ccc;\n background-color: #dad0d0;\n cursor: pointer;\n}\n\nbutton:hover {\n background-color: #f0eded;\n}\n\nbutton:active {\n background-color: white;\n}\n\nbutton.btn-primary {\n background-color: #316bc2;\n color: #fff;\n}\n\nbutton.btn-primary:hover {\n background-color: #5386d3;\n color: #fff;\n}\n\nbutton.btn-primary:active {\n background-color: #7ba3de;\n color: #fff;\n}\n\nbutton.btn-warning {\n background-color: #f5e20c;\n color: #000;\n}\n\nbutton.btn-warning:hover {\n background-color: #f9ee6e;\n color: #000;\n}\n\nbutton.btn-warning:active {\n background-color: #fbf49f;\n color: #000;\n}\n\nbutton.btn-info {\n background-color: #05a0f4;\n color: #fff;\n}\n\nbutton.btn-info:hover {\n background-color: #31b4fb;\n color: #fff;\n}\n\nbutton.btn-info:active {\n background-color: #63c6fc;\n color: #fff;\n}\n\nbutton.btn-success {\n background-color: #6dc454;\n color: #fff;\n}\n\nbutton.btn-success:hover {\n background-color: #8dd17a;\n color: #fff;\n}\n\nbutton.btn-success:active {\n background-color: #aedea0;\n color: #fff;\n}\n\nbutton.btn-danger {\n background-color: #c64b4b;\n color: #fff;\n}\n\nbutton.btn-danger:hover {\n background-color: #d27272;\n color: #fff;\n}\n\nbutton.btn-danger:active {\n background-color: #df9898;\n color: #fff;\n}\n\n.btn-sm {\n padding: 7px;\n font-size: 12px;\n}\n\n.form-group {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n margin-bottom: 10px;\n}\n\np {\n font-size: 14px;\n}\n\nlabel {\n font-size: 15px;\n display: inline-block;\n margin-bottom: 5px;\n}\n\nselect {\n outline: none;\n padding: 5px 10px;\n border: 1px solid #324354;\n}\n\ninput {\n outline: none;\n padding: 5px 10px;\n border: 1px solid #324354;\n}\n\ntextarea {\n outline: none;\n resize: none;\n padding: 5px 10px;\n border: 1px solid #324354;\n}\n\nheader {\n height: 50px;\n margin-bottom: 10px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n background-color: #324354;\n color: #fff;\n font-size: 20px;\n border-bottom: 2px solid #222b34;\n}\n\n.container {\n width: 100%;\n height: auto;\n padding: 10px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: start;\n}\n\nul.list {\n margin-top: 10px;\n list-style-type: none;\n}\n\nul.list li {\n padding: 5px 10px;\n background-color: #efefef;\n margin-bottom: 5px;\n border: 1px solid #ccc;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.pokemon--wars--app--container .game--area {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n width: 100%;\n padding: 10px;\n}\n\n.pokemon--wars--app--container .game--area h2 {\n margin-bottom: 20px;\n}\n\n.pokemon--wars--app--container .selection--container {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n width: 100%;\n padding: 10px;\n margin-bottom: 20px;\n}\n\n.pokemon--wars--app--container .selection--container img {\n -webkit-transition: all 0.5s;\n transition: all 0.5s;\n margin-right: 30px;\n}\n\n.pokemon--wars--app--container .selection--container img:last-child {\n margin-right: none;\n}\n\n.pokemon--wars--app--container .selection--container img.pikachu.selected-pokemon {\n border-radius: 10px;\n background-color: #f8c953c8;\n -webkit-transition: all 0.5s;\n transition: all 0.5s;\n}\n\n.pokemon--wars--app--container .selection--container img.pikachu:hover {\n border-radius: 10px;\n background-color: #f8c953c8;\n -webkit-transition: all 0.5s;\n transition: all 0.5s;\n}\n\n.pokemon--wars--app--container .selection--container img.bulbasaur.selected-pokemon {\n border-radius: 10px;\n background-color: #6ddba8c8;\n}\n\n.pokemon--wars--app--container .selection--container img.bulbasaur:hover {\n border-radius: 10px;\n background-color: #6ddba8c8;\n}\n\n.pokemon--wars--app--container .selection--container img.charmander.selected-pokemon {\n border-radius: 10px;\n background-color: #f7973fc8;\n}\n\n.pokemon--wars--app--container .selection--container img.charmander:hover {\n border-radius: 10px;\n background-color: #f7973fc8;\n}\n\n.pokemon--wars--app--container .selection--container img.squirtle.selected-pokemon {\n border-radius: 10px;\n background-color: #78eeffc8;\n}\n\n.pokemon--wars--app--container .selection--container img.squirtle:hover {\n border-radius: 10px;\n background-color: #78eeffc8;\n}\n\n.pokemon--wars--app--container .fight--area {\n width: 750px;\n}\n\n.pokemon--wars--app--container .health--container {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: end;\n -ms-flex-align: end;\n align-items: flex-end;\n}\n\n.pokemon--wars--app--container .name--health--bar {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.pokemon--wars--app--container .name--health--bar img {\n width: 70px;\n border-radius: 5px;\n}\n\n.pokemon--wars--app--container .name--health--bar img.pikachu {\n background-color: #f8c953c8;\n border: 2px solid #f8c953;\n}\n\n.pokemon--wars--app--container .name--health--bar img.bulbasaur {\n background-color: #6ddba8c8;\n border: 2px solid #6ddba8;\n}\n\n.pokemon--wars--app--container .name--health--bar img.charmander {\n background-color: #f7973fc8;\n border: 2px solid #f7973f;\n}\n\n.pokemon--wars--app--container .name--health--bar img.squirtle {\n background-color: #78eeffc8;\n border: 2px solid #78eeff;\n}\n\n.pokemon--wars--app--container .player--name {\n font-size: 18px;\n font-weight: bold;\n color: #324354;\n}\n\n.pokemon--wars--app--container .vs--container {\n font-size: 35px;\n color: #f7983f;\n font-weight: bold;\n font-style: italic;\n}\n\n.pokemon--wars--app--container progress {\n height: 50px;\n width: 280px;\n}\n\n.pokemon--wars--app--container progress[value] {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n width: 250px;\n height: 35px;\n}\n\n.pokemon--wars--app--container progress.pikachu[value]::-webkit-progress-bar {\n background-color: #f7983f27;\n border: 2px solid #f7983f;\n}\n\n.pokemon--wars--app--container progress.pikachu[value]::-webkit-progress-value {\n background-color: #f7973fc8;\n}\n\n.pokemon--wars--app--container progress.bulbasaur[value]::-webkit-progress-bar {\n background-color: #6ddba827;\n border: 2px solid #6ddba8;\n}\n\n.pokemon--wars--app--container progress.bulbasaur[value]::-webkit-progress-value {\n background-color: #6ddba8c8;\n}\n\n.pokemon--wars--app--container progress.charmander[value]::-webkit-progress-bar {\n background-color: #f7973f27;\n border: 2px solid #f7973f;\n}\n\n.pokemon--wars--app--container progress.charmander[value]::-webkit-progress-value {\n background-color: #f7973fc8;\n}\n\n.pokemon--wars--app--container progress.squirtle[value]::-webkit-progress-bar {\n background-color: #78eeff27;\n border: 2px solid #78eeff;\n}\n\n.pokemon--wars--app--container progress.squirtle[value]::-webkit-progress-value {\n background-color: #78eeffc8;\n}\n\n.pokemon--wars--app--container .attack--button--container {\n margin-top: 50px;\n}\n\n.pokemon--wars--app--container .logger--container {\n width: 400px;\n margin: 0 auto;\n margin-top: 50px;\n}\n\n.pokemon--wars--app--container .logger--container img {\n width: 40px;\n}\n\n.pokemon--wars--app--container .logger--container li {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n border-radius: 5px;\n}\n\n.pokemon--wars--app--container .game--finished--container {\n margin-top: 100px;\n font-size: 50px;\n}\n\n.css--class--app .css--palette {\n list-style-type: none;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.css--class--app .css--palette li {\n width: 50px;\n height: 50px;\n background-color: #ccc;\n border-radius: 50%;\n margin-left: 5px;\n border: 1px solid #bbb;\n}\n\n.css--class--app .result-box {\n width: 100%;\n height: 100px;\n background-color: #18bf71;\n margin-top: 15px;\n border-radius: 5px;\n border-bottom: 1px solid #ccc;\n -webkit-transition: background-color 0.5s;\n transition: background-color 0.5s;\n}\n\n.bookmark--app--container {\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[3];\n grid-template-columns: repeat(3, 1fr);\n grid-gap: 10px;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.bookmark--app--container .bookmark-item {\n width: 400px;\n background-color: #efefef;\n border-bottom: 1px solid #ccc;\n border-radius: 5px;\n padding: 10px;\n}\n\n.bookmark--app--container .bookmark-item .header {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.course--planner-app--container .user--action--container {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.course--planner-app--container .user--action--container .form-group {\n width: 80%;\n margin-right: 5px;\n}\n\n.bet--coupon--app .competition-list {\n padding: 0;\n border-radius: 5px;\n border: 1px solid #efefef;\n border-bottom: 1px solid #ccc;\n}\n\n.bet--coupon--app .my-coupon {\n padding: 0;\n border-radius: 5px;\n border: 1px solid #efefef;\n border-bottom: 1px solid #ccc;\n min-width: 400px !important;\n}\n\n.bet--coupon--app .my-coupon .card--header {\n background-color: #05a0f4 !important;\n}\n\n.bet--coupon--app .card--header {\n background-color: #324354 !important;\n color: #fff;\n border-top-left-radius: 5px;\n border-top-right-radius: 5px;\n padding: 10px;\n}\n\n.bet--coupon--app .card--body {\n background-color: #fff !important;\n padding: 10px;\n}\n\n.bet--coupon--app .competition-item {\n margin-bottom: 5px;\n padding: 10px 0;\n border-bottom: 1px solid #efefef;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.bet--coupon--app .competition-item:last-child {\n border-bottom: none;\n}\n\n.bet--coupon--app .competition-item .info--container {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: start;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n}\n\n.bet--coupon--app .competition-item .rates {\n width: 150px;\n text-align: right;\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[3];\n grid-template-columns: repeat(3, 1fr);\n}\n\n.bet--coupon--app .coupon-item {\n border-bottom: 1px solid #efefef;\n margin-bottom: 5px;\n padding: 10px 0;\n}\n\n.bet--coupon--app .coupon-item:last-child {\n border-bottom: none;\n}\n\n.bet--coupon--app .coupon--total--container {\n max-width: 300px;\n}\n\n.bet--coupon--app .coupon--total--container .my-coupon {\n min-width: 300px !important;\n}\n\n.bet--coupon--app .coupon--total--container .multiply--container {\n min-width: 300px !important;\n}\n\n.bet--coupon--app .coupon--total--container .multiply--container button:not(:last-child) {\n margin-right: 5px;\n margin-bottom: 5px;\n}\n\n.bet--coupon--app .multiply--buttons {\n -ms-flex-wrap: wrap;\n flex-wrap: wrap;\n}\n\n.contact--card--app {\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[4];\n grid-template-columns: repeat(4, 1fr);\n grid-gap: 20px;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.contact--card--app .contact-item {\n width: 180px;\n min-height: 282px;\n border-radius: 5px;\n background-color: #fff !important;\n}\n\n.contact--card--app .contact-item .invitation--header {\n width: 180px;\n height: 62px;\n background: url(\"https://static-exp1.licdn.com/sc/h/cpemy7gsm8bzfb5nnbbnswfdm\");\n background-size: cover;\n background-repeat: no-repeat;\n background-position: center;\n}\n\n.contact--card--app .contact-item .contact--info--container {\n padding: 10px;\n margin-top: 45px;\n}\n\n.contact--card--app .contact-item .contact--info--container p {\n font-size: 15px !important;\n}\n\n.contact--card--app .contact-item .contact--info--container a {\n font-size: 15px !important;\n}\n\n.contact--card--app .contact-item .action--button--container {\n margin-top: 10px;\n}\n\n.contact--card--app .contact-item .contact--image {\n border-radius: 50%;\n width: 100px;\n height: 100px;\n}\n\n.comment--like--dislike--app {\n width: 750px;\n}\n\n.chat--app--container .card {\n padding: 0;\n border-radius: 5px;\n border: 1px solid #efefef;\n border-bottom: 1px solid #ccc;\n max-width: 400px !important;\n}\n\n.chat--app--container .card .card--header {\n background-color: #316bc2 !important;\n color: #fff;\n border-top-left-radius: 5px;\n border-top-right-radius: 5px;\n padding: 10px;\n}\n\n.chat--app--container .card .card--body {\n background-color: #fff !important;\n padding: 10px;\n}\n\n.chat--app--container .card .card--body .active-user-item {\n margin-bottom: 20px;\n}\n\n.chat--app--container .card .card--body .active-user-item:last-child {\n margin-bottom: 0;\n}\n\n.chat--app--container .card .card--body .active-user-item .badge {\n background-color: #efefef;\n color: #333;\n text-transform: uppercase;\n padding: 10px;\n width: 40px;\n height: 40px;\n border-radius: 50%;\n}\n\n.chat--app--container .card .messages {\n list-style-type: none;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: flex-start;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n padding: 10px;\n height: calc(100vh - 200px);\n overflow-y: scroll;\n}\n\n.chat--app--container .card .messages li {\n max-width: 300px;\n padding: 5px 10px;\n margin-bottom: 15px;\n border-bottom: 1px solid #ccc;\n border-radius: 10px;\n background-color: #fffafa;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.chat--app--container .card .messages li small {\n margin-top: 10px;\n -ms-flex-item-align: end;\n align-self: flex-end;\n font-size: 12px;\n color: #ccc;\n font-style: italic;\n}\n\n.chat--app--container .card .messages li.current-user {\n -ms-flex-item-align: end;\n align-self: flex-end;\n background-color: #05a0f4;\n color: #fff;\n}\n\n.chat--app--container .card .text-container {\n margin-top: 30px;\n}\n\n.chat--app--container .card .text-container input {\n border: none;\n padding: 10px;\n height: 37px;\n width: calc(500px - 70px);\n border-bottom-left-radius: 5px;\n}\n\n.chat--app--container .card .text-container button {\n border-radius: 0 !important;\n margin-bottom: 0;\n border: none;\n border-bottom-right-radius: 5px !important;\n}\n\n.class--list--app .class-list {\n list-style-type: none !important;\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[3];\n grid-template-columns: repeat(3, 1fr);\n}\n\n.class--list--app .class-list li {\n margin-bottom: 5px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.class--list--app textarea {\n width: 100%;\n margin-top: 20px;\n}\n\n.rate--calculator--app .rate-list {\n list-style-type: none !important;\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[6];\n grid-template-columns: repeat(6, 1fr);\n}\n\n.rate--calculator--app .rate-list li {\n margin-bottom: 5px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.rate--calculator--app input#money {\n margin-top: 15px;\n}\n\n.rate--calculator--app .rates-container {\n margin-top: 20px;\n list-style-type: none;\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[3];\n grid-template-columns: repeat(3, 1fr);\n}\n\n.rate--calculator--app .rates-container li {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n margin-bottom: 5px;\n}\n\n.rate--calculator--app .rates-container li:last-child {\n margin-bottom: 0;\n}\n\n.rate--calculator--app .rates-container li strong {\n margin-right: 5px;\n}\n/*# sourceMappingURL=style.css.map */" }, { "path": "ders-1-tekrar-dersi/odevler/odev-3/app.js", "content": "new Vue({\n el: '#exercise',\n data: {\n value: 0\n }\n });" }, { "path": "ders-1-tekrar-dersi/odevler/odev-3/index.html", "content": "\n\n \n \n \n \n Reactivity\n \n \n \n \n
      Ödev 3 | Reactivity
      \n
      \n
      \n
      \n \n \n
      \n

      Şuanki Değer: {{ value }}

      \n \n \n

      {{ result }}

      \n
      \n \n \n
      \n \n

      {{ value }}

      \n
      \n
      \n
      \n
      \n \n \n\n" }, { "path": "ders-1-tekrar-dersi/odevler/odev-3/style.css", "content": "* {\n margin: 0;\n padding: 0;\n font-family: Arial, Helvetica, sans-serif;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n\n.bg-success {\n background-color: #6dc454 !important;\n color: #fff;\n}\n\n.bg-danger {\n background-color: #c64b4b !important;\n color: #fff;\n}\n\n.bg-primary {\n background-color: #316bc2 !important;\n color: #fff;\n}\n\n.bg-dark {\n background-color: #333 !important;\n color: #fff;\n}\n\n.text-left {\n text-align: left;\n}\n\n.text-right {\n text-align: right;\n}\n\n.text-center {\n text-align: center;\n}\n\n.text-info {\n color: #05a0f4;\n}\n\n.text-success {\n color: #6dc454;\n}\n\n.text-danger {\n color: #c64b4b;\n}\n\n.text-primary {\n color: #316bc2;\n}\n\n.text-dark {\n color: #333;\n}\n\n.text-muted {\n color: #ccc;\n}\n\n.font-weight-bold {\n font-weight: bold;\n}\n\n.font-italic {\n font-style: italic;\n}\n\n.mt-20 {\n margin-top: 20px;\n}\n\n.mb-20 {\n margin-bottom: 20px;\n}\n\n.ml-20 {\n margin-left: 20px;\n}\n\n.mr-20 {\n margin-right: 20px;\n}\n\n.mt-10 {\n margin-top: 10px;\n}\n\n.mb-10 {\n margin-bottom: 10px;\n}\n\n.ml-10 {\n margin-left: 10px;\n}\n\n.mr-10 {\n margin-right: 10px;\n}\n\n.mt-5 {\n margin-top: 5px;\n}\n\n.mb-5 {\n margin-bottom: 5px;\n}\n\n.ml-5 {\n margin-left: 5px;\n}\n\n.mr-5 {\n margin-right: 5px;\n}\n\n.pt-10 {\n padding-top: 10px;\n}\n\n.pb-10 {\n padding-bottom: 10px;\n}\n\n.pl-10 {\n padding-left: 10px;\n}\n\n.pr-10 {\n padding-right: 10px;\n}\n\n.pt-5 {\n padding-top: 5px;\n}\n\n.pb-5 {\n padding-bottom: 5px;\n}\n\n.pl-5 {\n padding-left: 5px;\n}\n\n.pr-5 {\n padding-right: 5px;\n}\n\n.pt-20 {\n padding-top: 20px;\n}\n\n.pb-20 {\n padding-bottom: 20px;\n}\n\n.pl-20 {\n padding-left: 20px;\n}\n\n.pr-20 {\n padding-right: 20px;\n}\n\n.d-flex {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n}\n\n.justify-content-start {\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: flex-start;\n}\n\n.justify-content-center {\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n}\n\n.justify-content-end {\n -webkit-box-pack: end;\n -ms-flex-pack: end;\n justify-content: flex-end;\n}\n\n.justify-content-between {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n}\n\n.align-items-start {\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n}\n\n.align-items-center {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.align-items-end {\n -webkit-box-align: end;\n -ms-flex-align: end;\n align-items: flex-end;\n}\n\n.w-10 {\n width: 10% !important;\n max-width: 10% !important;\n min-width: 10% !important;\n}\n\n.w-20 {\n width: 20% !important;\n max-width: 20% !important;\n min-width: 20% !important;\n}\n\n.w-30 {\n width: 30% !important;\n max-width: 30% !important;\n min-width: 30% !important;\n}\n\n.w-40 {\n width: 40% !important;\n max-width: 40% !important;\n min-width: 40% !important;\n}\n\n.w-50 {\n width: 50% !important;\n max-width: 50% !important;\n min-width: 50% !important;\n}\n\n.w-60 {\n width: 60% !important;\n max-width: 60% !important;\n min-width: 60% !important;\n}\n\n.w-70 {\n width: 70% !important;\n max-width: 70% !important;\n min-width: 70% !important;\n}\n\n.w-80 {\n width: 80% !important;\n max-width: 80% !important;\n min-width: 80% !important;\n}\n\n.w-90 {\n width: 90% !important;\n max-width: 90% !important;\n min-width: 90% !important;\n}\n\n.w-100 {\n width: 100% !important;\n max-width: 100% !important;\n min-width: 100% !important;\n}\n\n.card {\n background-color: #efefef;\n min-width: 500px;\n padding: 10px;\n border-radius: 3px;\n border-bottom: 1px solid #ccc;\n}\n\n.card-light {\n background-color: #fffafa;\n border: 1px solid #eee;\n border-bottom: 1px solid #ccc;\n}\n\nbutton {\n padding: 10px;\n font-size: 15px;\n outline: none;\n border: none;\n border-radius: 5px;\n border-bottom: 1px solid #ccc;\n background-color: #dad0d0;\n cursor: pointer;\n}\n\nbutton:hover {\n background-color: #f0eded;\n}\n\nbutton:active {\n background-color: white;\n}\n\nbutton.btn-primary {\n background-color: #316bc2;\n color: #fff;\n}\n\nbutton.btn-primary:hover {\n background-color: #5386d3;\n color: #fff;\n}\n\nbutton.btn-primary:active {\n background-color: #7ba3de;\n color: #fff;\n}\n\nbutton.btn-warning {\n background-color: #f5e20c;\n color: #000;\n}\n\nbutton.btn-warning:hover {\n background-color: #f9ee6e;\n color: #000;\n}\n\nbutton.btn-warning:active {\n background-color: #fbf49f;\n color: #000;\n}\n\nbutton.btn-info {\n background-color: #05a0f4;\n color: #fff;\n}\n\nbutton.btn-info:hover {\n background-color: #31b4fb;\n color: #fff;\n}\n\nbutton.btn-info:active {\n background-color: #63c6fc;\n color: #fff;\n}\n\nbutton.btn-success {\n background-color: #6dc454;\n color: #fff;\n}\n\nbutton.btn-success:hover {\n background-color: #8dd17a;\n color: #fff;\n}\n\nbutton.btn-success:active {\n background-color: #aedea0;\n color: #fff;\n}\n\nbutton.btn-danger {\n background-color: #c64b4b;\n color: #fff;\n}\n\nbutton.btn-danger:hover {\n background-color: #d27272;\n color: #fff;\n}\n\nbutton.btn-danger:active {\n background-color: #df9898;\n color: #fff;\n}\n\n.btn-sm {\n padding: 7px;\n font-size: 12px;\n}\n\n.form-group {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n margin-bottom: 10px;\n}\n\np {\n font-size: 14px;\n}\n\nlabel {\n font-size: 15px;\n display: inline-block;\n margin-bottom: 5px;\n}\n\nselect {\n outline: none;\n padding: 5px 10px;\n border: 1px solid #324354;\n}\n\ninput {\n outline: none;\n padding: 5px 10px;\n border: 1px solid #324354;\n}\n\ntextarea {\n outline: none;\n resize: none;\n padding: 5px 10px;\n border: 1px solid #324354;\n}\n\nheader {\n height: 50px;\n margin-bottom: 10px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n background-color: #324354;\n color: #fff;\n font-size: 20px;\n border-bottom: 2px solid #222b34;\n}\n\n.container {\n width: 100%;\n height: auto;\n padding: 10px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: start;\n}\n\nul.list {\n margin-top: 10px;\n list-style-type: none;\n}\n\nul.list li {\n padding: 5px 10px;\n background-color: #efefef;\n margin-bottom: 5px;\n border: 1px solid #ccc;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.pokemon--wars--app--container .game--area {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n width: 100%;\n padding: 10px;\n}\n\n.pokemon--wars--app--container .game--area h2 {\n margin-bottom: 20px;\n}\n\n.pokemon--wars--app--container .selection--container {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n width: 100%;\n padding: 10px;\n margin-bottom: 20px;\n}\n\n.pokemon--wars--app--container .selection--container img {\n -webkit-transition: all 0.5s;\n transition: all 0.5s;\n margin-right: 30px;\n}\n\n.pokemon--wars--app--container .selection--container img:last-child {\n margin-right: none;\n}\n\n.pokemon--wars--app--container .selection--container img.pikachu.selected-pokemon {\n border-radius: 10px;\n background-color: #f8c953c8;\n -webkit-transition: all 0.5s;\n transition: all 0.5s;\n}\n\n.pokemon--wars--app--container .selection--container img.pikachu:hover {\n border-radius: 10px;\n background-color: #f8c953c8;\n -webkit-transition: all 0.5s;\n transition: all 0.5s;\n}\n\n.pokemon--wars--app--container .selection--container img.bulbasaur.selected-pokemon {\n border-radius: 10px;\n background-color: #6ddba8c8;\n}\n\n.pokemon--wars--app--container .selection--container img.bulbasaur:hover {\n border-radius: 10px;\n background-color: #6ddba8c8;\n}\n\n.pokemon--wars--app--container .selection--container img.charmander.selected-pokemon {\n border-radius: 10px;\n background-color: #f7973fc8;\n}\n\n.pokemon--wars--app--container .selection--container img.charmander:hover {\n border-radius: 10px;\n background-color: #f7973fc8;\n}\n\n.pokemon--wars--app--container .selection--container img.squirtle.selected-pokemon {\n border-radius: 10px;\n background-color: #78eeffc8;\n}\n\n.pokemon--wars--app--container .selection--container img.squirtle:hover {\n border-radius: 10px;\n background-color: #78eeffc8;\n}\n\n.pokemon--wars--app--container .fight--area {\n width: 750px;\n}\n\n.pokemon--wars--app--container .health--container {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: end;\n -ms-flex-align: end;\n align-items: flex-end;\n}\n\n.pokemon--wars--app--container .name--health--bar {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.pokemon--wars--app--container .name--health--bar img {\n width: 70px;\n border-radius: 5px;\n}\n\n.pokemon--wars--app--container .name--health--bar img.pikachu {\n background-color: #f8c953c8;\n border: 2px solid #f8c953;\n}\n\n.pokemon--wars--app--container .name--health--bar img.bulbasaur {\n background-color: #6ddba8c8;\n border: 2px solid #6ddba8;\n}\n\n.pokemon--wars--app--container .name--health--bar img.charmander {\n background-color: #f7973fc8;\n border: 2px solid #f7973f;\n}\n\n.pokemon--wars--app--container .name--health--bar img.squirtle {\n background-color: #78eeffc8;\n border: 2px solid #78eeff;\n}\n\n.pokemon--wars--app--container .player--name {\n font-size: 18px;\n font-weight: bold;\n color: #324354;\n}\n\n.pokemon--wars--app--container .vs--container {\n font-size: 35px;\n color: #f7983f;\n font-weight: bold;\n font-style: italic;\n}\n\n.pokemon--wars--app--container progress {\n height: 50px;\n width: 280px;\n}\n\n.pokemon--wars--app--container progress[value] {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n width: 250px;\n height: 35px;\n}\n\n.pokemon--wars--app--container progress.pikachu[value]::-webkit-progress-bar {\n background-color: #f7983f27;\n border: 2px solid #f7983f;\n}\n\n.pokemon--wars--app--container progress.pikachu[value]::-webkit-progress-value {\n background-color: #f7973fc8;\n}\n\n.pokemon--wars--app--container progress.bulbasaur[value]::-webkit-progress-bar {\n background-color: #6ddba827;\n border: 2px solid #6ddba8;\n}\n\n.pokemon--wars--app--container progress.bulbasaur[value]::-webkit-progress-value {\n background-color: #6ddba8c8;\n}\n\n.pokemon--wars--app--container progress.charmander[value]::-webkit-progress-bar {\n background-color: #f7973f27;\n border: 2px solid #f7973f;\n}\n\n.pokemon--wars--app--container progress.charmander[value]::-webkit-progress-value {\n background-color: #f7973fc8;\n}\n\n.pokemon--wars--app--container progress.squirtle[value]::-webkit-progress-bar {\n background-color: #78eeff27;\n border: 2px solid #78eeff;\n}\n\n.pokemon--wars--app--container progress.squirtle[value]::-webkit-progress-value {\n background-color: #78eeffc8;\n}\n\n.pokemon--wars--app--container .attack--button--container {\n margin-top: 50px;\n}\n\n.pokemon--wars--app--container .logger--container {\n width: 400px;\n margin: 0 auto;\n margin-top: 50px;\n}\n\n.pokemon--wars--app--container .logger--container img {\n width: 40px;\n}\n\n.pokemon--wars--app--container .logger--container li {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n border-radius: 5px;\n}\n\n.pokemon--wars--app--container .game--finished--container {\n margin-top: 100px;\n font-size: 50px;\n}\n\n.css--class--app .css--palette {\n list-style-type: none;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.css--class--app .css--palette li {\n width: 50px;\n height: 50px;\n background-color: #ccc;\n border-radius: 50%;\n margin-left: 5px;\n border: 1px solid #bbb;\n}\n\n.css--class--app .result-box {\n width: 100%;\n height: 100px;\n background-color: #18bf71;\n margin-top: 15px;\n border-radius: 5px;\n border-bottom: 1px solid #ccc;\n -webkit-transition: background-color 0.5s;\n transition: background-color 0.5s;\n}\n\n.bookmark--app--container {\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[3];\n grid-template-columns: repeat(3, 1fr);\n grid-gap: 10px;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.bookmark--app--container .bookmark-item {\n width: 400px;\n background-color: #efefef;\n border-bottom: 1px solid #ccc;\n border-radius: 5px;\n padding: 10px;\n}\n\n.bookmark--app--container .bookmark-item .header {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.course--planner-app--container .user--action--container {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.course--planner-app--container .user--action--container .form-group {\n width: 80%;\n margin-right: 5px;\n}\n\n.bet--coupon--app .competition-list {\n padding: 0;\n border-radius: 5px;\n border: 1px solid #efefef;\n border-bottom: 1px solid #ccc;\n}\n\n.bet--coupon--app .my-coupon {\n padding: 0;\n border-radius: 5px;\n border: 1px solid #efefef;\n border-bottom: 1px solid #ccc;\n min-width: 400px !important;\n}\n\n.bet--coupon--app .my-coupon .card--header {\n background-color: #05a0f4 !important;\n}\n\n.bet--coupon--app .card--header {\n background-color: #324354 !important;\n color: #fff;\n border-top-left-radius: 5px;\n border-top-right-radius: 5px;\n padding: 10px;\n}\n\n.bet--coupon--app .card--body {\n background-color: #fff !important;\n padding: 10px;\n}\n\n.bet--coupon--app .competition-item {\n margin-bottom: 5px;\n padding: 10px 0;\n border-bottom: 1px solid #efefef;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.bet--coupon--app .competition-item:last-child {\n border-bottom: none;\n}\n\n.bet--coupon--app .competition-item .info--container {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: start;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n}\n\n.bet--coupon--app .competition-item .rates {\n width: 150px;\n text-align: right;\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[3];\n grid-template-columns: repeat(3, 1fr);\n}\n\n.bet--coupon--app .coupon-item {\n border-bottom: 1px solid #efefef;\n margin-bottom: 5px;\n padding: 10px 0;\n}\n\n.bet--coupon--app .coupon-item:last-child {\n border-bottom: none;\n}\n\n.bet--coupon--app .coupon--total--container {\n max-width: 300px;\n}\n\n.bet--coupon--app .coupon--total--container .my-coupon {\n min-width: 300px !important;\n}\n\n.bet--coupon--app .coupon--total--container .multiply--container {\n min-width: 300px !important;\n}\n\n.bet--coupon--app .coupon--total--container .multiply--container button:not(:last-child) {\n margin-right: 5px;\n margin-bottom: 5px;\n}\n\n.bet--coupon--app .multiply--buttons {\n -ms-flex-wrap: wrap;\n flex-wrap: wrap;\n}\n\n.contact--card--app {\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[4];\n grid-template-columns: repeat(4, 1fr);\n grid-gap: 20px;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.contact--card--app .contact-item {\n width: 180px;\n min-height: 282px;\n border-radius: 5px;\n background-color: #fff !important;\n}\n\n.contact--card--app .contact-item .invitation--header {\n width: 180px;\n height: 62px;\n background: url(\"https://static-exp1.licdn.com/sc/h/cpemy7gsm8bzfb5nnbbnswfdm\");\n background-size: cover;\n background-repeat: no-repeat;\n background-position: center;\n}\n\n.contact--card--app .contact-item .contact--info--container {\n padding: 10px;\n margin-top: 45px;\n}\n\n.contact--card--app .contact-item .contact--info--container p {\n font-size: 15px !important;\n}\n\n.contact--card--app .contact-item .contact--info--container a {\n font-size: 15px !important;\n}\n\n.contact--card--app .contact-item .action--button--container {\n margin-top: 10px;\n}\n\n.contact--card--app .contact-item .contact--image {\n border-radius: 50%;\n width: 100px;\n height: 100px;\n}\n\n.comment--like--dislike--app {\n width: 750px;\n}\n\n.chat--app--container .card {\n padding: 0;\n border-radius: 5px;\n border: 1px solid #efefef;\n border-bottom: 1px solid #ccc;\n max-width: 400px !important;\n}\n\n.chat--app--container .card .card--header {\n background-color: #316bc2 !important;\n color: #fff;\n border-top-left-radius: 5px;\n border-top-right-radius: 5px;\n padding: 10px;\n}\n\n.chat--app--container .card .card--body {\n background-color: #fff !important;\n padding: 10px;\n}\n\n.chat--app--container .card .card--body .active-user-item {\n margin-bottom: 20px;\n}\n\n.chat--app--container .card .card--body .active-user-item:last-child {\n margin-bottom: 0;\n}\n\n.chat--app--container .card .card--body .active-user-item .badge {\n background-color: #efefef;\n color: #333;\n text-transform: uppercase;\n padding: 10px;\n width: 40px;\n height: 40px;\n border-radius: 50%;\n}\n\n.chat--app--container .card .messages {\n list-style-type: none;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: flex-start;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n padding: 10px;\n height: calc(100vh - 200px);\n overflow-y: scroll;\n}\n\n.chat--app--container .card .messages li {\n max-width: 300px;\n padding: 5px 10px;\n margin-bottom: 15px;\n border-bottom: 1px solid #ccc;\n border-radius: 10px;\n background-color: #fffafa;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.chat--app--container .card .messages li small {\n margin-top: 10px;\n -ms-flex-item-align: end;\n align-self: flex-end;\n font-size: 12px;\n color: #ccc;\n font-style: italic;\n}\n\n.chat--app--container .card .messages li.current-user {\n -ms-flex-item-align: end;\n align-self: flex-end;\n background-color: #05a0f4;\n color: #fff;\n}\n\n.chat--app--container .card .text-container {\n margin-top: 30px;\n}\n\n.chat--app--container .card .text-container input {\n border: none;\n padding: 10px;\n height: 37px;\n width: calc(500px - 70px);\n border-bottom-left-radius: 5px;\n}\n\n.chat--app--container .card .text-container button {\n border-radius: 0 !important;\n margin-bottom: 0;\n border: none;\n border-bottom-right-radius: 5px !important;\n}\n\n.class--list--app .class-list {\n list-style-type: none !important;\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[3];\n grid-template-columns: repeat(3, 1fr);\n}\n\n.class--list--app .class-list li {\n margin-bottom: 5px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.class--list--app textarea {\n width: 100%;\n margin-top: 20px;\n}\n\n.rate--calculator--app .rate-list {\n list-style-type: none !important;\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[6];\n grid-template-columns: repeat(6, 1fr);\n}\n\n.rate--calculator--app .rate-list li {\n margin-bottom: 5px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.rate--calculator--app input#money {\n margin-top: 15px;\n}\n\n.rate--calculator--app .rates-container {\n margin-top: 20px;\n list-style-type: none;\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[3];\n grid-template-columns: repeat(3, 1fr);\n}\n\n.rate--calculator--app .rates-container li {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: start;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n margin-bottom: 5px;\n}\n\n.rate--calculator--app .rates-container li:last-child {\n margin-bottom: 0;\n}\n\n.rate--calculator--app .rates-container li strong {\n margin-right: 5px;\n}\n/*# sourceMappingURL=style.css.map */" }, { "path": "ders-1-tekrar-dersi/style.css", "content": "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;0,900;1,300;1,400&display=swap\");\n.text-blue {\n color: #59bacc;\n}\n\n.bg-blue {\n background-color: #59bacc;\n}\n\n.text-green {\n color: #58ad69;\n}\n\n.bg-green {\n background-color: #58ad69;\n}\n\n.text-orange {\n color: #ffbc49;\n}\n\n.bg-orange {\n background-color: #ffbc49;\n}\n\n.text-red {\n color: #e2574c;\n}\n\n.bg-red {\n background-color: #e2574c;\n}\n\n.text-black {\n color: #4e5459;\n}\n\n.bg-black {\n background-color: #4e5459;\n}\n\n.text-default {\n color: #d7dbdd;\n}\n\n.bg-default {\n background-color: #d7dbdd;\n}\n\n.text-white {\n color: #fff;\n}\n\n.bg-white {\n background-color: #fff;\n}\n\n.text-center {\n text-align: center;\n}\n\n.text-left {\n text-align: left;\n}\n\n.text-right {\n text-align: right;\n}\n\n.d-flex {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n}\n\n.justify-content-center {\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n}\n\n.justify-content-start {\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: flex-start;\n}\n\n.justify-content-between {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n}\n\n.justify-content-end {\n -webkit-box-pack: end;\n -ms-flex-pack: end;\n justify-content: flex-end;\n}\n\n.align-items-center {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.align-items-start {\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n}\n\n.align-items-end {\n -webkit-box-align: end;\n -ms-flex-align: end;\n align-items: flex-end;\n}\n\n.mt-0 {\n margin-top: 0rem;\n}\n\n.mb-0 {\n margin-bottom: 0rem;\n}\n\n.mr-0 {\n margin-right: 0rem;\n}\n\n.ml-0 {\n margin-left: 0rem;\n}\n\n.mx-0 {\n margin-left: 0rem;\n margin-right: 0rem;\n}\n\n.my-0 {\n margin-top: 0rem;\n margin-bottom: 0rem;\n}\n\n.pt-0 {\n padding-top: 0rem;\n}\n\n.pb-0 {\n padding-bottom: 0rem;\n}\n\n.pr-0 {\n padding-right: 0rem;\n}\n\n.pl-0 {\n padding-left: 0rem;\n}\n\n.px-0 {\n padding-left: 0rem;\n padding-right: 0rem;\n}\n\n.py-0 {\n padding-top: 0rem;\n padding-bottom: 0rem;\n}\n\n.mt-1 {\n margin-top: 0.25rem;\n}\n\n.mb-1 {\n margin-bottom: 0.25rem;\n}\n\n.mr-1 {\n margin-right: 0.25rem;\n}\n\n.ml-1 {\n margin-left: 0.25rem;\n}\n\n.mx-1 {\n margin-left: 0.25rem;\n margin-right: 0.25rem;\n}\n\n.my-1 {\n margin-top: 0.25rem;\n margin-bottom: 0.25rem;\n}\n\n.pt-1 {\n padding-top: 0.25rem;\n}\n\n.pb-1 {\n padding-bottom: 0.25rem;\n}\n\n.pr-1 {\n padding-right: 0.25rem;\n}\n\n.pl-1 {\n padding-left: 0.25rem;\n}\n\n.px-1 {\n padding-left: 0.25rem;\n padding-right: 0.25rem;\n}\n\n.py-1 {\n padding-top: 0.25rem;\n padding-bottom: 0.25rem;\n}\n\n.mt-2 {\n margin-top: 0.5rem;\n}\n\n.mb-2 {\n margin-bottom: 0.5rem;\n}\n\n.mr-2 {\n margin-right: 0.5rem;\n}\n\n.ml-2 {\n margin-left: 0.5rem;\n}\n\n.mx-2 {\n margin-left: 0.5rem;\n margin-right: 0.5rem;\n}\n\n.my-2 {\n margin-top: 0.5rem;\n margin-bottom: 0.5rem;\n}\n\n.pt-2 {\n padding-top: 0.5rem;\n}\n\n.pb-2 {\n padding-bottom: 0.5rem;\n}\n\n.pr-2 {\n padding-right: 0.5rem;\n}\n\n.pl-2 {\n padding-left: 0.5rem;\n}\n\n.px-2 {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n}\n\n.py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n\n.mt-3 {\n margin-top: 0.75rem;\n}\n\n.mb-3 {\n margin-bottom: 0.75rem;\n}\n\n.mr-3 {\n margin-right: 0.75rem;\n}\n\n.ml-3 {\n margin-left: 0.75rem;\n}\n\n.mx-3 {\n margin-left: 0.75rem;\n margin-right: 0.75rem;\n}\n\n.my-3 {\n margin-top: 0.75rem;\n margin-bottom: 0.75rem;\n}\n\n.pt-3 {\n padding-top: 0.75rem;\n}\n\n.pb-3 {\n padding-bottom: 0.75rem;\n}\n\n.pr-3 {\n padding-right: 0.75rem;\n}\n\n.pl-3 {\n padding-left: 0.75rem;\n}\n\n.px-3 {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n\n.py-3 {\n padding-top: 0.75rem;\n padding-bottom: 0.75rem;\n}\n\n.mt-4 {\n margin-top: 1rem;\n}\n\n.mb-4 {\n margin-bottom: 1rem;\n}\n\n.mr-4 {\n margin-right: 1rem;\n}\n\n.ml-4 {\n margin-left: 1rem;\n}\n\n.mx-4 {\n margin-left: 1rem;\n margin-right: 1rem;\n}\n\n.my-4 {\n margin-top: 1rem;\n margin-bottom: 1rem;\n}\n\n.pt-4 {\n padding-top: 1rem;\n}\n\n.pb-4 {\n padding-bottom: 1rem;\n}\n\n.pr-4 {\n padding-right: 1rem;\n}\n\n.pl-4 {\n padding-left: 1rem;\n}\n\n.px-4 {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n\n.py-4 {\n padding-top: 1rem;\n padding-bottom: 1rem;\n}\n\n.mt-5 {\n margin-top: 1.25rem;\n}\n\n.mb-5 {\n margin-bottom: 1.25rem;\n}\n\n.mr-5 {\n margin-right: 1.25rem;\n}\n\n.ml-5 {\n margin-left: 1.25rem;\n}\n\n.mx-5 {\n margin-left: 1.25rem;\n margin-right: 1.25rem;\n}\n\n.my-5 {\n margin-top: 1.25rem;\n margin-bottom: 1.25rem;\n}\n\n.pt-5 {\n padding-top: 1.25rem;\n}\n\n.pb-5 {\n padding-bottom: 1.25rem;\n}\n\n.pr-5 {\n padding-right: 1.25rem;\n}\n\n.pl-5 {\n padding-left: 1.25rem;\n}\n\n.px-5 {\n padding-left: 1.25rem;\n padding-right: 1.25rem;\n}\n\n.py-5 {\n padding-top: 1.25rem;\n padding-bottom: 1.25rem;\n}\n\n* {\n font-family: \"Roboto\", sans-serif;\n margin: 0;\n padding: 0;\n}\n\nbody {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n background-color: #e9ebee;\n padding: 10px;\n}\n\nbody #app {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -ms-flex-wrap: wrap;\n flex-wrap: wrap;\n}\n\nbody #app .container {\n border-radius: 5px;\n width: 375px;\n margin: 5px;\n -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);\n border: 1px solid #d0d1d5;\n background-color: white;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n padding: 5px 10px;\n}\n\nbody #app .container-sm {\n border-radius: 5px;\n max-width: 375px !important;\n margin: 5px;\n -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);\n border: 1px solid #d0d1d5;\n background-color: white;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n padding: 5px 10px;\n}\n\nbody #app input,\nbody #app select {\n padding: 5px;\n outline: none;\n width: 100%;\n margin: 5px 0;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 1px solid #ccc;\n border-radius: 5px;\n}\n\nbody #app button {\n border: none;\n padding: 5px 10px;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n margin: 3px 0;\n border-radius: 3px;\n background-color: #d7dbdd;\n color: #32373b;\n}\n\nbody #app button:hover {\n background-color: #f3f4f4;\n}\n\nbody #app button:active {\n background-color: #e5e7e9;\n}\n\nbody #app button.black {\n background-color: #4e5459;\n color: #e5ffff;\n}\n\nbody #app button.black:hover {\n background-color: #363a3e;\n}\n\nbody #app button.black:active {\n background-color: #666e74;\n}\n\nbody #app button.blue {\n background-color: #59bacc;\n color: #e5ffff;\n}\n\nbody #app button.blue:hover {\n background-color: #80cad8;\n}\n\nbody #app button.blue:active {\n background-color: #6dc2d2;\n}\n\nbody #app button.red {\n background-color: #e2574c;\n color: #e5ffff;\n}\n\nbody #app button.red:hover {\n background-color: #e98078;\n}\n\nbody #app button.red:active {\n background-color: #e66c62;\n}\n\nbody #app button.green {\n background-color: #58ad69;\n color: #e5ffff;\n}\n\nbody #app button.green:hover {\n background-color: #7abe88;\n}\n\nbody #app button.green:active {\n background-color: #69b578;\n}\n\nbody #app button.orange {\n background-color: #ffbc49;\n color: #666;\n}\n\nbody #app button.orange:hover {\n background-color: #ffcf7c;\n}\n\nbody #app button.orange:active {\n background-color: #ffc563;\n}\n\nbody #app button.block {\n width: 100%;\n}\n\nbody #app button.sm {\n padding: 2px 5px;\n}\n\nbody #app ul {\n list-style: none;\n margin: 0;\n padding: 0;\n}\n\nbody #app ul li {\n padding: 5px;\n background-color: #f3f4f4;\n margin-bottom: 5px;\n border-radius: 3px;\n}\n\nbody #app ul li:last-child {\n margin-bottom: 0;\n}\n\nbody #app ul li:hover {\n background-color: #e5e7e9;\n}\n\nbody #app hr {\n background: -webkit-gradient(linear, left top, right top, from(#59bacc), to(#ffbc49));\n background: linear-gradient(to right, #59bacc, #ffbc49);\n height: 1px;\n border: none;\n}\n\nbody #app small {\n font-size: 12px;\n}\n/*# sourceMappingURL=style.css.map */" }, { "path": "ders-10-composition-api/0-script-setup/.vscode/extensions.json", "content": "{\n \"recommendations\": [\"johnsoncodehk.volar\"]\n}\n" }, { "path": "ders-10-composition-api/0-script-setup/README.md", "content": "# Vue 3 + Vite\n\nThis template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `\n \n\n" }, { "path": "ders-10-composition-api/0-script-setup/package.json", "content": "{\n \"name\": \"0-script-setup\",\n \"version\": \"0.0.0\",\n \"scripts\": {\n \"dev\": \"vite\",\n \"build\": \"vite build\",\n \"serve\": \"vite preview\"\n },\n \"dependencies\": {\n \"vue\": \"^3.2.6\"\n },\n \"devDependencies\": {\n \"@vitejs/plugin-vue\": \"^1.6.1\",\n \"@vue/compiler-sfc\": \"^3.2.6\",\n \"vite\": \"^2.5.4\"\n }\n}" }, { "path": "ders-10-composition-api/0-script-setup/src/App.vue", "content": "\n\n" }, { "path": "ders-10-composition-api/0-script-setup/src/components/oddOrEven.vue", "content": "\n\n" }, { "path": "ders-10-composition-api/0-script-setup/src/composables/Utils.js", "content": "import { ref, onMounted } from \"vue\";\nexport default function () {\n const title = ref(\"Başlık\");\n const counter = ref(0);\n const inc = () => {\n counter.value++;\n };\n const alertMe = (info) => {\n console.log(info);\n };\n\n onMounted(() => {\n console.log(\"Mounted esnasında yapılabilecekler burada...\");\n });\n\n return { title, counter, inc, alertMe };\n}\n" }, { "path": "ders-10-composition-api/0-script-setup/src/main.js", "content": "import { createApp } from 'vue'\nimport App from './App.vue'\n\ncreateApp(App).mount('#app')\n" }, { "path": "ders-10-composition-api/0-script-setup/vite.config.js", "content": "import { defineConfig } from 'vite'\nimport vue from '@vitejs/plugin-vue'\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n plugins: [vue()]\n})\n" }, { "path": "ders-10-composition-api/1-item-list-app/.vscode/extensions.json", "content": "{\n \"recommendations\": [\"johnsoncodehk.volar\"]\n}\n" }, { "path": "ders-10-composition-api/1-item-list-app/README.md", "content": "# Vue 3 + Vite\n\nThis template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `\n \n\n" }, { "path": "ders-10-composition-api/1-item-list-app/package.json", "content": "{\n \"name\": \"1-item-list-app\",\n \"version\": \"0.0.0\",\n \"scripts\": {\n \"dev\": \"vite\",\n \"build\": \"vite build\",\n \"serve\": \"vite preview\"\n },\n \"dependencies\": {\n \"vue\": \"^3.2.6\"\n },\n \"devDependencies\": {\n \"@vitejs/plugin-vue\": \"^1.6.1\",\n \"@vue/compiler-sfc\": \"^3.2.6\",\n \"autoprefixer\": \"^10.3.4\",\n \"postcss\": \"^8.3.6\",\n \"tailwindcss\": \"^2.2.15\",\n \"vite\": \"^2.5.4\"\n }\n}\n" }, { "path": "ders-10-composition-api/1-item-list-app/postcss.config.js", "content": "module.exports = {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n },\n}\n" }, { "path": "ders-10-composition-api/1-item-list-app/src/App.vue", "content": "\n\n" }, { "path": "ders-10-composition-api/1-item-list-app/src/assets/index.css", "content": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer components {\n .input {\n @apply bg-gray-800 outline-none px-2 py-1 text-sm rounded-md text-gray-400 focus:bg-gray-700;\n }\n .delete-button {\n @apply outline-none hover:text-gray-100 text-gray-400;\n }\n\n .add-item-button {\n @apply outline-none flex bg-gray-800 w-full px-2 py-2 rounded-full items-center justify-center text-purple-600 hover:bg-gray-700 active:bg-gray-900;\n }\n\n .purple-button {\n @apply outline-none bg-indigo-600 p-2 rounded-md hover:bg-indigo-500 active:bg-indigo-700;\n }\n\n .danger-button {\n @apply outline-none bg-red-600 p-2 rounded-md hover:bg-red-500 active:bg-red-700;\n }\n\n .table-body-item {\n @apply flex items-center mb-1 border-b border-gray-800 p-1;\n }\n}\n" }, { "path": "ders-10-composition-api/1-item-list-app/src/components/appSidebar.vue", "content": "\n\n" }, { "path": "ders-10-composition-api/1-item-list-app/src/components/contactSection.vue", "content": "\n\n" }, { "path": "ders-10-composition-api/1-item-list-app/src/components/invoiceContent.vue", "content": "\n\n" }, { "path": "ders-10-composition-api/1-item-list-app/src/components/invoiceItem.vue", "content": "\n\n" }, { "path": "ders-10-composition-api/1-item-list-app/src/components/invoiceItems.vue", "content": "\n\n" }, { "path": "ders-10-composition-api/1-item-list-app/src/components/invoiceSummary.vue", "content": "\n\n" }, { "path": "ders-10-composition-api/1-item-list-app/src/components/ui/appHeading.vue", "content": "\n\n" }, { "path": "ders-10-composition-api/1-item-list-app/src/main.js", "content": "import { createApp } from \"vue\";\nimport App from \"./App.vue\";\nimport appHeading from \"./components/ui/appHeading.vue\";\nimport \"./assets/index.css\";\nconst app = createApp(App);\napp.component(\"heading\", appHeading);\napp.mount(\"#app\");\n" }, { "path": "ders-10-composition-api/1-item-list-app/src/theme.vue", "content": "\n" }, { "path": "ders-10-composition-api/1-item-list-app/tailwind.config.js", "content": "module.exports = {\n mode: \"jit\",\n purge: [\"./src/**/*.vue\"],\n darkMode: false, // or 'media' or 'class'\n theme: {\n extend: {},\n },\n variants: {\n extend: {},\n },\n plugins: [],\n};\n" }, { "path": "ders-10-composition-api/1-item-list-app/vite.config.js", "content": "import { defineConfig } from 'vite'\nimport vue from '@vitejs/plugin-vue'\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n plugins: [vue()]\n})\n" }, { "path": "ders-11/namespaced-components/.vscode/extensions.json", "content": "{\n \"recommendations\": [\"johnsoncodehk.volar\"]\n}\n" }, { "path": "ders-11/namespaced-components/README.md", "content": "# Vue 3 + Vite\n\nThis template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `\n \n\n" }, { "path": "ders-11/namespaced-components/package.json", "content": "{\n \"name\": \"namespaced-components\",\n \"version\": \"0.0.0\",\n \"scripts\": {\n \"dev\": \"vite\",\n \"build\": \"vite build\",\n \"serve\": \"vite preview\"\n },\n \"dependencies\": {\n \"vue\": \"^3.2.16\"\n },\n \"devDependencies\": {\n \"@vitejs/plugin-vue\": \"^1.9.2\",\n \"vite\": \"^2.6.0\"\n }\n}" }, { "path": "ders-11/namespaced-components/src/App.vue", "content": "\n\n\n" }, { "path": "ders-11/namespaced-components/src/components/Forms/Input.vue", "content": "\n" }, { "path": "ders-11/namespaced-components/src/components/Forms/Label.vue", "content": "\n" }, { "path": "ders-11/namespaced-components/src/components/Forms/Select.vue", "content": "\n" }, { "path": "ders-11/namespaced-components/src/components/form-components.js", "content": "export { default as Input } from \"./Forms/Input.vue\";\nexport { default as Select } from \"./Forms/Select.vue\";\nexport { default as Label } from \"./Forms/Label.vue\";\n" }, { "path": "ders-11/namespaced-components/src/main.js", "content": "import { createApp } from 'vue'\nimport App from './App.vue'\n\ncreateApp(App).mount('#app')\n" }, { "path": "ders-11/namespaced-components/vite.config.js", "content": "import { defineConfig } from 'vite'\nimport vue from '@vitejs/plugin-vue'\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n plugins: [vue()]\n})\n" }, { "path": "ders-11/suspense-example/.vscode/extensions.json", "content": "{\n \"recommendations\": [\"johnsoncodehk.volar\"]\n}\n" }, { "path": "ders-11/suspense-example/README.md", "content": "# Vue 3 + Vite\n\nThis template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `\n \n\n" }, { "path": "ders-11/suspense-example/package.json", "content": "{\n \"name\": \"suspense-example\",\n \"version\": \"0.0.0\",\n \"scripts\": {\n \"dev\": \"vite\",\n \"build\": \"vite build\",\n \"serve\": \"vite preview\"\n },\n \"dependencies\": {\n \"vue\": \"^3.2.16\"\n },\n \"devDependencies\": {\n \"@vitejs/plugin-vue\": \"^1.9.2\",\n \"vite\": \"^2.6.0\"\n }\n}" }, { "path": "ders-11/suspense-example/src/App.vue", "content": "\n\n\n\n\n" }, { "path": "ders-11/suspense-example/src/components/Todos.vue", "content": "\n\n\n" }, { "path": "ders-11/suspense-example/src/components/Users.vue", "content": "\n\n\n" }, { "path": "ders-11/suspense-example/src/main.js", "content": "import { createApp } from 'vue'\nimport App from './App.vue'\n\ncreateApp(App).mount('#app')\n" }, { "path": "ders-11/suspense-example/vite.config.js", "content": "import { defineConfig } from 'vite'\nimport vue from '@vitejs/plugin-vue'\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n plugins: [vue()]\n})\n" }, { "path": "ders-11/teleport-example/.vscode/extensions.json", "content": "{\n \"recommendations\": [\"johnsoncodehk.volar\"]\n}\n" }, { "path": "ders-11/teleport-example/README.md", "content": "# Vue 3 + Vite\n\nThis template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `\n \n\n" }, { "path": "ders-11/teleport-example/package.json", "content": "{\n \"name\": \"teleport-example\",\n \"version\": \"0.0.0\",\n \"scripts\": {\n \"dev\": \"vite\",\n \"build\": \"vite build\",\n \"serve\": \"vite preview\"\n },\n \"dependencies\": {\n \"vue\": \"^3.2.16\"\n },\n \"devDependencies\": {\n \"@vitejs/plugin-vue\": \"^1.9.2\",\n \"vite\": \"^2.6.0\"\n }\n}" }, { "path": "ders-11/teleport-example/src/App.vue", "content": "\n\n\n\n\n" }, { "path": "ders-11/teleport-example/src/components/HelloWorld.vue", "content": "\n\n\n\n\n" }, { "path": "ders-11/teleport-example/src/main.js", "content": "import { createApp } from 'vue'\nimport App from './App.vue'\n\ncreateApp(App).mount('#app')\n" }, { "path": "ders-11/teleport-example/vite.config.js", "content": "import { defineConfig } from 'vite'\nimport vue from '@vitejs/plugin-vue'\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n plugins: [vue()]\n})\n" }, { "path": "ders-12-socialmark-composition-api/client/.eslintignore", "content": "/composables/*.js" }, { "path": "ders-12-socialmark-composition-api/client/.prettierrc", "content": "{\n \"printWidth\": 250\n}" }, { "path": "ders-12-socialmark-composition-api/client/README.md", "content": "# ders-6-socialmark-uygulamasi\n\n## Project setup\n```\nyarn install\n```\n\n### Compiles and hot-reloads for development\n```\nyarn serve\n```\n\n### Compiles and minifies for production\n```\nyarn build\n```\n\n### Lints and fixes files\n```\nyarn lint\n```\n\n### Customize configuration\nSee [Configuration Reference](https://cli.vuejs.org/config/).\n" }, { "path": "ders-12-socialmark-composition-api/client/babel.config.js", "content": "module.exports = {\n presets: [\n '@vue/cli-plugin-babel/preset'\n ]\n}\n" }, { "path": "ders-12-socialmark-composition-api/client/db.json", "content": "{\n \"users\": [\n {\n \"username\": \"gkandemir\",\n \"fullname\": \"Gökhan Kandemir\",\n \"password\": \"79a0af24ff17bb7a8a4a1176de203d9f566ee17d\",\n \"id\": 1\n },\n {\n \"username\": \"prototurk\",\n \"fullname\": \"Tayfun Erbilen\",\n \"password\": \"79a0af24ff17bb7a8a4a1176de203d9f566ee17d\",\n \"id\": 2\n },\n {\n \"username\": \"kablosuzbeyin\",\n \"fullname\": \"Ramazan Sancar\",\n \"password\": \"79a0af24ff17bb7a8a4a1176de203d9f566ee17d\",\n \"id\": 3\n },\n {\n \"username\": \"felo\",\n \"fullname\": \"felakettin\",\n \"password\": \"8fd84c94c8fe7e2b09a30501fd2b1c8b2aaefdd7\",\n \"id\": 4\n }\n ],\n \"user_likes\": [\n {\n \"userId\": 1,\n \"bookmarkId\": 1,\n \"id\": 1\n },\n {\n \"userId\": 1,\n \"bookmarkId\": 6,\n \"id\": 4\n },\n {\n \"userId\": 1,\n \"bookmarkId\": 16,\n \"id\": 5\n },\n {\n \"userId\": 4,\n \"bookmarkId\": 9,\n \"id\": 6\n },\n {\n \"userId\": 4,\n \"bookmarkId\": 3,\n \"id\": 7\n },\n {\n \"userId\": 4,\n \"bookmarkId\": 20,\n \"id\": 8\n },\n {\n \"userId\": 4,\n \"bookmarkId\": 19,\n \"id\": 9\n },\n {\n \"userId\": 4,\n \"bookmarkId\": 13,\n \"id\": 10\n },\n {\n \"userId\": 4,\n \"bookmarkId\": 11,\n \"id\": 11\n },\n {\n \"userId\": 4,\n \"bookmarkId\": 12,\n \"id\": 12\n },\n {\n \"userId\": 4,\n \"bookmarkId\": 10,\n \"id\": 13\n },\n {\n \"userId\": 4,\n \"bookmarkId\": 18,\n \"id\": 14\n },\n {\n \"userId\": 4,\n \"bookmarkId\": 5,\n \"id\": 15\n },\n {\n \"userId\": 4,\n \"bookmarkId\": 4,\n \"id\": 16\n },\n {\n \"userId\": 4,\n \"bookmarkId\": 17,\n \"id\": 17\n },\n {\n \"userId\": 4,\n \"bookmarkId\": 15,\n \"id\": 18\n }\n ],\n \"user_bookmarks\": [\n {\n \"userId\": 1,\n \"bookmarkId\": 6,\n \"id\": 4\n },\n {\n \"userId\": 1,\n \"bookmarkId\": 16,\n \"id\": 5\n },\n {\n \"userId\": 4,\n \"bookmarkId\": 8,\n \"id\": 6\n },\n {\n \"userId\": 4,\n \"bookmarkId\": 7,\n \"id\": 7\n },\n {\n \"userId\": 4,\n \"bookmarkId\": 2,\n \"id\": 8\n },\n {\n \"userId\": 4,\n \"bookmarkId\": 19,\n \"id\": 9\n },\n {\n \"userId\": 4,\n \"bookmarkId\": 13,\n \"id\": 10\n },\n {\n \"userId\": 4,\n \"bookmarkId\": 11,\n \"id\": 11\n },\n {\n \"userId\": 4,\n \"bookmarkId\": 12,\n \"id\": 12\n },\n {\n \"userId\": 4,\n \"bookmarkId\": 14,\n \"id\": 13\n },\n {\n \"userId\": 4,\n \"bookmarkId\": 17,\n \"id\": 14\n },\n {\n \"userId\": 4,\n \"bookmarkId\": 5,\n \"id\": 15\n },\n {\n \"userId\": 4,\n \"bookmarkId\": 4,\n \"id\": 16\n },\n {\n \"userId\": 4,\n \"bookmarkId\": 3,\n \"id\": 17\n }\n ],\n \"bookmarks\": [\n {\n \"title\": \"Vue Docs\",\n \"url\": \"https://v3.vuejs.org\",\n \"categoryId\": 1,\n \"description\": \"Dünyanın en güzel framework'ü\",\n \"userId\": 1,\n \"created_at\": \"2021-08-26T18:57:24.821Z\",\n \"id\": 1\n },\n {\n \"title\": \"Frontend Masters\",\n \"url\": \"http://...\",\n \"categoryId\": 3,\n \"description\": \"Çok güzel bir kaynak..\",\n \"userId\": 1,\n \"created_at\": \"2021-08-26T19:00:35.404Z\",\n \"id\": 2\n },\n {\n \"title\": \"AWS\",\n \"url\": \"https:///aws\",\n \"categoryId\": 5,\n \"description\": \"çok güzel\",\n \"userId\": 1,\n \"created_at\": \"2021-08-26T19:01:12.447Z\",\n \"id\": 3\n },\n {\n \"title\": \"Güzel Müzikler\",\n \"url\": \"https://...\",\n \"categoryId\": 6,\n \"description\": \"çok güzel müzikler ama gerçekten çok güzel..\",\n \"userId\": 1,\n \"created_at\": \"2021-08-26T19:11:23.114Z\",\n \"id\": 4\n },\n {\n \"title\": \"Prototurk\",\n \"url\": \"https://prototurk.com\",\n \"categoryId\": 4,\n \"description\": \"Türkiyenin StackOverflow'u olacak bir sayfa.\",\n \"userId\": 2,\n \"created_at\": \"2021-08-26T19:43:24.698Z\",\n \"id\": 5\n },\n {\n \"title\": \"Marvel Filmleri\",\n \"url\": \"httpa://...\",\n \"categoryId\": 6,\n \"description\": \"bu serinin tamamını kesinlikle izle.\",\n \"userId\": 1,\n \"created_at\": \"2021-08-26T20:03:34.015Z\",\n \"id\": 6\n },\n {\n \"title\": \"Kablosuz Beyin\",\n \"url\": \"https://kablosuzbeyin.com\",\n \"categoryId\": 6,\n \"description\": \"Kablosuz Beyin etkinlikler için..\",\n \"userId\": 1,\n \"created_at\": \"2021-08-26T20:04:14.248Z\",\n \"id\": 7\n },\n {\n \"title\": \"Yeni Yer İmi\",\n \"url\": \"http://....\",\n \"categoryId\": 2,\n \"description\": \"aaaaa\",\n \"userId\": 1,\n \"created_at\": \"2021-09-01T18:31:14.532Z\",\n \"id\": 8\n },\n {\n \"title\": \"tttt\",\n \"url\": \"aaaaa\",\n \"categoryId\": 4,\n \"description\": \"ssssss\",\n \"userId\": 1,\n \"created_at\": \"2021-09-01T18:35:59.811Z\",\n \"id\": 9\n },\n {\n \"title\": \"TestS\",\n \"url\": \"http://...\",\n \"categoryId\": 1,\n \"description\": \"aaaaa\",\n \"userId\": 2,\n \"created_at\": \"2021-09-01T18:37:57.630Z\",\n \"id\": 10\n },\n {\n \"title\": \"denem\",\n \"url\": \"http\",\n \"categoryId\": 2,\n \"description\": \"asdadasdad\",\n \"userId\": 1,\n \"created_at\": \"2021-09-01T18:41:07.474Z\",\n \"id\": 11\n },\n {\n \"title\": \"New Test\",\n \"url\": \"http://\",\n \"categoryId\": 2,\n \"description\": \"aaaaaaa\",\n \"userId\": 2,\n \"created_at\": \"2021-09-01T18:45:30.984Z\",\n \"id\": 12\n },\n {\n \"title\": \"Deneme\",\n \"url\": \"http://\",\n \"categoryId\": 1,\n \"description\": \"aaaa\",\n \"userId\": 2,\n \"created_at\": \"2021-09-01T18:45:53.053Z\",\n \"id\": 13\n },\n {\n \"title\": \"yen\",\n \"url\": \"aaa\",\n \"categoryId\": 1,\n \"description\": \"sdfsdf\",\n \"userId\": 1,\n \"created_at\": \"2021-09-01T18:46:51.308Z\",\n \"id\": 14\n },\n {\n \"title\": \"deneme\",\n \"url\": \"aaaaa\",\n \"categoryId\": 3,\n \"description\": \"asdasd\",\n \"userId\": 1,\n \"created_at\": \"2021-09-01T18:51:28.380Z\",\n \"id\": 15\n },\n {\n \"title\": \"Can Sarıgöl Oyun\",\n \"url\": \"178....\",\n \"categoryId\": 1,\n \"description\": \"aaaaaaaaaaaa\",\n \"userId\": 2,\n \"created_at\": \"2021-09-01T18:52:14.559Z\",\n \"id\": 16\n },\n {\n \"title\": \"aaa\",\n \"url\": \"fdghfggh\",\n \"categoryId\": 3,\n \"description\": \"fghfghfh\",\n \"userId\": 1,\n \"created_at\": \"2021-09-01T18:52:35.170Z\",\n \"id\": 17\n },\n {\n \"title\": \"Vue3 Bootcamp\",\n \"url\": \"aaaa\",\n \"categoryId\": 5,\n \"description\": \"sdfsdfdsf\",\n \"userId\": 1,\n \"created_at\": \"2021-09-01T18:54:42.357Z\",\n \"id\": 18\n },\n {\n \"title\": \"Test\",\n \"url\": \"aaaa\",\n \"categoryId\": 3,\n \"description\": \"aaaaa\",\n \"userId\": 1,\n \"created_at\": \"2021-10-09T17:17:29.437Z\",\n \"id\": 19\n },\n {\n \"title\": \"Bu bir deneme\",\n \"url\": \"deneme mi\",\n \"categoryId\": 3,\n \"description\": \"sadfdsfdsfsfsfsfs\",\n \"userId\": 4,\n \"created_at\": \"2021-10-09T18:10:09.889Z\",\n \"id\": 20\n }\n ],\n \"categories\": [\n {\n \"name\": \"Vue.js\",\n \"id\": 1\n },\n {\n \"name\": \"React.js\",\n \"id\": 2\n },\n {\n \"name\": \"Frontend\",\n \"id\": 3\n },\n {\n \"name\": \"Backend\",\n \"id\": 4\n },\n {\n \"name\": \"Cloud\",\n \"id\": 5\n },\n {\n \"name\": \"Sosyal Yaşam\",\n \"id\": 6\n }\n ]\n}" }, { "path": "ders-12-socialmark-composition-api/client/package.json", "content": "{\n \"name\": \"ders-6-socialmark-uygulamasi\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"scripts\": {\n \"serve\": \"vue-cli-service serve\",\n \"build\": \"vue-cli-service build\",\n \"lint\": \"vue-cli-service lint\"\n },\n \"dependencies\": {\n \"axios\": \"^0.21.1\",\n \"core-js\": \"^3.6.5\",\n \"crypto-js\": \"^4.1.1\",\n \"secure-ls\": \"^1.2.6\",\n \"socket.io-client\": \"^4.2.0\",\n \"vue\": \"^3.0.0\",\n \"vue-router\": \"4\",\n \"vuex\": \"^4.0.2\",\n \"vuex-persistedstate\": \"^4.0.0\"\n },\n \"devDependencies\": {\n \"@vue/cli-plugin-babel\": \"~4.5.0\",\n \"@vue/cli-plugin-eslint\": \"~4.5.0\",\n \"@vue/cli-service\": \"~4.5.0\",\n \"@vue/compiler-sfc\": \"^3.0.0\",\n \"babel-eslint\": \"^10.1.0\",\n \"eslint\": \"^6.7.2\",\n \"eslint-plugin-vue\": \"^7.0.0\"\n },\n \"eslintConfig\": {\n \"root\": true,\n \"env\": {\n \"node\": true\n },\n \"extends\": [\n \"plugin:vue/vue3-essential\",\n \"eslint:recommended\"\n ],\n \"parserOptions\": {\n \"parser\": \"babel-eslint\"\n },\n \"rules\": {}\n },\n \"browserslist\": [\n \"> 1%\",\n \"last 2 versions\",\n \"not dead\"\n ]\n}\n" }, { "path": "ders-12-socialmark-composition-api/client/public/index.html", "content": "\n\n \n \n \n \n favicon.ico\" />\n <%= htmlWebpackPlugin.options.title %>\n \n \n \n
      \n \n \n\n" }, { "path": "ders-12-socialmark-composition-api/client/src/App.vue", "content": "\n" }, { "path": "ders-12-socialmark-composition-api/client/src/assets/style.css", "content": "/*! tailwindcss v2.2.7 | MIT License | https://tailwindcss.com */\n\n/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */\n\n/*\nDocument\n========\n*/\n\n/**\nUse a better box model (opinionated).\n*/\n\n*,\n::before,\n::after {\n box-sizing: border-box;\n}\n\n/**\nUse a more readable tab size (opinionated).\n*/\n\nhtml {\n -moz-tab-size: 4;\n -o-tab-size: 4;\n tab-size: 4;\n}\n\n/**\n1. Correct the line height in all browsers.\n2. Prevent adjustments of font size after orientation changes in iOS.\n*/\n\nhtml {\n line-height: 1.15;\n /* 1 */\n -webkit-text-size-adjust: 100%;\n /* 2 */\n}\n\n/*\nSections\n========\n*/\n\n/**\nRemove the margin in all browsers.\n*/\n\nbody {\n margin: 0;\n}\n\n/**\nImprove consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)\n*/\n\nbody {\n font-family:\n\t\tsystem-ui,\n\t\t-apple-system, /* Firefox supports this but not yet `system-ui` */\n\t\t'Segoe UI',\n\t\tRoboto,\n\t\tHelvetica,\n\t\tArial,\n\t\tsans-serif,\n\t\t'Apple Color Emoji',\n\t\t'Segoe UI Emoji';\n}\n\n/*\nGrouping content\n================\n*/\n\n/**\n1. Add the correct height in Firefox.\n2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)\n*/\n\nhr {\n height: 0;\n /* 1 */\n color: inherit;\n /* 2 */\n}\n\n/*\nText-level semantics\n====================\n*/\n\n/**\nAdd the correct text decoration in Chrome, Edge, and Safari.\n*/\n\nabbr[title] {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n}\n\n/**\nAdd the correct font weight in Edge and Safari.\n*/\n\nb,\nstrong {\n font-weight: bolder;\n}\n\n/**\n1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)\n2. Correct the odd 'em' font sizing in all browsers.\n*/\n\ncode,\nkbd,\nsamp,\npre {\n font-family:\n\t\tui-monospace,\n\t\tSFMono-Regular,\n\t\tConsolas,\n\t\t'Liberation Mono',\n\t\tMenlo,\n\t\tmonospace;\n /* 1 */\n font-size: 1em;\n /* 2 */\n}\n\n/**\nAdd the correct font size in all browsers.\n*/\n\nsmall {\n font-size: 80%;\n}\n\n/**\nPrevent 'sub' and 'sup' elements from affecting the line height in all browsers.\n*/\n\nsub,\nsup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n}\n\nsub {\n bottom: -0.25em;\n}\n\nsup {\n top: -0.5em;\n}\n\n/*\nTabular data\n============\n*/\n\n/**\n1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)\n2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)\n*/\n\ntable {\n text-indent: 0;\n /* 1 */\n border-color: inherit;\n /* 2 */\n}\n\n/*\nForms\n=====\n*/\n\n/**\n1. Change the font styles in all browsers.\n2. Remove the margin in Firefox and Safari.\n*/\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n font-family: inherit;\n /* 1 */\n font-size: 100%;\n /* 1 */\n line-height: 1.15;\n /* 1 */\n margin: 0;\n /* 2 */\n}\n\n/**\nRemove the inheritance of text transform in Edge and Firefox.\n1. Remove the inheritance of text transform in Firefox.\n*/\n\nbutton,\nselect {\n /* 1 */\n text-transform: none;\n}\n\n/**\nCorrect the inability to style clickable types in iOS and Safari.\n*/\n\nbutton,\n[type='button'],\n[type='reset'],\n[type='submit'] {\n -webkit-appearance: button;\n}\n\n/**\nRemove the inner border and padding in Firefox.\n*/\n\n::-moz-focus-inner {\n border-style: none;\n padding: 0;\n}\n\n/**\nRestore the focus styles unset by the previous rule.\n*/\n\n:-moz-focusring {\n outline: 1px dotted ButtonText;\n}\n\n/**\nRemove the additional ':invalid' styles in Firefox.\nSee: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737\n*/\n\n:-moz-ui-invalid {\n box-shadow: none;\n}\n\n/**\nRemove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.\n*/\n\nlegend {\n padding: 0;\n}\n\n/**\nAdd the correct vertical alignment in Chrome and Firefox.\n*/\n\nprogress {\n vertical-align: baseline;\n}\n\n/**\nCorrect the cursor style of increment and decrement buttons in Safari.\n*/\n\n::-webkit-inner-spin-button,\n::-webkit-outer-spin-button {\n height: auto;\n}\n\n/**\n1. Correct the odd appearance in Chrome and Safari.\n2. Correct the outline style in Safari.\n*/\n\n[type='search'] {\n -webkit-appearance: textfield;\n /* 1 */\n outline-offset: -2px;\n /* 2 */\n}\n\n/**\nRemove the inner padding in Chrome and Safari on macOS.\n*/\n\n::-webkit-search-decoration {\n -webkit-appearance: none;\n}\n\n/**\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Change font properties to 'inherit' in Safari.\n*/\n\n::-webkit-file-upload-button {\n -webkit-appearance: button;\n /* 1 */\n font: inherit;\n /* 2 */\n}\n\n/*\nInteractive\n===========\n*/\n\n/*\nAdd the correct display in Chrome and Safari.\n*/\n\nsummary {\n display: list-item;\n}\n\n/**\n * Manually forked from SUIT CSS Base: https://github.com/suitcss/base\n * A thin layer on top of normalize.css that provides a starting point more\n * suitable for web applications.\n */\n\n/**\n * Removes the default spacing and border for appropriate elements.\n */\n\nblockquote,\ndl,\ndd,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nhr,\nfigure,\np,\npre {\n margin: 0;\n}\n\nbutton {\n background-color: transparent;\n background-image: none;\n}\n\nfieldset {\n margin: 0;\n padding: 0;\n}\n\nol,\nul {\n list-style: none;\n margin: 0;\n padding: 0;\n}\n\n/**\n * Tailwind custom reset styles\n */\n\n/**\n * 1. Use the user's configured `sans` font-family (with Tailwind's default\n * sans-serif font stack as a fallback) as a sane default.\n * 2. Use Tailwind's default \"normal\" line-height so the user isn't forced\n * to override it to ensure consistency even when using the default theme.\n */\n\nhtml {\n font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n /* 1 */\n line-height: 1.5;\n /* 2 */\n}\n\n/**\n * Inherit font-family and line-height from `html` so users can set them as\n * a class directly on the `html` element.\n */\n\nbody {\n font-family: inherit;\n line-height: inherit;\n}\n\n/**\n * 1. Prevent padding and border from affecting element width.\n *\n * We used to set this in the html element and inherit from\n * the parent element for everything else. This caused issues\n * in shadow-dom-enhanced elements like
      where the content\n * is wrapped by a div with box-sizing set to `content-box`.\n *\n * https://github.com/mozdevs/cssremedy/issues/4\n *\n *\n * 2. Allow adding a border to an element by just adding a border-width.\n *\n * By default, the way the browser specifies that an element should have no\n * border is by setting it's border-style to `none` in the user-agent\n * stylesheet.\n *\n * In order to easily add borders to elements by just setting the `border-width`\n * property, we change the default border-style for all elements to `solid`, and\n * use border-width to hide them instead. This way our `border` utilities only\n * need to set the `border-width` property instead of the entire `border`\n * shorthand, making our border utilities much more straightforward to compose.\n *\n * https://github.com/tailwindcss/tailwindcss/pull/116\n */\n\n*,\n::before,\n::after {\n box-sizing: border-box;\n /* 1 */\n border-width: 0;\n /* 2 */\n border-style: solid;\n /* 2 */\n border-color: currentColor;\n /* 2 */\n}\n\n/*\n * Ensure horizontal rules are visible by default\n */\n\nhr {\n border-top-width: 1px;\n}\n\n/**\n * Undo the `border-style: none` reset that Normalize applies to images so that\n * our `border-{width}` utilities have the expected effect.\n *\n * The Normalize reset is unnecessary for us since we default the border-width\n * to 0 on all elements.\n *\n * https://github.com/tailwindcss/tailwindcss/issues/362\n */\n\nimg {\n border-style: solid;\n}\n\ntextarea {\n resize: vertical;\n}\n\ninput::-moz-placeholder, textarea::-moz-placeholder {\n opacity: 1;\n color: #9ca3af;\n}\n\ninput:-ms-input-placeholder, textarea:-ms-input-placeholder {\n opacity: 1;\n color: #9ca3af;\n}\n\ninput::placeholder,\ntextarea::placeholder {\n opacity: 1;\n color: #9ca3af;\n}\n\nbutton,\n[role=\"button\"] {\n cursor: pointer;\n}\n\ntable {\n border-collapse: collapse;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n font-size: inherit;\n font-weight: inherit;\n}\n\n/**\n * Reset links to optimize for opt-in styling instead of\n * opt-out.\n */\n\na {\n color: inherit;\n text-decoration: inherit;\n}\n\n/**\n * Reset form element properties that are easy to forget to\n * style explicitly so you don't inadvertently introduce\n * styles that deviate from your design system. These styles\n * supplement a partial reset that is already applied by\n * normalize.css.\n */\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n padding: 0;\n line-height: inherit;\n color: inherit;\n}\n\n/**\n * Use the configured 'mono' font family for elements that\n * are expected to be rendered with a monospace font, falling\n * back to the system monospace stack if there is no configured\n * 'mono' font family.\n */\n\npre,\ncode,\nkbd,\nsamp {\n font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n}\n\n/**\n * 1. Make replaced elements `display: block` by default as that's\n * the behavior you want almost all of the time. Inspired by\n * CSS Remedy, with `svg` added as well.\n *\n * https://github.com/mozdevs/cssremedy/issues/14\n * \n * 2. Add `vertical-align: middle` to align replaced elements more\n * sensibly by default when overriding `display` by adding a\n * utility like `inline`.\n *\n * This can trigger a poorly considered linting error in some\n * tools but is included by design.\n * \n * https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210\n */\n\nimg,\nsvg,\nvideo,\ncanvas,\naudio,\niframe,\nembed,\nobject {\n display: block;\n /* 1 */\n vertical-align: middle;\n /* 2 */\n}\n\n/**\n * Constrain images and videos to the parent width and preserve\n * their intrinsic aspect ratio.\n *\n * https://github.com/mozdevs/cssremedy/issues/14\n */\n\nimg,\nvideo {\n max-width: 100%;\n height: auto;\n}\n\n/**\n * Ensure the default browser behavior of the `hidden` attribute.\n */\n\n[hidden] {\n display: none;\n}\n\n*, ::before, ::after {\n --tw-border-opacity: 1;\n border-color: rgba(229, 231, 235, var(--tw-border-opacity));\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n --tw-shadow: 0 0 #0000;\n}\n\n.like-btn {\n display: flex;\n height: 2.5rem;\n width: 2.5rem;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n border-radius: 0.375rem;\n padding: 0.5rem;\n}\n\n.like-btn:hover {\n --tw-bg-opacity: 1;\n background-color: rgba(165, 180, 252, var(--tw-bg-opacity));\n}\n\n.like-item-active {\n --tw-bg-opacity: 1;\n background-color: rgba(199, 210, 254, var(--tw-bg-opacity));\n --tw-text-opacity: 1;\n color: rgba(55, 48, 163, var(--tw-text-opacity));\n}\n\n.bookmark-btn {\n display: flex;\n height: 2.5rem;\n width: 2.5rem;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n border-radius: 0.375rem;\n padding: 0.5rem;\n}\n\n.bookmark-btn:hover {\n --tw-bg-opacity: 1;\n background-color: rgba(252, 165, 165, var(--tw-bg-opacity));\n}\n\n.bookmark-item-active {\n --tw-bg-opacity: 1;\n background-color: rgba(254, 202, 202, var(--tw-bg-opacity));\n --tw-text-opacity: 1;\n color: rgba(153, 27, 27, var(--tw-text-opacity));\n}\n\n.details-btn {\n display: flex;\n height: 2.5rem;\n width: 2.5rem;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n border-radius: 0.375rem;\n padding: 0.5rem;\n}\n\n.details-btn:hover {\n --tw-bg-opacity: 1;\n background-color: rgba(229, 231, 235, var(--tw-bg-opacity));\n}\n\n.group:focus-within .details-btn {\n --tw-bg-opacity: 1;\n background-color: rgba(209, 213, 219, var(--tw-bg-opacity));\n}\n\n.sidebar {\n display: flex;\n height: 100vh;\n width: 15rem;\n flex-shrink: 0;\n flex-direction: column;\n border-right-width: 1px;\n --tw-border-opacity: 1;\n border-color: rgba(229, 231, 235, var(--tw-border-opacity));\n --tw-bg-opacity: 1;\n background-color: rgba(255, 255, 255, var(--tw-bg-opacity));\n}\n\n.details-container {\n visibility: hidden;\n position: absolute;\n right: 0px;\n top: 100%;\n z-index: 10 !important;\n height: 10rem;\n width: 15rem;\n overflow-y: scroll;\n border-radius: 0.375rem;\n border-width: 1px;\n --tw-border-opacity: 1;\n border-color: rgba(209, 213, 219, var(--tw-border-opacity));\n --tw-bg-opacity: 1;\n background-color: rgba(255, 255, 255, var(--tw-bg-opacity));\n padding: 0.75rem;\n text-align: left;\n --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.group:focus-within .details-container {\n visibility: visible;\n}\n\n.group:hover .details-container {\n visibility: visible;\n}\n\n.header-container {\n display: flex;\n height: 4rem;\n width: 100%;\n align-items: center;\n justify-content: center;\n border-bottom-width: 1px;\n --tw-border-opacity: 1;\n border-color: rgba(229, 231, 235, var(--tw-border-opacity));\n --tw-bg-opacity: 1;\n background-color: rgba(255, 255, 255, var(--tw-bg-opacity));\n}\n\n.navbar-item {\n border-radius: 0.5rem;\n border-width: 1px;\n --tw-border-opacity: 1;\n border-color: rgba(107, 114, 128, var(--tw-border-opacity));\n padding: 0.5rem;\n --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n transition-property: background-color, border-color, color, fill, stroke;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n\n.navbar-item:hover {\n --tw-bg-opacity: 1;\n background-color: rgba(0, 0, 0, var(--tw-bg-opacity));\n --tw-text-opacity: 1;\n color: rgba(255, 255, 255, var(--tw-text-opacity));\n}\n\n.menu-item {\n display: flex;\n border-radius: 0.375rem;\n padding: 0.5rem;\n}\n\n.menu-item:hover {\n --tw-bg-opacity: 1;\n background-color: rgba(0, 0, 0, var(--tw-bg-opacity));\n --tw-text-opacity: 1;\n color: rgba(255, 255, 255, var(--tw-text-opacity));\n}\n\n.sidebar-item {\n display: flex;\n --tw-bg-opacity: 1;\n background-color: rgba(255, 255, 255, var(--tw-bg-opacity));\n padding: 0.5rem;\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n padding-top: 0.75rem;\n padding-bottom: 0.75rem;\n --tw-text-opacity: 1;\n color: rgba(107, 114, 128, var(--tw-text-opacity));\n}\n\n.sidebar-item:hover {\n --tw-bg-opacity: 1;\n background-color: rgba(0, 0, 0, var(--tw-bg-opacity));\n --tw-text-opacity: 1;\n color: rgba(255, 255, 255, var(--tw-text-opacity));\n}\n\n.login_register_container {\n position: absolute;\n top: 50%;\n left: 50%;\n margin: auto;\n display: flex;\n width: 91.666667%;\n transform: translate(-50%, -50%);\n flex-direction: column;\n border-radius: 0.375rem;\n border-width: 1px;\n --tw-border-opacity: 1;\n border-color: rgba(209, 213, 219, var(--tw-border-opacity));\n --tw-bg-opacity: 1;\n background-color: rgba(255, 255, 255, var(--tw-bg-opacity));\n padding: 0.75rem;\n --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n@media (min-width: 640px) {\n .login_register_container {\n width: 50%;\n }\n}\n\n@media (min-width: 768px) {\n .login_register_container {\n width: 33.333333%;\n }\n}\n\n@media (min-width: 1024px) {\n .login_register_container {\n width: 25%;\n }\n}\n\n.input {\n border-radius: 0.125rem;\n border-width: 1px;\n --tw-border-opacity: 1;\n border-color: rgba(209, 213, 219, var(--tw-border-opacity));\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n outline: 2px solid transparent;\n outline-offset: 2px;\n}\n\n.input:focus {\n --tw-border-opacity: 1;\n border-color: rgba(0, 0, 0, var(--tw-border-opacity));\n}\n\n.default-button {\n border-radius: 0.375rem;\n --tw-bg-opacity: 1;\n background-color: rgba(55, 65, 81, var(--tw-bg-opacity));\n padding: 0.5rem;\n --tw-text-opacity: 1;\n color: rgba(255, 255, 255, var(--tw-text-opacity));\n}\n\n.default-button:hover {\n --tw-bg-opacity: 1;\n background-color: rgba(0, 0, 0, var(--tw-bg-opacity));\n}\n\n.secondary-button {\n border-radius: 0.375rem;\n --tw-bg-opacity: 1;\n background-color: rgba(107, 114, 128, var(--tw-bg-opacity));\n padding: 0.5rem;\n --tw-text-opacity: 1;\n color: rgba(255, 255, 255, var(--tw-text-opacity));\n}\n\n.secondary-button:hover {\n --tw-bg-opacity: 1;\n background-color: rgba(75, 85, 99, var(--tw-bg-opacity));\n}\n\n.invisible {\n visibility: hidden;\n}\n\n.absolute {\n position: absolute;\n}\n\n.relative {\n position: relative;\n}\n\n.top-full {\n top: 100%;\n}\n\n.right-0 {\n right: 0px;\n}\n\n.\\!z-10 {\n z-index: 10 !important;\n}\n\n.mx-auto {\n margin-left: auto;\n margin-right: auto;\n}\n\n.mr-2 {\n margin-right: 0.5rem;\n}\n\n.mr-3 {\n margin-right: 0.75rem;\n}\n\n.ml-auto {\n margin-left: auto;\n}\n\n.mb-2 {\n margin-bottom: 0.5rem;\n}\n\n.mr-1 {\n margin-right: 0.25rem;\n}\n\n.mb-3 {\n margin-bottom: 0.75rem;\n}\n\n.mb-1 {\n margin-bottom: 0.25rem;\n}\n\n.mt-2 {\n margin-top: 0.5rem;\n}\n\n.mt-3 {\n margin-top: 0.75rem;\n}\n\n.flex {\n display: flex;\n}\n\n.grid {\n display: grid;\n}\n\n.hidden {\n display: none;\n}\n\n.h-16 {\n height: 4rem;\n}\n\n.h-8 {\n height: 2rem;\n}\n\n.h-\\[100vh\\] {\n height: 100vh;\n}\n\n.h-10 {\n height: 2.5rem;\n}\n\n.h-40 {\n height: 10rem;\n}\n\n.w-full {\n width: 100%;\n}\n\n.w-8 {\n width: 2rem;\n}\n\n.w-56 {\n width: 14rem;\n}\n\n.w-60 {\n width: 15rem;\n}\n\n.w-1\\/4 {\n width: 25%;\n}\n\n.w-10 {\n width: 2.5rem;\n}\n\n.flex-shrink-0 {\n flex-shrink: 0;\n}\n\n.grid-cols-8 {\n grid-template-columns: repeat(8, minmax(0, 1fr));\n}\n\n.flex-row {\n flex-direction: row;\n}\n\n.flex-col {\n flex-direction: column;\n}\n\n.items-center {\n align-items: center;\n}\n\n.justify-end {\n justify-content: flex-end;\n}\n\n.justify-center {\n justify-content: center;\n}\n\n.justify-between {\n justify-content: space-between;\n}\n\n.gap-4 {\n gap: 1rem;\n}\n\n.gap-x-3 {\n -moz-column-gap: 0.75rem;\n column-gap: 0.75rem;\n}\n\n.gap-x-1 {\n -moz-column-gap: 0.25rem;\n column-gap: 0.25rem;\n}\n\n.overflow-x-hidden {\n overflow-x: hidden;\n}\n\n.overflow-y-scroll {\n overflow-y: scroll;\n}\n\n.rounded-sm {\n border-radius: 0.125rem;\n}\n\n.rounded-md {\n border-radius: 0.375rem;\n}\n\n.border-\\[1px\\] {\n border-width: 1px;\n}\n\n.border-b-\\[1px\\] {\n border-bottom-width: 1px;\n}\n\n.border-r-\\[1px\\] {\n border-right-width: 1px;\n}\n\n.border-gray-200 {\n --tw-border-opacity: 1;\n border-color: rgba(229, 231, 235, var(--tw-border-opacity));\n}\n\n.border-gray-300 {\n --tw-border-opacity: 1;\n border-color: rgba(209, 213, 219, var(--tw-border-opacity));\n}\n\n.bg-gray-100 {\n --tw-bg-opacity: 1;\n background-color: rgba(243, 244, 246, var(--tw-bg-opacity));\n}\n\n.bg-white {\n --tw-bg-opacity: 1;\n background-color: rgba(255, 255, 255, var(--tw-bg-opacity));\n}\n\n.bg-gray-700 {\n --tw-bg-opacity: 1;\n background-color: rgba(55, 65, 81, var(--tw-bg-opacity));\n}\n\n.bg-red-200 {\n --tw-bg-opacity: 1;\n background-color: rgba(254, 202, 202, var(--tw-bg-opacity));\n}\n\n.fill-current {\n fill: currentColor;\n}\n\n.p-2 {\n padding: 0.5rem;\n}\n\n.p-3 {\n padding: 0.75rem;\n}\n\n.p-1 {\n padding: 0.25rem;\n}\n\n.px-2 {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n}\n\n.px-3 {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n\n.py-1 {\n padding-top: 0.25rem;\n padding-bottom: 0.25rem;\n}\n\n.text-left {\n text-align: left;\n}\n\n.text-center {\n text-align: center;\n}\n\n.text-xl {\n font-size: 1.25rem;\n line-height: 1.75rem;\n}\n\n.text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n\n.text-2xl {\n font-size: 1.5rem;\n line-height: 2rem;\n}\n\n.text-xs {\n font-size: 0.75rem;\n line-height: 1rem;\n}\n\n.font-bold {\n font-weight: 700;\n}\n\n.text-white {\n --tw-text-opacity: 1;\n color: rgba(255, 255, 255, var(--tw-text-opacity));\n}\n\n.text-gray-600 {\n --tw-text-opacity: 1;\n color: rgba(75, 85, 99, var(--tw-text-opacity));\n}\n\n.text-gray-400 {\n --tw-text-opacity: 1;\n color: rgba(156, 163, 175, var(--tw-text-opacity));\n}\n\n.text-red-900 {\n --tw-text-opacity: 1;\n color: rgba(127, 29, 29, var(--tw-text-opacity));\n}\n\n.shadow-md {\n --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.shadow-sm {\n --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.shadow-lg {\n --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.transition-colors {\n transition-property: background-color, border-color, color, fill, stroke;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n\n.duration-500 {\n transition-duration: 500ms;\n}\n\n.hover\\:bg-black:hover {\n --tw-bg-opacity: 1;\n background-color: rgba(0, 0, 0, var(--tw-bg-opacity));\n}\n\n.hover\\:bg-gray-200:hover {\n --tw-bg-opacity: 1;\n background-color: rgba(229, 231, 235, var(--tw-bg-opacity));\n}\n\n.hover\\:bg-indigo-300:hover {\n --tw-bg-opacity: 1;\n background-color: rgba(165, 180, 252, var(--tw-bg-opacity));\n}\n\n.hover\\:text-black:hover {\n --tw-text-opacity: 1;\n color: rgba(0, 0, 0, var(--tw-text-opacity));\n}\n\n.group:focus-within .group-focus-within\\:visible {\n visibility: visible;\n}\n\n.group:focus-within .group-focus-within\\:bg-gray-300 {\n --tw-bg-opacity: 1;\n background-color: rgba(209, 213, 219, var(--tw-bg-opacity));\n}\n\n.group:hover .group-hover\\:visible {\n visibility: visible;\n}\n\n.group:hover .group-hover\\:text-white {\n --tw-text-opacity: 1;\n color: rgba(255, 255, 255, var(--tw-text-opacity));\n}\n\n.group:hover .group-hover\\:text-gray-700 {\n --tw-text-opacity: 1;\n color: rgba(55, 65, 81, var(--tw-text-opacity));\n}\n\n@media (min-width: 640px) {\n .sm\\:grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n}\n\n@media (min-width: 768px) {\n .md\\:grid-cols-4 {\n grid-template-columns: repeat(4, minmax(0, 1fr));\n }\n}\n\n@media (min-width: 1024px) {\n .lg\\:grid-cols-5 {\n grid-template-columns: repeat(5, minmax(0, 1fr));\n }\n}\n\n@media (min-width: 1280px) {\n .xl\\:grid-cols-6 {\n grid-template-columns: repeat(6, minmax(0, 1fr));\n }\n}\n\n@media (min-width: 1536px) {\n .\\32xl\\:grid-cols-8 {\n grid-template-columns: repeat(8, minmax(0, 1fr));\n }\n}\n" }, { "path": "ders-12-socialmark-composition-api/client/src/components/Account/sideBar.vue", "content": "\n" }, { "path": "ders-12-socialmark-composition-api/client/src/components/Home/Sidebar.vue", "content": "\n\n\n" }, { "path": "ders-12-socialmark-composition-api/client/src/components/Shared/appBookmarkList/BookmarkListItem copy.vue", "content": "\n\n" }, { "path": "ders-12-socialmark-composition-api/client/src/components/Shared/appBookmarkList/BookmarkListItem.vue", "content": "\n\n\n" }, { "path": "ders-12-socialmark-composition-api/client/src/components/Shared/appBookmarkList/index.vue", "content": "\n\n" }, { "path": "ders-12-socialmark-composition-api/client/src/components/Shared/appHeader.vue", "content": "\n\n\n" }, { "path": "ders-12-socialmark-composition-api/client/src/composables/BookmarkListItem.js", "content": "import { inject, computed } from \"vue\";\nimport { useStore } from \"vuex\";\nexport default function(item) {\n const store = useStore();\n const appAxios = inject(\"appAxios\");\n\n const likeItem = () => {\n appAxios({\n url: alreadyLiked.value ? `/user_likes/${likedItem.value.id}` : \"/user_likes\",\n method: alreadyLiked.value ? \"DELETE\" : \"POST\",\n data: {\n userId: _getCurrentUser.value.id,\n bookmarkId: item.id\n }\n }).then(user_like_response => {\n let bookmarks = [..._userLikes.value];\n if (alreadyLiked.value) {\n bookmarks = bookmarks.filter(b => b.id !== likedItem.value.id);\n } else {\n bookmarks = [...bookmarks, user_like_response.data];\n }\n store.commit(\"setLikes\", bookmarks);\n });\n };\n const bookmarkItem = () => {\n appAxios({\n url: alreadyBookmarked.value ? `/user_bookmarks/${bookmarkedItem.value.id}` : \"/user_bookmarks\",\n method: alreadyBookmarked.value ? \"DELETE\" : \"POST\",\n data: {\n userId: _getCurrentUser.value.id,\n bookmarkId: item.id\n }\n }).then(user_bookmark_response => {\n let bookmarks = [..._userBookmarks.value];\n if (alreadyBookmarked.value) {\n bookmarks = bookmarks.filter(b => b.id !== bookmarkedItem.value.id);\n } else {\n bookmarks = [...bookmarks, user_bookmark_response.data];\n }\n store.commit(\"setBookmarks\", bookmarks);\n });\n };\n const categoryName = computed(() => item?.category?.name || \"-\");\n const userName = computed(() => item?.user?.fullname || \"-\");\n const alreadyLiked = computed(() => Boolean(likedItem.value));\n const alreadyBookmarked = computed(() => Boolean(bookmarkedItem.value));\n\n const bookmarkedItem = computed(() => _userBookmarks.value?.find(b => b.bookmarkId === item.id));\n const likedItem = computed(() => _userLikes.value?.find(b => b.bookmarkId === item.id));\n const _getCurrentUser = computed(() => store.getters._getCurrentUser);\n const _userLikes = computed(() => store.getters._userLikes);\n const _userBookmarks = computed(() => store.getters._userBookmarks);\n\n return { likeItem, bookmarkItem, categoryName, userName, alreadyBookmarked, alreadyLiked, bookmarkedItem, likedItem, _getCurrentUser, _userBookmarks, _userLikes };\n}\n" }, { "path": "ders-12-socialmark-composition-api/client/src/main.js", "content": "import { createApp } from \"vue\";\nimport App from \"./App.vue\";\nimport router from \"./router\";\nimport store from \"./store\";\nimport { appAxios } from \"@/utils/appAxios\";\nimport \"@/assets/style.css\";\n\nimport appHeader from \"@/components/Shared/appHeader\";\nimport appBookmarkList from \"@/components/Shared/appBookmarkList\";\n\nimport io from \"socket.io-client\";\nconst socket = io(\"http://localhost:2018\");\n\nconst app = createApp(App);\napp.component(\"AppHeader\", appHeader);\napp.component(\"appBookmarkList\", appBookmarkList);\napp.use(router);\napp.use(store);\napp.config.globalProperties.$log = console.log;\napp.config.globalProperties.$appAxios = appAxios;\n// app.config.globalProperties.$socket = socket;\napp.provide(\"socket\", socket);\napp.provide(\"appAxios\", appAxios);\napp.mount(\"#app\");\n" }, { "path": "ders-12-socialmark-composition-api/client/src/router/index.js", "content": "import { createRouter, createWebHashHistory } from \"vue-router\";\nimport store from \"../store\";\nconst routes = [\n {\n name: \"HomePage\",\n path: \"/\",\n component: () => import(\"@/views/Home\")\n },\n {\n name: \"LoginPage\",\n path: \"/login\",\n component: () => import(\"@/views/Login\")\n },\n {\n name: \"RegisterPage\",\n path: \"/register\",\n component: () => import(\"@/views/Register\")\n },\n {\n name: \"NewBookmarkPage\",\n path: \"/new\",\n component: () => import(\"@/views/NewBookmark\")\n },\n {\n name: \"Favorites\",\n path: \"/favorites\",\n meta: {\n componentName: \"appBookmarkList\"\n },\n component: () => import(\"@/views/Account\")\n },\n {\n name: \"Likes\",\n path: \"/likes\",\n meta: {\n componentName: \"appBookmarkList\"\n },\n component: () => import(\"@/views/Account\")\n },\n {\n name: \"Settings\",\n path: \"/settings\",\n meta: {\n componentName: \"userSettings\"\n },\n component: () => import(\"@/views/Account\")\n }\n];\n\nconst router = createRouter({\n routes,\n history: createWebHashHistory()\n});\n\nrouter.beforeEach((to, _, next) => {\n const authRequiredRoutes = [\"HomePage\"];\n const authNotRequiredRoutes = [\"LoginPage\", \"RegisterPage\"];\n const _isAuthenticated = store.getters._isAuthenticated;\n\n if (authNotRequiredRoutes.indexOf(to.name) > -1 && _isAuthenticated) next(false);\n\n if (authRequiredRoutes.indexOf(to.name) > -1) {\n if (_isAuthenticated) next();\n else next({ name: \"LoginPage\" });\n } else {\n next();\n }\n});\n\nexport default router;\n" }, { "path": "ders-12-socialmark-composition-api/client/src/store/index.js", "content": "import { createStore } from \"vuex\";\nimport createPersistedState from \"vuex-persistedstate\";\n\nimport SecureLS from \"secure-ls\";\nvar ls = new SecureLS({ isCompression: false });\n\nexport default createStore({\n state: {\n user: null,\n saltKey: \"booklike123!456?\"\n },\n mutations: {\n setUser(state, user) {\n console.log(\"user :>> \", user);\n state.user = user;\n },\n logoutUser(state) {\n state.user = null;\n },\n setLikes(state, bookmarkIds) {\n state.user.likes = bookmarkIds;\n },\n setBookmarks(state, bookmarkIds) {\n state.user.bookmarks = bookmarkIds;\n }\n },\n getters: {\n _isAuthenticated: state => state.user !== null,\n _getCurrentUser(state) {\n const user = state.user;\n // if(user !== null && user.hasOwnProperty(\"password\")){\n // delete user.password;\n // }\n delete user?.password;\n return user;\n },\n _userLikes: state => state.user?.likes || [],\n _userBookmarks: state => state.user?.bookmarks || [],\n _currentUserId: state => state?.user?.id,\n _saltKey: state => state.saltKey\n },\n plugins: [\n createPersistedState({\n storage: {\n getItem: key => ls.get(key),\n setItem: (key, value) => ls.set(key, value),\n removeItem: key => ls.remove(key)\n }\n })\n ]\n});\n" }, { "path": "ders-12-socialmark-composition-api/client/src/utils/appAxios.js", "content": "import axios from \"axios\";\nexport const appAxios = axios.create({\n baseURL: \"http://localhost:3000\"\n});\n" }, { "path": "ders-12-socialmark-composition-api/client/src/views/Account.vue", "content": "\n\n\n" }, { "path": "ders-12-socialmark-composition-api/client/src/views/Favorites.vue", "content": "" }, { "path": "ders-12-socialmark-composition-api/client/src/views/Home.vue", "content": "\n\n" }, { "path": "ders-12-socialmark-composition-api/client/src/views/Login.vue", "content": "\n\n" }, { "path": "ders-12-socialmark-composition-api/client/src/views/NewBookmark.vue", "content": "\n\n" }, { "path": "ders-12-socialmark-composition-api/client/src/views/Register.vue", "content": "\n\n" }, { "path": "ders-12-socialmark-composition-api/server/app.js", "content": "const socketio = require(\"socket.io\");\nconst express = require(\"express\");\nconst http = require(\"http\");\nconst app = express();\n\nconst PORT = process.env.PORT || 2018;\n\nconst server = http.createServer(app);\n\nconst io = socketio(server, {\n cors: {\n origin: \"*\",\n methods: [\"GET\", \"POST\", \"OPTIONS\"]\n }\n});\n\nserver.listen(PORT, () => {\n io.on(\"connection\", socket => {\n console.log(\"HOPPAAAAAAAA\");\n console.log(socket.id);\n //! Karşılama Mesajı Gönder...\n // io.in(roomID).emit()\n socket.emit(\"WELCOME_MESSAGE\", `Oooooo ${socket.id} kardeşim ojgeldin be yaa...`);\n socket.on(\"NEW_BOOKMARK_EVENT\", bookmark => {\n console.log(\"bookmark :>> \", bookmark);\n // io.emit(\"NEW_BOOKMARK_ADDED\", bookmark);\n //! Gonderen hariç herkese bookmark bilgisini gonder..\n socket.broadcast.emit(\"NEW_BOOKMARK_ADDED\", bookmark);\n });\n });\n});\n" }, { "path": "ders-12-socialmark-composition-api/server/package.json", "content": "{\n \"name\": \"server\",\n \"version\": \"1.0.0\",\n \"description\": \"\",\n \"main\": \"index.js\",\n \"scripts\": {\n \"start\": \"nodemon app.js\",\n \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\n },\n \"keywords\": [],\n \"author\": \"\",\n \"license\": \"ISC\",\n \"dependencies\": {\n \"cors\": \"^2.8.5\",\n \"express\": \"^4.17.1\",\n \"socket.io\": \"^4.2.0\"\n },\n \"devDependencies\": {\n \"nodemon\": \"^2.0.12\"\n }\n}" }, { "path": "ders-12-socialmark-composition-api/tema/.prettierrc", "content": "{\n \"printWidth\": 500\n}" }, { "path": "ders-12-socialmark-composition-api/tema/account.html", "content": "\n\n \n \n \n \n Document\n \n \n \n \n \n
      \n \n
      \n
      \n \n \n \n\n \n
      \n

      Hesabım

      \n \n \n \n \n
      \n
      \n \n \n\n" }, { "path": "ders-12-socialmark-composition-api/tema/assets/app.js", "content": "const app = Vue.createApp({}).mount(\"#app\");\n" }, { "path": "ders-12-socialmark-composition-api/tema/assets/style.css", "content": "/*! tailwindcss v2.2.7 | MIT License | https://tailwindcss.com */\n\n/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */\n\n/*\nDocument\n========\n*/\n\n/**\nUse a better box model (opinionated).\n*/\n\n*,\n::before,\n::after {\n box-sizing: border-box;\n}\n\n/**\nUse a more readable tab size (opinionated).\n*/\n\nhtml {\n -moz-tab-size: 4;\n -o-tab-size: 4;\n tab-size: 4;\n}\n\n/**\n1. Correct the line height in all browsers.\n2. Prevent adjustments of font size after orientation changes in iOS.\n*/\n\nhtml {\n line-height: 1.15;\n /* 1 */\n -webkit-text-size-adjust: 100%;\n /* 2 */\n}\n\n/*\nSections\n========\n*/\n\n/**\nRemove the margin in all browsers.\n*/\n\nbody {\n margin: 0;\n}\n\n/**\nImprove consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)\n*/\n\nbody {\n font-family:\n\t\tsystem-ui,\n\t\t-apple-system, /* Firefox supports this but not yet `system-ui` */\n\t\t'Segoe UI',\n\t\tRoboto,\n\t\tHelvetica,\n\t\tArial,\n\t\tsans-serif,\n\t\t'Apple Color Emoji',\n\t\t'Segoe UI Emoji';\n}\n\n/*\nGrouping content\n================\n*/\n\n/**\n1. Add the correct height in Firefox.\n2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)\n*/\n\nhr {\n height: 0;\n /* 1 */\n color: inherit;\n /* 2 */\n}\n\n/*\nText-level semantics\n====================\n*/\n\n/**\nAdd the correct text decoration in Chrome, Edge, and Safari.\n*/\n\nabbr[title] {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n}\n\n/**\nAdd the correct font weight in Edge and Safari.\n*/\n\nb,\nstrong {\n font-weight: bolder;\n}\n\n/**\n1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)\n2. Correct the odd 'em' font sizing in all browsers.\n*/\n\ncode,\nkbd,\nsamp,\npre {\n font-family:\n\t\tui-monospace,\n\t\tSFMono-Regular,\n\t\tConsolas,\n\t\t'Liberation Mono',\n\t\tMenlo,\n\t\tmonospace;\n /* 1 */\n font-size: 1em;\n /* 2 */\n}\n\n/**\nAdd the correct font size in all browsers.\n*/\n\nsmall {\n font-size: 80%;\n}\n\n/**\nPrevent 'sub' and 'sup' elements from affecting the line height in all browsers.\n*/\n\nsub,\nsup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n}\n\nsub {\n bottom: -0.25em;\n}\n\nsup {\n top: -0.5em;\n}\n\n/*\nTabular data\n============\n*/\n\n/**\n1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)\n2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)\n*/\n\ntable {\n text-indent: 0;\n /* 1 */\n border-color: inherit;\n /* 2 */\n}\n\n/*\nForms\n=====\n*/\n\n/**\n1. Change the font styles in all browsers.\n2. Remove the margin in Firefox and Safari.\n*/\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n font-family: inherit;\n /* 1 */\n font-size: 100%;\n /* 1 */\n line-height: 1.15;\n /* 1 */\n margin: 0;\n /* 2 */\n}\n\n/**\nRemove the inheritance of text transform in Edge and Firefox.\n1. Remove the inheritance of text transform in Firefox.\n*/\n\nbutton,\nselect {\n /* 1 */\n text-transform: none;\n}\n\n/**\nCorrect the inability to style clickable types in iOS and Safari.\n*/\n\nbutton,\n[type='button'],\n[type='reset'],\n[type='submit'] {\n -webkit-appearance: button;\n}\n\n/**\nRemove the inner border and padding in Firefox.\n*/\n\n::-moz-focus-inner {\n border-style: none;\n padding: 0;\n}\n\n/**\nRestore the focus styles unset by the previous rule.\n*/\n\n:-moz-focusring {\n outline: 1px dotted ButtonText;\n}\n\n/**\nRemove the additional ':invalid' styles in Firefox.\nSee: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737\n*/\n\n:-moz-ui-invalid {\n box-shadow: none;\n}\n\n/**\nRemove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.\n*/\n\nlegend {\n padding: 0;\n}\n\n/**\nAdd the correct vertical alignment in Chrome and Firefox.\n*/\n\nprogress {\n vertical-align: baseline;\n}\n\n/**\nCorrect the cursor style of increment and decrement buttons in Safari.\n*/\n\n::-webkit-inner-spin-button,\n::-webkit-outer-spin-button {\n height: auto;\n}\n\n/**\n1. Correct the odd appearance in Chrome and Safari.\n2. Correct the outline style in Safari.\n*/\n\n[type='search'] {\n -webkit-appearance: textfield;\n /* 1 */\n outline-offset: -2px;\n /* 2 */\n}\n\n/**\nRemove the inner padding in Chrome and Safari on macOS.\n*/\n\n::-webkit-search-decoration {\n -webkit-appearance: none;\n}\n\n/**\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Change font properties to 'inherit' in Safari.\n*/\n\n::-webkit-file-upload-button {\n -webkit-appearance: button;\n /* 1 */\n font: inherit;\n /* 2 */\n}\n\n/*\nInteractive\n===========\n*/\n\n/*\nAdd the correct display in Chrome and Safari.\n*/\n\nsummary {\n display: list-item;\n}\n\n/**\n * Manually forked from SUIT CSS Base: https://github.com/suitcss/base\n * A thin layer on top of normalize.css that provides a starting point more\n * suitable for web applications.\n */\n\n/**\n * Removes the default spacing and border for appropriate elements.\n */\n\nblockquote,\ndl,\ndd,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nhr,\nfigure,\np,\npre {\n margin: 0;\n}\n\nbutton {\n background-color: transparent;\n background-image: none;\n}\n\nfieldset {\n margin: 0;\n padding: 0;\n}\n\nol,\nul {\n list-style: none;\n margin: 0;\n padding: 0;\n}\n\n/**\n * Tailwind custom reset styles\n */\n\n/**\n * 1. Use the user's configured `sans` font-family (with Tailwind's default\n * sans-serif font stack as a fallback) as a sane default.\n * 2. Use Tailwind's default \"normal\" line-height so the user isn't forced\n * to override it to ensure consistency even when using the default theme.\n */\n\nhtml {\n font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n /* 1 */\n line-height: 1.5;\n /* 2 */\n}\n\n/**\n * Inherit font-family and line-height from `html` so users can set them as\n * a class directly on the `html` element.\n */\n\nbody {\n font-family: inherit;\n line-height: inherit;\n}\n\n/**\n * 1. Prevent padding and border from affecting element width.\n *\n * We used to set this in the html element and inherit from\n * the parent element for everything else. This caused issues\n * in shadow-dom-enhanced elements like
      where the content\n * is wrapped by a div with box-sizing set to `content-box`.\n *\n * https://github.com/mozdevs/cssremedy/issues/4\n *\n *\n * 2. Allow adding a border to an element by just adding a border-width.\n *\n * By default, the way the browser specifies that an element should have no\n * border is by setting it's border-style to `none` in the user-agent\n * stylesheet.\n *\n * In order to easily add borders to elements by just setting the `border-width`\n * property, we change the default border-style for all elements to `solid`, and\n * use border-width to hide them instead. This way our `border` utilities only\n * need to set the `border-width` property instead of the entire `border`\n * shorthand, making our border utilities much more straightforward to compose.\n *\n * https://github.com/tailwindcss/tailwindcss/pull/116\n */\n\n*,\n::before,\n::after {\n box-sizing: border-box;\n /* 1 */\n border-width: 0;\n /* 2 */\n border-style: solid;\n /* 2 */\n border-color: currentColor;\n /* 2 */\n}\n\n/*\n * Ensure horizontal rules are visible by default\n */\n\nhr {\n border-top-width: 1px;\n}\n\n/**\n * Undo the `border-style: none` reset that Normalize applies to images so that\n * our `border-{width}` utilities have the expected effect.\n *\n * The Normalize reset is unnecessary for us since we default the border-width\n * to 0 on all elements.\n *\n * https://github.com/tailwindcss/tailwindcss/issues/362\n */\n\nimg {\n border-style: solid;\n}\n\ntextarea {\n resize: vertical;\n}\n\ninput::-moz-placeholder, textarea::-moz-placeholder {\n opacity: 1;\n color: #9ca3af;\n}\n\ninput:-ms-input-placeholder, textarea:-ms-input-placeholder {\n opacity: 1;\n color: #9ca3af;\n}\n\ninput::placeholder,\ntextarea::placeholder {\n opacity: 1;\n color: #9ca3af;\n}\n\nbutton,\n[role=\"button\"] {\n cursor: pointer;\n}\n\ntable {\n border-collapse: collapse;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n font-size: inherit;\n font-weight: inherit;\n}\n\n/**\n * Reset links to optimize for opt-in styling instead of\n * opt-out.\n */\n\na {\n color: inherit;\n text-decoration: inherit;\n}\n\n/**\n * Reset form element properties that are easy to forget to\n * style explicitly so you don't inadvertently introduce\n * styles that deviate from your design system. These styles\n * supplement a partial reset that is already applied by\n * normalize.css.\n */\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n padding: 0;\n line-height: inherit;\n color: inherit;\n}\n\n/**\n * Use the configured 'mono' font family for elements that\n * are expected to be rendered with a monospace font, falling\n * back to the system monospace stack if there is no configured\n * 'mono' font family.\n */\n\npre,\ncode,\nkbd,\nsamp {\n font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n}\n\n/**\n * 1. Make replaced elements `display: block` by default as that's\n * the behavior you want almost all of the time. Inspired by\n * CSS Remedy, with `svg` added as well.\n *\n * https://github.com/mozdevs/cssremedy/issues/14\n * \n * 2. Add `vertical-align: middle` to align replaced elements more\n * sensibly by default when overriding `display` by adding a\n * utility like `inline`.\n *\n * This can trigger a poorly considered linting error in some\n * tools but is included by design.\n * \n * https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210\n */\n\nimg,\nsvg,\nvideo,\ncanvas,\naudio,\niframe,\nembed,\nobject {\n display: block;\n /* 1 */\n vertical-align: middle;\n /* 2 */\n}\n\n/**\n * Constrain images and videos to the parent width and preserve\n * their intrinsic aspect ratio.\n *\n * https://github.com/mozdevs/cssremedy/issues/14\n */\n\nimg,\nvideo {\n max-width: 100%;\n height: auto;\n}\n\n/**\n * Ensure the default browser behavior of the `hidden` attribute.\n */\n\n[hidden] {\n display: none;\n}\n\n*, ::before, ::after {\n --tw-border-opacity: 1;\n border-color: rgba(229, 231, 235, var(--tw-border-opacity));\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n --tw-shadow: 0 0 #0000;\n}\n\n.like-btn {\n display: flex;\n height: 2.5rem;\n width: 2.5rem;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n border-radius: 0.375rem;\n padding: 0.5rem;\n}\n\n.like-btn:hover {\n --tw-bg-opacity: 1;\n background-color: rgba(165, 180, 252, var(--tw-bg-opacity));\n}\n\n.like-item-active {\n --tw-bg-opacity: 1;\n background-color: rgba(199, 210, 254, var(--tw-bg-opacity));\n --tw-text-opacity: 1;\n color: rgba(55, 48, 163, var(--tw-text-opacity));\n}\n\n.bookmark-btn {\n display: flex;\n height: 2.5rem;\n width: 2.5rem;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n border-radius: 0.375rem;\n padding: 0.5rem;\n}\n\n.bookmark-btn:hover {\n --tw-bg-opacity: 1;\n background-color: rgba(252, 165, 165, var(--tw-bg-opacity));\n}\n\n.bookmark-item-active {\n --tw-bg-opacity: 1;\n background-color: rgba(254, 202, 202, var(--tw-bg-opacity));\n --tw-text-opacity: 1;\n color: rgba(153, 27, 27, var(--tw-text-opacity));\n}\n\n.details-btn {\n display: flex;\n height: 2.5rem;\n width: 2.5rem;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n border-radius: 0.375rem;\n padding: 0.5rem;\n}\n\n.details-btn:hover {\n --tw-bg-opacity: 1;\n background-color: rgba(229, 231, 235, var(--tw-bg-opacity));\n}\n\n.group:focus-within .details-btn {\n --tw-bg-opacity: 1;\n background-color: rgba(209, 213, 219, var(--tw-bg-opacity));\n}\n\n.sidebar {\n display: flex;\n height: 100vh;\n width: 15rem;\n flex-shrink: 0;\n flex-direction: column;\n border-right-width: 1px;\n --tw-border-opacity: 1;\n border-color: rgba(229, 231, 235, var(--tw-border-opacity));\n --tw-bg-opacity: 1;\n background-color: rgba(255, 255, 255, var(--tw-bg-opacity));\n}\n\n.details-container {\n visibility: hidden;\n position: absolute;\n right: 0px;\n top: 100%;\n z-index: 10 !important;\n height: 10rem;\n width: 15rem;\n overflow-y: scroll;\n border-radius: 0.375rem;\n border-width: 1px;\n --tw-border-opacity: 1;\n border-color: rgba(209, 213, 219, var(--tw-border-opacity));\n --tw-bg-opacity: 1;\n background-color: rgba(255, 255, 255, var(--tw-bg-opacity));\n padding: 0.75rem;\n text-align: left;\n --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.group:focus-within .details-container {\n visibility: visible;\n}\n\n.group:hover .details-container {\n visibility: visible;\n}\n\n.header-container {\n display: flex;\n height: 4rem;\n width: 100%;\n align-items: center;\n justify-content: center;\n border-bottom-width: 1px;\n --tw-border-opacity: 1;\n border-color: rgba(229, 231, 235, var(--tw-border-opacity));\n --tw-bg-opacity: 1;\n background-color: rgba(255, 255, 255, var(--tw-bg-opacity));\n}\n\n.navbar-item {\n border-radius: 0.5rem;\n border-width: 1px;\n --tw-border-opacity: 1;\n border-color: rgba(107, 114, 128, var(--tw-border-opacity));\n padding: 0.5rem;\n --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n transition-property: background-color, border-color, color, fill, stroke;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n\n.navbar-item:hover {\n --tw-bg-opacity: 1;\n background-color: rgba(0, 0, 0, var(--tw-bg-opacity));\n --tw-text-opacity: 1;\n color: rgba(255, 255, 255, var(--tw-text-opacity));\n}\n\n.menu-item {\n display: flex;\n border-radius: 0.375rem;\n padding: 0.5rem;\n}\n\n.menu-item:hover {\n --tw-bg-opacity: 1;\n background-color: rgba(0, 0, 0, var(--tw-bg-opacity));\n --tw-text-opacity: 1;\n color: rgba(255, 255, 255, var(--tw-text-opacity));\n}\n\n.sidebar-item {\n display: flex;\n --tw-bg-opacity: 1;\n background-color: rgba(255, 255, 255, var(--tw-bg-opacity));\n padding: 0.5rem;\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n padding-top: 0.75rem;\n padding-bottom: 0.75rem;\n --tw-text-opacity: 1;\n color: rgba(107, 114, 128, var(--tw-text-opacity));\n}\n\n.sidebar-item:hover {\n --tw-bg-opacity: 1;\n background-color: rgba(0, 0, 0, var(--tw-bg-opacity));\n --tw-text-opacity: 1;\n color: rgba(255, 255, 255, var(--tw-text-opacity));\n}\n\n.login_register_container {\n position: absolute;\n top: 50%;\n left: 50%;\n margin: auto;\n display: flex;\n width: 91.666667%;\n transform: translate(-50%, -50%);\n flex-direction: column;\n border-radius: 0.375rem;\n border-width: 1px;\n --tw-border-opacity: 1;\n border-color: rgba(209, 213, 219, var(--tw-border-opacity));\n --tw-bg-opacity: 1;\n background-color: rgba(255, 255, 255, var(--tw-bg-opacity));\n padding: 0.75rem;\n --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n@media (min-width: 640px) {\n .login_register_container {\n width: 50%;\n }\n}\n\n@media (min-width: 768px) {\n .login_register_container {\n width: 33.333333%;\n }\n}\n\n@media (min-width: 1024px) {\n .login_register_container {\n width: 25%;\n }\n}\n\n.input {\n border-radius: 0.125rem;\n border-width: 1px;\n --tw-border-opacity: 1;\n border-color: rgba(209, 213, 219, var(--tw-border-opacity));\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n outline: 2px solid transparent;\n outline-offset: 2px;\n}\n\n.input:focus {\n --tw-border-opacity: 1;\n border-color: rgba(0, 0, 0, var(--tw-border-opacity));\n}\n\n.default-button {\n border-radius: 0.375rem;\n --tw-bg-opacity: 1;\n background-color: rgba(55, 65, 81, var(--tw-bg-opacity));\n padding: 0.5rem;\n --tw-text-opacity: 1;\n color: rgba(255, 255, 255, var(--tw-text-opacity));\n}\n\n.default-button:hover {\n --tw-bg-opacity: 1;\n background-color: rgba(0, 0, 0, var(--tw-bg-opacity));\n}\n\n.secondary-button {\n border-radius: 0.375rem;\n --tw-bg-opacity: 1;\n background-color: rgba(107, 114, 128, var(--tw-bg-opacity));\n padding: 0.5rem;\n --tw-text-opacity: 1;\n color: rgba(255, 255, 255, var(--tw-text-opacity));\n}\n\n.secondary-button:hover {\n --tw-bg-opacity: 1;\n background-color: rgba(75, 85, 99, var(--tw-bg-opacity));\n}\n\n.invisible {\n visibility: hidden;\n}\n\n.absolute {\n position: absolute;\n}\n\n.relative {\n position: relative;\n}\n\n.top-full {\n top: 100%;\n}\n\n.right-0 {\n right: 0px;\n}\n\n.\\!z-10 {\n z-index: 10 !important;\n}\n\n.mx-auto {\n margin-left: auto;\n margin-right: auto;\n}\n\n.mr-2 {\n margin-right: 0.5rem;\n}\n\n.mr-3 {\n margin-right: 0.75rem;\n}\n\n.ml-auto {\n margin-left: auto;\n}\n\n.mb-2 {\n margin-bottom: 0.5rem;\n}\n\n.mr-1 {\n margin-right: 0.25rem;\n}\n\n.mb-3 {\n margin-bottom: 0.75rem;\n}\n\n.mb-1 {\n margin-bottom: 0.25rem;\n}\n\n.mt-2 {\n margin-top: 0.5rem;\n}\n\n.mt-3 {\n margin-top: 0.75rem;\n}\n\n.flex {\n display: flex;\n}\n\n.grid {\n display: grid;\n}\n\n.hidden {\n display: none;\n}\n\n.h-16 {\n height: 4rem;\n}\n\n.h-8 {\n height: 2rem;\n}\n\n.h-\\[100vh\\] {\n height: 100vh;\n}\n\n.h-10 {\n height: 2.5rem;\n}\n\n.h-40 {\n height: 10rem;\n}\n\n.w-full {\n width: 100%;\n}\n\n.w-8 {\n width: 2rem;\n}\n\n.w-56 {\n width: 14rem;\n}\n\n.w-60 {\n width: 15rem;\n}\n\n.w-1\\/4 {\n width: 25%;\n}\n\n.w-10 {\n width: 2.5rem;\n}\n\n.flex-shrink-0 {\n flex-shrink: 0;\n}\n\n.grid-cols-8 {\n grid-template-columns: repeat(8, minmax(0, 1fr));\n}\n\n.flex-row {\n flex-direction: row;\n}\n\n.flex-col {\n flex-direction: column;\n}\n\n.items-center {\n align-items: center;\n}\n\n.justify-end {\n justify-content: flex-end;\n}\n\n.justify-center {\n justify-content: center;\n}\n\n.justify-between {\n justify-content: space-between;\n}\n\n.gap-4 {\n gap: 1rem;\n}\n\n.gap-x-3 {\n -moz-column-gap: 0.75rem;\n column-gap: 0.75rem;\n}\n\n.gap-x-1 {\n -moz-column-gap: 0.25rem;\n column-gap: 0.25rem;\n}\n\n.overflow-x-hidden {\n overflow-x: hidden;\n}\n\n.overflow-y-scroll {\n overflow-y: scroll;\n}\n\n.rounded-sm {\n border-radius: 0.125rem;\n}\n\n.rounded-md {\n border-radius: 0.375rem;\n}\n\n.border-\\[1px\\] {\n border-width: 1px;\n}\n\n.border-b-\\[1px\\] {\n border-bottom-width: 1px;\n}\n\n.border-r-\\[1px\\] {\n border-right-width: 1px;\n}\n\n.border-gray-200 {\n --tw-border-opacity: 1;\n border-color: rgba(229, 231, 235, var(--tw-border-opacity));\n}\n\n.border-gray-300 {\n --tw-border-opacity: 1;\n border-color: rgba(209, 213, 219, var(--tw-border-opacity));\n}\n\n.bg-gray-100 {\n --tw-bg-opacity: 1;\n background-color: rgba(243, 244, 246, var(--tw-bg-opacity));\n}\n\n.bg-white {\n --tw-bg-opacity: 1;\n background-color: rgba(255, 255, 255, var(--tw-bg-opacity));\n}\n\n.bg-gray-700 {\n --tw-bg-opacity: 1;\n background-color: rgba(55, 65, 81, var(--tw-bg-opacity));\n}\n\n.bg-red-200 {\n --tw-bg-opacity: 1;\n background-color: rgba(254, 202, 202, var(--tw-bg-opacity));\n}\n\n.fill-current {\n fill: currentColor;\n}\n\n.p-2 {\n padding: 0.5rem;\n}\n\n.p-3 {\n padding: 0.75rem;\n}\n\n.p-1 {\n padding: 0.25rem;\n}\n\n.px-2 {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n}\n\n.px-3 {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n\n.py-1 {\n padding-top: 0.25rem;\n padding-bottom: 0.25rem;\n}\n\n.text-left {\n text-align: left;\n}\n\n.text-center {\n text-align: center;\n}\n\n.text-xl {\n font-size: 1.25rem;\n line-height: 1.75rem;\n}\n\n.text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n\n.text-2xl {\n font-size: 1.5rem;\n line-height: 2rem;\n}\n\n.text-xs {\n font-size: 0.75rem;\n line-height: 1rem;\n}\n\n.font-bold {\n font-weight: 700;\n}\n\n.text-white {\n --tw-text-opacity: 1;\n color: rgba(255, 255, 255, var(--tw-text-opacity));\n}\n\n.text-gray-600 {\n --tw-text-opacity: 1;\n color: rgba(75, 85, 99, var(--tw-text-opacity));\n}\n\n.text-gray-400 {\n --tw-text-opacity: 1;\n color: rgba(156, 163, 175, var(--tw-text-opacity));\n}\n\n.text-red-900 {\n --tw-text-opacity: 1;\n color: rgba(127, 29, 29, var(--tw-text-opacity));\n}\n\n.shadow-md {\n --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.shadow-sm {\n --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.shadow-lg {\n --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.transition-colors {\n transition-property: background-color, border-color, color, fill, stroke;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n\n.duration-500 {\n transition-duration: 500ms;\n}\n\n.hover\\:bg-black:hover {\n --tw-bg-opacity: 1;\n background-color: rgba(0, 0, 0, var(--tw-bg-opacity));\n}\n\n.hover\\:bg-gray-200:hover {\n --tw-bg-opacity: 1;\n background-color: rgba(229, 231, 235, var(--tw-bg-opacity));\n}\n\n.hover\\:bg-indigo-300:hover {\n --tw-bg-opacity: 1;\n background-color: rgba(165, 180, 252, var(--tw-bg-opacity));\n}\n\n.hover\\:text-black:hover {\n --tw-text-opacity: 1;\n color: rgba(0, 0, 0, var(--tw-text-opacity));\n}\n\n.group:focus-within .group-focus-within\\:visible {\n visibility: visible;\n}\n\n.group:focus-within .group-focus-within\\:bg-gray-300 {\n --tw-bg-opacity: 1;\n background-color: rgba(209, 213, 219, var(--tw-bg-opacity));\n}\n\n.group:hover .group-hover\\:visible {\n visibility: visible;\n}\n\n.group:hover .group-hover\\:text-white {\n --tw-text-opacity: 1;\n color: rgba(255, 255, 255, var(--tw-text-opacity));\n}\n\n.group:hover .group-hover\\:text-gray-700 {\n --tw-text-opacity: 1;\n color: rgba(55, 65, 81, var(--tw-text-opacity));\n}\n\n@media (min-width: 640px) {\n .sm\\:grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n}\n\n@media (min-width: 768px) {\n .md\\:grid-cols-4 {\n grid-template-columns: repeat(4, minmax(0, 1fr));\n }\n}\n\n@media (min-width: 1024px) {\n .lg\\:grid-cols-5 {\n grid-template-columns: repeat(5, minmax(0, 1fr));\n }\n}\n\n@media (min-width: 1280px) {\n .xl\\:grid-cols-6 {\n grid-template-columns: repeat(6, minmax(0, 1fr));\n }\n}\n\n@media (min-width: 1536px) {\n .\\32xl\\:grid-cols-8 {\n grid-template-columns: repeat(8, minmax(0, 1fr));\n }\n}\n" }, { "path": "ders-12-socialmark-composition-api/tema/assets/tailwind.css", "content": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n .translate {\n transform: translate(-50%, -50%);\n }\n}\n\n@layer components {\n .like-btn {\n @apply flex-shrink-0 w-10 h-10 p-2 flex rounded-md hover:bg-indigo-300 justify-center items-center;\n }\n .bookmark-btn {\n @apply flex-shrink-0 w-10 h-10 p-2 flex rounded-md hover:bg-black justify-center items-center;\n }\n .bookmark-item-active {\n @apply text-red-700;\n }\n .details-btn {\n @apply flex-shrink-0 w-10 h-10 p-2 flex rounded-md hover:bg-gray-200 group-focus-within:bg-gray-300 justify-center items-center;\n }\n\n .sidebar {\n @apply flex flex-shrink-0 flex-col h-[100vh] bg-white w-60 border-gray-200 border-r-[1px];\n }\n\n .details-container {\n @apply absolute !z-10 w-60 h-40 group-focus-within:visible right-0 top-full overflow-y-scroll group-hover:visible bg-white invisible rounded-md shadow-lg p-3 text-left border-gray-300 border-[1px];\n }\n\n .header-container {\n @apply bg-white border-gray-200 border-b-[1px] h-16 w-full flex items-center justify-center;\n }\n\n .navbar-item {\n @apply rounded-lg shadow-md border-[1px] p-2 border-gray-500 hover:bg-black hover:text-white transition-colors;\n }\n .menu-item {\n @apply p-2 flex hover:bg-black hover:text-white rounded-md;\n }\n\n .sidebar-item {\n @apply flex bg-white p-2 text-gray-500 px-2 py-3 hover:bg-black hover:text-white;\n }\n\n .login_register_container {\n @apply bg-white rounded-md border-[1px] border-gray-300 w-1/4 md:w-1/2 m-auto absolute top-1/2 left-1/2 translate p-3 flex flex-col shadow-md;\n }\n\n .input {\n @apply px-3 py-2 border rounded-sm border-gray-300 outline-none focus:border-black;\n }\n\n .default-button {\n @apply bg-gray-700 p-2 text-white rounded-md hover:bg-black;\n }\n\n .secondary-button {\n @apply bg-gray-500 p-2 text-white rounded-md hover:bg-gray-600;\n }\n\n .primary-button {\n @apply bg-indigo-500 p-2 text-white rounded-md hover:bg-black;\n }\n\n .danger-button {\n @apply bg-red-500 p-2 text-white rounded-md hover:bg-black;\n }\n}\n" }, { "path": "ders-12-socialmark-composition-api/tema/favorites.html", "content": "\n\n \n \n \n \n Document\n \n \n \n \n \n
      \n \n
      \n \n
      \n \n\n \n
      \n
      \n
      \n
      \n Vue3 Dokümantasyon\n
      \n \n \n
      \n \n
      \n
      \n
      \n Gökhan Kandemir \n 14 Mart\n
      \n
      \n
      Vue.js
      \n
      \n
      \n
      \n
      \n \n \n\n" }, { "path": "ders-12-socialmark-composition-api/tema/index.html", "content": "\n\n \n \n \n \n SocialMark\n \n \n \n \n \n
      \n \n
      \n \n
      \n \n\n \n
      \n
      \n
      \n
      \n Vue3 Dokümantasyon\n
      \n \n \n
      \n \n
      \n
      \n
      \n Gökhan Kandemir \n 14 Mart\n
      \n
      \n
      Vue.js
      \n
      \n
      \n
      \n \n
      \n \n \n\n" }, { "path": "ders-12-socialmark-composition-api/tema/login.html", "content": "\n\n \n \n \n \n Login\n \n \n \n
      \n

      Login

      \n \n \n \n \n Üye değilim,\n Üye olmak istiyorum!\n \n
      \n \n\n" }, { "path": "ders-12-socialmark-composition-api/tema/new-bookmark.html", "content": "\n\n \n \n \n \n Yeni Yer İşareti\n \n \n \n
      \n

      Yeni Ekle

      \n \n \n \n \n
      \n \n \n
      \n
      \n \n\n" }, { "path": "ders-12-socialmark-composition-api/tema/register.html", "content": "\n\n \n \n \n \n Register\n \n \n \n
      \n

      Register

      \n \n \n \n \n \n Zaten Üyeyim,\n Giriş yap!\n \n
      \n \n\n" }, { "path": "ders-2/-boilerplate/app.js", "content": "const app = Vue.createApp({\n data() {\n return {};\n },\n}).mount(\"#app\");\n" }, { "path": "ders-2/-boilerplate/index.html", "content": "\n\n \n \n \n \n CSS ve Style Binding\n \n \n \n \n
      \n
      \n
      \n \n \n\n" }, { "path": "ders-2/.prettierrc", "content": "{\n \"printWidth\": 150\n}" }, { "path": "ders-2/0-component/app.js", "content": "const app = Vue.createApp({\n data() {\n return {};\n },\n});\n\napp.component(\"counter-item\", {\n data() {\n return {\n counter: 0,\n };\n },\n template: `\n
      \n

      {{ counter }} 

      \n \n \n
      \n `,\n});\napp.mount(\"#app\");\n" }, { "path": "ders-2/0-component/index.html", "content": "\n\n \n \n \n \n CSS ve Style Binding\n \n \n \n \n
      \n \n \n \n \n \n \n \n \n
      \n \n \n\n" }, { "path": "ders-2/1-vue-cli/README.md", "content": "# 1-vue-cli\n\n## Project setup\n```\nnpm install\n```\n\n### Compiles and hot-reloads for development\n```\nnpm run serve\n```\n\n### Compiles and minifies for production\n```\nnpm run build\n```\n\n### Lints and fixes files\n```\nnpm run lint\n```\n\n### Customize configuration\nSee [Configuration Reference](https://cli.vuejs.org/config/).\n" }, { "path": "ders-2/1-vue-cli/babel.config.js", "content": "module.exports = {\n presets: [\n '@vue/cli-plugin-babel/preset'\n ]\n}\n" }, { "path": "ders-2/1-vue-cli/package.json", "content": "{\n \"name\": \"1-vue-cli\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"scripts\": {\n \"serve\": \"vue-cli-service serve\",\n \"build\": \"vue-cli-service build\",\n \"lint\": \"vue-cli-service lint\"\n },\n \"dependencies\": {\n \"core-js\": \"^3.6.5\",\n \"vue\": \"^3.0.0\"\n },\n \"devDependencies\": {\n \"@vue/cli-plugin-babel\": \"~4.5.0\",\n \"@vue/cli-plugin-eslint\": \"~4.5.0\",\n \"@vue/cli-service\": \"~4.5.0\",\n \"@vue/compiler-sfc\": \"^3.0.0\",\n \"babel-eslint\": \"^10.1.0\",\n \"eslint\": \"^6.7.2\",\n \"eslint-plugin-vue\": \"^7.0.0\"\n },\n \"eslintConfig\": {\n \"root\": true,\n \"env\": {\n \"node\": true\n },\n \"extends\": [\n \"plugin:vue/vue3-essential\",\n \"eslint:recommended\"\n ],\n \"parserOptions\": {\n \"parser\": \"babel-eslint\"\n },\n \"rules\": {}\n },\n \"browserslist\": [\n \"> 1%\",\n \"last 2 versions\",\n \"not dead\"\n ]\n}\n" }, { "path": "ders-2/1-vue-cli/public/index.html", "content": "\n\n \n \n \n \n favicon.ico\">\n <%= htmlWebpackPlugin.options.title %>\n \n \n \n
      \n \n \n\n" }, { "path": "ders-2/1-vue-cli/src/App.vue", "content": "\n\n" }, { "path": "ders-2/1-vue-cli/src/assets/style.css", "content": "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;0,900;1,300;1,400&display=swap\");\n.text-blue {\n color: #59bacc;\n}\n\n.bg-blue {\n background-color: #59bacc;\n}\n\n.text-green {\n color: #58ad69;\n}\n\n.bg-green {\n background-color: #58ad69;\n}\n\n.text-orange {\n color: #ffbc49;\n}\n\n.bg-orange {\n background-color: #ffbc49;\n}\n\n.text-red {\n color: #e2574c;\n}\n\n.bg-red {\n background-color: #e2574c;\n}\n\n.text-black {\n color: #4e5459;\n}\n\n.bg-black {\n background-color: #4e5459;\n}\n\n.text-default {\n color: #d7dbdd;\n}\n\n.bg-default {\n background-color: #d7dbdd;\n}\n\n.text-white {\n color: #fff;\n}\n\n.bg-white {\n background-color: #fff;\n}\n\n.text-center {\n text-align: center;\n}\n\n.text-left {\n text-align: left;\n}\n\n.text-right {\n text-align: right;\n}\n\n.d-flex {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n}\n\n.justify-content-center {\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n}\n\n.justify-content-start {\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: flex-start;\n}\n\n.justify-content-between {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n}\n\n.justify-content-end {\n -webkit-box-pack: end;\n -ms-flex-pack: end;\n justify-content: flex-end;\n}\n\n.align-items-center {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.align-items-start {\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n}\n\n.align-items-end {\n -webkit-box-align: end;\n -ms-flex-align: end;\n align-items: flex-end;\n}\n\n.mt-0 {\n margin-top: 0rem;\n}\n\n.mb-0 {\n margin-bottom: 0rem;\n}\n\n.mr-0 {\n margin-right: 0rem;\n}\n\n.ml-0 {\n margin-left: 0rem;\n}\n\n.mx-0 {\n margin-left: 0rem;\n margin-right: 0rem;\n}\n\n.my-0 {\n margin-top: 0rem;\n margin-bottom: 0rem;\n}\n\n.pt-0 {\n padding-top: 0rem;\n}\n\n.pb-0 {\n padding-bottom: 0rem;\n}\n\n.pr-0 {\n padding-right: 0rem;\n}\n\n.pl-0 {\n padding-left: 0rem;\n}\n\n.px-0 {\n padding-left: 0rem;\n padding-right: 0rem;\n}\n\n.py-0 {\n padding-top: 0rem;\n padding-bottom: 0rem;\n}\n\n.mt-1 {\n margin-top: 0.25rem;\n}\n\n.mb-1 {\n margin-bottom: 0.25rem;\n}\n\n.mr-1 {\n margin-right: 0.25rem;\n}\n\n.ml-1 {\n margin-left: 0.25rem;\n}\n\n.mx-1 {\n margin-left: 0.25rem;\n margin-right: 0.25rem;\n}\n\n.my-1 {\n margin-top: 0.25rem;\n margin-bottom: 0.25rem;\n}\n\n.pt-1 {\n padding-top: 0.25rem;\n}\n\n.pb-1 {\n padding-bottom: 0.25rem;\n}\n\n.pr-1 {\n padding-right: 0.25rem;\n}\n\n.pl-1 {\n padding-left: 0.25rem;\n}\n\n.px-1 {\n padding-left: 0.25rem;\n padding-right: 0.25rem;\n}\n\n.py-1 {\n padding-top: 0.25rem;\n padding-bottom: 0.25rem;\n}\n\n.mt-2 {\n margin-top: 0.5rem;\n}\n\n.mb-2 {\n margin-bottom: 0.5rem;\n}\n\n.mr-2 {\n margin-right: 0.5rem;\n}\n\n.ml-2 {\n margin-left: 0.5rem;\n}\n\n.mx-2 {\n margin-left: 0.5rem;\n margin-right: 0.5rem;\n}\n\n.my-2 {\n margin-top: 0.5rem;\n margin-bottom: 0.5rem;\n}\n\n.pt-2 {\n padding-top: 0.5rem;\n}\n\n.pb-2 {\n padding-bottom: 0.5rem;\n}\n\n.pr-2 {\n padding-right: 0.5rem;\n}\n\n.pl-2 {\n padding-left: 0.5rem;\n}\n\n.px-2 {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n}\n\n.py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n\n.mt-3 {\n margin-top: 0.75rem;\n}\n\n.mb-3 {\n margin-bottom: 0.75rem;\n}\n\n.mr-3 {\n margin-right: 0.75rem;\n}\n\n.ml-3 {\n margin-left: 0.75rem;\n}\n\n.mx-3 {\n margin-left: 0.75rem;\n margin-right: 0.75rem;\n}\n\n.my-3 {\n margin-top: 0.75rem;\n margin-bottom: 0.75rem;\n}\n\n.pt-3 {\n padding-top: 0.75rem;\n}\n\n.pb-3 {\n padding-bottom: 0.75rem;\n}\n\n.pr-3 {\n padding-right: 0.75rem;\n}\n\n.pl-3 {\n padding-left: 0.75rem;\n}\n\n.px-3 {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n\n.py-3 {\n padding-top: 0.75rem;\n padding-bottom: 0.75rem;\n}\n\n.mt-4 {\n margin-top: 1rem;\n}\n\n.mb-4 {\n margin-bottom: 1rem;\n}\n\n.mr-4 {\n margin-right: 1rem;\n}\n\n.ml-4 {\n margin-left: 1rem;\n}\n\n.mx-4 {\n margin-left: 1rem;\n margin-right: 1rem;\n}\n\n.my-4 {\n margin-top: 1rem;\n margin-bottom: 1rem;\n}\n\n.pt-4 {\n padding-top: 1rem;\n}\n\n.pb-4 {\n padding-bottom: 1rem;\n}\n\n.pr-4 {\n padding-right: 1rem;\n}\n\n.pl-4 {\n padding-left: 1rem;\n}\n\n.px-4 {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n\n.py-4 {\n padding-top: 1rem;\n padding-bottom: 1rem;\n}\n\n.mt-5 {\n margin-top: 1.25rem;\n}\n\n.mb-5 {\n margin-bottom: 1.25rem;\n}\n\n.mr-5 {\n margin-right: 1.25rem;\n}\n\n.ml-5 {\n margin-left: 1.25rem;\n}\n\n.mx-5 {\n margin-left: 1.25rem;\n margin-right: 1.25rem;\n}\n\n.my-5 {\n margin-top: 1.25rem;\n margin-bottom: 1.25rem;\n}\n\n.pt-5 {\n padding-top: 1.25rem;\n}\n\n.pb-5 {\n padding-bottom: 1.25rem;\n}\n\n.pr-5 {\n padding-right: 1.25rem;\n}\n\n.pl-5 {\n padding-left: 1.25rem;\n}\n\n.px-5 {\n padding-left: 1.25rem;\n padding-right: 1.25rem;\n}\n\n.py-5 {\n padding-top: 1.25rem;\n padding-bottom: 1.25rem;\n}\n\n* {\n font-family: \"Roboto\", sans-serif;\n margin: 0;\n padding: 0;\n}\n\nbody {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n background-color: #e9ebee;\n padding: 10px;\n}\n\nbody #app {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -ms-flex-wrap: wrap;\n flex-wrap: wrap;\n flex-direction: column;\n}\n\nbody #app .container {\n border-radius: 5px;\n width: 375px;\n margin: 5px;\n -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);\n border: 1px solid #d0d1d5;\n background-color: white;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n padding: 5px 10px;\n}\n\nbody #app .container-sm {\n border-radius: 5px;\n max-width: 375px !important;\n margin: 5px;\n -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);\n border: 1px solid #d0d1d5;\n background-color: white;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n padding: 5px 10px;\n}\n\nbody #app input,\nbody #app select {\n padding: 5px;\n outline: none;\n width: 100%;\n margin: 5px 0;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 1px solid #ccc;\n border-radius: 5px;\n}\n\nbody #app button {\n border: none;\n padding: 5px 10px;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n margin: 3px 0;\n border-radius: 3px;\n background-color: #d7dbdd;\n color: #32373b;\n}\n\nbody #app button:hover {\n background-color: #f3f4f4;\n}\n\nbody #app button:active {\n background-color: #e5e7e9;\n}\n\nbody #app button.black {\n background-color: #4e5459;\n color: #e5ffff;\n}\n\nbody #app button.black:hover {\n background-color: #363a3e;\n}\n\nbody #app button.black:active {\n background-color: #666e74;\n}\n\nbody #app button.blue {\n background-color: #59bacc;\n color: #e5ffff;\n}\n\nbody #app button.blue:hover {\n background-color: #80cad8;\n}\n\nbody #app button.blue:active {\n background-color: #6dc2d2;\n}\n\nbody #app button.red {\n background-color: #e2574c;\n color: #e5ffff;\n}\n\nbody #app button.red:hover {\n background-color: #e98078;\n}\n\nbody #app button.red:active {\n background-color: #e66c62;\n}\n\nbody #app button.green {\n background-color: #58ad69;\n color: #e5ffff;\n}\n\nbody #app button.green:hover {\n background-color: #7abe88;\n}\n\nbody #app button.green:active {\n background-color: #69b578;\n}\n\nbody #app button.orange {\n background-color: #ffbc49;\n color: #666;\n}\n\nbody #app button.orange:hover {\n background-color: #ffcf7c;\n}\n\nbody #app button.orange:active {\n background-color: #ffc563;\n}\n\nbody #app button.block {\n width: 100%;\n}\n\nbody #app button.sm {\n padding: 2px 5px;\n}\n\nbody #app ul {\n list-style: none;\n margin: 0;\n padding: 0;\n}\n\nbody #app ul li {\n padding: 5px;\n background-color: #f3f4f4;\n margin-bottom: 5px;\n border-radius: 3px;\n}\n\nbody #app ul li:last-child {\n margin-bottom: 0;\n}\n\nbody #app ul li:hover {\n background-color: #e5e7e9;\n}\n\nbody #app hr {\n background: -webkit-gradient(\n linear,\n left top,\n right top,\n from(#59bacc),\n to(#ffbc49)\n );\n background: linear-gradient(to right, #59bacc, #ffbc49);\n height: 1px;\n border: none;\n}\n\nbody #app small {\n font-size: 12px;\n}\n/*# sourceMappingURL=style.css.map */\n" }, { "path": "ders-2/1-vue-cli/src/components/CounterItem.vue", "content": "\n\n" }, { "path": "ders-2/1-vue-cli/src/components/appHeader.vue", "content": "\n\n\n" }, { "path": "ders-2/1-vue-cli/src/main.js", "content": "import { createApp } from \"vue\";\nimport App from \"./App.vue\";\nimport \"@/assets/style.css\";\nimport appHeader from \"@/components/appHeader\";\n\nconst app = createApp(App);\n\napp.component(\"app-header\", appHeader);\napp.mount(\"#app\");\n" }, { "path": "ders-2/2-todo-app/README.md", "content": "# 2-todo-app\n\n## Project setup\n```\nnpm install\n```\n\n### Compiles and hot-reloads for development\n```\nnpm run serve\n```\n\n### Compiles and minifies for production\n```\nnpm run build\n```\n\n### Lints and fixes files\n```\nnpm run lint\n```\n\n### Customize configuration\nSee [Configuration Reference](https://cli.vuejs.org/config/).\n" }, { "path": "ders-2/2-todo-app/babel.config.js", "content": "module.exports = {\n presets: [\n '@vue/cli-plugin-babel/preset'\n ]\n}\n" }, { "path": "ders-2/2-todo-app/package.json", "content": "{\n \"name\": \"2-todo-app\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"scripts\": {\n \"serve\": \"vue-cli-service serve\",\n \"build\": \"vue-cli-service build\",\n \"lint\": \"vue-cli-service lint\"\n },\n \"dependencies\": {\n \"core-js\": \"^3.6.5\",\n \"vue\": \"^3.0.0\"\n },\n \"devDependencies\": {\n \"@vue/cli-plugin-babel\": \"~4.5.0\",\n \"@vue/cli-plugin-eslint\": \"~4.5.0\",\n \"@vue/cli-service\": \"~4.5.0\",\n \"@vue/compiler-sfc\": \"^3.0.0\",\n \"babel-eslint\": \"^10.1.0\",\n \"eslint\": \"^6.7.2\",\n \"eslint-plugin-vue\": \"^7.0.0\"\n },\n \"eslintConfig\": {\n \"root\": true,\n \"env\": {\n \"node\": true\n },\n \"extends\": [\n \"plugin:vue/vue3-essential\",\n \"eslint:recommended\"\n ],\n \"parserOptions\": {\n \"parser\": \"babel-eslint\"\n },\n \"rules\": {}\n },\n \"browserslist\": [\n \"> 1%\",\n \"last 2 versions\",\n \"not dead\"\n ]\n}\n" }, { "path": "ders-2/2-todo-app/public/index.html", "content": "\n\n \n \n \n \n favicon.ico\">\n <%= htmlWebpackPlugin.options.title %>\n \n \n \n
      \n \n \n\n" }, { "path": "ders-2/2-todo-app/src/App.vue", "content": "\n\n" }, { "path": "ders-2/2-todo-app/src/assets/style.css", "content": "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;0,900;1,300;1,400&display=swap\");\n.text-blue {\n color: #59bacc;\n}\n\n.bg-blue {\n background-color: #59bacc;\n}\n\n.text-green {\n color: #58ad69;\n}\n\n.bg-green {\n background-color: #58ad69;\n}\n\n.text-orange {\n color: #ffbc49;\n}\n\n.bg-orange {\n background-color: #ffbc49;\n}\n\n.text-red {\n color: #e2574c;\n}\n\n.bg-red {\n background-color: #e2574c;\n}\n\n.text-black {\n color: #4e5459;\n}\n\n.bg-black {\n background-color: #4e5459;\n}\n\n.text-default {\n color: #d7dbdd;\n}\n\n.bg-default {\n background-color: #d7dbdd;\n}\n\n.text-white {\n color: #fff;\n}\n\n.bg-white {\n background-color: #fff;\n}\n\n.text-center {\n text-align: center;\n}\n\n.text-left {\n text-align: left;\n}\n\n.text-right {\n text-align: right;\n}\n\n.d-flex {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n}\n\n.justify-content-center {\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n}\n\n.justify-content-start {\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: flex-start;\n}\n\n.justify-content-between {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n}\n\n.justify-content-end {\n -webkit-box-pack: end;\n -ms-flex-pack: end;\n justify-content: flex-end;\n}\n\n.align-items-center {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.align-items-start {\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n}\n\n.align-items-end {\n -webkit-box-align: end;\n -ms-flex-align: end;\n align-items: flex-end;\n}\n\n.mt-0 {\n margin-top: 0rem;\n}\n\n.mb-0 {\n margin-bottom: 0rem;\n}\n\n.mr-0 {\n margin-right: 0rem;\n}\n\n.ml-0 {\n margin-left: 0rem;\n}\n\n.mx-0 {\n margin-left: 0rem;\n margin-right: 0rem;\n}\n\n.my-0 {\n margin-top: 0rem;\n margin-bottom: 0rem;\n}\n\n.pt-0 {\n padding-top: 0rem;\n}\n\n.pb-0 {\n padding-bottom: 0rem;\n}\n\n.pr-0 {\n padding-right: 0rem;\n}\n\n.pl-0 {\n padding-left: 0rem;\n}\n\n.px-0 {\n padding-left: 0rem;\n padding-right: 0rem;\n}\n\n.py-0 {\n padding-top: 0rem;\n padding-bottom: 0rem;\n}\n\n.mt-1 {\n margin-top: 0.25rem;\n}\n\n.mb-1 {\n margin-bottom: 0.25rem;\n}\n\n.mr-1 {\n margin-right: 0.25rem;\n}\n\n.ml-1 {\n margin-left: 0.25rem;\n}\n\n.mx-1 {\n margin-left: 0.25rem;\n margin-right: 0.25rem;\n}\n\n.my-1 {\n margin-top: 0.25rem;\n margin-bottom: 0.25rem;\n}\n\n.pt-1 {\n padding-top: 0.25rem;\n}\n\n.pb-1 {\n padding-bottom: 0.25rem;\n}\n\n.pr-1 {\n padding-right: 0.25rem;\n}\n\n.pl-1 {\n padding-left: 0.25rem;\n}\n\n.px-1 {\n padding-left: 0.25rem;\n padding-right: 0.25rem;\n}\n\n.py-1 {\n padding-top: 0.25rem;\n padding-bottom: 0.25rem;\n}\n\n.mt-2 {\n margin-top: 0.5rem;\n}\n\n.mb-2 {\n margin-bottom: 0.5rem;\n}\n\n.mr-2 {\n margin-right: 0.5rem;\n}\n\n.ml-2 {\n margin-left: 0.5rem;\n}\n\n.mx-2 {\n margin-left: 0.5rem;\n margin-right: 0.5rem;\n}\n\n.my-2 {\n margin-top: 0.5rem;\n margin-bottom: 0.5rem;\n}\n\n.pt-2 {\n padding-top: 0.5rem;\n}\n\n.pb-2 {\n padding-bottom: 0.5rem;\n}\n\n.pr-2 {\n padding-right: 0.5rem;\n}\n\n.pl-2 {\n padding-left: 0.5rem;\n}\n\n.px-2 {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n}\n\n.py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n\n.mt-3 {\n margin-top: 0.75rem;\n}\n\n.mb-3 {\n margin-bottom: 0.75rem;\n}\n\n.mr-3 {\n margin-right: 0.75rem;\n}\n\n.ml-3 {\n margin-left: 0.75rem;\n}\n\n.mx-3 {\n margin-left: 0.75rem;\n margin-right: 0.75rem;\n}\n\n.my-3 {\n margin-top: 0.75rem;\n margin-bottom: 0.75rem;\n}\n\n.pt-3 {\n padding-top: 0.75rem;\n}\n\n.pb-3 {\n padding-bottom: 0.75rem;\n}\n\n.pr-3 {\n padding-right: 0.75rem;\n}\n\n.pl-3 {\n padding-left: 0.75rem;\n}\n\n.px-3 {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n\n.py-3 {\n padding-top: 0.75rem;\n padding-bottom: 0.75rem;\n}\n\n.mt-4 {\n margin-top: 1rem;\n}\n\n.mb-4 {\n margin-bottom: 1rem;\n}\n\n.mr-4 {\n margin-right: 1rem;\n}\n\n.ml-4 {\n margin-left: 1rem;\n}\n\n.mx-4 {\n margin-left: 1rem;\n margin-right: 1rem;\n}\n\n.my-4 {\n margin-top: 1rem;\n margin-bottom: 1rem;\n}\n\n.pt-4 {\n padding-top: 1rem;\n}\n\n.pb-4 {\n padding-bottom: 1rem;\n}\n\n.pr-4 {\n padding-right: 1rem;\n}\n\n.pl-4 {\n padding-left: 1rem;\n}\n\n.px-4 {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n\n.py-4 {\n padding-top: 1rem;\n padding-bottom: 1rem;\n}\n\n.mt-5 {\n margin-top: 1.25rem;\n}\n\n.mb-5 {\n margin-bottom: 1.25rem;\n}\n\n.mr-5 {\n margin-right: 1.25rem;\n}\n\n.ml-5 {\n margin-left: 1.25rem;\n}\n\n.mx-5 {\n margin-left: 1.25rem;\n margin-right: 1.25rem;\n}\n\n.my-5 {\n margin-top: 1.25rem;\n margin-bottom: 1.25rem;\n}\n\n.pt-5 {\n padding-top: 1.25rem;\n}\n\n.pb-5 {\n padding-bottom: 1.25rem;\n}\n\n.pr-5 {\n padding-right: 1.25rem;\n}\n\n.pl-5 {\n padding-left: 1.25rem;\n}\n\n.px-5 {\n padding-left: 1.25rem;\n padding-right: 1.25rem;\n}\n\n.py-5 {\n padding-top: 1.25rem;\n padding-bottom: 1.25rem;\n}\n\n* {\n font-family: \"Roboto\", sans-serif;\n margin: 0;\n padding: 0;\n}\n\nbody {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n background-color: #e9ebee;\n padding: 10px;\n}\n\nbody #app {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -ms-flex-wrap: wrap;\n flex-wrap: wrap;\n}\n\nbody #app .container {\n border-radius: 5px;\n width: 375px;\n margin: 5px;\n -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);\n border: 1px solid #d0d1d5;\n background-color: white;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n padding: 5px 10px;\n}\n\nbody #app .container-sm {\n border-radius: 5px;\n max-width: 375px !important;\n margin: 5px;\n -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);\n border: 1px solid #d0d1d5;\n background-color: white;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n padding: 5px 10px;\n}\n\nbody #app input,\nbody #app select {\n padding: 5px;\n outline: none;\n width: 100%;\n margin: 5px 0;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 1px solid #ccc;\n border-radius: 5px;\n}\n\nbody #app button {\n border: none;\n padding: 5px 10px;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n margin: 3px 0;\n border-radius: 3px;\n background-color: #d7dbdd;\n color: #32373b;\n}\n\nbody #app button:hover {\n background-color: #f3f4f4;\n}\n\nbody #app button:active {\n background-color: #e5e7e9;\n}\n\nbody #app button.black {\n background-color: #4e5459;\n color: #e5ffff;\n}\n\nbody #app button.black:hover {\n background-color: #363a3e;\n}\n\nbody #app button.black:active {\n background-color: #666e74;\n}\n\nbody #app button.blue {\n background-color: #59bacc;\n color: #e5ffff;\n}\n\nbody #app button.blue:hover {\n background-color: #80cad8;\n}\n\nbody #app button.blue:active {\n background-color: #6dc2d2;\n}\n\nbody #app button.red {\n background-color: #e2574c;\n color: #e5ffff;\n}\n\nbody #app button.red:hover {\n background-color: #e98078;\n}\n\nbody #app button.red:active {\n background-color: #e66c62;\n}\n\nbody #app button.green {\n background-color: #58ad69;\n color: #e5ffff;\n}\n\nbody #app button.green:hover {\n background-color: #7abe88;\n}\n\nbody #app button.green:active {\n background-color: #69b578;\n}\n\nbody #app button.orange {\n background-color: #ffbc49;\n color: #666;\n}\n\nbody #app button.orange:hover {\n background-color: #ffcf7c;\n}\n\nbody #app button.orange:active {\n background-color: #ffc563;\n}\n\nbody #app button.block {\n width: 100%;\n}\n\nbody #app button.sm {\n padding: 2px 5px;\n}\n\nbody #app ul {\n list-style: none;\n margin: 0;\n padding: 0;\n}\n\nbody #app ul li {\n padding: 5px;\n background-color: #f3f4f4;\n margin-bottom: 5px;\n border-radius: 3px;\n}\n\nbody #app ul li:last-child {\n margin-bottom: 0;\n}\n\nbody #app ul li:hover {\n background-color: #e5e7e9;\n}\n\nbody #app hr {\n background: -webkit-gradient(linear, left top, right top, from(#59bacc), to(#ffbc49));\n background: linear-gradient(to right, #59bacc, #ffbc49);\n height: 1px;\n border: none;\n}\n\nbody #app small {\n font-size: 12px;\n}\n/*# sourceMappingURL=style.css.map */" }, { "path": "ders-2/2-todo-app/src/components/AddSection.vue", "content": "\n\n\n" }, { "path": "ders-2/2-todo-app/src/components/ListSection.vue", "content": "\n\n" }, { "path": "ders-2/2-todo-app/src/components/ResultBar.vue", "content": "\n\n" }, { "path": "ders-2/2-todo-app/src/components/TodoList.vue", "content": "\n\n" }, { "path": "ders-2/2-todo-app/src/components/TodoListItem.vue", "content": "\n\n" }, { "path": "ders-2/2-todo-app/src/main.js", "content": "import { createApp } from \"vue\";\nimport App from \"./App.vue\";\nimport \"@/assets/style.css\";\n\ncreateApp(App).mount(\"#app\");\n" }, { "path": "ders-2/style.css", "content": "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;0,900;1,300;1,400&display=swap\");\n.text-blue {\n color: #59bacc;\n}\n\n.bg-blue {\n background-color: #59bacc;\n}\n\n.text-green {\n color: #58ad69;\n}\n\n.bg-green {\n background-color: #58ad69;\n}\n\n.text-orange {\n color: #ffbc49;\n}\n\n.bg-orange {\n background-color: #ffbc49;\n}\n\n.text-red {\n color: #e2574c;\n}\n\n.bg-red {\n background-color: #e2574c;\n}\n\n.text-black {\n color: #4e5459;\n}\n\n.bg-black {\n background-color: #4e5459;\n}\n\n.text-default {\n color: #d7dbdd;\n}\n\n.bg-default {\n background-color: #d7dbdd;\n}\n\n.text-white {\n color: #fff;\n}\n\n.bg-white {\n background-color: #fff;\n}\n\n.text-center {\n text-align: center;\n}\n\n.text-left {\n text-align: left;\n}\n\n.text-right {\n text-align: right;\n}\n\n.d-flex {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n}\n\n.justify-content-center {\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n}\n\n.justify-content-start {\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: flex-start;\n}\n\n.justify-content-between {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n}\n\n.justify-content-end {\n -webkit-box-pack: end;\n -ms-flex-pack: end;\n justify-content: flex-end;\n}\n\n.align-items-center {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.align-items-start {\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n}\n\n.align-items-end {\n -webkit-box-align: end;\n -ms-flex-align: end;\n align-items: flex-end;\n}\n\n.mt-0 {\n margin-top: 0rem;\n}\n\n.mb-0 {\n margin-bottom: 0rem;\n}\n\n.mr-0 {\n margin-right: 0rem;\n}\n\n.ml-0 {\n margin-left: 0rem;\n}\n\n.mx-0 {\n margin-left: 0rem;\n margin-right: 0rem;\n}\n\n.my-0 {\n margin-top: 0rem;\n margin-bottom: 0rem;\n}\n\n.pt-0 {\n padding-top: 0rem;\n}\n\n.pb-0 {\n padding-bottom: 0rem;\n}\n\n.pr-0 {\n padding-right: 0rem;\n}\n\n.pl-0 {\n padding-left: 0rem;\n}\n\n.px-0 {\n padding-left: 0rem;\n padding-right: 0rem;\n}\n\n.py-0 {\n padding-top: 0rem;\n padding-bottom: 0rem;\n}\n\n.mt-1 {\n margin-top: 0.25rem;\n}\n\n.mb-1 {\n margin-bottom: 0.25rem;\n}\n\n.mr-1 {\n margin-right: 0.25rem;\n}\n\n.ml-1 {\n margin-left: 0.25rem;\n}\n\n.mx-1 {\n margin-left: 0.25rem;\n margin-right: 0.25rem;\n}\n\n.my-1 {\n margin-top: 0.25rem;\n margin-bottom: 0.25rem;\n}\n\n.pt-1 {\n padding-top: 0.25rem;\n}\n\n.pb-1 {\n padding-bottom: 0.25rem;\n}\n\n.pr-1 {\n padding-right: 0.25rem;\n}\n\n.pl-1 {\n padding-left: 0.25rem;\n}\n\n.px-1 {\n padding-left: 0.25rem;\n padding-right: 0.25rem;\n}\n\n.py-1 {\n padding-top: 0.25rem;\n padding-bottom: 0.25rem;\n}\n\n.mt-2 {\n margin-top: 0.5rem;\n}\n\n.mb-2 {\n margin-bottom: 0.5rem;\n}\n\n.mr-2 {\n margin-right: 0.5rem;\n}\n\n.ml-2 {\n margin-left: 0.5rem;\n}\n\n.mx-2 {\n margin-left: 0.5rem;\n margin-right: 0.5rem;\n}\n\n.my-2 {\n margin-top: 0.5rem;\n margin-bottom: 0.5rem;\n}\n\n.pt-2 {\n padding-top: 0.5rem;\n}\n\n.pb-2 {\n padding-bottom: 0.5rem;\n}\n\n.pr-2 {\n padding-right: 0.5rem;\n}\n\n.pl-2 {\n padding-left: 0.5rem;\n}\n\n.px-2 {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n}\n\n.py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n\n.mt-3 {\n margin-top: 0.75rem;\n}\n\n.mb-3 {\n margin-bottom: 0.75rem;\n}\n\n.mr-3 {\n margin-right: 0.75rem;\n}\n\n.ml-3 {\n margin-left: 0.75rem;\n}\n\n.mx-3 {\n margin-left: 0.75rem;\n margin-right: 0.75rem;\n}\n\n.my-3 {\n margin-top: 0.75rem;\n margin-bottom: 0.75rem;\n}\n\n.pt-3 {\n padding-top: 0.75rem;\n}\n\n.pb-3 {\n padding-bottom: 0.75rem;\n}\n\n.pr-3 {\n padding-right: 0.75rem;\n}\n\n.pl-3 {\n padding-left: 0.75rem;\n}\n\n.px-3 {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n\n.py-3 {\n padding-top: 0.75rem;\n padding-bottom: 0.75rem;\n}\n\n.mt-4 {\n margin-top: 1rem;\n}\n\n.mb-4 {\n margin-bottom: 1rem;\n}\n\n.mr-4 {\n margin-right: 1rem;\n}\n\n.ml-4 {\n margin-left: 1rem;\n}\n\n.mx-4 {\n margin-left: 1rem;\n margin-right: 1rem;\n}\n\n.my-4 {\n margin-top: 1rem;\n margin-bottom: 1rem;\n}\n\n.pt-4 {\n padding-top: 1rem;\n}\n\n.pb-4 {\n padding-bottom: 1rem;\n}\n\n.pr-4 {\n padding-right: 1rem;\n}\n\n.pl-4 {\n padding-left: 1rem;\n}\n\n.px-4 {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n\n.py-4 {\n padding-top: 1rem;\n padding-bottom: 1rem;\n}\n\n.mt-5 {\n margin-top: 1.25rem;\n}\n\n.mb-5 {\n margin-bottom: 1.25rem;\n}\n\n.mr-5 {\n margin-right: 1.25rem;\n}\n\n.ml-5 {\n margin-left: 1.25rem;\n}\n\n.mx-5 {\n margin-left: 1.25rem;\n margin-right: 1.25rem;\n}\n\n.my-5 {\n margin-top: 1.25rem;\n margin-bottom: 1.25rem;\n}\n\n.pt-5 {\n padding-top: 1.25rem;\n}\n\n.pb-5 {\n padding-bottom: 1.25rem;\n}\n\n.pr-5 {\n padding-right: 1.25rem;\n}\n\n.pl-5 {\n padding-left: 1.25rem;\n}\n\n.px-5 {\n padding-left: 1.25rem;\n padding-right: 1.25rem;\n}\n\n.py-5 {\n padding-top: 1.25rem;\n padding-bottom: 1.25rem;\n}\n\n* {\n font-family: \"Roboto\", sans-serif;\n margin: 0;\n padding: 0;\n}\n\nbody {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n background-color: #e9ebee;\n padding: 10px;\n}\n\nbody #app {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -ms-flex-wrap: wrap;\n flex-wrap: wrap;\n}\n\nbody #app .container {\n border-radius: 5px;\n width: 375px;\n margin: 5px;\n -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);\n border: 1px solid #d0d1d5;\n background-color: white;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n padding: 5px 10px;\n}\n\nbody #app .container-sm {\n border-radius: 5px;\n max-width: 375px !important;\n margin: 5px;\n -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);\n border: 1px solid #d0d1d5;\n background-color: white;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n padding: 5px 10px;\n}\n\nbody #app input,\nbody #app select {\n padding: 5px;\n outline: none;\n width: 100%;\n margin: 5px 0;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 1px solid #ccc;\n border-radius: 5px;\n}\n\nbody #app button {\n border: none;\n padding: 5px 10px;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n margin: 3px 0;\n border-radius: 3px;\n background-color: #d7dbdd;\n color: #32373b;\n}\n\nbody #app button:hover {\n background-color: #f3f4f4;\n}\n\nbody #app button:active {\n background-color: #e5e7e9;\n}\n\nbody #app button.black {\n background-color: #4e5459;\n color: #e5ffff;\n}\n\nbody #app button.black:hover {\n background-color: #363a3e;\n}\n\nbody #app button.black:active {\n background-color: #666e74;\n}\n\nbody #app button.blue {\n background-color: #59bacc;\n color: #e5ffff;\n}\n\nbody #app button.blue:hover {\n background-color: #80cad8;\n}\n\nbody #app button.blue:active {\n background-color: #6dc2d2;\n}\n\nbody #app button.red {\n background-color: #e2574c;\n color: #e5ffff;\n}\n\nbody #app button.red:hover {\n background-color: #e98078;\n}\n\nbody #app button.red:active {\n background-color: #e66c62;\n}\n\nbody #app button.green {\n background-color: #58ad69;\n color: #e5ffff;\n}\n\nbody #app button.green:hover {\n background-color: #7abe88;\n}\n\nbody #app button.green:active {\n background-color: #69b578;\n}\n\nbody #app button.orange {\n background-color: #ffbc49;\n color: #666;\n}\n\nbody #app button.orange:hover {\n background-color: #ffcf7c;\n}\n\nbody #app button.orange:active {\n background-color: #ffc563;\n}\n\nbody #app button.block {\n width: 100%;\n}\n\nbody #app button.sm {\n padding: 2px 5px;\n}\n\nbody #app ul {\n list-style: none;\n margin: 0;\n padding: 0;\n}\n\nbody #app ul li {\n padding: 5px;\n background-color: #f3f4f4;\n margin-bottom: 5px;\n border-radius: 3px;\n}\n\nbody #app ul li:last-child {\n margin-bottom: 0;\n}\n\nbody #app ul li:hover {\n background-color: #e5e7e9;\n}\n\nbody #app hr {\n background: -webkit-gradient(linear, left top, right top, from(#59bacc), to(#ffbc49));\n background: linear-gradient(to right, #59bacc, #ffbc49);\n height: 1px;\n border: none;\n}\n\nbody #app small {\n font-size: 12px;\n}\n/*# sourceMappingURL=style.css.map */" }, { "path": "ders-3/0-components-communications/README.md", "content": "# 0-components-communications\n\n## Project setup\n```\nnpm install\n```\n\n### Compiles and hot-reloads for development\n```\nnpm run serve\n```\n\n### Compiles and minifies for production\n```\nnpm run build\n```\n\n### Lints and fixes files\n```\nnpm run lint\n```\n\n### Customize configuration\nSee [Configuration Reference](https://cli.vuejs.org/config/).\n" }, { "path": "ders-3/0-components-communications/babel.config.js", "content": "module.exports = {\n presets: [\n '@vue/cli-plugin-babel/preset'\n ]\n}\n" }, { "path": "ders-3/0-components-communications/package.json", "content": "{\n \"name\": \"0-components-communications\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"scripts\": {\n \"serve\": \"vue-cli-service serve\",\n \"build\": \"vue-cli-service build\",\n \"lint\": \"vue-cli-service lint\"\n },\n \"dependencies\": {\n \"core-js\": \"^3.6.5\",\n \"vue\": \"^3.0.0\"\n },\n \"devDependencies\": {\n \"@vue/cli-plugin-babel\": \"~4.5.0\",\n \"@vue/cli-plugin-eslint\": \"~4.5.0\",\n \"@vue/cli-service\": \"~4.5.0\",\n \"@vue/compiler-sfc\": \"^3.0.0\",\n \"babel-eslint\": \"^10.1.0\",\n \"eslint\": \"^6.7.2\",\n \"eslint-plugin-vue\": \"^7.0.0\"\n },\n \"eslintConfig\": {\n \"root\": true,\n \"env\": {\n \"node\": true\n },\n \"extends\": [\n \"plugin:vue/vue3-essential\",\n \"eslint:recommended\"\n ],\n \"parserOptions\": {\n \"parser\": \"babel-eslint\"\n },\n \"rules\": {}\n },\n \"browserslist\": [\n \"> 1%\",\n \"last 2 versions\",\n \"not dead\"\n ]\n}\n" }, { "path": "ders-3/0-components-communications/public/index.html", "content": "\n\n \n \n \n \n favicon.ico\">\n <%= htmlWebpackPlugin.options.title %>\n \n \n \n
      \n \n \n\n" }, { "path": "ders-3/0-components-communications/src/App.vue", "content": "\n\n\n" }, { "path": "ders-3/0-components-communications/src/assets/style.css", "content": "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;0,900;1,300;1,400&display=swap\");\n.text-blue {\n color: #59bacc;\n}\n\n.bg-blue {\n background-color: #59bacc;\n}\n\n.text-green {\n color: #58ad69;\n}\n\n.bg-green {\n background-color: #58ad69;\n}\n\n.text-orange {\n color: #ffbc49;\n}\n\n.bg-orange {\n background-color: #ffbc49;\n}\n\n.text-red {\n color: #e2574c;\n}\n\n.bg-red {\n background-color: #e2574c;\n}\n\n.text-black {\n color: #4e5459;\n}\n\n.bg-black {\n background-color: #4e5459;\n}\n\n.text-default {\n color: #d7dbdd;\n}\n\n.bg-default {\n background-color: #d7dbdd;\n}\n\n.text-white {\n color: #fff;\n}\n\n.bg-white {\n background-color: #fff;\n}\n\n.text-center {\n text-align: center;\n}\n\n.text-left {\n text-align: left;\n}\n\n.text-right {\n text-align: right;\n}\n\n.d-flex {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n}\n\n.justify-content-center {\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n}\n\n.justify-content-start {\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: flex-start;\n}\n\n.justify-content-between {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n}\n\n.justify-content-end {\n -webkit-box-pack: end;\n -ms-flex-pack: end;\n justify-content: flex-end;\n}\n\n.align-items-center {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.align-items-start {\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n}\n\n.align-items-end {\n -webkit-box-align: end;\n -ms-flex-align: end;\n align-items: flex-end;\n}\n\n.mt-0 {\n margin-top: 0rem;\n}\n\n.mb-0 {\n margin-bottom: 0rem;\n}\n\n.mr-0 {\n margin-right: 0rem;\n}\n\n.ml-0 {\n margin-left: 0rem;\n}\n\n.mx-0 {\n margin-left: 0rem;\n margin-right: 0rem;\n}\n\n.my-0 {\n margin-top: 0rem;\n margin-bottom: 0rem;\n}\n\n.pt-0 {\n padding-top: 0rem;\n}\n\n.pb-0 {\n padding-bottom: 0rem;\n}\n\n.pr-0 {\n padding-right: 0rem;\n}\n\n.pl-0 {\n padding-left: 0rem;\n}\n\n.px-0 {\n padding-left: 0rem;\n padding-right: 0rem;\n}\n\n.py-0 {\n padding-top: 0rem;\n padding-bottom: 0rem;\n}\n\n.mt-1 {\n margin-top: 0.25rem;\n}\n\n.mb-1 {\n margin-bottom: 0.25rem;\n}\n\n.mr-1 {\n margin-right: 0.25rem;\n}\n\n.ml-1 {\n margin-left: 0.25rem;\n}\n\n.mx-1 {\n margin-left: 0.25rem;\n margin-right: 0.25rem;\n}\n\n.my-1 {\n margin-top: 0.25rem;\n margin-bottom: 0.25rem;\n}\n\n.pt-1 {\n padding-top: 0.25rem;\n}\n\n.pb-1 {\n padding-bottom: 0.25rem;\n}\n\n.pr-1 {\n padding-right: 0.25rem;\n}\n\n.pl-1 {\n padding-left: 0.25rem;\n}\n\n.px-1 {\n padding-left: 0.25rem;\n padding-right: 0.25rem;\n}\n\n.py-1 {\n padding-top: 0.25rem;\n padding-bottom: 0.25rem;\n}\n\n.mt-2 {\n margin-top: 0.5rem;\n}\n\n.mb-2 {\n margin-bottom: 0.5rem;\n}\n\n.mr-2 {\n margin-right: 0.5rem;\n}\n\n.ml-2 {\n margin-left: 0.5rem;\n}\n\n.mx-2 {\n margin-left: 0.5rem;\n margin-right: 0.5rem;\n}\n\n.my-2 {\n margin-top: 0.5rem;\n margin-bottom: 0.5rem;\n}\n\n.pt-2 {\n padding-top: 0.5rem;\n}\n\n.pb-2 {\n padding-bottom: 0.5rem;\n}\n\n.pr-2 {\n padding-right: 0.5rem;\n}\n\n.pl-2 {\n padding-left: 0.5rem;\n}\n\n.px-2 {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n}\n\n.py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n\n.mt-3 {\n margin-top: 0.75rem;\n}\n\n.mb-3 {\n margin-bottom: 0.75rem;\n}\n\n.mr-3 {\n margin-right: 0.75rem;\n}\n\n.ml-3 {\n margin-left: 0.75rem;\n}\n\n.mx-3 {\n margin-left: 0.75rem;\n margin-right: 0.75rem;\n}\n\n.my-3 {\n margin-top: 0.75rem;\n margin-bottom: 0.75rem;\n}\n\n.pt-3 {\n padding-top: 0.75rem;\n}\n\n.pb-3 {\n padding-bottom: 0.75rem;\n}\n\n.pr-3 {\n padding-right: 0.75rem;\n}\n\n.pl-3 {\n padding-left: 0.75rem;\n}\n\n.px-3 {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n\n.py-3 {\n padding-top: 0.75rem;\n padding-bottom: 0.75rem;\n}\n\n.mt-4 {\n margin-top: 1rem;\n}\n\n.mb-4 {\n margin-bottom: 1rem;\n}\n\n.mr-4 {\n margin-right: 1rem;\n}\n\n.ml-4 {\n margin-left: 1rem;\n}\n\n.mx-4 {\n margin-left: 1rem;\n margin-right: 1rem;\n}\n\n.my-4 {\n margin-top: 1rem;\n margin-bottom: 1rem;\n}\n\n.pt-4 {\n padding-top: 1rem;\n}\n\n.pb-4 {\n padding-bottom: 1rem;\n}\n\n.pr-4 {\n padding-right: 1rem;\n}\n\n.pl-4 {\n padding-left: 1rem;\n}\n\n.px-4 {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n\n.py-4 {\n padding-top: 1rem;\n padding-bottom: 1rem;\n}\n\n.mt-5 {\n margin-top: 1.25rem;\n}\n\n.mb-5 {\n margin-bottom: 1.25rem;\n}\n\n.mr-5 {\n margin-right: 1.25rem;\n}\n\n.ml-5 {\n margin-left: 1.25rem;\n}\n\n.mx-5 {\n margin-left: 1.25rem;\n margin-right: 1.25rem;\n}\n\n.my-5 {\n margin-top: 1.25rem;\n margin-bottom: 1.25rem;\n}\n\n.pt-5 {\n padding-top: 1.25rem;\n}\n\n.pb-5 {\n padding-bottom: 1.25rem;\n}\n\n.pr-5 {\n padding-right: 1.25rem;\n}\n\n.pl-5 {\n padding-left: 1.25rem;\n}\n\n.px-5 {\n padding-left: 1.25rem;\n padding-right: 1.25rem;\n}\n\n.py-5 {\n padding-top: 1.25rem;\n padding-bottom: 1.25rem;\n}\n\n* {\n font-family: \"Roboto\", sans-serif;\n margin: 0;\n padding: 0;\n}\n\nbody {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n background-color: #e9ebee;\n padding: 10px;\n}\n\nbody #app {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -ms-flex-wrap: wrap;\n flex-wrap: wrap;\n}\n\nbody #app .container {\n border-radius: 5px;\n width: 375px;\n margin: 5px;\n -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);\n border: 1px solid #d0d1d5;\n background-color: white;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n padding: 5px 10px;\n}\n\nbody #app .container-sm {\n border-radius: 5px;\n max-width: 375px !important;\n margin: 5px;\n -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);\n border: 1px solid #d0d1d5;\n background-color: white;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n padding: 5px 10px;\n}\n\nbody #app input,\nbody #app select {\n padding: 5px;\n outline: none;\n width: 100%;\n margin: 5px 0;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 1px solid #ccc;\n border-radius: 5px;\n}\n\nbody #app button {\n border: none;\n padding: 5px 10px;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n margin: 3px 0;\n border-radius: 3px;\n background-color: #d7dbdd;\n color: #32373b;\n}\n\nbody #app button:hover {\n background-color: #f3f4f4;\n}\n\nbody #app button:active {\n background-color: #e5e7e9;\n}\n\nbody #app button.black {\n background-color: #4e5459;\n color: #e5ffff;\n}\n\nbody #app button.black:hover {\n background-color: #363a3e;\n}\n\nbody #app button.black:active {\n background-color: #666e74;\n}\n\nbody #app button.blue {\n background-color: #59bacc;\n color: #e5ffff;\n}\n\nbody #app button.blue:hover {\n background-color: #80cad8;\n}\n\nbody #app button.blue:active {\n background-color: #6dc2d2;\n}\n\nbody #app button.red {\n background-color: #e2574c;\n color: #e5ffff;\n}\n\nbody #app button.red:hover {\n background-color: #e98078;\n}\n\nbody #app button.red:active {\n background-color: #e66c62;\n}\n\nbody #app button.green {\n background-color: #58ad69;\n color: #e5ffff;\n}\n\nbody #app button.green:hover {\n background-color: #7abe88;\n}\n\nbody #app button.green:active {\n background-color: #69b578;\n}\n\nbody #app button.orange {\n background-color: #ffbc49;\n color: #666;\n}\n\nbody #app button.orange:hover {\n background-color: #ffcf7c;\n}\n\nbody #app button.orange:active {\n background-color: #ffc563;\n}\n\nbody #app button.block {\n width: 100%;\n}\n\nbody #app button.sm {\n padding: 2px 5px;\n}\n\nbody #app ul {\n list-style: none;\n margin: 0;\n padding: 0;\n}\n\nbody #app ul li {\n padding: 5px;\n background-color: #f3f4f4;\n margin-bottom: 5px;\n border-radius: 3px;\n}\n\nbody #app ul li:last-child {\n margin-bottom: 0;\n}\n\nbody #app ul li:hover {\n background-color: #e5e7e9;\n}\n\nbody #app hr {\n background: -webkit-gradient(linear, left top, right top, from(#59bacc), to(#ffbc49));\n background: linear-gradient(to right, #59bacc, #ffbc49);\n height: 1px;\n border: none;\n}\n\nbody #app small {\n font-size: 12px;\n}\n/*# sourceMappingURL=style.css.map */" }, { "path": "ders-3/0-components-communications/src/components/AddSection.vue", "content": "\n\n" }, { "path": "ders-3/0-components-communications/src/components/ListSection.vue", "content": "\n\n" }, { "path": "ders-3/0-components-communications/src/components/UserSection.vue", "content": "\n\n" }, { "path": "ders-3/0-components-communications/src/main.js", "content": "import { createApp } from \"vue\";\nimport App from \"./App.vue\";\nimport \"@/assets/style.css\";\ncreateApp(App).mount(\"#app\");\n" }, { "path": "ders-3/1-component-slots/README.md", "content": "# 1-component-slots\n\n## Project setup\n```\nnpm install\n```\n\n### Compiles and hot-reloads for development\n```\nnpm run serve\n```\n\n### Compiles and minifies for production\n```\nnpm run build\n```\n\n### Lints and fixes files\n```\nnpm run lint\n```\n\n### Customize configuration\nSee [Configuration Reference](https://cli.vuejs.org/config/).\n" }, { "path": "ders-3/1-component-slots/babel.config.js", "content": "module.exports = {\n presets: [\n '@vue/cli-plugin-babel/preset'\n ]\n}\n" }, { "path": "ders-3/1-component-slots/package.json", "content": "{\n \"name\": \"1-component-slots\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"scripts\": {\n \"serve\": \"vue-cli-service serve\",\n \"build\": \"vue-cli-service build\",\n \"lint\": \"vue-cli-service lint\"\n },\n \"dependencies\": {\n \"core-js\": \"^3.6.5\",\n \"vue\": \"^3.0.0\"\n },\n \"devDependencies\": {\n \"@vue/cli-plugin-babel\": \"~4.5.0\",\n \"@vue/cli-plugin-eslint\": \"~4.5.0\",\n \"@vue/cli-service\": \"~4.5.0\",\n \"@vue/compiler-sfc\": \"^3.0.0\",\n \"babel-eslint\": \"^10.1.0\",\n \"eslint\": \"^6.7.2\",\n \"eslint-plugin-vue\": \"^7.0.0\"\n },\n \"eslintConfig\": {\n \"root\": true,\n \"env\": {\n \"node\": true\n },\n \"extends\": [\n \"plugin:vue/vue3-essential\",\n \"eslint:recommended\"\n ],\n \"parserOptions\": {\n \"parser\": \"babel-eslint\"\n },\n \"rules\": {}\n },\n \"browserslist\": [\n \"> 1%\",\n \"last 2 versions\",\n \"not dead\"\n ]\n}\n" }, { "path": "ders-3/1-component-slots/public/index.html", "content": "\n\n \n \n \n \n favicon.ico\">\n <%= htmlWebpackPlugin.options.title %>\n \n \n \n
      \n \n \n\n" }, { "path": "ders-3/1-component-slots/src/App.vue", "content": "\n\n\n" }, { "path": "ders-3/1-component-slots/src/assets/style.css", "content": "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;0,900;1,300;1,400&display=swap\");\n.text-blue {\n color: #59bacc;\n}\n\n.bg-blue {\n background-color: #59bacc;\n}\n\n.text-green {\n color: #58ad69;\n}\n\n.bg-green {\n background-color: #58ad69;\n}\n\n.text-orange {\n color: #ffbc49;\n}\n\n.bg-orange {\n background-color: #ffbc49;\n}\n\n.text-red {\n color: #e2574c;\n}\n\n.bg-red {\n background-color: #e2574c;\n}\n\n.text-black {\n color: #4e5459;\n}\n\n.bg-black {\n background-color: #4e5459;\n}\n\n.text-default {\n color: #d7dbdd;\n}\n\n.bg-default {\n background-color: #d7dbdd;\n}\n\n.text-white {\n color: #fff;\n}\n\n.bg-white {\n background-color: #fff;\n}\n\n.text-center {\n text-align: center;\n}\n\n.text-left {\n text-align: left;\n}\n\n.text-right {\n text-align: right;\n}\n\n.d-flex {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n}\n\n.justify-content-center {\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n}\n\n.justify-content-start {\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: flex-start;\n}\n\n.justify-content-between {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n}\n\n.justify-content-end {\n -webkit-box-pack: end;\n -ms-flex-pack: end;\n justify-content: flex-end;\n}\n\n.align-items-center {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.align-items-start {\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n}\n\n.align-items-end {\n -webkit-box-align: end;\n -ms-flex-align: end;\n align-items: flex-end;\n}\n\n.mt-0 {\n margin-top: 0rem;\n}\n\n.mb-0 {\n margin-bottom: 0rem;\n}\n\n.mr-0 {\n margin-right: 0rem;\n}\n\n.ml-0 {\n margin-left: 0rem;\n}\n\n.mx-0 {\n margin-left: 0rem;\n margin-right: 0rem;\n}\n\n.my-0 {\n margin-top: 0rem;\n margin-bottom: 0rem;\n}\n\n.pt-0 {\n padding-top: 0rem;\n}\n\n.pb-0 {\n padding-bottom: 0rem;\n}\n\n.pr-0 {\n padding-right: 0rem;\n}\n\n.pl-0 {\n padding-left: 0rem;\n}\n\n.px-0 {\n padding-left: 0rem;\n padding-right: 0rem;\n}\n\n.py-0 {\n padding-top: 0rem;\n padding-bottom: 0rem;\n}\n\n.mt-1 {\n margin-top: 0.25rem;\n}\n\n.mb-1 {\n margin-bottom: 0.25rem;\n}\n\n.mr-1 {\n margin-right: 0.25rem;\n}\n\n.ml-1 {\n margin-left: 0.25rem;\n}\n\n.mx-1 {\n margin-left: 0.25rem;\n margin-right: 0.25rem;\n}\n\n.my-1 {\n margin-top: 0.25rem;\n margin-bottom: 0.25rem;\n}\n\n.pt-1 {\n padding-top: 0.25rem;\n}\n\n.pb-1 {\n padding-bottom: 0.25rem;\n}\n\n.pr-1 {\n padding-right: 0.25rem;\n}\n\n.pl-1 {\n padding-left: 0.25rem;\n}\n\n.px-1 {\n padding-left: 0.25rem;\n padding-right: 0.25rem;\n}\n\n.py-1 {\n padding-top: 0.25rem;\n padding-bottom: 0.25rem;\n}\n\n.mt-2 {\n margin-top: 0.5rem;\n}\n\n.mb-2 {\n margin-bottom: 0.5rem;\n}\n\n.mr-2 {\n margin-right: 0.5rem;\n}\n\n.ml-2 {\n margin-left: 0.5rem;\n}\n\n.mx-2 {\n margin-left: 0.5rem;\n margin-right: 0.5rem;\n}\n\n.my-2 {\n margin-top: 0.5rem;\n margin-bottom: 0.5rem;\n}\n\n.pt-2 {\n padding-top: 0.5rem;\n}\n\n.pb-2 {\n padding-bottom: 0.5rem;\n}\n\n.pr-2 {\n padding-right: 0.5rem;\n}\n\n.pl-2 {\n padding-left: 0.5rem;\n}\n\n.px-2 {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n}\n\n.py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n\n.mt-3 {\n margin-top: 0.75rem;\n}\n\n.mb-3 {\n margin-bottom: 0.75rem;\n}\n\n.mr-3 {\n margin-right: 0.75rem;\n}\n\n.ml-3 {\n margin-left: 0.75rem;\n}\n\n.mx-3 {\n margin-left: 0.75rem;\n margin-right: 0.75rem;\n}\n\n.my-3 {\n margin-top: 0.75rem;\n margin-bottom: 0.75rem;\n}\n\n.pt-3 {\n padding-top: 0.75rem;\n}\n\n.pb-3 {\n padding-bottom: 0.75rem;\n}\n\n.pr-3 {\n padding-right: 0.75rem;\n}\n\n.pl-3 {\n padding-left: 0.75rem;\n}\n\n.px-3 {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n\n.py-3 {\n padding-top: 0.75rem;\n padding-bottom: 0.75rem;\n}\n\n.mt-4 {\n margin-top: 1rem;\n}\n\n.mb-4 {\n margin-bottom: 1rem;\n}\n\n.mr-4 {\n margin-right: 1rem;\n}\n\n.ml-4 {\n margin-left: 1rem;\n}\n\n.mx-4 {\n margin-left: 1rem;\n margin-right: 1rem;\n}\n\n.my-4 {\n margin-top: 1rem;\n margin-bottom: 1rem;\n}\n\n.pt-4 {\n padding-top: 1rem;\n}\n\n.pb-4 {\n padding-bottom: 1rem;\n}\n\n.pr-4 {\n padding-right: 1rem;\n}\n\n.pl-4 {\n padding-left: 1rem;\n}\n\n.px-4 {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n\n.py-4 {\n padding-top: 1rem;\n padding-bottom: 1rem;\n}\n\n.mt-5 {\n margin-top: 1.25rem;\n}\n\n.mb-5 {\n margin-bottom: 1.25rem;\n}\n\n.mr-5 {\n margin-right: 1.25rem;\n}\n\n.ml-5 {\n margin-left: 1.25rem;\n}\n\n.mx-5 {\n margin-left: 1.25rem;\n margin-right: 1.25rem;\n}\n\n.my-5 {\n margin-top: 1.25rem;\n margin-bottom: 1.25rem;\n}\n\n.pt-5 {\n padding-top: 1.25rem;\n}\n\n.pb-5 {\n padding-bottom: 1.25rem;\n}\n\n.pr-5 {\n padding-right: 1.25rem;\n}\n\n.pl-5 {\n padding-left: 1.25rem;\n}\n\n.px-5 {\n padding-left: 1.25rem;\n padding-right: 1.25rem;\n}\n\n.py-5 {\n padding-top: 1.25rem;\n padding-bottom: 1.25rem;\n}\n\n* {\n font-family: \"Roboto\", sans-serif;\n margin: 0;\n padding: 0;\n}\n\nbody {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n background-color: #e9ebee;\n padding: 10px;\n}\n\nbody #app {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -ms-flex-wrap: wrap;\n flex-wrap: wrap;\n}\n\nbody #app .container {\n border-radius: 5px;\n width: 375px;\n margin: 5px;\n -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);\n border: 1px solid #d0d1d5;\n background-color: white;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n padding: 5px 10px;\n}\n\nbody #app .container-sm {\n border-radius: 5px;\n max-width: 375px !important;\n margin: 5px;\n -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);\n border: 1px solid #d0d1d5;\n background-color: white;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n padding: 5px 10px;\n}\n\nbody #app input,\nbody #app select {\n padding: 5px;\n outline: none;\n width: 100%;\n margin: 5px 0;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 1px solid #ccc;\n border-radius: 5px;\n}\n\nbody #app button {\n border: none;\n padding: 5px 10px;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n margin: 3px 0;\n border-radius: 3px;\n background-color: #d7dbdd;\n color: #32373b;\n}\n\nbody #app button:hover {\n background-color: #f3f4f4;\n}\n\nbody #app button:active {\n background-color: #e5e7e9;\n}\n\nbody #app button.black {\n background-color: #4e5459;\n color: #e5ffff;\n}\n\nbody #app button.black:hover {\n background-color: #363a3e;\n}\n\nbody #app button.black:active {\n background-color: #666e74;\n}\n\nbody #app button.blue {\n background-color: #59bacc;\n color: #e5ffff;\n}\n\nbody #app button.blue:hover {\n background-color: #80cad8;\n}\n\nbody #app button.blue:active {\n background-color: #6dc2d2;\n}\n\nbody #app button.red {\n background-color: #e2574c;\n color: #e5ffff;\n}\n\nbody #app button.red:hover {\n background-color: #e98078;\n}\n\nbody #app button.red:active {\n background-color: #e66c62;\n}\n\nbody #app button.green {\n background-color: #58ad69;\n color: #e5ffff;\n}\n\nbody #app button.green:hover {\n background-color: #7abe88;\n}\n\nbody #app button.green:active {\n background-color: #69b578;\n}\n\nbody #app button.orange {\n background-color: #ffbc49;\n color: #666;\n}\n\nbody #app button.orange:hover {\n background-color: #ffcf7c;\n}\n\nbody #app button.orange:active {\n background-color: #ffc563;\n}\n\nbody #app button.block {\n width: 100%;\n}\n\nbody #app button.sm {\n padding: 2px 5px;\n}\n\nbody #app ul {\n list-style: none;\n margin: 0;\n padding: 0;\n}\n\nbody #app ul li {\n padding: 5px;\n background-color: #f3f4f4;\n margin-bottom: 5px;\n border-radius: 3px;\n}\n\nbody #app ul li:last-child {\n margin-bottom: 0;\n}\n\nbody #app ul li:hover {\n background-color: #e5e7e9;\n}\n\nbody #app hr {\n background: -webkit-gradient(linear, left top, right top, from(#59bacc), to(#ffbc49));\n background: linear-gradient(to right, #59bacc, #ffbc49);\n height: 1px;\n border: none;\n}\n\nbody #app small {\n font-size: 12px;\n}\n/*# sourceMappingURL=style.css.map */" }, { "path": "ders-3/1-component-slots/src/components/Modal.vue", "content": "\n\n" }, { "path": "ders-3/1-component-slots/src/main.js", "content": "import { createApp } from \"vue\";\nimport App from \"./App.vue\";\nimport \"@/assets/style.css\";\ncreateApp(App).mount(\"#app\");\n" }, { "path": "ders-3/2-dynamic-components/README.md", "content": "# 2-dynamic-components\n\n## Project setup\n```\nnpm install\n```\n\n### Compiles and hot-reloads for development\n```\nnpm run serve\n```\n\n### Compiles and minifies for production\n```\nnpm run build\n```\n\n### Lints and fixes files\n```\nnpm run lint\n```\n\n### Customize configuration\nSee [Configuration Reference](https://cli.vuejs.org/config/).\n" }, { "path": "ders-3/2-dynamic-components/babel.config.js", "content": "module.exports = {\n presets: [\n '@vue/cli-plugin-babel/preset'\n ]\n}\n" }, { "path": "ders-3/2-dynamic-components/package.json", "content": "{\n \"name\": \"2-dynamic-components\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"scripts\": {\n \"serve\": \"vue-cli-service serve\",\n \"build\": \"vue-cli-service build\",\n \"lint\": \"vue-cli-service lint\"\n },\n \"dependencies\": {\n \"core-js\": \"^3.6.5\",\n \"vue\": \"^3.0.0\"\n },\n \"devDependencies\": {\n \"@vue/cli-plugin-babel\": \"~4.5.0\",\n \"@vue/cli-plugin-eslint\": \"~4.5.0\",\n \"@vue/cli-service\": \"~4.5.0\",\n \"@vue/compiler-sfc\": \"^3.0.0\",\n \"babel-eslint\": \"^10.1.0\",\n \"eslint\": \"^6.7.2\",\n \"eslint-plugin-vue\": \"^7.0.0\"\n },\n \"eslintConfig\": {\n \"root\": true,\n \"env\": {\n \"node\": true\n },\n \"extends\": [\n \"plugin:vue/vue3-essential\",\n \"eslint:recommended\"\n ],\n \"parserOptions\": {\n \"parser\": \"babel-eslint\"\n },\n \"rules\": {}\n },\n \"browserslist\": [\n \"> 1%\",\n \"last 2 versions\",\n \"not dead\"\n ]\n}\n" }, { "path": "ders-3/2-dynamic-components/public/index.html", "content": "\n\n \n \n \n \n favicon.ico\">\n <%= htmlWebpackPlugin.options.title %>\n \n \n \n
      \n \n \n\n" }, { "path": "ders-3/2-dynamic-components/src/App.vue", "content": "\n\n" }, { "path": "ders-3/2-dynamic-components/src/assets/style.css", "content": "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;0,900;1,300;1,400&display=swap\");\n.text-blue {\n color: #59bacc;\n}\n\n.bg-blue {\n background-color: #59bacc;\n}\n\n.text-green {\n color: #58ad69;\n}\n\n.bg-green {\n background-color: #58ad69;\n}\n\n.text-orange {\n color: #ffbc49;\n}\n\n.bg-orange {\n background-color: #ffbc49;\n}\n\n.text-red {\n color: #e2574c;\n}\n\n.bg-red {\n background-color: #e2574c;\n}\n\n.text-black {\n color: #4e5459;\n}\n\n.bg-black {\n background-color: #4e5459;\n}\n\n.text-default {\n color: #d7dbdd;\n}\n\n.bg-default {\n background-color: #d7dbdd;\n}\n\n.text-white {\n color: #fff;\n}\n\n.bg-white {\n background-color: #fff;\n}\n\n.text-center {\n text-align: center;\n}\n\n.text-left {\n text-align: left;\n}\n\n.text-right {\n text-align: right;\n}\n\n.d-flex {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n}\n\n.justify-content-center {\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n}\n\n.justify-content-start {\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: flex-start;\n}\n\n.justify-content-between {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n}\n\n.justify-content-end {\n -webkit-box-pack: end;\n -ms-flex-pack: end;\n justify-content: flex-end;\n}\n\n.align-items-center {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.align-items-start {\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n}\n\n.align-items-end {\n -webkit-box-align: end;\n -ms-flex-align: end;\n align-items: flex-end;\n}\n\n.mt-0 {\n margin-top: 0rem;\n}\n\n.mb-0 {\n margin-bottom: 0rem;\n}\n\n.mr-0 {\n margin-right: 0rem;\n}\n\n.ml-0 {\n margin-left: 0rem;\n}\n\n.mx-0 {\n margin-left: 0rem;\n margin-right: 0rem;\n}\n\n.my-0 {\n margin-top: 0rem;\n margin-bottom: 0rem;\n}\n\n.pt-0 {\n padding-top: 0rem;\n}\n\n.pb-0 {\n padding-bottom: 0rem;\n}\n\n.pr-0 {\n padding-right: 0rem;\n}\n\n.pl-0 {\n padding-left: 0rem;\n}\n\n.px-0 {\n padding-left: 0rem;\n padding-right: 0rem;\n}\n\n.py-0 {\n padding-top: 0rem;\n padding-bottom: 0rem;\n}\n\n.mt-1 {\n margin-top: 0.25rem;\n}\n\n.mb-1 {\n margin-bottom: 0.25rem;\n}\n\n.mr-1 {\n margin-right: 0.25rem;\n}\n\n.ml-1 {\n margin-left: 0.25rem;\n}\n\n.mx-1 {\n margin-left: 0.25rem;\n margin-right: 0.25rem;\n}\n\n.my-1 {\n margin-top: 0.25rem;\n margin-bottom: 0.25rem;\n}\n\n.pt-1 {\n padding-top: 0.25rem;\n}\n\n.pb-1 {\n padding-bottom: 0.25rem;\n}\n\n.pr-1 {\n padding-right: 0.25rem;\n}\n\n.pl-1 {\n padding-left: 0.25rem;\n}\n\n.px-1 {\n padding-left: 0.25rem;\n padding-right: 0.25rem;\n}\n\n.py-1 {\n padding-top: 0.25rem;\n padding-bottom: 0.25rem;\n}\n\n.mt-2 {\n margin-top: 0.5rem;\n}\n\n.mb-2 {\n margin-bottom: 0.5rem;\n}\n\n.mr-2 {\n margin-right: 0.5rem;\n}\n\n.ml-2 {\n margin-left: 0.5rem;\n}\n\n.mx-2 {\n margin-left: 0.5rem;\n margin-right: 0.5rem;\n}\n\n.my-2 {\n margin-top: 0.5rem;\n margin-bottom: 0.5rem;\n}\n\n.pt-2 {\n padding-top: 0.5rem;\n}\n\n.pb-2 {\n padding-bottom: 0.5rem;\n}\n\n.pr-2 {\n padding-right: 0.5rem;\n}\n\n.pl-2 {\n padding-left: 0.5rem;\n}\n\n.px-2 {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n}\n\n.py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n\n.mt-3 {\n margin-top: 0.75rem;\n}\n\n.mb-3 {\n margin-bottom: 0.75rem;\n}\n\n.mr-3 {\n margin-right: 0.75rem;\n}\n\n.ml-3 {\n margin-left: 0.75rem;\n}\n\n.mx-3 {\n margin-left: 0.75rem;\n margin-right: 0.75rem;\n}\n\n.my-3 {\n margin-top: 0.75rem;\n margin-bottom: 0.75rem;\n}\n\n.pt-3 {\n padding-top: 0.75rem;\n}\n\n.pb-3 {\n padding-bottom: 0.75rem;\n}\n\n.pr-3 {\n padding-right: 0.75rem;\n}\n\n.pl-3 {\n padding-left: 0.75rem;\n}\n\n.px-3 {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n\n.py-3 {\n padding-top: 0.75rem;\n padding-bottom: 0.75rem;\n}\n\n.mt-4 {\n margin-top: 1rem;\n}\n\n.mb-4 {\n margin-bottom: 1rem;\n}\n\n.mr-4 {\n margin-right: 1rem;\n}\n\n.ml-4 {\n margin-left: 1rem;\n}\n\n.mx-4 {\n margin-left: 1rem;\n margin-right: 1rem;\n}\n\n.my-4 {\n margin-top: 1rem;\n margin-bottom: 1rem;\n}\n\n.pt-4 {\n padding-top: 1rem;\n}\n\n.pb-4 {\n padding-bottom: 1rem;\n}\n\n.pr-4 {\n padding-right: 1rem;\n}\n\n.pl-4 {\n padding-left: 1rem;\n}\n\n.px-4 {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n\n.py-4 {\n padding-top: 1rem;\n padding-bottom: 1rem;\n}\n\n.mt-5 {\n margin-top: 1.25rem;\n}\n\n.mb-5 {\n margin-bottom: 1.25rem;\n}\n\n.mr-5 {\n margin-right: 1.25rem;\n}\n\n.ml-5 {\n margin-left: 1.25rem;\n}\n\n.mx-5 {\n margin-left: 1.25rem;\n margin-right: 1.25rem;\n}\n\n.my-5 {\n margin-top: 1.25rem;\n margin-bottom: 1.25rem;\n}\n\n.pt-5 {\n padding-top: 1.25rem;\n}\n\n.pb-5 {\n padding-bottom: 1.25rem;\n}\n\n.pr-5 {\n padding-right: 1.25rem;\n}\n\n.pl-5 {\n padding-left: 1.25rem;\n}\n\n.px-5 {\n padding-left: 1.25rem;\n padding-right: 1.25rem;\n}\n\n.py-5 {\n padding-top: 1.25rem;\n padding-bottom: 1.25rem;\n}\n\n* {\n font-family: \"Roboto\", sans-serif;\n margin: 0;\n padding: 0;\n}\n\nbody {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n background-color: #e9ebee;\n padding: 10px;\n}\n\nbody #app {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -ms-flex-wrap: wrap;\n flex-wrap: wrap;\n}\n\nbody #app .container {\n border-radius: 5px;\n width: 375px;\n margin: 5px;\n -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);\n border: 1px solid #d0d1d5;\n background-color: white;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n padding: 5px 10px;\n}\n\nbody #app .container-sm {\n border-radius: 5px;\n max-width: 375px !important;\n margin: 5px;\n -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);\n border: 1px solid #d0d1d5;\n background-color: white;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n padding: 5px 10px;\n}\n\nbody #app input,\nbody #app select {\n padding: 5px;\n outline: none;\n width: 100%;\n margin: 5px 0;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 1px solid #ccc;\n border-radius: 5px;\n}\n\nbody #app button {\n border: none;\n padding: 5px 10px;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n margin: 3px 0;\n border-radius: 3px;\n background-color: #d7dbdd;\n color: #32373b;\n}\n\nbody #app button:hover {\n background-color: #f3f4f4;\n}\n\nbody #app button:active {\n background-color: #e5e7e9;\n}\n\nbody #app button.black {\n background-color: #4e5459;\n color: #e5ffff;\n}\n\nbody #app button.black:hover {\n background-color: #363a3e;\n}\n\nbody #app button.black:active {\n background-color: #666e74;\n}\n\nbody #app button.blue {\n background-color: #59bacc;\n color: #e5ffff;\n}\n\nbody #app button.blue:hover {\n background-color: #80cad8;\n}\n\nbody #app button.blue:active {\n background-color: #6dc2d2;\n}\n\nbody #app button.red {\n background-color: #e2574c;\n color: #e5ffff;\n}\n\nbody #app button.red:hover {\n background-color: #e98078;\n}\n\nbody #app button.red:active {\n background-color: #e66c62;\n}\n\nbody #app button.green {\n background-color: #58ad69;\n color: #e5ffff;\n}\n\nbody #app button.green:hover {\n background-color: #7abe88;\n}\n\nbody #app button.green:active {\n background-color: #69b578;\n}\n\nbody #app button.orange {\n background-color: #ffbc49;\n color: #666;\n}\n\nbody #app button.orange:hover {\n background-color: #ffcf7c;\n}\n\nbody #app button.orange:active {\n background-color: #ffc563;\n}\n\nbody #app button.block {\n width: 100%;\n}\n\nbody #app button.sm {\n padding: 2px 5px;\n}\n\nbody #app ul {\n list-style: none;\n margin: 0;\n padding: 0;\n}\n\nbody #app ul li {\n padding: 5px;\n background-color: #f3f4f4;\n margin-bottom: 5px;\n border-radius: 3px;\n}\n\nbody #app ul li:last-child {\n margin-bottom: 0;\n}\n\nbody #app ul li:hover {\n background-color: #e5e7e9;\n}\n\nbody #app hr {\n background: -webkit-gradient(linear, left top, right top, from(#59bacc), to(#ffbc49));\n background: linear-gradient(to right, #59bacc, #ffbc49);\n height: 1px;\n border: none;\n}\n\nbody #app small {\n font-size: 12px;\n}\n/*# sourceMappingURL=style.css.map */" }, { "path": "ders-3/2-dynamic-components/src/components/Blue.vue", "content": "\n\n" }, { "path": "ders-3/2-dynamic-components/src/components/Green.vue", "content": "\n\n" }, { "path": "ders-3/2-dynamic-components/src/components/Red.vue", "content": "\n\n" }, { "path": "ders-3/2-dynamic-components/src/main.js", "content": "import { createApp } from \"vue\";\nimport App from \"./App.vue\";\nimport \"@/assets/style.css\";\ncreateApp(App).mount(\"#app\");\n" }, { "path": "ders-3/3-http-requests/README.md", "content": "# 3-http-requests\n\n## Project setup\n```\nnpm install\n```\n\n### Compiles and hot-reloads for development\n```\nnpm run serve\n```\n\n### Compiles and minifies for production\n```\nnpm run build\n```\n\n### Lints and fixes files\n```\nnpm run lint\n```\n\n### Customize configuration\nSee [Configuration Reference](https://cli.vuejs.org/config/).\n" }, { "path": "ders-3/3-http-requests/babel.config.js", "content": "module.exports = {\n presets: [\n '@vue/cli-plugin-babel/preset'\n ]\n}\n" }, { "path": "ders-3/3-http-requests/db.json", "content": "{\n \"items\": []\n}" }, { "path": "ders-3/3-http-requests/package.json", "content": "{\n \"name\": \"3-http-requests\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"scripts\": {\n \"serve\": \"vue-cli-service serve\",\n \"build\": \"vue-cli-service build\",\n \"lint\": \"vue-cli-service lint\"\n },\n \"dependencies\": {\n \"axios\": \"^0.21.1\",\n \"core-js\": \"^3.6.5\",\n \"vue\": \"^3.0.0\"\n },\n \"devDependencies\": {\n \"@vue/cli-plugin-babel\": \"~4.5.0\",\n \"@vue/cli-plugin-eslint\": \"~4.5.0\",\n \"@vue/cli-service\": \"~4.5.0\",\n \"@vue/compiler-sfc\": \"^3.0.0\",\n \"babel-eslint\": \"^10.1.0\",\n \"eslint\": \"^6.7.2\",\n \"eslint-plugin-vue\": \"^7.0.0\"\n },\n \"eslintConfig\": {\n \"root\": true,\n \"env\": {\n \"node\": true\n },\n \"extends\": [\n \"plugin:vue/vue3-essential\",\n \"eslint:recommended\"\n ],\n \"parserOptions\": {\n \"parser\": \"babel-eslint\"\n },\n \"rules\": {}\n },\n \"browserslist\": [\n \"> 1%\",\n \"last 2 versions\",\n \"not dead\"\n ]\n}\n" }, { "path": "ders-3/3-http-requests/public/index.html", "content": "\n\n \n \n \n \n favicon.ico\">\n <%= htmlWebpackPlugin.options.title %>\n \n \n \n
      \n \n \n\n" }, { "path": "ders-3/3-http-requests/src/App.vue", "content": "\n\n\n" }, { "path": "ders-3/3-http-requests/src/assets/style.css", "content": "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;0,900;1,300;1,400&display=swap\");\n.text-blue {\n color: #59bacc;\n}\n\n.bg-blue {\n background-color: #59bacc;\n}\n\n.text-green {\n color: #58ad69;\n}\n\n.bg-green {\n background-color: #58ad69;\n}\n\n.text-orange {\n color: #ffbc49;\n}\n\n.bg-orange {\n background-color: #ffbc49;\n}\n\n.text-red {\n color: #e2574c;\n}\n\n.bg-red {\n background-color: #e2574c;\n}\n\n.text-black {\n color: #4e5459;\n}\n\n.bg-black {\n background-color: #4e5459;\n}\n\n.text-default {\n color: #d7dbdd;\n}\n\n.bg-default {\n background-color: #d7dbdd;\n}\n\n.text-white {\n color: #fff;\n}\n\n.bg-white {\n background-color: #fff;\n}\n\n.text-center {\n text-align: center;\n}\n\n.text-left {\n text-align: left;\n}\n\n.text-right {\n text-align: right;\n}\n\n.d-flex {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n}\n\n.justify-content-center {\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n}\n\n.justify-content-start {\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: flex-start;\n}\n\n.justify-content-between {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n}\n\n.justify-content-end {\n -webkit-box-pack: end;\n -ms-flex-pack: end;\n justify-content: flex-end;\n}\n\n.align-items-center {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.align-items-start {\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n}\n\n.align-items-end {\n -webkit-box-align: end;\n -ms-flex-align: end;\n align-items: flex-end;\n}\n\n.mt-0 {\n margin-top: 0rem;\n}\n\n.mb-0 {\n margin-bottom: 0rem;\n}\n\n.mr-0 {\n margin-right: 0rem;\n}\n\n.ml-0 {\n margin-left: 0rem;\n}\n\n.mx-0 {\n margin-left: 0rem;\n margin-right: 0rem;\n}\n\n.my-0 {\n margin-top: 0rem;\n margin-bottom: 0rem;\n}\n\n.pt-0 {\n padding-top: 0rem;\n}\n\n.pb-0 {\n padding-bottom: 0rem;\n}\n\n.pr-0 {\n padding-right: 0rem;\n}\n\n.pl-0 {\n padding-left: 0rem;\n}\n\n.px-0 {\n padding-left: 0rem;\n padding-right: 0rem;\n}\n\n.py-0 {\n padding-top: 0rem;\n padding-bottom: 0rem;\n}\n\n.mt-1 {\n margin-top: 0.25rem;\n}\n\n.mb-1 {\n margin-bottom: 0.25rem;\n}\n\n.mr-1 {\n margin-right: 0.25rem;\n}\n\n.ml-1 {\n margin-left: 0.25rem;\n}\n\n.mx-1 {\n margin-left: 0.25rem;\n margin-right: 0.25rem;\n}\n\n.my-1 {\n margin-top: 0.25rem;\n margin-bottom: 0.25rem;\n}\n\n.pt-1 {\n padding-top: 0.25rem;\n}\n\n.pb-1 {\n padding-bottom: 0.25rem;\n}\n\n.pr-1 {\n padding-right: 0.25rem;\n}\n\n.pl-1 {\n padding-left: 0.25rem;\n}\n\n.px-1 {\n padding-left: 0.25rem;\n padding-right: 0.25rem;\n}\n\n.py-1 {\n padding-top: 0.25rem;\n padding-bottom: 0.25rem;\n}\n\n.mt-2 {\n margin-top: 0.5rem;\n}\n\n.mb-2 {\n margin-bottom: 0.5rem;\n}\n\n.mr-2 {\n margin-right: 0.5rem;\n}\n\n.ml-2 {\n margin-left: 0.5rem;\n}\n\n.mx-2 {\n margin-left: 0.5rem;\n margin-right: 0.5rem;\n}\n\n.my-2 {\n margin-top: 0.5rem;\n margin-bottom: 0.5rem;\n}\n\n.pt-2 {\n padding-top: 0.5rem;\n}\n\n.pb-2 {\n padding-bottom: 0.5rem;\n}\n\n.pr-2 {\n padding-right: 0.5rem;\n}\n\n.pl-2 {\n padding-left: 0.5rem;\n}\n\n.px-2 {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n}\n\n.py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n\n.mt-3 {\n margin-top: 0.75rem;\n}\n\n.mb-3 {\n margin-bottom: 0.75rem;\n}\n\n.mr-3 {\n margin-right: 0.75rem;\n}\n\n.ml-3 {\n margin-left: 0.75rem;\n}\n\n.mx-3 {\n margin-left: 0.75rem;\n margin-right: 0.75rem;\n}\n\n.my-3 {\n margin-top: 0.75rem;\n margin-bottom: 0.75rem;\n}\n\n.pt-3 {\n padding-top: 0.75rem;\n}\n\n.pb-3 {\n padding-bottom: 0.75rem;\n}\n\n.pr-3 {\n padding-right: 0.75rem;\n}\n\n.pl-3 {\n padding-left: 0.75rem;\n}\n\n.px-3 {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n\n.py-3 {\n padding-top: 0.75rem;\n padding-bottom: 0.75rem;\n}\n\n.mt-4 {\n margin-top: 1rem;\n}\n\n.mb-4 {\n margin-bottom: 1rem;\n}\n\n.mr-4 {\n margin-right: 1rem;\n}\n\n.ml-4 {\n margin-left: 1rem;\n}\n\n.mx-4 {\n margin-left: 1rem;\n margin-right: 1rem;\n}\n\n.my-4 {\n margin-top: 1rem;\n margin-bottom: 1rem;\n}\n\n.pt-4 {\n padding-top: 1rem;\n}\n\n.pb-4 {\n padding-bottom: 1rem;\n}\n\n.pr-4 {\n padding-right: 1rem;\n}\n\n.pl-4 {\n padding-left: 1rem;\n}\n\n.px-4 {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n\n.py-4 {\n padding-top: 1rem;\n padding-bottom: 1rem;\n}\n\n.mt-5 {\n margin-top: 1.25rem;\n}\n\n.mb-5 {\n margin-bottom: 1.25rem;\n}\n\n.mr-5 {\n margin-right: 1.25rem;\n}\n\n.ml-5 {\n margin-left: 1.25rem;\n}\n\n.mx-5 {\n margin-left: 1.25rem;\n margin-right: 1.25rem;\n}\n\n.my-5 {\n margin-top: 1.25rem;\n margin-bottom: 1.25rem;\n}\n\n.pt-5 {\n padding-top: 1.25rem;\n}\n\n.pb-5 {\n padding-bottom: 1.25rem;\n}\n\n.pr-5 {\n padding-right: 1.25rem;\n}\n\n.pl-5 {\n padding-left: 1.25rem;\n}\n\n.px-5 {\n padding-left: 1.25rem;\n padding-right: 1.25rem;\n}\n\n.py-5 {\n padding-top: 1.25rem;\n padding-bottom: 1.25rem;\n}\n\n* {\n font-family: \"Roboto\", sans-serif;\n margin: 0;\n padding: 0;\n}\n\nbody {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n background-color: #e9ebee;\n padding: 10px;\n}\n\nbody #app {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -ms-flex-wrap: wrap;\n flex-wrap: wrap;\n}\n\nbody #app .container {\n border-radius: 5px;\n width: 375px;\n margin: 5px;\n -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);\n border: 1px solid #d0d1d5;\n background-color: white;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n padding: 5px 10px;\n}\n\nbody #app .container-sm {\n border-radius: 5px;\n max-width: 375px !important;\n margin: 5px;\n -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);\n border: 1px solid #d0d1d5;\n background-color: white;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n padding: 5px 10px;\n}\n\nbody #app input,\nbody #app select {\n padding: 5px;\n outline: none;\n width: 100%;\n margin: 5px 0;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 1px solid #ccc;\n border-radius: 5px;\n}\n\nbody #app button {\n border: none;\n padding: 5px 10px;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n margin: 3px 0;\n border-radius: 3px;\n background-color: #d7dbdd;\n color: #32373b;\n}\n\nbody #app button:hover {\n background-color: #f3f4f4;\n}\n\nbody #app button:active {\n background-color: #e5e7e9;\n}\n\nbody #app button.black {\n background-color: #4e5459;\n color: #e5ffff;\n}\n\nbody #app button.black:hover {\n background-color: #363a3e;\n}\n\nbody #app button.black:active {\n background-color: #666e74;\n}\n\nbody #app button.blue {\n background-color: #59bacc;\n color: #e5ffff;\n}\n\nbody #app button.blue:hover {\n background-color: #80cad8;\n}\n\nbody #app button.blue:active {\n background-color: #6dc2d2;\n}\n\nbody #app button.red {\n background-color: #e2574c;\n color: #e5ffff;\n}\n\nbody #app button.red:hover {\n background-color: #e98078;\n}\n\nbody #app button.red:active {\n background-color: #e66c62;\n}\n\nbody #app button.green {\n background-color: #58ad69;\n color: #e5ffff;\n}\n\nbody #app button.green:hover {\n background-color: #7abe88;\n}\n\nbody #app button.green:active {\n background-color: #69b578;\n}\n\nbody #app button.orange {\n background-color: #ffbc49;\n color: #666;\n}\n\nbody #app button.orange:hover {\n background-color: #ffcf7c;\n}\n\nbody #app button.orange:active {\n background-color: #ffc563;\n}\n\nbody #app button.block {\n width: 100%;\n}\n\nbody #app button.sm {\n padding: 2px 5px;\n}\n\nbody #app ul {\n list-style: none;\n margin: 0;\n padding: 0;\n}\n\nbody #app ul li {\n padding: 5px;\n background-color: #f3f4f4;\n margin-bottom: 5px;\n border-radius: 3px;\n}\n\nbody #app ul li:last-child {\n margin-bottom: 0;\n}\n\nbody #app ul li:hover {\n background-color: #e5e7e9;\n}\n\nbody #app hr {\n background: -webkit-gradient(linear, left top, right top, from(#59bacc), to(#ffbc49));\n background: linear-gradient(to right, #59bacc, #ffbc49);\n height: 1px;\n border: none;\n}\n\nbody #app small {\n font-size: 12px;\n}\n/*# sourceMappingURL=style.css.map */" }, { "path": "ders-3/3-http-requests/src/main.js", "content": "import { createApp } from \"vue\";\nimport App from \"./App.vue\";\n\nimport \"@/assets/style.css\";\n\ncreateApp(App).mount(\"#app\");\n" }, { "path": "ders-3/style.css", "content": "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;0,900;1,300;1,400&display=swap\");\n.text-blue {\n color: #59bacc;\n}\n\n.bg-blue {\n background-color: #59bacc;\n}\n\n.text-green {\n color: #58ad69;\n}\n\n.bg-green {\n background-color: #58ad69;\n}\n\n.text-orange {\n color: #ffbc49;\n}\n\n.bg-orange {\n background-color: #ffbc49;\n}\n\n.text-red {\n color: #e2574c;\n}\n\n.bg-red {\n background-color: #e2574c;\n}\n\n.text-black {\n color: #4e5459;\n}\n\n.bg-black {\n background-color: #4e5459;\n}\n\n.text-default {\n color: #d7dbdd;\n}\n\n.bg-default {\n background-color: #d7dbdd;\n}\n\n.text-white {\n color: #fff;\n}\n\n.bg-white {\n background-color: #fff;\n}\n\n.text-center {\n text-align: center;\n}\n\n.text-left {\n text-align: left;\n}\n\n.text-right {\n text-align: right;\n}\n\n.d-flex {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n}\n\n.justify-content-center {\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n}\n\n.justify-content-start {\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: flex-start;\n}\n\n.justify-content-between {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n}\n\n.justify-content-end {\n -webkit-box-pack: end;\n -ms-flex-pack: end;\n justify-content: flex-end;\n}\n\n.align-items-center {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.align-items-start {\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n}\n\n.align-items-end {\n -webkit-box-align: end;\n -ms-flex-align: end;\n align-items: flex-end;\n}\n\n.mt-0 {\n margin-top: 0rem;\n}\n\n.mb-0 {\n margin-bottom: 0rem;\n}\n\n.mr-0 {\n margin-right: 0rem;\n}\n\n.ml-0 {\n margin-left: 0rem;\n}\n\n.mx-0 {\n margin-left: 0rem;\n margin-right: 0rem;\n}\n\n.my-0 {\n margin-top: 0rem;\n margin-bottom: 0rem;\n}\n\n.pt-0 {\n padding-top: 0rem;\n}\n\n.pb-0 {\n padding-bottom: 0rem;\n}\n\n.pr-0 {\n padding-right: 0rem;\n}\n\n.pl-0 {\n padding-left: 0rem;\n}\n\n.px-0 {\n padding-left: 0rem;\n padding-right: 0rem;\n}\n\n.py-0 {\n padding-top: 0rem;\n padding-bottom: 0rem;\n}\n\n.mt-1 {\n margin-top: 0.25rem;\n}\n\n.mb-1 {\n margin-bottom: 0.25rem;\n}\n\n.mr-1 {\n margin-right: 0.25rem;\n}\n\n.ml-1 {\n margin-left: 0.25rem;\n}\n\n.mx-1 {\n margin-left: 0.25rem;\n margin-right: 0.25rem;\n}\n\n.my-1 {\n margin-top: 0.25rem;\n margin-bottom: 0.25rem;\n}\n\n.pt-1 {\n padding-top: 0.25rem;\n}\n\n.pb-1 {\n padding-bottom: 0.25rem;\n}\n\n.pr-1 {\n padding-right: 0.25rem;\n}\n\n.pl-1 {\n padding-left: 0.25rem;\n}\n\n.px-1 {\n padding-left: 0.25rem;\n padding-right: 0.25rem;\n}\n\n.py-1 {\n padding-top: 0.25rem;\n padding-bottom: 0.25rem;\n}\n\n.mt-2 {\n margin-top: 0.5rem;\n}\n\n.mb-2 {\n margin-bottom: 0.5rem;\n}\n\n.mr-2 {\n margin-right: 0.5rem;\n}\n\n.ml-2 {\n margin-left: 0.5rem;\n}\n\n.mx-2 {\n margin-left: 0.5rem;\n margin-right: 0.5rem;\n}\n\n.my-2 {\n margin-top: 0.5rem;\n margin-bottom: 0.5rem;\n}\n\n.pt-2 {\n padding-top: 0.5rem;\n}\n\n.pb-2 {\n padding-bottom: 0.5rem;\n}\n\n.pr-2 {\n padding-right: 0.5rem;\n}\n\n.pl-2 {\n padding-left: 0.5rem;\n}\n\n.px-2 {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n}\n\n.py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n\n.mt-3 {\n margin-top: 0.75rem;\n}\n\n.mb-3 {\n margin-bottom: 0.75rem;\n}\n\n.mr-3 {\n margin-right: 0.75rem;\n}\n\n.ml-3 {\n margin-left: 0.75rem;\n}\n\n.mx-3 {\n margin-left: 0.75rem;\n margin-right: 0.75rem;\n}\n\n.my-3 {\n margin-top: 0.75rem;\n margin-bottom: 0.75rem;\n}\n\n.pt-3 {\n padding-top: 0.75rem;\n}\n\n.pb-3 {\n padding-bottom: 0.75rem;\n}\n\n.pr-3 {\n padding-right: 0.75rem;\n}\n\n.pl-3 {\n padding-left: 0.75rem;\n}\n\n.px-3 {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n\n.py-3 {\n padding-top: 0.75rem;\n padding-bottom: 0.75rem;\n}\n\n.mt-4 {\n margin-top: 1rem;\n}\n\n.mb-4 {\n margin-bottom: 1rem;\n}\n\n.mr-4 {\n margin-right: 1rem;\n}\n\n.ml-4 {\n margin-left: 1rem;\n}\n\n.mx-4 {\n margin-left: 1rem;\n margin-right: 1rem;\n}\n\n.my-4 {\n margin-top: 1rem;\n margin-bottom: 1rem;\n}\n\n.pt-4 {\n padding-top: 1rem;\n}\n\n.pb-4 {\n padding-bottom: 1rem;\n}\n\n.pr-4 {\n padding-right: 1rem;\n}\n\n.pl-4 {\n padding-left: 1rem;\n}\n\n.px-4 {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n\n.py-4 {\n padding-top: 1rem;\n padding-bottom: 1rem;\n}\n\n.mt-5 {\n margin-top: 1.25rem;\n}\n\n.mb-5 {\n margin-bottom: 1.25rem;\n}\n\n.mr-5 {\n margin-right: 1.25rem;\n}\n\n.ml-5 {\n margin-left: 1.25rem;\n}\n\n.mx-5 {\n margin-left: 1.25rem;\n margin-right: 1.25rem;\n}\n\n.my-5 {\n margin-top: 1.25rem;\n margin-bottom: 1.25rem;\n}\n\n.pt-5 {\n padding-top: 1.25rem;\n}\n\n.pb-5 {\n padding-bottom: 1.25rem;\n}\n\n.pr-5 {\n padding-right: 1.25rem;\n}\n\n.pl-5 {\n padding-left: 1.25rem;\n}\n\n.px-5 {\n padding-left: 1.25rem;\n padding-right: 1.25rem;\n}\n\n.py-5 {\n padding-top: 1.25rem;\n padding-bottom: 1.25rem;\n}\n\n* {\n font-family: \"Roboto\", sans-serif;\n margin: 0;\n padding: 0;\n}\n\nbody {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n background-color: #e9ebee;\n padding: 10px;\n}\n\nbody #app {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -ms-flex-wrap: wrap;\n flex-wrap: wrap;\n}\n\nbody #app .container {\n border-radius: 5px;\n width: 375px;\n margin: 5px;\n -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);\n border: 1px solid #d0d1d5;\n background-color: white;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n padding: 5px 10px;\n}\n\nbody #app .container-sm {\n border-radius: 5px;\n max-width: 375px !important;\n margin: 5px;\n -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);\n border: 1px solid #d0d1d5;\n background-color: white;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n padding: 5px 10px;\n}\n\nbody #app input,\nbody #app select {\n padding: 5px;\n outline: none;\n width: 100%;\n margin: 5px 0;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 1px solid #ccc;\n border-radius: 5px;\n}\n\nbody #app button {\n border: none;\n padding: 5px 10px;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n margin: 3px 0;\n border-radius: 3px;\n background-color: #d7dbdd;\n color: #32373b;\n}\n\nbody #app button:hover {\n background-color: #f3f4f4;\n}\n\nbody #app button:active {\n background-color: #e5e7e9;\n}\n\nbody #app button.black {\n background-color: #4e5459;\n color: #e5ffff;\n}\n\nbody #app button.black:hover {\n background-color: #363a3e;\n}\n\nbody #app button.black:active {\n background-color: #666e74;\n}\n\nbody #app button.blue {\n background-color: #59bacc;\n color: #e5ffff;\n}\n\nbody #app button.blue:hover {\n background-color: #80cad8;\n}\n\nbody #app button.blue:active {\n background-color: #6dc2d2;\n}\n\nbody #app button.red {\n background-color: #e2574c;\n color: #e5ffff;\n}\n\nbody #app button.red:hover {\n background-color: #e98078;\n}\n\nbody #app button.red:active {\n background-color: #e66c62;\n}\n\nbody #app button.green {\n background-color: #58ad69;\n color: #e5ffff;\n}\n\nbody #app button.green:hover {\n background-color: #7abe88;\n}\n\nbody #app button.green:active {\n background-color: #69b578;\n}\n\nbody #app button.orange {\n background-color: #ffbc49;\n color: #666;\n}\n\nbody #app button.orange:hover {\n background-color: #ffcf7c;\n}\n\nbody #app button.orange:active {\n background-color: #ffc563;\n}\n\nbody #app button.block {\n width: 100%;\n}\n\nbody #app button.sm {\n padding: 2px 5px;\n}\n\nbody #app ul {\n list-style: none;\n margin: 0;\n padding: 0;\n}\n\nbody #app ul li {\n padding: 5px;\n background-color: #f3f4f4;\n margin-bottom: 5px;\n border-radius: 3px;\n}\n\nbody #app ul li:last-child {\n margin-bottom: 0;\n}\n\nbody #app ul li:hover {\n background-color: #e5e7e9;\n}\n\nbody #app hr {\n background: -webkit-gradient(linear, left top, right top, from(#59bacc), to(#ffbc49));\n background: linear-gradient(to right, #59bacc, #ffbc49);\n height: 1px;\n border: none;\n}\n\nbody #app small {\n font-size: 12px;\n}\n/*# sourceMappingURL=style.css.map */" }, { "path": "ders-4/0-vuex-introduction/.browserslistrc", "content": "> 1%\nlast 2 versions\nnot dead\n" }, { "path": "ders-4/0-vuex-introduction/.eslintrc.js", "content": "module.exports = {\n root: true,\n env: {\n node: true\n },\n 'extends': [\n 'plugin:vue/vue3-essential',\n 'eslint:recommended'\n ],\n parserOptions: {\n parser: 'babel-eslint'\n },\n rules: {\n 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',\n 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'\n }\n}\n" }, { "path": "ders-4/0-vuex-introduction/README.md", "content": "# 0-vuex-introduction\n\n## Project setup\n```\nyarn install\n```\n\n### Compiles and hot-reloads for development\n```\nyarn serve\n```\n\n### Compiles and minifies for production\n```\nyarn build\n```\n\n### Lints and fixes files\n```\nyarn lint\n```\n\n### Customize configuration\nSee [Configuration Reference](https://cli.vuejs.org/config/).\n" }, { "path": "ders-4/0-vuex-introduction/babel.config.js", "content": "module.exports = {\n presets: [\n '@vue/cli-plugin-babel/preset'\n ]\n}\n" }, { "path": "ders-4/0-vuex-introduction/package.json", "content": "{\n \"name\": \"0-vuex-introduction\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"scripts\": {\n \"serve\": \"vue-cli-service serve\",\n \"build\": \"vue-cli-service build\",\n \"lint\": \"vue-cli-service lint\"\n },\n \"dependencies\": {\n \"core-js\": \"^3.6.5\",\n \"vue\": \"^3.0.0\",\n \"vuex\": \"^4.0.2\"\n },\n \"devDependencies\": {\n \"@vue/cli-plugin-babel\": \"~4.5.0\",\n \"@vue/cli-plugin-eslint\": \"~4.5.0\",\n \"@vue/cli-service\": \"~4.5.0\",\n \"@vue/compiler-sfc\": \"^3.0.0\",\n \"babel-eslint\": \"^10.1.0\",\n \"eslint\": \"^6.7.2\",\n \"eslint-plugin-vue\": \"^7.0.0\"\n }\n}\n" }, { "path": "ders-4/0-vuex-introduction/public/index.html", "content": "\n\n \n \n \n \n favicon.ico\">\n <%= htmlWebpackPlugin.options.title %>\n \n \n \n
      \n \n \n\n" }, { "path": "ders-4/0-vuex-introduction/src/App.vue", "content": "\n\n\n\n\n" }, { "path": "ders-4/0-vuex-introduction/src/assets/style.css", "content": "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;0,900;1,300;1,400&display=swap\");\n.text-blue {\n color: #59bacc;\n}\n\n.bg-blue {\n background-color: #59bacc;\n}\n\n.text-green {\n color: #58ad69;\n}\n\n.bg-green {\n background-color: #58ad69;\n}\n\n.text-orange {\n color: #ffbc49;\n}\n\n.bg-orange {\n background-color: #ffbc49;\n}\n\n.text-red {\n color: #e2574c;\n}\n\n.bg-red {\n background-color: #e2574c;\n}\n\n.text-black {\n color: #4e5459;\n}\n\n.bg-black {\n background-color: #4e5459;\n}\n\n.text-default {\n color: #d7dbdd;\n}\n\n.bg-default {\n background-color: #d7dbdd;\n}\n\n.text-white {\n color: #fff;\n}\n\n.bg-white {\n background-color: #fff;\n}\n\n.text-center {\n text-align: center;\n}\n\n.text-left {\n text-align: left;\n}\n\n.text-right {\n text-align: right;\n}\n\n.d-flex {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n}\n\n.justify-content-center {\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n}\n\n.justify-content-start {\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: flex-start;\n}\n\n.justify-content-between {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n}\n\n.justify-content-end {\n -webkit-box-pack: end;\n -ms-flex-pack: end;\n justify-content: flex-end;\n}\n\n.align-items-center {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.align-items-start {\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n}\n\n.align-items-end {\n -webkit-box-align: end;\n -ms-flex-align: end;\n align-items: flex-end;\n}\n\n.mt-0 {\n margin-top: 0rem;\n}\n\n.mb-0 {\n margin-bottom: 0rem;\n}\n\n.mr-0 {\n margin-right: 0rem;\n}\n\n.ml-0 {\n margin-left: 0rem;\n}\n\n.mx-0 {\n margin-left: 0rem;\n margin-right: 0rem;\n}\n\n.my-0 {\n margin-top: 0rem;\n margin-bottom: 0rem;\n}\n\n.pt-0 {\n padding-top: 0rem;\n}\n\n.pb-0 {\n padding-bottom: 0rem;\n}\n\n.pr-0 {\n padding-right: 0rem;\n}\n\n.pl-0 {\n padding-left: 0rem;\n}\n\n.px-0 {\n padding-left: 0rem;\n padding-right: 0rem;\n}\n\n.py-0 {\n padding-top: 0rem;\n padding-bottom: 0rem;\n}\n\n.mt-1 {\n margin-top: 0.25rem;\n}\n\n.mb-1 {\n margin-bottom: 0.25rem;\n}\n\n.mr-1 {\n margin-right: 0.25rem;\n}\n\n.ml-1 {\n margin-left: 0.25rem;\n}\n\n.mx-1 {\n margin-left: 0.25rem;\n margin-right: 0.25rem;\n}\n\n.my-1 {\n margin-top: 0.25rem;\n margin-bottom: 0.25rem;\n}\n\n.pt-1 {\n padding-top: 0.25rem;\n}\n\n.pb-1 {\n padding-bottom: 0.25rem;\n}\n\n.pr-1 {\n padding-right: 0.25rem;\n}\n\n.pl-1 {\n padding-left: 0.25rem;\n}\n\n.px-1 {\n padding-left: 0.25rem;\n padding-right: 0.25rem;\n}\n\n.py-1 {\n padding-top: 0.25rem;\n padding-bottom: 0.25rem;\n}\n\n.mt-2 {\n margin-top: 0.5rem;\n}\n\n.mb-2 {\n margin-bottom: 0.5rem;\n}\n\n.mr-2 {\n margin-right: 0.5rem;\n}\n\n.ml-2 {\n margin-left: 0.5rem;\n}\n\n.mx-2 {\n margin-left: 0.5rem;\n margin-right: 0.5rem;\n}\n\n.my-2 {\n margin-top: 0.5rem;\n margin-bottom: 0.5rem;\n}\n\n.pt-2 {\n padding-top: 0.5rem;\n}\n\n.pb-2 {\n padding-bottom: 0.5rem;\n}\n\n.pr-2 {\n padding-right: 0.5rem;\n}\n\n.pl-2 {\n padding-left: 0.5rem;\n}\n\n.px-2 {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n}\n\n.py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n\n.mt-3 {\n margin-top: 0.75rem;\n}\n\n.mb-3 {\n margin-bottom: 0.75rem;\n}\n\n.mr-3 {\n margin-right: 0.75rem;\n}\n\n.ml-3 {\n margin-left: 0.75rem;\n}\n\n.mx-3 {\n margin-left: 0.75rem;\n margin-right: 0.75rem;\n}\n\n.my-3 {\n margin-top: 0.75rem;\n margin-bottom: 0.75rem;\n}\n\n.pt-3 {\n padding-top: 0.75rem;\n}\n\n.pb-3 {\n padding-bottom: 0.75rem;\n}\n\n.pr-3 {\n padding-right: 0.75rem;\n}\n\n.pl-3 {\n padding-left: 0.75rem;\n}\n\n.px-3 {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n\n.py-3 {\n padding-top: 0.75rem;\n padding-bottom: 0.75rem;\n}\n\n.mt-4 {\n margin-top: 1rem;\n}\n\n.mb-4 {\n margin-bottom: 1rem;\n}\n\n.mr-4 {\n margin-right: 1rem;\n}\n\n.ml-4 {\n margin-left: 1rem;\n}\n\n.mx-4 {\n margin-left: 1rem;\n margin-right: 1rem;\n}\n\n.my-4 {\n margin-top: 1rem;\n margin-bottom: 1rem;\n}\n\n.pt-4 {\n padding-top: 1rem;\n}\n\n.pb-4 {\n padding-bottom: 1rem;\n}\n\n.pr-4 {\n padding-right: 1rem;\n}\n\n.pl-4 {\n padding-left: 1rem;\n}\n\n.px-4 {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n\n.py-4 {\n padding-top: 1rem;\n padding-bottom: 1rem;\n}\n\n.mt-5 {\n margin-top: 1.25rem;\n}\n\n.mb-5 {\n margin-bottom: 1.25rem;\n}\n\n.mr-5 {\n margin-right: 1.25rem;\n}\n\n.ml-5 {\n margin-left: 1.25rem;\n}\n\n.mx-5 {\n margin-left: 1.25rem;\n margin-right: 1.25rem;\n}\n\n.my-5 {\n margin-top: 1.25rem;\n margin-bottom: 1.25rem;\n}\n\n.pt-5 {\n padding-top: 1.25rem;\n}\n\n.pb-5 {\n padding-bottom: 1.25rem;\n}\n\n.pr-5 {\n padding-right: 1.25rem;\n}\n\n.pl-5 {\n padding-left: 1.25rem;\n}\n\n.px-5 {\n padding-left: 1.25rem;\n padding-right: 1.25rem;\n}\n\n.py-5 {\n padding-top: 1.25rem;\n padding-bottom: 1.25rem;\n}\n\n* {\n font-family: \"Roboto\", sans-serif;\n margin: 0;\n padding: 0;\n}\n\nbody {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n background-color: #e9ebee;\n padding: 10px;\n}\n\nbody #app {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -ms-flex-wrap: wrap;\n flex-wrap: wrap;\n}\n\nbody #app .container {\n border-radius: 5px;\n width: 375px;\n margin: 5px;\n -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);\n border: 1px solid #d0d1d5;\n background-color: white;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n padding: 5px 10px;\n}\n\nbody #app .container-sm {\n border-radius: 5px;\n max-width: 375px !important;\n margin: 5px;\n -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);\n border: 1px solid #d0d1d5;\n background-color: white;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n padding: 5px 10px;\n}\n\nbody #app input,\nbody #app select {\n padding: 5px;\n outline: none;\n width: 100%;\n margin: 5px 0;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 1px solid #ccc;\n border-radius: 5px;\n}\n\nbody #app button {\n border: none;\n padding: 5px 10px;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n margin: 3px 0;\n border-radius: 3px;\n background-color: #d7dbdd;\n color: #32373b;\n}\n\nbody #app button:hover {\n background-color: #f3f4f4;\n}\n\nbody #app button:active {\n background-color: #e5e7e9;\n}\n\nbody #app button.black {\n background-color: #4e5459;\n color: #e5ffff;\n}\n\nbody #app button.black:hover {\n background-color: #363a3e;\n}\n\nbody #app button.black:active {\n background-color: #666e74;\n}\n\nbody #app button.blue {\n background-color: #59bacc;\n color: #e5ffff;\n}\n\nbody #app button.blue:hover {\n background-color: #80cad8;\n}\n\nbody #app button.blue:active {\n background-color: #6dc2d2;\n}\n\nbody #app button.red {\n background-color: #e2574c;\n color: #e5ffff;\n}\n\nbody #app button.red:hover {\n background-color: #e98078;\n}\n\nbody #app button.red:active {\n background-color: #e66c62;\n}\n\nbody #app button.green {\n background-color: #58ad69;\n color: #e5ffff;\n}\n\nbody #app button.green:hover {\n background-color: #7abe88;\n}\n\nbody #app button.green:active {\n background-color: #69b578;\n}\n\nbody #app button.orange {\n background-color: #ffbc49;\n color: #666;\n}\n\nbody #app button.orange:hover {\n background-color: #ffcf7c;\n}\n\nbody #app button.orange:active {\n background-color: #ffc563;\n}\n\nbody #app button.block {\n width: 100%;\n}\n\nbody #app button.sm {\n padding: 2px 5px;\n}\n\nbody #app ul {\n list-style: none;\n margin: 0;\n padding: 0;\n}\n\nbody #app ul li {\n padding: 5px;\n background-color: #f3f4f4;\n margin-bottom: 5px;\n border-radius: 3px;\n}\n\nbody #app ul li:last-child {\n margin-bottom: 0;\n}\n\nbody #app ul li:hover {\n background-color: #e5e7e9;\n}\n\nbody #app hr {\n background: -webkit-gradient(linear, left top, right top, from(#59bacc), to(#ffbc49));\n background: linear-gradient(to right, #59bacc, #ffbc49);\n height: 1px;\n border: none;\n}\n\nbody #app small {\n font-size: 12px;\n}\n/*# sourceMappingURL=style.css.map */" }, { "path": "ders-4/0-vuex-introduction/src/components/NewUser.vue", "content": "\n\n\n" }, { "path": "ders-4/0-vuex-introduction/src/components/UserList.vue", "content": "\n\n" }, { "path": "ders-4/0-vuex-introduction/src/main.js", "content": "import { createApp } from \"vue\";\nimport App from \"./App.vue\";\nimport store from \"./store\";\nimport \"@/assets/style.css\";\nconst app = createApp(App);\napp.use(store);\n// app.config.globalProperties.$axios = axios;\napp.mount(\"#app\");\n" }, { "path": "ders-4/0-vuex-introduction/src/store.js", "content": "import { createStore } from \"vuex\";\nconst store = createStore({\n state: {\n user: {\n name: \"Gokhan\",\n lname: \"Kandemir\",\n age: 33,\n address: {},\n password: 123123123,\n tc: 11111\n },\n theme: \"dark\",\n fullName: \"Defne Kandemir\",\n permissions: [1, 2, 3, 4, 5],\n userList: [\"Gokhan\", \"Tayfun\", \"İlker\", \"Ramazan\", \"Defne\", \"Kamil\", \"Cemil\"],\n itemList: [\n { id: 1, title: \"Masa\", type: \"mobilya\" },\n { id: 2, title: \"Sandalye\", type: \"mobilya\" },\n { id: 3, title: \"TV\", type: \"elektronik\" },\n { id: 4, title: \"Monitor\", type: \"elektronik\" },\n { id: 5, title: \"Bardak\", type: \"plastik\" }\n ]\n },\n mutations: {\n newItem(state, item) {\n state.itemList.push(item);\n }\n // changeUser(state, payload){}\n },\n actions: {\n newItem({ commit }, item) {\n console.log(\"item :>> \", item);\n setTimeout(() => {\n // context.commit(\"newItem\", item);\n commit(\"newItem\", item);\n }, 1000);\n }\n },\n getters: {\n _woodItems: state => state.itemList.filter(i => i.type === \"mobilya\"),\n _activeUser(state) {\n const user = {\n ...state.user\n };\n delete user.password;\n return user;\n }\n }\n});\n\nexport default store;\n" }, { "path": "ders-4/1-vuex-modules/README.md", "content": "# 1-vuex-modules\n\n## Project setup\n```\nyarn install\n```\n\n### Compiles and hot-reloads for development\n```\nyarn serve\n```\n\n### Compiles and minifies for production\n```\nyarn build\n```\n\n### Lints and fixes files\n```\nyarn lint\n```\n\n### Customize configuration\nSee [Configuration Reference](https://cli.vuejs.org/config/).\n" }, { "path": "ders-4/1-vuex-modules/babel.config.js", "content": "module.exports = {\n presets: [\n '@vue/cli-plugin-babel/preset'\n ]\n}\n" }, { "path": "ders-4/1-vuex-modules/package.json", "content": "{\n \"name\": \"1-vuex-modules\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"scripts\": {\n \"serve\": \"vue-cli-service serve\",\n \"build\": \"vue-cli-service build\",\n \"lint\": \"vue-cli-service lint\"\n },\n \"dependencies\": {\n \"core-js\": \"^3.6.5\",\n \"vue\": \"^3.0.0\",\n \"vuex\": \"^4.0.2\"\n },\n \"devDependencies\": {\n \"@vue/cli-plugin-babel\": \"~4.5.0\",\n \"@vue/cli-plugin-eslint\": \"~4.5.0\",\n \"@vue/cli-service\": \"~4.5.0\",\n \"@vue/compiler-sfc\": \"^3.0.0\",\n \"babel-eslint\": \"^10.1.0\",\n \"eslint\": \"^6.7.2\",\n \"eslint-plugin-vue\": \"^7.0.0\"\n },\n \"eslintConfig\": {\n \"root\": true,\n \"env\": {\n \"node\": true\n },\n \"extends\": [\n \"plugin:vue/vue3-essential\",\n \"eslint:recommended\"\n ],\n \"parserOptions\": {\n \"parser\": \"babel-eslint\"\n },\n \"rules\": {}\n },\n \"browserslist\": [\n \"> 1%\",\n \"last 2 versions\",\n \"not dead\"\n ]\n}\n" }, { "path": "ders-4/1-vuex-modules/public/index.html", "content": "\n\n \n \n \n \n favicon.ico\">\n <%= htmlWebpackPlugin.options.title %>\n \n \n \n
      \n \n \n\n" }, { "path": "ders-4/1-vuex-modules/src/App.vue", "content": "\n\n\n" }, { "path": "ders-4/1-vuex-modules/src/components/HelloWorld.vue", "content": "\n\n\n\n\n\n" }, { "path": "ders-4/1-vuex-modules/src/main.js", "content": "import { createApp } from \"vue\";\nimport App from \"./App.vue\";\nimport store from \"./store\";\n\nconst app = createApp(App);\napp.use(store);\napp.mount(\"#app\");\n" }, { "path": "ders-4/1-vuex-modules/src/store/index.js", "content": "import { createStore } from \"vuex\";\nimport contact from \"./modules/contact\";\nimport taskmanager from \"./modules/taskmanager\";\n\nconst store = createStore({\n state: {\n mainName: \"kablosuzkedi\"\n },\n mutations: {},\n modules: {\n musteri: contact,\n taskmanager\n }\n});\n\nexport default store;\n" }, { "path": "ders-4/1-vuex-modules/src/store/modules/contact.js", "content": "export default {\n namespaced: true,\n state: {\n contactName: \"puresol\",\n contactAddress: \"Kanada\",\n propertyList: []\n },\n mutations: {\n setItem(state, name) {\n state.contactName = name;\n }\n },\n getters: {\n _contactName: state => state.contactName\n // _itemList: state => state.propertyList\n }\n};\n" }, { "path": "ders-4/1-vuex-modules/src/store/modules/taskmanager.js", "content": "export default {\n namespaced: true,\n state: {\n itemList: [],\n userList: []\n },\n mutations: {\n setItem(state, item) {\n state.itemList.push(item);\n }\n },\n getters: {\n _itemList: state => state.itemList\n }\n};\n" }, { "path": "ders-5/0-vue-router/README.md", "content": "# 0-vue-router\n\n## Project setup\n```\nyarn install\n```\n\n### Compiles and hot-reloads for development\n```\nyarn serve\n```\n\n### Compiles and minifies for production\n```\nyarn build\n```\n\n### Lints and fixes files\n```\nyarn lint\n```\n\n### Customize configuration\nSee [Configuration Reference](https://cli.vuejs.org/config/).\n" }, { "path": "ders-5/0-vue-router/babel.config.js", "content": "module.exports = {\n presets: [\n '@vue/cli-plugin-babel/preset'\n ]\n}\n" }, { "path": "ders-5/0-vue-router/package.json", "content": "{\n \"name\": \"0-vue-router\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"scripts\": {\n \"serve\": \"vue-cli-service serve\",\n \"build\": \"vue-cli-service build\",\n \"lint\": \"vue-cli-service lint\"\n },\n \"dependencies\": {\n \"core-js\": \"^3.6.5\",\n \"vue\": \"^3.0.0\",\n \"vue-router\": \"4\"\n },\n \"devDependencies\": {\n \"@vue/cli-plugin-babel\": \"~4.5.0\",\n \"@vue/cli-plugin-eslint\": \"~4.5.0\",\n \"@vue/cli-service\": \"~4.5.0\",\n \"@vue/compiler-sfc\": \"^3.0.0\",\n \"babel-eslint\": \"^10.1.0\",\n \"eslint\": \"^6.7.2\",\n \"eslint-plugin-vue\": \"^7.0.0\"\n },\n \"eslintConfig\": {\n \"root\": true,\n \"env\": {\n \"node\": true\n },\n \"extends\": [\n \"plugin:vue/vue3-essential\",\n \"eslint:recommended\"\n ],\n \"parserOptions\": {\n \"parser\": \"babel-eslint\"\n },\n \"rules\": {}\n },\n \"browserslist\": [\n \"> 1%\",\n \"last 2 versions\",\n \"not dead\"\n ]\n}\n" }, { "path": "ders-5/0-vue-router/public/index.html", "content": "\n\n \n \n \n \n favicon.ico\">\n <%= htmlWebpackPlugin.options.title %>\n \n \n \n
      \n \n \n\n" }, { "path": "ders-5/0-vue-router/src/App.vue", "content": "\n\n\n" }, { "path": "ders-5/0-vue-router/src/assets/style.css", "content": "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;0,900;1,300;1,400&display=swap\");\n.text-blue {\n color: #59bacc;\n}\n\n.bg-blue {\n background-color: #59bacc;\n}\n\n.text-green {\n color: #58ad69;\n}\n\n.bg-green {\n background-color: #58ad69;\n}\n\n.text-orange {\n color: #ffbc49;\n}\n\n.bg-orange {\n background-color: #ffbc49;\n}\n\n.text-red {\n color: #e2574c;\n}\n\n.bg-red {\n background-color: #e2574c;\n}\n\n.text-black {\n color: #4e5459;\n}\n\n.bg-black {\n background-color: #4e5459;\n}\n\n.text-default {\n color: #d7dbdd;\n}\n\n.bg-default {\n background-color: #d7dbdd;\n}\n\n.text-white {\n color: #fff;\n}\n\n.bg-white {\n background-color: #fff;\n}\n\n.text-center {\n text-align: center;\n}\n\n.text-left {\n text-align: left;\n}\n\n.text-right {\n text-align: right;\n}\n\n.d-flex {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n}\n\n.justify-content-center {\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n}\n\n.justify-content-start {\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: flex-start;\n}\n\n.justify-content-between {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n}\n\n.justify-content-end {\n -webkit-box-pack: end;\n -ms-flex-pack: end;\n justify-content: flex-end;\n}\n\n.align-items-center {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.align-items-start {\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n}\n\n.align-items-end {\n -webkit-box-align: end;\n -ms-flex-align: end;\n align-items: flex-end;\n}\n\n.mt-0 {\n margin-top: 0rem;\n}\n\n.mb-0 {\n margin-bottom: 0rem;\n}\n\n.mr-0 {\n margin-right: 0rem;\n}\n\n.ml-0 {\n margin-left: 0rem;\n}\n\n.mx-0 {\n margin-left: 0rem;\n margin-right: 0rem;\n}\n\n.my-0 {\n margin-top: 0rem;\n margin-bottom: 0rem;\n}\n\n.pt-0 {\n padding-top: 0rem;\n}\n\n.pb-0 {\n padding-bottom: 0rem;\n}\n\n.pr-0 {\n padding-right: 0rem;\n}\n\n.pl-0 {\n padding-left: 0rem;\n}\n\n.px-0 {\n padding-left: 0rem;\n padding-right: 0rem;\n}\n\n.py-0 {\n padding-top: 0rem;\n padding-bottom: 0rem;\n}\n\n.mt-1 {\n margin-top: 0.25rem;\n}\n\n.mb-1 {\n margin-bottom: 0.25rem;\n}\n\n.mr-1 {\n margin-right: 0.25rem;\n}\n\n.ml-1 {\n margin-left: 0.25rem;\n}\n\n.mx-1 {\n margin-left: 0.25rem;\n margin-right: 0.25rem;\n}\n\n.my-1 {\n margin-top: 0.25rem;\n margin-bottom: 0.25rem;\n}\n\n.pt-1 {\n padding-top: 0.25rem;\n}\n\n.pb-1 {\n padding-bottom: 0.25rem;\n}\n\n.pr-1 {\n padding-right: 0.25rem;\n}\n\n.pl-1 {\n padding-left: 0.25rem;\n}\n\n.px-1 {\n padding-left: 0.25rem;\n padding-right: 0.25rem;\n}\n\n.py-1 {\n padding-top: 0.25rem;\n padding-bottom: 0.25rem;\n}\n\n.mt-2 {\n margin-top: 0.5rem;\n}\n\n.mb-2 {\n margin-bottom: 0.5rem;\n}\n\n.mr-2 {\n margin-right: 0.5rem;\n}\n\n.ml-2 {\n margin-left: 0.5rem;\n}\n\n.mx-2 {\n margin-left: 0.5rem;\n margin-right: 0.5rem;\n}\n\n.my-2 {\n margin-top: 0.5rem;\n margin-bottom: 0.5rem;\n}\n\n.pt-2 {\n padding-top: 0.5rem;\n}\n\n.pb-2 {\n padding-bottom: 0.5rem;\n}\n\n.pr-2 {\n padding-right: 0.5rem;\n}\n\n.pl-2 {\n padding-left: 0.5rem;\n}\n\n.px-2 {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n}\n\n.py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n\n.mt-3 {\n margin-top: 0.75rem;\n}\n\n.mb-3 {\n margin-bottom: 0.75rem;\n}\n\n.mr-3 {\n margin-right: 0.75rem;\n}\n\n.ml-3 {\n margin-left: 0.75rem;\n}\n\n.mx-3 {\n margin-left: 0.75rem;\n margin-right: 0.75rem;\n}\n\n.my-3 {\n margin-top: 0.75rem;\n margin-bottom: 0.75rem;\n}\n\n.pt-3 {\n padding-top: 0.75rem;\n}\n\n.pb-3 {\n padding-bottom: 0.75rem;\n}\n\n.pr-3 {\n padding-right: 0.75rem;\n}\n\n.pl-3 {\n padding-left: 0.75rem;\n}\n\n.px-3 {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n\n.py-3 {\n padding-top: 0.75rem;\n padding-bottom: 0.75rem;\n}\n\n.mt-4 {\n margin-top: 1rem;\n}\n\n.mb-4 {\n margin-bottom: 1rem;\n}\n\n.mr-4 {\n margin-right: 1rem;\n}\n\n.ml-4 {\n margin-left: 1rem;\n}\n\n.mx-4 {\n margin-left: 1rem;\n margin-right: 1rem;\n}\n\n.my-4 {\n margin-top: 1rem;\n margin-bottom: 1rem;\n}\n\n.pt-4 {\n padding-top: 1rem;\n}\n\n.pb-4 {\n padding-bottom: 1rem;\n}\n\n.pr-4 {\n padding-right: 1rem;\n}\n\n.pl-4 {\n padding-left: 1rem;\n}\n\n.px-4 {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n\n.py-4 {\n padding-top: 1rem;\n padding-bottom: 1rem;\n}\n\n.mt-5 {\n margin-top: 1.25rem;\n}\n\n.mb-5 {\n margin-bottom: 1.25rem;\n}\n\n.mr-5 {\n margin-right: 1.25rem;\n}\n\n.ml-5 {\n margin-left: 1.25rem;\n}\n\n.mx-5 {\n margin-left: 1.25rem;\n margin-right: 1.25rem;\n}\n\n.my-5 {\n margin-top: 1.25rem;\n margin-bottom: 1.25rem;\n}\n\n.pt-5 {\n padding-top: 1.25rem;\n}\n\n.pb-5 {\n padding-bottom: 1.25rem;\n}\n\n.pr-5 {\n padding-right: 1.25rem;\n}\n\n.pl-5 {\n padding-left: 1.25rem;\n}\n\n.px-5 {\n padding-left: 1.25rem;\n padding-right: 1.25rem;\n}\n\n.py-5 {\n padding-top: 1.25rem;\n padding-bottom: 1.25rem;\n}\n\n* {\n font-family: \"Roboto\", sans-serif;\n margin: 0;\n padding: 0;\n}\n\nbody {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n background-color: #e9ebee;\n padding: 10px;\n}\n\nbody #app {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -ms-flex-wrap: wrap;\n flex-wrap: wrap;\n}\n\nbody #app .container {\n border-radius: 5px;\n width: 375px;\n margin: 5px;\n -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);\n border: 1px solid #d0d1d5;\n background-color: white;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n padding: 5px 10px;\n}\n\nbody #app .container-sm {\n border-radius: 5px;\n max-width: 375px !important;\n margin: 5px;\n -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);\n border: 1px solid #d0d1d5;\n background-color: white;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n padding: 5px 10px;\n}\n\nbody #app input,\nbody #app select {\n padding: 5px;\n outline: none;\n width: 100%;\n margin: 5px 0;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 1px solid #ccc;\n border-radius: 5px;\n}\n\nbody #app button {\n border: none;\n padding: 5px 10px;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n margin: 3px 0;\n border-radius: 3px;\n background-color: #d7dbdd;\n color: #32373b;\n}\n\nbody #app button:hover {\n background-color: #f3f4f4;\n}\n\nbody #app button:active {\n background-color: #e5e7e9;\n}\n\nbody #app button.black {\n background-color: #4e5459;\n color: #e5ffff;\n}\n\nbody #app button.black:hover {\n background-color: #363a3e;\n}\n\nbody #app button.black:active {\n background-color: #666e74;\n}\n\nbody #app button.blue {\n background-color: #59bacc;\n color: #e5ffff;\n}\n\nbody #app button.blue:hover {\n background-color: #80cad8;\n}\n\nbody #app button.blue:active {\n background-color: #6dc2d2;\n}\n\nbody #app button.red {\n background-color: #e2574c;\n color: #e5ffff;\n}\n\nbody #app button.red:hover {\n background-color: #e98078;\n}\n\nbody #app button.red:active {\n background-color: #e66c62;\n}\n\nbody #app button.green {\n background-color: #58ad69;\n color: #e5ffff;\n}\n\nbody #app button.green:hover {\n background-color: #7abe88;\n}\n\nbody #app button.green:active {\n background-color: #69b578;\n}\n\nbody #app button.orange {\n background-color: #ffbc49;\n color: #666;\n}\n\nbody #app button.orange:hover {\n background-color: #ffcf7c;\n}\n\nbody #app button.orange:active {\n background-color: #ffc563;\n}\n\nbody #app button.block {\n width: 100%;\n}\n\nbody #app button.sm {\n padding: 2px 5px;\n}\n\nbody #app ul {\n list-style: none;\n margin: 0;\n padding: 0;\n}\n\nbody #app ul li {\n padding: 5px;\n background-color: #f3f4f4;\n margin-bottom: 5px;\n border-radius: 3px;\n}\n\nbody #app ul li:last-child {\n margin-bottom: 0;\n}\n\nbody #app ul li:hover {\n background-color: #e5e7e9;\n}\n\nbody #app hr {\n background: -webkit-gradient(linear, left top, right top, from(#59bacc), to(#ffbc49));\n background: linear-gradient(to right, #59bacc, #ffbc49);\n height: 1px;\n border: none;\n}\n\nbody #app small {\n font-size: 12px;\n}\n/*# sourceMappingURL=style.css.map */" }, { "path": "ders-5/0-vue-router/src/components/HelloWorld.vue", "content": "\n\n\n\n\n\n" }, { "path": "ders-5/0-vue-router/src/main.js", "content": "import { createApp } from \"vue\";\nimport App from \"./App.vue\";\nimport router from \"./router\";\nimport \"@/assets/style.css\";\nconst app = createApp(App);\napp.use(router);\napp.mount(\"#app\");\n" }, { "path": "ders-5/0-vue-router/src/router.js", "content": "import { createRouter, createWebHashHistory } from \"vue-router\";\n// import Home from \"@/views/Home\"\nconst routes = [\n {\n name: \"HomePage\",\n path: \"/\",\n // component : Home\n component: () => import(\"@/views/Home\")\n },\n {\n name: \"AboutPage\",\n path: \"/hakkimda\",\n // component : Home\n component: () => import(\"@/views/About\")\n },\n {\n name: \"DetailPage\",\n path: \"/detay/:userID\",\n // component : Home\n component: () => import(\"@/views/Details\")\n }\n];\n\nconst router = createRouter({\n routes,\n // mode : \"hash|history\",\n // history: createWebHistory()\n history: createWebHashHistory()\n});\n\nexport default router;\n" }, { "path": "ders-5/0-vue-router/src/views/About.vue", "content": "\n" }, { "path": "ders-5/0-vue-router/src/views/Details.vue", "content": "\n\n" }, { "path": "ders-5/0-vue-router/src/views/Home.vue", "content": "\n\n\n" }, { "path": "ders-5/1-vue-router-app/README.md", "content": "# 1-vue-router-app\n\n## Project setup\n```\nyarn install\n```\n\n### Compiles and hot-reloads for development\n```\nyarn serve\n```\n\n### Compiles and minifies for production\n```\nyarn build\n```\n\n### Lints and fixes files\n```\nyarn lint\n```\n\n### Customize configuration\nSee [Configuration Reference](https://cli.vuejs.org/config/).\n" }, { "path": "ders-5/1-vue-router-app/babel.config.js", "content": "module.exports = {\n presets: [\n '@vue/cli-plugin-babel/preset'\n ]\n}\n" }, { "path": "ders-5/1-vue-router-app/db.json", "content": "{\n \"bookmarks\": [\n {\n \"title\": \"ghjghjgj\",\n \"url\": \"dfgdgd\",\n \"description\": \"hjkhjkhkhk\",\n \"id\": 5\n },\n {\n \"title\": \"hjkhkhjk\",\n \"url\": \"sdfsfsfs\",\n \"description\": \"hjkhjkjhkhkjhk\",\n \"id\": 6\n }\n ]\n}" }, { "path": "ders-5/1-vue-router-app/package.json", "content": "{\n \"name\": \"1-vue-router-app\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"scripts\": {\n \"serve\": \"vue-cli-service serve\",\n \"build\": \"vue-cli-service build\",\n \"lint\": \"vue-cli-service lint\"\n },\n \"dependencies\": {\n \"axios\": \"^0.21.1\",\n \"core-js\": \"^3.6.5\",\n \"vue\": \"^3.0.0\"\n },\n \"devDependencies\": {\n \"@vue/cli-plugin-babel\": \"~4.5.0\",\n \"@vue/cli-plugin-eslint\": \"~4.5.0\",\n \"@vue/cli-service\": \"~4.5.0\",\n \"@vue/compiler-sfc\": \"^3.0.0\",\n \"babel-eslint\": \"^10.1.0\",\n \"eslint\": \"^6.7.2\",\n \"eslint-plugin-vue\": \"^7.0.0\"\n },\n \"eslintConfig\": {\n \"root\": true,\n \"env\": {\n \"node\": true\n },\n \"extends\": [\n \"plugin:vue/vue3-essential\",\n \"eslint:recommended\"\n ],\n \"parserOptions\": {\n \"parser\": \"babel-eslint\"\n },\n \"rules\": {}\n },\n \"browserslist\": [\n \"> 1%\",\n \"last 2 versions\",\n \"not dead\"\n ]\n}\n" }, { "path": "ders-5/1-vue-router-app/public/index.html", "content": "\n\n \n \n \n \n favicon.ico\" />\n <%= htmlWebpackPlugin.options.title %>\n \n \n \n \n
      \n \n \n\n" }, { "path": "ders-5/1-vue-router-app/src/App.vue", "content": "\n" }, { "path": "ders-5/1-vue-router-app/src/components/HelloWorld.vue", "content": "\n\n\n\n\n\n" }, { "path": "ders-5/1-vue-router-app/src/main.js", "content": "import { createApp } from \"vue\";\nimport App from \"./App.vue\";\nimport router from \"./router\";\n// import axios from \"axios\";\nimport { appAxios } from \"./utils/appAxios\";\nconst app = createApp(App);\napp.use(router);\n// app.config.globalProperties.$axios = axios;\napp.config.globalProperties.$appAxios = appAxios;\napp.mount(\"#app\");\n" }, { "path": "ders-5/1-vue-router-app/src/router.js", "content": "import { createRouter, createWebHashHistory } from \"vue-router\";\n\nconst routes = [\n {\n name: \"HomePage\",\n path: \"/\",\n component: () => import(\"@/views/HomePage.vue\")\n },\n {\n name: \"NewBookmark\",\n path: \"/new\",\n component: () => import(\"@/views/NewBookmark.vue\")\n }\n];\n\nconst router = createRouter({\n routes,\n history: createWebHashHistory()\n});\n\nexport default router;\n" }, { "path": "ders-5/1-vue-router-app/src/utils/appAxios.js", "content": "import axios from \"axios\";\nexport const appAxios = axios.create({\n baseURL: \"http://localhost:3000\",\n withCredentials: false,\n headers: {\n tokenX: \"myToken\",\n \"Content-Type\": \"application/json\"\n }\n});\n" }, { "path": "ders-5/1-vue-router-app/src/views/HomePage.vue", "content": "\n\n\n" }, { "path": "ders-5/1-vue-router-app/src/views/NewBookmark.vue", "content": "\n\n" }, { "path": "ders-5/package.json", "content": "{\n \"dependencies\": {\n \"vue-router\": \"4\"\n }\n}\n" }, { "path": "ders-5/style.css", "content": "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;0,900;1,300;1,400&display=swap\");\n.text-blue {\n color: #59bacc;\n}\n\n.bg-blue {\n background-color: #59bacc;\n}\n\n.text-green {\n color: #58ad69;\n}\n\n.bg-green {\n background-color: #58ad69;\n}\n\n.text-orange {\n color: #ffbc49;\n}\n\n.bg-orange {\n background-color: #ffbc49;\n}\n\n.text-red {\n color: #e2574c;\n}\n\n.bg-red {\n background-color: #e2574c;\n}\n\n.text-black {\n color: #4e5459;\n}\n\n.bg-black {\n background-color: #4e5459;\n}\n\n.text-default {\n color: #d7dbdd;\n}\n\n.bg-default {\n background-color: #d7dbdd;\n}\n\n.text-white {\n color: #fff;\n}\n\n.bg-white {\n background-color: #fff;\n}\n\n.text-center {\n text-align: center;\n}\n\n.text-left {\n text-align: left;\n}\n\n.text-right {\n text-align: right;\n}\n\n.d-flex {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n}\n\n.justify-content-center {\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n}\n\n.justify-content-start {\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: flex-start;\n}\n\n.justify-content-between {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n}\n\n.justify-content-end {\n -webkit-box-pack: end;\n -ms-flex-pack: end;\n justify-content: flex-end;\n}\n\n.align-items-center {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.align-items-start {\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n}\n\n.align-items-end {\n -webkit-box-align: end;\n -ms-flex-align: end;\n align-items: flex-end;\n}\n\n.mt-0 {\n margin-top: 0rem;\n}\n\n.mb-0 {\n margin-bottom: 0rem;\n}\n\n.mr-0 {\n margin-right: 0rem;\n}\n\n.ml-0 {\n margin-left: 0rem;\n}\n\n.mx-0 {\n margin-left: 0rem;\n margin-right: 0rem;\n}\n\n.my-0 {\n margin-top: 0rem;\n margin-bottom: 0rem;\n}\n\n.pt-0 {\n padding-top: 0rem;\n}\n\n.pb-0 {\n padding-bottom: 0rem;\n}\n\n.pr-0 {\n padding-right: 0rem;\n}\n\n.pl-0 {\n padding-left: 0rem;\n}\n\n.px-0 {\n padding-left: 0rem;\n padding-right: 0rem;\n}\n\n.py-0 {\n padding-top: 0rem;\n padding-bottom: 0rem;\n}\n\n.mt-1 {\n margin-top: 0.25rem;\n}\n\n.mb-1 {\n margin-bottom: 0.25rem;\n}\n\n.mr-1 {\n margin-right: 0.25rem;\n}\n\n.ml-1 {\n margin-left: 0.25rem;\n}\n\n.mx-1 {\n margin-left: 0.25rem;\n margin-right: 0.25rem;\n}\n\n.my-1 {\n margin-top: 0.25rem;\n margin-bottom: 0.25rem;\n}\n\n.pt-1 {\n padding-top: 0.25rem;\n}\n\n.pb-1 {\n padding-bottom: 0.25rem;\n}\n\n.pr-1 {\n padding-right: 0.25rem;\n}\n\n.pl-1 {\n padding-left: 0.25rem;\n}\n\n.px-1 {\n padding-left: 0.25rem;\n padding-right: 0.25rem;\n}\n\n.py-1 {\n padding-top: 0.25rem;\n padding-bottom: 0.25rem;\n}\n\n.mt-2 {\n margin-top: 0.5rem;\n}\n\n.mb-2 {\n margin-bottom: 0.5rem;\n}\n\n.mr-2 {\n margin-right: 0.5rem;\n}\n\n.ml-2 {\n margin-left: 0.5rem;\n}\n\n.mx-2 {\n margin-left: 0.5rem;\n margin-right: 0.5rem;\n}\n\n.my-2 {\n margin-top: 0.5rem;\n margin-bottom: 0.5rem;\n}\n\n.pt-2 {\n padding-top: 0.5rem;\n}\n\n.pb-2 {\n padding-bottom: 0.5rem;\n}\n\n.pr-2 {\n padding-right: 0.5rem;\n}\n\n.pl-2 {\n padding-left: 0.5rem;\n}\n\n.px-2 {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n}\n\n.py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n\n.mt-3 {\n margin-top: 0.75rem;\n}\n\n.mb-3 {\n margin-bottom: 0.75rem;\n}\n\n.mr-3 {\n margin-right: 0.75rem;\n}\n\n.ml-3 {\n margin-left: 0.75rem;\n}\n\n.mx-3 {\n margin-left: 0.75rem;\n margin-right: 0.75rem;\n}\n\n.my-3 {\n margin-top: 0.75rem;\n margin-bottom: 0.75rem;\n}\n\n.pt-3 {\n padding-top: 0.75rem;\n}\n\n.pb-3 {\n padding-bottom: 0.75rem;\n}\n\n.pr-3 {\n padding-right: 0.75rem;\n}\n\n.pl-3 {\n padding-left: 0.75rem;\n}\n\n.px-3 {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n\n.py-3 {\n padding-top: 0.75rem;\n padding-bottom: 0.75rem;\n}\n\n.mt-4 {\n margin-top: 1rem;\n}\n\n.mb-4 {\n margin-bottom: 1rem;\n}\n\n.mr-4 {\n margin-right: 1rem;\n}\n\n.ml-4 {\n margin-left: 1rem;\n}\n\n.mx-4 {\n margin-left: 1rem;\n margin-right: 1rem;\n}\n\n.my-4 {\n margin-top: 1rem;\n margin-bottom: 1rem;\n}\n\n.pt-4 {\n padding-top: 1rem;\n}\n\n.pb-4 {\n padding-bottom: 1rem;\n}\n\n.pr-4 {\n padding-right: 1rem;\n}\n\n.pl-4 {\n padding-left: 1rem;\n}\n\n.px-4 {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n\n.py-4 {\n padding-top: 1rem;\n padding-bottom: 1rem;\n}\n\n.mt-5 {\n margin-top: 1.25rem;\n}\n\n.mb-5 {\n margin-bottom: 1.25rem;\n}\n\n.mr-5 {\n margin-right: 1.25rem;\n}\n\n.ml-5 {\n margin-left: 1.25rem;\n}\n\n.mx-5 {\n margin-left: 1.25rem;\n margin-right: 1.25rem;\n}\n\n.my-5 {\n margin-top: 1.25rem;\n margin-bottom: 1.25rem;\n}\n\n.pt-5 {\n padding-top: 1.25rem;\n}\n\n.pb-5 {\n padding-bottom: 1.25rem;\n}\n\n.pr-5 {\n padding-right: 1.25rem;\n}\n\n.pl-5 {\n padding-left: 1.25rem;\n}\n\n.px-5 {\n padding-left: 1.25rem;\n padding-right: 1.25rem;\n}\n\n.py-5 {\n padding-top: 1.25rem;\n padding-bottom: 1.25rem;\n}\n\n* {\n font-family: \"Roboto\", sans-serif;\n margin: 0;\n padding: 0;\n}\n\nbody {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n background-color: #e9ebee;\n padding: 10px;\n}\n\nbody #app {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -ms-flex-wrap: wrap;\n flex-wrap: wrap;\n}\n\nbody #app .container {\n border-radius: 5px;\n width: 375px;\n margin: 5px;\n -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);\n border: 1px solid #d0d1d5;\n background-color: white;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n padding: 5px 10px;\n}\n\nbody #app .container-sm {\n border-radius: 5px;\n max-width: 375px !important;\n margin: 5px;\n -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);\n border: 1px solid #d0d1d5;\n background-color: white;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n padding: 5px 10px;\n}\n\nbody #app input,\nbody #app select {\n padding: 5px;\n outline: none;\n width: 100%;\n margin: 5px 0;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 1px solid #ccc;\n border-radius: 5px;\n}\n\nbody #app button {\n border: none;\n padding: 5px 10px;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n margin: 3px 0;\n border-radius: 3px;\n background-color: #d7dbdd;\n color: #32373b;\n}\n\nbody #app button:hover {\n background-color: #f3f4f4;\n}\n\nbody #app button:active {\n background-color: #e5e7e9;\n}\n\nbody #app button.black {\n background-color: #4e5459;\n color: #e5ffff;\n}\n\nbody #app button.black:hover {\n background-color: #363a3e;\n}\n\nbody #app button.black:active {\n background-color: #666e74;\n}\n\nbody #app button.blue {\n background-color: #59bacc;\n color: #e5ffff;\n}\n\nbody #app button.blue:hover {\n background-color: #80cad8;\n}\n\nbody #app button.blue:active {\n background-color: #6dc2d2;\n}\n\nbody #app button.red {\n background-color: #e2574c;\n color: #e5ffff;\n}\n\nbody #app button.red:hover {\n background-color: #e98078;\n}\n\nbody #app button.red:active {\n background-color: #e66c62;\n}\n\nbody #app button.green {\n background-color: #58ad69;\n color: #e5ffff;\n}\n\nbody #app button.green:hover {\n background-color: #7abe88;\n}\n\nbody #app button.green:active {\n background-color: #69b578;\n}\n\nbody #app button.orange {\n background-color: #ffbc49;\n color: #666;\n}\n\nbody #app button.orange:hover {\n background-color: #ffcf7c;\n}\n\nbody #app button.orange:active {\n background-color: #ffc563;\n}\n\nbody #app button.block {\n width: 100%;\n}\n\nbody #app button.sm {\n padding: 2px 5px;\n}\n\nbody #app ul {\n list-style: none;\n margin: 0;\n padding: 0;\n}\n\nbody #app ul li {\n padding: 5px;\n background-color: #f3f4f4;\n margin-bottom: 5px;\n border-radius: 3px;\n}\n\nbody #app ul li:last-child {\n margin-bottom: 0;\n}\n\nbody #app ul li:hover {\n background-color: #e5e7e9;\n}\n\nbody #app hr {\n background: -webkit-gradient(linear, left top, right top, from(#59bacc), to(#ffbc49));\n background: linear-gradient(to right, #59bacc, #ffbc49);\n height: 1px;\n border: none;\n}\n\nbody #app small {\n font-size: 12px;\n}\n/*# sourceMappingURL=style.css.map */" }, { "path": "ders-6-socialmark-uygulamasi/client/.prettierrc", "content": "{\n \"printWidth\": 250\n}" }, { "path": "ders-6-socialmark-uygulamasi/client/README.md", "content": "# ders-6-socialmark-uygulamasi\n\n## Project setup\n```\nyarn install\n```\n\n### Compiles and hot-reloads for development\n```\nyarn serve\n```\n\n### Compiles and minifies for production\n```\nyarn build\n```\n\n### Lints and fixes files\n```\nyarn lint\n```\n\n### Customize configuration\nSee [Configuration Reference](https://cli.vuejs.org/config/).\n" }, { "path": "ders-6-socialmark-uygulamasi/client/babel.config.js", "content": "module.exports = {\n presets: [\n '@vue/cli-plugin-babel/preset'\n ]\n}\n" }, { "path": "ders-6-socialmark-uygulamasi/client/db.json", "content": "{\n \"users\": [\n {\n \"username\": \"gkandemir\",\n \"fullname\": \"Gökhan Kandemir\",\n \"password\": \"79a0af24ff17bb7a8a4a1176de203d9f566ee17d\",\n \"id\": 1\n },\n {\n \"username\": \"prototurk\",\n \"fullname\": \"Tayfun Erbilen\",\n \"password\": \"79a0af24ff17bb7a8a4a1176de203d9f566ee17d\",\n \"id\": 2\n },\n {\n \"username\": \"kablosuzbeyin\",\n \"fullname\": \"Ramazan Sancar\",\n \"password\": \"79a0af24ff17bb7a8a4a1176de203d9f566ee17d\",\n \"id\": 3\n }\n ],\n \"user_likes\": [\n {\n \"userId\": 1,\n \"bookmarkId\": 1,\n \"id\": 1\n },\n {\n \"userId\": 1,\n \"bookmarkId\": 6,\n \"id\": 4\n },\n {\n \"userId\": 1,\n \"bookmarkId\": 16,\n \"id\": 5\n },\n {\n \"userId\": 1,\n \"bookmarkId\": 9,\n \"id\": 6\n }\n ],\n \"user_bookmarks\": [\n {\n \"userId\": 1,\n \"bookmarkId\": 6,\n \"id\": 4\n },\n {\n \"userId\": 1,\n \"bookmarkId\": 16,\n \"id\": 5\n },\n {\n \"userId\": 1,\n \"bookmarkId\": 9,\n \"id\": 6\n }\n ],\n \"bookmarks\": [\n {\n \"title\": \"Vue Docs\",\n \"url\": \"https://v3.vuejs.org\",\n \"categoryId\": 1,\n \"description\": \"Dünyanın en güzel framework'ü\",\n \"userId\": 1,\n \"created_at\": \"2021-08-26T18:57:24.821Z\",\n \"id\": 1\n },\n {\n \"title\": \"Frontend Masters\",\n \"url\": \"http://...\",\n \"categoryId\": 3,\n \"description\": \"Çok güzel bir kaynak..\",\n \"userId\": 1,\n \"created_at\": \"2021-08-26T19:00:35.404Z\",\n \"id\": 2\n },\n {\n \"title\": \"AWS\",\n \"url\": \"https:///aws\",\n \"categoryId\": 5,\n \"description\": \"çok güzel\",\n \"userId\": 1,\n \"created_at\": \"2021-08-26T19:01:12.447Z\",\n \"id\": 3\n },\n {\n \"title\": \"Güzel Müzikler\",\n \"url\": \"https://...\",\n \"categoryId\": 6,\n \"description\": \"çok güzel müzikler ama gerçekten çok güzel..\",\n \"userId\": 1,\n \"created_at\": \"2021-08-26T19:11:23.114Z\",\n \"id\": 4\n },\n {\n \"title\": \"Prototurk\",\n \"url\": \"https://prototurk.com\",\n \"categoryId\": 4,\n \"description\": \"Türkiyenin StackOverflow'u olacak bir sayfa.\",\n \"userId\": 2,\n \"created_at\": \"2021-08-26T19:43:24.698Z\",\n \"id\": 5\n },\n {\n \"title\": \"Marvel Filmleri\",\n \"url\": \"httpa://...\",\n \"categoryId\": 6,\n \"description\": \"bu serinin tamamını kesinlikle izle.\",\n \"userId\": 1,\n \"created_at\": \"2021-08-26T20:03:34.015Z\",\n \"id\": 6\n },\n {\n \"title\": \"Kablosuz Beyin\",\n \"url\": \"https://kablosuzbeyin.com\",\n \"categoryId\": 6,\n \"description\": \"Kablosuz Beyin etkinlikler için..\",\n \"userId\": 1,\n \"created_at\": \"2021-08-26T20:04:14.248Z\",\n \"id\": 7\n },\n {\n \"title\": \"Yeni Yer İmi\",\n \"url\": \"http://....\",\n \"categoryId\": 2,\n \"description\": \"aaaaa\",\n \"userId\": 1,\n \"created_at\": \"2021-09-01T18:31:14.532Z\",\n \"id\": 8\n },\n {\n \"title\": \"tttt\",\n \"url\": \"aaaaa\",\n \"categoryId\": 4,\n \"description\": \"ssssss\",\n \"userId\": 1,\n \"created_at\": \"2021-09-01T18:35:59.811Z\",\n \"id\": 9\n },\n {\n \"title\": \"TestS\",\n \"url\": \"http://...\",\n \"categoryId\": 1,\n \"description\": \"aaaaa\",\n \"userId\": 2,\n \"created_at\": \"2021-09-01T18:37:57.630Z\",\n \"id\": 10\n },\n {\n \"title\": \"denem\",\n \"url\": \"http\",\n \"categoryId\": 2,\n \"description\": \"asdadasdad\",\n \"userId\": 1,\n \"created_at\": \"2021-09-01T18:41:07.474Z\",\n \"id\": 11\n },\n {\n \"title\": \"New Test\",\n \"url\": \"http://\",\n \"categoryId\": 2,\n \"description\": \"aaaaaaa\",\n \"userId\": 2,\n \"created_at\": \"2021-09-01T18:45:30.984Z\",\n \"id\": 12\n },\n {\n \"title\": \"Deneme\",\n \"url\": \"http://\",\n \"categoryId\": 1,\n \"description\": \"aaaa\",\n \"userId\": 2,\n \"created_at\": \"2021-09-01T18:45:53.053Z\",\n \"id\": 13\n },\n {\n \"title\": \"yen\",\n \"url\": \"aaa\",\n \"categoryId\": 1,\n \"description\": \"sdfsdf\",\n \"userId\": 1,\n \"created_at\": \"2021-09-01T18:46:51.308Z\",\n \"id\": 14\n },\n {\n \"title\": \"deneme\",\n \"url\": \"aaaaa\",\n \"categoryId\": 3,\n \"description\": \"asdasd\",\n \"userId\": 1,\n \"created_at\": \"2021-09-01T18:51:28.380Z\",\n \"id\": 15\n },\n {\n \"title\": \"Can Sarıgöl Oyun\",\n \"url\": \"178....\",\n \"categoryId\": 1,\n \"description\": \"aaaaaaaaaaaa\",\n \"userId\": 2,\n \"created_at\": \"2021-09-01T18:52:14.559Z\",\n \"id\": 16\n },\n {\n \"title\": \"aaa\",\n \"url\": \"fdghfggh\",\n \"categoryId\": 3,\n \"description\": \"fghfghfh\",\n \"userId\": 1,\n \"created_at\": \"2021-09-01T18:52:35.170Z\",\n \"id\": 17\n },\n {\n \"title\": \"Vue3 Bootcamp\",\n \"url\": \"aaaa\",\n \"categoryId\": 5,\n \"description\": \"sdfsdfdsf\",\n \"userId\": 1,\n \"created_at\": \"2021-09-01T18:54:42.357Z\",\n \"id\": 18\n }\n ],\n \"categories\": [\n {\n \"name\": \"Vue.js\",\n \"id\": 1\n },\n {\n \"name\": \"React.js\",\n \"id\": 2\n },\n {\n \"name\": \"Frontend\",\n \"id\": 3\n },\n {\n \"name\": \"Backend\",\n \"id\": 4\n },\n {\n \"name\": \"Cloud\",\n \"id\": 5\n },\n {\n \"name\": \"Sosyal Yaşam\",\n \"id\": 6\n }\n ]\n}" }, { "path": "ders-6-socialmark-uygulamasi/client/package.json", "content": "{\n \"name\": \"ders-6-socialmark-uygulamasi\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"scripts\": {\n \"serve\": \"vue-cli-service serve\",\n \"build\": \"vue-cli-service build\",\n \"lint\": \"vue-cli-service lint\"\n },\n \"dependencies\": {\n \"axios\": \"^0.21.1\",\n \"core-js\": \"^3.6.5\",\n \"crypto-js\": \"^4.1.1\",\n \"secure-ls\": \"^1.2.6\",\n \"socket.io-client\": \"^4.2.0\",\n \"vue\": \"^3.0.0\",\n \"vue-router\": \"4\",\n \"vuex\": \"^4.0.2\",\n \"vuex-persistedstate\": \"^4.0.0\"\n },\n \"devDependencies\": {\n \"@vue/cli-plugin-babel\": \"~4.5.0\",\n \"@vue/cli-plugin-eslint\": \"~4.5.0\",\n \"@vue/cli-service\": \"~4.5.0\",\n \"@vue/compiler-sfc\": \"^3.0.0\",\n \"babel-eslint\": \"^10.1.0\",\n \"eslint\": \"^6.7.2\",\n \"eslint-plugin-vue\": \"^7.0.0\"\n },\n \"eslintConfig\": {\n \"root\": true,\n \"env\": {\n \"node\": true\n },\n \"extends\": [\n \"plugin:vue/vue3-essential\",\n \"eslint:recommended\"\n ],\n \"parserOptions\": {\n \"parser\": \"babel-eslint\"\n },\n \"rules\": {}\n },\n \"browserslist\": [\n \"> 1%\",\n \"last 2 versions\",\n \"not dead\"\n ]\n}\n" }, { "path": "ders-6-socialmark-uygulamasi/client/public/index.html", "content": "\n\n \n \n \n \n favicon.ico\" />\n <%= htmlWebpackPlugin.options.title %>\n \n \n \n
      \n \n \n\n" }, { "path": "ders-6-socialmark-uygulamasi/client/src/App.vue", "content": "\n" }, { "path": "ders-6-socialmark-uygulamasi/client/src/assets/style.css", "content": "/*! tailwindcss v2.2.7 | MIT License | https://tailwindcss.com */\n\n/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */\n\n/*\nDocument\n========\n*/\n\n/**\nUse a better box model (opinionated).\n*/\n\n*,\n::before,\n::after {\n box-sizing: border-box;\n}\n\n/**\nUse a more readable tab size (opinionated).\n*/\n\nhtml {\n -moz-tab-size: 4;\n -o-tab-size: 4;\n tab-size: 4;\n}\n\n/**\n1. Correct the line height in all browsers.\n2. Prevent adjustments of font size after orientation changes in iOS.\n*/\n\nhtml {\n line-height: 1.15;\n /* 1 */\n -webkit-text-size-adjust: 100%;\n /* 2 */\n}\n\n/*\nSections\n========\n*/\n\n/**\nRemove the margin in all browsers.\n*/\n\nbody {\n margin: 0;\n}\n\n/**\nImprove consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)\n*/\n\nbody {\n font-family:\n\t\tsystem-ui,\n\t\t-apple-system, /* Firefox supports this but not yet `system-ui` */\n\t\t'Segoe UI',\n\t\tRoboto,\n\t\tHelvetica,\n\t\tArial,\n\t\tsans-serif,\n\t\t'Apple Color Emoji',\n\t\t'Segoe UI Emoji';\n}\n\n/*\nGrouping content\n================\n*/\n\n/**\n1. Add the correct height in Firefox.\n2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)\n*/\n\nhr {\n height: 0;\n /* 1 */\n color: inherit;\n /* 2 */\n}\n\n/*\nText-level semantics\n====================\n*/\n\n/**\nAdd the correct text decoration in Chrome, Edge, and Safari.\n*/\n\nabbr[title] {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n}\n\n/**\nAdd the correct font weight in Edge and Safari.\n*/\n\nb,\nstrong {\n font-weight: bolder;\n}\n\n/**\n1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)\n2. Correct the odd 'em' font sizing in all browsers.\n*/\n\ncode,\nkbd,\nsamp,\npre {\n font-family:\n\t\tui-monospace,\n\t\tSFMono-Regular,\n\t\tConsolas,\n\t\t'Liberation Mono',\n\t\tMenlo,\n\t\tmonospace;\n /* 1 */\n font-size: 1em;\n /* 2 */\n}\n\n/**\nAdd the correct font size in all browsers.\n*/\n\nsmall {\n font-size: 80%;\n}\n\n/**\nPrevent 'sub' and 'sup' elements from affecting the line height in all browsers.\n*/\n\nsub,\nsup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n}\n\nsub {\n bottom: -0.25em;\n}\n\nsup {\n top: -0.5em;\n}\n\n/*\nTabular data\n============\n*/\n\n/**\n1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)\n2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)\n*/\n\ntable {\n text-indent: 0;\n /* 1 */\n border-color: inherit;\n /* 2 */\n}\n\n/*\nForms\n=====\n*/\n\n/**\n1. Change the font styles in all browsers.\n2. Remove the margin in Firefox and Safari.\n*/\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n font-family: inherit;\n /* 1 */\n font-size: 100%;\n /* 1 */\n line-height: 1.15;\n /* 1 */\n margin: 0;\n /* 2 */\n}\n\n/**\nRemove the inheritance of text transform in Edge and Firefox.\n1. Remove the inheritance of text transform in Firefox.\n*/\n\nbutton,\nselect {\n /* 1 */\n text-transform: none;\n}\n\n/**\nCorrect the inability to style clickable types in iOS and Safari.\n*/\n\nbutton,\n[type='button'],\n[type='reset'],\n[type='submit'] {\n -webkit-appearance: button;\n}\n\n/**\nRemove the inner border and padding in Firefox.\n*/\n\n::-moz-focus-inner {\n border-style: none;\n padding: 0;\n}\n\n/**\nRestore the focus styles unset by the previous rule.\n*/\n\n:-moz-focusring {\n outline: 1px dotted ButtonText;\n}\n\n/**\nRemove the additional ':invalid' styles in Firefox.\nSee: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737\n*/\n\n:-moz-ui-invalid {\n box-shadow: none;\n}\n\n/**\nRemove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.\n*/\n\nlegend {\n padding: 0;\n}\n\n/**\nAdd the correct vertical alignment in Chrome and Firefox.\n*/\n\nprogress {\n vertical-align: baseline;\n}\n\n/**\nCorrect the cursor style of increment and decrement buttons in Safari.\n*/\n\n::-webkit-inner-spin-button,\n::-webkit-outer-spin-button {\n height: auto;\n}\n\n/**\n1. Correct the odd appearance in Chrome and Safari.\n2. Correct the outline style in Safari.\n*/\n\n[type='search'] {\n -webkit-appearance: textfield;\n /* 1 */\n outline-offset: -2px;\n /* 2 */\n}\n\n/**\nRemove the inner padding in Chrome and Safari on macOS.\n*/\n\n::-webkit-search-decoration {\n -webkit-appearance: none;\n}\n\n/**\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Change font properties to 'inherit' in Safari.\n*/\n\n::-webkit-file-upload-button {\n -webkit-appearance: button;\n /* 1 */\n font: inherit;\n /* 2 */\n}\n\n/*\nInteractive\n===========\n*/\n\n/*\nAdd the correct display in Chrome and Safari.\n*/\n\nsummary {\n display: list-item;\n}\n\n/**\n * Manually forked from SUIT CSS Base: https://github.com/suitcss/base\n * A thin layer on top of normalize.css that provides a starting point more\n * suitable for web applications.\n */\n\n/**\n * Removes the default spacing and border for appropriate elements.\n */\n\nblockquote,\ndl,\ndd,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nhr,\nfigure,\np,\npre {\n margin: 0;\n}\n\nbutton {\n background-color: transparent;\n background-image: none;\n}\n\nfieldset {\n margin: 0;\n padding: 0;\n}\n\nol,\nul {\n list-style: none;\n margin: 0;\n padding: 0;\n}\n\n/**\n * Tailwind custom reset styles\n */\n\n/**\n * 1. Use the user's configured `sans` font-family (with Tailwind's default\n * sans-serif font stack as a fallback) as a sane default.\n * 2. Use Tailwind's default \"normal\" line-height so the user isn't forced\n * to override it to ensure consistency even when using the default theme.\n */\n\nhtml {\n font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n /* 1 */\n line-height: 1.5;\n /* 2 */\n}\n\n/**\n * Inherit font-family and line-height from `html` so users can set them as\n * a class directly on the `html` element.\n */\n\nbody {\n font-family: inherit;\n line-height: inherit;\n}\n\n/**\n * 1. Prevent padding and border from affecting element width.\n *\n * We used to set this in the html element and inherit from\n * the parent element for everything else. This caused issues\n * in shadow-dom-enhanced elements like
      where the content\n * is wrapped by a div with box-sizing set to `content-box`.\n *\n * https://github.com/mozdevs/cssremedy/issues/4\n *\n *\n * 2. Allow adding a border to an element by just adding a border-width.\n *\n * By default, the way the browser specifies that an element should have no\n * border is by setting it's border-style to `none` in the user-agent\n * stylesheet.\n *\n * In order to easily add borders to elements by just setting the `border-width`\n * property, we change the default border-style for all elements to `solid`, and\n * use border-width to hide them instead. This way our `border` utilities only\n * need to set the `border-width` property instead of the entire `border`\n * shorthand, making our border utilities much more straightforward to compose.\n *\n * https://github.com/tailwindcss/tailwindcss/pull/116\n */\n\n*,\n::before,\n::after {\n box-sizing: border-box;\n /* 1 */\n border-width: 0;\n /* 2 */\n border-style: solid;\n /* 2 */\n border-color: currentColor;\n /* 2 */\n}\n\n/*\n * Ensure horizontal rules are visible by default\n */\n\nhr {\n border-top-width: 1px;\n}\n\n/**\n * Undo the `border-style: none` reset that Normalize applies to images so that\n * our `border-{width}` utilities have the expected effect.\n *\n * The Normalize reset is unnecessary for us since we default the border-width\n * to 0 on all elements.\n *\n * https://github.com/tailwindcss/tailwindcss/issues/362\n */\n\nimg {\n border-style: solid;\n}\n\ntextarea {\n resize: vertical;\n}\n\ninput::-moz-placeholder, textarea::-moz-placeholder {\n opacity: 1;\n color: #9ca3af;\n}\n\ninput:-ms-input-placeholder, textarea:-ms-input-placeholder {\n opacity: 1;\n color: #9ca3af;\n}\n\ninput::placeholder,\ntextarea::placeholder {\n opacity: 1;\n color: #9ca3af;\n}\n\nbutton,\n[role=\"button\"] {\n cursor: pointer;\n}\n\ntable {\n border-collapse: collapse;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n font-size: inherit;\n font-weight: inherit;\n}\n\n/**\n * Reset links to optimize for opt-in styling instead of\n * opt-out.\n */\n\na {\n color: inherit;\n text-decoration: inherit;\n}\n\n/**\n * Reset form element properties that are easy to forget to\n * style explicitly so you don't inadvertently introduce\n * styles that deviate from your design system. These styles\n * supplement a partial reset that is already applied by\n * normalize.css.\n */\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n padding: 0;\n line-height: inherit;\n color: inherit;\n}\n\n/**\n * Use the configured 'mono' font family for elements that\n * are expected to be rendered with a monospace font, falling\n * back to the system monospace stack if there is no configured\n * 'mono' font family.\n */\n\npre,\ncode,\nkbd,\nsamp {\n font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n}\n\n/**\n * 1. Make replaced elements `display: block` by default as that's\n * the behavior you want almost all of the time. Inspired by\n * CSS Remedy, with `svg` added as well.\n *\n * https://github.com/mozdevs/cssremedy/issues/14\n * \n * 2. Add `vertical-align: middle` to align replaced elements more\n * sensibly by default when overriding `display` by adding a\n * utility like `inline`.\n *\n * This can trigger a poorly considered linting error in some\n * tools but is included by design.\n * \n * https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210\n */\n\nimg,\nsvg,\nvideo,\ncanvas,\naudio,\niframe,\nembed,\nobject {\n display: block;\n /* 1 */\n vertical-align: middle;\n /* 2 */\n}\n\n/**\n * Constrain images and videos to the parent width and preserve\n * their intrinsic aspect ratio.\n *\n * https://github.com/mozdevs/cssremedy/issues/14\n */\n\nimg,\nvideo {\n max-width: 100%;\n height: auto;\n}\n\n/**\n * Ensure the default browser behavior of the `hidden` attribute.\n */\n\n[hidden] {\n display: none;\n}\n\n*, ::before, ::after {\n --tw-border-opacity: 1;\n border-color: rgba(229, 231, 235, var(--tw-border-opacity));\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n --tw-shadow: 0 0 #0000;\n}\n\n.like-btn {\n display: flex;\n height: 2.5rem;\n width: 2.5rem;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n border-radius: 0.375rem;\n padding: 0.5rem;\n}\n\n.like-btn:hover {\n --tw-bg-opacity: 1;\n background-color: rgba(165, 180, 252, var(--tw-bg-opacity));\n}\n\n.like-item-active {\n --tw-bg-opacity: 1;\n background-color: rgba(199, 210, 254, var(--tw-bg-opacity));\n --tw-text-opacity: 1;\n color: rgba(55, 48, 163, var(--tw-text-opacity));\n}\n\n.bookmark-btn {\n display: flex;\n height: 2.5rem;\n width: 2.5rem;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n border-radius: 0.375rem;\n padding: 0.5rem;\n}\n\n.bookmark-btn:hover {\n --tw-bg-opacity: 1;\n background-color: rgba(252, 165, 165, var(--tw-bg-opacity));\n}\n\n.bookmark-item-active {\n --tw-bg-opacity: 1;\n background-color: rgba(254, 202, 202, var(--tw-bg-opacity));\n --tw-text-opacity: 1;\n color: rgba(153, 27, 27, var(--tw-text-opacity));\n}\n\n.details-btn {\n display: flex;\n height: 2.5rem;\n width: 2.5rem;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n border-radius: 0.375rem;\n padding: 0.5rem;\n}\n\n.details-btn:hover {\n --tw-bg-opacity: 1;\n background-color: rgba(229, 231, 235, var(--tw-bg-opacity));\n}\n\n.group:focus-within .details-btn {\n --tw-bg-opacity: 1;\n background-color: rgba(209, 213, 219, var(--tw-bg-opacity));\n}\n\n.sidebar {\n display: flex;\n height: 100vh;\n width: 15rem;\n flex-shrink: 0;\n flex-direction: column;\n border-right-width: 1px;\n --tw-border-opacity: 1;\n border-color: rgba(229, 231, 235, var(--tw-border-opacity));\n --tw-bg-opacity: 1;\n background-color: rgba(255, 255, 255, var(--tw-bg-opacity));\n}\n\n.details-container {\n visibility: hidden;\n position: absolute;\n right: 0px;\n top: 100%;\n z-index: 10 !important;\n height: 10rem;\n width: 15rem;\n overflow-y: scroll;\n border-radius: 0.375rem;\n border-width: 1px;\n --tw-border-opacity: 1;\n border-color: rgba(209, 213, 219, var(--tw-border-opacity));\n --tw-bg-opacity: 1;\n background-color: rgba(255, 255, 255, var(--tw-bg-opacity));\n padding: 0.75rem;\n text-align: left;\n --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.group:focus-within .details-container {\n visibility: visible;\n}\n\n.group:hover .details-container {\n visibility: visible;\n}\n\n.header-container {\n display: flex;\n height: 4rem;\n width: 100%;\n align-items: center;\n justify-content: center;\n border-bottom-width: 1px;\n --tw-border-opacity: 1;\n border-color: rgba(229, 231, 235, var(--tw-border-opacity));\n --tw-bg-opacity: 1;\n background-color: rgba(255, 255, 255, var(--tw-bg-opacity));\n}\n\n.navbar-item {\n border-radius: 0.5rem;\n border-width: 1px;\n --tw-border-opacity: 1;\n border-color: rgba(107, 114, 128, var(--tw-border-opacity));\n padding: 0.5rem;\n --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n transition-property: background-color, border-color, color, fill, stroke;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n\n.navbar-item:hover {\n --tw-bg-opacity: 1;\n background-color: rgba(0, 0, 0, var(--tw-bg-opacity));\n --tw-text-opacity: 1;\n color: rgba(255, 255, 255, var(--tw-text-opacity));\n}\n\n.menu-item {\n display: flex;\n border-radius: 0.375rem;\n padding: 0.5rem;\n}\n\n.menu-item:hover {\n --tw-bg-opacity: 1;\n background-color: rgba(0, 0, 0, var(--tw-bg-opacity));\n --tw-text-opacity: 1;\n color: rgba(255, 255, 255, var(--tw-text-opacity));\n}\n\n.sidebar-item {\n display: flex;\n --tw-bg-opacity: 1;\n background-color: rgba(255, 255, 255, var(--tw-bg-opacity));\n padding: 0.5rem;\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n padding-top: 0.75rem;\n padding-bottom: 0.75rem;\n --tw-text-opacity: 1;\n color: rgba(107, 114, 128, var(--tw-text-opacity));\n}\n\n.sidebar-item:hover {\n --tw-bg-opacity: 1;\n background-color: rgba(0, 0, 0, var(--tw-bg-opacity));\n --tw-text-opacity: 1;\n color: rgba(255, 255, 255, var(--tw-text-opacity));\n}\n\n.login_register_container {\n position: absolute;\n top: 50%;\n left: 50%;\n margin: auto;\n display: flex;\n width: 91.666667%;\n transform: translate(-50%, -50%);\n flex-direction: column;\n border-radius: 0.375rem;\n border-width: 1px;\n --tw-border-opacity: 1;\n border-color: rgba(209, 213, 219, var(--tw-border-opacity));\n --tw-bg-opacity: 1;\n background-color: rgba(255, 255, 255, var(--tw-bg-opacity));\n padding: 0.75rem;\n --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n@media (min-width: 640px) {\n .login_register_container {\n width: 50%;\n }\n}\n\n@media (min-width: 768px) {\n .login_register_container {\n width: 33.333333%;\n }\n}\n\n@media (min-width: 1024px) {\n .login_register_container {\n width: 25%;\n }\n}\n\n.input {\n border-radius: 0.125rem;\n border-width: 1px;\n --tw-border-opacity: 1;\n border-color: rgba(209, 213, 219, var(--tw-border-opacity));\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n outline: 2px solid transparent;\n outline-offset: 2px;\n}\n\n.input:focus {\n --tw-border-opacity: 1;\n border-color: rgba(0, 0, 0, var(--tw-border-opacity));\n}\n\n.default-button {\n border-radius: 0.375rem;\n --tw-bg-opacity: 1;\n background-color: rgba(55, 65, 81, var(--tw-bg-opacity));\n padding: 0.5rem;\n --tw-text-opacity: 1;\n color: rgba(255, 255, 255, var(--tw-text-opacity));\n}\n\n.default-button:hover {\n --tw-bg-opacity: 1;\n background-color: rgba(0, 0, 0, var(--tw-bg-opacity));\n}\n\n.secondary-button {\n border-radius: 0.375rem;\n --tw-bg-opacity: 1;\n background-color: rgba(107, 114, 128, var(--tw-bg-opacity));\n padding: 0.5rem;\n --tw-text-opacity: 1;\n color: rgba(255, 255, 255, var(--tw-text-opacity));\n}\n\n.secondary-button:hover {\n --tw-bg-opacity: 1;\n background-color: rgba(75, 85, 99, var(--tw-bg-opacity));\n}\n\n.invisible {\n visibility: hidden;\n}\n\n.absolute {\n position: absolute;\n}\n\n.relative {\n position: relative;\n}\n\n.top-full {\n top: 100%;\n}\n\n.right-0 {\n right: 0px;\n}\n\n.\\!z-10 {\n z-index: 10 !important;\n}\n\n.mx-auto {\n margin-left: auto;\n margin-right: auto;\n}\n\n.mr-2 {\n margin-right: 0.5rem;\n}\n\n.mr-3 {\n margin-right: 0.75rem;\n}\n\n.ml-auto {\n margin-left: auto;\n}\n\n.mb-2 {\n margin-bottom: 0.5rem;\n}\n\n.mr-1 {\n margin-right: 0.25rem;\n}\n\n.mb-3 {\n margin-bottom: 0.75rem;\n}\n\n.mb-1 {\n margin-bottom: 0.25rem;\n}\n\n.mt-2 {\n margin-top: 0.5rem;\n}\n\n.mt-3 {\n margin-top: 0.75rem;\n}\n\n.flex {\n display: flex;\n}\n\n.grid {\n display: grid;\n}\n\n.hidden {\n display: none;\n}\n\n.h-16 {\n height: 4rem;\n}\n\n.h-8 {\n height: 2rem;\n}\n\n.h-\\[100vh\\] {\n height: 100vh;\n}\n\n.h-10 {\n height: 2.5rem;\n}\n\n.h-40 {\n height: 10rem;\n}\n\n.w-full {\n width: 100%;\n}\n\n.w-8 {\n width: 2rem;\n}\n\n.w-56 {\n width: 14rem;\n}\n\n.w-60 {\n width: 15rem;\n}\n\n.w-1\\/4 {\n width: 25%;\n}\n\n.w-10 {\n width: 2.5rem;\n}\n\n.flex-shrink-0 {\n flex-shrink: 0;\n}\n\n.grid-cols-8 {\n grid-template-columns: repeat(8, minmax(0, 1fr));\n}\n\n.flex-row {\n flex-direction: row;\n}\n\n.flex-col {\n flex-direction: column;\n}\n\n.items-center {\n align-items: center;\n}\n\n.justify-end {\n justify-content: flex-end;\n}\n\n.justify-center {\n justify-content: center;\n}\n\n.justify-between {\n justify-content: space-between;\n}\n\n.gap-4 {\n gap: 1rem;\n}\n\n.gap-x-3 {\n -moz-column-gap: 0.75rem;\n column-gap: 0.75rem;\n}\n\n.gap-x-1 {\n -moz-column-gap: 0.25rem;\n column-gap: 0.25rem;\n}\n\n.overflow-x-hidden {\n overflow-x: hidden;\n}\n\n.overflow-y-scroll {\n overflow-y: scroll;\n}\n\n.rounded-sm {\n border-radius: 0.125rem;\n}\n\n.rounded-md {\n border-radius: 0.375rem;\n}\n\n.border-\\[1px\\] {\n border-width: 1px;\n}\n\n.border-b-\\[1px\\] {\n border-bottom-width: 1px;\n}\n\n.border-r-\\[1px\\] {\n border-right-width: 1px;\n}\n\n.border-gray-200 {\n --tw-border-opacity: 1;\n border-color: rgba(229, 231, 235, var(--tw-border-opacity));\n}\n\n.border-gray-300 {\n --tw-border-opacity: 1;\n border-color: rgba(209, 213, 219, var(--tw-border-opacity));\n}\n\n.bg-gray-100 {\n --tw-bg-opacity: 1;\n background-color: rgba(243, 244, 246, var(--tw-bg-opacity));\n}\n\n.bg-white {\n --tw-bg-opacity: 1;\n background-color: rgba(255, 255, 255, var(--tw-bg-opacity));\n}\n\n.bg-gray-700 {\n --tw-bg-opacity: 1;\n background-color: rgba(55, 65, 81, var(--tw-bg-opacity));\n}\n\n.bg-red-200 {\n --tw-bg-opacity: 1;\n background-color: rgba(254, 202, 202, var(--tw-bg-opacity));\n}\n\n.fill-current {\n fill: currentColor;\n}\n\n.p-2 {\n padding: 0.5rem;\n}\n\n.p-3 {\n padding: 0.75rem;\n}\n\n.p-1 {\n padding: 0.25rem;\n}\n\n.px-2 {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n}\n\n.px-3 {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n\n.py-1 {\n padding-top: 0.25rem;\n padding-bottom: 0.25rem;\n}\n\n.text-left {\n text-align: left;\n}\n\n.text-center {\n text-align: center;\n}\n\n.text-xl {\n font-size: 1.25rem;\n line-height: 1.75rem;\n}\n\n.text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n\n.text-2xl {\n font-size: 1.5rem;\n line-height: 2rem;\n}\n\n.text-xs {\n font-size: 0.75rem;\n line-height: 1rem;\n}\n\n.font-bold {\n font-weight: 700;\n}\n\n.text-white {\n --tw-text-opacity: 1;\n color: rgba(255, 255, 255, var(--tw-text-opacity));\n}\n\n.text-gray-600 {\n --tw-text-opacity: 1;\n color: rgba(75, 85, 99, var(--tw-text-opacity));\n}\n\n.text-gray-400 {\n --tw-text-opacity: 1;\n color: rgba(156, 163, 175, var(--tw-text-opacity));\n}\n\n.text-red-900 {\n --tw-text-opacity: 1;\n color: rgba(127, 29, 29, var(--tw-text-opacity));\n}\n\n.shadow-md {\n --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.shadow-sm {\n --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.shadow-lg {\n --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.transition-colors {\n transition-property: background-color, border-color, color, fill, stroke;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n\n.duration-500 {\n transition-duration: 500ms;\n}\n\n.hover\\:bg-black:hover {\n --tw-bg-opacity: 1;\n background-color: rgba(0, 0, 0, var(--tw-bg-opacity));\n}\n\n.hover\\:bg-gray-200:hover {\n --tw-bg-opacity: 1;\n background-color: rgba(229, 231, 235, var(--tw-bg-opacity));\n}\n\n.hover\\:bg-indigo-300:hover {\n --tw-bg-opacity: 1;\n background-color: rgba(165, 180, 252, var(--tw-bg-opacity));\n}\n\n.hover\\:text-black:hover {\n --tw-text-opacity: 1;\n color: rgba(0, 0, 0, var(--tw-text-opacity));\n}\n\n.group:focus-within .group-focus-within\\:visible {\n visibility: visible;\n}\n\n.group:focus-within .group-focus-within\\:bg-gray-300 {\n --tw-bg-opacity: 1;\n background-color: rgba(209, 213, 219, var(--tw-bg-opacity));\n}\n\n.group:hover .group-hover\\:visible {\n visibility: visible;\n}\n\n.group:hover .group-hover\\:text-white {\n --tw-text-opacity: 1;\n color: rgba(255, 255, 255, var(--tw-text-opacity));\n}\n\n.group:hover .group-hover\\:text-gray-700 {\n --tw-text-opacity: 1;\n color: rgba(55, 65, 81, var(--tw-text-opacity));\n}\n\n@media (min-width: 640px) {\n .sm\\:grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n}\n\n@media (min-width: 768px) {\n .md\\:grid-cols-4 {\n grid-template-columns: repeat(4, minmax(0, 1fr));\n }\n}\n\n@media (min-width: 1024px) {\n .lg\\:grid-cols-5 {\n grid-template-columns: repeat(5, minmax(0, 1fr));\n }\n}\n\n@media (min-width: 1280px) {\n .xl\\:grid-cols-6 {\n grid-template-columns: repeat(6, minmax(0, 1fr));\n }\n}\n\n@media (min-width: 1536px) {\n .\\32xl\\:grid-cols-8 {\n grid-template-columns: repeat(8, minmax(0, 1fr));\n }\n}\n" }, { "path": "ders-6-socialmark-uygulamasi/client/src/components/Account/sideBar.vue", "content": "\n" }, { "path": "ders-6-socialmark-uygulamasi/client/src/components/HelloWorld.vue", "content": "\n\n\n\n\n\n" }, { "path": "ders-6-socialmark-uygulamasi/client/src/components/Home/Sidebar.vue", "content": "\n\n" }, { "path": "ders-6-socialmark-uygulamasi/client/src/components/Shared/appBookmarkList/BookmarkListItem.vue", "content": "\n\n" }, { "path": "ders-6-socialmark-uygulamasi/client/src/components/Shared/appBookmarkList/index.vue", "content": "\n\n" }, { "path": "ders-6-socialmark-uygulamasi/client/src/components/Shared/appHeader.vue", "content": "\n\n\n" }, { "path": "ders-6-socialmark-uygulamasi/client/src/main.js", "content": "import { createApp } from \"vue\";\nimport App from \"./App.vue\";\nimport router from \"./router\";\nimport store from \"./store\";\nimport { appAxios } from \"@/utils/appAxios\";\nimport \"@/assets/style.css\";\n\nimport appHeader from \"@/components/Shared/appHeader\";\nimport appBookmarkList from \"@/components/Shared/appBookmarkList\";\n\nimport io from \"socket.io-client\";\nconst socket = io(\"http://localhost:2018\");\n\nconst app = createApp(App);\napp.component(\"AppHeader\", appHeader);\napp.component(\"appBookmarkList\", appBookmarkList);\napp.use(router);\napp.use(store);\napp.config.globalProperties.$appAxios = appAxios;\napp.config.globalProperties.$log = console.log;\napp.config.globalProperties.$socket = socket;\napp.mount(\"#app\");\n" }, { "path": "ders-6-socialmark-uygulamasi/client/src/router/index.js", "content": "import { createRouter, createWebHashHistory } from \"vue-router\";\nimport store from \"../store\";\nconst routes = [\n {\n name: \"HomePage\",\n path: \"/\",\n component: () => import(\"@/views/Home\")\n },\n {\n name: \"LoginPage\",\n path: \"/login\",\n component: () => import(\"@/views/Login\")\n },\n {\n name: \"RegisterPage\",\n path: \"/register\",\n component: () => import(\"@/views/Register\")\n },\n {\n name: \"NewBookmarkPage\",\n path: \"/new\",\n component: () => import(\"@/views/NewBookmark\")\n },\n {\n name: \"Favorites\",\n path: \"/favorites\",\n meta: {\n componentName: \"appBookmarkList\"\n },\n component: () => import(\"@/views/Account\")\n },\n {\n name: \"Likes\",\n path: \"/likes\",\n meta: {\n componentName: \"appBookmarkList\"\n },\n component: () => import(\"@/views/Account\")\n },\n {\n name: \"Settings\",\n path: \"/settings\",\n meta: {\n componentName: \"userSettings\"\n },\n component: () => import(\"@/views/Account\")\n }\n];\n\nconst router = createRouter({\n routes,\n history: createWebHashHistory()\n});\n\nrouter.beforeEach((to, _, next) => {\n const authRequiredRoutes = [\"HomePage\"];\n const authNotRequiredRoutes = [\"LoginPage\", \"RegisterPage\"];\n const _isAuthenticated = store.getters._isAuthenticated;\n\n if (authNotRequiredRoutes.indexOf(to.name) > -1 && _isAuthenticated) next(false);\n\n if (authRequiredRoutes.indexOf(to.name) > -1) {\n if (_isAuthenticated) next();\n else next({ name: \"LoginPage\" });\n } else {\n next();\n }\n});\n\nexport default router;\n" }, { "path": "ders-6-socialmark-uygulamasi/client/src/store/index.js", "content": "import { createStore } from \"vuex\";\nimport createPersistedState from \"vuex-persistedstate\";\n\nimport SecureLS from \"secure-ls\";\nvar ls = new SecureLS({ isCompression: false });\n\nexport default createStore({\n state: {\n user: null,\n saltKey: \"booklike123!456?\"\n },\n mutations: {\n setUser(state, user) {\n console.log(\"user :>> \", user);\n state.user = user;\n },\n logoutUser(state) {\n state.user = null;\n },\n setLikes(state, bookmarkIds) {\n state.user.likes = bookmarkIds;\n },\n setBookmarks(state, bookmarkIds) {\n state.user.bookmarks = bookmarkIds;\n }\n },\n getters: {\n _isAuthenticated: state => state.user !== null,\n _getCurrentUser(state) {\n const user = state.user;\n // if(user !== null && user.hasOwnProperty(\"password\")){\n // delete user.password;\n // }\n delete user?.password;\n return user;\n },\n _userLikes: state => state.user?.likes || [],\n _userBookmarks: state => state.user?.bookmarks || [],\n _currentUserId: state => state?.user?.id,\n _saltKey: state => state.saltKey\n },\n plugins: [\n createPersistedState({\n storage: {\n getItem: key => ls.get(key),\n setItem: (key, value) => ls.set(key, value),\n removeItem: key => ls.remove(key)\n }\n })\n ]\n});\n" }, { "path": "ders-6-socialmark-uygulamasi/client/src/utils/appAxios.js", "content": "import axios from \"axios\";\nexport const appAxios = axios.create({\n baseURL: \"http://localhost:3000\"\n});\n" }, { "path": "ders-6-socialmark-uygulamasi/client/src/views/Account.vue", "content": "\n\n\n" }, { "path": "ders-6-socialmark-uygulamasi/client/src/views/Favorites.vue", "content": "" }, { "path": "ders-6-socialmark-uygulamasi/client/src/views/Home.vue", "content": "\n\n" }, { "path": "ders-6-socialmark-uygulamasi/client/src/views/Login.vue", "content": "\n\n" }, { "path": "ders-6-socialmark-uygulamasi/client/src/views/NewBookmark.vue", "content": "\n\n" }, { "path": "ders-6-socialmark-uygulamasi/client/src/views/Register.vue", "content": "\n\n" }, { "path": "ders-6-socialmark-uygulamasi/server/app.js", "content": "const socketio = require(\"socket.io\");\nconst express = require(\"express\");\nconst http = require(\"http\");\nconst app = express();\n\nconst PORT = process.env.PORT || 2018;\n\nconst server = http.createServer(app);\n\nconst io = socketio(server, {\n cors: {\n origin: \"*\",\n methods: [\"GET\", \"POST\", \"OPTIONS\"]\n }\n});\n\nserver.listen(PORT, () => {\n io.on(\"connection\", socket => {\n console.log(\"HOPPAAAAAAAA\");\n console.log(socket.id);\n //! Karşılama Mesajı Gönder...\n // io.in(roomID).emit()\n socket.emit(\"WELCOME_MESSAGE\", `Oooooo ${socket.id} kardeşim ojgeldin be yaa...`);\n socket.on(\"NEW_BOOKMARK_EVENT\", bookmark => {\n console.log(\"bookmark :>> \", bookmark);\n // io.emit(\"NEW_BOOKMARK_ADDED\", bookmark);\n //! Gonderen hariç herkese bookmark bilgisini gonder..\n socket.broadcast.emit(\"NEW_BOOKMARK_ADDED\", bookmark);\n });\n });\n});\n" }, { "path": "ders-6-socialmark-uygulamasi/server/package.json", "content": "{\n \"name\": \"server\",\n \"version\": \"1.0.0\",\n \"description\": \"\",\n \"main\": \"index.js\",\n \"scripts\": {\n \"start\": \"nodemon app.js\",\n \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\n },\n \"keywords\": [],\n \"author\": \"\",\n \"license\": \"ISC\",\n \"dependencies\": {\n \"cors\": \"^2.8.5\",\n \"express\": \"^4.17.1\",\n \"socket.io\": \"^4.2.0\"\n },\n \"devDependencies\": {\n \"nodemon\": \"^2.0.12\"\n }\n}" }, { "path": "ders-6-socialmark-uygulamasi/tema/.prettierrc", "content": "{\n \"printWidth\": 500\n}" }, { "path": "ders-6-socialmark-uygulamasi/tema/account.html", "content": "\n\n \n \n \n \n Document\n \n \n \n \n \n
      \n \n
      \n
      \n \n \n \n\n \n
      \n

      Hesabım

      \n \n \n \n \n
      \n
      \n \n \n\n" }, { "path": "ders-6-socialmark-uygulamasi/tema/assets/app.js", "content": "const app = Vue.createApp({}).mount(\"#app\");\n" }, { "path": "ders-6-socialmark-uygulamasi/tema/assets/style.css", "content": "/*! tailwindcss v2.2.7 | MIT License | https://tailwindcss.com */\n\n/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */\n\n/*\nDocument\n========\n*/\n\n/**\nUse a better box model (opinionated).\n*/\n\n*,\n::before,\n::after {\n box-sizing: border-box;\n}\n\n/**\nUse a more readable tab size (opinionated).\n*/\n\nhtml {\n -moz-tab-size: 4;\n -o-tab-size: 4;\n tab-size: 4;\n}\n\n/**\n1. Correct the line height in all browsers.\n2. Prevent adjustments of font size after orientation changes in iOS.\n*/\n\nhtml {\n line-height: 1.15;\n /* 1 */\n -webkit-text-size-adjust: 100%;\n /* 2 */\n}\n\n/*\nSections\n========\n*/\n\n/**\nRemove the margin in all browsers.\n*/\n\nbody {\n margin: 0;\n}\n\n/**\nImprove consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)\n*/\n\nbody {\n font-family:\n\t\tsystem-ui,\n\t\t-apple-system, /* Firefox supports this but not yet `system-ui` */\n\t\t'Segoe UI',\n\t\tRoboto,\n\t\tHelvetica,\n\t\tArial,\n\t\tsans-serif,\n\t\t'Apple Color Emoji',\n\t\t'Segoe UI Emoji';\n}\n\n/*\nGrouping content\n================\n*/\n\n/**\n1. Add the correct height in Firefox.\n2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)\n*/\n\nhr {\n height: 0;\n /* 1 */\n color: inherit;\n /* 2 */\n}\n\n/*\nText-level semantics\n====================\n*/\n\n/**\nAdd the correct text decoration in Chrome, Edge, and Safari.\n*/\n\nabbr[title] {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n}\n\n/**\nAdd the correct font weight in Edge and Safari.\n*/\n\nb,\nstrong {\n font-weight: bolder;\n}\n\n/**\n1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)\n2. Correct the odd 'em' font sizing in all browsers.\n*/\n\ncode,\nkbd,\nsamp,\npre {\n font-family:\n\t\tui-monospace,\n\t\tSFMono-Regular,\n\t\tConsolas,\n\t\t'Liberation Mono',\n\t\tMenlo,\n\t\tmonospace;\n /* 1 */\n font-size: 1em;\n /* 2 */\n}\n\n/**\nAdd the correct font size in all browsers.\n*/\n\nsmall {\n font-size: 80%;\n}\n\n/**\nPrevent 'sub' and 'sup' elements from affecting the line height in all browsers.\n*/\n\nsub,\nsup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n}\n\nsub {\n bottom: -0.25em;\n}\n\nsup {\n top: -0.5em;\n}\n\n/*\nTabular data\n============\n*/\n\n/**\n1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)\n2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)\n*/\n\ntable {\n text-indent: 0;\n /* 1 */\n border-color: inherit;\n /* 2 */\n}\n\n/*\nForms\n=====\n*/\n\n/**\n1. Change the font styles in all browsers.\n2. Remove the margin in Firefox and Safari.\n*/\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n font-family: inherit;\n /* 1 */\n font-size: 100%;\n /* 1 */\n line-height: 1.15;\n /* 1 */\n margin: 0;\n /* 2 */\n}\n\n/**\nRemove the inheritance of text transform in Edge and Firefox.\n1. Remove the inheritance of text transform in Firefox.\n*/\n\nbutton,\nselect {\n /* 1 */\n text-transform: none;\n}\n\n/**\nCorrect the inability to style clickable types in iOS and Safari.\n*/\n\nbutton,\n[type='button'],\n[type='reset'],\n[type='submit'] {\n -webkit-appearance: button;\n}\n\n/**\nRemove the inner border and padding in Firefox.\n*/\n\n::-moz-focus-inner {\n border-style: none;\n padding: 0;\n}\n\n/**\nRestore the focus styles unset by the previous rule.\n*/\n\n:-moz-focusring {\n outline: 1px dotted ButtonText;\n}\n\n/**\nRemove the additional ':invalid' styles in Firefox.\nSee: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737\n*/\n\n:-moz-ui-invalid {\n box-shadow: none;\n}\n\n/**\nRemove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.\n*/\n\nlegend {\n padding: 0;\n}\n\n/**\nAdd the correct vertical alignment in Chrome and Firefox.\n*/\n\nprogress {\n vertical-align: baseline;\n}\n\n/**\nCorrect the cursor style of increment and decrement buttons in Safari.\n*/\n\n::-webkit-inner-spin-button,\n::-webkit-outer-spin-button {\n height: auto;\n}\n\n/**\n1. Correct the odd appearance in Chrome and Safari.\n2. Correct the outline style in Safari.\n*/\n\n[type='search'] {\n -webkit-appearance: textfield;\n /* 1 */\n outline-offset: -2px;\n /* 2 */\n}\n\n/**\nRemove the inner padding in Chrome and Safari on macOS.\n*/\n\n::-webkit-search-decoration {\n -webkit-appearance: none;\n}\n\n/**\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Change font properties to 'inherit' in Safari.\n*/\n\n::-webkit-file-upload-button {\n -webkit-appearance: button;\n /* 1 */\n font: inherit;\n /* 2 */\n}\n\n/*\nInteractive\n===========\n*/\n\n/*\nAdd the correct display in Chrome and Safari.\n*/\n\nsummary {\n display: list-item;\n}\n\n/**\n * Manually forked from SUIT CSS Base: https://github.com/suitcss/base\n * A thin layer on top of normalize.css that provides a starting point more\n * suitable for web applications.\n */\n\n/**\n * Removes the default spacing and border for appropriate elements.\n */\n\nblockquote,\ndl,\ndd,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nhr,\nfigure,\np,\npre {\n margin: 0;\n}\n\nbutton {\n background-color: transparent;\n background-image: none;\n}\n\nfieldset {\n margin: 0;\n padding: 0;\n}\n\nol,\nul {\n list-style: none;\n margin: 0;\n padding: 0;\n}\n\n/**\n * Tailwind custom reset styles\n */\n\n/**\n * 1. Use the user's configured `sans` font-family (with Tailwind's default\n * sans-serif font stack as a fallback) as a sane default.\n * 2. Use Tailwind's default \"normal\" line-height so the user isn't forced\n * to override it to ensure consistency even when using the default theme.\n */\n\nhtml {\n font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n /* 1 */\n line-height: 1.5;\n /* 2 */\n}\n\n/**\n * Inherit font-family and line-height from `html` so users can set them as\n * a class directly on the `html` element.\n */\n\nbody {\n font-family: inherit;\n line-height: inherit;\n}\n\n/**\n * 1. Prevent padding and border from affecting element width.\n *\n * We used to set this in the html element and inherit from\n * the parent element for everything else. This caused issues\n * in shadow-dom-enhanced elements like
      where the content\n * is wrapped by a div with box-sizing set to `content-box`.\n *\n * https://github.com/mozdevs/cssremedy/issues/4\n *\n *\n * 2. Allow adding a border to an element by just adding a border-width.\n *\n * By default, the way the browser specifies that an element should have no\n * border is by setting it's border-style to `none` in the user-agent\n * stylesheet.\n *\n * In order to easily add borders to elements by just setting the `border-width`\n * property, we change the default border-style for all elements to `solid`, and\n * use border-width to hide them instead. This way our `border` utilities only\n * need to set the `border-width` property instead of the entire `border`\n * shorthand, making our border utilities much more straightforward to compose.\n *\n * https://github.com/tailwindcss/tailwindcss/pull/116\n */\n\n*,\n::before,\n::after {\n box-sizing: border-box;\n /* 1 */\n border-width: 0;\n /* 2 */\n border-style: solid;\n /* 2 */\n border-color: currentColor;\n /* 2 */\n}\n\n/*\n * Ensure horizontal rules are visible by default\n */\n\nhr {\n border-top-width: 1px;\n}\n\n/**\n * Undo the `border-style: none` reset that Normalize applies to images so that\n * our `border-{width}` utilities have the expected effect.\n *\n * The Normalize reset is unnecessary for us since we default the border-width\n * to 0 on all elements.\n *\n * https://github.com/tailwindcss/tailwindcss/issues/362\n */\n\nimg {\n border-style: solid;\n}\n\ntextarea {\n resize: vertical;\n}\n\ninput::-moz-placeholder, textarea::-moz-placeholder {\n opacity: 1;\n color: #9ca3af;\n}\n\ninput:-ms-input-placeholder, textarea:-ms-input-placeholder {\n opacity: 1;\n color: #9ca3af;\n}\n\ninput::placeholder,\ntextarea::placeholder {\n opacity: 1;\n color: #9ca3af;\n}\n\nbutton,\n[role=\"button\"] {\n cursor: pointer;\n}\n\ntable {\n border-collapse: collapse;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n font-size: inherit;\n font-weight: inherit;\n}\n\n/**\n * Reset links to optimize for opt-in styling instead of\n * opt-out.\n */\n\na {\n color: inherit;\n text-decoration: inherit;\n}\n\n/**\n * Reset form element properties that are easy to forget to\n * style explicitly so you don't inadvertently introduce\n * styles that deviate from your design system. These styles\n * supplement a partial reset that is already applied by\n * normalize.css.\n */\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n padding: 0;\n line-height: inherit;\n color: inherit;\n}\n\n/**\n * Use the configured 'mono' font family for elements that\n * are expected to be rendered with a monospace font, falling\n * back to the system monospace stack if there is no configured\n * 'mono' font family.\n */\n\npre,\ncode,\nkbd,\nsamp {\n font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n}\n\n/**\n * 1. Make replaced elements `display: block` by default as that's\n * the behavior you want almost all of the time. Inspired by\n * CSS Remedy, with `svg` added as well.\n *\n * https://github.com/mozdevs/cssremedy/issues/14\n * \n * 2. Add `vertical-align: middle` to align replaced elements more\n * sensibly by default when overriding `display` by adding a\n * utility like `inline`.\n *\n * This can trigger a poorly considered linting error in some\n * tools but is included by design.\n * \n * https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210\n */\n\nimg,\nsvg,\nvideo,\ncanvas,\naudio,\niframe,\nembed,\nobject {\n display: block;\n /* 1 */\n vertical-align: middle;\n /* 2 */\n}\n\n/**\n * Constrain images and videos to the parent width and preserve\n * their intrinsic aspect ratio.\n *\n * https://github.com/mozdevs/cssremedy/issues/14\n */\n\nimg,\nvideo {\n max-width: 100%;\n height: auto;\n}\n\n/**\n * Ensure the default browser behavior of the `hidden` attribute.\n */\n\n[hidden] {\n display: none;\n}\n\n*, ::before, ::after {\n --tw-border-opacity: 1;\n border-color: rgba(229, 231, 235, var(--tw-border-opacity));\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n --tw-shadow: 0 0 #0000;\n}\n\n.like-btn {\n display: flex;\n height: 2.5rem;\n width: 2.5rem;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n border-radius: 0.375rem;\n padding: 0.5rem;\n}\n\n.like-btn:hover {\n --tw-bg-opacity: 1;\n background-color: rgba(165, 180, 252, var(--tw-bg-opacity));\n}\n\n.like-item-active {\n --tw-bg-opacity: 1;\n background-color: rgba(199, 210, 254, var(--tw-bg-opacity));\n --tw-text-opacity: 1;\n color: rgba(55, 48, 163, var(--tw-text-opacity));\n}\n\n.bookmark-btn {\n display: flex;\n height: 2.5rem;\n width: 2.5rem;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n border-radius: 0.375rem;\n padding: 0.5rem;\n}\n\n.bookmark-btn:hover {\n --tw-bg-opacity: 1;\n background-color: rgba(252, 165, 165, var(--tw-bg-opacity));\n}\n\n.bookmark-item-active {\n --tw-bg-opacity: 1;\n background-color: rgba(254, 202, 202, var(--tw-bg-opacity));\n --tw-text-opacity: 1;\n color: rgba(153, 27, 27, var(--tw-text-opacity));\n}\n\n.details-btn {\n display: flex;\n height: 2.5rem;\n width: 2.5rem;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n border-radius: 0.375rem;\n padding: 0.5rem;\n}\n\n.details-btn:hover {\n --tw-bg-opacity: 1;\n background-color: rgba(229, 231, 235, var(--tw-bg-opacity));\n}\n\n.group:focus-within .details-btn {\n --tw-bg-opacity: 1;\n background-color: rgba(209, 213, 219, var(--tw-bg-opacity));\n}\n\n.sidebar {\n display: flex;\n height: 100vh;\n width: 15rem;\n flex-shrink: 0;\n flex-direction: column;\n border-right-width: 1px;\n --tw-border-opacity: 1;\n border-color: rgba(229, 231, 235, var(--tw-border-opacity));\n --tw-bg-opacity: 1;\n background-color: rgba(255, 255, 255, var(--tw-bg-opacity));\n}\n\n.details-container {\n visibility: hidden;\n position: absolute;\n right: 0px;\n top: 100%;\n z-index: 10 !important;\n height: 10rem;\n width: 15rem;\n overflow-y: scroll;\n border-radius: 0.375rem;\n border-width: 1px;\n --tw-border-opacity: 1;\n border-color: rgba(209, 213, 219, var(--tw-border-opacity));\n --tw-bg-opacity: 1;\n background-color: rgba(255, 255, 255, var(--tw-bg-opacity));\n padding: 0.75rem;\n text-align: left;\n --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.group:focus-within .details-container {\n visibility: visible;\n}\n\n.group:hover .details-container {\n visibility: visible;\n}\n\n.header-container {\n display: flex;\n height: 4rem;\n width: 100%;\n align-items: center;\n justify-content: center;\n border-bottom-width: 1px;\n --tw-border-opacity: 1;\n border-color: rgba(229, 231, 235, var(--tw-border-opacity));\n --tw-bg-opacity: 1;\n background-color: rgba(255, 255, 255, var(--tw-bg-opacity));\n}\n\n.navbar-item {\n border-radius: 0.5rem;\n border-width: 1px;\n --tw-border-opacity: 1;\n border-color: rgba(107, 114, 128, var(--tw-border-opacity));\n padding: 0.5rem;\n --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n transition-property: background-color, border-color, color, fill, stroke;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n\n.navbar-item:hover {\n --tw-bg-opacity: 1;\n background-color: rgba(0, 0, 0, var(--tw-bg-opacity));\n --tw-text-opacity: 1;\n color: rgba(255, 255, 255, var(--tw-text-opacity));\n}\n\n.menu-item {\n display: flex;\n border-radius: 0.375rem;\n padding: 0.5rem;\n}\n\n.menu-item:hover {\n --tw-bg-opacity: 1;\n background-color: rgba(0, 0, 0, var(--tw-bg-opacity));\n --tw-text-opacity: 1;\n color: rgba(255, 255, 255, var(--tw-text-opacity));\n}\n\n.sidebar-item {\n display: flex;\n --tw-bg-opacity: 1;\n background-color: rgba(255, 255, 255, var(--tw-bg-opacity));\n padding: 0.5rem;\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n padding-top: 0.75rem;\n padding-bottom: 0.75rem;\n --tw-text-opacity: 1;\n color: rgba(107, 114, 128, var(--tw-text-opacity));\n}\n\n.sidebar-item:hover {\n --tw-bg-opacity: 1;\n background-color: rgba(0, 0, 0, var(--tw-bg-opacity));\n --tw-text-opacity: 1;\n color: rgba(255, 255, 255, var(--tw-text-opacity));\n}\n\n.login_register_container {\n position: absolute;\n top: 50%;\n left: 50%;\n margin: auto;\n display: flex;\n width: 91.666667%;\n transform: translate(-50%, -50%);\n flex-direction: column;\n border-radius: 0.375rem;\n border-width: 1px;\n --tw-border-opacity: 1;\n border-color: rgba(209, 213, 219, var(--tw-border-opacity));\n --tw-bg-opacity: 1;\n background-color: rgba(255, 255, 255, var(--tw-bg-opacity));\n padding: 0.75rem;\n --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n@media (min-width: 640px) {\n .login_register_container {\n width: 50%;\n }\n}\n\n@media (min-width: 768px) {\n .login_register_container {\n width: 33.333333%;\n }\n}\n\n@media (min-width: 1024px) {\n .login_register_container {\n width: 25%;\n }\n}\n\n.input {\n border-radius: 0.125rem;\n border-width: 1px;\n --tw-border-opacity: 1;\n border-color: rgba(209, 213, 219, var(--tw-border-opacity));\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n outline: 2px solid transparent;\n outline-offset: 2px;\n}\n\n.input:focus {\n --tw-border-opacity: 1;\n border-color: rgba(0, 0, 0, var(--tw-border-opacity));\n}\n\n.default-button {\n border-radius: 0.375rem;\n --tw-bg-opacity: 1;\n background-color: rgba(55, 65, 81, var(--tw-bg-opacity));\n padding: 0.5rem;\n --tw-text-opacity: 1;\n color: rgba(255, 255, 255, var(--tw-text-opacity));\n}\n\n.default-button:hover {\n --tw-bg-opacity: 1;\n background-color: rgba(0, 0, 0, var(--tw-bg-opacity));\n}\n\n.secondary-button {\n border-radius: 0.375rem;\n --tw-bg-opacity: 1;\n background-color: rgba(107, 114, 128, var(--tw-bg-opacity));\n padding: 0.5rem;\n --tw-text-opacity: 1;\n color: rgba(255, 255, 255, var(--tw-text-opacity));\n}\n\n.secondary-button:hover {\n --tw-bg-opacity: 1;\n background-color: rgba(75, 85, 99, var(--tw-bg-opacity));\n}\n\n.invisible {\n visibility: hidden;\n}\n\n.absolute {\n position: absolute;\n}\n\n.relative {\n position: relative;\n}\n\n.top-full {\n top: 100%;\n}\n\n.right-0 {\n right: 0px;\n}\n\n.\\!z-10 {\n z-index: 10 !important;\n}\n\n.mx-auto {\n margin-left: auto;\n margin-right: auto;\n}\n\n.mr-2 {\n margin-right: 0.5rem;\n}\n\n.mr-3 {\n margin-right: 0.75rem;\n}\n\n.ml-auto {\n margin-left: auto;\n}\n\n.mb-2 {\n margin-bottom: 0.5rem;\n}\n\n.mr-1 {\n margin-right: 0.25rem;\n}\n\n.mb-3 {\n margin-bottom: 0.75rem;\n}\n\n.mb-1 {\n margin-bottom: 0.25rem;\n}\n\n.mt-2 {\n margin-top: 0.5rem;\n}\n\n.mt-3 {\n margin-top: 0.75rem;\n}\n\n.flex {\n display: flex;\n}\n\n.grid {\n display: grid;\n}\n\n.hidden {\n display: none;\n}\n\n.h-16 {\n height: 4rem;\n}\n\n.h-8 {\n height: 2rem;\n}\n\n.h-\\[100vh\\] {\n height: 100vh;\n}\n\n.h-10 {\n height: 2.5rem;\n}\n\n.h-40 {\n height: 10rem;\n}\n\n.w-full {\n width: 100%;\n}\n\n.w-8 {\n width: 2rem;\n}\n\n.w-56 {\n width: 14rem;\n}\n\n.w-60 {\n width: 15rem;\n}\n\n.w-1\\/4 {\n width: 25%;\n}\n\n.w-10 {\n width: 2.5rem;\n}\n\n.flex-shrink-0 {\n flex-shrink: 0;\n}\n\n.grid-cols-8 {\n grid-template-columns: repeat(8, minmax(0, 1fr));\n}\n\n.flex-row {\n flex-direction: row;\n}\n\n.flex-col {\n flex-direction: column;\n}\n\n.items-center {\n align-items: center;\n}\n\n.justify-end {\n justify-content: flex-end;\n}\n\n.justify-center {\n justify-content: center;\n}\n\n.justify-between {\n justify-content: space-between;\n}\n\n.gap-4 {\n gap: 1rem;\n}\n\n.gap-x-3 {\n -moz-column-gap: 0.75rem;\n column-gap: 0.75rem;\n}\n\n.gap-x-1 {\n -moz-column-gap: 0.25rem;\n column-gap: 0.25rem;\n}\n\n.overflow-x-hidden {\n overflow-x: hidden;\n}\n\n.overflow-y-scroll {\n overflow-y: scroll;\n}\n\n.rounded-sm {\n border-radius: 0.125rem;\n}\n\n.rounded-md {\n border-radius: 0.375rem;\n}\n\n.border-\\[1px\\] {\n border-width: 1px;\n}\n\n.border-b-\\[1px\\] {\n border-bottom-width: 1px;\n}\n\n.border-r-\\[1px\\] {\n border-right-width: 1px;\n}\n\n.border-gray-200 {\n --tw-border-opacity: 1;\n border-color: rgba(229, 231, 235, var(--tw-border-opacity));\n}\n\n.border-gray-300 {\n --tw-border-opacity: 1;\n border-color: rgba(209, 213, 219, var(--tw-border-opacity));\n}\n\n.bg-gray-100 {\n --tw-bg-opacity: 1;\n background-color: rgba(243, 244, 246, var(--tw-bg-opacity));\n}\n\n.bg-white {\n --tw-bg-opacity: 1;\n background-color: rgba(255, 255, 255, var(--tw-bg-opacity));\n}\n\n.bg-gray-700 {\n --tw-bg-opacity: 1;\n background-color: rgba(55, 65, 81, var(--tw-bg-opacity));\n}\n\n.bg-red-200 {\n --tw-bg-opacity: 1;\n background-color: rgba(254, 202, 202, var(--tw-bg-opacity));\n}\n\n.fill-current {\n fill: currentColor;\n}\n\n.p-2 {\n padding: 0.5rem;\n}\n\n.p-3 {\n padding: 0.75rem;\n}\n\n.p-1 {\n padding: 0.25rem;\n}\n\n.px-2 {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n}\n\n.px-3 {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n\n.py-1 {\n padding-top: 0.25rem;\n padding-bottom: 0.25rem;\n}\n\n.text-left {\n text-align: left;\n}\n\n.text-center {\n text-align: center;\n}\n\n.text-xl {\n font-size: 1.25rem;\n line-height: 1.75rem;\n}\n\n.text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n\n.text-2xl {\n font-size: 1.5rem;\n line-height: 2rem;\n}\n\n.text-xs {\n font-size: 0.75rem;\n line-height: 1rem;\n}\n\n.font-bold {\n font-weight: 700;\n}\n\n.text-white {\n --tw-text-opacity: 1;\n color: rgba(255, 255, 255, var(--tw-text-opacity));\n}\n\n.text-gray-600 {\n --tw-text-opacity: 1;\n color: rgba(75, 85, 99, var(--tw-text-opacity));\n}\n\n.text-gray-400 {\n --tw-text-opacity: 1;\n color: rgba(156, 163, 175, var(--tw-text-opacity));\n}\n\n.text-red-900 {\n --tw-text-opacity: 1;\n color: rgba(127, 29, 29, var(--tw-text-opacity));\n}\n\n.shadow-md {\n --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.shadow-sm {\n --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.shadow-lg {\n --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.transition-colors {\n transition-property: background-color, border-color, color, fill, stroke;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n\n.duration-500 {\n transition-duration: 500ms;\n}\n\n.hover\\:bg-black:hover {\n --tw-bg-opacity: 1;\n background-color: rgba(0, 0, 0, var(--tw-bg-opacity));\n}\n\n.hover\\:bg-gray-200:hover {\n --tw-bg-opacity: 1;\n background-color: rgba(229, 231, 235, var(--tw-bg-opacity));\n}\n\n.hover\\:bg-indigo-300:hover {\n --tw-bg-opacity: 1;\n background-color: rgba(165, 180, 252, var(--tw-bg-opacity));\n}\n\n.hover\\:text-black:hover {\n --tw-text-opacity: 1;\n color: rgba(0, 0, 0, var(--tw-text-opacity));\n}\n\n.group:focus-within .group-focus-within\\:visible {\n visibility: visible;\n}\n\n.group:focus-within .group-focus-within\\:bg-gray-300 {\n --tw-bg-opacity: 1;\n background-color: rgba(209, 213, 219, var(--tw-bg-opacity));\n}\n\n.group:hover .group-hover\\:visible {\n visibility: visible;\n}\n\n.group:hover .group-hover\\:text-white {\n --tw-text-opacity: 1;\n color: rgba(255, 255, 255, var(--tw-text-opacity));\n}\n\n.group:hover .group-hover\\:text-gray-700 {\n --tw-text-opacity: 1;\n color: rgba(55, 65, 81, var(--tw-text-opacity));\n}\n\n@media (min-width: 640px) {\n .sm\\:grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n}\n\n@media (min-width: 768px) {\n .md\\:grid-cols-4 {\n grid-template-columns: repeat(4, minmax(0, 1fr));\n }\n}\n\n@media (min-width: 1024px) {\n .lg\\:grid-cols-5 {\n grid-template-columns: repeat(5, minmax(0, 1fr));\n }\n}\n\n@media (min-width: 1280px) {\n .xl\\:grid-cols-6 {\n grid-template-columns: repeat(6, minmax(0, 1fr));\n }\n}\n\n@media (min-width: 1536px) {\n .\\32xl\\:grid-cols-8 {\n grid-template-columns: repeat(8, minmax(0, 1fr));\n }\n}\n" }, { "path": "ders-6-socialmark-uygulamasi/tema/assets/tailwind.css", "content": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n .translate {\n transform: translate(-50%, -50%);\n }\n}\n\n@layer components {\n .like-btn {\n @apply flex-shrink-0 w-10 h-10 p-2 flex rounded-md hover:bg-indigo-300 justify-center items-center;\n }\n .bookmark-btn {\n @apply flex-shrink-0 w-10 h-10 p-2 flex rounded-md hover:bg-black justify-center items-center;\n }\n .bookmark-item-active {\n @apply text-red-700;\n }\n .details-btn {\n @apply flex-shrink-0 w-10 h-10 p-2 flex rounded-md hover:bg-gray-200 group-focus-within:bg-gray-300 justify-center items-center;\n }\n\n .sidebar {\n @apply flex flex-shrink-0 flex-col h-[100vh] bg-white w-60 border-gray-200 border-r-[1px];\n }\n\n .details-container {\n @apply absolute !z-10 w-60 h-40 group-focus-within:visible right-0 top-full overflow-y-scroll group-hover:visible bg-white invisible rounded-md shadow-lg p-3 text-left border-gray-300 border-[1px];\n }\n\n .header-container {\n @apply bg-white border-gray-200 border-b-[1px] h-16 w-full flex items-center justify-center;\n }\n\n .navbar-item {\n @apply rounded-lg shadow-md border-[1px] p-2 border-gray-500 hover:bg-black hover:text-white transition-colors;\n }\n .menu-item {\n @apply p-2 flex hover:bg-black hover:text-white rounded-md;\n }\n\n .sidebar-item {\n @apply flex bg-white p-2 text-gray-500 px-2 py-3 hover:bg-black hover:text-white;\n }\n\n .login_register_container {\n @apply bg-white rounded-md border-[1px] border-gray-300 w-1/4 md:w-1/2 m-auto absolute top-1/2 left-1/2 translate p-3 flex flex-col shadow-md;\n }\n\n .input {\n @apply px-3 py-2 border rounded-sm border-gray-300 outline-none focus:border-black;\n }\n\n .default-button {\n @apply bg-gray-700 p-2 text-white rounded-md hover:bg-black;\n }\n\n .secondary-button {\n @apply bg-gray-500 p-2 text-white rounded-md hover:bg-gray-600;\n }\n\n .primary-button {\n @apply bg-indigo-500 p-2 text-white rounded-md hover:bg-black;\n }\n\n .danger-button {\n @apply bg-red-500 p-2 text-white rounded-md hover:bg-black;\n }\n}\n" }, { "path": "ders-6-socialmark-uygulamasi/tema/favorites.html", "content": "\n\n \n \n \n \n Document\n \n \n \n \n \n
      \n \n
      \n \n
      \n \n\n \n
      \n
      \n
      \n
      \n Vue3 Dokümantasyon\n
      \n \n \n
      \n \n
      \n
      \n
      \n Gökhan Kandemir \n 14 Mart\n
      \n
      \n
      Vue.js
      \n
      \n
      \n
      \n
      \n \n \n\n" }, { "path": "ders-6-socialmark-uygulamasi/tema/index.html", "content": "\n\n \n \n \n \n SocialMark\n \n \n \n \n \n
      \n \n
      \n \n
      \n \n\n \n
      \n
      \n
      \n
      \n Vue3 Dokümantasyon\n
      \n \n \n
      \n \n
      \n
      \n
      \n Gökhan Kandemir \n 14 Mart\n
      \n
      \n
      Vue.js
      \n
      \n
      \n
      \n \n
      \n \n \n\n" }, { "path": "ders-6-socialmark-uygulamasi/tema/login.html", "content": "\n\n \n \n \n \n Login\n \n \n \n
      \n

      Login

      \n \n \n \n \n Üye değilim,\n Üye olmak istiyorum!\n \n
      \n \n\n" }, { "path": "ders-6-socialmark-uygulamasi/tema/new-bookmark.html", "content": "\n\n \n \n \n \n Yeni Yer İşareti\n \n \n \n
      \n

      Yeni Ekle

      \n \n \n \n \n
      \n \n \n
      \n
      \n \n\n" }, { "path": "ders-6-socialmark-uygulamasi/tema/register.html", "content": "\n\n \n \n \n \n Register\n \n \n \n
      \n

      Register

      \n \n \n \n \n \n Zaten Üyeyim,\n Giriş yap!\n \n
      \n \n\n" }, { "path": "ders-9-composition-api/0-composition-api/.vscode/extensions.json", "content": "{\n \"recommendations\": [\"johnsoncodehk.volar\"]\n}\n" }, { "path": "ders-9-composition-api/0-composition-api/README.md", "content": "# Vue 3 + Vite\n\nThis template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `\n \n\n" }, { "path": "ders-9-composition-api/0-composition-api/package.json", "content": "{\n \"name\": \"0-composition-api\",\n \"version\": \"0.0.0\",\n \"scripts\": {\n \"dev\": \"vite\",\n \"build\": \"vite build\",\n \"serve\": \"vite preview\"\n },\n \"dependencies\": {\n \"vue\": \"^3.2.6\"\n },\n \"devDependencies\": {\n \"@vitejs/plugin-vue\": \"^1.6.1\",\n \"@vue/compiler-sfc\": \"^3.2.6\",\n \"vite\": \"^2.5.4\"\n }\n}" }, { "path": "ders-9-composition-api/0-composition-api/src/App.vue", "content": "\n\n\n" }, { "path": "ders-9-composition-api/0-composition-api/src/composables/Counter.js", "content": "import { ref, computed, watch } from \"vue\";\nexport default function () {\n //!*************************************************************************************************\n const counter = ref(0);\n const oddOrEven = computed(() => (counter.value % 2 === 0 ? \"Çift\" : \"Tek\"));\n\n watch([counter, oddOrEven], ([newC, newO], [oldC, oldO]) => {\n console.log(oldO, \"=>\", newO);\n });\n //!*************************************************************************************************\n\n return { counter, oddOrEven };\n}\n" }, { "path": "ders-9-composition-api/0-composition-api/src/composables/Header.js", "content": "import { ref, computed } from \"vue\";\n\nexport default function () {\n const title = ref(\"Bu bir Setup Başlık\");\n // const titleLengthMessage = computed(() => {\n // return title.value.length + \" adet karakter yazdınız\";\n // });\n const titleLengthMessage = computed(() => title.value.length + \" adet karakter yazdınız\");\n\n return { title, titleLengthMessage };\n}\n" }, { "path": "ders-9-composition-api/0-composition-api/src/composables/Search.js", "content": "import { ref, watchEffect } from \"vue\";\n\nexport default function () {\n const searchText = ref(\"\");\n const isTyping = ref(false);\n // watch(searchText, () => {\n // if (searchText.value.length > 0) {\n // isTyping.value = true;\n\n // setTimeout(() => {\n // isTyping.value = false;\n // }, 1500);\n // }\n // });\n const stop = watchEffect((onInvalidate) => {\n if (searchText.value.length > 0) {\n isTyping.value = true;\n const typing = setTimeout(() => {\n isTyping.value = false;\n stop();\n }, 1500);\n onInvalidate(() => clearTimeout(typing));\n }\n });\n return { searchText, isTyping };\n}\n" }, { "path": "ders-9-composition-api/0-composition-api/src/composables/Toggle.js", "content": "import { ref } from \"vue\";\n\nexport default function () {\n const show = ref(false);\n const toggleIt = () => {\n show.value = !show.value;\n };\n\n return { show, toggleIt };\n}\n" }, { "path": "ders-9-composition-api/0-composition-api/src/main.js", "content": "import { createApp } from 'vue'\nimport App from './App.vue'\n\ncreateApp(App).mount('#app')\n" }, { "path": "ders-9-composition-api/0-composition-api/vite.config.js", "content": "import { defineConfig } from 'vite'\nimport vue from '@vitejs/plugin-vue'\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n plugins: [vue()]\n})\n" }, { "path": "ders-9-composition-api/1-todo-list/.vscode/extensions.json", "content": "{\n \"recommendations\": [\"johnsoncodehk.volar\"]\n}\n" }, { "path": "ders-9-composition-api/1-todo-list/README.md", "content": "# Vue 3 + Vite\n\nThis template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `\n \n\n" }, { "path": "ders-9-composition-api/1-todo-list/package.json", "content": "{\n \"name\": \"1-todo-list\",\n \"version\": \"0.0.0\",\n \"scripts\": {\n \"dev\": \"vite\",\n \"build\": \"vite build\",\n \"serve\": \"vite preview\"\n },\n \"dependencies\": {\n \"vue\": \"^3.2.6\"\n },\n \"devDependencies\": {\n \"@vitejs/plugin-vue\": \"^1.6.1\",\n \"@vue/compiler-sfc\": \"^3.2.6\",\n \"autoprefixer\": \"^10.3.4\",\n \"postcss\": \"^8.3.6\",\n \"tailwindcss\": \"^2.2.15\",\n \"vite\": \"^2.5.4\"\n }\n}\n" }, { "path": "ders-9-composition-api/1-todo-list/postcss.config.js", "content": "module.exports = {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n },\n}\n" }, { "path": "ders-9-composition-api/1-todo-list/src/App.vue", "content": "\n\n" }, { "path": "ders-9-composition-api/1-todo-list/src/assets/index.css", "content": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n" }, { "path": "ders-9-composition-api/1-todo-list/src/components/Summary.vue", "content": "\n\n" }, { "path": "ders-9-composition-api/1-todo-list/src/components/addSection.vue", "content": "\n\n\n" }, { "path": "ders-9-composition-api/1-todo-list/src/components/todoList.vue", "content": "\n\n" }, { "path": "ders-9-composition-api/1-todo-list/src/components/todoListItem.vue", "content": "\n\n" }, { "path": "ders-9-composition-api/1-todo-list/src/main.js", "content": "import { createApp } from \"vue\";\nimport App from \"./App.vue\";\nimport \"./assets/index.css\";\ncreateApp(App).mount(\"#app\");\n" }, { "path": "ders-9-composition-api/1-todo-list/tailwind.config.js", "content": "module.exports = {\n mode: \"jit\",\n purge: [\"./src/**/*.vue\"],\n darkMode: false, // or 'media' or 'class'\n theme: {\n extend: {},\n },\n variants: {\n extend: {},\n },\n plugins: [],\n};\n" }, { "path": "ders-9-composition-api/1-todo-list/vite.config.js", "content": "import { defineConfig } from 'vite'\nimport vue from '@vitejs/plugin-vue'\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n plugins: [vue()]\n})\n" } ]