msb-public
/
30-Days-Of-JavaScript
mirror of https://github.com/Asabeneh/30-Days-Of-JavaScript
1
0
Code Issues Projects Releases Wiki Activity

Merge pull request #730 from alicangunduz/master

Browse Source 
Added 23-30 day
pull/645/merge
Asabeneh 2 years ago committed by GitHub
parent 7fc6e874ee b2e022e477
commit 96397eba66
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
55 changed files with 21749 additions and 0 deletions
Show Stats Download Patch File Download Diff File

337
Turkish/23_Day_Event_listeners/23_day_event_listeners.md
Unescape View File

@ -0,0 +1,337 @@
<div align="center">
<h1> 30 Days Of JavaScript: Event Listeners</h1>
<a class="header-badge" target="_blank" href="https://www.linkedin.com/in/asabeneh/">
<img src="https://img.shields.io/badge/style--5eba00.svg?label=LinkedIn&logo=linkedin&style=social">
</a>
<a class="header-badge" target="_blank" href="https://twitter.com/Asabeneh">
<img alt="Twitter Follow" src="https://img.shields.io/twitter/follow/asabeneh?style=social">
</a>
<sub>Author:
<a href="https://www.linkedin.com/in/asabeneh/" target="_blank">Asabeneh Yetayeh</a><br>
<sub>Çevirmen:
<a href="https://github.com/alicangunduz" target="_blank">Ali Can Gündüz</a><br>
<small> Mart 2023</small>
</sub>
</div>
[<< Gün 22](../22_Day_Manipulating_DOM_object/22_day_manipulating_DOM_object.md) | [Gün 24 >>](../24_Day_Project_solar_system/24_day_project_solar_system.md)
![Thirty Days Of JavaScript](../images/21_Day_DOM/../../../images/banners/day_1_23.png)
- [Gün 23](#gün-23)
- [DOM(Document Object Model)-Gün 3](#domdocument-object-model-gün-3)
- [Event Listeners](#event-listeners)
- [Tıklama](#tıklama)
- [Çift tıklama](#çift-tıklama)
- [Fare tıklaması](#fare-tıklaması)
- [Bir input öğesinden değer alma](#bir-input-öğesinden-değer-alma)
- [input değeri](#input-değeri)
- [input olayı ve change olayı](#input-olayı-ve-change-olayı)
- [blur olayı](#blur-olayı)
- [keypress, keydown ve keyup](#keypress-keydown-ve-keyup)
- [Egzersizler](#egzersizler)
- [Egzersizler: Seviye 1](#egzersizler-seviye-1)
# Gün 23
## DOM(Document Object Model)-Gün 3
### Event Listeners
Ortak HTML olayları: tıklama, değişiklik, fare üzerine gelme, fareyi elementin üzerinden çıkarma, tuşa basma, tuştan el çekme, yükleme.
Herhangi bir DOM nesnesine olay dinleyici yöntemi ekleyebiliriz. HTML öğelerinde farklı olay türlerini dinlemek için **addEventListener()** yöntemini kullanırız. _addEventListener()_ yöntemi, bir olay dinleyicisi ve geri çağırma işlevi olmak üzere iki argüman alır.
```js
selectedElement.addEventListener("eventlistner", function (e) {
// olaydan sonra olmasını istediğiniz aktivite burada olacak
});
// or
selectedElement.addEventListener("eventlistner", (e) => {
// olaydan sonra olmasını istediğiniz aktivite burada olacak
});
```
#### Tıklama
Bir öğeye olay dinleyicisi eklemek için önce öğeyi seçer, ardından **addEventListener()** yöntemini ekleriz. Olay dinleyicisi, olay türünü ve geri çağırma işlevlerini argüman olarak alır.
Aşağıdaki örnek tıklama türü olayın bir örneğidir.
**Örnek: Tıklama**
```html
<!DOCTYPE html>
<html>
<head>
<title>Document Object Model</title>
</head>
<body>
<button>Click Me</button>
<script>
const button = document.querySelector("button");
button.addEventListener("click", (e) => {
console.log("e gives the event listener object:", e);
console.log("e.target gives the selected element: ", e.target);
console.log(
"e.target.textContent gives content of selected element: ",
e.target.textContent
);
});
</script>
</body>
</html>
```
Bir olay, doğrudan HTML öğesine satır içi komut dosyası olarak da eklenebilir.
**Örnek: onclick**
```html
<!DOCTYPE html>
<html>
<head>
<title>Document Object Model</title>
</head>
<body>
<button onclick="clickMe()">Click Me</button>
<script>
const clickMe = () => {
alert("We can attach event on HTML element");
};
</script>
</body>
</html>
```
#### Çift tıklama
Bir öğeye olay dinleyicisi eklemek için önce öğeyi seçeriz, ardından **addEventListener()** yöntemini ekleriz. Olay dinleyicisi, olay türünü ve geri çağırma işlevlerini argüman olarak alır.
Aşağıdaki örnek, tıklama türü olayın bir örneğidir.
**Örnek: dblclick**
```html
<!DOCTYPE html>
<html>
<head>
<title>Document Object Model</title>
</head>
<body>
<button>Click Me</button>
<script>
const button = document.querySelector("button");
button.addEventListener("dblclick", (e) => {
console.log("e gives the event listener object:", e);
console.log("e.target gives the selected element: ", e.target);
console.log(
"e.target.textContent gives content of selected element: ",
e.target.textContent
);
});
</script>
</body>
</html>
```
#### Fare tıklaması
Bir öğeye olay dinleyicisi eklemek için önce öğeyi seçeriz, ardından **addEventListener()** yöntemini ekleriz. Olay dinleyicisi, olay türünü ve geri çağırma işlevlerini argüman olarak alır.
Aşağıdaki örnek, tıklama türündeki bir olayın örneğidir.
**Örnek: mouseenter**
```html
<!DOCTYPE html>
<html>
<head>
<title>Document Object Model</title>
</head>
<body>
<button>Click Me</button>
<script>
const button = document.querySelector("button");
button.addEventListener("mouseenter", (e) => {
console.log("e gives the event listener object:", e);
console.log("e.target gives the selected element: ", e.target);
console.log(
"e.target.textContent gives content of selected element: ",
e.target.textContent
);
});
</script>
</body>
</html>
```
Şimdiye kadar `addEventListener` yöntemini ve olay dinleyicisi nasıl ekleyeceğimizi öğrendiniz. Birçok olay dinleyicisi türü vardır ancak burada en önemli ve sık kullanılan olaylara odaklanacağız.
Olay listesi:
- `click` - eleman tıklandığında
- `dblclick` - eleman çift tıklandığında
- `mouseenter` - fare noktası öğeye girdiğinde
- `mouseleave` - fare işaretçisi öğeden ayrıldığında
- `mousemove` - fare işaretçisi öğe üzerinde hareket ettiğinde
- `mouseover` - fare işaretçisi öğe üzerinde hareket ettiğinde
- `mouseout` - fare işaretçisi öğeden dışarı çıktığında
- `input` - değer giriş alanına girildiğinde
- `change` - giriş alanında değer değiştiğinde
- `blur` - öğe odaklanmadığında
- `keydown` - bir tuş düştüğünde
- `keyup` - bir anahtar bittiğinde
- `keypress` - herhangi bir tuşa bastığımızda
- `onload` - tarayıcı bir sayfayı yüklemeyi bitirdiğinde
Yukarıdaki kod örneğindeki olay türünü değiştirerek yukarıdaki olay türlerini test edebilirsiniz.
### Bir input öğesinden değer alma
Genellikle form doldururuz ve formlar verileri işler. Form alanları, girdi HTML öğesi kullanılarak oluşturulur. İki girdi alanı, bir düğme ve bir `p` etiketi kullanarak bir kişinin vücut kitle indeksini hesaplamamıza izin veren küçük bir uygulama oluşturalım.
### input değeri
```html
<!DOCTYPE html>
<html>
<head>
<title>Document Object Model:30 Days Of JavaScript</title>
</head>
<body>
<h1>Body Mass Index Calculator</h1>
<input type="text" id="mass" placeholder="Mass in Kilogram" />
<input type="text" id="height" placeholder="Height in meters" />
<button>Calculate BMI</button>
<script>
const mass = document.querySelector("#mass");
const height = document.querySelector("#height");
const button = document.querySelector("button");
let bmi;
button.addEventListener("click", () => {
bmi = mass.value / height.value ** 2;
alert(`your bmi is ${bmi.toFixed(2)}`);
console.log(bmi);
});
</script>
</body>
</html>
```
#### input olayı ve change olayı
Yukarıdaki örnekte, iki girdi alanından verileri düğmeye tıklayarak almayı başardık. Ancak, düğmeye tıklamadan değer almak isterseniz, girdi alanına odaklandığında verileri hemen almak için _change_ veya _input_ olay türünü kullanabiliriz. Bunu nasıl ele alacağımızı görelim.
```html
<!DOCTYPE html>
<html>
<head>
<title>Document Object Model:30 Days Of JavaScript</title>
</head>
<body>
<h1>Data Binding using input or change event</h1>
<input type="text" placeholder="say something" />
<p></p>
<script>
const input = document.querySelector("input");
const p = document.querySelector("p");
input.addEventListener("input", (e) => {
p.textContent = e.target.value;
});
</script>
</body>
</html>
```
#### blur olayı
_Input_ veya _change_ olaylarının aksine, `blur` olayı girdi alanına odaklı değilken meydana gelir.
```js
<!DOCTYPE html>
<html>
<head>
<title>Document Object Model:30 Days Of JavaScript</title>
</head>
<body>
<h1>Giving feedback using blur event</h1>
<input type="text" id="mass" placeholder="say something" />
<p></p>
<script>
const input = document.querySelector('input')
const p = document.querySelector('p')
input.addEventListener('blur', (e) => {
p.textContent = 'Field is required'
p.style.color = 'red'
})
</script>
</body>
</html>
```
#### keypress, keydown ve keyup
Farklı olay dinleyici türlerini kullanarak klavyenin tüm tuş numaralarına erişebiliriz. `KeyPress`'i kullanalım ve her klavye tuşunun keyCode'unu alalım.
```html
<!DOCTYPE html>
<html>
<head>
<title>Document Object Model:30 Days Of JavaScript</title>
</head>
<body>
<h1>Key events: Press any key</h1>
<script>
document.body.addEventListener("keypress", (e) => {
alert(e.keyCode);
});
</script>
</body>
</html>
```
---
🌕 Sen çok özel birisin, her gün gelişiyorsun. Artık herhangi bir DOM olayını nasıl ele alacağını biliyorsun. Başarıya giden yolda yalnızca yedi günün kaldı. Şimdi tüm bunları pekiştirmen için alıştırma vakti!
## Egzersizler
### Egzersizler: Seviye 1
1. Üç farklı renkle çift, tek ve asal sayıları işaretleyen sayıları oluşturma. Aşağıdaki resme bakın.
![Number Generator](../images/.././../images/projects/dom_min_project_number_generator_day_3.1.gif)
1. Klavye kodunu dinleyici kullanarak oluşturma. Aşağıdaki resme bakın.
![Keyboard key](../images/.././../images/projects/dom_min_project_keycode_day_3.2.gif)
🎉 TEBRİKLER ! 🎉
[<< Gün 22](../22_Day_Manipulating_DOM_object/22_day_manipulating_DOM_object.md) | [Gün 24 >>](../24_Day_Project_solar_system/24_day_project_solar_system.md)

2013
Turkish/23_Day_Event_listeners/23_day_starters/design/data/countries_data.js
View File

File diff suppressed because it is too large Load Diff

BIN
Turkish/23_Day_Event_listeners/23_day_starters/design/dom_min_project_keycode_day_3.2.gif
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 434 KiB

BIN
Turkish/23_Day_Event_listeners/23_day_starters/design/dom_min_project_number_generator_day_3.1.gif
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 MiB

22
Turkish/23_Day_Event_listeners/23_day_starters/project_1/index.html
Unescape View File

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>30DaysOfJavaScript:23 Day: Number Generator </title>
</head>
<body>
<h1>Number Generator</h1>
<h2>30DaysOfJavaScript:DOM Day 2</h2>
<h3>Author: Asabeneh Yetayeh</h3>
<div class="wrapper">
</div>
<script src="./scripts/main.js"></script>
</body>
</html>

2
Turkish/23_Day_Event_listeners/23_day_starters/project_1/scripts/main.js
Unescape View File

@ -0,0 +1,2 @@
console.log(countries)
alert('Open the console and check if the countries has been loaded')

15
Turkish/23_Day_Event_listeners/23_day_starters/project_2/index.html
Unescape View File

@ -0,0 +1,15 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>30DaysOfJavaScript:23 Day: Keyboard Key </title>
</head>
<body>
<script src="./scripts/main.js"></script>
</body>
</html>

2
Turkish/23_Day_Event_listeners/23_day_starters/project_2/scripts/main.js
Unescape View File

@ -0,0 +1,2 @@
console.log(countries)
alert('Open the console and check if the countries has been loaded')

40
Turkish/24_Day_Project_solar_system/24_day_project_solar_system.md
Unescape View File

@ -0,0 +1,40 @@
<div align="center">
<h1> 30 Days Of JavaScript: Mini Project Solar System</h1>
<a class="header-badge" target="_blank" href="https://www.linkedin.com/in/asabeneh/">
<img src="https://img.shields.io/badge/style--5eba00.svg?label=LinkedIn&logo=linkedin&style=social">
</a>
<a class="header-badge" target="_blank" href="https://twitter.com/Asabeneh">
<img alt="Twitter Follow" src="https://img.shields.io/twitter/follow/asabeneh?style=social">
</a>
<sub>Author:
<a href="https://www.linkedin.com/in/asabeneh/" target="_blank">Asabeneh Yetayeh</a><br>
<sub>Çevirmen:
<a href="https://github.com/alicangunduz" target="_blank">Ali Can Gündüz</a><br>
<small> Mart 2023</small>
</sub>
</div>
[<< Gün 23](../23_Day_Event_listeners/23_day_event_listeners.md) | [Gün 25 >>](../25_Day_World_countries_data_visualization_1/25_day_world_countries_data_visualization_1.md)
![Thirty Days Of JavaScript](../images/../../images/banners/day_1_24.png)
- [Gün 24](#gün-24)
- [Egzersiz](#egzersiz)
- [Egzersiz: Seviye 1](#egzersiz-seviye-1)
# Gün 24
## Egzersiz
### Egzersiz: Seviye 1
1. Belirli bir gezegende bir nesnenin ağırlığını hesaplayan küçük bir uygulama geliştirin. Gif görüntüsü tamamlanmamıştır, başlangıç dosyasındaki videoya bakın.
![Solar System](../images/.././../images/projects/dom_min_project_solar_system_day_4.1.gif)
🎉 TEBRİKLER ! 🎉
[<< Gün 23](../23_Day_Event_listeners/23_day_event_listeners.md) | [Gün 25 >>](../25_Day_World_countries_data_visualization_1/25_day_world_countries_data_visualization_1.md)

BIN
Turkish/24_Day_Project_solar_system/24_day_starter/design/dom_min_project_solar_system_day_4.1.mp4
View File

Binary file not shown.

BIN
Turkish/24_Day_Project_solar_system/24_day_starter/images/earth.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 378 KiB

BIN
Turkish/24_Day_Project_solar_system/24_day_starter/images/galaxy.gif
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.5 MiB

BIN
Turkish/24_Day_Project_solar_system/24_day_starter/images/jupiter.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 343 KiB

BIN
Turkish/24_Day_Project_solar_system/24_day_starter/images/mars.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 364 KiB

BIN
Turkish/24_Day_Project_solar_system/24_day_starter/images/mercury.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 491 KiB

BIN
Turkish/24_Day_Project_solar_system/24_day_starter/images/moon.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 108 KiB

BIN
Turkish/24_Day_Project_solar_system/24_day_starter/images/neptune.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 258 KiB

BIN
Turkish/24_Day_Project_solar_system/24_day_starter/images/pluto.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 322 KiB

BIN
Turkish/24_Day_Project_solar_system/24_day_starter/images/saturn.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 114 KiB

BIN
Turkish/24_Day_Project_solar_system/24_day_starter/images/uranus.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 95 KiB

BIN
Turkish/24_Day_Project_solar_system/24_day_starter/images/venus.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 421 KiB

39
Turkish/24_Day_Project_solar_system/24_day_starter/index.html
Unescape View File

@ -0,0 +1,39 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Solar System: Document Object Model:30 Days Of JavaScript</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700&display=swap" rel="stylesheet">
</head>
<body>
<header>
<h1>Calculate a weight of an object on a planet</h1>
<input type="text" id="mass" placeholder="Mass in Kilogram" />
<select>
<option value='none'>--select planet-- </option>
</select>
<button>Calculate weight</button>
</header>
<main>
<div class="flex-container">
<div class="flex-item image">
<img src='./images/earth.png' class="planet-image" />
</div>
<div class="flex-item description"></div>
</div>
</main>
<script src="./scripts/main.js"></script>
</body>
</html>

2
Turkish/24_Day_Project_solar_system/24_day_starter/scripts/main.js
Unescape View File

@ -0,0 +1,2 @@
console.log(countries)
alert('Open the console and check if the countries has been loaded')

2864
Turkish/25_Day_World_countries_data_visualization_1/25_day_starter/data/countries_data.js
View File

File diff suppressed because it is too large Load Diff

2013
Turkish/25_Day_World_countries_data_visualization_1/25_day_starter/data/countries_data_old.js
View File

File diff suppressed because it is too large Load Diff

38
Turkish/25_Day_World_countries_data_visualization_1/25_day_starter/index.html
Unescape View File

@ -0,0 +1,38 @@
<!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>World Countries Data</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" />
<link rel="stylesheet" href="./css/style.css" />
</head>
<body>
<header id="countries">
<h2>World Countries Data</h2>
<p class="subtitle"></p>
<p class="feedback"></p>
</header>
<main>
<div class="wrapper">
<div class="graph-buttons">
<button class="population">Population</button>
<button class="languages">Languages</button>
</div>
<h4 class="graph-title"></h4>
<div class="graphs">
<div class="graph-wrapper" id="stat"></div>
</div>
</div>
</main>
<script src="./data/countries_data.js"></script>
<script src="./js/main.js"></script>
</body>
</html>

2
Turkish/25_Day_World_countries_data_visualization_1/25_day_starter/scripts/main.js
Unescape View File

@ -0,0 +1,2 @@
console.log(countries)
alert('Open the console and check if the countries has been loaded')

41
Turkish/25_Day_World_countries_data_visualization_1/25_day_world_countries_data_visualization_1.md
Unescape View File

@ -0,0 +1,41 @@
<div align="center">
<h1> 30 Days Of JavaScript: World Countries Data Visualization</h1>
<a class="header-badge" target="_blank" href="https://www.linkedin.com/in/asabeneh/">
<img src="https://img.shields.io/badge/style--5eba00.svg?label=LinkedIn&logo=linkedin&style=social">
</a>
<a class="header-badge" target="_blank" href="https://twitter.com/Asabeneh">
<img alt="Twitter Follow" src="https://img.shields.io/twitter/follow/asabeneh?style=social">
</a>
<sub>Author:
<a href="https://www.linkedin.com/in/asabeneh/" target="_blank">Asabeneh Yetayeh</a><br>
<sub>Çevirmen:
<a href="https://github.com/alicangunduz" target="_blank">Ali Can Gündüz</a><br>
<small> Mart 2023</small>
</sub>
</div>
[<< Gün 24](../24_Day_Project_solar_system/24_day_project_solar_system.md) | [Gün 26 >>](../26_Day_World_countries_data_visualization_2/26_day_world_countries_data_visualization_2.md)
![Thirty Days Of JavaScript](../images/../../images/banners/day_1_25.png)
- [Day 25](#day-25)
- [Exercises](#exercises)
- [Exercise: Level 1](#exercise-level-1)
# Gün 25
## Egzersiz
### Egzersiz: Seviye 1
1. Dünya'da en çok nüfusa sahip on ülkeyi ve en çok konuşulan on dilin görselleştirilmesi için DOM (HTML, CSS, JS) kullanarak küçük bir uygulama geliştirin.
![Bar Graph](../images/.././../images/projects/dom_min_project_bar_graph_day_5.1.gif)
![Bar Graph](../images/.././../images/projects/dom_min_project_bar_graph_day_5.1.png)
🎉 TEBRİKLER ! 🎉
[<< Gün 24](../24_Day_Project_soloar_system/24_day_project_soloar_system.md) | [Gün 26 >>](../26_Day_World_countries_data_visualization_2/26_day_world_countries_data_visualization_2.md)

195
Turkish/26_Day_World_countries_data_visualization_2/26_day_starter/data/countries.js
Unescape View File

@ -0,0 +1,195 @@
const countries = [
'Afghanistan',
'Albania',
'Algeria',
'Andorra',
'Angola',
'Antigua and Barbuda',
'Argentina',
'Armenia',
'Australia',
'Austria',
'Azerbaijan',
'Bahamas',
'Bahrain',
'Bangladesh',
'Barbados',
'Belarus',
'Belgium',
'Belize',
'Benin',
'Bhutan',
'Bolivia',
'Bosnia and Herzegovina',
'Botswana',
'Brazil',
'Brunei',
'Bulgaria',
'Burkina Faso',
'Burundi',
'Cambodia',
'Cameroon',
'Canada',
'Cape Verde',
'Central African Republic',
'Chad',
'Chile',
'China',
'Colombi',
'Comoros',
'Congo (Brazzaville)',
'Congo',
'Costa Rica',
"Cote d'Ivoire",
'Croatia',
'Cuba',
'Cyprus',
'Czech Republic',
'Denmark',
'Djibouti',
'Dominica',
'Dominican Republic',
'East Timor (Timor Timur)',
'Ecuador',
'Egypt',
'El Salvador',
'Equatorial Guinea',
'Eritrea',
'Estonia',
'Ethiopia',
'Fiji',
'Finland',
'France',
'Gabon',
'Gambia, The',
'Georgia',
'Germany',
'Ghana',
'Greece',
'Grenada',
'Guatemala',
'Guinea',
'Guinea-Bissau',
'Guyana',
'Haiti',
'Honduras',
'Hungary',
'Iceland',
'India',
'Indonesia',
'Iran',
'Iraq',
'Ireland',
'Israel',
'Italy',
'Jamaica',
'Japan',
'Jordan',
'Kazakhstan',
'Kenya',
'Kiribati',
'Korea, North',
'Korea, South',
'Kuwait',
'Kyrgyzstan',
'Laos',
'Latvia',
'Lebanon',
'Lesotho',
'Liberia',
'Libya',
'Liechtenstein',
'Lithuania',
'Luxembourg',
'Macedonia',
'Madagascar',
'Malawi',
'Malaysia',
'Maldives',
'Mali',
'Malta',
'Marshall Islands',
'Mauritania',
'Mauritius',
'Mexico',
'Micronesia',
'Moldova',
'Monaco',
'Mongolia',
'Morocco',
'Mozambique',
'Myanmar',
'Namibia',
'Nauru',
'Nepal',
'Netherlands',
'New Zealand',
'Nicaragua',
'Niger',
'Nigeria',
'Norway',
'Oman',
'Pakistan',
'Palau',
'Panama',
'Papua New Guinea',
'Paraguay',
'Peru',
'Philippines',
'Poland',
'Portugal',
'Qatar',
'Romania',
'Russia',
'Rwanda',
'Saint Kitts and Nevis',
'Saint Lucia',
'Saint Vincent',
'Samoa',
'San Marino',
'Sao Tome and Principe',
'Saudi Arabia',
'Senegal',
'Serbia and Montenegro',
'Seychelles',
'Sierra Leone',
'Singapore',
'Slovakia',
'Slovenia',
'Solomon Islands',
'Somalia',
'South Africa',
'Spain',
'Sri Lanka',
'Sudan',
'Suriname',
'Swaziland',
'Sweden',
'Switzerland',
'Syria',
'Taiwan',
'Tajikistan',
'Tanzania',
'Thailand',
'Togo',
'Tonga',
'Trinidad and Tobago',
'Tunisia',
'Turkey',
'Turkmenistan',
'Tuvalu',
'Uganda',
'Ukraine',
'United Arab Emirates',
'United Kingdom',
'United States',
'Uruguay',
'Uzbekistan',
'Vanuatu',
'Vatican City',
'Venezuela',
'Vietnam',
'Yemen',
'Zambia',
'Zimbabwe'
]

BIN
Turkish/26_Day_World_countries_data_visualization_2/26_day_starter/images/globe-2.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.3 MiB

BIN
Turkish/26_Day_World_countries_data_visualization_2/26_day_starter/images/map_image.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 30 KiB

17
Turkish/26_Day_World_countries_data_visualization_2/26_day_starter/index.html
Unescape View File

@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>30DaysOfJavaScript:11 Day </title>
</head>
<body>
<h1>30DaysOfJavaScript:11 Day</h1>
<h2>Destructuring and Spread</h2>
<script src="./data/countries.js"></script>
<script src="./scripts/main.js"></script>
</body>
</html>

2
Turkish/26_Day_World_countries_data_visualization_2/26_day_starter/scripts/main.js
Unescape View File

@ -0,0 +1,2 @@
console.log(countries)
alert('Open the console and check if the countries has been loaded')

39
Turkish/26_Day_World_countries_data_visualization_2/26_day_world_countries_data_visualization_2.md
Unescape View File

@ -0,0 +1,39 @@
<div align="center">
<h1> 30 Days Of JavaScript: World Countries Data Visualization 2 </h1>
<a class="header-badge" target="_blank" href="https://www.linkedin.com/in/asabeneh/">
<img src="https://img.shields.io/badge/style--5eba00.svg?label=LinkedIn&logo=linkedin&style=social">
</a>
<a class="header-badge" target="_blank" href="https://twitter.com/Asabeneh">
<img alt="Twitter Follow" src="https://img.shields.io/twitter/follow/asabeneh?style=social">
</a>
<sub>Author:
<a href="https://www.linkedin.com/in/asabeneh/" target="_blank">Asabeneh Yetayeh</a><br>
<sub>Çevirmen:
<a href="https://github.com/alicangunduz" target="_blank">Ali Can Gündüz</a><br>
<small> Mart 2023</small>
</sub>
</div>
[<< Gün 25](../25_Day_World_countries_data_visualization_1/25_day_world_countries_data_visualization_1.md) | [Gün 27 >>](../27_Day_Mini_project_portfolio/27_day_mini_project_portfolio.md)
![Thirty Days Of JavaScript](../images/../../images/banners/day_1_26.png)
- [Gün 26](#gün-26)
- [Egzersiz](#egzersiz)
- [Egzersiz: Seviye 1](#egzersiz-seviye-1)
# Gün 26
## Egzersiz
### Egzersiz: Seviye 1
1. Ülkeler dizisini aşağıdaki gibi görselleştirin:
![Motivation](../images/.././../images/projects/dom_mini_project_countries_day_6.1.gif)
🎉 TEBRİKLER ! 🎉
[<< Gün 25](../25_Day_World_countries_data_visualization_1/25_day_world_countries_data_visualization_1.md) | [Gün 27 >>](../27_Day_Mini_project_portfolio/27_day_mini_project_portfolio.md)

39
Turkish/27_Day_Mini_project_portfolio/27_day_mini_project_portfolio.md
Unescape View File

@ -0,0 +1,39 @@
<div align="center">
<h1> 30 Days Of JavaScript: Portfolio</h1>
<a class="header-badge" target="_blank" href="https://www.linkedin.com/in/asabeneh/">
<img src="https://img.shields.io/badge/style--5eba00.svg?label=LinkedIn&logo=linkedin&style=social">
</a>
<a class="header-badge" target="_blank" href="https://twitter.com/Asabeneh">
<img alt="Twitter Follow" src="https://img.shields.io/twitter/follow/asabeneh?style=social">
</a>
<sub>Author:
<a href="https://www.linkedin.com/in/asabeneh/" target="_blank">Asabeneh Yetayeh</a><br>
<sub>Çevirmen:
<a href="https://github.com/alicangunduz" target="_blank">Ali Can Gündüz</a><br>
<small> Mart 2023</small>
</sub>
</div>
[<< Gün 26](../26_Day_World_countries_data_visualization_2/26_day_world_countries_data_visualization_2.md) | [Gün 28 >>](../28_Day_Mini_project_leaderboard/28_day_mini_project_leaderboard.md)
![Thirty Days Of JavaScript](../images/../../images/banners/day_1_27.png)
- [Gün 27](#gün-27)
- [Egzersiz](#egzersiz)
- [Egzersiz: Seviye 1](#egzersiz-seviye-1)
# Gün 27
## Egzersiz
### Egzersiz: Seviye 1
1. HTML, CSS ve JavaScript kullanarak aşağıdakileri oluşturun.
![Slider](../images/.././../images/projects/dom_mini_project_slider_day_7.1.gif)
🎉 TEBRİKLER ! 🎉
[<< Gün 26](../26_Day_World_countries_data_visualization_2/26_day_world_countries_data_visualization_2.md) | [Gün 28 >>](../28_Day_Mini_project_leaderboard/28_day_mini_project_leaderboard.md)

2864
Turkish/27_Day_Mini_project_portfolio/27_day_starter/data/countries_data.js
View File

File diff suppressed because it is too large Load Diff

2013
Turkish/27_Day_Mini_project_portfolio/27_day_starter/data/countries_data_old.js
View File

File diff suppressed because it is too large Load Diff

17
Turkish/27_Day_Mini_project_portfolio/27_day_starter/index.html
Unescape View File

@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>30DaysOfJavaScript:11 Day </title>
</head>
<body>
<h1>30DaysOfJavaScript:11 Day</h1>
<h2>Destructuring and Spread</h2>
<script src="./data/countries_data.js"></script>
<script src="./scripts/main.js"></script>
</body>
</html>

0
Turkish/27_Day_Mini_project_portfolio/27_day_starter/scripts/main.js
Unescape View File

39
Turkish/28_Day_Mini_project_leaderboard/28_day_mini_project_leaderboard.md
Unescape View File

@ -0,0 +1,39 @@
<div align="center">
<h1> 30 Days Of JavaScript</h1>
<a class="header-badge" target="_blank" href="https://www.linkedin.com/in/asabeneh/">
<img src="https://img.shields.io/badge/style--5eba00.svg?label=LinkedIn&logo=linkedin&style=social">
</a>
<a class="header-badge" target="_blank" href="https://twitter.com/Asabeneh">
<img alt="Twitter Follow" src="https://img.shields.io/twitter/follow/asabeneh?style=social">
</a>
<sub>Author:
<a href="https://www.linkedin.com/in/asabeneh/" target="_blank">Asabeneh Yetayeh</a><br>
<sub>Çevirmen:
<a href="https://github.com/alicangunduz" target="_blank">Ali Can Gündüz</a><br>
<small> Mart 2023</small>
</sub>
</div>
[<< Gün 27](../27_Day_Mini_project_portfolio/27_day_mini_project_portfolio.md) | [Gün 29>>](../29_Day_Mini_project_animating_characters/29_day_mini_project_animating_characters.md)
![Thirty Days Of JavaScript](../images/../../images/banners/day_1_28.png)
- [Day 28](#day-28)
- [Exercises](#exercises)
- [Exercise: Level 1](#exercise-level-1)
# Gün 28
## Egzersiz
### Egzersiz: Seviye 1
1. HTML, CSS ve JavaScript kullanarak aşağıdakini oluşturun.
![Slider](../images/.././../images/projects/dom_mini_project_leaderboard_day_8.1.gif)
🎉 TEBRİKLER ! 🎉
[<< Gün 27](../27_Day_Mini_project_portfolio/27_day_mini_project_portfolio.md) | [Gün 29>>](../29_Day_Mini_project_animating_characters/29_day_mini_project_animating_characters.md)

2013
Turkish/28_Day_Mini_project_leaderboard/28_day_starter/data/countries_data.js
View File

File diff suppressed because it is too large Load Diff

17
Turkish/28_Day_Mini_project_leaderboard/28_day_starter/index.html
Unescape View File

@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>30DaysOfJavaScript:11 Day </title>
</head>
<body>
<h1>30DaysOfJavaScript:11 Day</h1>
<h2>Destructuring and Spread</h2>
<script src="./data/countries_data.js"></script>
<script src="./scripts/main.js"></script>
</body>
</html>

0
Turkish/28_Day_Mini_project_leaderboard/28_day_starter/scripts/main.js
Unescape View File

40
Turkish/29_Day_Mini_project_animating_characters/29_day_mini_project_animating_characters.md
Unescape View File

@ -0,0 +1,40 @@
<div align="center">
<h1> 30 Days Of JavaScript: Animating Characters</h1>
<a class="header-badge" target="_blank" href="https://www.linkedin.com/in/asabeneh/">
<img src="https://img.shields.io/badge/style--5eba00.svg?label=LinkedIn&logo=linkedin&style=social">
</a>
<a class="header-badge" target="_blank" href="https://twitter.com/Asabeneh">
<img alt="Twitter Follow" src="https://img.shields.io/twitter/follow/asabeneh?style=social">
</a>
<sub>Author:
<a href="https://www.linkedin.com/in/asabeneh/" target="_blank">Asabeneh Yetayeh</a><br>
<sub>Çevirmen:
<a href="https://github.com/alicangunduz" target="_blank">Ali Can Gündüz</a><br>
<small> Mart 2023</small>
</sub>
</div>
[<< Gün 28](../28_Day_Mini_project_leaderboard/28_day_mini_project_leaderboard.md) | [Gün 30>>](../30_Day_Mini_project_final/30_day_mini_project_final.md)
![Thirty Days Of JavaScript](../images/../../images/banners/day_1_29.png)
- [Gün 29](#gün-29)
- [Egzersiz](#egzersiz)
- [Egzersiz: Seviye 1](#egzersiz-seviye-1)
# Gün 29
## Egzersiz
### Egzersiz: Seviye 1
1. Şu animasyonu (HTML, CSS, JS) kullanarak oluşturun.
![Slider](../images/.././../images/projects/dom_min_project_30DaysOfJavaScript_color_changing_day_9.1.gif)
🎉 TEBRİKLER ! 🎉
[<< Gün 28](../28_Day_Mini_project_leaderboard/28_day_mini_project_leaderboard.md) | [Gün 30>>](../30_Day_Mini_project_final/30_day_mini_project_final.md)

BIN
Turkish/29_Day_Mini_project_animating_characters/29_day_starters/project_1/design/dom_min_project_30DaysOfJavaScript_color_changing_day_9.1.gif
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.7 MiB

26
Turkish/29_Day_Mini_project_animating_characters/29_day_starters/project_1/index.html
Unescape View File

@ -0,0 +1,26 @@
<!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">
<link
href="https://fonts.googleapis.com/css?family=Aldrich|Lato:300,400,700|Montserrat:300,400,500|Nunito:300,400,600|Oswald|Raleway+Dots|Raleway:300,400|Roboto:300,400,500&display=swap"
rel="stylesheet">
<script src="https://kit.fontawesome.com/ce3e7ed90f.js" crossorigin="anonymous"></script>
<title>30Days Of JavaScript: 29 Project 1</title>
</head>
<body>
<div>
</div>
<script src="./scripts/main.js"></script>
</body>
</html>

2
Turkish/29_Day_Mini_project_animating_characters/29_day_starters/project_1/scripts/main.js
Unescape View File

@ -0,0 +1,2 @@
console.log(countries)
alert('Open the console and check if the countries has been loaded')

2013
Turkish/29_Day_Mini_project_animating_characters/29_day_starters/project_2/data/countries_data.js
View File

File diff suppressed because it is too large Load Diff

17
Turkish/29_Day_Mini_project_animating_characters/29_day_starters/project_2/index.html
Unescape View File

@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>30DaysOfJavaScript: Day 29 - Project 2 </title>
</head>
<body>
<script src="./data/countries_data.js"></script>
<script src="./scripts/main.js"></script>
</body>
</html>

2
Turkish/29_Day_Mini_project_animating_characters/29_day_starters/project_2/scripts/main.js
Unescape View File

@ -0,0 +1,2 @@
console.log(countries)
alert('Open the console and check if the countries has been loaded')

71
Turkish/30_Day_Mini_project_final/30_day_mini_project_final.md
Unescape View File

@ -0,0 +1,71 @@
<div align="center">
<h1> 30 Days Of JavaScript: Final Projects</h1>
<a class="header-badge" target="_blank" href="https://www.linkedin.com/in/asabeneh/">
<img src="https://img.shields.io/badge/style--5eba00.svg?label=LinkedIn&logo=linkedin&style=social">
</a>
<a class="header-badge" target="_blank" href="https://twitter.com/Asabeneh">
<img alt="Twitter Follow" src="https://img.shields.io/twitter/follow/asabeneh?style=social">
</a>
<sub>Author:
<a href="https://www.linkedin.com/in/asabeneh/" target="_blank">Asabeneh Yetayeh</a><br>
<sub>Çevirmen:
<a href="https://github.com/alicangunduz" target="_blank">Ali Can Gündüz</a><br>
<small> Mart 2023</small>
</sub>
</div>
</div>
<div>
</div>
<div>
<small>Support the <strong>author</strong> to create more educational materials</small> <br />
<a href = "https://www.paypal.me/asabeneh"><img src='../images/.././../images/paypal_lg.png' alt='Paypal Logo' style="width:10%"/></a>
</div>
[<< Gün 29](../29_Day_Mini_project_animating_characters/29_day_mini_project_animating_characters.md)
![Thirty Days Of JavaScript](../images/../../images/banners/day_1_30.png)
- [Gün 30](#gün-30)
- [Egzersiz](#egzersiz)
- [Egzersiz: Seviye 1](#egzersiz-seviye-1)
- [Mükemmelsin](#mükemmelsin)
- [Testimony](#testimony)
- [Support](#support)
# Gün 30
## Egzersiz
### Egzersiz: Seviye 1
1. (HTML, CSS, JS) kullanarak aşağıdaki animasyonu oluşturun
![Countries data](../images/.././../images/projects/dom_mini_project_countries_object_day_10.1.gif)
2. Regex kullanarak aşağıdaki formu doğrulayın.
![form validation](../images/.././../images/projects/dom_mini_project_form_validation_day_10.2.1.png)
![form validation](../images/.././../images/projects/dom_mini_project_form_validation_day_10.2.png)
## Mükemmelsin
🌕 Harika bir başarıya imza attınız! Yücelik yolculuğunuzda sona geldiniz ve yüksek bir seviyeye ulaştınız. Artık öncekinden daha büyük ve daha güçlüsünüz. Bu seviyeye gelmenin ne kadar zor olduğunu biliyorum ve siz bu noktaya ulaşarak gerçek bir kahraman oldunuz. Şimdi ise başarınızı sevdiklerinizle kutlama zamanı geldi! Sizden başka zorluklarla dolu yeni bir yolculukta görüşmek üzere.
## Testimony
Now it is time support the author and express your thoughts about the Author and 30DaysOfJavaScript. You can leave your testimonial on this [link](https://testimonify.herokuapp.com/)
## Destek
You can support the author to produce more educational materials
[![paypal](../images/../../images/paypal_lg.png)](https://www.paypal.me/asabeneh)
![Congratulations](../images/.././../images/projects/congratulations.gif)
[<< Day 29](../29_Day_Mini_project_animating_characters/29_day_mini_project_animating_characters.md)

2864
Turkish/30_Day_Mini_project_final/30_day_starters/project_1/data/countries_data.js
View File

File diff suppressed because it is too large Load Diff

2013
Turkish/30_Day_Mini_project_final/30_day_starters/project_1/data/countries_data_old.js
View File

File diff suppressed because it is too large Load Diff

16
Turkish/30_Day_Mini_project_final/30_day_starters/project_1/index.html
Unescape View File

@ -0,0 +1,16 @@
<!DOCTYPE html>
<html>
<head>
<title>30DaysOfJavaScript:30 </title>
</head>
<body>
<script src="./data/countries_data.js"></script>
<script src="./scripts/main.js"></script>
</body>
</html>

0
Turkish/30_Day_Mini_project_final/30_day_starters/project_1/scripts/main.js
Unescape View File

Write Preview
Loading…
Cancel
Save