Merge pull request #730 from alicangunduz/master

Added 23-30 day
2 years ago · 96397eba66
parent 7fc6e874ee b2e022e477
commit 96397eba66
55 changed files with 21749 additions and 0 deletions
--- a/Turkish/23_Day_Event_listeners/23_day_event_listeners.md
+++ b/Turkish/23_Day_Event_listeners/23_day_event_listeners.md
@ -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)
--- a/Turkish/23_Day_Event_listeners/23_day_starters/design/data/countries_data.js
+++ b/Turkish/23_Day_Event_listeners/23_day_starters/design/data/countries_data.js
--- a/Turkish/23_Day_Event_listeners/23_day_starters/design/dom_min_project_keycode_day_3.2.gif
+++ b/Turkish/23_Day_Event_listeners/23_day_starters/design/dom_min_project_keycode_day_3.2.gif
--- a/Turkish/23_Day_Event_listeners/23_day_starters/design/dom_min_project_number_generator_day_3.1.gif
+++ b/Turkish/23_Day_Event_listeners/23_day_starters/design/dom_min_project_number_generator_day_3.1.gif
--- a/Turkish/23_Day_Event_listeners/23_day_starters/project_1/index.html
+++ b/Turkish/23_Day_Event_listeners/23_day_starters/project_1/index.html
@ -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>
--- a/Turkish/23_Day_Event_listeners/23_day_starters/project_1/scripts/main.js
+++ b/Turkish/23_Day_Event_listeners/23_day_starters/project_1/scripts/main.js
@ -0,0 +1,2 @@
+console.log(countries)
+alert('Open the console and check if the countries has been loaded')
--- a/Turkish/23_Day_Event_listeners/23_day_starters/project_2/index.html
+++ b/Turkish/23_Day_Event_listeners/23_day_starters/project_2/index.html
@ -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>
--- a/Turkish/23_Day_Event_listeners/23_day_starters/project_2/scripts/main.js
+++ b/Turkish/23_Day_Event_listeners/23_day_starters/project_2/scripts/main.js
@ -0,0 +1,2 @@
+console.log(countries)
+alert('Open the console and check if the countries has been loaded')
--- a/Turkish/24_Day_Project_solar_system/24_day_project_solar_system.md
+++ b/Turkish/24_Day_Project_solar_system/24_day_project_solar_system.md
@ -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)
+
--- a/Turkish/24_Day_Project_solar_system/24_day_starter/design/dom_min_project_solar_system_day_4.1.mp4
+++ b/Turkish/24_Day_Project_solar_system/24_day_starter/design/dom_min_project_solar_system_day_4.1.mp4
--- a/Turkish/24_Day_Project_solar_system/24_day_starter/images/earth.png
+++ b/Turkish/24_Day_Project_solar_system/24_day_starter/images/earth.png
--- a/Turkish/24_Day_Project_solar_system/24_day_starter/images/galaxy.gif
+++ b/Turkish/24_Day_Project_solar_system/24_day_starter/images/galaxy.gif
--- a/Turkish/24_Day_Project_solar_system/24_day_starter/images/jupiter.png
+++ b/Turkish/24_Day_Project_solar_system/24_day_starter/images/jupiter.png
--- a/Turkish/24_Day_Project_solar_system/24_day_starter/images/mars.png
+++ b/Turkish/24_Day_Project_solar_system/24_day_starter/images/mars.png
--- a/Turkish/24_Day_Project_solar_system/24_day_starter/images/mercury.png
+++ b/Turkish/24_Day_Project_solar_system/24_day_starter/images/mercury.png
--- a/Turkish/24_Day_Project_solar_system/24_day_starter/images/moon.png
+++ b/Turkish/24_Day_Project_solar_system/24_day_starter/images/moon.png
--- a/Turkish/24_Day_Project_solar_system/24_day_starter/images/neptune.png
+++ b/Turkish/24_Day_Project_solar_system/24_day_starter/images/neptune.png
--- a/Turkish/24_Day_Project_solar_system/24_day_starter/images/pluto.png
+++ b/Turkish/24_Day_Project_solar_system/24_day_starter/images/pluto.png
--- a/Turkish/24_Day_Project_solar_system/24_day_starter/images/saturn.png
+++ b/Turkish/24_Day_Project_solar_system/24_day_starter/images/saturn.png
--- a/Turkish/24_Day_Project_solar_system/24_day_starter/images/uranus.png
+++ b/Turkish/24_Day_Project_solar_system/24_day_starter/images/uranus.png
--- a/Turkish/24_Day_Project_solar_system/24_day_starter/images/venus.png
+++ b/Turkish/24_Day_Project_solar_system/24_day_starter/images/venus.png
--- a/Turkish/24_Day_Project_solar_system/24_day_starter/index.html
+++ b/Turkish/24_Day_Project_solar_system/24_day_starter/index.html
@ -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>
--- a/Turkish/24_Day_Project_solar_system/24_day_starter/scripts/main.js
+++ b/Turkish/24_Day_Project_solar_system/24_day_starter/scripts/main.js
@ -0,0 +1,2 @@
+console.log(countries)
+alert('Open the console and check if the countries has been loaded')
--- a/Turkish/25_Day_World_countries_data_visualization_1/25_day_starter/data/countries_data.js
+++ b/Turkish/25_Day_World_countries_data_visualization_1/25_day_starter/data/countries_data.js
--- a/Turkish/25_Day_World_countries_data_visualization_1/25_day_starter/data/countries_data_old.js
+++ b/Turkish/25_Day_World_countries_data_visualization_1/25_day_starter/data/countries_data_old.js
--- a/Turkish/25_Day_World_countries_data_visualization_1/25_day_starter/index.html
+++ b/Turkish/25_Day_World_countries_data_visualization_1/25_day_starter/index.html
@ -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>
--- a/Turkish/25_Day_World_countries_data_visualization_1/25_day_starter/scripts/main.js
+++ b/Turkish/25_Day_World_countries_data_visualization_1/25_day_starter/scripts/main.js
@ -0,0 +1,2 @@
+console.log(countries)
+alert('Open the console and check if the countries has been loaded')
--- a/Turkish/25_Day_World_countries_data_visualization_1/25_day_world_countries_data_visualization_1.md
+++ b/Turkish/25_Day_World_countries_data_visualization_1/25_day_world_countries_data_visualization_1.md
@ -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)
--- a/Turkish/26_Day_World_countries_data_visualization_2/26_day_starter/data/countries.js
+++ b/Turkish/26_Day_World_countries_data_visualization_2/26_day_starter/data/countries.js
@ -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'
+]
--- a/Turkish/26_Day_World_countries_data_visualization_2/26_day_starter/images/globe-2.jpg
+++ b/Turkish/26_Day_World_countries_data_visualization_2/26_day_starter/images/globe-2.jpg
--- a/Turkish/26_Day_World_countries_data_visualization_2/26_day_starter/images/map_image.jpg
+++ b/Turkish/26_Day_World_countries_data_visualization_2/26_day_starter/images/map_image.jpg
--- a/Turkish/26_Day_World_countries_data_visualization_2/26_day_starter/index.html
+++ b/Turkish/26_Day_World_countries_data_visualization_2/26_day_starter/index.html
@ -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>
--- a/Turkish/26_Day_World_countries_data_visualization_2/26_day_starter/scripts/main.js
+++ b/Turkish/26_Day_World_countries_data_visualization_2/26_day_starter/scripts/main.js
@ -0,0 +1,2 @@
+console.log(countries)
+alert('Open the console and check if the countries has been loaded')
--- a/Turkish/26_Day_World_countries_data_visualization_2/26_day_world_countries_data_visualization_2.md
+++ b/Turkish/26_Day_World_countries_data_visualization_2/26_day_world_countries_data_visualization_2.md
@ -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)
--- a/Turkish/27_Day_Mini_project_portfolio/27_day_mini_project_portfolio.md
+++ b/Turkish/27_Day_Mini_project_portfolio/27_day_mini_project_portfolio.md
@ -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)
--- a/Turkish/27_Day_Mini_project_portfolio/27_day_starter/data/countries_data.js
+++ b/Turkish/27_Day_Mini_project_portfolio/27_day_starter/data/countries_data.js
--- a/Turkish/27_Day_Mini_project_portfolio/27_day_starter/data/countries_data_old.js
+++ b/Turkish/27_Day_Mini_project_portfolio/27_day_starter/data/countries_data_old.js
--- a/Turkish/27_Day_Mini_project_portfolio/27_day_starter/index.html
+++ b/Turkish/27_Day_Mini_project_portfolio/27_day_starter/index.html
@ -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>
--- a/Turkish/27_Day_Mini_project_portfolio/27_day_starter/scripts/main.js
+++ b/Turkish/27_Day_Mini_project_portfolio/27_day_starter/scripts/main.js
--- a/Turkish/28_Day_Mini_project_leaderboard/28_day_mini_project_leaderboard.md
+++ b/Turkish/28_Day_Mini_project_leaderboard/28_day_mini_project_leaderboard.md
@ -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)
--- a/Turkish/28_Day_Mini_project_leaderboard/28_day_starter/data/countries_data.js
+++ b/Turkish/28_Day_Mini_project_leaderboard/28_day_starter/data/countries_data.js
--- a/Turkish/28_Day_Mini_project_leaderboard/28_day_starter/index.html
+++ b/Turkish/28_Day_Mini_project_leaderboard/28_day_starter/index.html
@ -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>
--- a/Turkish/28_Day_Mini_project_leaderboard/28_day_starter/scripts/main.js
+++ b/Turkish/28_Day_Mini_project_leaderboard/28_day_starter/scripts/main.js
--- a/Turkish/29_Day_Mini_project_animating_characters/29_day_mini_project_animating_characters.md
+++ b/Turkish/29_Day_Mini_project_animating_characters/29_day_mini_project_animating_characters.md
@ -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)
--- a/Turkish/29_Day_Mini_project_animating_characters/29_day_starters/project_1/design/dom_min_project_30DaysOfJavaScript_color_changing_day_9.1.gif
+++ b/Turkish/29_Day_Mini_project_animating_characters/29_day_starters/project_1/design/dom_min_project_30DaysOfJavaScript_color_changing_day_9.1.gif
--- a/Turkish/29_Day_Mini_project_animating_characters/29_day_starters/project_1/index.html
+++ b/Turkish/29_Day_Mini_project_animating_characters/29_day_starters/project_1/index.html
@ -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>
--- a/Turkish/29_Day_Mini_project_animating_characters/29_day_starters/project_1/scripts/main.js
+++ b/Turkish/29_Day_Mini_project_animating_characters/29_day_starters/project_1/scripts/main.js
@ -0,0 +1,2 @@
+console.log(countries)
+alert('Open the console and check if the countries has been loaded')
--- a/Turkish/29_Day_Mini_project_animating_characters/29_day_starters/project_2/data/countries_data.js
+++ b/Turkish/29_Day_Mini_project_animating_characters/29_day_starters/project_2/data/countries_data.js
--- a/Turkish/29_Day_Mini_project_animating_characters/29_day_starters/project_2/index.html
+++ b/Turkish/29_Day_Mini_project_animating_characters/29_day_starters/project_2/index.html
@ -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>
--- a/Turkish/29_Day_Mini_project_animating_characters/29_day_starters/project_2/scripts/main.js
+++ b/Turkish/29_Day_Mini_project_animating_characters/29_day_starters/project_2/scripts/main.js
@ -0,0 +1,2 @@
+console.log(countries)
+alert('Open the console and check if the countries has been loaded')
--- a/Turkish/30_Day_Mini_project_final/30_day_mini_project_final.md
+++ b/Turkish/30_Day_Mini_project_final/30_day_mini_project_final.md
@ -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)  
--- a/Turkish/30_Day_Mini_project_final/30_day_starters/project_1/data/countries_data.js
+++ b/Turkish/30_Day_Mini_project_final/30_day_starters/project_1/data/countries_data.js
--- a/Turkish/30_Day_Mini_project_final/30_day_starters/project_1/data/countries_data_old.js
+++ b/Turkish/30_Day_Mini_project_final/30_day_starters/project_1/data/countries_data_old.js
--- a/Turkish/30_Day_Mini_project_final/30_day_starters/project_1/index.html
+++ b/Turkish/30_Day_Mini_project_final/30_day_starters/project_1/index.html
@ -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>
--- a/Turkish/30_Day_Mini_project_final/30_day_starters/project_1/scripts/main.js
+++ b/Turkish/30_Day_Mini_project_final/30_day_starters/project_1/scripts/main.js