\ No newline at end of file
diff --git a/Exercise-Solutions/days/day_24/images/earth.png b/Exercise-Solutions/days/day_24/images/earth.png
new file mode 100644
index 0000000..6b54915
Binary files /dev/null and b/Exercise-Solutions/days/day_24/images/earth.png differ
diff --git a/Exercise-Solutions/days/day_24/images/galaxy.gif b/Exercise-Solutions/days/day_24/images/galaxy.gif
new file mode 100644
index 0000000..3c8aab6
Binary files /dev/null and b/Exercise-Solutions/days/day_24/images/galaxy.gif differ
diff --git a/Exercise-Solutions/days/day_24/images/jupiter.png b/Exercise-Solutions/days/day_24/images/jupiter.png
new file mode 100644
index 0000000..63cc77c
Binary files /dev/null and b/Exercise-Solutions/days/day_24/images/jupiter.png differ
diff --git a/Exercise-Solutions/days/day_24/images/mars.png b/Exercise-Solutions/days/day_24/images/mars.png
new file mode 100644
index 0000000..d035d3b
Binary files /dev/null and b/Exercise-Solutions/days/day_24/images/mars.png differ
diff --git a/Exercise-Solutions/days/day_24/images/mercury.png b/Exercise-Solutions/days/day_24/images/mercury.png
new file mode 100644
index 0000000..278acf8
Binary files /dev/null and b/Exercise-Solutions/days/day_24/images/mercury.png differ
diff --git a/Exercise-Solutions/days/day_24/images/moon.png b/Exercise-Solutions/days/day_24/images/moon.png
new file mode 100644
index 0000000..d256266
Binary files /dev/null and b/Exercise-Solutions/days/day_24/images/moon.png differ
diff --git a/Exercise-Solutions/days/day_24/images/neptune.png b/Exercise-Solutions/days/day_24/images/neptune.png
new file mode 100644
index 0000000..9d824d2
Binary files /dev/null and b/Exercise-Solutions/days/day_24/images/neptune.png differ
diff --git a/Exercise-Solutions/days/day_24/images/pluto.png b/Exercise-Solutions/days/day_24/images/pluto.png
new file mode 100644
index 0000000..62beb40
Binary files /dev/null and b/Exercise-Solutions/days/day_24/images/pluto.png differ
diff --git a/Exercise-Solutions/days/day_24/images/saturn.png b/Exercise-Solutions/days/day_24/images/saturn.png
new file mode 100644
index 0000000..9bd6d92
Binary files /dev/null and b/Exercise-Solutions/days/day_24/images/saturn.png differ
diff --git a/Exercise-Solutions/days/day_24/images/uranus.png b/Exercise-Solutions/days/day_24/images/uranus.png
new file mode 100644
index 0000000..7e30109
Binary files /dev/null and b/Exercise-Solutions/days/day_24/images/uranus.png differ
diff --git a/Exercise-Solutions/days/day_24/images/venus.png b/Exercise-Solutions/days/day_24/images/venus.png
new file mode 100644
index 0000000..d865f92
Binary files /dev/null and b/Exercise-Solutions/days/day_24/images/venus.png differ
diff --git a/Exercise-Solutions/days/day_24/index.html b/Exercise-Solutions/days/day_24/index.html
new file mode 100644
index 0000000..f386f08
--- /dev/null
+++ b/Exercise-Solutions/days/day_24/index.html
@@ -0,0 +1,52 @@
+
+
+
+
+
+
+ 
+
+
+### Exercise Level 1
+
+```js
+//app.js
+const countryApiUrl = 'https://restcountries.com/v2/all';
+const ctx = document.getElementById('population');
+const ctxx = document.getElementById('langue');
+const lan = document.getElementById("lan")
+const country = document.getElementById("country")
+
+let chartData = []; // Grafik verilerini saklamak için boş bir dizi
+const countryName = []
+let Word=0
+// Grafik oluşturuluyor
+const myChart = new Chart(ctx, {
+ type: 'bar',
+ data: {
+ labels: [],
+ datasets: [{
+ label: 'Country Poplulation',
+ data: ["word"],
+ borderWidth: 1
+ }]
+ },
+ options: {
+ indexAxis: 'y',
+ }
+});
+
+
+fetch(countryApiUrl)
+ .then(response => response.json())
+ .then(data => {
+ console.log(data)
+ const arr= data.sort((a,b) =>b.population-a.population)
+ arr.forEach((country, index) => {
+ Word += country.population
+ if (index < 10) {
+ chartData.push(country.population);
+ countryName.push(country.name)
+ }
+ });
+ chartData.unshift(Word)
+ countryName.unshift("word")
+ console.log(Word)
+ // Verileri güncelleyip grafik yeniden çiziliyor
+ myChart.data.datasets[0].data = chartData;
+ myChart.data.labels=countryName
+ myChart.update();
+ })
+ .catch(err => console.log(err));
+
+
+
+const langues = []
+ const langue = new Chart(ctxx, {
+ type: 'bar',
+ data: {
+ labels: [],
+ datasets: [{
+ label: 'Most Langue',
+ data: [],
+ borderWidth: 1
+ }]
+ },
+ options: {
+ indexAxis: 'y',
+
+ }
+ });
+
+fetch(countryApiUrl)
+.then((response)=> response.json())
+.then((data)=>{
+ const langs = data.map((country) => country.languages[0].name );
+ console.log(typeof langs)
+ const counts = {};
+ langs.forEach((lang) => {
+ if (counts[lang]) {
+ counts[lang]++;
+ } else {
+ counts[lang] = 1;
+ }
+ });
+ const sortedLangs = Object.entries(counts).sort((a, b) => b[1] - a[1]).map(a => a[0]);
+
+ langue.data.labels = sortedLangs.slice(0,10);
+ langue.data.datasets[0].data = sortedLangs.map((lang) => counts[lang]);
+ langue.update();
+});
+
+function displayCountry(){
+ country.style.display="flex"
+ lan.style.display="none"
+}
+function displayLan(){
+ country.style.display="none"
+ lan.style.display="flex"
+ }
+ ```
\ No newline at end of file
diff --git a/Exercise-Solutions/days/day_25/app.js b/Exercise-Solutions/days/day_25/app.js
new file mode 100644
index 0000000..2178563
--- /dev/null
+++ b/Exercise-Solutions/days/day_25/app.js
@@ -0,0 +1,95 @@
+const countryApiUrl = 'https://restcountries.com/v2/all';
+const ctx = document.getElementById('population');
+const ctxx = document.getElementById('langue');
+const lan = document.getElementById("lan")
+const country = document.getElementById("country")
+
+let chartData = []; // Grafik verilerini saklamak için boş bir dizi
+const countryName = []
+let Word=0
+// Grafik oluşturuluyor
+const myChart = new Chart(ctx, {
+ type: 'bar',
+ data: {
+ labels: [],
+ datasets: [{
+ label: 'Country Poplulation',
+ data: ["word"],
+ borderWidth: 1
+ }]
+ },
+ options: {
+ indexAxis: 'y',
+ }
+});
+
+
+fetch(countryApiUrl)
+ .then(response => response.json())
+ .then(data => {
+ console.log(data)
+ const arr= data.sort((a,b) =>b.population-a.population)
+ arr.forEach((country, index) => {
+ Word += country.population
+ if (index < 10) {
+ chartData.push(country.population);
+ countryName.push(country.name)
+ }
+ });
+ chartData.unshift(Word)
+ countryName.unshift("word")
+ console.log(Word)
+ // Verileri güncelleyip grafik yeniden çiziliyor
+ myChart.data.datasets[0].data = chartData;
+ myChart.data.labels=countryName
+ myChart.update();
+ })
+ .catch(err => console.log(err));
+
+
+
+const langues = []
+ const langue = new Chart(ctxx, {
+ type: 'bar',
+ data: {
+ labels: [],
+ datasets: [{
+ label: 'Most Langue',
+ data: [],
+ borderWidth: 1
+ }]
+ },
+ options: {
+ indexAxis: 'y',
+
+ }
+ });
+
+fetch(countryApiUrl)
+.then((response)=> response.json())
+.then((data)=>{
+ const langs = data.map((country) => country.languages[0].name );
+ console.log(typeof langs)
+ const counts = {};
+ langs.forEach((lang) => {
+ if (counts[lang]) {
+ counts[lang]++;
+ } else {
+ counts[lang] = 1;
+ }
+ });
+ const sortedLangs = Object.entries(counts).sort((a, b) => b[1] - a[1]).map(a => a[0]);
+
+ langue.data.labels = sortedLangs.slice(0,10);
+ langue.data.datasets[0].data = sortedLangs.map((lang) => counts[lang]);
+ langue.update();
+});
+
+function displayCountry(){
+ country.style.display="flex"
+ lan.style.display="none"
+}
+function displayLan(){
+ country.style.display="none"
+ lan.style.display="flex"
+ }
\ No newline at end of file
diff --git a/Exercise-Solutions/days/day_25/day25_level1.png b/Exercise-Solutions/days/day_25/day25_level1.png
new file mode 100644
index 0000000..14b228c
Binary files /dev/null and b/Exercise-Solutions/days/day_25/day25_level1.png differ
diff --git a/Exercise-Solutions/days/day_25/index.html b/Exercise-Solutions/days/day_25/index.html
new file mode 100644
index 0000000..9ead706
--- /dev/null
+++ b/Exercise-Solutions/days/day_25/index.html
@@ -0,0 +1,34 @@
+
+
+
+
+
+ 
+
+
+### Exercise Level 1
+ ```js
+ //app.js
+const countryApiUrl = 'https://restcountries.com/v2/all';
+let startButton = document.getElementById("start");
+let anyButton = document.getElementById("any");
+const sort = document.getElementById("sort");
+const input = document.getElementById("filter");
+const form = document.getElementById("form")
+const list = document.getElementById("list")
+const text = document.getElementById("text")
+
+let countries = [];
+let filteredCountries = [];
+startButton = false
+anyButton = true
+
+
+addEventListener();
+
+function addEventListener() {
+
+ form.addEventListener("click",choseButton)
+}
+
+
+
+// fetchging data
+
+fetch(countryApiUrl)
+.then((response) => response.json())
+.then(async (data) => {
+ await data.forEach((element) => {
+ countries.push(element.name);
+
+ });
+ // display(filteredCountries);
+});
+
+
+
+// display arr metod in the HTML
+
+function display(arr) {
+
+ let dizi = []
+ arr.map((ar) => {
+
+ const li = `
+
+ WORLD COUNTRİES LİST
+Total numbers of countries 250
+ +
+
+
+ 
+```js
+
+//app.js
+const animation = document.getElementById("footer")
+const header = document.getElementById("header")
+const headerWords=["Motivaional Speaker","Programmer", "Educator","Content Creator","Motivator","Instructer"]
+const footerWords = ["HTML", "CSS", "JavaScript", "React"];
+let i = 0; // bu değişkeni genel olarak tanımlamak gerekiyor
+
+function typeWord() {
+ if (i < footerWords.length) {
+ let currentWord = footerWords[i];
+ animation.innerHTML ="The tecnologies I teach " + `
+
+
+
+
\ No newline at end of file
diff --git a/Exercise-Solutions/days/day_27/style.css b/Exercise-Solutions/days/day_27/style.css
new file mode 100644
index 0000000..9b47f3c
--- /dev/null
+++ b/Exercise-Solutions/days/day_27/style.css
@@ -0,0 +1,90 @@
+*{
+ /* border: 1px solid; */
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ font-family: sans-serif,'Times New Roman', Times, serif,monospace;
+}
+.container{
+ display: flex;
+ flex-direction:column;
+ justify-content:space-evenly;
+ margin: 0 10%;
+ height: auto;
+}
+
+/* Header CSS */
+
+.header{
+ display: flex;
+ flex-direction: column;
+ justify-content:space-between;
+ min-height:25%;
+}
+.header .title{
+ letter-spacing: 1em;
+}
+.header .title .card-wrapper{
+
+}
+.header .title .card-wrapper .card{
+
+}
+.header .header-animation{
+ background-color:yellow;
+ padding: 5%;
+}
+h1{
+ font-size:600%;
+ letter-spacing:0.4em
+}
+/* Main CSS */
+
+.main{
+ display: flex;
+ flex-direction: column;
+ margin-bottom:15%;
+}
+.main p{
+ margin-top: 25px;
+}
+.container .main .challenge{
+ display: flex;
+ flex-direction: row;
+ justify-content: space-around;
+}
+.container .main .challenge .skill{
+ display: flex;
+ padding: 75px;
+ align-items: center;
+ justify-content: center;
+ margin-top:5%;
+ border: 1px solid;
+ border-radius: 10px;
+}
+
+/* Footer CSS*/
+
+span{
+ color:fuchsia;
+ font-weight: bold;
+}
+
+
+#header {
+ animation-duration: 2s;
+ animation-name: slidein;
+ animation-iteration-count: infinite;
+ display: inline;
+ font-weight: bold;
+}
+
+@keyframes slidein {
+ from {
+ margin-left: 0;
+ }
+
+ to {
+ margin-left: 10%;
+ }
+}
diff --git a/Exercise-Solutions/days/day_28/Ekran görüntüsü_2024-06-13_19-33-46.png b/Exercise-Solutions/days/day_28/Ekran görüntüsü_2024-06-13_19-33-46.png
new file mode 100644
index 0000000..ba7b2dc
Binary files /dev/null and b/Exercise-Solutions/days/day_28/Ekran görüntüsü_2024-06-13_19-33-46.png differ
diff --git a/Exercise-Solutions/days/day_28/app.js b/Exercise-Solutions/days/day_28/app.js
new file mode 100644
index 0000000..814aa89
--- /dev/null
+++ b/Exercise-Solutions/days/day_28/app.js
@@ -0,0 +1,91 @@
+const playerWrapper = document.getElementById("player-wrapper");
+const personName = document.getElementById("input-first-name");
+const personLastName = document.getElementById("input-lastname");
+const personCountrt = document.getElementById("country");
+const personScore = document.getElementById("score");
+
+const form = document.getElementById("form")
+
+class Players {
+ constructor(firstName, lastname, country, score) {
+ this.firstNamename = firstName;
+ this.lastname = lastname;
+ this.country = country;
+ this.score = score;
+ this.fullName=firstName + " " + lastname
+ }
+ display() {
+ playerWrapper.innerHTML += `
+
+
+
+
+
+ Nevzat Atalay
+
+
+
+
+
+
+ Hello, I'm Nevzat Atalay. I am developing the 27th project of the 30 Days Of JavaScript project.
+
+
+ 30 Days Of JavaScript
+30 Days Of React
+30 Days Of Phyton
+-
+
- ${this.fullName} +
- ${this.country} +
- ${this.score} + +
+
+```js
+//app.js
+const playerWrapper = document.getElementById("player-wrapper");
+const personName = document.getElementById("input-first-name");
+const personLastName = document.getElementById("input-lastname");
+const personCountrt = document.getElementById("country");
+const personScore = document.getElementById("score");
+
+const form = document.getElementById("form")
+
+class Players {
+ constructor(firstName, lastname, country, score) {
+ this.firstNamename = firstName;
+ this.lastname = lastname;
+ this.country = country;
+ this.score = score;
+ this.fullName=firstName + " " + lastname
+ }
+ display() {
+ playerWrapper.innerHTML += `-
+
- ${this.fullName} +
- ${this.country} +
- ${this.score} + +
+
+
+
+
\ No newline at end of file
diff --git a/Exercise-Solutions/days/day_28/style.css b/Exercise-Solutions/days/day_28/style.css
new file mode 100644
index 0000000..12bb309
--- /dev/null
+++ b/Exercise-Solutions/days/day_28/style.css
@@ -0,0 +1,90 @@
+*{
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ font-family: sans-serif,'Times New Roman', Times, serif;
+ /* border: 1px solid; */
+}
+.container{
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ height: 100vh;
+}
+
+/* Header CSS*/
+.container .header{
+ display: flex;
+ flex-direction: column;
+ height: 25%;
+ justify-content: space-around;
+}
+.container .header .title h3{
+ text-align: center;
+}
+.container .header .form-wrapper{
+ width: 60%;
+ margin: 0 auto;
+}
+.container .header .form-wrapper form{
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+}
+.container .header .form-wrapper form input{
+padding: 5px 14px;
+width: 23%;
+}
+
+/* Main CSS*/
+
+.main{
+ display: flex;
+ flex-direction: column;
+
+}
+.main ul{
+ display: flex;
+ flex-direction: row;
+ border: 1px solid;
+ justify-content:space-between;
+ width: 60%;
+ margin: 0 auto;
+ background-color: thistle;
+ margin-bottom: 5px;
+}
+.main ul li{
+ list-style: none;
+ padding: 10px 20px;
+ flex-wrap: wrap;
+ width: 20%;
+}
+.main .button-wrapper{
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 25%;
+ text-align: center;
+}
+.main .button-wrapper button{
+ border-radius: 50%;
+ padding: 5px;
+ background-color: aqua;
+}
+.main .button-wrapper button:hover{
+ background-color: tomato;
+}
+
+
+@media screen and (max-width:600px){
+ .main .button-wrapper button{
+ padding: 2px;
+ }
+ .main ul{
+ width: 100%;
+ }
+ .container .header .form-wrapper{
+ width: 100%;
+ }
+
+}
\ No newline at end of file
diff --git a/Exercise-Solutions/days/day_29/29_day_animatingcharecter.md b/Exercise-Solutions/days/day_29/29_day_animatingcharecter.md
new file mode 100644
index 0000000..81ad82b
--- /dev/null
+++ b/Exercise-Solutions/days/day_29/29_day_animatingcharecter.md
@@ -0,0 +1,47 @@
+ # Day 29 - Portfolio
+
+## [Exercise:Solutions](#exercise-solutions)
+
+ #### [Home](../README.md) | [<< Day 28](../day_28/day_28_leaderboard.md) | [Day 30 >>](../day_30/30_day_finalprohects.md)
+
+### Exercise Level 1
+
+1. Create the following using HTML, CSS, and JavaScript
+
+
+
+
+
+
+ 30 Days Of JavaScript Challenge Leaderboard
+
+
+
+
+
+
+ 
+
+```js
+// app.js
+
+const header = document.getElementById("header")
+
+let sentences="30 DAYS OF JAVASCRİPT CHALLENGE 2023 NEVZAT ATALAY"
+
+function displayLetters(){
+const container = document.getElementById("container").style.setProperty("background-color", randomColor())
+
+ let words = sentences.split(" ")
+ let p = ""
+ for(i=0; i
+
+
+
+
+
\ No newline at end of file
diff --git a/Exercise-Solutions/days/day_29/style.css b/Exercise-Solutions/days/day_29/style.css
new file mode 100644
index 0000000..a2c7f05
--- /dev/null
+++ b/Exercise-Solutions/days/day_29/style.css
@@ -0,0 +1,13 @@
+*{
+ margin: 0;
+ padding: 0;
+}
+#container{
+ height: 100vh;
+}
+#header{
+ display: flex;
+ line-height: 2em;
+ font-size: 4em;
+ flex-wrap: wrap;
+}
diff --git a/Exercise-Solutions/days/day_30/30_day_finalprohects.md b/Exercise-Solutions/days/day_30/30_day_finalprohects.md
new file mode 100644
index 0000000..09c4844
--- /dev/null
+++ b/Exercise-Solutions/days/day_30/30_day_finalprohects.md
@@ -0,0 +1,12 @@
+ # Day 30 - Portfolio
+
+## [Exercise:Solutions](#exercise-solutions)
+
+ #### [Home](../README.md) | [<< Day 29](../day_29/29_day_animatingcharecter.md) | [Home>>](../../README.md)
+
+### Exercise Level 1
+
+1. Create the following using HTML, CSS, and JavaScript
+
+
+ 
diff --git a/Exercise-Solutions/days/day_30/Ekran görüntüsü_2024-07-07_09-28-08.png b/Exercise-Solutions/days/day_30/Ekran görüntüsü_2024-07-07_09-28-08.png
new file mode 100644
index 0000000..9f690da
Binary files /dev/null and b/Exercise-Solutions/days/day_30/Ekran görüntüsü_2024-07-07_09-28-08.png differ
diff --git a/Exercise-Solutions/days/day_30/app.js b/Exercise-Solutions/days/day_30/app.js
new file mode 100644
index 0000000..8c5a78b
--- /dev/null
+++ b/Exercise-Solutions/days/day_30/app.js
@@ -0,0 +1,251 @@
+const main = document.getElementById("main");
+const form = document.getElementById("search");
+const input = document.getElementById("input");
+let ctx = document.getElementById('myChart');
+const graphic = document.getElementById("graphic")
+const icon = document.getElementById('icon')
+
+let filteredCountries = [];
+let countriesPopulation = [];
+let mostSpekingLangue = new Map();
+
+calculateMostSpeakingLangues(countriesData)
+createCardAndDisplay(sortCountriesToCountriName(countriesData))
+
+// create carts and display in HTML function
+function createCardAndDisplay(arr){
+ let cards = [];
+ arr.forEach((data) => {
+ countriesPopulation.push(data.population)
+
+ let card = `
+
+ 
+
+ `;
+ cards.push(card)
+ })
+ main.innerHTML = ''
+ main.innerHTML = cards
+}
+
+// buttons click events
+form.addEventListener('click', (e) => {
+ e.preventDefault()
+ let element = e.target;
+ if(!element.matches('button')) return;
+ switch(element.id){
+
+ // click reverse button
+ case'reverseButton':
+ if (input.value.length == 0){
+ if(main.className == "main"){
+ main.className = "main-reverse"
+ createCardAndDisplay(sortCountriesToCountriName(countriesData).reverse())
+ }
+ else if(main.className == "main-reverse"){
+ main.className = "main"
+ createCardAndDisplay(sortCountriesToCountriName(countriesData))
+ }
+ else {
+ main.className = 'main'
+ createCardAndDisplay(sortCountriesToCountriName(countriesData))
+ }
+ }
+ else {
+ if(main.className == 'filtered-countries'){
+ main.className = 'filtered-countries-reverse'
+ createCardAndDisplay(filteredCountries.reverse())
+ }
+ else if(main.className == 'filtered-countries-reverse'){
+ main.className = 'filtered-countries'
+ createCardAndDisplay(filteredCountries.reverse())
+ }
+ else{
+ main.className = 'filtered-countries';
+ createCardAndDisplay(sortCountriesToCountriName(filteredCountries))
+ }
+ }
+ break
+
+ // click capital button
+ case'capitalButton':
+ if(input.value.length == 0 ){
+ if(main.className == "main-capital"){
+ main.className = "main-capital-reverse"
+ createCardAndDisplay(sortCountriesToCapitalName(sortCountriesToCountriName(countriesData)).reverse())
+ }
+ else if(main.className == "main-capital-reverse"){
+ main.className = "main-capital"
+ createCardAndDisplay(sortCountriesToCapitalName(sortCountriesToCountriName(countriesData)))
+ }
+ else {
+ main.className = 'main-capital'
+ createCardAndDisplay(sortCountriesToCapitalName(sortCountriesToCountriName(countriesData)))
+ }
+ }
+ else {
+ if(main.className == 'filtered-capital'){
+ main.className = 'filtered-capital-reverse'
+ createCardAndDisplay(sortCountriesToCapitalName(sortCountriesToCountriName(filteredCountries)).reverse())
+ }
+ else if (main.className == 'filtered-capital-reverse'){
+ main.className = 'filtered-capital'
+ createCardAndDisplay(sortCountriesToCapitalName(sortCountriesToCountriName(filteredCountries)))
+ }
+ else{
+ main.className = 'filtered-capital'
+ createCardAndDisplay(sortCountriesToCapitalName(sortCountriesToCountriName(filteredCountries)))
+ }
+ }
+ break;
+
+ // click population button
+ case 'population-button':
+ if (input.value.length == 0){
+ if (main.className == 'main-population'){
+ main.className = 'main-population-reverse'
+ createCardAndDisplay(sortCountriesToPopulation(countriesData).reverse())
+ }
+ else if (main.className == 'main-population-reverse'){
+ main.className = 'main-population'
+ createCardAndDisplay(sortCountriesToPopulation(countriesData))
+ }
+ else {
+ main.className = 'main-population'
+ createCardAndDisplay(sortCountriesToPopulation(countriesData))
+ }
+ }
+ else{
+ if(main.className == 'filtered-population'){
+ main.className = 'filtered-population-reverse'
+ createCardAndDisplay(sortCountriesToPopulation(filteredCountries).reverse())
+ }
+ else if (main.className == 'filtered-population-reverse'){
+ main.className = 'filtered-population'
+ createCardAndDisplay(sortCountriesToPopulation(filteredCountries))
+ }
+ else {
+ main.className = 'filtered-population'
+ createCardAndDisplay(sortCountriesToPopulation(filteredCountries))
+ }
+ }
+ }
+});
+
+//input event listener
+input.addEventListener('keyup', (e)=>{
+ countriesPopulation = [];
+ filteredCountries = [];
+
+ e.preventDefault()
+ let value = e.target.value.trim().toLowerCase()
+
+ if (value.length > 0){
+ sortCountriesToCountriName(countriesData).forEach((data) => {
+ if(data.name.toLowerCase().trim().startsWith(value)){
+ filteredCountries.push(data)
+ countriesPopulation.push(data.population)
+ }
+ })
+ main.className = 'filtered-countries'
+ createCardAndDisplay(filteredCountries)
+ updateGrapgic(sortArrayNames(filteredCountries),
+ sortArrays(countriesPopulation))
+ }
+ else if (value.length == 0){
+ main.className = 'main'
+ createCardAndDisplay((sortCountriesToCountriName(countriesData)))
+ updateGrapgic(sortArrayNames(countriesData).slice(0,8),
+ sortArrays(countriesPopulation).slice(0,8))
+ }
+});
+
+// return sort countries name function
+function sortArrays(arr){
+ return arr.sort((a, b) => {return b-a})
+}
+
+ // Return the names of countries sorted by country population
+ function sortArrayNames (arr){
+ let countriesName = [];
+ sortCountriesToPopulation(arr).forEach((data)=>{
+ countriesName.push(data.name)
+ })
+ return countriesName;
+}
+
+// return sort countries data array by countries name
+function sortCountriesToCountriName(arr) {
+ return arr.sort((a, b) =>{
+ if(a.name < b.name) return -1;
+ if(a.name > b.name) return +1;
+ return 0;
+ });
+}
+
+// return sort capital name
+function sortCountriesToCapitalName(arr) {
+ return arr.sort((a, b) =>{
+ if(a.capital == undefined ) return -1
+ if(a.capital < b.capital) return -1;
+ if(a.capital > b.capital) return +1;
+ return 0;
+ });
+}
+
+// return sort populations
+function sortCountriesToPopulation (arr) {
+ return arr.sort((a, b) => {
+ if(a.population < b.population) return +1
+ if(a.population > b.population) return -1
+ return 0;
+ });
+}
+
+// Object for graphic
+let myCharts = new Chart(ctx, {
+ type: 'bar',
+ data: {
+ labels:sortArrayNames(countriesData).slice(0,8),
+ datasets: [{
+ label: '# of Votes',
+ data:sortArrays(countriesPopulation).slice(0,8),
+ borderWidth: 1
+ }]
+ },
+ options: {
+ scales: {
+ y: {
+ beginAtZero: true
+ }
+ }
+ }
+ });
+
+// update graphic when pressing keyboard
+function updateGrapgic(countriesNames, countriesPopulations) {
+ myCharts.data.labels = countriesNames;
+ myCharts.data.datasets[0].data = countriesPopulations;
+ myCharts.update()
+}
+
+icon.addEventListener('click', ()=> {
+ graphic.classList.toggle('graphic-wrapper')
+})
+
+
+function calculateMostSpeakingLangues(array) {
+
+ array.forEach((data) =>{
+ mostSpekingLangue.set(data.languages,data.name)
+ })
+}
+
+
diff --git a/Exercise-Solutions/days/day_30/index.html b/Exercise-Solutions/days/day_30/index.html
new file mode 100644
index 0000000..f951f7a
--- /dev/null
+++ b/Exercise-Solutions/days/day_30/index.html
@@ -0,0 +1,49 @@
+
+
+
+
+
+ ${data.name }
+-
+
- Capital: ${data.capital} +
- Langue: ${data.languages} +
- Population: ${data.population} +
-
+
