Added 23-30 day range for the Turkish translation of the tutorial. With this change, I added the 23-30 day range to the Turkish translation of the tutorial.pull/730/head
After Width: | Height: | Size: 434 KiB |
After Width: | Height: | Size: 3.0 MiB |
@ -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>
|
@ -0,0 +1,2 @@
|
||||
console.log(countries)
|
||||
alert('Open the console and check if the countries has been loaded')
|
@ -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>
|
@ -0,0 +1,2 @@
|
||||
console.log(countries)
|
||||
alert('Open the console and check if the countries has been loaded')
|
After Width: | Height: | Size: 378 KiB |
After Width: | Height: | Size: 4.5 MiB |
After Width: | Height: | Size: 343 KiB |
After Width: | Height: | Size: 364 KiB |
After Width: | Height: | Size: 491 KiB |
After Width: | Height: | Size: 108 KiB |
After Width: | Height: | Size: 258 KiB |
After Width: | Height: | Size: 322 KiB |
After Width: | Height: | Size: 114 KiB |
After Width: | Height: | Size: 95 KiB |
After Width: | Height: | Size: 421 KiB |
@ -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>
|
@ -0,0 +1,2 @@
|
||||
console.log(countries)
|
||||
alert('Open the console and check if the countries has been loaded')
|
@ -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>
|
@ -0,0 +1,2 @@
|
||||
console.log(countries)
|
||||
alert('Open the console and check if the countries has been loaded')
|
@ -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)
|
||||
|
||||

|
||||
|
||||
- [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.
|
||||
|
||||

|
||||
|
||||

|
||||
|
||||
🎉 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)
|
@ -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'
|
||||
]
|
After Width: | Height: | Size: 6.3 MiB |
After Width: | Height: | Size: 30 KiB |
@ -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>
|
@ -0,0 +1,2 @@
|
||||
console.log(countries)
|
||||
alert('Open the console and check if the countries has been loaded')
|
@ -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,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,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)
|
||||
|
||||

|
||||
|
||||
- [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.
|
||||
|
||||

|
||||
|
||||
|
||||
🎉 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)
|
After Width: | Height: | Size: 3.7 MiB |
@ -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>
|
@ -0,0 +1,2 @@
|
||||
console.log(countries)
|
||||
alert('Open the console and check if the countries has been loaded')
|
@ -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>
|
@ -0,0 +1,2 @@
|
||||
console.log(countries)
|
||||
alert('Open the console and check if the countries has been loaded')
|
@ -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>
|