Repository: gkandemi/kablosuzkedi-vue3-bootcamp Branch: main Commit: d5b579a4ee84 Files: 363 Total size: 880.0 KB Directory structure: gitextract_8ix3d9lx/ ├── .prettierrc ├── ders-1/ │ ├── 0-js-vs-vue/ │ │ ├── js/ │ │ │ ├── app.js │ │ │ └── index.html │ │ └── vue/ │ │ ├── app.js │ │ └── index.html │ ├── 1-vue-instance/ │ │ ├── app.js │ │ ├── index.html │ │ └── style.css │ ├── 2-events/ │ │ ├── app.js │ │ └── index.html │ ├── 3-counter-app/ │ │ ├── .prettierrc │ │ ├── app.js │ │ └── index.html │ ├── 4-reactivity-examples/ │ │ ├── app.js │ │ └── index.html │ ├── 5-life-cycle-hooks/ │ │ ├── app.js │ │ └── index.html │ ├── 6-class-style-binding/ │ │ ├── app.js │ │ ├── index.html │ │ └── style.css │ ├── 7-conditions/ │ │ ├── app.js │ │ └── index.html │ ├── 8-loops/ │ │ ├── app.js │ │ └── index.html │ └── odevler/ │ ├── class-list-app/ │ │ ├── index.html │ │ ├── readme.txt │ │ └── style.css │ ├── comment-like-dislike-app/ │ │ ├── index.html │ │ ├── readme.txt │ │ └── style.css │ ├── cozum-1/ │ │ ├── index.html │ │ └── style.css │ ├── cozum-2/ │ │ ├── app.js │ │ ├── index.html │ │ └── style.css │ ├── cozum-3/ │ │ ├── app.js │ │ ├── index.html │ │ └── style.css │ ├── css-class-app/ │ │ ├── app.js │ │ ├── index.html │ │ ├── readme.txt │ │ └── style.css │ ├── odev-1/ │ │ ├── index.html │ │ └── style.css │ ├── odev-2/ │ │ ├── app.js │ │ ├── index.html │ │ └── style.css │ └── odev-3/ │ ├── app.js │ ├── index.html │ └── style.css ├── ders-1-tekrar-dersi/ │ ├── -boilerplate/ │ │ ├── app.js │ │ └── index.html │ ├── 0-vue-vs-js/ │ │ ├── js/ │ │ │ ├── app.js │ │ │ └── index.html │ │ └── vue/ │ │ ├── app.js │ │ └── index.html │ ├── 1-vue-instance-template-attribute-event/ │ │ ├── app.js │ │ └── index.html │ ├── 2-vue-virtual-dom-life-cycle/ │ │ ├── app.js │ │ └── index.html │ ├── 3-reactivity/ │ │ ├── app.js │ │ └── index.html │ ├── 4-css-style-binding/ │ │ ├── app.js │ │ └── index.html │ ├── 5-conditions/ │ │ ├── app.js │ │ └── index.html │ ├── 6-loops/ │ │ ├── app.js │ │ └── index.html │ ├── odevler/ │ │ ├── class-list-app/ │ │ │ ├── app.js │ │ │ ├── index.html │ │ │ ├── readme.txt │ │ │ └── style.css │ │ ├── comment-like-dislike-app/ │ │ │ ├── index.html │ │ │ ├── readme.txt │ │ │ └── style.css │ │ ├── cozum-1/ │ │ │ ├── index.html │ │ │ └── style.css │ │ ├── cozum-2/ │ │ │ ├── app.js │ │ │ ├── index.html │ │ │ └── style.css │ │ ├── cozum-3/ │ │ │ ├── app.js │ │ │ ├── index.html │ │ │ └── style.css │ │ ├── css-class-app/ │ │ │ ├── app.js │ │ │ ├── index.html │ │ │ ├── readme.txt │ │ │ └── style.css │ │ ├── odev-1/ │ │ │ ├── app.js │ │ │ ├── index.html │ │ │ └── style.css │ │ ├── odev-2/ │ │ │ ├── app.js │ │ │ ├── index.html │ │ │ └── style.css │ │ └── odev-3/ │ │ ├── app.js │ │ ├── index.html │ │ └── style.css │ └── style.css ├── ders-10-composition-api/ │ ├── 0-script-setup/ │ │ ├── .vscode/ │ │ │ └── extensions.json │ │ ├── README.md │ │ ├── index.html │ │ ├── package.json │ │ ├── src/ │ │ │ ├── App.vue │ │ │ ├── components/ │ │ │ │ └── oddOrEven.vue │ │ │ ├── composables/ │ │ │ │ └── Utils.js │ │ │ └── main.js │ │ └── vite.config.js │ └── 1-item-list-app/ │ ├── .vscode/ │ │ └── extensions.json │ ├── README.md │ ├── index.html │ ├── package.json │ ├── postcss.config.js │ ├── src/ │ │ ├── App.vue │ │ ├── assets/ │ │ │ └── index.css │ │ ├── components/ │ │ │ ├── appSidebar.vue │ │ │ ├── contactSection.vue │ │ │ ├── invoiceContent.vue │ │ │ ├── invoiceItem.vue │ │ │ ├── invoiceItems.vue │ │ │ ├── invoiceSummary.vue │ │ │ └── ui/ │ │ │ └── appHeading.vue │ │ ├── main.js │ │ └── theme.vue │ ├── tailwind.config.js │ └── vite.config.js ├── ders-11/ │ ├── namespaced-components/ │ │ ├── .vscode/ │ │ │ └── extensions.json │ │ ├── README.md │ │ ├── index.html │ │ ├── package.json │ │ ├── src/ │ │ │ ├── App.vue │ │ │ ├── components/ │ │ │ │ ├── Forms/ │ │ │ │ │ ├── Input.vue │ │ │ │ │ ├── Label.vue │ │ │ │ │ └── Select.vue │ │ │ │ └── form-components.js │ │ │ └── main.js │ │ └── vite.config.js │ ├── suspense-example/ │ │ ├── .vscode/ │ │ │ └── extensions.json │ │ ├── README.md │ │ ├── index.html │ │ ├── package.json │ │ ├── src/ │ │ │ ├── App.vue │ │ │ ├── components/ │ │ │ │ ├── Todos.vue │ │ │ │ └── Users.vue │ │ │ └── main.js │ │ └── vite.config.js │ └── teleport-example/ │ ├── .vscode/ │ │ └── extensions.json │ ├── README.md │ ├── index.html │ ├── package.json │ ├── src/ │ │ ├── App.vue │ │ ├── components/ │ │ │ └── HelloWorld.vue │ │ └── main.js │ └── vite.config.js ├── ders-12-socialmark-composition-api/ │ ├── client/ │ │ ├── .eslintignore │ │ ├── .prettierrc │ │ ├── README.md │ │ ├── babel.config.js │ │ ├── db.json │ │ ├── package.json │ │ ├── public/ │ │ │ └── index.html │ │ └── src/ │ │ ├── App.vue │ │ ├── assets/ │ │ │ └── style.css │ │ ├── components/ │ │ │ ├── Account/ │ │ │ │ └── sideBar.vue │ │ │ ├── Home/ │ │ │ │ └── Sidebar.vue │ │ │ └── Shared/ │ │ │ ├── appBookmarkList/ │ │ │ │ ├── BookmarkListItem copy.vue │ │ │ │ ├── BookmarkListItem.vue │ │ │ │ └── index.vue │ │ │ └── appHeader.vue │ │ ├── composables/ │ │ │ └── BookmarkListItem.js │ │ ├── main.js │ │ ├── router/ │ │ │ └── index.js │ │ ├── store/ │ │ │ └── index.js │ │ ├── utils/ │ │ │ └── appAxios.js │ │ └── views/ │ │ ├── Account.vue │ │ ├── Favorites.vue │ │ ├── Home.vue │ │ ├── Login.vue │ │ ├── NewBookmark.vue │ │ └── Register.vue │ ├── server/ │ │ ├── app.js │ │ └── package.json │ └── tema/ │ ├── .prettierrc │ ├── account.html │ ├── assets/ │ │ ├── app.js │ │ ├── style.css │ │ └── tailwind.css │ ├── favorites.html │ ├── index.html │ ├── login.html │ ├── new-bookmark.html │ └── register.html ├── ders-2/ │ ├── -boilerplate/ │ │ ├── app.js │ │ └── index.html │ ├── .prettierrc │ ├── 0-component/ │ │ ├── app.js │ │ └── index.html │ ├── 1-vue-cli/ │ │ ├── README.md │ │ ├── babel.config.js │ │ ├── package.json │ │ ├── public/ │ │ │ └── index.html │ │ └── src/ │ │ ├── App.vue │ │ ├── assets/ │ │ │ └── style.css │ │ ├── components/ │ │ │ ├── CounterItem.vue │ │ │ └── appHeader.vue │ │ └── main.js │ ├── 2-todo-app/ │ │ ├── README.md │ │ ├── babel.config.js │ │ ├── package.json │ │ ├── public/ │ │ │ └── index.html │ │ └── src/ │ │ ├── App.vue │ │ ├── assets/ │ │ │ └── style.css │ │ ├── components/ │ │ │ ├── AddSection.vue │ │ │ ├── ListSection.vue │ │ │ ├── ResultBar.vue │ │ │ ├── TodoList.vue │ │ │ └── TodoListItem.vue │ │ └── main.js │ └── style.css ├── ders-3/ │ ├── 0-components-communications/ │ │ ├── README.md │ │ ├── babel.config.js │ │ ├── package.json │ │ ├── public/ │ │ │ └── index.html │ │ └── src/ │ │ ├── App.vue │ │ ├── assets/ │ │ │ └── style.css │ │ ├── components/ │ │ │ ├── AddSection.vue │ │ │ ├── ListSection.vue │ │ │ └── UserSection.vue │ │ └── main.js │ ├── 1-component-slots/ │ │ ├── README.md │ │ ├── babel.config.js │ │ ├── package.json │ │ ├── public/ │ │ │ └── index.html │ │ └── src/ │ │ ├── App.vue │ │ ├── assets/ │ │ │ └── style.css │ │ ├── components/ │ │ │ └── Modal.vue │ │ └── main.js │ ├── 2-dynamic-components/ │ │ ├── README.md │ │ ├── babel.config.js │ │ ├── package.json │ │ ├── public/ │ │ │ └── index.html │ │ └── src/ │ │ ├── App.vue │ │ ├── assets/ │ │ │ └── style.css │ │ ├── components/ │ │ │ ├── Blue.vue │ │ │ ├── Green.vue │ │ │ └── Red.vue │ │ └── main.js │ ├── 3-http-requests/ │ │ ├── README.md │ │ ├── babel.config.js │ │ ├── db.json │ │ ├── package.json │ │ ├── public/ │ │ │ └── index.html │ │ └── src/ │ │ ├── App.vue │ │ ├── assets/ │ │ │ └── style.css │ │ └── main.js │ └── style.css ├── ders-4/ │ ├── 0-vuex-introduction/ │ │ ├── .browserslistrc │ │ ├── .eslintrc.js │ │ ├── README.md │ │ ├── babel.config.js │ │ ├── package.json │ │ ├── public/ │ │ │ └── index.html │ │ └── src/ │ │ ├── App.vue │ │ ├── assets/ │ │ │ └── style.css │ │ ├── components/ │ │ │ ├── NewUser.vue │ │ │ └── UserList.vue │ │ ├── main.js │ │ └── store.js │ └── 1-vuex-modules/ │ ├── README.md │ ├── babel.config.js │ ├── package.json │ ├── public/ │ │ └── index.html │ └── src/ │ ├── App.vue │ ├── components/ │ │ └── HelloWorld.vue │ ├── main.js │ └── store/ │ ├── index.js │ └── modules/ │ ├── contact.js │ └── taskmanager.js ├── ders-5/ │ ├── 0-vue-router/ │ │ ├── README.md │ │ ├── babel.config.js │ │ ├── package.json │ │ ├── public/ │ │ │ └── index.html │ │ └── src/ │ │ ├── App.vue │ │ ├── assets/ │ │ │ └── style.css │ │ ├── components/ │ │ │ └── HelloWorld.vue │ │ ├── main.js │ │ ├── router.js │ │ └── views/ │ │ ├── About.vue │ │ ├── Details.vue │ │ └── Home.vue │ ├── 1-vue-router-app/ │ │ ├── README.md │ │ ├── babel.config.js │ │ ├── db.json │ │ ├── package.json │ │ ├── public/ │ │ │ └── index.html │ │ └── src/ │ │ ├── App.vue │ │ ├── components/ │ │ │ └── HelloWorld.vue │ │ ├── main.js │ │ ├── router.js │ │ ├── utils/ │ │ │ └── appAxios.js │ │ └── views/ │ │ ├── HomePage.vue │ │ └── NewBookmark.vue │ ├── package.json │ └── style.css ├── ders-6-socialmark-uygulamasi/ │ ├── client/ │ │ ├── .prettierrc │ │ ├── README.md │ │ ├── babel.config.js │ │ ├── db.json │ │ ├── package.json │ │ ├── public/ │ │ │ └── index.html │ │ └── src/ │ │ ├── App.vue │ │ ├── assets/ │ │ │ └── style.css │ │ ├── components/ │ │ │ ├── Account/ │ │ │ │ └── sideBar.vue │ │ │ ├── HelloWorld.vue │ │ │ ├── Home/ │ │ │ │ └── Sidebar.vue │ │ │ └── Shared/ │ │ │ ├── appBookmarkList/ │ │ │ │ ├── BookmarkListItem.vue │ │ │ │ └── index.vue │ │ │ └── appHeader.vue │ │ ├── main.js │ │ ├── router/ │ │ │ └── index.js │ │ ├── store/ │ │ │ └── index.js │ │ ├── utils/ │ │ │ └── appAxios.js │ │ └── views/ │ │ ├── Account.vue │ │ ├── Favorites.vue │ │ ├── Home.vue │ │ ├── Login.vue │ │ ├── NewBookmark.vue │ │ └── Register.vue │ ├── server/ │ │ ├── app.js │ │ └── package.json │ └── tema/ │ ├── .prettierrc │ ├── account.html │ ├── assets/ │ │ ├── app.js │ │ ├── style.css │ │ └── tailwind.css │ ├── favorites.html │ ├── index.html │ ├── login.html │ ├── new-bookmark.html │ └── register.html └── ders-9-composition-api/ ├── 0-composition-api/ │ ├── .vscode/ │ │ └── extensions.json │ ├── README.md │ ├── index.html │ ├── package.json │ ├── src/ │ │ ├── App.vue │ │ ├── composables/ │ │ │ ├── Counter.js │ │ │ ├── Header.js │ │ │ ├── Search.js │ │ │ └── Toggle.js │ │ └── main.js │ └── vite.config.js └── 1-todo-list/ ├── .vscode/ │ └── extensions.json ├── README.md ├── index.html ├── package.json ├── postcss.config.js ├── src/ │ ├── App.vue │ ├── assets/ │ │ └── index.css │ ├── components/ │ │ ├── Summary.vue │ │ ├── addSection.vue │ │ ├── todoList.vue │ │ └── todoListItem.vue │ └── main.js ├── tailwind.config.js └── vite.config.js ================================================ FILE CONTENTS ================================================ ================================================ FILE: .prettierrc ================================================ { "printWidth": 150 } ================================================ FILE: ders-1/0-js-vs-vue/js/app.js ================================================ const todoText = document.querySelector("#todoText"); const addBtn = document.querySelector("#addBtn"); const todoList = document.querySelector("#todoList"); addBtn.addEventListener("click", () => { const listItem = document.createElement("li"); listItem.textContent = todoText.value; todoList.append(listItem); }); ================================================ FILE: ders-1/0-js-vs-vue/js/index.html ================================================ Document ================================================ FILE: ders-1/0-js-vs-vue/vue/app.js ================================================ const app = Vue.createApp({ data() { return { todoText: null, todoList: [], }; }, methods: { addTodo() { this.todoList.push(this.todoText); }, }, }).mount("#app"); ================================================ FILE: ders-1/0-js-vs-vue/vue/index.html ================================================ Document
================================================ FILE: ders-1/1-vue-instance/app.js ================================================ const app = Vue.createApp({ data() { return { title: "Vue.js Bootcamp 1.gün", content: "Lorem ipsum dolor sit amet..", eduflow: { title: "Müfredat ve açıklamalar için tıklayınız", target: "_blank", url: "https://eduflow.kablosuzkedi.com", alt: "mufredat-kablosuzkedi-vue-bootcamp", }, owner: "Pogaca", coords: { x: 0, y: 0, }, }; }, methods: { changeTitle(pTitle) { this.title = pTitle; }, updateCoords(message, event) { // console.log(message, event.x, event.y); this.changeTitle(`${event.x},${event.y}`); this.coords = { x: event.x, y: event.y, }; }, }, }).mount("#app"); // Vue2 Version // new Vue({ // el : "#app", // data : { // } // }) ================================================ FILE: ders-1/1-vue-instance/index.html ================================================ Document

{{ title }}

{{ content }}

{{ eduflow.title }}

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

Event

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

{{ counter }}

{{ getCounterResult }}

{{ counter2 }}

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

BAŞLANGIÇTA GÖZÜKECEK

SONRA GÖZÜKECEK

{{ counter }}

Counter Negatif

Counter Pozitif

Counter 0

Counter Negatif

Counter Pozitif

Counter 0

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

Todo List

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

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

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

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

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

================================================ FILE: ders-1/odevler/comment-like-dislike-app/readme.txt ================================================ ÖDEV 1 - ) data üzerinde bulunan bir comments isimli bir Array üzerinden ".comment--item" elementini v-for ile döndürünüz. 1 - ) iterate the ".comment - item" element with v-for over an Array named comments on the data. 2 - ) Kullanıcı Beğendim / Beğenmedim butonuna tıkladığında, üzerinde yazan sayaçları arttırınız. Yani Beğendim (5) Beğenmedim (10) gibi. 2 - ) When the user clicks on the Like / Dislike button, increase the counters written on it. So I Like (5) Like I Don't Like (10). İPUCU: Beğeni sayılarını comments içerisinde tutabilirsiniz. You can keep the number of likes in the comments. NOT: Beğeni sayılarının sürekli artmasının bir önemi yoktur. It doesn't matter that the number of likes is constantly increasing. ================================================ FILE: ders-1/odevler/comment-like-dislike-app/style.css ================================================ * { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; -webkit-box-sizing: border-box; box-sizing: border-box; } .bg-success { background-color: #6dc454 !important; color: #fff; } .bg-danger { background-color: #c64b4b !important; color: #fff; } .bg-primary { background-color: #316bc2 !important; color: #fff; } .bg-dark { background-color: #333 !important; color: #fff; } .text-left { text-align: left; } .text-right { text-align: right; } .text-center { text-align: center; } .text-info { color: #05a0f4; } .text-success { color: #6dc454; } .text-danger { color: #c64b4b; } .text-primary { color: #316bc2; } .text-dark { color: #333; } .text-muted { color: #ccc; } .font-weight-bold { font-weight: bold; } .font-italic { font-style: italic; } .mt-20 { margin-top: 20px; } .mb-20 { margin-bottom: 20px; } .ml-20 { margin-left: 20px; } .mr-20 { margin-right: 20px; } .mt-10 { margin-top: 10px; } .mb-10 { margin-bottom: 10px; } .ml-10 { margin-left: 10px; } .mr-10 { margin-right: 10px; } .mt-5 { margin-top: 5px; } .mb-5 { margin-bottom: 5px; } .ml-5 { margin-left: 5px; } .mr-5 { margin-right: 5px; } .pt-10 { padding-top: 10px; } .pb-10 { padding-bottom: 10px; } .pl-10 { padding-left: 10px; } .pr-10 { padding-right: 10px; } .pt-5 { padding-top: 5px; } .pb-5 { padding-bottom: 5px; } .pl-5 { padding-left: 5px; } .pr-5 { padding-right: 5px; } .pt-20 { padding-top: 20px; } .pb-20 { padding-bottom: 20px; } .pl-20 { padding-left: 20px; } .pr-20 { padding-right: 20px; } .d-flex { display: -webkit-box; display: -ms-flexbox; display: flex; } .justify-content-start { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .justify-content-center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .justify-content-end { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .justify-content-between { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .align-items-start { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .align-items-center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .align-items-end { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .w-10 { width: 10% !important; max-width: 10% !important; min-width: 10% !important; } .w-20 { width: 20% !important; max-width: 20% !important; min-width: 20% !important; } .w-30 { width: 30% !important; max-width: 30% !important; min-width: 30% !important; } .w-40 { width: 40% !important; max-width: 40% !important; min-width: 40% !important; } .w-50 { width: 50% !important; max-width: 50% !important; min-width: 50% !important; } .w-60 { width: 60% !important; max-width: 60% !important; min-width: 60% !important; } .w-70 { width: 70% !important; max-width: 70% !important; min-width: 70% !important; } .w-80 { width: 80% !important; max-width: 80% !important; min-width: 80% !important; } .w-90 { width: 90% !important; max-width: 90% !important; min-width: 90% !important; } .w-100 { width: 100% !important; max-width: 100% !important; min-width: 100% !important; } .card { background-color: #efefef; min-width: 500px; padding: 10px; border-radius: 3px; border-bottom: 1px solid #ccc; } .card-light { background-color: #fffafa; border: 1px solid #eee; border-bottom: 1px solid #ccc; } button { padding: 10px; font-size: 15px; outline: none; border: none; border-radius: 5px; border-bottom: 1px solid #ccc; background-color: #dad0d0; cursor: pointer; } button:hover { background-color: #f0eded; } button:active { background-color: white; } button.btn-primary { background-color: #316bc2; color: #fff; } button.btn-primary:hover { background-color: #5386d3; color: #fff; } button.btn-primary:active { background-color: #7ba3de; color: #fff; } button.btn-warning { background-color: #f5e20c; color: #000; } button.btn-warning:hover { background-color: #f9ee6e; color: #000; } button.btn-warning:active { background-color: #fbf49f; color: #000; } button.btn-info { background-color: #05a0f4; color: #fff; } button.btn-info:hover { background-color: #31b4fb; color: #fff; } button.btn-info:active { background-color: #63c6fc; color: #fff; } button.btn-success { background-color: #6dc454; color: #fff; } button.btn-success:hover { background-color: #8dd17a; color: #fff; } button.btn-success:active { background-color: #aedea0; color: #fff; } button.btn-danger { background-color: #c64b4b; color: #fff; } button.btn-danger:hover { background-color: #d27272; color: #fff; } button.btn-danger:active { background-color: #df9898; color: #fff; } .btn-sm { padding: 7px; font-size: 12px; } .form-group { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: start; margin-bottom: 10px; } p { font-size: 14px; } label { font-size: 15px; display: inline-block; margin-bottom: 5px; } select { outline: none; padding: 5px 10px; border: 1px solid #324354; } input { outline: none; padding: 5px 10px; border: 1px solid #324354; } textarea { outline: none; resize: none; padding: 5px 10px; border: 1px solid #324354; } header { height: 50px; margin-bottom: 10px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: #324354; color: #fff; font-size: 20px; border-bottom: 2px solid #222b34; } .container { width: 100%; height: auto; padding: 10px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: start; -ms-flex-align: start; align-items: start; } ul.list { margin-top: 10px; list-style-type: none; } ul.list li { padding: 5px 10px; background-color: #efefef; margin-bottom: 5px; border: 1px solid #ccc; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .pokemon--wars--app--container .game--area { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; padding: 10px; } .pokemon--wars--app--container .game--area h2 { margin-bottom: 20px; } .pokemon--wars--app--container .selection--container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; padding: 10px; margin-bottom: 20px; } .pokemon--wars--app--container .selection--container img { -webkit-transition: all 0.5s; transition: all 0.5s; margin-right: 30px; } .pokemon--wars--app--container .selection--container img:last-child { margin-right: none; } .pokemon--wars--app--container .selection--container img.pikachu.selected-pokemon { border-radius: 10px; background-color: #f8c953c8; -webkit-transition: all 0.5s; transition: all 0.5s; } .pokemon--wars--app--container .selection--container img.pikachu:hover { border-radius: 10px; background-color: #f8c953c8; -webkit-transition: all 0.5s; transition: all 0.5s; } .pokemon--wars--app--container .selection--container img.bulbasaur.selected-pokemon { border-radius: 10px; background-color: #6ddba8c8; } .pokemon--wars--app--container .selection--container img.bulbasaur:hover { border-radius: 10px; background-color: #6ddba8c8; } .pokemon--wars--app--container .selection--container img.charmander.selected-pokemon { border-radius: 10px; background-color: #f7973fc8; } .pokemon--wars--app--container .selection--container img.charmander:hover { border-radius: 10px; background-color: #f7973fc8; } .pokemon--wars--app--container .selection--container img.squirtle.selected-pokemon { border-radius: 10px; background-color: #78eeffc8; } .pokemon--wars--app--container .selection--container img.squirtle:hover { border-radius: 10px; background-color: #78eeffc8; } .pokemon--wars--app--container .fight--area { width: 750px; } .pokemon--wars--app--container .health--container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .pokemon--wars--app--container .name--health--bar { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .pokemon--wars--app--container .name--health--bar img { width: 70px; border-radius: 5px; } .pokemon--wars--app--container .name--health--bar img.pikachu { background-color: #f8c953c8; border: 2px solid #f8c953; } .pokemon--wars--app--container .name--health--bar img.bulbasaur { background-color: #6ddba8c8; border: 2px solid #6ddba8; } .pokemon--wars--app--container .name--health--bar img.charmander { background-color: #f7973fc8; border: 2px solid #f7973f; } .pokemon--wars--app--container .name--health--bar img.squirtle { background-color: #78eeffc8; border: 2px solid #78eeff; } .pokemon--wars--app--container .player--name { font-size: 18px; font-weight: bold; color: #324354; } .pokemon--wars--app--container .vs--container { font-size: 35px; color: #f7983f; font-weight: bold; font-style: italic; } .pokemon--wars--app--container progress { height: 50px; width: 280px; } .pokemon--wars--app--container progress[value] { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 250px; height: 35px; } .pokemon--wars--app--container progress.pikachu[value]::-webkit-progress-bar { background-color: #f7983f27; border: 2px solid #f7983f; } .pokemon--wars--app--container progress.pikachu[value]::-webkit-progress-value { background-color: #f7973fc8; } .pokemon--wars--app--container progress.bulbasaur[value]::-webkit-progress-bar { background-color: #6ddba827; border: 2px solid #6ddba8; } .pokemon--wars--app--container progress.bulbasaur[value]::-webkit-progress-value { background-color: #6ddba8c8; } .pokemon--wars--app--container progress.charmander[value]::-webkit-progress-bar { background-color: #f7973f27; border: 2px solid #f7973f; } .pokemon--wars--app--container progress.charmander[value]::-webkit-progress-value { background-color: #f7973fc8; } .pokemon--wars--app--container progress.squirtle[value]::-webkit-progress-bar { background-color: #78eeff27; border: 2px solid #78eeff; } .pokemon--wars--app--container progress.squirtle[value]::-webkit-progress-value { background-color: #78eeffc8; } .pokemon--wars--app--container .attack--button--container { margin-top: 50px; } .pokemon--wars--app--container .logger--container { width: 400px; margin: 0 auto; margin-top: 50px; } .pokemon--wars--app--container .logger--container img { width: 40px; } .pokemon--wars--app--container .logger--container li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-radius: 5px; } .pokemon--wars--app--container .game--finished--container { margin-top: 100px; font-size: 50px; } .css--class--app .css--palette { list-style-type: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .css--class--app .css--palette li { width: 50px; height: 50px; background-color: #ccc; border-radius: 50%; margin-left: 5px; border: 1px solid #bbb; } .css--class--app .result-box { width: 100%; height: 100px; background-color: #18bf71; margin-top: 15px; border-radius: 5px; border-bottom: 1px solid #ccc; -webkit-transition: background-color 0.5s; transition: background-color 0.5s; } .bookmark--app--container { display: -ms-grid; display: grid; -ms-grid-columns: (1fr) [3]; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .bookmark--app--container .bookmark-item { width: 400px; background-color: #efefef; border-bottom: 1px solid #ccc; border-radius: 5px; padding: 10px; } .bookmark--app--container .bookmark-item .header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .course--planner-app--container .user--action--container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .course--planner-app--container .user--action--container .form-group { width: 80%; margin-right: 5px; } .bet--coupon--app .competition-list { padding: 0; border-radius: 5px; border: 1px solid #efefef; border-bottom: 1px solid #ccc; } .bet--coupon--app .my-coupon { padding: 0; border-radius: 5px; border: 1px solid #efefef; border-bottom: 1px solid #ccc; min-width: 400px !important; } .bet--coupon--app .my-coupon .card--header { background-color: #05a0f4 !important; } .bet--coupon--app .card--header { background-color: #324354 !important; color: #fff; border-top-left-radius: 5px; border-top-right-radius: 5px; padding: 10px; } .bet--coupon--app .card--body { background-color: #fff !important; padding: 10px; } .bet--coupon--app .competition-item { margin-bottom: 5px; padding: 10px 0; border-bottom: 1px solid #efefef; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .bet--coupon--app .competition-item:last-child { border-bottom: none; } .bet--coupon--app .competition-item .info--container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: start; -webkit-box-align: start; -ms-flex-align: start; align-items: start; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .bet--coupon--app .competition-item .rates { width: 150px; text-align: right; display: -ms-grid; display: grid; -ms-grid-columns: (1fr) [3]; grid-template-columns: repeat(3, 1fr); } .bet--coupon--app .coupon-item { border-bottom: 1px solid #efefef; margin-bottom: 5px; padding: 10px 0; } .bet--coupon--app .coupon-item:last-child { border-bottom: none; } .bet--coupon--app .coupon--total--container { max-width: 300px; } .bet--coupon--app .coupon--total--container .my-coupon { min-width: 300px !important; } .bet--coupon--app .coupon--total--container .multiply--container { min-width: 300px !important; } .bet--coupon--app .coupon--total--container .multiply--container button:not(:last-child) { margin-right: 5px; margin-bottom: 5px; } .bet--coupon--app .multiply--buttons { -ms-flex-wrap: wrap; flex-wrap: wrap; } .contact--card--app { display: -ms-grid; display: grid; -ms-grid-columns: (1fr) [4]; grid-template-columns: repeat(4, 1fr); grid-gap: 20px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .contact--card--app .contact-item { width: 180px; min-height: 282px; border-radius: 5px; background-color: #fff !important; } .contact--card--app .contact-item .invitation--header { width: 180px; height: 62px; background: url("https://static-exp1.licdn.com/sc/h/cpemy7gsm8bzfb5nnbbnswfdm"); background-size: cover; background-repeat: no-repeat; background-position: center; } .contact--card--app .contact-item .contact--info--container { padding: 10px; margin-top: 45px; } .contact--card--app .contact-item .contact--info--container p { font-size: 15px !important; } .contact--card--app .contact-item .contact--info--container a { font-size: 15px !important; } .contact--card--app .contact-item .action--button--container { margin-top: 10px; } .contact--card--app .contact-item .contact--image { border-radius: 50%; width: 100px; height: 100px; } .comment--like--dislike--app { width: 750px; } .chat--app--container .card { padding: 0; border-radius: 5px; border: 1px solid #efefef; border-bottom: 1px solid #ccc; max-width: 400px !important; } .chat--app--container .card .card--header { background-color: #316bc2 !important; color: #fff; border-top-left-radius: 5px; border-top-right-radius: 5px; padding: 10px; } .chat--app--container .card .card--body { background-color: #fff !important; padding: 10px; } .chat--app--container .card .card--body .active-user-item { margin-bottom: 20px; } .chat--app--container .card .card--body .active-user-item:last-child { margin-bottom: 0; } .chat--app--container .card .card--body .active-user-item .badge { background-color: #efefef; color: #333; text-transform: uppercase; padding: 10px; width: 40px; height: 40px; border-radius: 50%; } .chat--app--container .card .messages { list-style-type: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 10px; height: calc(100vh - 200px); overflow-y: scroll; } .chat--app--container .card .messages li { max-width: 300px; padding: 5px 10px; margin-bottom: 15px; border-bottom: 1px solid #ccc; border-radius: 10px; background-color: #fffafa; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: start; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .chat--app--container .card .messages li small { margin-top: 10px; -ms-flex-item-align: end; align-self: flex-end; font-size: 12px; color: #ccc; font-style: italic; } .chat--app--container .card .messages li.current-user { -ms-flex-item-align: end; align-self: flex-end; background-color: #05a0f4; color: #fff; } .chat--app--container .card .text-container { margin-top: 30px; } .chat--app--container .card .text-container input { border: none; padding: 10px; height: 37px; width: calc(500px - 70px); border-bottom-left-radius: 5px; } .chat--app--container .card .text-container button { border-radius: 0 !important; margin-bottom: 0; border: none; border-bottom-right-radius: 5px !important; } .class--list--app .class-list { list-style-type: none !important; display: -ms-grid; display: grid; -ms-grid-columns: (1fr) [3]; grid-template-columns: repeat(3, 1fr); } .class--list--app .class-list li { margin-bottom: 5px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .class--list--app textarea { width: 100%; margin-top: 20px; } .rate--calculator--app .rate-list { list-style-type: none !important; display: -ms-grid; display: grid; -ms-grid-columns: (1fr) [6]; grid-template-columns: repeat(6, 1fr); } .rate--calculator--app .rate-list li { margin-bottom: 5px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .rate--calculator--app input#money { margin-top: 15px; } .rate--calculator--app .rates-container { margin-top: 20px; list-style-type: none; display: -ms-grid; display: grid; -ms-grid-columns: (1fr) [3]; grid-template-columns: repeat(3, 1fr); } .rate--calculator--app .rates-container li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 5px; } .rate--calculator--app .rates-container li:last-child { margin-bottom: 0; } .rate--calculator--app .rates-container li strong { margin-right: 5px; } /*# sourceMappingURL=style.css.map */ ================================================ FILE: ders-1/odevler/cozum-1/index.html ================================================ Ödev 1 | Template üzerine Veri Yazdırmak
Ödev 1 | Template Üzerine Veri Yazdırmak

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

{{ age * 5 }}

{{ randomNumber() }}

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

{{ value }}

{{ value2 }}

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

Şuanki Değer: {{ value }}

{{ result }}

{{ result2 }}

{{ value }}

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

    VueJS Muazzam bir Framework - NAME (AGE)

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

    {{ value }}

    {{ value }}

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

    Şuanki Değer: {{ value }}

    {{ result }}

    {{ value }}

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

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

    {{ title }}

    {{ content }}

    {{ hobbies[0] }}

    {{ personal.name }} 

    URL Test URL Test



    {{ coordX }}, {{ coordY }}


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

    {{ counter }}

    {{ getResult() }}

    {{ counter2 }}

    {{ getResult2() }}

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

    {{ counter }}

    {{ getResult }}

    {{ counter2 }}

    {{ getResult2 }}

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

    CSS ve Style Binding

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

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

    Gösterilecek başlık...

    Gizlenen başlık...

    Gösterilecek başlık...

    Gizlenen başlık...

    Negatif.

    Pozitif

    Sıfır

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

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

    {{ age * 5 }}

    {{ randomNumber() }}

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

    {{ value }}

    {{ value2 }}

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

    Şuanki Değer: {{ value }}

    {{ result }}

    {{ result2 }}

    {{ value }}

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

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

    {{ age * 5 }}

    {{ getRandom() }}

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

    {{ value }}

    {{ value }}

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

    Şuanki Değer: {{ value }}

    {{ result }}

    {{ value }}

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

    {{ counter }} 

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