Showing preview only (977K chars total). Download the full file or copy to clipboard to get everything.
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
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<input type="text" id="todoText" />
<button id="addBtn">Ekle</button>
<ul id="todoList"></ul>
<script src="app.js"></script>
</body>
</html>
================================================
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
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<input type="text" id="todoText" v-model="todoText" />
<button id="addBtn" @click="addTodo">Ekle</button>
<ul id="todoList">
<li v-for="todo in todoList" :key="todo">{{ todo }}</li>
</ul>
</div>
<script src="app.js"></script>
</body>
</html>
================================================
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
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://unpkg.com/vue@next"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="app">
<h1>{{ title }}</h1>
<p>{{ content }}</p>
<a
:target="eduflow.target"
:href="eduflow.url"
v-bind:alt="eduflow.alt"
v-bind:kablosuzkedi="owner"
>
{{ eduflow.title }}</a
>
<br />
<br />
<button v-on:click="changeTitle('Bu 1.buton')">Title Değiştir...</button>
<button v-on:click="changeTitle('Bu 2.buton')">
Title 2 Değiştir...
</button>
<div
@mousemove="updateCoords('mouseMoooove',$event)"
class="box"
@click="changeTitle('Box üzerinden gelen..')"
></div>
<span>{{ coords.x }},{{ coords.y }}</span>
</div>
<script src="app.js"></script>
</body>
</html>
================================================
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
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Events</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<div class="row mt-5">
<div class="col-4 offset-4">
<h3 class="text-center">Event</h3>
<!-- <input v-on:input="" type="text" class="form-control" /> -->
<!-- <input
@input="fullName = $event.target.value"
:value="fullName"
type="text"
class="form-control"
/> -->
<input v-model="fullName" type="text" class="form-control" />
{{ fullName }}
<br />
<button class="btn btn-primary btn-sm">Ekle</button>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
================================================
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
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Counter</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app" class="container">
<div class="row mt-5">
<div class="col-2 card p-2 me-2">
<h3 class="text-center">{{ counter }}</h3>
<div class="d-flex justify-content-center align-items-center">
<button @click="counter++" class="btn me-2 btn-sm btn-primary">+</button>
<button @click="counter--" class="btn btn-sm btn-danger">-</button>
</div>
<div class="alert alert-warning mt-2">{{ getCounterResult }}</div>
</div>
<div class="col-2 card p-2">
<h3 class="text-center">{{ counter2 }}</h3>
<div class="d-flex justify-content-center align-items-center">
<button @click="counter2++" class="btn me-2 btn-sm btn-primary">+</button>
<button @click="counter2--" class="btn btn-sm btn-danger">-</button>
</div>
<div class="alert alert-warning mt-2">{{ getCounter2Result }}</div>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
================================================
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
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app" class="container">
<div class="row mt-5">
<div class="col-4 offset-4 p-2 card">
<input type="text" v-model="search" />
<button class="btn btn-sm btn-primary" @click="searchList">
Ara
</button>
<pre class="mt-3">
{{ itemList }}
</pre
>
<pre class="mt-3">
{{ filteredList }}
</pre
>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
================================================
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
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Life Cycle Hooks</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
{{ title }}
<pre>
{{ itemList }}
</pre>
</div>
<script src="app.js"></script>
</body>
</html>
================================================
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
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Class Style Binding</title>
<script src="https://unpkg.com/vue@next"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="app">
<input type="text" v-model="bgColor" />
<button @click="showBorder = !showBorder">Border Ekle/Ekleme</button>
<button @click="redBG = !redBG">Kırmızı BG Yap.</button>
<div
class="box"
:style="{ backgroundColor : bgColor }"
:class="boxClasses"
></div>
</div>
<script src="app.js"></script>
</body>
</html>
================================================
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
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://unpkg.com/vue@next"></script>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
</head>
<body>
<div id="app">
<div class="container">
<div class="row">
<div class="col-8 offset-2 p-2">
<button class="btn btn-sm btn-primary" @click="showContainer = !showContainer">Aç / Kapat</button>
<h1 v-if="!showContainer" class="text-danger">BAŞLANGIÇTA GÖZÜKECEK</h1>
<h1 v-else class="text-primary">SONRA GÖZÜKECEK</h1>
<hr />
<h3 :class="counterBoxClass">{{ counter }}</h3>
<button class="btn btn-sm btn-success" @click="counter++">Artır</button>
<button class="btn btn-sm btn-danger" @click="counter--">Azalt</button>
<p v-if="counter < 0">Counter Negatif</p>
<p v-else-if="counter > 0">Counter Pozitif</p>
<p v-else>Counter 0</p>
<hr />
<p v-show="counter < 0">Counter Negatif</p>
<p v-show="counter > 0">Counter Pozitif</p>
<p v-show="counter === 0">Counter 0</p>
</div>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
================================================
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
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Loops</title>
<script src="https://unpkg.com/vue@next"></script>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<style>
.uncompleted-item {
background-color: #dc354536;
}
.completed-item {
background-color: #19875440;
}
</style>
</head>
<body>
<div id="app">
<div class="container">
<div class="row">
<div class="col-8 p-2">
<h3 class="text-center">Todo List</h3>
<div class="d-flex justify-content-star mb-4">
<input type="text" class="form-control me-2" @keydown.enter="addTodo" />
</div>
<div v-if="todoList.length > 0">
<ul class="list-group">
<li
v-for="todo in todoList"
:key="todo.id"
:class="{ 'completed-item' : todo.completed, 'uncompleted-item' : !todo.completed }"
class="list-group-item d-flex justify-content-between align-items-center"
>
<div>
<input class="form-check-input" type="checkbox" v-model="todo.completed" :id="`completed_checkbox_${todo.id}`" />
<label class="form-check-label ms-2" :for="`completed_checkbox_${todo.id}`"> {{ todo.text }} </label>
</div>
<button class="btn btn-danger btn-sm" @click="removeItem(todo)">Sil</button>
</li>
</ul>
<div class="d-flex justify-content-between align-items-center">
<small class="text-success"> Tamamlanmış item sayısı :{{ completedItemCount }} </small>
<small class="text-danger"> Tamamlanmamış item sayısı :{{ unCompletedItemCount }} </small>
</div>
</div>
<div v-else class="alert alert-warning">Henüz eklenmiş bir todo bulunmamaktadır.</div>
</div>
<div class="col-4">
<pre> {{ todoList }} </pre>
</div>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
================================================
FILE: ders-1/odevler/class-list-app/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Class List App</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<header>Class List App</header>
<div class="container">
<div class="class--list--app">
<div class="card">
<ul class="class-list">
<li>
<label>
<input class="mr-5" type="checkbox" />
<span>Background Color</span>
</label>
</li>
<li>
<label>
<input class="mr-5" type="checkbox" />
<span>Border</span>
</label>
</li>
<li>
<label>
<input class="mr-5" type="checkbox" />
<span>Border Radius</span>
</label>
</li>
<li>
<label>
<input class="mr-5" type="checkbox" />
<span>Color</span>
</label>
</li>
<li>
<label>
<input class="mr-5" type="checkbox" />
<span>Font Bold</span>
</label>
</li>
<li>
<label>
<input class="mr-5" type="checkbox" />
<span>Font Italic</span>
</label>
</li>
</ul>
<textarea rows="5"></textarea>
</div>
</div>
</div>
</body>
</html>
================================================
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
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Comment Like/Dislike App</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<header>Comment Like/Dislike App</header>
<div class="container">
<div class="comment--like--dislike--app">
<div class="card mb-10 comment--item">
<p>
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.
</p>
<div class="action--button--container text-right mt-10">
<button class="btn-sm btn-success">Beğendim (10)</button>
<button class="btn-sm btn-danger">Beğenmedim (5)</button>
</div>
</div>
<div class="card mb-10 comment--item">
<p>
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.
</p>
<div class="action--button--container text-right mt-10">
<button class="btn-sm btn-success">Beğendim (10)</button>
<button class="btn-sm btn-danger">Beğenmedim (5)</button>
</div>
</div>
<div class="card mb-10 comment--item">
<p>
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.
</p>
<div class="action--button--container text-right mt-10">
<button class="btn-sm btn-success">Beğendim (10)</button>
<button class="btn-sm btn-danger">Beğenmedim (5)</button>
</div>
</div>
<div class="card mb-10 comment--item">
<p>
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.
</p>
<div class="action--button--container text-right mt-10">
<button class="btn-sm btn-success">Beğendim (10)</button>
<button class="btn-sm btn-danger">Beğenmedim (5)</button>
</div>
</div>
</div>
</div>
</body>
</html>
================================================
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
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Ödev 1 | Template üzerine Veri Yazdırmak</title>
<script src="https://unpkg.com/vue@next"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>Ödev 1 | Template Üzerine Veri Yazdırmak</header>
<div id="exercise" class="container">
<div class="card">
<!-- 1) Interpolation yani {{}} Syntax'ını kullanarak <p> elementinin içeriğini Name ve Age verileriyle doldurun-->
<p>VueJS Muazzam bir Framework - {{ name }} ({{ age }})</p>
<!-- 2) Yaşınızı 5 ile çarpıp <p> içerisinde yazdırınız -->
<p class="mt-10">{{ age * 5 }}</p>
<!-- 3) Fonksiyon çağırarak 0 ile 1 arasında bir sayı üretip <p> içerisinde yazdırınız (Math.random()) -->
<!-- <p class="mt-10">{{ showText() }}</p> -->
<p class="mt-10">{{ randomNumber() }}</p>
<!-- 4) Google üzerinden bulacağınız herhangi bir fotoğrafı <img> elementinde gösterme işlemini yapınız. Bunu yaparken "src" attribute' una bind etmeyi unutmayınız -->
<img v-bind:src="image_url" :alt="seo_keyword" />
<!-- 5) Name değişkeninin değerinin <input /> içine yazdığınız değer ile anlık olarak değiştirilmesini sağlayınız. ("value" attribute kullanarak) -->
<div class="mb-10">
<!-- <input type="text" :value="name" @input="valueChanged" /> -->
<input
type="text"
:value="name"
@input="name = $event.target.value"
/>
</div>
</div>
</div>
<script>
const app = Vue.createApp({
data() {
return {
name: "Defne",
age: 2.5,
image_url:
"https://lh3.googleusercontent.com/proxy/sIuVvQueNt9Xr99WTOG2zFiKBaiXvnXli2A4-g5A2sgdpAtDMsVYWCQ1yMndMGrxyz4PoK9lgMkk325HM1Mx2-dX66Q7enxgxBZeILYWeKT3MUQkt8XzqLv2X-NfYGFOJi1bAEBXNVmjdAb_Sw",
seo_keyword: "vue-js-eğitim-kablosuzkedi",
};
},
methods: {
showText() {
return "Kodluyoruz Ailesine Selam Olsun!";
},
randomNumber() {
// setTimeout(() => {
// this.name = "Gokhan";
// }, 5000);
return Math.random();
},
valueChanged(event) {
console.log("Event =>", event.target.value);
this.name = event.target.value;
},
},
computed: {},
});
app.mount("#exercise");
</script>
</body>
</html>
================================================
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
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Ödev 2 | Event</title>
<script src="https://unpkg.com/vue@next"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>Ödev 2 | Events</header>
<div class="container" id="exercise">
<div class="card text-center">
<!-- 1) Butona tıklanıldığında bir alert() kutusu çıkartınız -->
<div class="mb-10">
<button @click="showMeAlert">Alert Göster</button>
</div>
<!-- 2) "keydown" event'ini dinleyerek value değişkeni içerisinde yazdığınız veriyi saklayın. (ipucu: event.target.value size yazdığınız değeri verebilir.) -->
<div class="mb-10">
<input type="text" @keyup="keyDownEvent" />
<p>{{ value }}</p>
</div>
<!-- 3) 2.Uygulamayı düzenleyerek eğer keydown ENTER ise yazdığınız verinin value değerine aktarılmasını sağlayın -->
<!-- attribute => v-bind
event => v-on -->
<div>
<input type="text" @keydown.enter="keyDownEvent2" />
<p>{{ value2 }}</p>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
================================================
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
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Reactivity</title>
<script src="https://unpkg.com/vue@next"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>Ödev 3 | Reactivity</header>
<div class="container">
<div class="card">
<div id="exercise">
<!-- 1) value isimli property'nin değerine bakarak result için bir reactive kod yazınız. value 33'e eşit olmadığı durumlarda <p> elementinin içinde "Henüz Bitmedi!!" 33 olduğunda ise "Tamamlandı" yazmalıdır.. Bunun için gördüğünüz reactivity türlerinden birini kullanınız. (Not : Butonlar yardımıyla value property'nin değerini değiştirebilirsiniz )) -->
<!-- 1) Write a reactive code for result by looking at the value of the property named value. If value is not equal to 33, inside the <p> element "Not Finished Yet !!" When it is 33, it should write "Completed". For this, use one of the reactivity types you see. (Note: You can change the value of value property with the help of buttons) -->
<div>
<p class="mb-5">Şuanki Değer: {{ value }}</p>
<button @click="value+=5">Add 5</button>
<button @click="value+=1">Add 1</button>
<p class="mt-5">{{ result }}</p>
<p class="mt-5">{{ result2 }}</p>
</div>
<!-- 2) result property' değerini izleyerek 5 saniye sonra value'nun değerini sıfırlayınız. (ipucu: setTimeout(..., 5000) kullanılabilir.-->
<!-- 2) Reset the value of value information after 5 seconds by following the value of result property. (hint: setTimeout (..., 5000) can be used -->
<div class="mt-5">
<input type="text" />
<p class="mt-5">{{ value }}</p>
</div>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
================================================
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
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>CSS Class App</title>
<link rel="stylesheet" href="./style.css" />
<script src="https://unpkg.com/vue@next"></script>
<style>
.red-box {
background-color: brown !important;
}
.green-box {
background-color: green !important;
}
.blue-box {
background-color: blue !important;
}
</style>
</head>
<body>
<header>CSS Class App</header>
<div id="app" class="container css--class--app">
<div class="card text-center">
<ul class="css--palette text-center">
<li :class="{ [color.css_class] : true}" v-for="color in color_palette" :key="color.id" @click="activeColor = color.css_class"></li>
</ul>
<div class="result-box" :class="{ [activeColor] : true }"></div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
================================================
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.
<li> 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 <li> 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
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Ödev 1 | Template üzerine Veri Yazdırmak</title>
<script src="https://unpkg.com/vue@next"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>Ödev 1 | Template Üzerine Veri Yazdırmak</header>
<div id="exercise" class="container">
<div class="card">
<!-- 1) Interpolation yani {{}} Syntax'ını kullanarak <p> elementinin içeriğini Name ve Age verileriyle doldurun-->
<p>VueJS Muazzam bir Framework - NAME (AGE)</p>
<!-- 2) Yaşınızı 5 ile çarpıp <p> içerisinde yazdırınız -->
<p class="mt-10"></p>
<!-- 3) Fonksiyon çağırarak 0 ile 1 arasında bir sayı üretip <p> içerisinde yazdırınız (Math.random()) -->
<p class="mt-10"></p>
<!-- 4) Google üzerinden bulacağınız herhangi bir fotoğrafı <img> elementinde gösterme işlemini yapınızı. Bunu yaparken "src" attribute' una bind etmeyi unutmayınız -->
<!-- 5) Name değişkeninin değerinin <input /> içine yazdığınız değer ile anlık olarak değiştirilmesini sağlayınız. ("value" attribute kullanarak) -->
<div class="mt-10">
<input type="text" />
</div>
</div>
</div>
</body>
</html>
================================================
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");
===================
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
SYMBOL INDEX (109 symbols across 36 files)
FILE: ders-1-tekrar-dersi/-boilerplate/app.js
method data (line 2) | data() {
FILE: ders-1-tekrar-dersi/0-vue-vs-js/vue/app.js
method data (line 2) | data() {
method addTodo (line 9) | addTodo() {
FILE: ders-1-tekrar-dersi/1-vue-instance-template-attribute-event/app.js
method data (line 2) | data() {
method updateTitle (line 20) | updateTitle(title) {
method updateCoords (line 23) | updateCoords(e) {
method updateValue (line 29) | updateValue(customText, e) {
FILE: ders-1-tekrar-dersi/2-vue-virtual-dom-life-cycle/app.js
method data (line 2) | data() {
method getResult (line 10) | getResult() {
method getResult2 (line 18) | getResult2() {
method beforeCreate (line 27) | beforeCreate() {
method created (line 30) | created() {
method beforeMount (line 36) | beforeMount() {
method mounted (line 39) | mounted() {
method beforeUpdate (line 42) | beforeUpdate() {
method updated (line 45) | updated() {
method beforeUnmount (line 48) | beforeUnmount() {
method unmounted (line 51) | unmounted() {
FILE: ders-1-tekrar-dersi/3-reactivity/app.js
method data (line 2) | data() {
method addItem (line 10) | addItem() {
method getResult (line 15) | getResult() {
method getResult2 (line 23) | getResult2() {
method counter (line 33) | counter(newValue, oldValue) {
method getResult (line 36) | getResult(newValue, oldValue) {
method handler (line 41) | handler(itemList) {
FILE: ders-1-tekrar-dersi/4-css-style-binding/app.js
method data (line 2) | data() {
method created (line 8) | created() {
method boxClass (line 14) | boxClass() {
FILE: ders-1-tekrar-dersi/5-conditions/app.js
method data (line 2) | data() {
FILE: ders-1-tekrar-dersi/6-loops/app.js
method data (line 2) | data() {
FILE: ders-1-tekrar-dersi/odevler/class-list-app/app.js
method data (line 2) | data() {
method textAreaClass (line 15) | textAreaClass() {
FILE: ders-1-tekrar-dersi/odevler/cozum-2/app.js
method data (line 2) | data() {
method showMeAlert (line 9) | showMeAlert() {
method keyDownEvent (line 12) | keyDownEvent(e) {
method keyDownEvent2 (line 16) | keyDownEvent2(e) {
FILE: ders-1-tekrar-dersi/odevler/cozum-3/app.js
method data (line 2) | data() {
method result (line 9) | result() {
method value (line 14) | value(v) {
method result (line 21) | result() {
FILE: ders-1-tekrar-dersi/odevler/css-class-app/app.js
method data (line 2) | data() {
FILE: ders-1-tekrar-dersi/odevler/odev-1/app.js
method data (line 2) | data() {
method getRandom (line 11) | getRandom() {
FILE: ders-1-tekrar-dersi/odevler/odev-2/app.js
method data (line 2) | data() {
method showAlert (line 8) | showAlert() {
method valueUpdated (line 11) | valueUpdated(e) {
FILE: ders-1/0-js-vs-vue/vue/app.js
method data (line 2) | data() {
method addTodo (line 9) | addTodo() {
FILE: ders-1/1-vue-instance/app.js
method data (line 2) | data() {
method changeTitle (line 20) | changeTitle(pTitle) {
method updateCoords (line 23) | updateCoords(message, event) {
FILE: ders-1/2-events/app.js
method data (line 2) | data() {
method updateValue (line 8) | updateValue(kamil) {
FILE: ders-1/3-counter-app/app.js
method data (line 2) | data() {
method getCounterResult (line 10) | getCounterResult() {
method getCounter2Result (line 14) | getCounter2Result() {
method counter (line 20) | counter(newValue, oldValue) {
method getCounterResult (line 23) | getCounterResult(newValue, oldValue) {
FILE: ders-1/4-reactivity-examples/app.js
method data (line 2) | data() {
method searchList (line 10) | searchList() {
method filteredList (line 15) | filteredList() {
FILE: ders-1/5-life-cycle-hooks/app.js
method data (line 2) | data() {
method beforeCreate (line 8) | beforeCreate() {
method created (line 11) | created() {
method beforeMount (line 21) | beforeMount() {
method mounted (line 24) | mounted() {
method beforeUpdate (line 27) | beforeUpdate() {
method updated (line 30) | updated() {
method beforeUnmount (line 33) | beforeUnmount() {
method unmounted (line 36) | unmounted() {
FILE: ders-1/6-class-style-binding/app.js
method data (line 2) | data() {
method boxClasses (line 11) | boxClasses() {
FILE: ders-1/7-conditions/app.js
method data (line 2) | data() {
method counterBoxClass (line 9) | counterBoxClass() {
FILE: ders-1/8-loops/app.js
method data (line 2) | data() {
method addTodo (line 16) | addTodo(event) {
method removeItem (line 24) | removeItem(todoItem) {
method completedItemCount (line 29) | completedItemCount() {
method unCompletedItemCount (line 32) | unCompletedItemCount() {
FILE: ders-1/odevler/cozum-2/app.js
method data (line 2) | data() {
method showMeAlert (line 9) | showMeAlert() {
method keyDownEvent (line 12) | keyDownEvent(e) {
method keyDownEvent2 (line 16) | keyDownEvent2(e) {
FILE: ders-1/odevler/cozum-3/app.js
method data (line 2) | data() {
method result (line 9) | result() {
method value (line 14) | value(v) {
method result (line 21) | result() {
FILE: ders-1/odevler/css-class-app/app.js
method data (line 2) | data() {
FILE: ders-1/odevler/odev-2/app.js
method data (line 2) | data() {
FILE: ders-12-socialmark-composition-api/client/src/store/index.js
method setUser (line 13) | setUser(state, user) {
method logoutUser (line 17) | logoutUser(state) {
method setLikes (line 20) | setLikes(state, bookmarkIds) {
method setBookmarks (line 23) | setBookmarks(state, bookmarkIds) {
method _getCurrentUser (line 29) | _getCurrentUser(state) {
FILE: ders-12-socialmark-composition-api/server/app.js
constant PORT (line 6) | const PORT = process.env.PORT || 2018;
FILE: ders-2/-boilerplate/app.js
method data (line 2) | data() {
FILE: ders-2/0-component/app.js
method data (line 2) | data() {
method data (line 8) | data() {
FILE: ders-4/0-vuex-introduction/src/store.js
method newItem (line 25) | newItem(state, item) {
method newItem (line 31) | newItem({ commit }, item) {
method _activeUser (line 41) | _activeUser(state) {
FILE: ders-4/1-vuex-modules/src/store/modules/contact.js
method setItem (line 9) | setItem(state, name) {
FILE: ders-4/1-vuex-modules/src/store/modules/taskmanager.js
method setItem (line 8) | setItem(state, item) {
FILE: ders-6-socialmark-uygulamasi/client/src/store/index.js
method setUser (line 13) | setUser(state, user) {
method logoutUser (line 17) | logoutUser(state) {
method setLikes (line 20) | setLikes(state, bookmarkIds) {
method setBookmarks (line 23) | setBookmarks(state, bookmarkIds) {
method _getCurrentUser (line 29) | _getCurrentUser(state) {
FILE: ders-6-socialmark-uygulamasi/server/app.js
constant PORT (line 6) | const PORT = process.env.PORT || 2018;
Condensed preview — 363 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (984K chars).
[
{
"path": ".prettierrc",
"chars": 25,
"preview": "{\n \"printWidth\": 150\n}"
},
{
"path": "ders-1/0-js-vs-vue/js/app.js",
"chars": 323,
"preview": "const todoText = document.querySelector(\"#todoText\");\nconst addBtn = document.querySelector(\"#addBtn\");\nconst todoList ="
},
{
"path": "ders-1/0-js-vs-vue/js/index.html",
"chars": 414,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta http-equiv=\"X-UA-Compatible\" content=\"I"
},
{
"path": "ders-1/0-js-vs-vue/vue/app.js",
"chars": 206,
"preview": "const app = Vue.createApp({\n data() {\n return {\n todoText: null,\n todoList: [],\n };\n },\n methods: {\n "
},
{
"path": "ders-1/0-js-vs-vue/vue/index.html",
"chars": 613,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta http-equiv=\"X-UA-Compatible\" content=\"I"
},
{
"path": "ders-1/1-vue-instance/app.js",
"chars": 821,
"preview": "const app = Vue.createApp({\n data() {\n return {\n title: \"Vue.js Bootcamp 1.gün\",\n content: \"Lorem ipsum do"
},
{
"path": "ders-1/1-vue-instance/index.html",
"chars": 1089,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta http-equiv=\"X-UA-Compatible\" content=\"I"
},
{
"path": "ders-1/1-vue-instance/style.css",
"chars": 116,
"preview": ".box {\n margin-top: 10px;\n border: 2px dashed #666;\n width: 200px;\n height: 200px;\n background-color: beige;\n}\n"
},
{
"path": "ders-1/2-events/app.js",
"chars": 200,
"preview": "const app = Vue.createApp({\n data() {\n return {\n fullName: \"Küpeli\",\n };\n },\n methods: {\n updateValue(k"
},
{
"path": "ders-1/2-events/index.html",
"chars": 1207,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta http-equiv=\"X-UA-Compatible\" content=\"I"
},
{
"path": "ders-1/3-counter-app/.prettierrc",
"chars": 25,
"preview": "{\n \"printWidth\": 150\n}"
},
{
"path": "ders-1/3-counter-app/app.js",
"chars": 759,
"preview": "const app = Vue.createApp({\n data() {\n return {\n counter: 0,\n counter2: 0,\n };\n },\n methods: {},\n co"
},
{
"path": "ders-1/3-counter-app/index.html",
"chars": 1584,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta http-equiv=\"X-UA-Compatible\" content=\"I"
},
{
"path": "ders-1/4-reactivity-examples/app.js",
"chars": 430,
"preview": "const app = Vue.createApp({\n data() {\n return {\n search: \"\",\n itemList: [\"elma\", \"armut\", \"kiraz\", \"çilek\""
},
{
"path": "ders-1/4-reactivity-examples/index.html",
"chars": 1106,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta http-equiv=\"X-UA-Compatible\" content=\"I"
},
{
"path": "ders-1/5-life-cycle-hooks/app.js",
"chars": 880,
"preview": "const app = Vue.createApp({\n data() {\n return {\n title: \"Test Başlığı\",\n itemList: [],\n };\n },\n befor"
},
{
"path": "ders-1/5-life-cycle-hooks/index.html",
"chars": 467,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta http-equiv=\"X-UA-Compatible\" content=\"I"
},
{
"path": "ders-1/6-class-style-binding/app.js",
"chars": 284,
"preview": "const app = Vue.createApp({\n data() {\n return {\n showBorder: false,\n redBG: false,\n boxClass: \"border"
},
{
"path": "ders-1/6-class-style-binding/index.html",
"chars": 756,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta http-equiv=\"X-UA-Compatible\" content=\"I"
},
{
"path": "ders-1/6-class-style-binding/style.css",
"chars": 400,
"preview": "* {\n margin: 0;\n padding: 0;\n font-family: \"Courier New\", Courier, monospace;\n}\n\nbody {\n display: flex;\n justify-co"
},
{
"path": "ders-1/7-conditions/app.js",
"chars": 280,
"preview": "const app = Vue.createApp({\n data() {\n return {\n showContainer: false,\n counter: 0,\n };\n },\n computed"
},
{
"path": "ders-1/7-conditions/index.html",
"chars": 1626,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta http-equiv=\"X-UA-Compatible\" content=\"I"
},
{
"path": "ders-1/8-loops/app.js",
"chars": 1107,
"preview": "const app = Vue.createApp({\n data() {\n return {\n todoList: [\n { id: 1, text: \"Vue Bootcamp Hafta 1\", com"
},
{
"path": "ders-1/8-loops/index.html",
"chars": 2501,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta http-equiv=\"X-UA-Compatible\" content=\"I"
},
{
"path": "ders-1/odevler/class-list-app/index.html",
"chars": 1637,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "ders-1/odevler/class-list-app/readme.txt",
"chars": 624,
"preview": "ÖDEV\nYukarıda bulunan checkbox elementlerine tıklanıldığında, checkbox'ın sahip olduğu Class bilgisini textarea elementi"
},
{
"path": "ders-1/odevler/class-list-app/style.css",
"chars": 22866,
"preview": "* {\n margin: 0;\n padding: 0;\n font-family: Arial, Helvetica, sans-serif;\n -webkit-box-sizing: border-box;\n "
},
{
"path": "ders-1/odevler/comment-like-dislike-app/index.html",
"chars": 2771,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "ders-1/odevler/comment-like-dislike-app/readme.txt",
"chars": 732,
"preview": "ÖDEV\n1 - ) data üzerinde bulunan bir comments isimli bir Array üzerinden \".comment--item\" elementini v-for ile döndürünü"
},
{
"path": "ders-1/odevler/comment-like-dislike-app/style.css",
"chars": 22200,
"preview": "* {\n margin: 0;\n padding: 0;\n font-family: Arial, Helvetica, sans-serif;\n -webkit-box-sizing: border-box;\n box-sizi"
},
{
"path": "ders-1/odevler/cozum-1/index.html",
"chars": 2683,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "ders-1/odevler/cozum-1/style.css",
"chars": 22866,
"preview": "* {\n margin: 0;\n padding: 0;\n font-family: Arial, Helvetica, sans-serif;\n -webkit-box-sizing: border-box;\n "
},
{
"path": "ders-1/odevler/cozum-2/app.js",
"chars": 395,
"preview": "const app = Vue.createApp({\n data() {\n return {\n value: \"\",\n value2: \"\",\n };\n },\n methods: {\n show"
},
{
"path": "ders-1/odevler/cozum-2/index.html",
"chars": 1336,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "ders-1/odevler/cozum-2/style.css",
"chars": 22866,
"preview": "* {\n margin: 0;\n padding: 0;\n font-family: Arial, Helvetica, sans-serif;\n -webkit-box-sizing: border-box;\n "
},
{
"path": "ders-1/odevler/cozum-3/app.js",
"chars": 698,
"preview": "const app = Vue.createApp({\n data() {\n return {\n value: 0,\n result2: null,\n };\n },\n computed: {\n r"
},
{
"path": "ders-1/odevler/cozum-3/index.html",
"chars": 2015,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "ders-1/odevler/cozum-3/style.css",
"chars": 22866,
"preview": "* {\n margin: 0;\n padding: 0;\n font-family: Arial, Helvetica, sans-serif;\n -webkit-box-sizing: border-box;\n "
},
{
"path": "ders-1/odevler/css-class-app/app.js",
"chars": 353,
"preview": "Vue.createApp({\n data() {\n return {\n activeColor: \"\",\n color_palette: [\n {\n id: \"red\",\n "
},
{
"path": "ders-1/odevler/css-class-app/index.html",
"chars": 1078,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "ders-1/odevler/css-class-app/readme.txt",
"chars": 1242,
"preview": "ÖDEV:\nYukarıda bulunan renk paletlerine tıklanıldığında .result-box elementinin rengini tıklanılan palete göre değiştire"
},
{
"path": "ders-1/odevler/css-class-app/style.css",
"chars": 22866,
"preview": "* {\n margin: 0;\n padding: 0;\n font-family: Arial, Helvetica, sans-serif;\n -webkit-box-sizing: border-box;\n "
},
{
"path": "ders-1/odevler/odev-1/index.html",
"chars": 1397,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "ders-1/odevler/odev-1/style.css",
"chars": 22866,
"preview": "* {\n margin: 0;\n padding: 0;\n font-family: Arial, Helvetica, sans-serif;\n -webkit-box-sizing: border-box;\n "
},
{
"path": "ders-1/odevler/odev-2/app.js",
"chars": 109,
"preview": "const app = Vue.createApp({\n data() {\n return {\n value: \"\",\n };\n },\n});\napp.mount(\"#exercise\");\n"
},
{
"path": "ders-1/odevler/odev-2/index.html",
"chars": 1163,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "ders-1/odevler/odev-2/style.css",
"chars": 22866,
"preview": "* {\n margin: 0;\n padding: 0;\n font-family: Arial, Helvetica, sans-serif;\n -webkit-box-sizing: border-box;\n "
},
{
"path": "ders-1/odevler/odev-3/app.js",
"chars": 89,
"preview": "new Vue({\n el: '#exercise',\n data: {\n value: 0\n }\n });"
},
{
"path": "ders-1/odevler/odev-3/index.html",
"chars": 1969,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "ders-1/odevler/odev-3/style.css",
"chars": 22866,
"preview": "* {\n margin: 0;\n padding: 0;\n font-family: Arial, Helvetica, sans-serif;\n -webkit-box-sizing: border-box;\n "
},
{
"path": "ders-1-tekrar-dersi/-boilerplate/app.js",
"chars": 77,
"preview": "const app = Vue.createApp({\n data() {\n return {};\n },\n}).mount(\"#app\");\n"
},
{
"path": "ders-1-tekrar-dersi/-boilerplate/index.html",
"chars": 491,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta http-equiv=\"X-UA-Compatible\" content=\"I"
},
{
"path": "ders-1-tekrar-dersi/0-vue-vs-js/js/app.js",
"chars": 346,
"preview": "const todoText = document.querySelector(\"#todoText\");\nconst addBtn = document.querySelector(\"#addBtn\");\nconst todoList ="
},
{
"path": "ders-1-tekrar-dersi/0-vue-vs-js/js/index.html",
"chars": 414,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta http-equiv=\"X-UA-Compatible\" content=\"I"
},
{
"path": "ders-1-tekrar-dersi/0-vue-vs-js/vue/app.js",
"chars": 232,
"preview": "const app = Vue.createApp({\n data() {\n return {\n todoText: null,\n todoList: [],\n };\n },\n methods: {\n "
},
{
"path": "ders-1-tekrar-dersi/0-vue-vs-js/vue/index.html",
"chars": 577,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta http-equiv=\"X-UA-Compatible\" content=\"I"
},
{
"path": "ders-1-tekrar-dersi/1-vue-instance-template-attribute-event/app.js",
"chars": 1000,
"preview": "const app = Vue.createApp({\n data() {\n return {\n title: \"Bu Vue tarafından gelen bir bilgidir..\",\n content"
},
{
"path": "ders-1-tekrar-dersi/1-vue-instance-template-attribute-event/index.html",
"chars": 1657,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta http-equiv=\"X-UA-Compatible\" content=\"I"
},
{
"path": "ders-1-tekrar-dersi/2-vue-virtual-dom-life-cycle/app.js",
"chars": 1096,
"preview": "const app = Vue.createApp({\n data() {\n return {\n counter: 0,\n counter2: 0,\n itemList: [],\n };\n },"
},
{
"path": "ders-1-tekrar-dersi/2-vue-virtual-dom-life-cycle/index.html",
"chars": 1565,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta http-equiv=\"X-UA-Compatible\" content=\"I"
},
{
"path": "ders-1-tekrar-dersi/3-reactivity/app.js",
"chars": 1080,
"preview": "const app = Vue.createApp({\n data() {\n return {\n counter: 0,\n counter2: 0,\n itemList: [],\n };\n },"
},
{
"path": "ders-1-tekrar-dersi/3-reactivity/index.html",
"chars": 1094,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta http-equiv=\"X-UA-Compatible\" content=\"I"
},
{
"path": "ders-1-tekrar-dersi/4-css-style-binding/app.js",
"chars": 495,
"preview": "const app = Vue.createApp({\n data() {\n return {\n myClass: \"text-green bg-orange\",\n counter: 0,\n };\n },"
},
{
"path": "ders-1-tekrar-dersi/4-css-style-binding/index.html",
"chars": 910,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta http-equiv=\"X-UA-Compatible\" content=\"I"
},
{
"path": "ders-1-tekrar-dersi/5-conditions/app.js",
"chars": 124,
"preview": "const app = Vue.createApp({\n data() {\n return {\n showState: false,\n counter: 0,\n };\n },\n}).mount(\"#app"
},
{
"path": "ders-1-tekrar-dersi/5-conditions/index.html",
"chars": 1359,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta http-equiv=\"X-UA-Compatible\" content=\"I"
},
{
"path": "ders-1-tekrar-dersi/6-loops/app.js",
"chars": 520,
"preview": "const app = Vue.createApp({\n data() {\n return {\n memberList: [\n { id: 1, name: \"Cihan Özen\" },\n {"
},
{
"path": "ders-1-tekrar-dersi/6-loops/index.html",
"chars": 620,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta http-equiv=\"X-UA-Compatible\" content=\"I"
},
{
"path": "ders-1-tekrar-dersi/odevler/class-list-app/app.js",
"chars": 593,
"preview": "const app = Vue.createApp({\n data() {\n return {\n styles: {\n backgroundColor: false,\n border: fals"
},
{
"path": "ders-1-tekrar-dersi/odevler/class-list-app/index.html",
"chars": 2547,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "ders-1-tekrar-dersi/odevler/class-list-app/readme.txt",
"chars": 624,
"preview": "ÖDEV\nYukarıda bulunan checkbox elementlerine tıklanıldığında, checkbox'ın sahip olduğu Class bilgisini textarea elementi"
},
{
"path": "ders-1-tekrar-dersi/odevler/class-list-app/style.css",
"chars": 22866,
"preview": "* {\n margin: 0;\n padding: 0;\n font-family: Arial, Helvetica, sans-serif;\n -webkit-box-sizing: border-box;\n "
},
{
"path": "ders-1-tekrar-dersi/odevler/comment-like-dislike-app/index.html",
"chars": 2771,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "ders-1-tekrar-dersi/odevler/comment-like-dislike-app/readme.txt",
"chars": 732,
"preview": "ÖDEV\n1 - ) data üzerinde bulunan bir comments isimli bir Array üzerinden \".comment--item\" elementini v-for ile döndürünü"
},
{
"path": "ders-1-tekrar-dersi/odevler/comment-like-dislike-app/style.css",
"chars": 22200,
"preview": "* {\n margin: 0;\n padding: 0;\n font-family: Arial, Helvetica, sans-serif;\n -webkit-box-sizing: border-box;\n box-sizi"
},
{
"path": "ders-1-tekrar-dersi/odevler/cozum-1/index.html",
"chars": 2683,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "ders-1-tekrar-dersi/odevler/cozum-1/style.css",
"chars": 22866,
"preview": "* {\n margin: 0;\n padding: 0;\n font-family: Arial, Helvetica, sans-serif;\n -webkit-box-sizing: border-box;\n "
},
{
"path": "ders-1-tekrar-dersi/odevler/cozum-2/app.js",
"chars": 395,
"preview": "const app = Vue.createApp({\n data() {\n return {\n value: \"\",\n value2: \"\",\n };\n },\n methods: {\n show"
},
{
"path": "ders-1-tekrar-dersi/odevler/cozum-2/index.html",
"chars": 1336,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "ders-1-tekrar-dersi/odevler/cozum-2/style.css",
"chars": 22866,
"preview": "* {\n margin: 0;\n padding: 0;\n font-family: Arial, Helvetica, sans-serif;\n -webkit-box-sizing: border-box;\n "
},
{
"path": "ders-1-tekrar-dersi/odevler/cozum-3/app.js",
"chars": 698,
"preview": "const app = Vue.createApp({\n data() {\n return {\n value: 0,\n result2: null,\n };\n },\n computed: {\n r"
},
{
"path": "ders-1-tekrar-dersi/odevler/cozum-3/index.html",
"chars": 2015,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "ders-1-tekrar-dersi/odevler/cozum-3/style.css",
"chars": 22866,
"preview": "* {\n margin: 0;\n padding: 0;\n font-family: Arial, Helvetica, sans-serif;\n -webkit-box-sizing: border-box;\n "
},
{
"path": "ders-1-tekrar-dersi/odevler/css-class-app/app.js",
"chars": 353,
"preview": "Vue.createApp({\n data() {\n return {\n activeColor: \"\",\n color_palette: [\n {\n id: \"red\",\n "
},
{
"path": "ders-1-tekrar-dersi/odevler/css-class-app/index.html",
"chars": 1078,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "ders-1-tekrar-dersi/odevler/css-class-app/readme.txt",
"chars": 1242,
"preview": "ÖDEV:\nYukarıda bulunan renk paletlerine tıklanıldığında .result-box elementinin rengini tıklanılan palete göre değiştire"
},
{
"path": "ders-1-tekrar-dersi/odevler/css-class-app/style.css",
"chars": 22866,
"preview": "* {\n margin: 0;\n padding: 0;\n font-family: Arial, Helvetica, sans-serif;\n -webkit-box-sizing: border-box;\n "
},
{
"path": "ders-1-tekrar-dersi/odevler/odev-1/app.js",
"chars": 327,
"preview": "const app = Vue.createApp({\n data() {\n return {\n name: \"kablosuzkedi\",\n age: 33,\n imageUrl:\n \""
},
{
"path": "ders-1-tekrar-dersi/odevler/odev-1/index.html",
"chars": 1622,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "ders-1-tekrar-dersi/odevler/odev-1/style.css",
"chars": 22866,
"preview": "* {\n margin: 0;\n padding: 0;\n font-family: Arial, Helvetica, sans-serif;\n -webkit-box-sizing: border-box;\n "
},
{
"path": "ders-1-tekrar-dersi/odevler/odev-2/app.js",
"chars": 266,
"preview": "const app = Vue.createApp({\n data() {\n return {\n value: \"\",\n };\n },\n methods: {\n showAlert() {\n al"
},
{
"path": "ders-1-tekrar-dersi/odevler/odev-2/index.html",
"chars": 1363,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "ders-1-tekrar-dersi/odevler/odev-2/style.css",
"chars": 22866,
"preview": "* {\n margin: 0;\n padding: 0;\n font-family: Arial, Helvetica, sans-serif;\n -webkit-box-sizing: border-box;\n "
},
{
"path": "ders-1-tekrar-dersi/odevler/odev-3/app.js",
"chars": 89,
"preview": "new Vue({\n el: '#exercise',\n data: {\n value: 0\n }\n });"
},
{
"path": "ders-1-tekrar-dersi/odevler/odev-3/index.html",
"chars": 1969,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "ders-1-tekrar-dersi/odevler/odev-3/style.css",
"chars": 22866,
"preview": "* {\n margin: 0;\n padding: 0;\n font-family: Arial, Helvetica, sans-serif;\n -webkit-box-sizing: border-box;\n "
},
{
"path": "ders-1-tekrar-dersi/style.css",
"chars": 8312,
"preview": "@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\""
},
{
"path": "ders-10-composition-api/0-script-setup/.vscode/extensions.json",
"chars": 49,
"preview": "{\n \"recommendations\": [\"johnsoncodehk.volar\"]\n}\n"
},
{
"path": "ders-10-composition-api/0-script-setup/README.md",
"chars": 403,
"preview": "# Vue 3 + Vite\n\nThis template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<scrip"
},
{
"path": "ders-10-composition-api/0-script-setup/index.html",
"chars": 337,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <link rel=\"icon\" href=\"/favicon.ico\" />\n <"
},
{
"path": "ders-10-composition-api/0-script-setup/package.json",
"chars": 311,
"preview": "{\n \"name\": \"0-script-setup\",\n \"version\": \"0.0.0\",\n \"scripts\": {\n \"dev\": \"vite\",\n \"build\": \"vite build\",\n \"se"
},
{
"path": "ders-10-composition-api/0-script-setup/src/App.vue",
"chars": 970,
"preview": "<template>\n <h3>{{ title }} </h3>\n <input type=\"text\" v-model=\"title\" />\n <button @click=\"inc\">{{ counter }}</button>"
},
{
"path": "ders-10-composition-api/0-script-setup/src/components/oddOrEven.vue",
"chars": 419,
"preview": "<template>\n <h1>aaa</h1>\n <h3>{{ result }}</h3>\n {{ counter }}\n</template>\n<script setup>\nimport { computed, watch } "
},
{
"path": "ders-10-composition-api/0-script-setup/src/composables/Utils.js",
"chars": 368,
"preview": "import { ref, onMounted } from \"vue\";\nexport default function () {\n const title = ref(\"Başlık\");\n const counter = ref("
},
{
"path": "ders-10-composition-api/0-script-setup/src/main.js",
"chars": 90,
"preview": "import { createApp } from 'vue'\nimport App from './App.vue'\n\ncreateApp(App).mount('#app')\n"
},
{
"path": "ders-10-composition-api/0-script-setup/vite.config.js",
"chars": 156,
"preview": "import { defineConfig } from 'vite'\nimport vue from '@vitejs/plugin-vue'\n\n// https://vitejs.dev/config/\nexport default d"
},
{
"path": "ders-10-composition-api/1-item-list-app/.vscode/extensions.json",
"chars": 49,
"preview": "{\n \"recommendations\": [\"johnsoncodehk.volar\"]\n}\n"
},
{
"path": "ders-10-composition-api/1-item-list-app/README.md",
"chars": 403,
"preview": "# Vue 3 + Vite\n\nThis template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<scrip"
},
{
"path": "ders-10-composition-api/1-item-list-app/index.html",
"chars": 337,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <link rel=\"icon\" href=\"/favicon.ico\" />\n <"
},
{
"path": "ders-10-composition-api/1-item-list-app/package.json",
"chars": 399,
"preview": "{\n \"name\": \"1-item-list-app\",\n \"version\": \"0.0.0\",\n \"scripts\": {\n \"dev\": \"vite\",\n \"build\": \"vite build\",\n \"s"
},
{
"path": "ders-10-composition-api/1-item-list-app/postcss.config.js",
"chars": 82,
"preview": "module.exports = {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n },\n}\n"
},
{
"path": "ders-10-composition-api/1-item-list-app/src/App.vue",
"chars": 1265,
"preview": "<template>\n <div class=\"w-screen h-screen bg-gray-800 flex flex-row text-white items-start justify-center\">\n <app-si"
},
{
"path": "ders-10-composition-api/1-item-list-app/src/assets/index.css",
"chars": 775,
"preview": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer components {\n .input {\n @apply bg-gray-800 outlin"
},
{
"path": "ders-10-composition-api/1-item-list-app/src/components/appSidebar.vue",
"chars": 1523,
"preview": "<template>\n <aside class=\"bg-gray-700 w-[300px] h-screen\">\n <h3 class=\"text-2xl font-bold mt-2 p-2\">Fatura Listesi</"
},
{
"path": "ders-10-composition-api/1-item-list-app/src/components/contactSection.vue",
"chars": 1344,
"preview": "<template>\n <div>\n <heading title=\"Fatura Bilgileri\" />\n <label for=\"client_name\" class=\"flex flex-col text-gray-"
},
{
"path": "ders-10-composition-api/1-item-list-app/src/components/invoiceContent.vue",
"chars": 1971,
"preview": "<template>\n <section class=\"bg-gray-900 w-1/3 mx-auto mt-10 p-2 px-5 rounded-md shadow-2xl\">\n <!-- FAtura Bilgileri "
},
{
"path": "ders-10-composition-api/1-item-list-app/src/components/invoiceItem.vue",
"chars": 1187,
"preview": "<template>\n <div class=\"table-body-item group\">\n <input v-model=\"item.name\" autocomplete=\"off\" type=\"text\" class=\"in"
},
{
"path": "ders-10-composition-api/1-item-list-app/src/components/invoiceItems.vue",
"chars": 932,
"preview": "<template>\n <div>\n <div class=\"table-header flex\">\n <span class=\"text-left p-1 w-[200px] mr-2\">Ürün Adı</span>\n"
},
{
"path": "ders-10-composition-api/1-item-list-app/src/components/invoiceSummary.vue",
"chars": 796,
"preview": "<template>\n <div class=\"summary mt-5 flex justify-end items-end\">\n <div class=\"text-right mr-2\">\n <div class=\"t"
},
{
"path": "ders-10-composition-api/1-item-list-app/src/components/ui/appHeading.vue",
"chars": 206,
"preview": "<template>\n <h3 class=\"text-gray-400 text-xl\">{{ title }}</h3>\n <hr class=\"bg-gradient-to-r h-[1px] border-none from-g"
},
{
"path": "ders-10-composition-api/1-item-list-app/src/main.js",
"chars": 233,
"preview": "import { createApp } from \"vue\";\nimport App from \"./App.vue\";\nimport appHeading from \"./components/ui/appHeading.vue\";\ni"
},
{
"path": "ders-10-composition-api/1-item-list-app/src/theme.vue",
"chars": 5425,
"preview": "<template>\n <div class=\"w-screen h-screen bg-gray-800 flex flex-row text-white items-start justify-center\">\n <aside "
},
{
"path": "ders-10-composition-api/1-item-list-app/tailwind.config.js",
"chars": 192,
"preview": "module.exports = {\n mode: \"jit\",\n purge: [\"./src/**/*.vue\"],\n darkMode: false, // or 'media' or 'class'\n theme: {\n "
},
{
"path": "ders-10-composition-api/1-item-list-app/vite.config.js",
"chars": 156,
"preview": "import { defineConfig } from 'vite'\nimport vue from '@vitejs/plugin-vue'\n\n// https://vitejs.dev/config/\nexport default d"
},
{
"path": "ders-11/namespaced-components/.vscode/extensions.json",
"chars": 49,
"preview": "{\n \"recommendations\": [\"johnsoncodehk.volar\"]\n}\n"
},
{
"path": "ders-11/namespaced-components/README.md",
"chars": 403,
"preview": "# Vue 3 + Vite\n\nThis template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<scrip"
},
{
"path": "ders-11/namespaced-components/index.html",
"chars": 337,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <link rel=\"icon\" href=\"/favicon.ico\" />\n <"
},
{
"path": "ders-11/namespaced-components/package.json",
"chars": 284,
"preview": "{\n \"name\": \"namespaced-components\",\n \"version\": \"0.0.0\",\n \"scripts\": {\n \"dev\": \"vite\",\n \"build\": \"vite build\",\n"
},
{
"path": "ders-11/namespaced-components/src/App.vue",
"chars": 493,
"preview": "<script setup>\n// import Input from \"./components/Forms/Input.vue\";\n// import Select from \"./components/Forms/Select.vue"
},
{
"path": "ders-11/namespaced-components/src/components/Forms/Input.vue",
"chars": 58,
"preview": "<template>\n <slot />\n <input type=\"text\" />\n</template>\n"
},
{
"path": "ders-11/namespaced-components/src/components/Forms/Label.vue",
"chars": 34,
"preview": "<template>\n <slot />\n</template>\n"
},
{
"path": "ders-11/namespaced-components/src/components/Forms/Select.vue",
"chars": 205,
"preview": "<template>\n <slot />\n <select>\n <option value=\"1\">Opt 1</option>\n <option value=\"2\">Opt 2</option>\n <option v"
},
{
"path": "ders-11/namespaced-components/src/components/form-components.js",
"chars": 164,
"preview": "export { default as Input } from \"./Forms/Input.vue\";\nexport { default as Select } from \"./Forms/Select.vue\";\nexport { d"
},
{
"path": "ders-11/namespaced-components/src/main.js",
"chars": 90,
"preview": "import { createApp } from 'vue'\nimport App from './App.vue'\n\ncreateApp(App).mount('#app')\n"
},
{
"path": "ders-11/namespaced-components/vite.config.js",
"chars": 156,
"preview": "import { defineConfig } from 'vite'\nimport vue from '@vitejs/plugin-vue'\n\n// https://vitejs.dev/config/\nexport default d"
},
{
"path": "ders-11/suspense-example/.vscode/extensions.json",
"chars": 49,
"preview": "{\n \"recommendations\": [\"johnsoncodehk.volar\"]\n}\n"
},
{
"path": "ders-11/suspense-example/README.md",
"chars": 403,
"preview": "# Vue 3 + Vite\n\nThis template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<scrip"
},
{
"path": "ders-11/suspense-example/index.html",
"chars": 337,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <link rel=\"icon\" href=\"/favicon.ico\" />\n <"
},
{
"path": "ders-11/suspense-example/package.json",
"chars": 279,
"preview": "{\n \"name\": \"suspense-example\",\n \"version\": \"0.0.0\",\n \"scripts\": {\n \"dev\": \"vite\",\n \"build\": \"vite build\",\n \""
},
{
"path": "ders-11/suspense-example/src/App.vue",
"chars": 798,
"preview": "<script setup>\nimport { onErrorCaptured, ref, defineAsyncComponent } from \"@vue/runtime-core\";\n// import Todos from \"./c"
},
{
"path": "ders-11/suspense-example/src/components/Todos.vue",
"chars": 460,
"preview": "<script setup>\nimport { ref } from \"vue\";\n\nconst todoList = ref([]);\n// const isLoad = ref(false);\nfetch(\"https://jsonpl"
},
{
"path": "ders-11/suspense-example/src/components/Users.vue",
"chars": 461,
"preview": "<script setup>\nimport { ref } from \"vue\";\n\nconst userList = ref([]);\n// const isLoad = ref(false);\n\nfetch(\"https://jsonp"
},
{
"path": "ders-11/suspense-example/src/main.js",
"chars": 90,
"preview": "import { createApp } from 'vue'\nimport App from './App.vue'\n\ncreateApp(App).mount('#app')\n"
},
{
"path": "ders-11/suspense-example/vite.config.js",
"chars": 156,
"preview": "import { defineConfig } from 'vite'\nimport vue from '@vitejs/plugin-vue'\n\n// https://vitejs.dev/config/\nexport default d"
},
{
"path": "ders-11/teleport-example/.vscode/extensions.json",
"chars": 49,
"preview": "{\n \"recommendations\": [\"johnsoncodehk.volar\"]\n}\n"
},
{
"path": "ders-11/teleport-example/README.md",
"chars": 403,
"preview": "# Vue 3 + Vite\n\nThis template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<scrip"
},
{
"path": "ders-11/teleport-example/index.html",
"chars": 369,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <link rel=\"icon\" href=\"/favicon.ico\" />\n <"
},
{
"path": "ders-11/teleport-example/package.json",
"chars": 279,
"preview": "{\n \"name\": \"teleport-example\",\n \"version\": \"0.0.0\",\n \"scripts\": {\n \"dev\": \"vite\",\n \"build\": \"vite build\",\n \""
},
{
"path": "ders-11/teleport-example/src/App.vue",
"chars": 619,
"preview": "<script setup>\n// This starter template is using Vue 3 <script setup> SFCs\n// Check out https://v3.vuejs.org/api/sfc-scr"
},
{
"path": "ders-11/teleport-example/src/components/HelloWorld.vue",
"chars": 767,
"preview": "<script setup>\nimport { ref } from 'vue'\n\ndefineProps({\n msg: String\n})\n\nconst count = ref(0)\n</script>\n\n<template>\n <"
},
{
"path": "ders-11/teleport-example/src/main.js",
"chars": 90,
"preview": "import { createApp } from 'vue'\nimport App from './App.vue'\n\ncreateApp(App).mount('#app')\n"
},
{
"path": "ders-11/teleport-example/vite.config.js",
"chars": 156,
"preview": "import { defineConfig } from 'vite'\nimport vue from '@vitejs/plugin-vue'\n\n// https://vitejs.dev/config/\nexport default d"
},
{
"path": "ders-12-socialmark-composition-api/client/.eslintignore",
"chars": 17,
"preview": "/composables/*.js"
},
{
"path": "ders-12-socialmark-composition-api/client/.prettierrc",
"chars": 25,
"preview": "{\n \"printWidth\": 250\n}"
},
{
"path": "ders-12-socialmark-composition-api/client/README.md",
"chars": 332,
"preview": "# ders-6-socialmark-uygulamasi\n\n## Project setup\n```\nyarn install\n```\n\n### Compiles and hot-reloads for development\n```\n"
},
{
"path": "ders-12-socialmark-composition-api/client/babel.config.js",
"chars": 73,
"preview": "module.exports = {\n presets: [\n '@vue/cli-plugin-babel/preset'\n ]\n}\n"
},
{
"path": "ders-12-socialmark-composition-api/client/db.json",
"chars": 7409,
"preview": "{\n \"users\": [\n {\n \"username\": \"gkandemir\",\n \"fullname\": \"Gökhan Kandemir\",\n \"password\": \"79a0af24ff17"
},
{
"path": "ders-12-socialmark-composition-api/client/package.json",
"chars": 1066,
"preview": "{\n \"name\": \"ders-6-socialmark-uygulamasi\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"scripts\": {\n \"serve\": \"vue-cl"
},
{
"path": "ders-12-socialmark-composition-api/client/public/index.html",
"chars": 681,
"preview": "<!DOCTYPE html>\n<html lang=\"\">\n <head>\n <meta charset=\"utf-8\" />\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE="
},
{
"path": "ders-12-socialmark-composition-api/client/src/App.vue",
"chars": 53,
"preview": "<template>\n <router-view></router-view>\n</template>\n"
},
{
"path": "ders-12-socialmark-composition-api/client/src/assets/style.css",
"chars": 22573,
"preview": "/*! tailwindcss v2.2.7 | MIT License | https://tailwindcss.com */\n\n/*! modern-normalize v1.1.0 | MIT License | https://g"
},
{
"path": "ders-12-socialmark-composition-api/client/src/components/Account/sideBar.vue",
"chars": 1812,
"preview": "<template>\n <aside class=\"flex flex-shrink-0 flex-col h-[100vh] bg-white w-60 border-gray-200 border-r-[1px]\">\n <a c"
},
{
"path": "ders-12-socialmark-composition-api/client/src/components/Home/Sidebar.vue",
"chars": 1579,
"preview": "<template>\n <aside class=\"sidebar\">\n <a v-for=\"category in categoryList\" :key=\"category.id\" class=\"sidebar-item\" hre"
},
{
"path": "ders-12-socialmark-composition-api/client/src/components/Shared/appBookmarkList/BookmarkListItem copy.vue",
"chars": 4598,
"preview": "<template>\n <div class=\"bg-white flex flex-col gap-x-3 rounded-md shadow-sm\">\n <div class=\"p-3\">\n <a :href=\"ite"
},
{
"path": "ders-12-socialmark-composition-api/client/src/components/Shared/appBookmarkList/BookmarkListItem.vue",
"chars": 2988,
"preview": "<script setup>\n/* eslint-disable no-unused-vars */\nimport { defineProps } from \"vue\";\nimport BookmarkListItem from \"@/co"
},
{
"path": "ders-12-socialmark-composition-api/client/src/components/Shared/appBookmarkList/index.vue",
"chars": 475,
"preview": "<template>\n <div class=\"w-full\">\n <div class=\"p-2 grid 2xl:grid-cols-8 xl:grid-cols-6 lg:grid-cols-5 md:grid-cols-4 "
},
{
"path": "ders-12-socialmark-composition-api/client/src/components/Shared/appHeader.vue",
"chars": 4728,
"preview": "<template>\n <div class=\"header-container\">\n <nav class=\"flex w-full px-2\">\n <div class=\"flex text-xl\">\n "
},
{
"path": "ders-12-socialmark-composition-api/client/src/composables/BookmarkListItem.js",
"chars": 2262,
"preview": "import { inject, computed } from \"vue\";\nimport { useStore } from \"vuex\";\nexport default function(item) {\n const store ="
},
{
"path": "ders-12-socialmark-composition-api/client/src/main.js",
"chars": 783,
"preview": "import { createApp } from \"vue\";\nimport App from \"./App.vue\";\nimport router from \"./router\";\nimport store from \"./store\""
},
{
"path": "ders-12-socialmark-composition-api/client/src/router/index.js",
"chars": 1529,
"preview": "import { createRouter, createWebHashHistory } from \"vue-router\";\nimport store from \"../store\";\nconst routes = [\n {\n "
},
{
"path": "ders-12-socialmark-composition-api/client/src/store/index.js",
"chars": 1313,
"preview": "import { createStore } from \"vuex\";\nimport createPersistedState from \"vuex-persistedstate\";\n\nimport SecureLS from \"secur"
},
{
"path": "ders-12-socialmark-composition-api/client/src/utils/appAxios.js",
"chars": 105,
"preview": "import axios from \"axios\";\nexport const appAxios = axios.create({\n baseURL: \"http://localhost:3000\"\n});\n"
},
{
"path": "ders-12-socialmark-composition-api/client/src/views/Account.vue",
"chars": 678,
"preview": "<template>\n <AppHeader />\n <div class=\"flex flex-row\">\n <side-bar />\n <!-- <component :is=\"$route.meta.component"
},
{
"path": "ders-12-socialmark-composition-api/client/src/views/Favorites.vue",
"chars": 0,
"preview": ""
},
{
"path": "ders-12-socialmark-composition-api/client/src/views/Home.vue",
"chars": 1651,
"preview": "<template>\n <AppHeader />\n <div class=\"flex flex-row\">\n <Sidebar @category-changed=\"updateBookmarkList\" />\n <app"
},
{
"path": "ders-12-socialmark-composition-api/client/src/views/Login.vue",
"chars": 1482,
"preview": "<template>\n <div class=\"login_register_container\">\n <h3 class=\"text-2xl text-center mb-3\">Giriş Yap</h3>\n <input "
},
{
"path": "ders-12-socialmark-composition-api/client/src/views/NewBookmark.vue",
"chars": 2115,
"preview": "<template>\n <div class=\"login_register_container\">\n <h3 class=\"text-2xl text-center mb-3\">Yeni Ekle</h3>\n <input "
},
{
"path": "ders-12-socialmark-composition-api/client/src/views/Register.vue",
"chars": 1273,
"preview": "<template>\n <div class=\"login_register_container\">\n <h3 class=\"text-2xl text-center mb-3\">Kayıt Ol</h3>\n <input v"
},
{
"path": "ders-12-socialmark-composition-api/server/app.js",
"chars": 874,
"preview": "const socketio = require(\"socket.io\");\nconst express = require(\"express\");\nconst http = require(\"http\");\nconst app = exp"
},
{
"path": "ders-12-socialmark-composition-api/server/package.json",
"chars": 402,
"preview": "{\n \"name\": \"server\",\n \"version\": \"1.0.0\",\n \"description\": \"\",\n \"main\": \"index.js\",\n \"scripts\": {\n \"start\": \"node"
},
{
"path": "ders-12-socialmark-composition-api/tema/.prettierrc",
"chars": 25,
"preview": "{\n \"printWidth\": 500\n}"
},
{
"path": "ders-12-socialmark-composition-api/tema/account.html",
"chars": 6763,
"preview": "<!DOCTYPE html>\n<html lang=\"tr\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta http-equiv=\"X-UA-Compatible\" content=\"I"
},
{
"path": "ders-12-socialmark-composition-api/tema/assets/app.js",
"chars": 45,
"preview": "const app = Vue.createApp({}).mount(\"#app\");\n"
},
{
"path": "ders-12-socialmark-composition-api/tema/assets/style.css",
"chars": 22573,
"preview": "/*! tailwindcss v2.2.7 | MIT License | https://tailwindcss.com */\n\n/*! modern-normalize v1.1.0 | MIT License | https://g"
},
{
"path": "ders-12-socialmark-composition-api/tema/assets/tailwind.css",
"chars": 2056,
"preview": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n .translate {\n transform: translate(-50%, "
},
{
"path": "ders-12-socialmark-composition-api/tema/favorites.html",
"chars": 9481,
"preview": "<!DOCTYPE html>\n<html lang=\"tr\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta http-equiv=\"X-UA-Compatible\" content=\"I"
},
{
"path": "ders-12-socialmark-composition-api/tema/index.html",
"chars": 9354,
"preview": "<!DOCTYPE html>\n<html lang=\"tr\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta http-equiv=\"X-UA-Compatible\" content=\"I"
},
{
"path": "ders-12-socialmark-composition-api/tema/login.html",
"chars": 819,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta http-equiv=\"X-UA-Compatible\" content=\"I"
},
{
"path": "ders-12-socialmark-composition-api/tema/new-bookmark.html",
"chars": 1103,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta http-equiv=\"X-UA-Compatible\" content=\"I"
},
{
"path": "ders-12-socialmark-composition-api/tema/register.html",
"chars": 883,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta http-equiv=\"X-UA-Compatible\" content=\"I"
},
{
"path": "ders-2/-boilerplate/app.js",
"chars": 77,
"preview": "const app = Vue.createApp({\n data() {\n return {};\n },\n}).mount(\"#app\");\n"
},
{
"path": "ders-2/-boilerplate/index.html",
"chars": 491,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta http-equiv=\"X-UA-Compatible\" content=\"I"
},
{
"path": "ders-2/.prettierrc",
"chars": 25,
"preview": "{\n \"printWidth\": 150\n}"
},
{
"path": "ders-2/0-component/app.js",
"chars": 407,
"preview": "const app = Vue.createApp({\n data() {\n return {};\n },\n});\n\napp.component(\"counter-item\", {\n data() {\n return {\n"
},
{
"path": "ders-2/0-component/index.html",
"chars": 716,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta http-equiv=\"X-UA-Compatible\" content=\"I"
},
{
"path": "ders-2/1-vue-cli/README.md",
"chars": 321,
"preview": "# 1-vue-cli\n\n## Project setup\n```\nnpm install\n```\n\n### Compiles and hot-reloads for development\n```\nnpm run serve\n```\n\n#"
},
{
"path": "ders-2/1-vue-cli/babel.config.js",
"chars": 73,
"preview": "module.exports = {\n presets: [\n '@vue/cli-plugin-babel/preset'\n ]\n}\n"
},
{
"path": "ders-2/1-vue-cli/package.json",
"chars": 853,
"preview": "{\n \"name\": \"1-vue-cli\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"scripts\": {\n \"serve\": \"vue-cli-service serve\",\n "
},
{
"path": "ders-2/1-vue-cli/public/index.html",
"chars": 611,
"preview": "<!DOCTYPE html>\n<html lang=\"\">\n <head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=ed"
},
{
"path": "ders-2/1-vue-cli/src/App.vue",
"chars": 483,
"preview": "<template>\n <app-header />\n <div class=\"container\">\n <h3>Bu benim ilk Vue CLI Uygulamam</h3>\n <p>Bugün component"
}
]
// ... and 163 more files (download for full content)
About this extraction
This page contains the full source code of the gkandemi/kablosuzkedi-vue3-bootcamp GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 363 files (880.0 KB), approximately 297.9k tokens, and a symbol index with 109 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.