Merge pull request #643 from alicangunduz/master

addition of day 22
pull/648/head
Asabeneh 2 years ago committed by GitHub
commit 8430e9ff3c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -15,7 +15,7 @@
</sub>
</div>
[<< Day 20](../20_Day_Writing_clean_codes/20_day_writing_clean_codes.md) | [Day 22 >>](../22_Day_Manipulating_DOM_object/22_day_manipulating_DOM_object.md)
[<< Gün 20](../20_Day_Writing_clean_codes/20_day_writing_clean_codes.md) | [Gün 22 >>](../22_Day_Manipulating_DOM_object/22_day_manipulating_DOM_object.md)
![Thirty Days Of JavaScript](../images/21_Day_DOM/../../../images/banners/day_1_21.png)
@ -406,4 +406,4 @@ Fark etmişsinizdir, JavaScript içinde kullandığımızda css özellikleri cam
🎉 TEBRİKLER ! 🎉
[<< Day 20](../Turkish/20_Day_Writing_clean_codes/20_day_writing_clean_codes.md) | [Day 22 >>](../Turkish/22_Day_Manipulating_DOM_object/22_day_manipulating_DOM_object.md)
[<< Gün 20](../Turkish/../20_Day_Writing_clean_codes/20_Day_writing_clean_codes.md) | [Gün 22 >>](../Turkish/../22_Day_Manipulating_DOM_object/22_day_manipulating_DOM_object.md)

@ -0,0 +1,237 @@
<div align="center">
<h1> 30 Days Of JavaScript: Manipulating DOM Object</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> Ocak 2023</small>
</sub>
</div>
[<< Gün 21](../21_Day_DOM/21_day_dom.md) | [Gün 23 >>](../23_Day_Event_listeners/23_day_event_listeners.md)
![Thirty Days Of JavaScript](../images/21_Day_DOM/../../../images/banners/day_1_21.png)
- [Gün 22](#gün-22)
- [DOM(Document Object Model)-Gün 2](#domdocument-object-model-gün-2)
- [Element Oluşturma](#element-oluşturma)
- [Element oluşturma](#element-oluşturma-1)
- [Bir üst elemente child ekleme](#bir-üst-elemente-child-ekleme)
- [Bir üst ebeveyn(kapsar element) bir child elementi kaldırma](#bir-üst-ebeveynkapsar-element-bir-child-elementi-kaldırma)
- [Yukarıdaki kod parçacığı tüm child elementleri temizledi.](#yukarıdaki-kod-parçacığı-tüm-child-elementleri-temizledi)
- [Egzersizler](#egzersizler)
- [Egzersiz: Level 1](#egzersiz-level-1)
- [Egzersiz: Level 2](#egzersiz-level-2)
- [Egzersiz: Level 3](#egzersiz-level-3)
# Gün 22
## DOM(Document Object Model)-Gün 2
### Element Oluşturma
HTML element oluşturmak için etiket adını kullanırız. JavaScript kullanarak HTML element oluşturmak oldukça basittir . _document.createElement()_ metodunu kullanırız. Bu metod bir HTML element etiket adını string olarak alır.
```js
// syntax
document.createElement('tagname')
```
```html
<!DOCTYPE html>
<html>
<head>
<title>Document Object Model:30 Days Of JavaScript</title>
</head>
<body>
<script>
let title = document.createElement('h1')
title.className = 'title'
title.style.fontSize = '24px'
title.textContent = 'Creating HTML element DOM Day 2'
console.log(title)
</script>
</body>
</html>
```
### Element oluşturma
Birden fazla element oluşturmak için döngü kullanmalıyız. Döngü kullanarak istediğimiz kadar HTML elementi oluşturabiliriz.
Element oluşturduktan sonra, HTML nesnenin farklı özelliklerine değer atayabiliriz.
```html
<!DOCTYPE html>
<html>
<head>
<title>Document Object Model:30 Days Of JavaScript</title>
</head>
<body>
<script>
let title
for (let i = 0; i < 3; i++) {
title = document.createElement('h1')
title.className = 'title'
title.style.fontSize = '24px'
title.textContent = i
console.log(title)
}
</script>
</body>
</html>
```
### Bir üst elemente child ekleme
Oluşturduğumuz elementi HTML'de görmek için, üst element olarak child olarak eklememiz gerekir. HTML'de body'sine *document.body* ile erişebiliriz. *document.body* *appendChild()* metodunu destekler. Aşağıdaki örneğe bakın.
```html
<!DOCTYPE html>
<html>
<head>
<title>Document Object Model:30 Days Of JavaScript</title>
</head>
<body>
<script>
// creating multiple elements and appending to parent element
let title
for (let i = 0; i < 3; i++) {
title = document.createElement('h1')
title.className = 'title'
title.style.fontSize = '24px'
title.textContent = i
document.body.appendChild(title)
}
</script>
</body>
</html>
```
### Bir üst ebeveyn(kapsar element) bir child elementi kaldırma
HTML oluşturduktan sonra, element veya elementleri kaldırmak isteyebiliriz ve *removeChild()* metodunu kullanabiliriz.
**Örnek:**
```html
<!DOCTYPE html>
<html>
<head>
<title>Document Object Model:30 Days Of JavaScript</title>
</head>
<body>
<h1>Removing child Node</h1>
<h2>Asabeneh Yetayeh challenges in 2020</h1>
<ul>
<li>30DaysOfPython Challenge Done</li>
<li>30DaysOfJavaScript Challenge Done</li>
<li>30DaysOfReact Challenge Coming</li>
<li>30DaysOfFullStack Challenge Coming</li>
<li>30DaysOfDataAnalysis Challenge Coming</li>
<li>30DaysOfReactNative Challenge Coming</li>
<li>30DaysOfMachineLearning Challenge Coming</li>
</ul>
<script>
const ul = document.querySelector('ul')
const lists = document.querySelectorAll('li')
for (const list of lists) {
ul.removeChild(list)
}
</script>
</body>
</html>
```
Önceki bölümde gördüğümüz gibi, bir üst elementin tüm iç HTML elementlerini veya child elementleri *innerHTML* metodu ve özelliklerini kullanarak ortadan kaldırmak için daha iyi bir yol mevcut.
```html
<!DOCTYPE html>
<html>
<head>
<title>Document Object Model:30 Days Of JavaScript</title>
</head>
<body>
<h1>Removing child Node</h1>
<h2>Asabeneh Yetayeh challenges in 2020</h1>
<ul>
<li>30DaysOfPython Challenge Done</li>
<li>30DaysOfJavaScript Challenge Done</li>
<li>30DaysOfReact Challenge Coming</li>
<li>30DaysOfFullStack Challenge Coming</li>
<li>30DaysOfDataAnalysis Challenge Coming</li>
<li>30DaysOfReactNative Challenge Coming</li>
<li>30DaysOfMachineLearning Challenge Coming</li>
</ul>
<script>
const ul = document.querySelector('ul')
ul.innerHTML = ''
</script>
</body>
</html>
```
Yukarıdaki kod parçacığı tüm child elementleri temizledi.
---
🌕 Çok özel birisin, her gün ilerliyorsun. Şimdi, ihtiyaç duyduğunda oluşturulmuş bir DOM elementini nasıl yok edeceğini biliyorsun. DOM'u öğrendin ve şimdi uygulamaları inşa etme ve geliştirme becerisine sahipsin. Öğrenme yolunda sadece sekiz gün kaldı. Şimdi beynin ve kasların için bazı egzersizler yap.
## Egzersizler
### Egzersiz: Level 1
1. HTML belgesinde bir div kapsayıcısı oluşturun ve dinamik olarak 0 ila 100 sayılar oluşturun ve kapsayıcı div'e ekleyin.
- Çift sayıların arka planı yeşil
- Tek sayılar arka planı sarı
- Prime numaraları arka planı kırmızı
![Number Generator](../../images/projects/dom_min_project_day_number_generators_2.1.png)
### Egzersiz: Level 2
1. Ülkeler dizisini kullanarak tüm ülkeleri görüntüleyin. Tasarımı görün.
![World Countries List](../../images/projects/dom_min_project_countries_aray_day_2.2.png)
### Egzersiz: Level 3
Bu projenin gereksinimlerini jpg ve gif görüntülerinden her ikisinden de kontrol edin. Tüm veri ve CSS, yalnızca JavaScript kullanılarak uygulanmıştır. Veri starter klasörü proje_3'de bulunmaktadır. [*Açılır menü*](https://www.w3schools.com/tags/tag_details.asp) düğmesi detaylar HTML öğesi kullanılarak oluşturulmuştur.
![Challenge Information](../../images/projects/dom_mini_project_challenge_info_day_2.3.gif)
![Challenge Information](../../images/projects/dom_mini_project_challenge_info_day_2.3.png)
🎉 Tebrikler ! 🎉
[<< Gün 21](../Turkish/../21_Day_DOM/21_day_dom.md) | [Gün 23 >>](../23_Day_Event_listeners/23_day_event_listeners.md)

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>30DaysOfJavaScript:22 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,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'
]

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>30DaysOfJavaScript:22 Day: World Countries List</title>
</head>
<body>
<header>
<h2>World Countries List</h2>
<h4 id="total-countries"></h4>
<h3>30DaysOfJavaScript:DOM-Day-2</h3>
<h3>Author: Asabeneh Yetayeh</h3>
</header>
<div class="countries-container">
<div class="countries-wrapper">
</div>
</div>
<script src="./data/countries.js"></script>
<script src="./js/script.js"></script>
</body>
</html>
</html>

@ -0,0 +1,198 @@
const asabenehChallenges2020 = {
description: 'Asabeneh Yetayeh challenges',
challengeTitle: 'Asabeneh Yetayeh challenges',
challengeSubtitle: '30DaysOfJavaScript Challenge',
challengeYear: 2020,
keywords: [
'HTML',
'HTML5',
'CSS',
'CSS3',
'JS',
'JavaScript',
'ES6',
'Promise',
'async await',
'Database',
'React',
'React Hooks',
'Context API',
'React Router',
'Web Storage',
'localStorage',
'sessionStorage',
'Redux',
'Node',
'MongoDB',
'SQL',
'API',
'DOM',
'data science',
'MERN',
'Python',
'Flask',
'Statistics',
'Linear Algebra',
'Numpy',
'Pandas',
'Scipy',
'Scikit-learn',
'Visualization',
'D3.js'
],
author: {
firstName: 'Asabeneh',
lastName: 'Yetayeh',
titles: [
['🌱', 'Educator'],
['💻', 'Programmer'],
['🌐', 'Developer'],
['🔥', 'Motivator'],
['📔', 'Content Creator']
],
qualifications: [
'MSc. Computer Science Ongoing',
'BSc. Information and Communication Eng.',
'MSc. Food Technology',
'BSc.Food Technology'
],
socialLinks: [
{
social: 'LinkedIn',
url: 'https://www.linkedin.com/in/asabeneh/',
fontawesomeIcon: '<i class="fab fa-linkedin">'
},
{
social: 'Twitter',
url: 'https://twitter.com/Asabeneh',
fontawesomeIcon: '<i class="fab fa-twitter-square"></i>'
},
{
social: 'Github',
fontawesomeIcon: '<i class="fab fa-github-square"></i>',
url: 'https://github.com/Asabeneh'
},
{
social: 'DEV.to',
fontawesomeIcon: '',
url: 'https://dev.to/asabeneh'
}
],
skills: [
'Web Development',
'Data Analysis',
'Data Visualization',
'Programming',
'Databases',
'Developing API'
],
bio:
'I am an educator, developer, motivator and content creator. I am a life-long learner. If you like to know more about me checkout my LinkedIn or Github profile. Thank you so much for joining in my quest of changing everyone to developer.'
},
challenges: [
{
name: '30 Days Of Python',
topics: [
'Python',
'Flask',
'Numpy',
'Pandas',
'Statistics',
'API',
'MongoDB'
],
days: 30,
status: 'Done',
questions: 'Above 500',
projects: 'Two',
interviewQns: '',
githubUrl: 'https://github.com/Asabeneh/30-Days-Of-Python'
},
{
name: '30 Days Of JavaScript',
topics: ['JavaScript', 'ES6', 'Promise', 'async and await', 'DOM'],
days: 30,
status: 'Ongoing',
questions: 'Above 500',
projects: 'About 30',
interviewQns: '',
githubUrl: 'https://github.com/Asabeneh/30DaysOfJavaScript'
},
{
name: '30 Days Of HTML & CSS',
topics: ['CSS', 'Flex', 'Grid', 'CSS Animation'],
days: 30,
status: 'Coming',
questions: 'Above 500',
projects: 'Two',
interviewQns: '',
githubUrl: ''
},
{
name: '30 Days Of React',
topics: [
'React',
'React Router',
'Redux',
'Context API',
'React Hooks',
'MERN'
],
days: 30,
status: 'Coming',
questions: '',
projects: '',
interviewQns: '',
githubUrl: ''
},
{
name: '30 Days Of ReactNative',
topics: ['ReactNative', 'Redux'],
days: 30,
status: 'Coming',
questions: '',
projects: 'Two',
interviewQns: '',
githubUrl: ''
},
{
name: '30 Days Of Fullstack',
topics: ['React', 'Redux', 'MongoDB', 'Node', 'MERN'],
days: 30,
status: 'Coming',
questions: '',
projects: '',
interviewQns: '',
githubUrl: ''
},
{
name: '30 Days Of Data Analysis',
topics: ['Python', 'Numpy', 'Pandas', 'Statistics', 'Visualization'],
days: 30,
status: 'Coming',
questions: '',
projects: '',
interviewQns: '',
githubUrl: ''
},
{
name: '30 Days Of Machine Learning',
topics: [
'Python',
'Numpy',
'Pandas',
'Scikit-learn',
'Scipy',
'Linear Algebra',
'Statistics',
'Visualization'
],
days: 30,
status: 'Coming',
questions: '',
projects: '',
interviewQns: '',
githubUrl: ''
}
]
}

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>30DaysOfJavaScript:22 Day: Challenge Info</title>
</head>
<body>
<div class="wrapper">
</div>
<script src="./data/challenges_info.js"></script>
<script src="./js/script.js"></script>
</body>
</html>
</html>
Loading…
Cancel
Save