diff --git a/01_Day_Introduction/01_day_starter/datatypes.js b/01_Day_Introduction/01_day_starter/datatypes.js new file mode 100644 index 0000000..74f786f --- /dev/null +++ b/01_Day_Introduction/01_day_starter/datatypes.js @@ -0,0 +1,25 @@ +console.log(typeof(mot)); +console.log(typeof(vrai)); +console.log(typeof(v)); +console.log(typeof(w)); + +var a; var b; var c; var d; +console.log(a,b,c,d); + +var a1= "a"; var b1 = "b"; var c1 = "c"; var d1 = "d"; +console.log(a1,b1,c1,d1); + +var firstname = "Faliana"; +var lastname = "Ranai"; +var martialstatus = "Single"; +var country = "Madagascar"; +var age = 21; +console.log(firstname, lastname, martialstatus, country, age); + +var firstname1 = "Faliana", lastname1 = "Ranai", +martialstatus1 = "Single", country1 = "Madagascar", age1 = 21; +console.log(firstname1, lastname1, martialstatus1, country1, age1); + +var myAge = 21, yourAge=25; +console.log("I am "+myAge+" years old"); +console.log("You are "+yourAge+" years old"); \ No newline at end of file diff --git a/01_Day_Introduction/01_day_starter/index.html b/01_Day_Introduction/01_day_starter/index.html index 7ed5b19..e93a533 100644 --- a/01_Day_Introduction/01_day_starter/index.html +++ b/01_Day_Introduction/01_day_starter/index.html @@ -1,19 +1,34 @@ + + Day 1 + + + + + +

Day 1: Exercises

+ + + \ No newline at end of file diff --git a/01_Day_Introduction/01_day_starter/main.js b/01_Day_Introduction/01_day_starter/main.js index 2b952bc..eb065f9 100644 --- a/01_Day_Introduction/01_day_starter/main.js +++ b/01_Day_Introduction/01_day_starter/main.js @@ -1,4 +1 @@ -// the variable values can be accessed from other variable.js file -console.log(firstName, lastName, country, city, age, isMarried) -console.log(gravity, boilingPoint, PI) // 9.81, 100, 3.14 -console.log(name, job, live) \ No newline at end of file +console.log('Hello, World!'); diff --git a/01_Day_Introduction/01_day_starter/variable.js b/01_Day_Introduction/01_day_starter/variable.js index 62558cb..7aba81b 100644 --- a/01_Day_Introduction/01_day_starter/variable.js +++ b/01_Day_Introduction/01_day_starter/variable.js @@ -1,20 +1,8 @@ -// Declaring different variables of different data types - -let firstName = 'Asabeneh' // first name of a person -let lastName = 'Yetayeh' // last name of a person -let country = 'Finland' // country -let city = 'Helsinki' // capital city -let age = 100 // age in years -let isMarried = true - -// Declaring variables with number values - -const gravity = 9.81 // earth gravity in m/s2 -const boilingPoint = 100 // water boiling point, temperature in oC -const PI = 3.14 // geometrical constant - -// Variables can also be declaring in one line separated by comma - -let name = 'Asabeneh', //name of a person - job = 'teacher', - live = 'Finland' +let mot = "string"; +console.log(mot); +let vrai = true; +console.log(vrai); +let v; +console.log(v); +let w = null; +console.log(w); \ No newline at end of file diff --git a/02_Day_Data_types/02_day_starter/index.html b/02_Day_Data_types/02_day_starter/index.html index 8fbbe0d..dbc271d 100644 --- a/02_Day_Data_types/02_day_starter/index.html +++ b/02_Day_Data_types/02_day_starter/index.html @@ -1,17 +1,108 @@ + + Day 2 + + + +

Day 2: Exercises

+

Exercise: Level 1

+ +

Exercise: Level 2

+ +

Exercises: Level 3

+ + \ No newline at end of file diff --git a/02_Day_Data_types/02_day_starter/main.js b/02_Day_Data_types/02_day_starter/main.js index 7762908..510cf05 100644 --- a/02_Day_Data_types/02_day_starter/main.js +++ b/02_Day_Data_types/02_day_starter/main.js @@ -1 +1,63 @@ -// this is your main.js script \ No newline at end of file +var challenge = "30 Days Of JavaScript"; +console.log(challenge); +console.log("challenge's length is:", challenge.length); +challenge = challenge.toUpperCase(); +console.log("toUpperCase: ", challenge); +challenge = challenge.toLowerCase(); +console.log("toLowerCase: ", challenge); + +challenge = "30 Days Of JavaScript"; +var cut1 = challenge.substring(0,2); +console.log("Cut (slice) out the first word: ", cut1) +var cut2 = challenge.substring(3, challenge.length); +console.log(cut2); +console.log(challenge.includes("Script")); +var split = challenge.split(" "); +console.log("split: ", split); +split = 'Facebook, Google, Microsoft, Apple, IBM, Oracle, Amazon'.split(", "); +console.log("split: ", split); +var replace = challenge.replace("JavaScript", "Python"); +console.log("replace: ", replace); +console.log("charAt(15): ", challenge.charAt(15)); +console.log("charCode of J: ", challenge.charCodeAt(11)); +console.log("indexOf a: ", challenge.indexOf("a")); +console.log("lastIndexOf a: ", challenge.lastIndexOf("a")); +console.log("first occurrence of the word because: ", 'You cannot end a sentence with because because because is a conjunction'.search("because")); +console.log("trim: ", ' 30 Days Of JavaScript '.trim()); +console.log("startsWith(30): ", challenge.startsWith("30")); +console.log("endsWith(JavaScript): ", challenge.endsWith("JavaScript")); +console.log("match: ", challenge.match("a")); +console.log("concat: ", '30 Days of'.concat('JavaScript')); +console.log("repeat: ", challenge.repeat(2)); + +console.log("The quote 'There is no exercise better for the heart than reaching down and lifting people up.' by John Holmes teaches us to help one another."); +console.log(`"Love is not patronizing and charity isn't about pity, it is about love. Charity and love are the same -- with charity you give love, so don't just give money but reach out your hand instead."`) +console.log("typeof('10'): ", typeof('10'), typeof(10), typeof(parseInt('10'))); +console.log("parseFloat('9.8'): ", parseFloat('9.8'), Math.round(parseFloat('9.8'))); +console.log("python".search('on'), "jargon".search('on')); +console.log("I hope this course is not full of jargon.".search("jargon")); +console.log(Math.floor(Math.random()*100)); +console.log(Math.floor(Math.random()*50+50)); +console.log(Math.floor(Math.random()*255)); +console.log("JavaScript"[Math.floor("JavaScript".length*Math.random())]); +console.log("1 1 1 1 1\n2 1 2 4 8\n3 1 3 9 27\n4 1 4 16 64\n5 1 5 25 125"); + +var phrase = 'You cannot end a sentence with because because because is a conjunction'; +console.log(phrase.indexOf("because")); +console.log(phrase.lastIndexOf("because")); +console.log(phrase.lastIndexOf("because")+"because".length); +console.log(phrase.substring(phrase.indexOf("because"), phrase.lastIndexOf("because")+"because".length)); + +phrase = 'Love is the best thing in this world. Some found their love and some are still looking for their love.'; +phrase = phrase.toLowerCase(); +console.log(phrase.match(/love/gi), phrase.match(/love/gi).length); +phrase = 'You cannot end a sentence with because because because is a conjunction'; +console.log(phrase.match(/because/gi), phrase.match(/because/gi).length); + +var sentence = '%I $am@% a %tea@cher%, &and& I lo%#ve %te@a@ching%;. The@re $is no@th@ing; &as& mo@re rewarding as educa@ting &and& @emp%o@weri@ng peo@ple. ;I found tea@ching m%o@re interesting tha@n any ot#her %jo@bs. %Do@es thi%s mo@tiv#ate yo@u to be a tea@cher!? %Th#is 30#Days&OfJavaScript &is al@so $the $resu@lt of &love& of tea&ching'; +sentence = sentence.replace(/[^a-zA-Z ]/g, ""); +console.log(sentence); + +sentence = 'He earns 5000 euro from salary per month, 10000 euro annual bonus, 15000 euro online courses per month.'; +sentence = sentence.match(/\d+/g); +console.log(Number(sentence[0]*12) + Number(sentence[1]) + Number(sentence[2]*12)); \ No newline at end of file diff --git a/03_Day_Booleans_operators_date/03_day_starter/index.html b/03_Day_Booleans_operators_date/03_day_starter/index.html index 2a8e6a8..4f55799 100644 --- a/03_Day_Booleans_operators_date/03_day_starter/index.html +++ b/03_Day_Booleans_operators_date/03_day_starter/index.html @@ -3,15 +3,140 @@ 30DaysOfJavaScript: 03 Day + + + -

30DaysOfJavaScript:03 Day

-

Booleans, undefined, null, date object

+
+

30DaysOfJavaScript:03 Day

+

Booleans, undefined, null, date object

+
+

Exercises: Level 1

+ +

1. Declare firstName, lastName, country, city, age, isMarried, year variable and assign value to it and use the typeof operator to check different data types.

- - +

2. Check if type of '10' is equal to 10

+

3. Check if parseInt('9.8') is equal to 10

+ +

4. Boolean value is either true or false.

+ +

5. Figure out the result of the following comparison expression first without using console.log(). After you decide the result confirm it using console.log()

+ +

6. Find the length of python and jargon and make a falsy comparison statement.

+ + +

7. Use the Date object to do the following activities

+ +
+ +

Exercises: Level 2

+

1. Write a script that prompt the user to enter base and height of the triangle and calculate an area of a triangle (area = 0.5 x b x h).

+ + Enter base: 20
+ Enter height: 10
+ The area of the triangle is 100
+ +

2. Write a script that prompt the user to enter side a, side b, and side c of the triangle and and calculate the perimeter of triangle (perimeter = a + b + c)

+ + Enter side a: 5
+ Enter side b: 4
+ Enter side c: 3
+ The perimeter of the triangle is 12
+ + +

3. Get length and width using prompt and calculate an area of rectangle (area = length x width and the perimeter of rectangle (perimeter = 2 x (length + width))

+ +

4. Get radius using prompt and calculate the area of a circle (area = pi x r x r) and circumference of a circle(c = 2 x pi x r) where pi = 3.14.

+ +

5. Calculate the slope, x-intercept and y-intercept of y = 2x -2

+ +

6. Slope is m = (y2-y1)/(x2-x1). Find the slope between point (2, 2) and point(6,10)

+ +

7. Compare the slope of above two questions.

+ +

8. Calculate the value of y (y = x2 + 6x + 9). Try to use different x values and figure out at what x value y is 0.

+ +

9. Writ a script that prompt a user to enter hours and rate per hour. Calculate pay of the person?

+ +

10. If the length of your name is greater than 7 say, your name is long else say your name is short.

+ +

11. Compare your first name length and your family name length and you should get this output.

+ + let firstName = 'Asabeneh'
+ let lastName = 'Yetayeh'
+ Your first name, Asabeneh is longer than your family name, Yetayeh
+ +

12. Declare two variables myAge and yourAge and assign them initial values and myAge and yourAge.

+ + let myAge = 250
+ let yourAge = 25
+ I am 225 years older than you.
+ +

13. Using prompt get the year the user was born and if the user is 18 or above allow the user to drive if not tell the user to wait a certain amount of years.

+ + Enter birth year: 1995
+ You are 25. You are old enough to drive

+ + Enter birth year: 2005
+ You are 15. You will be allowed to drive after 3 years.
+ +

14. Write a script that prompt the user to enter number of years. Calculate the number of seconds a person can live. Assume some one lives just hundred years

+ + Enter number of years you live: 100
+ You lived 3153600000 seconds.
+ +

15. Create a human readable time format using the Date time object

+ +
+

Exercises: Level 3

+

Create a human readable time format using the Date time object. The hour and the minute should be all the time two digits(7 hours should be 07 and 5 minutes should be 05 )

+ +
+ \ No newline at end of file diff --git a/03_Day_Booleans_operators_date/03_day_starter/mvp.css b/03_Day_Booleans_operators_date/03_day_starter/mvp.css new file mode 100644 index 0000000..c6a761c --- /dev/null +++ b/03_Day_Booleans_operators_date/03_day_starter/mvp.css @@ -0,0 +1,486 @@ +/* MVP.css v1.9 - https://github.com/andybrewer/mvp */ + +:root { + --active-brightness: 0.85; + --border-radius: 5px; + --box-shadow: 2px 2px 10px; + --color: #118bee; + --color-accent: #118bee15; + --color-bg: #fff; + --color-bg-secondary: #e9e9e9; + --color-link: #118bee; + --color-secondary: #920de9; + --color-secondary-accent: #920de90b; + --color-shadow: #f4f4f4; + --color-table: #118bee; + --color-text: #000; + --color-text-secondary: #999; + --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; + --hover-brightness: 1.2; + --justify-important: center; + --justify-normal: left; + --line-height: 1.5; + --width-card: 285px; + --width-card-medium: 460px; + --width-card-wide: 800px; + --width-content: 1080px; +} + +@media (prefers-color-scheme: dark) { + :root[color-mode="user"] { + --color: #0097fc; + --color-accent: #0097fc4f; + --color-bg: #333; + --color-bg-secondary: #555; + --color-link: #0097fc; + --color-secondary: #e20de9; + --color-secondary-accent: #e20de94f; + --color-shadow: #bbbbbb20; + --color-table: #0097fc; + --color-text: #f7f7f7; + --color-text-secondary: #aaa; + } +} + +/* Layout */ +article aside { + background: var(--color-secondary-accent); + border-left: 4px solid var(--color-secondary); + padding: 0.01rem 0.8rem; +} + +body { + background: var(--color-bg); + color: var(--color-text); + font-family: var(--font-family); + line-height: var(--line-height); + margin: 0; + overflow-x: hidden; + padding: 0; +} + +footer, +header, +main { + margin: 0 auto; + max-width: var(--width-content); + padding: 3rem 1rem; +} + +hr { + background-color: var(--color-bg-secondary); + border: none; + height: 1px; + margin: 4rem 0; + width: 100%; +} + +section { + display: flex; + flex-wrap: wrap; + justify-content: var(--justify-important); +} + +section img, +article img { + max-width: 100%; +} + +section pre { + overflow: auto; +} + +section aside { + border: 1px solid var(--color-bg-secondary); + border-radius: var(--border-radius); + box-shadow: var(--box-shadow) var(--color-shadow); + margin: 1rem; + padding: 1.25rem; + width: var(--width-card); +} + +section aside:hover { + box-shadow: var(--box-shadow) var(--color-bg-secondary); +} + +[hidden] { + display: none; +} + +/* Headers */ +article header, +div header, +main header { + padding-top: 0; +} + +header { + text-align: var(--justify-important); +} + +header a b, +header a em, +header a i, +header a strong { + margin-left: 0.5rem; + margin-right: 0.5rem; +} + +header nav img { + margin: 1rem 0; +} + +section header { + padding-top: 0; + width: 100%; +} + +/* Nav */ +nav { + align-items: center; + display: flex; + font-weight: bold; + justify-content: space-between; + margin-bottom: 7rem; +} + +nav ul { + list-style: none; + padding: 0; +} + +nav ul li { + display: inline-block; + margin: 0 0.5rem; + position: relative; + text-align: left; +} + +/* Nav Dropdown */ +nav ul li:hover ul { + display: block; +} + +nav ul li ul { + background: var(--color-bg); + border: 1px solid var(--color-bg-secondary); + border-radius: var(--border-radius); + box-shadow: var(--box-shadow) var(--color-shadow); + display: none; + height: auto; + left: -2px; + padding: .5rem 1rem; + position: absolute; + top: 1.7rem; + white-space: nowrap; + width: auto; + z-index: 1; +} + +nav ul li ul::before { + /* fill gap above to make mousing over them easier */ + content: ""; + position: absolute; + left: 0; + right: 0; + top: -0.5rem; + height: 0.5rem; +} + +nav ul li ul li, +nav ul li ul li a { + display: block; +} + +/* Typography */ +code, +samp { + background-color: var(--color-accent); + border-radius: var(--border-radius); + color: var(--color-text); + display: inline-block; + margin: 0 0.1rem; + padding: 0 0.5rem; +} + +details { + margin: 1.3rem 0; +} + +details summary { + font-weight: bold; + cursor: pointer; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + line-height: var(--line-height); +} + +mark { + padding: 0.1rem; +} + +ol li, +ul li { + padding: 0.2rem 0; +} + +p { + margin: 0.75rem 0; + padding: 0; + width: 100%; +} + +pre { + margin: 1rem 0; + max-width: var(--width-card-wide); + padding: 1rem 0; +} + +pre code, +pre samp { + display: block; + max-width: var(--width-card-wide); + padding: 0.5rem 2rem; + white-space: pre-wrap; +} + +small { + color: var(--color-text-secondary); +} + +sup { + background-color: var(--color-secondary); + border-radius: var(--border-radius); + color: var(--color-bg); + font-size: xx-small; + font-weight: bold; + margin: 0.2rem; + padding: 0.2rem 0.3rem; + position: relative; + top: -2px; +} + +/* Links */ +a { + color: var(--color-link); + display: inline-block; + font-weight: bold; + text-decoration: none; +} + +a:active { + filter: brightness(var(--active-brightness)); + text-decoration: underline; +} + +a:hover { + filter: brightness(var(--hover-brightness)); + text-decoration: underline; +} + +a b, +a em, +a i, +a strong, +button { + border-radius: var(--border-radius); + display: inline-block; + font-size: medium; + font-weight: bold; + line-height: var(--line-height); + margin: 0.5rem 0; + padding: 1rem 2rem; +} + +button { + font-family: var(--font-family); +} + +button:active { + filter: brightness(var(--active-brightness)); +} + +button:hover { + cursor: pointer; + filter: brightness(var(--hover-brightness)); +} + +a b, +a strong, +button { + background-color: var(--color-link); + border: 2px solid var(--color-link); + color: var(--color-bg); +} + +a em, +a i { + border: 2px solid var(--color-link); + border-radius: var(--border-radius); + color: var(--color-link); + display: inline-block; + padding: 1rem 2rem; +} + +article aside a { + color: var(--color-secondary); +} + +/* Images */ +figure { + margin: 0; + padding: 0; +} + +figure img { + max-width: 100%; +} + +figure figcaption { + color: var(--color-text-secondary); +} + +/* Forms */ + +button:disabled, +input:disabled { + background: var(--color-bg-secondary); + border-color: var(--color-bg-secondary); + color: var(--color-text-secondary); + cursor: not-allowed; +} + +button[disabled]:hover { + filter: none; +} + +form { + border: 1px solid var(--color-bg-secondary); + border-radius: var(--border-radius); + box-shadow: var(--box-shadow) var(--color-shadow); + display: block; + max-width: var(--width-card-wide); + min-width: var(--width-card); + padding: 1.5rem; + text-align: var(--justify-normal); +} + +form header { + margin: 1.5rem 0; + padding: 1.5rem 0; +} + +input, +label, +select, +textarea { + display: block; + font-size: inherit; + max-width: var(--width-card-wide); +} + +input[type="checkbox"], +input[type="radio"] { + display: inline-block; +} + +input[type="checkbox"]+label, +input[type="radio"]+label { + display: inline-block; + font-weight: normal; + position: relative; + top: 1px; +} + +input[type="range"] { + padding: 0.4rem 0; +} + +input, +select, +textarea { + border: 1px solid var(--color-bg-secondary); + border-radius: var(--border-radius); + margin-bottom: 1rem; + padding: 0.4rem 0.8rem; +} + +input[readonly], +textarea[readonly] { + background-color: var(--color-bg-secondary); +} + +label { + font-weight: bold; + margin-bottom: 0.2rem; +} + +/* Tables */ +table { + border: 1px solid var(--color-bg-secondary); + border-radius: var(--border-radius); + border-spacing: 0; + display: inline-block; + max-width: 100%; + overflow-x: auto; + padding: 0; + white-space: nowrap; +} + +table td, +table th, +table tr { + padding: 0.4rem 0.8rem; + text-align: var(--justify-important); +} + +table thead { + background-color: var(--color-table); + border-collapse: collapse; + border-radius: var(--border-radius); + color: var(--color-bg); + margin: 0; + padding: 0; +} + +table thead th:first-child { + border-top-left-radius: var(--border-radius); +} + +table thead th:last-child { + border-top-right-radius: var(--border-radius); +} + +table thead th:first-child, +table tr td:first-child { + text-align: var(--justify-normal); +} + +table tr:nth-child(even) { + background-color: var(--color-accent); +} + +/* Quotes */ +blockquote { + display: block; + font-size: x-large; + line-height: var(--line-height); + margin: 1rem auto; + max-width: var(--width-card-medium); + padding: 1.5rem 1rem; + text-align: var(--justify-important); +} + +blockquote footer { + color: var(--color-text-secondary); + display: block; + font-size: small; + line-height: var(--line-height); + padding: 1.5rem 0; +} diff --git a/03_Day_Booleans_operators_date/03_day_starter/scripts/main.js b/03_Day_Booleans_operators_date/03_day_starter/scripts/main.js index 7762908..735dc0a 100644 --- a/03_Day_Booleans_operators_date/03_day_starter/scripts/main.js +++ b/03_Day_Booleans_operators_date/03_day_starter/scripts/main.js @@ -1 +1,252 @@ -// this is your main.js script \ No newline at end of file +// this is your main.js script + +// Declare firstName, lastName, country, city, age, isMarried, year variable and assign value to it and use the typeof operator to check different data types. +var currentDate = new Date(); +var firstName = "Faliana", lastName="Ranai", country = "Madagascar", city = "Antananarivo", age=21, isMarried=false; +var currentYear = currentDate.getFullYear(); +console.log(typeof(firstName), typeof(lastName), typeof(country), typeof(city), typeof(age), typeof(isMarried), typeof(currentYear)); + +// Check if type of '10' is equal to 10 +console.log(typeof('10'), typeof(10)); + +// Check if parseInt('9.8') is equal to 10 +console.log(parseInt('9.8')); + +// Boolean value is either true or false. +// Write three JavaScript statement which provide truthy value. +// Write three JavaScript statement which provide falsy value. +console.log(1==1, 2!=1, 2<3); +console.log(1>21, 69==70, 2>2); + + +// Figure out the result of the following comparison expression first without using console.log(). After you decide the result confirm it using console.log() +// 4 > 3 +// 4 >= 3 +// 4 < 3 +// 4 <= 3 +// 4 == 4 +// 4 === 4 +// 4 != 4 +// 4 !== 4 +// 4 != '4' +// 4 == '4' +// 4 === '4' +// Find the length of python and jargon and make a falsy comparison statement. +console.log(4 > 3, 4 >= 3, 4 < 3, 4 <= 3, 4 == 4, 4 === 4, 4 != 4, 4 !== 4, 4 != '4', 4 == '4', 4 === '4'); + + + +// Figure out the result of the following expressions first without using console.log(). After you decide the result confirm it by using console.log() +// 4 > 3 && 10 < 12 +// 4 > 3 && 10 > 12 +// 4 > 3 || 10 < 12 +// 4 > 3 || 10 > 12 +// !(4 > 3) +// !(4 < 3) +// !(false) +// !(4 > 3 && 10 < 12) +// !(4 > 3 && 10 > 12) +// !(4 === '4') +// There is no 'on' in both dragon and python +console.log(4 > 3 && 10 < 12, 4 > 3 && 10 > 12, 4 > 3 || 10 < 12, 4 > 3 || 10 > 12, !(4 > 3), !(4 < 3), !(false), !(4 > 3 && 10 < 12), !(4 > 3 && 10 > 12), !(4 === '4')); + + + +// Use the Date object to do the following activities +// What is the year today? +// What is the month today as a number? +// What is the date today? +// What is the day today as a number? +// What is the hours now? +// What is the minutes now? +// Find out the numbers of seconds elapsed from January 1, 1970 to now. +currentDate = new Date(); +console.log("year: ", currentDate.getFullYear()); +console.log("month: ", currentDate.getMonth()+1); +console.log("date: ", currentDate.getDate()); +console.log("day: ", currentDate.getDay()); +console.log("hours: ", currentDate.getHours()); +console.log("minutes: ", currentDate.getMinutes()); +console.log("numbers of seconds elapsed from January 1, 1970 to now: ", currentDate.getTime()/1000); + +// Write a script that prompt the user to enter base and height of the triangle and calculate an area of a triangle (area = 0.5 x b x h). + +// Enter base: 20 +// Enter height: 10 +// The area of the triangle is 100 +// var base = prompt('enter base the triangle: '); +// var height = prompt('enter height: '); +// console.log("area of a triangle: ", 0.5*base*height); + +// Write a script that prompt the user to enter side a, side b, and side c of the triangle and and calculate the perimeter of triangle (perimeter = a + b + c) + +// Enter side a: 5 +// Enter side b: 4 +// Enter side c: 3 +// The perimeter of the triangle is 12 +// var a = parseInt(prompt("enter side a: ")); +// var b = parseInt(prompt("enter side b: ")); +// var c = parseInt(prompt("enter side c: ")); +// console.log("The perimeter of the triangle is: ", a+b+c); + +// Get length and width using prompt and calculate an area of rectangle (area = length x width and the perimeter of rectangle (perimeter = 2 x (length + width)) +// var length = prompt("enter length: "); +// var width = prompt("enter width: "); +// console.log("area of rectangle: ", +length*(+width)); + +// Get radius using prompt and calculate the area of a circle (area = pi x r x r) and circumference of a circle(c = 2 x pi x r) where pi = 3.14. +// var r = prompt("enter radius: "); +// console.log("area of a circle: ", 3.14*(+r)*(+r)); +// console.log("circumference of a circle: ", 2*3.14*(+r)); + +// Calculate the slope, x-intercept and y-intercept of y = 2x -2 +console.log("y = 2x-2 ", "pour x = 0; y = -2 ", 'pour x = 1; y = 0'); +console.log("m = (y2-y1)/(x2-x1) ", (0-(-2))/(1-0)); + +// Slope is m = (y2-y1)/(x2-x1). Find the slope between point (2, 2) and point(6,10) +console.log("slope between point (2, 2) and point(6,10): ", (10-2)/(6-2)); + +// Compare the slope of above two questions. +console.log("equal"); + +// Calculate the value of y (y = x2 + 6x + 9). Try to use different x values and figure out at what x value y is 0. +console.log("y = x2 + 6x + 9 ", "delta = b²-4ac = ", (6**2)-4*(1*9)); +console.log("x=", -6/(2*1)); + +// Writ a script that prompt a user to enter hours and rate per hour. Calculate pay of the person? + +// Enter hours: 40 +// Enter rate per hour: 28 +// Your weekly earning is 1120 +// var hours = prompt("enter hours: "); +// var rateperhour = prompt("enter rate per hour: "); +// console.log("pay of the person: ",(+hours)*(+rateperhour)); + +// If the length of your name is greater than 7 say, your name is long else say your name is short. +if("Faliana".length>7) +{ + console.log("your name is long"); +} +else +{ + console.log("your name is short"); +} + +// Compare your first name length and your family name length and you should get this output. + +// let firstName = 'Asabeneh' +// let lastName = 'Yetayeh' + +// Your first name, Asabeneh is longer than your family name, Yetayeh + +firstName = 'Asabeneh'; +lastName = 'Yetayeh'; +if(firstName.length>lastName.length) +{ + console.log("Your first name, "+firstName+" is longer than your family name, "+lastName); +} +else +{ + console.log("Your first name, "+firstName+" is shorter or equal than your family name, "+lastName); +} + +// Declare two variables myAge and yourAge and assign them initial values and myAge and yourAge. + +// let myAge = 250 +// let yourAge = 25 + +// I am 225 years older than you. + +let myAge = 250; +let yourAge = 25; +if(myAge>yourAge) +{ + console.log("I am "+(myAge-yourAge)+" years older than you"); +} +else if(myAge==yourAge) +{ + console.log("We have the same age"); +} +else +{ + console.log("I am "+(yourAge-myAge)+" years younger than you"); +} + +// Using prompt get the year the user was born and if the user is 18 or above allow the user to drive if not tell the user to wait a certain amount of years. + +// Enter birth year: 1995 +// You are 25. You are old enough to drive + +// Enter birth year: 2005 +// You are 15. You will be allowed to drive after 3 years. + +// var birth = prompt("Enter birth year"); +// if(currentDate.getFullYear()-birth>=18) +// { +// console.log("You are "+(currentDate.getFullYear()-birth)+". You are old enough to drive"); +// } +// else +// { +// console.log("You are "+(currentDate.getFullYear()-birth)+". You will be allowed to drive after "+(18-(currentDate.getFullYear()-birth))+" years."); +// } + +// Write a script that prompt the user to enter number of years. Calculate the number of seconds a person can live. Assume some one lives just hundred years + +// Enter number of years you live: 100 +// You lived 3153600000 seconds. +// var numberofyears = prompt("enter number of years: "); +// console.log((+numberofyears)*365*24*60*60); + + + +// Create a human readable time format using the Date time object + +// YYYY-MM-DD HH:mm +// DD-MM-YYYY HH:mm +// DD/MM/YYYY HH:mm + +console.log(currentDate.getFullYear()+"-"+(currentDate.getMonth()+1)+"-"+currentDate.getDate()+" "+currentDate.getHours()+":"+currentDate.getMinutes()); +console.log(currentDate.getDate()+"-"+(currentDate.getMonth()+1)+"-"+currentDate.getFullYear()+" "+currentDate.getHours()+":"+currentDate.getMinutes()); +console.log(currentDate.getDate()+"/"+(currentDate.getMonth()+1)+"/"+currentDate.getFullYear()+" "+currentDate.getHours()+":"+currentDate.getMinutes()); + +// Create a human readable time format using the Date time object. The hour and the minute should be all the time two digits(7 hours should be 07 and 5 minutes should be 05 ) + +// YYY-MM-DD HH:mm eg. 20120-01-02 07:05 +var minutes = 5; +var h = 7 +if((+minutes)<10) +{ + minutes = '0'+minutes; +} +if((+h)<10) +{ + h = '0'+h; +} +console.log("2020-01-02 "+h+":"+minutes) + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/04_Day_Conditionals/04_day_starter/scripts/main.js b/04_Day_Conditionals/04_day_starter/scripts/main.js index ad0c1eb..b7133ab 100644 --- a/04_Day_Conditionals/04_day_starter/scripts/main.js +++ b/04_Day_Conditionals/04_day_starter/scripts/main.js @@ -1,3 +1,254 @@ // this is your main.js script -alert('Open the browser console whenever you work on JavaScript') \ No newline at end of file +// alert('Open the browser console whenever you work on JavaScript') + +// Get user input using prompt(“Enter your age:”). If user is 18 or older , give feedback:'You are old enough to drive' but if not 18 give another feedback stating to wait for the number of years he needs to turn 18. + +// Enter your age: 30 +// You are old enough to drive. + +// Enter your age:15 +// You are left with 3 years to drive. + +// var userinput = prompt("Enter your age:"); +// if((+userinput)>=18) +// { +// alert("You are old enough to drive"); +// } +// else +// { +// alert("You can drive after "+(18-(+userinput))+" years"); +// } + + +// Compare the values of myAge and yourAge using if … else. Based on the comparison and log the result to console stating who is older (me or you). Use prompt(“Enter your age:”) to get the age as input. + +// Enter your age: 30 +// You are 5 years older than me. +// var yourAge = prompt("Enter your age:"); +// var myAge = 18; +// if((+yourAge)>myAge) +// { +// console.log("You are "+((+yourAge)-myAge)+" years older than me."); +// } +// else if((+yourAge)==myAge) +// { +// console.log("We have the same age"); +// } +// else +// { +// console.log("You are "+(myAge-(+yourAge))+" years younger than me."); +// } + +// If a is greater than b return 'a is greater than b' else 'a is less than b'. Try to implement it in to ways + +// using if else +// ternary operator. + +// let a = 4 +// let b = 3 + +// 4 is greater than 3 + +let a = 4; +let b = 3; +if(a>b) +{ + console.log('a is greater than b'); +} +else +{ + console.log('a is less than b'); +} + +let bof = a>b; +bof + ? console.log('a is greater than b') + : console.log('a is less than b'); + +// Even numbers are divisible by 2 and the remainder is zero. How do you check, if a number is even or not using JavaScript? + +// Enter a number: 2 +// 2 is an even number + +// Enter a number: 9 +// 9 is is an odd number. +// var isEven = prompt("Enter a number: "); +// if((+isEven)%2==0) +// { +// console.log((+isEven)+" is an even number"); +// } +// else +// { +// console.log((+isEven)+" is an odd number"); +// } + + +// Write a code which can give grades to students according to theirs scores: + +// 80-100, A +// 70-89, B +// 60-69, C +// 50-59, D +// 0-49, F +var score = 69; +if((+score)>=80 && (+score)<=100) +{ + console.log("A") +} +if((+score)>=70 && (+score)<=86) +{ + console.log("B") +} +if((+score)>=60 && (+score)<=69) +{ + console.log("C") +} +if((+score)>=50 && (+score)<=59) +{ + console.log("D") +} +if((+score)>=0 && (+score)<=49) +{ + console.log("F") +} + +// Check if the season is Autumn, Winter, Spring or Summer. If the user input is : + +// September, October or November, the season is Autumn. +// December, January or February, the season is Winter. +// March, April or May, the season is Spring +// June, July or August, the season is Summer + +var season = "January"; +if(season == 'September' || season == 'October' || season == 'November') +{ + console.log("the season is Autumn"); +} +if(season == 'December' || season == 'January' || season == 'February') +{ + console.log("the season is Winter"); +} +if(season == 'March' || season == 'April' || season == 'May') +{ + console.log("the season is Spring"); +} +if(season == 'June' || season == 'July' || season == 'August') +{ + console.log("the season is Summer"); +} + +// Check if a day is weekend day or a working day. Your script will take day as an input. + +// What is the day today? Saturday +// Saturday is a weekend. + +// What is the day today? saturDaY +// Saturday is a weekend. + +// What is the day today? Friday +// Friday is a working day. + +// What is the day today? FrIDAy +// Friday is a working day. + +var isWeekEnd = "FrIdAY"; +if(isWeekEnd.toLowerCase()=="saturday" || isWeekEnd.toLowerCase()=="sunday") +{ + console.log((isWeekEnd.toLowerCase()).charAt(0).toUpperCase()+(isWeekEnd.toLowerCase()).slice(1)+" is weekend"); +} +else +{ + console.log((isWeekEnd.toLowerCase()).charAt(0).toUpperCase()+(isWeekEnd.toLowerCase()).slice(1)+" is a working day"); +} + + +// Write a program which tells the number of days in a month. + +// Enter a month: January +// January has 31 days. + +// Enter a month: JANUARY +// January has 31 day + +// Enter a month: February +// February has 28 days. + +// Enter a month: FEbruary +// February has 28 days. + +var numberofdaysinamonth = "december"; +if(numberofdaysinamonth.toLowerCase()=="january") +{ + var currentDate = new Date(); + var d = new Date(currentDate.getFullYear(), 0 + 1, 0); + console.log((numberofdaysinamonth.toLowerCase()).charAt(0).toUpperCase()+(numberofdaysinamonth.toLowerCase()).slice(1)+" has "+d.getDate()+" days"); +} +if(numberofdaysinamonth.toLowerCase()=="february") +{ + var currentDate = new Date(); + var d = new Date(currentDate.getFullYear(), 1 + 1, 0); + console.log((numberofdaysinamonth.toLowerCase()).charAt(0).toUpperCase()+(numberofdaysinamonth.toLowerCase()).slice(1)+" has "+d.getDate()+" days"); +} +if(numberofdaysinamonth.toLowerCase()=="march") +{ + var currentDate = new Date(); + var d = new Date(currentDate.getFullYear(), 2 + 1, 0); + console.log((numberofdaysinamonth.toLowerCase()).charAt(0).toUpperCase()+(numberofdaysinamonth.toLowerCase()).slice(1)+" has "+d.getDate()+" days"); +} +if(numberofdaysinamonth.toLowerCase()=="april") +{ + var currentDate = new Date(); + var d = new Date(currentDate.getFullYear(), 3 + 1, 0); + console.log((numberofdaysinamonth.toLowerCase()).charAt(0).toUpperCase()+(numberofdaysinamonth.toLowerCase()).slice(1)+" has "+d.getDate()+" days"); +} +if(numberofdaysinamonth.toLowerCase()=="may") +{ + var currentDate = new Date(); + var d = new Date(currentDate.getFullYear(), 4 + 1, 0); + console.log((numberofdaysinamonth.toLowerCase()).charAt(0).toUpperCase()+(numberofdaysinamonth.toLowerCase()).slice(1)+" has "+d.getDate()+" days"); +} +if(numberofdaysinamonth.toLowerCase()=="june") +{ + var currentDate = new Date(); + var d = new Date(currentDate.getFullYear(), 5 + 1, 0); + console.log((numberofdaysinamonth.toLowerCase()).charAt(0).toUpperCase()+(numberofdaysinamonth.toLowerCase()).slice(1)+" has "+d.getDate()+" days"); +} +if(numberofdaysinamonth.toLowerCase()=="july") +{ + var currentDate = new Date(); + var d = new Date(currentDate.getFullYear(), 6 + 1, 0); + console.log((numberofdaysinamonth.toLowerCase()).charAt(0).toUpperCase()+(numberofdaysinamonth.toLowerCase()).slice(1)+" has "+d.getDate()+" days"); +} +if(numberofdaysinamonth.toLowerCase()=="august") +{ + var currentDate = new Date(); + var d = new Date(currentDate.getFullYear(), 7 + 1, 0); + console.log((numberofdaysinamonth.toLowerCase()).charAt(0).toUpperCase()+(numberofdaysinamonth.toLowerCase()).slice(1)+" has "+d.getDate()+" days"); +} +if(numberofdaysinamonth.toLowerCase()=="september") +{ + var currentDate = new Date(); + var d = new Date(currentDate.getFullYear(), 8 + 1, 0); + console.log((numberofdaysinamonth.toLowerCase()).charAt(0).toUpperCase()+(numberofdaysinamonth.toLowerCase()).slice(1)+" has "+d.getDate()+" days"); +} +if(numberofdaysinamonth.toLowerCase()=="october") +{ + var currentDate = new Date(); + var d = new Date(currentDate.getFullYear(), 9 + 1, 0); + console.log((numberofdaysinamonth.toLowerCase()).charAt(0).toUpperCase()+(numberofdaysinamonth.toLowerCase()).slice(1)+" has "+d.getDate()+" days"); +} +if(numberofdaysinamonth.toLowerCase()=="november") +{ + var currentDate = new Date(); + var d = new Date(currentDate.getFullYear(), 10 + 1, 0); + console.log((numberofdaysinamonth.toLowerCase()).charAt(0).toUpperCase()+(numberofdaysinamonth.toLowerCase()).slice(1)+" has "+d.getDate()+" days"); +} +if(numberofdaysinamonth.toLowerCase()=="december") +{ + var currentDate = new Date(); + var d = new Date(currentDate.getFullYear(), 11 + 1, 0); + // console.log(d); + console.log((numberofdaysinamonth.toLowerCase()).charAt(0).toUpperCase()+(numberofdaysinamonth.toLowerCase()).slice(1)+" has "+d.getDate()+" days"); +} + diff --git a/05_Day_Arrays/05_day_starter/scripts/main.js b/05_Day_Arrays/05_day_starter/scripts/main.js index 50cc07e..c7bb968 100644 --- a/05_Day_Arrays/05_day_starter/scripts/main.js +++ b/05_Day_Arrays/05_day_starter/scripts/main.js @@ -1,3 +1,203 @@ -console.log(countries) -alert('Open the browser console whenever you work on JavaScript') -alert('Open the console and check if the countries has been loaded') \ No newline at end of file +// console.log(countries) +// alert('Open the browser console whenever you work on JavaScript') +// alert('Open the console and check if the countries has been loaded') + +const webTechs = [ + 'HTML', + 'CSS', + 'JavaScript', + 'React', + 'Redux', + 'Node', + 'MongoDB' + ]; + + +// Declare an empty array; +// Declare an array with more than 5 number of elements +// Find the length of your array +// Get the first item, the middle item and the last item of the array +// Declare an array called mixedDataTypes, put different data types in the array and find the length of the array. The array size should be greater than 5 +// Declare an array variable name itCompanies and assign initial values Facebook, Google, Microsoft, Apple, IBM, Oracle and Amazon +// Print the array using console.log() +// Print the number of companies in the array +// Print the first company, middle and last company +// Print out each company +// Change each company name to uppercase one by one and print them out +// Print the array like as a sentence: Facebook, Google, Microsoft, Apple, IBM,Oracle and Amazon are big IT companies. +// Check if a certain company exists in the itCompanies array. If it exist return the company else return a company is not found +// Filter out companies which have more than one 'o' without the filter method +// Sort the array using sort() method +// Reverse the array using reverse() method +// Slice out the first 3 companies from the array +// Slice out the last 3 companies from the array +// Slice out the middle IT company or companies from the array +// Remove the first IT company from the array +// Remove the middle IT company or companies from the array +// Remove the last IT company from the array +// Remove all IT companies + + +var tab = []; +tab = Array(6); +tab = webTechs; +console.log(tab); +console.log(tab.length); +console.log(tab[0], tab[(Math.round((tab.length)/2))-1],tab[tab.length-1]); + +var mixedDataTypes = [ + 'Asabeneh', + 250, + true, + { country: 'Finland', city: 'Helsinki' }, + { skills: ['HTML', 'CSS', 'JS', 'React', 'Python'] }, + 69.69 +]; +console.log(mixedDataTypes); +console.log(mixedDataTypes.length); + +var itCompanies = ["Facebook", "Google", "Microsoft", "Apple", "IBM", "Oracle", "Amazon"]; +console.log(itCompanies); +console.log(itCompanies.length); +console.log(itCompanies[0], itCompanies[Math.round(itCompanies.length/2)-1],itCompanies[itCompanies.length-1]); +console.log(itCompanies.toString()); +for(var i = 0; i < itCompanies.length; i++) +{ + itCompanies[i] = itCompanies[i].toUpperCase(); +} +console.log(itCompanies.toString()); +console.log(itCompanies.join(", ")+" are big IT companies."); + +var acertaincompany = "alibaba"; +if(itCompanies.indexOf(acertaincompany.toUpperCase())!=-1) +{ + console.log(acertaincompany+" is found"); +} +else{ + console.log(acertaincompany+" is not found"); +} + +var itCompaniesWithMoreThanOneO = []; +for(var i = 0; i < itCompanies.length; i++) +{ + if((itCompanies[i].toLocaleLowerCase()).indexOf('o')!=-1) + { + itCompaniesWithMoreThanOneO.push(itCompanies[i]); + } +} +console.log(itCompaniesWithMoreThanOneO); + +console.log(itCompanies.sort()); +console.log(itCompanies.reverse()); +console.log(itCompanies.slice(0,3)); +console.log(itCompanies.slice(itCompanies.length-3)); + +itCompanies.splice(0,1); +console.log(itCompanies); +itCompanies.splice(Math.round(itCompanies.length/2)-1, 1); +console.log(itCompanies); +itCompanies.splice(itCompanies.length-1, 1); +console.log(itCompanies); +itCompanies.splice(0, itCompanies.length); +console.log(itCompanies); + +// Create a separate countries.js file and store the countries array in to this file, +// create a separate file web_techs.js and store the webTechs array in to this file. Access both file in main.js file + +// First remove all the punctuations and change the string to array and count the number of words in the array +let text = +'I love teaching and empowering people. I teach HTML, CSS, JS, React, Python.'; +text = text.replace(/[.,\/#!$%\^&\*;:{}=\-_`~()]/g,""); +var words = text.split(" "); +console.log(words) +console.log(words.length); + +// In the following shopping cart add, remove, edit items +// add 'Meat' in the beginning of your shopping cart if it has not been already added +// add Sugar at the end of you shopping cart if it has not been already added +// remove 'Honey' if you are allergic to honey +// modify Tea to 'Green Tea' + + +const shoppingCart = ['Milk', 'Coffee', 'Tea', 'Honey']; +shoppingCart.unshift('Meat'); +shoppingCart.push("Sugar"); +shoppingCart.splice(shoppingCart.indexOf('Honey'), 1); +shoppingCart[shoppingCart.indexOf('Tea')] = 'Green Tea'; +console.log(shoppingCart); + +// In countries array check if 'Ethiopia' exists in the array if it exists print 'ETHIOPIA'. If it does not exist add to the countries list. +if(countries.indexOf('Ethiopia')!=-1) +{ + console.log("ETHIOPIA"); +} +else +{ + countries.push('Ethiopia'); +} + +// In the webTechs array check if Sass exists in the array and if it exists print 'Sass is a CSS preprocess'. +// If it does not exist add Sass to the array and print the array. +if(webTechs.indexOf('Sass')!=-1) +{ + console.log("Sass is a CSS preprocess"); +} +else +{ + webTechs.push('Sass'); + console.log(webTechs) +} + +// Concatenate the following two variables and store it in a fullStack variable. + +const frontEnd = ['HTML', 'CSS', 'JS', 'React', 'Redux']; +const backEnd = ['Node','Express', 'MongoDB']; + +var fullStack = frontEnd.concat(backEnd); +console.log(fullStack); + + + +// The following is an array of 10 students ages: +// Sort the array and find the min and max age +// Find the median age(one middle item or two middle items divided by two) +// Find the average age(all items divided by number of items) +// Find the range of the ages(max minus min) +// Compare the value of (min - average) and (max - average), use abs() method 1.Slice the first ten countries from the countries array + +const ages = [19, 22, 19, 24, 20, 25, 26, 24, 25, 24]; +ages.sort(); +console.log(ages[0], ages[ages.length-1]); +var median = 0; +if(ages%2==0) +{ + median = ages[(ages.length/2)-1]+ages[(ages.length/2)]; + median = median / 2; +} +else +{ + median = ages[(ages.length/2)-1] +} +console.log(ages); +console.log(median); + +// Find the middle country(ies) in the countries array +console.log(Math.round(countries.length/2)); +console.log(countries[Math.round(countries.length/2)-1]); + +// Divide the countries array into two equal arrays if it is even. If countries array is not even , one more country for the first half. +var middleofarray = Math.round(countries.length/2)-1; +var tab1 = []; +var tab2 = []; + +if(countries.length%2==0) +{ + tab1 = countries.slice(0, middleofarray+1); + tab2 = countries.slice(middleofarray+1, countries.length); +} +else +{ + tab1 = countries.slice(0, middleofarray+1); + tab2 = countries.slice(middleofarray+1, countries.length); +} +console.log(tab1.length, tab2.length) \ No newline at end of file diff --git a/06_Day_Loops/06_day_starter/data/countries.js b/06_Day_Loops/06_day_starter/data/countries.js index e57b005..3a7689a 100644 --- a/06_Day_Loops/06_day_starter/data/countries.js +++ b/06_Day_Loops/06_day_starter/data/countries.js @@ -192,4 +192,16 @@ const countries = [ 'Yemen', 'Zambia', 'Zimbabwe' -] +]; + +const webTechs = [ + 'HTML', + 'CSS', + 'JavaScript', + 'React', + 'Redux', + 'Node', + 'MongoDB' +]; + +const mernStack = ['MongoDB', 'Express', 'React', 'Node']; diff --git a/06_Day_Loops/06_day_starter/index.html b/06_Day_Loops/06_day_starter/index.html index 697bdd6..d33b426 100644 --- a/06_Day_Loops/06_day_starter/index.html +++ b/06_Day_Loops/06_day_starter/index.html @@ -3,6 +3,7 @@ 30DaysOfJavaScript:06 Day + diff --git a/06_Day_Loops/06_day_starter/scripts/main.js b/06_Day_Loops/06_day_starter/scripts/main.js index c6045c8..1736557 100644 --- a/06_Day_Loops/06_day_starter/scripts/main.js +++ b/06_Day_Loops/06_day_starter/scripts/main.js @@ -1,2 +1,386 @@ -console.log(countries) -alert('Open the console and check if the countries has been loaded') \ No newline at end of file +// console.log(countries) +// alert('Open the console and check if the countries has been loaded') + +// Iterate 0 to 10 using for loop, do the same using while and do while loop +for(var i = 0; i <= 10; i++) +{ + console.log(i); +} + +var i = 0; +while(i<=10) +{ + console.log(i); + i++; +} + +var i = 0; +do +{ + console.log(i); + i++; +}while(i<=10); + +// Iterate 10 to 0 using for loop, do the same using while and do while loop +for(var i = 10; i >= 0; i--) +{ + console.log(i); +} + +var i = 10; +while(i>=0) +{ + console.log(i); + i--; +} + +var i = 10; +do +{ + console.log(i); + i--; +}while(i>=0); + +// Write a loop that makes the following pattern using console.log(): +// # +// ## +// ### +// #### +// ##### +// ###### +// ####### +var pattern = ""; +for(i = 0; i <= 7; i++) +{ + pattern+="#"; + console.log(pattern); +} + +// Use loop to print the following pattern: +// 0 x 0 = 0 +// 1 x 1 = 1 +// 2 x 2 = 4 +// 3 x 3 = 9 +// 4 x 4 = 16 +// 5 x 5 = 25 +// 6 x 6 = 36 +// 7 x 7 = 49 +// 8 x 8 = 64 +// 9 x 9 = 81 +// 10 x 10 = 100 +for(i = 0; i <= 10; i++) +{ + console.log(`${i} x ${i} = ${i*i}`); +} + +// Using loop print the following pattern + +// i i^2 i^3 +// 0 0 0 +// 1 1 1 +// 2 4 8 +// 3 9 27 +// 4 16 64 +// 5 25 125 +// 6 36 216 +// 7 49 343 +// 8 64 512 +// 9 81 729 +// 10 100 1000 + +console.log(`i i^2 i^3`); +for(i = 0; i <= 10; i++) +{ + console.log(`${i} ${Math.pow(i, 2)} ${Math.pow(i, 3)}`); +} + +// Use for loop to iterate from 0 to 100 and print only even numbers +for(i = 0; i <= 100; i++) +{ + if(i%2==0 && i!=0) + { + console.log(i); + } +} + +// Use for loop to iterate from 0 to 100 and print only odd numbers +for(i = 0; i <= 100; i++) +{ + if(i%2!=0 && i!=0) + { + console.log(i); + } +} + +// Use for loop to iterate from 0 to 100 and print only prime numbers +console.log("nombre premiers: ") +var nbdiviseur = 0; +for(i = 1; i <= 100; i++) +{ + nbdiviseur = 0; + for(var j = 2; j`); + +// Using the above countries array, create the following new array. +tab = []; +for(i = 0; i < countries.length; i++) +{ + if(countries[i].toUpperCase()=="ALBANIA" || + countries[i].toUpperCase()=="BOLIVIA" || + countries[i].toUpperCase()=="CANADA" || + countries[i].toUpperCase()=="DENMARK" || + countries[i].toUpperCase()=="ETHIOPIA" || + countries[i].toUpperCase()=="FINLAND" || + countries[i].toUpperCase()=="GERMANY" || + countries[i].toUpperCase()=="HUNGARY"|| + countries[i].toUpperCase()=="IRELAND" || + countries[i].toUpperCase()=="JAPAN" || + countries[i].toUpperCase()=="KENYA") + { + tab.push(countries[i].toUpperCase()); + } +} +console.log(tab); + +// Using the above countries array, create an array for countries length'. +var countrylength = []; +for(i = 0; i < tab.length; i++) +{ + countrylength.push(tab[i].length); +} +console.log(countrylength); + +// Use the countries array to create the following array of arrays: + +// [ +// ['Albania', 'ALB', 7], +// ['Bolivia', 'BOL', 7], +// ['Canada', 'CAN', 6], +// ['Denmark', 'DEN', 7], +// ['Ethiopia', 'ETH', 8], +// ['Finland', 'FIN', 7], +// ['Germany', 'GER', 7], +// ['Hungary', 'HUN', 7], +// ['Ireland', 'IRE', 7], +// ['Iceland', 'ICE', 7], +// ['Japan', 'JAP', 5], +// ['Kenya', 'KEN', 5] +// ] + +var bref = []; +for(i = 0; i < tab.length; i++) +{ + bref.push([tab[i].charAt(0).toUpperCase() + tab[i].toLowerCase().slice(1), tab[i].substring(0,3), countrylength[i]]); +} +console.log(bref); + +// In above countries array, check if there is a country or countries containing the word 'land'. +// If there are countries containing 'land', print it as array. +// If there is no country containing the word 'land', print 'All these countries are without land'. +var countrieswithland = []; +for(i = 0; i < countries.length; i++) +{ + if(countries[i].indexOf("land")!=-1) + { + countrieswithland.push(countries[i]); + } +} +if(countrieswithland.length==0) +{ + console.log('All these countries are without land'); +} +else +{ + console.log(countrieswithland); +} + +// In above countries array, check if there is a country or countries end with a substring 'ia'. +// If there are countries end with, print it as array. +// If there is no country containing the word 'ai', print 'These are countries ends without ia'. +var countriesendswithia = []; +for(i = 0; i < countries.length; i++) +{ + if(countries[i].endsWith("ia")) + { + countriesendswithia.push(countries[i]); + } +} +if(countriesendswithia.length==0) +{ + console.log('These are countries ends without ia'); +} +else +{ + console.log(countriesendswithia); +} + +// Using the above countries array, find the country containing the biggest number of characters. + +var biggestnumberofcharacters = 0; +var bigPPcountry = ""; +for(i = 0; i < countries.length; i++) +{ + if(countries[i].length>biggestnumberofcharacters) + { + biggestnumberofcharacters = countries[i].length; + bigPPcountry = countries[i]; + } +} +console.log(bigPPcountry); + +// Using the above countries array, find the country containing only 5 characters. +var fiveletterscountry = []; +for(i = 0; i < countries.length; i++) +{ + if(countries[i].length==5) + { + fiveletterscountry.push(countries[i]); + } +} +console.log(fiveletterscountry); + +// Find the longest word in the webTechs array +var longestwordinthewebTechs = []; +var bigPPword = 0; +for(i = 0; i < webTechs.length; i++) +{ + if(webTechs[i].length>bigPPword) + { + bigPPword = webTechs[i].length; + longestwordinthewebTechs = webTechs[i]; + } +} +console.log(longestwordinthewebTechs); + +// Use the webTechs array to create the following array of arrays: + +// [["HTML", 4], ["CSS", 3],["JavaScript", 10],["React", 5],["Redux", 5],["Node", 4],["MongoDB", 7]] +var bref2 = []; +for(i = 0; i < webTechs.length; i++) +{ + bref2.push([webTechs[i], webTechs[i].length]); +} +console.log(bref2); + +// An application created using MongoDB, Express, React and Node is called a MERN stack app. Create the acronym MERN by using the array mernStack +var acronymMERN = ""; +for(i = 0; i < mernStack.length; i++) +{ + acronymMERN+=mernStack[i][0]; +} +console.log(acronymMERN); + +// Iterate through the array, ["HTML", "CSS", "JS", "React", "Redux", "Node", "Express", "MongoDB"] using a for loop or for of loop and print out the items. +// letie + +// This is a fruit array , ['banana', 'orange', 'mango', 'lemon'] reverse the order using loop without using a reverse method. +var fruits = ['banana', 'orange', 'mango', 'lemon']; +var tempfruit = []; +for(i = fruits.length-1; i >= 0 ; i--) +{ + tempfruit.push(fruits[i]); +} +console.log(tempfruit); + +// Print all the elements of array as shown below. +// HTML +// CSS +// JS +// REACT +// NODE +// EXPRESS +// MONGODB + + const fullStack = [ + ['HTML', 'CSS', 'JS', 'React'], + ['Node', 'Express', 'MongoDB'] + ]; + +for(i = 0; i < fullStack.length; i++) +{ + for(var j = 0; jcount) + { + count = persons[i][1].skills.length; + person = persons[i][0]; + } +} +console.log(person + "is the person who has many skills in the users object"); + +// 2) Count logged in users, count users having greater than equal to 50 points from the following object. + +count = 0; +for(var i = 0; i < persons.length; i++) +{ + if(persons[i][1].isLoggedIn == true) + { + count ++; + } +} +console.log(count+" logged in users"); + +count = 0; +for(var i = 0; i < persons.length; i++) +{ + if(persons[i][1].points > 50) + { + count ++; + } +} +console.log(count+" users having greater to 50 points from the following object"); + +count = 0; +for(var i = 0; i < persons.length; i++) +{ + if(persons[i][1].points == 50) + { + count ++; + } +} +console.log(count+" users having equal to 50 points from the following object"); + + + +// 3) Find people who are MERN stack developer from the users object + +function isMERN(skills) +{ + var mern = ['MongoDB', 'Express', 'React', 'Node']; + for(var i = 0; i < mern.length; i++) + { + if(skills.indexOf(mern[i])==-1) + { + return false; + } + } + return true; +} + +var mern = []; +for(var i = 0; i < persons.length; i++) +{ + if(isMERN(persons[i][1].skills)==true) + { + mern.push(persons[i][0]); + } +} +console.log(mern, "are the mern dev"); + +// 4) Set your name in the users object without modifying the original users object +users.Faliana = Object.assign({}, users.Paul); +console.log(users.Faliana); + +// 5) Get all keys or properties of users object +console.log(Object.keys(users)); + +// 6) Get all the values of users object +console.log(Object.values(users)); + +// 7) Use the countries object to print a country name, capital, populations and languages. +console.log("print a country name: ", countries[0].name); +console.log("print a country capital: ", countries[0].capital); +console.log("print a country populations: ", countries[0].population); +console.log("print a country languages: ", countries[0].languages); + +// Exercises: Level 3 + +// 1) Create an object literal called personAccount. It has firstName, lastName, incomes, +// expenses properties and it has totalIncome, totalExpense, accountInfo,addIncome, addExpense and accountBalance methods. +// Incomes is a set of incomes and its description and expenses is a set of incomes and its description. + + var personAccount = { + firstName: "", + lastName: "", + incomes: 0, + expenses: 0, + totalIncome: function(){}, + totalExpense: function(){}, + accountInfo: function(){}, + addIncome: function(){}, + addExpense: function(){}, + accountBalance: function(){} + }; + console.log(personAccount); + +// 2) **** Questions:2, 3 and 4 are based on the following two arrays:users and products () + +const users2 = [ + { + _id: 'ab12ex', + username: 'Alex', + email: 'alex@alex.com', + password: '123123', + createdAt:'08/01/2020 9:00 AM', + isLoggedIn: false + }, + { + _id: 'fg12cy', + username: 'Asab', + email: 'asab@asab.com', + password: '123456', + createdAt:'08/01/2020 9:30 AM', + isLoggedIn: true + }, + { + _id: 'zwf8md', + username: 'Brook', + email: 'brook@brook.com', + password: '123111', + createdAt:'08/01/2020 9:45 AM', + isLoggedIn: true + }, + { + _id: 'eefamr', + username: 'Martha', + email: 'martha@martha.com', + password: '123222', + createdAt:'08/01/2020 9:50 AM', + isLoggedIn: false + }, + { + _id: 'ghderc', + username: 'Thomas', + email: 'thomas@thomas.com', + password: '123333', + createdAt:'08/01/2020 10:00 AM', + isLoggedIn: false + } + ]; + + const products = [ + { + _id: 'eedfcf', + name: 'mobile phone', + description: 'Huawei Honor', + price: 200, + ratings: [ + { userId: 'fg12cy', rate: 5 }, + { userId: 'zwf8md', rate: 4.5 } + ], + likes: [] + }, + { + _id: 'aegfal', + name: 'Laptop', + description: 'MacPro: System Darwin', + price: 2500, + ratings: [], + likes: ['fg12cy'] + }, + { + _id: 'hedfcg', + name: 'TV', + description: 'Smart TV:Procaster', + price: 400, + ratings: [{ userId: 'fg12cy', rate: 5 }], + likes: ['fg12cy'] + } +] + +// Imagine you are getting the above users collection from a MongoDB database. + +// a. Create a function called signUp which allows user to add to the collection. If user exists, inform the user that he has already an account. + + function signUp(username, email, password) + { + var user = {}; + user._id = "random"; + user.username = username; + user.email = email; + user.password = password; + user.createdAt = new Date(); + user.isLoggedIn = false; + if(checkExistedUser(username, password)==false) + { + users2.push(user); + } + else + { + alert(username+" already an account"); + } + + } + function checkExistedUser(username, password) + { + for(var i = 0; i < users2.length; i++) + { + if(users2[i].username == username || users2[i].password == password) + { + return true; + } + } + return false; + } + signUp("poupoussy", "poupoussy@gmail.com", "poupoussypoupoussy"); + console.log(users2); + + // signUp("Alex", "poupoussy@gmail.com", "poupoussypoupoussy"); + +// b. Create a function called signIn which allows user to sign in to the application +function signIn(email, password) +{ + for(var i = 0; i < users2.length; i++) + { + if(users2[i].email==email && users2[i].password==password) + { + return "logged in"; + } + } + return "wrong email or password"; +} +console.log(signIn("poupoussy@gmail.com", "poupoussy")); +console.log(signIn("poupoussy@gmail.com", "poupoussypoupoussy")); + + + +// 3) The products array has three elements and each of them has six properties. + +// a. Create a function called rateProduct which rates the product +function rateProduct(product, user, rate) +{ + product.ratings.push({userId: user._id, rate: rate}); +} +// console.log("alala", users2[5]); +rateProduct(products[0], users2[5], 3.69); +console.log(products); + +// b. Create a function called averageRating which calculate the average rating of a product +function averageRating(product) +{ + var count = 0; + for(var i = 0; i < product.ratings.length; i++) + { + count += product.ratings[i].rate; + } + return count/product.ratings.length; +} +console.log("averageRating", averageRating(products[0])) + +// 4) Create a function called likeProduct. This function will helps to like to the product if it is not liked and remove like if it was liked. +function likeProduct(product, user){ + if(product.likes.indexOf(user._id)==-1 || product.likes.length==0) + { + product.likes.push(user._id); + } + else + { + product.likes.splice(product.likes.indexOf(user._id), 1); + } + // console.log(product.likes); +} +likeProduct(products[0], users2[5]); +console.log("ajout like", products[0]); +likeProduct(products[0], users2[5]); +console.log("delete like", products[0]); + diff --git a/09_Day_Higher_order_functions/09_day_starter/scripts/main.js b/09_Day_Higher_order_functions/09_day_starter/scripts/main.js index c6045c8..147eb2f 100644 --- a/09_Day_Higher_order_functions/09_day_starter/scripts/main.js +++ b/09_Day_Higher_order_functions/09_day_starter/scripts/main.js @@ -1,2 +1,260 @@ console.log(countries) -alert('Open the console and check if the countries has been loaded') \ No newline at end of file +// alert('Open the console and check if the countries has been loaded') + + +// Exercises: Level 1 +// 1) Explain the difference between forEach, map, filter, and reduce. + +// forEach permet de parcourir chaque élément d'un tableau +// map permet de parcourir et de changer les éléments +// filter permet de filter les éléments d'un tableau avec une condition (par exemple prendre les noms qui ont que 5 lettres) +// reduce... + +const countries2 = ['Finland', 'Sweden', 'Denmark', 'Norway', 'IceLand'] +const names = ['Asabeneh', 'Mathias', 'Elias', 'Brook'] +const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] +const products = [ + { product: 'banana', price: 3 }, + { product: 'mango', price: 6 }, + { product: 'potato', price: ' ' }, + { product: 'avocado', price: 8 }, + { product: 'coffee', price: 10 }, + { product: 'tea', price: '' }, +] + +// 3) Use forEach to console.log each country in the countries array. + +countries2.forEach(function(element){ + console.log(element); +}); + +// 4) Use forEach to console.log each name in the names array. + +names.forEach(function(element){ + console.log(element); +}); + + +// 5) Use forEach to console.log each number in the numbers array. + +numbers.forEach(function(element){ + console.log(element); +}); + +// 6) Use map to create a new array by changing each country to uppercase in the countries array. + +var temp = countries2.map(function(country){ + return country.toUpperCase(); +}); +console.log(temp); + +// 7) Use map to create an array of countries length from countries array. + +temp = countries2.map(function(country){ + return country.length; +}); +console.log(temp); + +// 8) Use map to create a new array by changing each number to square in the numbers array + +temp = numbers.map(function(number){ + return number*number; +}); +console.log(temp); + +// 9) Use map to change to each name to uppercase in the names array + +temp = names.map(function(name){ + return name.toUpperCase(); +}); +console.log(temp); + +// 10) Use map to map the products array to its corresponding prices. + +temp = products.map(function(product){ + return product.price; +}) +console.log(temp); + +// 11) Use filter to filter out countries containing land. + +temp = countries.filter(function(country){ + return country.name.indexOf("land")!=-1; +}) + +console.log(temp); + +// 12) Use filter to filter out countries having six character. + +temp = countries.filter(function(country){ + return country.name.length==6; +}) + +console.log(temp); + +// 13) Use filter to filter out countries containing six letters and more in the country array. + +temp = countries.filter(function(country){ + return country.name.length>=6; +}) + +console.log(temp); + +// 14) Use filter to filter out country start with 'E'; + +temp = countries.filter(function(country){ + return country.name.startsWith("E")==true; +}) +console.log(temp); + +// 15) Use filter to filter out only prices with values. + +temp = products.filter(function(product){ + return typeof product.price == "number"; +}) +console.log(temp); + +// 16) Declare a function called getStringLists which takes an array as a parameter and then returns an array only with string items. + +function getStringLists(tab){ + return tab.filter(function(t){ return typeof t == "string" }); +} + +// Use reduce to sum all the numbers in the numbers array. +// Use reduce to concatenate all the countries and to produce this sentence: Estonia, Finland, Sweden, Denmark, Norway, and IceLand are north European countries +// Explain the difference between some and every +// Use some to check if some names' length greater than seven in names array +// Use every to check if all the countries contain the word land +// Explain the difference between find and findIndex. +// Use find to find the first country containing only six letters in the countries array + +temp = countries.find(function(country){ + return country.name.length==6; +}) +console.log(temp); + +// Use findIndex to find the position of the first country containing only six letters in the countries array + +temp = countries.findIndex(function(country){ + return country.name.length==6; +}) +console.log(temp); + +// Use findIndex to find the position of Norway if it doesn't exist in the array you will get -1. + +temp = countries.find(function(country){ + return country.name=="Norway"; +}) +console.log(temp); + +// Use findIndex to find the position of Russia if it doesn't exist in the array you will get -1. + +temp = countries.find(function(country){ + return country.name=="Russia"; +}) +console.log(temp); + + +// Exercises: Level 2 + +// 1- Find the total price of products by chaining two or more array iterators(eg. arr.map(callback).filter(callback).reduce(callback)) +// 2- Find the sum of price of products using only reduce reduce(callback)) +// 3- Declare a function called categorizeCountries which returns an array of countries which have some common pattern(you find the countries array in this repository as countries.js(eg 'land', 'ia', 'island','stan')). +// 4- Create a function which return an array of objects, which is the letter and the number of times the letter use to start with a name of a country. +// 5- Declare a getFirstTenCountries function and return an array of ten countries. Use different functional programming to work on the countries.js array +// 6- Declare a getLastTenCountries function which which returns the last ten countries in the countries array. +// 7- Find out which letter is used many times as initial for a country name from the countries array (eg. Finland, Fiji, France etc) + +// Exercises: Level 3 + +// 1) Use the countries information, in the data folder. Sort countries by name, by capital, by population + + countries.sort(function(a,b){ + if(a.nameb.name) return 1 + return 0; + }); + + console.log(countries); + + countries.sort(function(a,b){ + if(a.capitalb.capital) return 1 + return 0; + }); + + console.log(countries); + + countries.sort(function(a,b){ + if(a.populationb.population) return 1 + return 0; + }); + + console.log(countries); + +// *** Find the 10 most spoken languages: + +function mostSpokenLanguages(countries, number){ + + var temp = []; + + for(var i = 0; i < countries.length; i++) + { + for(var j = 0; j < countries[i].languages.length; j++) + { + var element = countries[i].languages[j]; + var count = 0; + count = countries.filter(function(value){ + return value.languages.indexOf(element)!=-1; + }).length; + // console.log(count); + temp.push({country: element, count: count}); + } + } + + var retour = temp.filter(function(value, index, self){ + // console.log("indexOf", temp.indexOf(value)); + return self.indexOf(value)==self.findIndex(function(t){ + return value.country == t.country && t.count==value.count + }); + }); + + retour.sort(function(a, b){ + if(a.countb.count) return -1 + return 0 + }); + + return retour.slice(0, number); +}; + +// Your output should look like this +console.log(mostSpokenLanguages(countries, 10)); +console.log(mostSpokenLanguages(countries, 3)); + + +// *** Use countries_data.js file create a function which create the ten most populated countries +function mostPopulatedCountries(countries, number){ + var temp = countries.filter(function(value){ + return typeof value.population == 'number'; + }).sort(function(a, b){ + if(a.populationb.population) return -1 + return 0; + }); + + return temp.slice(0, number).map(function(value){ + return {country: value.name, population: value.population + } + }); +} + + +console.log(mostPopulatedCountries(countries, 10)) \ No newline at end of file diff --git a/10_Day_Sets_and_Maps/10_day_starter/scripts/main.js b/10_Day_Sets_and_Maps/10_day_starter/scripts/main.js index c6045c8..3831070 100644 --- a/10_Day_Sets_and_Maps/10_day_starter/scripts/main.js +++ b/10_Day_Sets_and_Maps/10_day_starter/scripts/main.js @@ -1,2 +1,94 @@ console.log(countries) -alert('Open the console and check if the countries has been loaded') \ No newline at end of file + +const a = [4, 5, 8, 9]; +const b = [3, 4, 5, 7]; +const countries2 = ['Finland', 'Sweden', 'Norway']; + +// Exercises:Level 1 + +// 1- create an empty set +var emptyset = new Set(); +console.log(emptyset); + +// 2- Create a set containing 0 to 10 using loop +for(var i=0; i <= 10; i++){ + emptyset.add(i); +} +console.log(emptyset); + +// 3- Remove an element from a set +emptyset.delete(4); +console.log(emptyset); + +// 4- Clear a set +emptyset.clear(); +console.log(emptyset); + +// 5- Create a set of 5 string elements from array +var array = ["element1", "element2", "element3", "element4", "element5"]; +emptyset = new Set(array); +console.log(emptyset); + +// 6- Create a map of countries and number of characters of a country +var map = new Map(); +for(var i = 0; i < countries.length; i++) +{ + map.set(countries[i].name, countries[i].name.length); +} +console.log(map); + +// Exercises:Level 2 + +// 1) Find a union b +var c = [...a, ...b]; +var C = new Set(c); +console.log(C); + +// 2) Find a intersection b +var B = new Set(b); +c = a.filter(function(value){ + return B.has(value) +}) +C = new Set(c); +console.log(C); + +// 3) Find a with b + + + +// Exercises:Level 3 +// 1- How many languages are there in the countries object file. +var tab = []; +for(var i = 0; i < countries.length; i++) +{ + for(var j = 0; j < countries[i].languages.length; j++) + { + tab.push(countries[i].languages[j]); + } +} +emptyset = new Set(tab); +console.log("number of languages in countries: ", emptyset.size); + +var verif = tab.filter(function(value, index, self){ + return tab.indexOf(value) == index; +}); + +console.log("verification : ", verif.length); + +// *** Use the countries data to find the 10 most spoken languages: + + // Your output should look like this +// console.log(mostSpokenLanguages(countries, 10)) +// [ +// { English: 91 }, +// { French: 45 }, +// { Arabic: 25 }, +// { Spanish: 24 }, +// { Russian: 9 }, +// { Portuguese: 9 }, +// { Dutch: 8 }, +// { German: 7 }, +// { Chinese: 5 }, +// { Swahili: 4 }, +// { Serbian: 4 } +// ] diff --git a/11_Day_Destructuring_and_spreading/11_day_starter/scripts/main.js b/11_Day_Destructuring_and_spreading/11_day_starter/scripts/main.js index c6045c8..054c2d6 100644 --- a/11_Day_Destructuring_and_spreading/11_day_starter/scripts/main.js +++ b/11_Day_Destructuring_and_spreading/11_day_starter/scripts/main.js @@ -1,2 +1,185 @@ console.log(countries) -alert('Open the console and check if the countries has been loaded') \ No newline at end of file +// alert('Open the console and check if the countries has been loaded') + +// Exercises: Level 1 + +const constants = [2.72, 3.14, 9.81, 37, 100] +const countries2 = ['Finland', 'Estonia', 'Sweden', 'Denmark', 'Norway'] +const rectangle = { + width: 20, + height: 10, + area: 200, + perimeter: 60 +} +const users = [ +{ + name:'Brook', + scores:75, + skills:['HTM', 'CSS', 'JS'], + age:16 +}, +{ + name:'Alex', + scores:80, + skills:['HTM', 'CSS', 'JS'], + age:18 +}, +{ + name:'David', + scores:75, + skills:['HTM', 'CSS'], + age:22 +}, +{ + name:'John', + scores:85, + skills:['HTML'], + age:25 +}, +{ + name:'Sara', + scores:95, + skills:['HTM', 'CSS', 'JS'], + age: 26 +}, +{ + name:'Martha', + scores:80, + skills:['HTM', 'CSS', 'JS'], + age:18 +}, +{ + name:'Thomas', + scores:90, + skills:['HTM', 'CSS', 'JS'], + age:20 +} +] + + +// 1) Destructure and assign the elements of constants array to e, pi, gravity, humanBodyTemp, waterBoilingTemp. +var [e, pi, gravity, humanBodyTemp, waterBoilingTemp] = constants; +console.log(e, pi, gravity, humanBodyTemp, waterBoilingTemp); + +// 2) Destructure and assign the elements of countries array to fin, est, sw, den, nor +var [fin, est, sw, den, nor] = countries2; +console.log(fin, est, sw, den, nor); + +// 3) Destructure the rectangle object by its properties or keys. +var {width, height, area, perimeter} = rectangle; +console.log(width, height, area, perimeter); + + +// Exercises: Level 2 + +// 1) Iterate through the users array and get all the keys of the object using destructuring +var temp = []; +for(var i = 0; i < users.length; i++) +{ + var {name,scores,skills,age} = users[i]; + if(skills.length<2) + { + temp.push(users[i]); + } + console.log(name,scores,skills,age); +} + + +// 2) Find the persons who have less than two skills +var tab = users.filter(function(value){ + return value.skills.length<2; +}); +console.log(tab); + +console.log(temp); + +// Exercises: Level 3 + +// 1) Destructure the countries object print name, capital, population and languages of all countries +for(var i = 0; i < countries.length; i++) +{ + var {name, capital, population, languages} = countries[i]; + console.log(name, capital, population, languages); +} + + +// 2) A junior developer structure student name, skills and score in array of arrays which may not easy to read. +// Destructure the following array name to name, +// skills array to skills, +// scores array to scores, +// JavaScript score to jsScore +// and React score to reactScore variable in one line. + +const student = ['David', ['HTM', 'CSS', 'JS', 'React'], [98, 85, 90, 95]] + +var [name, skills, jsScore, reactScore] = [student[0], student[1], student[2][2], student[2][3]]; +// oui c'est intéressant mais la bonne façon de faire c'est: +var [name, skills, scores, jsScores, reactScore] = [student[0], student[1], student[2], scores[2], scores[3]]; + +console.log(name, skills, jsScore, reactScore) + +// David (4) ["HTM", "CSS", "JS", "React"] 90 95 + + +// 3- Write a function called convertArrayToObject which can convert the array to a structure object. +const students = [ + ['David', ['HTM', 'CSS', 'JS', 'React'], [98, 85, 90, 95]], + ['John', ['HTM', 'CSS', 'JS', 'React'], [85, 80, 85, 80]] + ]; + +function convertArrayToObject(tab){ + var retour = []; + for(var i = 0; i < tab.length; i++) + { + var [name, skills, scores] = tab[i]; + retour.push({ name: name, skills: skills, scores: scores }); + } + return retour; +} + +console.log(convertArrayToObject(students)); + + +// 4 - Copy the student object to newStudent without mutating the original object. In the new object add the following ? + +// Add Bootstrap with level 8 to the front end skill sets +// Add Express with level 9 to the back end skill sets +// Add SQL with level 8 to the data base skill sets +// Add SQL without level to the data science skill sets + +const student2 = { + name: 'David', + age: 25, + skills: { + frontEnd: [ + { skill: 'HTML', level: 10 }, + { skill: 'CSS', level: 8 }, + { skill: 'JS', level: 8 }, + { skill: 'React', level: 9 } + ], + backEnd: [ + { skill: 'Node',level: 7 }, + { skill: 'GraphQL', level: 8 }, + ], + dataBase:[ + { skill: 'MongoDB', level: 7.5 }, + ], + dataScience:['Python', 'R', 'D3.js'] + } + } + +var newStudent = {...student2}; +var {name, age, skills} = student2; + +skills.frontEnd.push({ ...skills.frontEnd[0], skill: "Bootstrap", level: 8 }); +console.log(skills.frontEnd); + +skills.backEnd.push({ ...skills.backEnd[0], skill: "Express", level: 9 }); +console.log(skills.backEnd); + +skills.dataBase.push({ ...skills.dataBase[0], skill: "SQL", level: 8 }); +console.log(skills.dataBase); + +skills.dataScience.push("SQL"); +console.log(skills.dataScience); + diff --git a/12_Day_Regular_expressions/12_day_starter/scripts/main.js b/12_Day_Regular_expressions/12_day_starter/scripts/main.js index c6045c8..e42654c 100644 --- a/12_Day_Regular_expressions/12_day_starter/scripts/main.js +++ b/12_Day_Regular_expressions/12_day_starter/scripts/main.js @@ -1,2 +1,108 @@ console.log(countries) -alert('Open the console and check if the countries has been loaded') \ No newline at end of file +// alert('Open the console and check if the countries has been loaded') + +// Exercises: Level 1 + +// 1) Calculate the total annual income of the person from the following text: +// ‘He earns 4000 euro from salary per month, 10000 euro annual bonus, 5500 euro online courses per month.’ +var txt = "He earns 4000 euro from salary per month, 10000 euro annual bonus, 5500 euro online courses per month."; +var pattern = /\d+/gi; + +const matches = txt.match(pattern) + +console.log(matches) + +var annualincome = (+matches[0] * 12) + (+matches[1]) + (+matches[2] * 12); +console.log(annualincome) + + +// 2) The position of some particles on the horizontal x-axis -12, -4, -3 and -1 in the negative direction, 0 at origin, 4 and 8 in the positive direction. Extract these numbers and find the distance between the two furthest particles. +// points = ['-1', '2', '-4', '-3', '-1', '0', '4', '8'] +// sortedPoints = [-4, -3, -1, -1, 0, 2, 4, 8] +// distance = 12 + +// Write a pattern which identify if a string is a valid JavaScript variable + +// is_valid_variable('first_name') # True +// is_valid_variable('first-name') # False +// is_valid_variable('1first_name') # False +// is_valid_variable('firstname') # True + +// Exercises: Level 2 + +// 1) Write a function called tenMostFrequentWords which get the ten most frequent word from a string? + + var paragraph = `I love teaching. If you do not love teaching what else can you love. I love Python if you do not love something which can give you all the capabilities to develop an application what else can you love.` + function tenMostFrequentWords(string){ + var pattern = /\b[a-z]+\b/gi; + var tab = string.match(pattern) + + var retour = tab.filter(function(value, index, self){ + return self.indexOf(value) == index; + }).map(function(value){ + return { word: value, count: 0 } + }) + + for(var i = 0; i < retour.length; i++) + { + for(var j = 0; j < tab.length; j++) + { + if(retour[i].word == tab[j]) + { + retour[i].count++; + } + } + } + + retour.sort(function(a, b){ + if(a.countb.count) return -1 + return 0 + }) + + return retour.slice(0,10); + } + console.log(tenMostFrequentWords(paragraph)) + + // Exercises: Level 3 + + // 1) Writ a function which cleans text. Clean the following text. After cleaning, count three most frequent words in the string. + + var sentence = `%I $am@% a %tea@cher%, &and& I lo%#ve %tea@ching%;. There $is nothing; &as& mo@re rewarding as educa@ting &and& @emp%o@wering peo@ple. ;I found tea@ching m%o@re interesting tha@n any other %jo@bs. %Do@es thi%s mo@tivate yo@u to be a tea@cher!?` + function cleanText(text){ + return text.replace(/[%$@#&;!?]/gi, ''); + } + console.log(cleanText(sentence)) + + function threeMostFrequentWords(string){ + var pattern = /\b[a-z]+\b/gi; + var tab = string.match(pattern) + + var retour = tab.filter(function(value, index, self){ + return self.indexOf(value) == index; + }).map(function(value){ + return { word: value, count: 0 } + }) + + for(var i = 0; i < retour.length; i++) + { + for(var j = 0; j < tab.length; j++) + { + if(retour[i].word == tab[j]) + { + retour[i].count++; + } + } + } + + retour.sort(function(a, b){ + if(a.countb.count) return -1 + return 0 + }) + + return retour.slice(0,3); + } + + var farany = cleanText(sentence); + console.log(threeMostFrequentWords(farany)) \ No newline at end of file diff --git a/13_Day_Console_object_methods/13_day_starter/scripts/main.js b/13_Day_Console_object_methods/13_day_starter/scripts/main.js index c6045c8..42be204 100644 --- a/13_Day_Console_object_methods/13_day_starter/scripts/main.js +++ b/13_Day_Console_object_methods/13_day_starter/scripts/main.js @@ -1,2 +1,59 @@ console.log(countries) -alert('Open the console and check if the countries has been loaded') \ No newline at end of file +// alert('Open the console and check if the countries has been loaded') + +// Exercises:Level 1 + +// Display the countries array as a table + console.table(countries) +// Display the countries object as a table + console.table(countries[0]) +// Use console.group() to group logs + console.group('Countries') + console.table(countries) + console.groupEnd() + +// Exercises:Level 2 + +// 10 > 2 * 10 use console.assert() + console.assert( 10 > 2 * 10, "error message"); + +// Write a warning message using console.warn() + console.warn("bibitiko 19cm") + +// Write an error message using console.error() + console.error("bibitiko 19cm") + +// Exercises:Level 3 + +// Check the speed difference among the following loops: while, for, for of, forEach + +console.group('while loop') + console.time('while loop') + var i = 0; + while(i < countries.length) + { + + console.log(countries[i]) + i++; + } + console.groupEnd('while loop') + +console.timeEnd('while loop') + +console.group('for loop') +console.time('for loop') +for(var i = 0; i < countries.length; i++){ + console.log(countries[i]) +} +console.groupEnd('for loop') +console.timeEnd('for loop') + +console.group('forEach loop') +console.time('forEach loop') +countries.forEach(function(value){ + console.log(value); +}) +console.groupEnd('forEach loop') +console.timeEnd('forEach loop') + + diff --git a/14_Day_Error_handling/14_day_error_handling.md b/14_Day_Error_handling/14_day_error_handling.md new file mode 100644 index 0000000..bc17c5d --- /dev/null +++ b/14_Day_Error_handling/14_day_error_handling.md @@ -0,0 +1,193 @@ +
+

30 Days Of JavaScript: Error handling

+ + + + + Twitter Follow + + +Author: +Asabeneh Yetayeh
+ January, 2020 + + +
+ +[<< Day 13](../13_Day_Console_object_methods/13_day_console_object_methods.md) | [Day 15>>](../15_Day_Classes/15_day_classes.md) + +![Thirty Days Of JavaScript](../images/banners/day_1_14.png) + +- [Day 14](#day-14) + - [Error Handling](#error-handling) + - [Error Types](#error-types) + - [Exercises](#exercises) + - [Exercises:Level 1](#exerciseslevel-1) + - [Exercises: Level 2](#exercises-level-2) + - [Exercises:Level](#exerciseslevel) + +# Day 14 + +## Error Handling + +JavaScript is a loosely-typed language. Some times you will get a runtime error when you try to access an undefined variable or call undefined function etc. + +JavaScript similar to python or Java provides an error-handling mechanism to catch runtime errors using try-catch-finally block. + +```js +try { + // code that may throw an error +} catch (err) { + // code to be executed if an error occurs +} finally { + // code to be executed regardless of an error occurs or not +} +``` + +**try**: wrap suspicious code that may throw an error in try block.The try statement allows us to define a block of code to be tested for errors while it is being executed. + +**catch**: write code to do something in catch block when an error occurs. The catch block can have parameters that will give you error information. Catch block is used to log an error or display specific messages to the user. + +**finally**: finally block will always be executed regardless of the occurrence of an error. The finally block can be used to complete the remaining task or reset variables that might have changed before error occurred in try block. + +**Example:** + +```js +try { + let lastName = 'Yetayeh' + let fullName = fistName + ' ' + lastName +} catch (err) { + console.log(err) +} +``` + +```sh +ReferenceError: fistName is not defined + at :4:20 +``` + +```js +try { + let lastName = 'Yetayeh' + let fullName = fistName + ' ' + lastName +} catch (err) { + console.error(err) // we can use console.log() or console.error() +} finally { + console.log('In any case I will be executed') +} +``` + +```sh +ReferenceError: fistName is not defined + at :4:20 +In any case it will be executed +``` + +The catch block take a parameter. It is common to pass e, err or error as a parameter to the catch block. This parameter is an object and it has name and message keys. Lets use the name and message. + +```js +try { + let lastName = 'Yetayeh' + let fullName = fistName + ' ' + lastName +} catch (err) { + console.log('Name of the error', err.name) + console.log('Error message', err.message) +} finally { + console.log('In any case I will be executed') +} +``` + +```sh +Name of the error ReferenceError +Error message fistName is not defined +In any case I will be executed +``` + +throw: the throw statement allows us to create a custom error. We can through a string, number, boolean or an object. Use the throw statement to throw an exception. When you throw an exception, expression specifies the value of the exception. Each of the following throws an exception: + +```js +throw 'Error2' // generates an exception with a string value +throw 42 // generates an exception with the value 42 +throw true // generates an exception with the value true +throw new Error('Required') // generates an error object with the message of Required +``` + +```js +const throwErrorExampleFun = () => { + let message + let x = prompt('Enter a number: ') + try { + if (x == '') throw 'empty' + if (isNaN(x)) throw 'not a number' + x = Number(x) + if (x < 5) throw 'too low' + if (x > 10) throw 'too high' + } catch (err) { + console.log(err) + } +} +throwErrorExampleFun() +``` + +### Error Types + +- ReferenceError: An illegal reference has occurred. A ReferenceError is thrown if we use a variable that has not been declared. + +```js +let firstName = 'Asabeneh' +let fullName = firstName + ' ' + lastName + +console.log(fullName) +``` + +```sh +Uncaught ReferenceError: lastName is not defined + at :2:35 +``` + +- SyntaxError: A syntax error has occurred + +```js +let square = 2 x 2 +console.log(square) + +console.log('Hello, world") +``` + +```sh +Uncaught SyntaxError: Unexpected identifier +``` + +- TypeError: A type error has occurred + +```js +let num = 10 +console.log(num.toLowerCase()) +``` + +```sh +Uncaught TypeError: num.toLowerCase is not a function + at :2:17 +``` + +These are some of the common error you may face when you write a code. Understanding errors can help you to know what mistakes you made and it will help you to debug your code fast. + +🌕 You are flawless. Now, you knew how to handle errors and you can write robust application which handle unexpected user inputs. You have just completed day 14 challenges and you are 14 steps a head in to your way to greatness. Now do some exercises for your brain and for your muscle. + +## Exercises + +### Exercises:Level 1 + +Practice + +### Exercises: Level 2 + +Practice + +### Exercises:Level + +Practice + +🎉 CONGRATULATIONS ! 🎉 + +[<< Day 13](../13_Day_Console_object_methods/13_day_console_object_methods.md) | [Day 15>>](../15_Day_Classes/15_day_classes.md) diff --git a/14_Day_Error_handling/14_day_starter/scripts/main.js b/14_Day_Error_handling/14_day_starter/scripts/main.js index c6045c8..c22111a 100644 --- a/14_Day_Error_handling/14_day_starter/scripts/main.js +++ b/14_Day_Error_handling/14_day_starter/scripts/main.js @@ -1,2 +1,21 @@ console.log(countries) -alert('Open the console and check if the countries has been loaded') \ No newline at end of file +// alert('Open the console and check if the countries has been loaded') + +var firstname = "Faliana"; + +try{ + console.log(firstname+" "+lastname) +} +catch(err){ + console.log(err) +} + +try{ + if(1<2) + { + throw new Error("on a une erreur"); + } +} +catch(err){ + console.log(err) +} \ No newline at end of file diff --git a/15_Day_Classes/15_day_starter/scripts/main.js b/15_Day_Classes/15_day_starter/scripts/main.js index 4e66495..cf5cab0 100644 --- a/15_Day_Classes/15_day_starter/scripts/main.js +++ b/15_Day_Classes/15_day_starter/scripts/main.js @@ -102,4 +102,116 @@ console.log(s1.getPersonInfo()) console.log(s2.saySomething()) console.log(s2.getFullName()) -console.log(s2.getPersonInfo()) \ No newline at end of file +console.log(s2.getPersonInfo()) + +// Exercises Level 1 + +// 1- Create an Animal class. The class will have name, age, color, legs properties and create different methods +class Animal{ + constructor(name, age, color, legs) + { + this.name = name; + this.age = age; + this.color = color; + this.legs = legs; + } + afficher(){ + console.log("name: "+this.name+" / age: "+this.age+" / color: "+this.color+" / legs: "+this.legs); + } +} +var animal = new Animal("Bosconovitch", 23, "red", 4); +animal.afficher(); + +// 2- Create a Dog and Cat child class from the Animal Class. +class Dog extends Animal{ + constructor(name, age, color, legs, sexe){ + super(name, age, color, legs, sexe) + this.sexe = sexe; + } + afficher(){ + console.log("name: "+this.name+" / age: "+this.age+" / color: "+this.color+" / legs: "+this.legs+" / sexe: "+this.sexe); + } +} +class Cat extends Animal{ + +} + +// Exercises Level 2 + +// 1- Override the method you create in Animal class + +var chien = new Dog("milou", 15, "white", 4, "male"); +chien.afficher(); + +// Exercises Level 3 + +// 1- Let's try to develop a program which calculate measure of central tendency of a sample(mean, median, mode) +// and measure of variability(range, variance, standard deviation). In addition to those measures find +// the min, max, count, percentile, and frequency distribution of the sample. +// You can create a class called Statistics and create all the functions which do +// statistical calculations as method for the Statistics class. Check the output below. + +class Statistics{ + constructor(sample) + { + this.sample = sample; + } + get getSample(){ + return this.sample; + } + set setSample(sample){ + this.sample = sample; + } + + count() + { + return this.getSample.length; + } + sum() + { + var retour = 0; + this.getSample.forEach(function(value){ + retour += value; + }) + return retour; + } + min() + { + var retour = 0; + var tab = this.getSample + tab.sort(function(a,b){ + return a-b; + }) + retour = tab[0] + return retour + } + max() + { + var retour = 0; + var tab = this.getSample + tab.sort(function(a,b){ + return b-a; + }) + retour = tab[0] + return retour + } + range() + { + + } +} +var ages = [31, 26, 34, 37, 27, 26, 32, 32, 26, 27, 27, 24, 32, 33, 27, 25, 26, 38, 37, 31, 34, 24, 33, 29, 26]; +var statistics = new Statistics(ages); + +console.log('Count:', statistics.count()) // 25 +console.log('Sum: ', statistics.sum()) // 744 +console.log('Min: ', statistics.min()) // 24 +console.log('Max: ', statistics.max()) // 38 +// console.log('Range: ', statistics.range() // 14 +// console.log('Mean: ', statistics.mean()) // 30 +// console.log('Median: ',statistics.median()) // 29 +// console.log('Mode: ', statistics.mode()) // {'mode': 26, 'count': 5} +// console.log('Variance: ',statistics.var()) // 17.5 +// console.log('Standard Deviation: ', statistics.std()) // 4.2 +// console.log('Variance: ',statistics.var()) // 17.5 +// console.log('Frequency Distribution: ',statistics.freqDist()) // [(20.0, 26), (16.0, 27), (12.0, 32), (8.0, 37), (8.0, 34), (8.0, 33), (8.0, 31), (8.0, 24), (4.0, 38), (4.0, 29), (4.0, 25)] \ No newline at end of file diff --git a/16_Day_JSON/16_day_starter/scripts/main.js b/16_Day_JSON/16_day_starter/scripts/main.js index c6045c8..400d321 100644 --- a/16_Day_JSON/16_day_starter/scripts/main.js +++ b/16_Day_JSON/16_day_starter/scripts/main.js @@ -1,2 +1,153 @@ console.log(countries) -alert('Open the console and check if the countries has been loaded') \ No newline at end of file +// alert('Open the console and check if the countries has been loaded') + +const skills = ['HTML', 'CSS', 'JS', 'React','Node', 'Python'] +let age = 250; +let isMarried = true +const student = { + firstName:'Asabeneh', + lastName:'Yetayehe', + age:250, + isMarried:true, + skills:['HTML', 'CSS', 'JS', 'React','Node', 'Python', ] +} +const txt = `{ + "Alex": { + "email": "alex@alex.com", + "skills": [ + "HTML", + "CSS", + "JavaScript" + ], + "age": 20, + "isLoggedIn": false, + "points": 30 + }, + "Asab": { + "email": "asab@asab.com", + "skills": [ + "HTML", + "CSS", + "JavaScript", + "Redux", + "MongoDB", + "Express", + "React", + "Node" + ], + "age": 25, + "isLoggedIn": false, + "points": 50 + }, + "Brook": { + "email": "daniel@daniel.com", + "skills": [ + "HTML", + "CSS", + "JavaScript", + "React", + "Redux" + ], + "age": 30, + "isLoggedIn": true, + "points": 50 + }, + "Daniel": { + "email": "daniel@alex.com", + "skills": [ + "HTML", + "CSS", + "JavaScript", + "Python" + ], + "age": 20, + "isLoggedIn": false, + "points": 40 + }, + "John": { + "email": "john@john.com", + "skills": [ + "HTML", + "CSS", + "JavaScript", + "React", + "Redux", + "Node.js" + ], + "age": 20, + "isLoggedIn": true, + "points": 50 + }, + "Thomas": { + "email": "thomas@thomas.com", + "skills": [ + "HTML", + "CSS", + "JavaScript", + "React" + ], + "age": 20, + "isLoggedIn": false, + "points": 40 + }, + "Paul": { + "email": "paul@paul.com", + "skills": [ + "HTML", + "CSS", + "JavaScript", + "MongoDB", + "Express", + "React", + "Node" + ], + "age": 20, + "isLoggedIn": false, + "points": 40 + } +} +` +// Exercises Level 1 + +// 1- Change skills array to JSON using JSON.stringify() +var json = JSON.stringify(skills) +console.log(json) + +// 2- Stringify the age variable +json = JSON.stringify(age) +console.log(json) + +// 3- Stringify the isMarried variable +json = JSON.stringify(isMarried) +console.log(json) + +// 4- Stringify the student object +json = JSON.stringify(student) +console.log(json) + + +// Exercises Level 2 + +// 1- Stringify the students object with only firstName, lastName and skills properties +json = JSON.stringify(student, ['firstName', 'lastName']) +console.log(json) + +// Exercises Level 3 + +// 1- Parse the txt JSON to object. +var parse = JSON.parse(txt); +console.log(parse) + +// 2- Find the user who has many skills from the variable stored in txt. +var parseEntries = Object.entries(parse); +var user = {name: "", count: 0}; +var nbmax = 0; +parseEntries.forEach(function(value){ + if(value[1].skills.length>nbmax) + { + nbmax = value[1].skills.length + user.name = value[0] + user.count=nbmax + } +}) +console.log(user) \ No newline at end of file diff --git a/17_Day_Web_storages/17_day_starter/scripts/main.js b/17_Day_Web_storages/17_day_starter/scripts/main.js index e69de29..e801716 100644 --- a/17_Day_Web_storages/17_day_starter/scripts/main.js +++ b/17_Day_Web_storages/17_day_starter/scripts/main.js @@ -0,0 +1,24 @@ +// Exercises: Level 1 + +// 1- Store you first name, last name, age, country, city in your browser localStorage. +localStorage.setItem("firstName", "Faliana"); +localStorage.setItem("lastName", "Ranai"); +localStorage.setItem("age", 21); +localStorage.setItem("country", "Madagascar"); +localStorage.setItem("city", "Antananarivo"); + +console.log(localStorage) +console.log(localStorage.getItem("city")) + +// Exercises: Level 2 + +// 1- Create a student object. The student object will have first name, last name, age, skills, country, enrolled keys and values for the keys. +// Store the student object in your browser localStorage. +var student = { firstName: 'Jean', lastName: 'Rakoto', age: 29, skills: ['PHP', 'Python']}; +localStorage.setItem("student", JSON.stringify(student)) +console.log(localStorage) +// console.log(JSON.parse(localStorage.getItem("student"))) + +// Exercises: Level 3 + +// 1- Create an object called personAccount. It has firstname, lastname, incomes, expenses properties and it has totalIncome, totalExpense, accountInfo,addIncome, addExpense and accountBalance methods. Incomes is a set of incomes and its description and expenses is also a set of expenses and its description. diff --git a/18_Day_Promises/18_day_starter/scripts/main.js b/18_Day_Promises/18_day_starter/scripts/main.js index c6045c8..430348f 100644 --- a/18_Day_Promises/18_day_starter/scripts/main.js +++ b/18_Day_Promises/18_day_starter/scripts/main.js @@ -1,2 +1,52 @@ console.log(countries) -alert('Open the console and check if the countries has been loaded') \ No newline at end of file +// alert('Open the console and check if the countries has been loaded') + +// Exercises + +const countriesAPI = 'https://restcountries.com/v2/all' +const catsAPI = 'https://api.thecatapi.com/v1/breeds' + +// Exercises: Level 1 + +// 1- Read the countries API using fetch and print the name of country, capital, languages, population and area. + +fetch(countriesAPI) + .then(response => response.json()) + .then(data => { + data.forEach(function(value){ + console.log(value.name, value.capital, value.languages, value.population, value.area); + }) + }) + .catch(error => console.error(error)) + +// Exercises: Level 2 + +// 1- Print out all the cat names in to catNames variable. +fetch(catsAPI) + .then(response => response.json()) + .then(data => { + data.forEach(function(value){ + console.log(value.name); + }) + }) + .catch(error => console.error(error)) + +// Exercises: Level 3 + +// Read the cats api and find the average weight of cat in metric unit. +// Read the countries api and find out the 10 largest countries +fetch(countriesAPI) + .then(response => response.json()) + .then(data => { + var tenlargest = data; + tenlargest.sort(function(a,b){ + if(a.area console.error(error)) + +// Read the countries api and count total number of languages in the world used as officials. + diff --git a/19_Day_Closures/19_day_starter/index.html b/19_Day_Closures/19_day_starter/index.html index 649f120..9ee542b 100644 --- a/19_Day_Closures/19_day_starter/index.html +++ b/19_Day_Closures/19_day_starter/index.html @@ -9,7 +9,7 @@

30DaysOfJavaScript:19 Day

Writing Clean Code

- + diff --git a/19_Day_Closures/19_day_starter/scripts/main.js b/19_Day_Closures/19_day_starter/scripts/main.js index c6045c8..b88ada5 100644 --- a/19_Day_Closures/19_day_starter/scripts/main.js +++ b/19_Day_Closures/19_day_starter/scripts/main.js @@ -1,2 +1,46 @@ console.log(countries) -alert('Open the console and check if the countries has been loaded') \ No newline at end of file +// alert('Open the console and check if the countries has been loaded') + +// Exercises: Level 1 + +// 1- Create a closure which has one inner function + +function helloWorld(){ + function printHelloWorld(){ + return "Hello world"; + } + return printHelloWorld(); +} +var helloworld = helloWorld(); +console.log(helloworld) + +// Exercises: Level 2 + +// 1- Create a closure which has three inner functions +function powerShowcase(n) +{ + function powerOne() + { + return Math.pow(n,1); + } + function powerTwo() + { + return Math.pow(n,2); + } + function powerThree() + { + return Math.pow(n,3); + } + return { + powerOne: powerOne(), + powerTwo: powerTwo(), + powerThree: powerThree() + } +} +var func = powerShowcase(2) +console.log(func) + +// Exercises: Level 3 + +// Create a personAccount out function. It has firstname, lastname, incomes, expenses inner variables. It has totalIncome, totalExpense, accountInfo,addIncome, addExpense and accountBalance inner functions. Incomes is a set of incomes and its description and expenses is also a set of expenses and its description. +// j'en ai marre de cette question \ No newline at end of file diff --git a/21_Day_DOM/21_day_starter/exersice.html b/21_Day_DOM/21_day_starter/exersice.html new file mode 100644 index 0000000..ffeac7a --- /dev/null +++ b/21_Day_DOM/21_day_starter/exersice.html @@ -0,0 +1,27 @@ + + + + + 30DaysOfJavaScript:21 Day + + + +
+

Asabeneh Yetayeh challenges in 2020

+

30DaysOfJavaScript Challenge

+

January 22, 2023 19:40:34

+
    +
  • 30DaysOfPython Challenge Done
    • +
  • 30DaysOfJavaScript Challenge Ongoing
    • +
  • 30DaysOfReact Challenge Coming
    • +
  • 30DaysOfFullStack Challenge Coming
    • +
  • 30DaysOfDataAnalysis Challenge Coming
    • +
  • 30DaysOfReactNative Challenge Coming
    • +
  • 30DaysOfMachineLearning Challenge Coming
    • +
+
+ + + + + \ No newline at end of file diff --git a/21_Day_DOM/21_day_starter/index.html b/21_Day_DOM/21_day_starter/index.html index 0b2f1f4..b8cfd4a 100644 --- a/21_Day_DOM/21_day_starter/index.html +++ b/21_Day_DOM/21_day_starter/index.html @@ -19,6 +19,10 @@
  • 30DaysOfMachineLearning Challenge Coming
    • +

    AAAAAAAAAAAAAAAAAA

    +

    BBBBBBBBBBBB

    +

    CCCCCCCCCCCCC

    +

    diff --git a/21_Day_DOM/21_day_starter/scripts/exersise.js b/21_Day_DOM/21_day_starter/scripts/exersise.js new file mode 100644 index 0000000..0ce7fb6 --- /dev/null +++ b/21_Day_DOM/21_day_starter/scripts/exersise.js @@ -0,0 +1,99 @@ +// Exercise: Level 3 +// DOM: Mini project 1 + +// Develop the following application, use the following HTML elements to get started with. You will get the same code on starter folder. Apply all the styles and functionality using JavaScript only. +// The year color is changing every 1 second +// The date and time background color is changing every on seconds +// Completed challenge has background green +// Ongoing challenge has background yellow +// Coming challenges have background red + +var wrapper = document.getElementsByClassName("wrapper"); +for (let i = 0; i < wrapper.length; i++) { + wrapper[i].style.width= "50%"; + wrapper[i].style.margin= "auto"; +} + +var h1 = document.getElementsByTagName("h1") +for (let i = 0; i < h1.length; i++) { + h1[i].style.textAlign= "center"; + h1[i].style.fontFamily= "Montserrat"; + h1[i].style.fontWeight= "500"; +} + +var h2 = document.getElementsByTagName("h2") +for (let i = 0; i < h2.length; i++) { + h2[i].style.textAlign= "center"; + h2[i].style.fontFamily= "Montserrat"; + h2[i].style.fontWeight= "300"; + h2[i].style.textDecoration= "underline"; +} + +var date = document.querySelector("#date"); +date.style.textAlign= "center"; +date.style.fontFamily= "Montserrat"; +date.style.fontWeight= "40"; +date.style.width= "25%"; +date.style.margin= "auto"; +date.style.padding= "10px"; + +var year = document.querySelector("#year"); +year.style.fontSize= "96px"; +year.style.fontWeight= "700"; +var yearText = new Date(); +year.textContent = yearText.getFullYear(); + +setInterval(function() { + var currentTime = new Date(); + var formattedTime = currentTime.toLocaleString('en-US', { + year: 'numeric', + month: 'long', + day: 'numeric', + hour: 'numeric', + minute: 'numeric', + second: 'numeric' + }); + date.textContent = formattedTime; + date.style.background = "rgb("+Math.floor(Math.random() * 255)+", "+Math.floor(Math.random() * 255)+", "+Math.floor(Math.random() * 255)+")"; + year.style.color = "rgb("+Math.floor(Math.random() * 255)+", "+Math.floor(Math.random() * 255)+", "+Math.floor(Math.random() * 255)+")"; +}, 1000); + + + +var challenges = document.querySelectorAll("li"); +challenges.forEach(function(value){ + if(value.textContent.indexOf("Done")!=-1) + { + value.className = "done" + } + if(value.textContent.indexOf("Ongoing")!=-1) + { + value.className = "ongoing" + } + if(value.textContent.indexOf("Coming")!=-1) + { + value.className = "coming" + } + + value.style.padding= "25px"; + value.style.margin= "3px"; + value.style.listStyleType= "none"; + value.style.fontFamily= "Montserrat"; + value.style.letterSpacing = "0.0625em"; +}); + +var done = document.getElementsByClassName("done"); +for (let i = 0; i < done.length; i++) { + done[i].style.background= "rgb(33, 191,115)"; +} + +var ongoing = document.getElementsByClassName("ongoing"); +for (let i = 0; i < ongoing.length; i++) { + ongoing[i].style.background= "rgb(253, 219,58)"; +} + +var coming = document.getElementsByClassName("coming"); +for (let i = 0; i < coming.length; i++) { + coming[i].style.background= "rgb(253, 94, 83)"; +} + diff --git a/21_Day_DOM/21_day_starter/scripts/main.js b/21_Day_DOM/21_day_starter/scripts/main.js index e69de29..118f83e 100644 --- a/21_Day_DOM/21_day_starter/scripts/main.js +++ b/21_Day_DOM/21_day_starter/scripts/main.js @@ -0,0 +1,57 @@ +// Exercise: Level 1 + +// 1- Create an index.html file and put four p elements as above: Get the first paragraph by using document.querySelector(tagname) and tag name +const firstp = document.querySelector('p') +console.log(firstp) + +// 2- Get each of the the paragraph using document.querySelector('#id') and by their id +const p1 = document.querySelector("#p1"); +const p2 = document.querySelector("#p2"); +const p3 = document.querySelector("#p3"); +console.log(p1) +console.log(p2) +console.log(p3) + +// 3- Get all the p as nodeList using document.querySelectorAll(tagname) and by their tag name +const paragraphes = document.querySelectorAll('p') +console.log(paragraphes) + + + +// 4- Loop through the nodeList and get the text content of each paragraph +paragraphes.forEach(function(value){ + console.log(value.textContent) +}) +// 5- Set a text content to paragraph the fourth paragraph,Fourth Paragraph +paragraphes[3].textContent = "Fourth Paragraph"; + +// 6- Set id and class attribute for all the paragraphs using different attribute setting methods +paragraphes.forEach(function(value){ + value.className = "sampleclasse" +}) + +// Exercise: Level 2 + +// 1- Change stye of each paragraph using JavaScript(eg. color, background, border, font-size, font-family) +paragraphes[0].style.color = "white"; +paragraphes[0].style.background = "black"; +paragraphes[0].style.border = "solid"; +paragraphes[0].style.borderColor = "red"; +paragraphes[0].style.fontSize = "30px"; +paragraphes[0].style.fontFamily = "Segoe UI"; + + +// 2- Select all paragraphs and loop through each elements and give the first and third paragraph a color of green, and the second and the fourth paragraph a red color +for(var i = 0; i < paragraphes.length; i++) +{ + if(i==0 || i==2) + { + paragraphes[i].style.color = "green"; + } + if(i==1 || i==3) + { + paragraphes[i].style.color = "red"; + } +} + +// 3- Set text content, id and class to each paragraph diff --git a/22_Day_Manipulating_DOM_object/22_day_starters/index.html b/22_Day_Manipulating_DOM_object/22_day_starters/index.html new file mode 100644 index 0000000..6eef4f9 --- /dev/null +++ b/22_Day_Manipulating_DOM_object/22_day_starters/index.html @@ -0,0 +1,23 @@ + + + + + + + Document + + + + + + \ No newline at end of file diff --git a/22_Day_Manipulating_DOM_object/22_day_starters/index.js b/22_Day_Manipulating_DOM_object/22_day_starters/index.js new file mode 100644 index 0000000..e69de29 diff --git a/22_Day_Manipulating_DOM_object/22_day_starters/project_1/index.html b/22_Day_Manipulating_DOM_object/22_day_starters/project_1/index.html index 9b2e17d..db67c01 100644 --- a/22_Day_Manipulating_DOM_object/22_day_starters/project_1/index.html +++ b/22_Day_Manipulating_DOM_object/22_day_starters/project_1/index.html @@ -9,6 +9,7 @@

    Number Generator

    30DaysOfJavaScript:DOM Day 2

    Author: Asabeneh Yetayeh

    +
    diff --git a/22_Day_Manipulating_DOM_object/22_day_starters/project_1/scripts/main.js b/22_Day_Manipulating_DOM_object/22_day_starters/project_1/scripts/main.js index c6045c8..d9ea835 100644 --- a/22_Day_Manipulating_DOM_object/22_day_starters/project_1/scripts/main.js +++ b/22_Day_Manipulating_DOM_object/22_day_starters/project_1/scripts/main.js @@ -1,2 +1,63 @@ -console.log(countries) -alert('Open the console and check if the countries has been loaded') \ No newline at end of file +// console.log(countries) +// alert('Open the console and check if the countries has been loaded') + +function isPrime(number) +{ + if(number==0 || number==1) + { + return false + } + for(var i = 2; i < number; i++) + { + if(number%i==0) + { + return false; + } + } + return true; +} +function isEven(number) +{ + if(number%2==0) + { + return true; + } + return false; +} + +var numbers = []; +for(var i = 0; i <= 101; i++ ) +{ + numbers.push(document.createElement("div")); + if(isEven(i)==true) + { + numbers[i].style.background = "rgb(33,191,115)"; + } + else{ + numbers[i].style.background = "rgb(253,219,58)"; + } + + if(isPrime(i)==true) + { + numbers[i].style.background = "rgb(253,94,83)"; + } + + numbers[i].textContent = i; + numbers[i].style.color = "white"; + numbers[i].style.fontSize = "50px"; + numbers[i].style.padding = "20px"; + numbers[i].style.margin = "5px"; + numbers[i].style.width = "11%"; + numbers[i].style.textAlign = "center"; +} +console.log(numbers) + +var wrapper = document.getElementsByClassName("wrapper") +wrapper[0].style.display = "flex" +wrapper[0].style.flexWrap = "wrap" +wrapper[0].style.width = "50%" +wrapper[0].style.margin = "auto" +for(var i = 0; i < numbers.length; i++ ) +{ + wrapper[0].appendChild(numbers[i]) +} \ No newline at end of file diff --git a/22_Day_Manipulating_DOM_object/22_day_starters/project_2/index.html b/22_Day_Manipulating_DOM_object/22_day_starters/project_2/index.html index 44d4869..c436d05 100644 --- a/22_Day_Manipulating_DOM_object/22_day_starters/project_2/index.html +++ b/22_Day_Manipulating_DOM_object/22_day_starters/project_2/index.html @@ -22,7 +22,7 @@ - + diff --git a/22_Day_Manipulating_DOM_object/22_day_starters/project_2/scripts/main.js b/22_Day_Manipulating_DOM_object/22_day_starters/project_2/scripts/main.js index 9d06661..d6eb006 100644 --- a/22_Day_Manipulating_DOM_object/22_day_starters/project_2/scripts/main.js +++ b/22_Day_Manipulating_DOM_object/22_day_starters/project_2/scripts/main.js @@ -1 +1,28 @@ console.log(countries) + +var wrapper = document.querySelector(".countries-wrapper"); +wrapper.style.display = "flex"; +wrapper.style.flexWrap = "wrap"; +wrapper.style.margin = "auto"; +wrapper.style.width = "50%"; + +var wrapperelement = []; +for(var i = 0; i < countries.length; i++){ + wrapperelement.push(document.createElement("div")); + wrapperelement[i].textContent = countries[i].toUpperCase(); + + wrapperelement[i].style.margin = "5px"; + wrapperelement[i].style.border = "solid rgba(0,0,0,0.1)" + wrapperelement[i].style.borderWidth = "2px" + wrapperelement[i].style.width = "14%" + wrapperelement[i].style.fontWeight = "bold" + wrapperelement[i].style.fontSize = "12px" + + wrapperelement[i].style.paddingTop = "7%" + wrapperelement[i].style.paddingBottom = "7%" + + wrapperelement[i].style.textAlign = "center" + wrapper.appendChild(wrapperelement[i]); +} + +console.log(wrapper) \ No newline at end of file diff --git a/22_Day_Manipulating_DOM_object/22_day_starters/project_3/index.html b/22_Day_Manipulating_DOM_object/22_day_starters/project_3/index.html index 4827cb5..43dcf84 100644 --- a/22_Day_Manipulating_DOM_object/22_day_starters/project_3/index.html +++ b/22_Day_Manipulating_DOM_object/22_day_starters/project_3/index.html @@ -6,11 +6,13 @@ +
    + - + diff --git a/22_Day_Manipulating_DOM_object/22_day_starters/project_3/scripts/main.js b/22_Day_Manipulating_DOM_object/22_day_starters/project_3/scripts/main.js index fa02efd..ee57a04 100644 --- a/22_Day_Manipulating_DOM_object/22_day_starters/project_3/scripts/main.js +++ b/22_Day_Manipulating_DOM_object/22_day_starters/project_3/scripts/main.js @@ -1 +1,187 @@ -console.log(asabenehChallenges2020) \ No newline at end of file +// console.log(asabenehChallenges2020) + +var wrapper = document.querySelector(".wrapper"); +wrapper.style.width= "50%"; +wrapper.style.margin= "auto"; + + + +var h1 = document.createElement("h1") +h1.textContent = asabenehChallenges2020.challengeTitle+" in "; +h1.style.textAlign= "center"; +h1.style.fontFamily= "Montserrat"; +h1.style.fontWeight= "500"; +wrapper.appendChild(h1) + +var h2 = document.createElement("h1") +h2.textContent = asabenehChallenges2020.challengeSubtitle; +h2.style.textAlign= "center"; +h2.style.fontFamily= "Montserrat"; +h2.style.fontWeight= "300"; +h2.style.textDecoration= "underline"; +wrapper.appendChild(h2) + +var span = document.createElement("span") +span.id="year"; +h1.appendChild(span) +span.textContent = asabenehChallenges2020.challengeYear + +var p = document.createElement("p"); +p.id="date"; +wrapper.appendChild(p); + + +var date = document.querySelector("#date"); +date.style.textAlign= "center"; +date.style.fontFamily= "Montserrat"; +date.style.fontWeight= "40"; +date.style.width= "25%"; +date.style.margin= "auto"; +date.style.padding= "10px"; + +var year = document.querySelector("#year"); +year.style.fontSize= "96px"; +year.style.fontWeight= "700"; + +setInterval(function() { + var currentTime = new Date(); + var formattedTime = currentTime.toLocaleString('en-US', { + year: 'numeric', + month: 'long', + day: 'numeric', + hour: 'numeric', + minute: 'numeric', + second: 'numeric' + }); + date.textContent = formattedTime; + date.style.background = "rgb("+Math.floor(Math.random() * 255)+", "+Math.floor(Math.random() * 255)+", "+Math.floor(Math.random() * 255)+")"; + year.style.color = "rgb("+Math.floor(Math.random() * 255)+", "+Math.floor(Math.random() * 255)+", "+Math.floor(Math.random() * 255)+")"; +}, 1000); + +var ul = document.createElement("ul"); +wrapper.appendChild(ul); + +var li = []; +for(var i = 0; i < asabenehChallenges2020.challenges.length; i++) +{ + li.push(document.createElement("li")) + // li[i].textContent = asabenehChallenges2020.challenges[i].name; + li[i].className = asabenehChallenges2020.challenges[i].status; + + li[i].style.padding= "25px"; + li[i].style.margin= "3px"; + li[i].style.listStyleType= "none"; + li[i].style.fontFamily= "Montserrat"; + li[i].style.letterSpacing = "0.0625em"; + +} +for(var i = 0; i < li.length; i++) +{ + ul.appendChild(li[i]) +} + +// CHALLENGE INSERTION +var divchallenge; +var divchallengename; +var divchallengetopic; +var divchallengestatus; +var paragraph; +var dropdown; +for(var i = 0; i < li.length; i++) +{ + divchallenge = document.createElement("div"); + divchallenge.style.display = "flex"; + divchallenge.style.flexWrap = "wrap"; + divchallenge.style.justifyContent = "space-between"; + + // challenge name + divchallengename = document.createElement("div"); + divchallengename.style.width = "30%"; + paragraph = document.createElement("p"); + paragraph.textContent = asabenehChallenges2020.challenges[i].name; + divchallengename.appendChild(paragraph) + divchallenge.appendChild(divchallengename); + + // challenge topic + divchallengetopic = document.createElement("div"); + divchallengetopic.style.width= "30%"; + paragraph = document.createElement("p"); + dropdown = document.createElement("a"); + dropdown.textContent = asabenehChallenges2020.challenges[i].topics[0]; + dropdown.className = "dropdown"; + dropdown.style.textDecoration = "none"; + dropdown.style.fontWeight = "bold"; + dropdown.style.color = "black"; + dropdown.href="javascript:void(0);"; + paragraph.appendChild(dropdown) + + divchallengetopic.appendChild(paragraph) + for(var j = 0; j < asabenehChallenges2020.challenges[i].topics.length; j++) + { + paragraph = document.createElement("p"); + paragraph.textContent = asabenehChallenges2020.challenges[i].topics[j]; + paragraph.className = "dropdownitem"+i; + paragraph.style.display = "none"; + divchallengetopic.appendChild(paragraph) + } + divchallenge.appendChild(divchallengetopic); + + // challengestatus + divchallengestatus = document.createElement("div"); + divchallengestatus.style.width="10%"; + paragraph = document.createElement("p"); + paragraph.textContent = asabenehChallenges2020.challenges[i].status; + divchallengestatus.appendChild(paragraph) + divchallenge.appendChild(divchallengestatus); + + li[i].appendChild(divchallenge); + +} + + +var done = document.getElementsByClassName("Done"); +for (let i = 0; i < done.length; i++) { + done[i].style.background= "rgb(33, 191,115)"; +} + +var ongoing = document.getElementsByClassName("Ongoing"); +for (let i = 0; i < ongoing.length; i++) { + ongoing[i].style.background= "rgb(253, 219,58)"; +} + +var coming = document.getElementsByClassName("Coming"); +for (let i = 0; i < coming.length; i++) { + coming[i].style.background= "rgb(253, 94, 83)"; +} + +// var dropdowns = document.querySelectorAll(".dropdown"); +// console.log(dropdowns); + +// for(var i = 0; i < dropdowns.length; i++) +// { +// console.log(i) +// dropdowns[i].onclick = function(){ +// var dropdownitems = document.querySelectorAll(".dropdownitem"+i); +// console.log(dropdownitems) +// } +// } + +let dropdowns = document.querySelectorAll(".dropdown"); + +for(let i = 0; i < dropdowns.length; i++) +{ + dropdowns[i].onclick = function(){ + let dropdownitems = document.querySelectorAll(".dropdownitem"+i); + for(let j = 0; j < dropdownitems.length; j++) + { + if(dropdownitems[j].style.display!="none") + { + dropdownitems[j].style.display = "none" + } + else + { + dropdownitems[j].style.display = "block" + } + } + } +} \ No newline at end of file diff --git a/23_Day_Event_listeners/23_day_starters/project_1/index.html b/23_Day_Event_listeners/23_day_starters/project_1/index.html index fae19a7..d6ff35d 100644 --- a/23_Day_Event_listeners/23_day_starters/project_1/index.html +++ b/23_Day_Event_listeners/23_day_starters/project_1/index.html @@ -1,22 +1,35 @@ - - 30DaysOfJavaScript:23 Day: Number Generator - + + 30DaysOfJavaScript:23 Day: Number Generator + + - -

    Number Generator

    -

    30DaysOfJavaScript:DOM Day 2

    -

    Author: Asabeneh Yetayeh

    -
    + +

    Number Generator

    +

    30DaysOfJavaScript:DOM Day 2

    +

    Author: Asabeneh Yetayeh

    -
    + +
    +

    +
    + + +
    + +
    + +
    +
    - - + + + + \ No newline at end of file diff --git a/23_Day_Event_listeners/23_day_starters/project_1/scripts/main.js b/23_Day_Event_listeners/23_day_starters/project_1/scripts/main.js index c6045c8..0cdeec7 100644 --- a/23_Day_Event_listeners/23_day_starters/project_1/scripts/main.js +++ b/23_Day_Event_listeners/23_day_starters/project_1/scripts/main.js @@ -1,2 +1,135 @@ -console.log(countries) -alert('Open the console and check if the countries has been loaded') \ No newline at end of file +// console.log(countries) +// alert('Open the console and check if the countries has been loaded') + +// function isPrime(number) +// { +// if(number==0 || number==1) +// { +// return false +// } +// for(var i = 2; i < number; i++) +// { +// if(number%i==0) +// { +// return false; +// } +// } +// return true; +// } + +function isPrime(n) { + if (n <= 1) return false; + if (n <= 3) return true; + if (n % 2 === 0 || n % 3 === 0) return false; + + for (let i = 5; i * i <= n; i += 6) { + if (n % i === 0 || n % (i + 2) === 0) return false; + } + return true; + } + +// function modPow(base, exponent, modulus) { +// let result = 1; +// while (exponent > 0) { +// if (exponent % 2 === 1) { +// result = (result * base) % modulus; +// } +// exponent = exponent >> 1; +// base = (base * base) % modulus; +// } +// return result; +// } + +// function isPrime(n) { +// if (n <= 1 || n === 4) return false; +// if (n <= 3) return true; + +// let d = n - 1; +// let s = 0; + +// while (d % 2 === 0) { +// d /= 2; +// s++; +// } + +// for (let i = 0; i < 8; i++) { +// let a = Math.floor(2 + Math.random() * (n - 2)); +// let x = modPow(a, d, n); +// let y = 0; + +// for (let j = 0; j < s; j++) { +// y = (x * x) % n; +// if (y === 1 && x !== 1 && x !== n - 1) return false; +// x = y; +// } + +// if (y !== 1) return false; +// } +// return true; +// } + + +function isEven(number) +{ + if(number%2==0) + { + return true; + } + return false; +} + + +let button = document.querySelector("button"); +let paragraph = document.querySelector("p"); +let input = document.querySelector("input"); + +let generatednumber = document.querySelector(".generatednumber") + +let numbers = []; + +button.addEventListener('click', e => { + let regex = /^\d+$/gi + // console.log(input.value.match(regex)) + + if(input.value == "") + { + paragraph.textContent = "Enter number value inside the input field to generate numbers" + } + else if(!input.value.match(regex)) + { + paragraph.textContent = "Input value must be a number" + } + else{ + paragraph.textContent = ""; + + console.time("answer time"); + for(let i = 0; i < input.value; i++) + { + numbers.push(document.createElement("div")); + if(isEven(i)==true) + { + numbers[i].className = "number even" + } + else{ + numbers[i].className = "number odd" + } + + if(isPrime(i)==true) + { + numbers[i].className = "number prime" + } + + numbers[i].textContent = i; + + } + console.timeEnd("answer time"); + + generatednumber.innerHTML = "" + for(let i = 0; i < input.value; i++) + { + generatednumber.appendChild(numbers[i]); + } + } + + +}); diff --git a/23_Day_Event_listeners/23_day_starters/project_1/style.css b/23_Day_Event_listeners/23_day_starters/project_1/style.css new file mode 100644 index 0000000..5c6de1c --- /dev/null +++ b/23_Day_Event_listeners/23_day_starters/project_1/style.css @@ -0,0 +1,54 @@ +.wrapper { + width : 50%; + margin: auto; +} + +.numbergenerator{ + display : flex; + flex-wrap : wrap; +} + +.generatednumber{ + display : flex; + flex-wrap : wrap; + margin-top: 30px; +} + +.number{ + color : white; + font-size : 50px; + padding : 20px; + margin : 5px; + width : 11%; + text-align : center; +} + +.prime{ + background : rgb(253,94,83); +} + +.even{ + background : rgb(33,191,115); +} + +.odd{ + background : rgb(253,219,58); +} + +.wrapper input{ + width: 50%; + padding: 10px; + border: 2px solid rgb(33,191,115); +} + +.wrapper button{ + color: white; + background: rgb(33,191,115); + border: rgb(33,191,115); + margin-left: 15px; + padding: 12px; +} + +.wrapper p{ + color: red; +} \ No newline at end of file diff --git a/23_Day_Event_listeners/23_day_starters/project_2/index.html b/23_Day_Event_listeners/23_day_starters/project_2/index.html index 93136da..6629dba 100644 --- a/23_Day_Event_listeners/23_day_starters/project_2/index.html +++ b/23_Day_Event_listeners/23_day_starters/project_2/index.html @@ -3,10 +3,14 @@ 30DaysOfJavaScript:23 Day: Keyboard Key + - +
    +
    You pressed the key
    +
    +
    diff --git a/23_Day_Event_listeners/23_day_starters/project_2/scripts/main.js b/23_Day_Event_listeners/23_day_starters/project_2/scripts/main.js index c6045c8..d0279e6 100644 --- a/23_Day_Event_listeners/23_day_starters/project_2/scripts/main.js +++ b/23_Day_Event_listeners/23_day_starters/project_2/scripts/main.js @@ -1,2 +1,10 @@ -console.log(countries) -alert('Open the console and check if the countries has been loaded') \ No newline at end of file +// console.log(countries) +// alert('Open the console and check if the countries has been loaded') + +let keyname = document.querySelector(".keyname"); +let keycode = document.querySelector(".keycode"); + +document.body.addEventListener("keypress", e => { + keycode.textContent = e.keyCode; + keyname.textContent = e.key; +}) \ No newline at end of file diff --git a/23_Day_Event_listeners/23_day_starters/project_2/style.css b/23_Day_Event_listeners/23_day_starters/project_2/style.css new file mode 100644 index 0000000..0cc5871 --- /dev/null +++ b/23_Day_Event_listeners/23_day_starters/project_2/style.css @@ -0,0 +1,33 @@ +body{ + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; +} + +.project{ + margin: 10% auto; + width: 50%; + text-align: center; +} + +.keyinput { + padding: 20px; + border: solid 1px rgb(224, 224, 224); + box-shadow: 5px 5px 10px 5px rgb(224, 224, 224); + font-weight: bold; + font-size: 30px; +} +.keyname{ + color : rgb(33,191,115); +} + +.keycode{ + font-weight: bold; + font-size: 100px; + color : rgb(33,191,115); + padding: 20px; + border: solid 1px rgb(224, 224, 224); + box-shadow: 5px 5px 10px 5px rgb(224, 224, 224); + width: 50%; + padding-top:60px; + padding-bottom:60px; + margin: 30px auto; +} \ No newline at end of file diff --git a/23_Day_Event_listeners/index.html b/23_Day_Event_listeners/index.html new file mode 100644 index 0000000..c44fc86 --- /dev/null +++ b/23_Day_Event_listeners/index.html @@ -0,0 +1,57 @@ + + + + Document Object Model + + + + + + + + +

    Giving feedback using blur event

    + + +

    + + + +

    Key events: Press any key

    + + + + \ No newline at end of file diff --git a/24_Day_Project_solar_system/24_day_starter/design/dom_min_project_solar_system_day_4.1.mp4 b/24_Day_Project_solar_system/24_day_starter/design/dom_min_project_solar_system_day_4.1.mp4 index 69ce936..65222d3 100644 Binary files a/24_Day_Project_solar_system/24_day_starter/design/dom_min_project_solar_system_day_4.1.mp4 and b/24_Day_Project_solar_system/24_day_starter/design/dom_min_project_solar_system_day_4.1.mp4 differ diff --git a/24_Day_Project_solar_system/24_day_starter/index.html b/24_Day_Project_solar_system/24_day_starter/index.html index 8536ad4..2d34ff3 100644 --- a/24_Day_Project_solar_system/24_day_starter/index.html +++ b/24_Day_Project_solar_system/24_day_starter/index.html @@ -4,6 +4,7 @@ Solar System: Document Object Model:30 Days Of JavaScript + @@ -22,7 +23,14 @@
    -
    +
    +

    The weigth of object on: EARTH

    +
    900 N
    +
    + +
    + +
    diff --git a/24_Day_Project_solar_system/24_day_starter/scripts/main.js b/24_Day_Project_solar_system/24_day_starter/scripts/main.js index c6045c8..3bf0090 100644 --- a/24_Day_Project_solar_system/24_day_starter/scripts/main.js +++ b/24_Day_Project_solar_system/24_day_starter/scripts/main.js @@ -1,2 +1,102 @@ -console.log(countries) -alert('Open the console and check if the countries has been loaded') \ No newline at end of file +// console.log(countries) +// alert('Open the console and check if the countries has been loaded') + +let data = [ + { planet: "earth", gravity: 1}, + { planet: "jupiter", gravity: 2.34}, + { planet: "mars", gravity: 0.38 }, + { planet: "mercury", gravity: 0.38}, + { planet: "moon", gravity: 0.166}, + { planet: "neptune", gravity: 1.19}, + { planet: "pluto", gravity: 0.06}, + { planet: "saturn", gravity: 1.06}, + { planet: "uranus", gravity: 0.92}, + { planet: "venus", gravity: 0.91} +] + +// Weight on Other Planet = Weight on Earth x Multiple of Earth’s Gravity +// Body Multiple of Earth’s Gravity +// Sun 27.01 +// Mercury 0.38 +// Venus 0.91 +// Earth 1 (defined) +// Moon 0.166 +// Mars 0.38 +// Jupiter 2.34 +// Saturn 1.06 +// Uranus 0.92 +// Neptune 1.19 +// Pluto 0.06 + +function calculateWeight(weight, gravity) +{ + return weight * gravity; +} + +let select = document.querySelector("select"); +let element; +for(let i = 0; i < data.length; i++) +{ + element = document.createElement("option"); + element.textContent = data[i].planet; + element.value = data[i].gravity; + select.appendChild(element); +} + +let inputmass = document.querySelector("#mass"); +let button = document.querySelector("button"); +let flexitemerror = document.querySelector(".flex-item.error"); + +let flexitemimage = document.querySelector(".flex-item.image"); +let flexitemdescription = document.querySelector(".flex-item.description"); + +let weight = document.querySelector(".weight"); + +button.addEventListener("click", e => { + if(inputmass.value == "") + { + flexitemerror.textContent = "You did not choose a planet yet"; + flexitemerror.style.display = "block"; + flexitemimage.style.display = "none"; + flexitemdescription.style.display = "none"; + } + else if (isNaN(inputmass.value)) { + flexitemerror.textContent = "Not a number"; + flexitemerror.style.display = "block"; + flexitemimage.style.display = "none"; + flexitemdescription.style.display = "none"; + } + else if(select.value=="none") + { + flexitemerror.textContent = "Please select a planet"; + flexitemerror.style.display = "block"; + flexitemimage.style.display = "none"; + flexitemdescription.style.display = "none"; + } + else{ + flexitemerror.style.display = "none"; + flexitemimage.style.display = "block"; + flexitemdescription.style.display = "block"; + + for(let i = 0; i < data.length; i++) + { + if(select.value == data[i].gravity) + { + weight.textContent = calculateWeight(inputmass.value, select.value)+" N" ; + } + } + } +}); + +let planetimage = document.querySelector(".planet-image"); + +select.addEventListener("change", e => { + console.log(e.target); + for(let i = 0; i < data.length; i++) + { + if(e.target.value == data[i].gravity) + { + planetimage.src = "./images/"+data[i].planet+".png"; + } + } +}) \ No newline at end of file diff --git a/24_Day_Project_solar_system/24_day_starter/style.css b/24_Day_Project_solar_system/24_day_starter/style.css new file mode 100644 index 0000000..6a51654 --- /dev/null +++ b/24_Day_Project_solar_system/24_day_starter/style.css @@ -0,0 +1,84 @@ +body{ + background-image: url(images/galaxy.gif); + font-family:Georgia, 'Times New Roman', Times, serif; +} + +header{ + color: white; + text-align: center; + margin-bottom: 35px; +} + +header h1{ + font-size: 50px; + margin-bottom: 100px; +} + +header input{ + padding: 10px; + width: 15%; + margin-right: 5px; +} + +header select{ + padding: 10px; + width: 10%; + margin-right: 5px; +} + +header button{ + padding: 10px; + width: 10%; + color: white; + background-color: rgb(107,107,107); + border: solid 1px rgb(107,107,107); +} + +.flex-container{ + margin:auto; + width: 70%; + background-color: rgba(80,80,80,0.5); + display: flex; +} + + +.flex-item.image{ + width: 40%; + margin: 50px; +} + +.flex-item.description{ + background-color: rgba(100,100,100,0.5); + width: 40%; + align-self: flex-start; + text-align: center; + color: white; + margin-top: 15%; +} + +.weight{ + font-size: 30px; + font-weight: bold; + background-color: rgba(120,120,120,0.5); + width: 150px; + padding-top: 50px; + padding-bottom: 50px; + border-radius: 50%; + line-height: 50px; + text-align: center; /* center number horizontally */ + margin: auto; + margin-bottom: 30px; +} + +.flex-item.error{ + background-color: rgba(100,100,100,0.5); + width: 40%; + color: white; + text-align: center; + padding: 20px; + font-size: 30px; + margin: auto; + margin-top: 50px; + margin-bottom: 50px; + display: none; +} \ No newline at end of file diff --git a/25_Day_World_countries_data_visualization_1/25_day_starter/css/style.css b/25_Day_World_countries_data_visualization_1/25_day_starter/css/style.css new file mode 100644 index 0000000..f652287 --- /dev/null +++ b/25_Day_World_countries_data_visualization_1/25_day_starter/css/style.css @@ -0,0 +1,88 @@ +*{ + margin: 0; +} +body{ + font-family: Montserrat; +} +header{ + text-align: center; + background-color: rgb(240,240,240); + padding: 30px; + border-bottom: solid 5px rgba(200,200,200, 0.2); +} +header h2{ + color: rgb(255,165,0); + font-size: 50px; +} + +.subtitle{ + font-size: 20px; +} + +.graph-buttons{ + text-align: center; + padding: 30px; +} + +.graph-buttons button{ + text-transform: uppercase; + background-color: rgb(255,165,0); + border: solid 1px rgb(255,165,0); + margin: 5px; + font-size: 15px; + padding: 10px; + min-width: 200px; + width: 10%; +} + +.graph-title{ + text-align: center; + font-size: 20px; +} + +.graphs{ + background-color: rgb(240,240,240); + border: solid 5px rgba(200,200,200, 0.2); + +} + +.graph-wrapper{ + padding-top: 30px; + padding-bottom: 30px; + margin: auto; + width: 70%; +} + +.card { + background-color: #fef08a; + border: 1px solid #9ca3af; + padding: 6px; + border-radius: 5px; +} + +.grid{ + display: grid; + grid-gap: 30px; + grid-template-columns: 1fr 2fr 1fr; + grid-auto-rows: minmax(50px, auto); +} + +.pays{ + +} + +.portion{ + +} + +.baton{ + width: 0%; + background-color: rgb(255,165,0); + min-height: 50px; +} + + + +.valeur{ + +} \ No newline at end of file diff --git a/25_Day_World_countries_data_visualization_1/25_day_starter/index.html b/25_Day_World_countries_data_visualization_1/25_day_starter/index.html index d3ede5b..cbc3508 100644 --- a/25_Day_World_countries_data_visualization_1/25_day_starter/index.html +++ b/25_Day_World_countries_data_visualization_1/25_day_starter/index.html @@ -13,7 +13,7 @@

    World Countries Data

    -

    +

    Currently, we have countries

    @@ -23,14 +23,23 @@ -

    +

    Top 10 of most spoken languages in the world

    -
    +
    +
    + +
    +
    + diff --git a/25_Day_World_countries_data_visualization_1/25_day_starter/js/main.js b/25_Day_World_countries_data_visualization_1/25_day_starter/js/main.js new file mode 100644 index 0000000..3a2459a --- /dev/null +++ b/25_Day_World_countries_data_visualization_1/25_day_starter/js/main.js @@ -0,0 +1,146 @@ +console.log(countries_data) +// alert('Open the console and check if the countries has been loaded') + +let numberofcountries = document.querySelector(".numberofcountries"); +numberofcountries.textContent = countries_data.length; + +function portionOfPopulation(total, number) +{ + return number*100/total; +} + +// POPULATION +let population = []; +population.push( { country: "World", population: 0, portion: 100} ); + +countries_data.forEach(function(value){ + population[0].population += value.population; +}) +countries_data.forEach(function(value){ + population.push({ country: value.name, population: value.population, portion: portionOfPopulation(population[0].population, value.population) }); +}) + +population.sort(function(a,b){ + if(a.populationb.population) return -1 + return 0; +}) + +// LANGAGE +let temp = []; +countries_data.forEach(function(value){ + value.languages.forEach(function(langage){ + temp.push({ language: langage, count: 1, portion: 0 }) + }) +}) + +for(let i = 0; i < temp.length; i++) +{ + for(let j = 0; j < temp.length; j++) + { + if((i!=j) && (temp[i].language==temp[j].language)) + { + temp[i].count++; + temp[j] = ""; + } + } +} + +let languages = temp.filter(function(value){ + return value != ""; +}) +languages.sort(function(a,b){ + if(a.countb.count) return -1 + return 0; +}) +languages.forEach(function(value){ + value.portion = portionOfPopulation(languages.length, value.count); +}) + +console.log(temp); +console.log(languages); + +// CREATION AFFICHAGE + +let grid = document.querySelector(".grid"); + +let pays; +let portion; +let baton; +let valeur; + +for(let i = 0; i < 10; i++) +{ + pays = document.createElement("div"); + pays.textContent = population[i].country; + pays.className = "pays"; + grid.appendChild(pays); + + portion = document.createElement("div"); + portion.className = "portion"; + baton = document.createElement("div"); + baton.className = "baton"; + baton.style.width = ""+population[i].portion+"%"; + portion.appendChild(baton) + grid.appendChild(portion); + + + + valeur = document.createElement("div"); + valeur.textContent = population[i].population.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,"); + valeur.className = "valeur"; + grid.appendChild(valeur); +} + + +let buttonpopulation = document.querySelector(".population"); +buttonpopulation.addEventListener("click", e => { + grid.innerHTML = ""; + for(let i = 0; i < temp.length; i++) + { + pays = document.createElement("div"); + pays.textContent = population[i].country; + pays.className = "pays"; + grid.appendChild(pays); + + portion = document.createElement("div"); + portion.className = "portion"; + baton = document.createElement("div"); + baton.className = "baton"; + baton.style.width = ""+population[i].portion+"%"; + portion.appendChild(baton) + grid.appendChild(portion); + + valeur = document.createElement("div"); + valeur.textContent = population[i].population.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,"); + valeur.className = "valeur"; + grid.appendChild(valeur); + + } +}) + +let buttonlanguages = document.querySelector(".languages"); +buttonlanguages.addEventListener("click", e => { + grid.innerHTML = ""; + for(let i = 0; i < languages.length; i++) + { + pays = document.createElement("div"); + pays.textContent = languages[i].language; + pays.className = "pays"; + grid.appendChild(pays); + + portion = document.createElement("div"); + portion.className = "portion"; + baton = document.createElement("div"); + baton.className = "baton"; + baton.style.width = ""+languages[i].portion+"%"; + portion.appendChild(baton) + grid.appendChild(portion); + + valeur = document.createElement("div"); + valeur.textContent = languages[i].count; + valeur.className = "valeur"; + grid.appendChild(valeur); + } +}) \ No newline at end of file diff --git a/26_Day_World_countries_data_visualization_2/26_day_starter/css/all.css b/26_Day_World_countries_data_visualization_2/26_day_starter/css/all.css new file mode 100644 index 0000000..84dbeb8 --- /dev/null +++ b/26_Day_World_countries_data_visualization_2/26_day_starter/css/all.css @@ -0,0 +1,6 @@ +/*! + * Font Awesome Free 6.2.1 by @fontawesome - https://fontawesome.com + * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) + * Copyright 2022 Fonticons, Inc. + */ +.fa{font-family:var(--fa-style-family,"Font Awesome 6 Free");font-weight:var(--fa-style,900)}.fa,.fa-brands,.fa-classic,.fa-regular,.fa-sharp,.fa-solid,.fab,.far,.fas{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:var(--fa-display,inline-block);font-style:normal;font-variant:normal;line-height:1;text-rendering:auto}.fa-classic,.fa-regular,.fa-solid,.far,.fas{font-family:"Font Awesome 6 Free"}.fa-brands,.fab{font-family:"Font Awesome 6 Brands"}.fa-1x{font-size:1em}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-6x{font-size:6em}.fa-7x{font-size:7em}.fa-8x{font-size:8em}.fa-9x{font-size:9em}.fa-10x{font-size:10em}.fa-2xs{font-size:.625em;line-height:.1em;vertical-align:.225em}.fa-xs{font-size:.75em;line-height:.08333em;vertical-align:.125em}.fa-sm{font-size:.875em;line-height:.07143em;vertical-align:.05357em}.fa-lg{font-size:1.25em;line-height:.05em;vertical-align:-.075em}.fa-xl{font-size:1.5em;line-height:.04167em;vertical-align:-.125em}.fa-2xl{font-size:2em;line-height:.03125em;vertical-align:-.1875em}.fa-fw{text-align:center;width:1.25em}.fa-ul{list-style-type:none;margin-left:var(--fa-li-margin,2.5em);padding-left:0}.fa-ul>li{position:relative}.fa-li{left:calc(var(--fa-li-width, 2em)*-1);position:absolute;text-align:center;width:var(--fa-li-width,2em);line-height:inherit}.fa-border{border-radius:var(--fa-border-radius,.1em);border:var(--fa-border-width,.08em) var(--fa-border-style,solid) var(--fa-border-color,#eee);padding:var(--fa-border-padding,.2em .25em .15em)}.fa-pull-left{float:left;margin-right:var(--fa-pull-margin,.3em)}.fa-pull-right{float:right;margin-left:var(--fa-pull-margin,.3em)}.fa-beat{-webkit-animation-name:fa-beat;animation-name:fa-beat;-webkit-animation-delay:var(--fa-animation-delay,0s);animation-delay:var(--fa-animation-delay,0s);-webkit-animation-direction:var(--fa-animation-direction,normal);animation-direction:var(--fa-animation-direction,normal);-webkit-animation-duration:var(--fa-animation-duration,1s);animation-duration:var(--fa-animation-duration,1s);-webkit-animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-iteration-count:var(--fa-animation-iteration-count,infinite);-webkit-animation-timing-function:var(--fa-animation-timing,ease-in-out);animation-timing-function:var(--fa-animation-timing,ease-in-out)}.fa-bounce{-webkit-animation-name:fa-bounce;animation-name:fa-bounce;-webkit-animation-delay:var(--fa-animation-delay,0s);animation-delay:var(--fa-animation-delay,0s);-webkit-animation-direction:var(--fa-animation-direction,normal);animation-direction:var(--fa-animation-direction,normal);-webkit-animation-duration:var(--fa-animation-duration,1s);animation-duration:var(--fa-animation-duration,1s);-webkit-animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-iteration-count:var(--fa-animation-iteration-count,infinite);-webkit-animation-timing-function:var(--fa-animation-timing,cubic-bezier(.28,.84,.42,1));animation-timing-function:var(--fa-animation-timing,cubic-bezier(.28,.84,.42,1))}.fa-fade{-webkit-animation-name:fa-fade;animation-name:fa-fade;-webkit-animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-iteration-count:var(--fa-animation-iteration-count,infinite);-webkit-animation-timing-function:var(--fa-animation-timing,cubic-bezier(.4,0,.6,1));animation-timing-function:var(--fa-animation-timing,cubic-bezier(.4,0,.6,1))}.fa-beat-fade,.fa-fade{-webkit-animation-delay:var(--fa-animation-delay,0s);animation-delay:var(--fa-animation-delay,0s);-webkit-animation-direction:var(--fa-animation-direction,normal);animation-direction:var(--fa-animation-direction,normal);-webkit-animation-duration:var(--fa-animation-duration,1s);animation-duration:var(--fa-animation-duration,1s)}.fa-beat-fade{-webkit-animation-name:fa-beat-fade;animation-name:fa-beat-fade;-webkit-animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-iteration-count:var(--fa-animation-iteration-count,infinite);-webkit-animation-timing-function:var(--fa-animation-timing,cubic-bezier(.4,0,.6,1));animation-timing-function:var(--fa-animation-timing,cubic-bezier(.4,0,.6,1))}.fa-flip{-webkit-animation-name:fa-flip;animation-name:fa-flip;-webkit-animation-delay:var(--fa-animation-delay,0s);animation-delay:var(--fa-animation-delay,0s);-webkit-animation-direction:var(--fa-animation-direction,normal);animation-direction:var(--fa-animation-direction,normal);-webkit-animation-duration:var(--fa-animation-duration,1s);animation-duration:var(--fa-animation-duration,1s);-webkit-animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-iteration-count:var(--fa-animation-iteration-count,infinite);-webkit-animation-timing-function:var(--fa-animation-timing,ease-in-out);animation-timing-function:var(--fa-animation-timing,ease-in-out)}.fa-shake{-webkit-animation-name:fa-shake;animation-name:fa-shake;-webkit-animation-duration:var(--fa-animation-duration,1s);animation-duration:var(--fa-animation-duration,1s);-webkit-animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-iteration-count:var(--fa-animation-iteration-count,infinite);-webkit-animation-timing-function:var(--fa-animation-timing,linear);animation-timing-function:var(--fa-animation-timing,linear)}.fa-shake,.fa-spin{-webkit-animation-delay:var(--fa-animation-delay,0s);animation-delay:var(--fa-animation-delay,0s);-webkit-animation-direction:var(--fa-animation-direction,normal);animation-direction:var(--fa-animation-direction,normal)}.fa-spin{-webkit-animation-name:fa-spin;animation-name:fa-spin;-webkit-animation-duration:var(--fa-animation-duration,2s);animation-duration:var(--fa-animation-duration,2s);-webkit-animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-iteration-count:var(--fa-animation-iteration-count,infinite);-webkit-animation-timing-function:var(--fa-animation-timing,linear);animation-timing-function:var(--fa-animation-timing,linear)}.fa-spin-reverse{--fa-animation-direction:reverse}.fa-pulse,.fa-spin-pulse{-webkit-animation-name:fa-spin;animation-name:fa-spin;-webkit-animation-direction:var(--fa-animation-direction,normal);animation-direction:var(--fa-animation-direction,normal);-webkit-animation-duration:var(--fa-animation-duration,1s);animation-duration:var(--fa-animation-duration,1s);-webkit-animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-iteration-count:var(--fa-animation-iteration-count,infinite);-webkit-animation-timing-function:var(--fa-animation-timing,steps(8));animation-timing-function:var(--fa-animation-timing,steps(8))}@media (prefers-reduced-motion:reduce){.fa-beat,.fa-beat-fade,.fa-bounce,.fa-fade,.fa-flip,.fa-pulse,.fa-shake,.fa-spin,.fa-spin-pulse{-webkit-animation-delay:-1ms;animation-delay:-1ms;-webkit-animation-duration:1ms;animation-duration:1ms;-webkit-animation-iteration-count:1;animation-iteration-count:1;transition-delay:0s;transition-duration:0s}}@-webkit-keyframes fa-beat{0%,90%{-webkit-transform:scale(1);transform:scale(1)}45%{-webkit-transform:scale(var(--fa-beat-scale,1.25));transform:scale(var(--fa-beat-scale,1.25))}}@keyframes fa-beat{0%,90%{-webkit-transform:scale(1);transform:scale(1)}45%{-webkit-transform:scale(var(--fa-beat-scale,1.25));transform:scale(var(--fa-beat-scale,1.25))}}@-webkit-keyframes fa-bounce{0%{-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0)}10%{-webkit-transform:scale(var(--fa-bounce-start-scale-x,1.1),var(--fa-bounce-start-scale-y,.9)) translateY(0);transform:scale(var(--fa-bounce-start-scale-x,1.1),var(--fa-bounce-start-scale-y,.9)) translateY(0)}30%{-webkit-transform:scale(var(--fa-bounce-jump-scale-x,.9),var(--fa-bounce-jump-scale-y,1.1)) translateY(var(--fa-bounce-height,-.5em));transform:scale(var(--fa-bounce-jump-scale-x,.9),var(--fa-bounce-jump-scale-y,1.1)) translateY(var(--fa-bounce-height,-.5em))}50%{-webkit-transform:scale(var(--fa-bounce-land-scale-x,1.05),var(--fa-bounce-land-scale-y,.95)) translateY(0);transform:scale(var(--fa-bounce-land-scale-x,1.05),var(--fa-bounce-land-scale-y,.95)) translateY(0)}57%{-webkit-transform:scale(1) translateY(var(--fa-bounce-rebound,-.125em));transform:scale(1) translateY(var(--fa-bounce-rebound,-.125em))}64%{-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0)}to{-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0)}}@keyframes fa-bounce{0%{-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0)}10%{-webkit-transform:scale(var(--fa-bounce-start-scale-x,1.1),var(--fa-bounce-start-scale-y,.9)) translateY(0);transform:scale(var(--fa-bounce-start-scale-x,1.1),var(--fa-bounce-start-scale-y,.9)) translateY(0)}30%{-webkit-transform:scale(var(--fa-bounce-jump-scale-x,.9),var(--fa-bounce-jump-scale-y,1.1)) translateY(var(--fa-bounce-height,-.5em));transform:scale(var(--fa-bounce-jump-scale-x,.9),var(--fa-bounce-jump-scale-y,1.1)) translateY(var(--fa-bounce-height,-.5em))}50%{-webkit-transform:scale(var(--fa-bounce-land-scale-x,1.05),var(--fa-bounce-land-scale-y,.95)) translateY(0);transform:scale(var(--fa-bounce-land-scale-x,1.05),var(--fa-bounce-land-scale-y,.95)) translateY(0)}57%{-webkit-transform:scale(1) translateY(var(--fa-bounce-rebound,-.125em));transform:scale(1) translateY(var(--fa-bounce-rebound,-.125em))}64%{-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0)}to{-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0)}}@-webkit-keyframes fa-fade{50%{opacity:var(--fa-fade-opacity,.4)}}@keyframes fa-fade{50%{opacity:var(--fa-fade-opacity,.4)}}@-webkit-keyframes fa-beat-fade{0%,to{opacity:var(--fa-beat-fade-opacity,.4);-webkit-transform:scale(1);transform:scale(1)}50%{opacity:1;-webkit-transform:scale(var(--fa-beat-fade-scale,1.125));transform:scale(var(--fa-beat-fade-scale,1.125))}}@keyframes fa-beat-fade{0%,to{opacity:var(--fa-beat-fade-opacity,.4);-webkit-transform:scale(1);transform:scale(1)}50%{opacity:1;-webkit-transform:scale(var(--fa-beat-fade-scale,1.125));transform:scale(var(--fa-beat-fade-scale,1.125))}}@-webkit-keyframes fa-flip{50%{-webkit-transform:rotate3d(var(--fa-flip-x,0),var(--fa-flip-y,1),var(--fa-flip-z,0),var(--fa-flip-angle,-180deg));transform:rotate3d(var(--fa-flip-x,0),var(--fa-flip-y,1),var(--fa-flip-z,0),var(--fa-flip-angle,-180deg))}}@keyframes fa-flip{50%{-webkit-transform:rotate3d(var(--fa-flip-x,0),var(--fa-flip-y,1),var(--fa-flip-z,0),var(--fa-flip-angle,-180deg));transform:rotate3d(var(--fa-flip-x,0),var(--fa-flip-y,1),var(--fa-flip-z,0),var(--fa-flip-angle,-180deg))}}@-webkit-keyframes fa-shake{0%{-webkit-transform:rotate(-15deg);transform:rotate(-15deg)}4%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}8%,24%{-webkit-transform:rotate(-18deg);transform:rotate(-18deg)}12%,28%{-webkit-transform:rotate(18deg);transform:rotate(18deg)}16%{-webkit-transform:rotate(-22deg);transform:rotate(-22deg)}20%{-webkit-transform:rotate(22deg);transform:rotate(22deg)}32%{-webkit-transform:rotate(-12deg);transform:rotate(-12deg)}36%{-webkit-transform:rotate(12deg);transform:rotate(12deg)}40%,to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}@keyframes fa-shake{0%{-webkit-transform:rotate(-15deg);transform:rotate(-15deg)}4%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}8%,24%{-webkit-transform:rotate(-18deg);transform:rotate(-18deg)}12%,28%{-webkit-transform:rotate(18deg);transform:rotate(18deg)}16%{-webkit-transform:rotate(-22deg);transform:rotate(-22deg)}20%{-webkit-transform:rotate(22deg);transform:rotate(22deg)}32%{-webkit-transform:rotate(-12deg);transform:rotate(-12deg)}36%{-webkit-transform:rotate(12deg);transform:rotate(12deg)}40%,to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.fa-rotate-90{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.fa-rotate-180{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.fa-rotate-270{-webkit-transform:rotate(270deg);transform:rotate(270deg)}.fa-flip-horizontal{-webkit-transform:scaleX(-1);transform:scaleX(-1)}.fa-flip-vertical{-webkit-transform:scaleY(-1);transform:scaleY(-1)}.fa-flip-both,.fa-flip-horizontal.fa-flip-vertical{-webkit-transform:scale(-1);transform:scale(-1)}.fa-rotate-by{-webkit-transform:rotate(var(--fa-rotate-angle,none));transform:rotate(var(--fa-rotate-angle,none))}.fa-stack{display:inline-block;height:2em;line-height:2em;position:relative;vertical-align:middle;width:2.5em}.fa-stack-1x,.fa-stack-2x{left:0;position:absolute;text-align:center;width:100%;z-index:var(--fa-stack-z-index,auto)}.fa-stack-1x{line-height:inherit}.fa-stack-2x{font-size:2em}.fa-inverse{color:var(--fa-inverse,#fff)}.fa-0:before{content:"\30"}.fa-1:before{content:"\31"}.fa-2:before{content:"\32"}.fa-3:before{content:"\33"}.fa-4:before{content:"\34"}.fa-5:before{content:"\35"}.fa-6:before{content:"\36"}.fa-7:before{content:"\37"}.fa-8:before{content:"\38"}.fa-9:before{content:"\39"}.fa-fill-drip:before{content:"\f576"}.fa-arrows-to-circle:before{content:"\e4bd"}.fa-chevron-circle-right:before,.fa-circle-chevron-right:before{content:"\f138"}.fa-at:before{content:"\40"}.fa-trash-alt:before,.fa-trash-can:before{content:"\f2ed"}.fa-text-height:before{content:"\f034"}.fa-user-times:before,.fa-user-xmark:before{content:"\f235"}.fa-stethoscope:before{content:"\f0f1"}.fa-comment-alt:before,.fa-message:before{content:"\f27a"}.fa-info:before{content:"\f129"}.fa-compress-alt:before,.fa-down-left-and-up-right-to-center:before{content:"\f422"}.fa-explosion:before{content:"\e4e9"}.fa-file-alt:before,.fa-file-lines:before,.fa-file-text:before{content:"\f15c"}.fa-wave-square:before{content:"\f83e"}.fa-ring:before{content:"\f70b"}.fa-building-un:before{content:"\e4d9"}.fa-dice-three:before{content:"\f527"}.fa-calendar-alt:before,.fa-calendar-days:before{content:"\f073"}.fa-anchor-circle-check:before{content:"\e4aa"}.fa-building-circle-arrow-right:before{content:"\e4d1"}.fa-volleyball-ball:before,.fa-volleyball:before{content:"\f45f"}.fa-arrows-up-to-line:before{content:"\e4c2"}.fa-sort-desc:before,.fa-sort-down:before{content:"\f0dd"}.fa-circle-minus:before,.fa-minus-circle:before{content:"\f056"}.fa-door-open:before{content:"\f52b"}.fa-right-from-bracket:before,.fa-sign-out-alt:before{content:"\f2f5"}.fa-atom:before{content:"\f5d2"}.fa-soap:before{content:"\e06e"}.fa-heart-music-camera-bolt:before,.fa-icons:before{content:"\f86d"}.fa-microphone-alt-slash:before,.fa-microphone-lines-slash:before{content:"\f539"}.fa-bridge-circle-check:before{content:"\e4c9"}.fa-pump-medical:before{content:"\e06a"}.fa-fingerprint:before{content:"\f577"}.fa-hand-point-right:before{content:"\f0a4"}.fa-magnifying-glass-location:before,.fa-search-location:before{content:"\f689"}.fa-forward-step:before,.fa-step-forward:before{content:"\f051"}.fa-face-smile-beam:before,.fa-smile-beam:before{content:"\f5b8"}.fa-flag-checkered:before{content:"\f11e"}.fa-football-ball:before,.fa-football:before{content:"\f44e"}.fa-school-circle-exclamation:before{content:"\e56c"}.fa-crop:before{content:"\f125"}.fa-angle-double-down:before,.fa-angles-down:before{content:"\f103"}.fa-users-rectangle:before{content:"\e594"}.fa-people-roof:before{content:"\e537"}.fa-people-line:before{content:"\e534"}.fa-beer-mug-empty:before,.fa-beer:before{content:"\f0fc"}.fa-diagram-predecessor:before{content:"\e477"}.fa-arrow-up-long:before,.fa-long-arrow-up:before{content:"\f176"}.fa-burn:before,.fa-fire-flame-simple:before{content:"\f46a"}.fa-male:before,.fa-person:before{content:"\f183"}.fa-laptop:before{content:"\f109"}.fa-file-csv:before{content:"\f6dd"}.fa-menorah:before{content:"\f676"}.fa-truck-plane:before{content:"\e58f"}.fa-record-vinyl:before{content:"\f8d9"}.fa-face-grin-stars:before,.fa-grin-stars:before{content:"\f587"}.fa-bong:before{content:"\f55c"}.fa-pastafarianism:before,.fa-spaghetti-monster-flying:before{content:"\f67b"}.fa-arrow-down-up-across-line:before{content:"\e4af"}.fa-spoon:before,.fa-utensil-spoon:before{content:"\f2e5"}.fa-jar-wheat:before{content:"\e517"}.fa-envelopes-bulk:before,.fa-mail-bulk:before{content:"\f674"}.fa-file-circle-exclamation:before{content:"\e4eb"}.fa-circle-h:before,.fa-hospital-symbol:before{content:"\f47e"}.fa-pager:before{content:"\f815"}.fa-address-book:before,.fa-contact-book:before{content:"\f2b9"}.fa-strikethrough:before{content:"\f0cc"}.fa-k:before{content:"\4b"}.fa-landmark-flag:before{content:"\e51c"}.fa-pencil-alt:before,.fa-pencil:before{content:"\f303"}.fa-backward:before{content:"\f04a"}.fa-caret-right:before{content:"\f0da"}.fa-comments:before{content:"\f086"}.fa-file-clipboard:before,.fa-paste:before{content:"\f0ea"}.fa-code-pull-request:before{content:"\e13c"}.fa-clipboard-list:before{content:"\f46d"}.fa-truck-loading:before,.fa-truck-ramp-box:before{content:"\f4de"}.fa-user-check:before{content:"\f4fc"}.fa-vial-virus:before{content:"\e597"}.fa-sheet-plastic:before{content:"\e571"}.fa-blog:before{content:"\f781"}.fa-user-ninja:before{content:"\f504"}.fa-person-arrow-up-from-line:before{content:"\e539"}.fa-scroll-torah:before,.fa-torah:before{content:"\f6a0"}.fa-broom-ball:before,.fa-quidditch-broom-ball:before,.fa-quidditch:before{content:"\f458"}.fa-toggle-off:before{content:"\f204"}.fa-archive:before,.fa-box-archive:before{content:"\f187"}.fa-person-drowning:before{content:"\e545"}.fa-arrow-down-9-1:before,.fa-sort-numeric-desc:before,.fa-sort-numeric-down-alt:before{content:"\f886"}.fa-face-grin-tongue-squint:before,.fa-grin-tongue-squint:before{content:"\f58a"}.fa-spray-can:before{content:"\f5bd"}.fa-truck-monster:before{content:"\f63b"}.fa-w:before{content:"\57"}.fa-earth-africa:before,.fa-globe-africa:before{content:"\f57c"}.fa-rainbow:before{content:"\f75b"}.fa-circle-notch:before{content:"\f1ce"}.fa-tablet-alt:before,.fa-tablet-screen-button:before{content:"\f3fa"}.fa-paw:before{content:"\f1b0"}.fa-cloud:before{content:"\f0c2"}.fa-trowel-bricks:before{content:"\e58a"}.fa-face-flushed:before,.fa-flushed:before{content:"\f579"}.fa-hospital-user:before{content:"\f80d"}.fa-tent-arrow-left-right:before{content:"\e57f"}.fa-gavel:before,.fa-legal:before{content:"\f0e3"}.fa-binoculars:before{content:"\f1e5"}.fa-microphone-slash:before{content:"\f131"}.fa-box-tissue:before{content:"\e05b"}.fa-motorcycle:before{content:"\f21c"}.fa-bell-concierge:before,.fa-concierge-bell:before{content:"\f562"}.fa-pen-ruler:before,.fa-pencil-ruler:before{content:"\f5ae"}.fa-people-arrows-left-right:before,.fa-people-arrows:before{content:"\e068"}.fa-mars-and-venus-burst:before{content:"\e523"}.fa-caret-square-right:before,.fa-square-caret-right:before{content:"\f152"}.fa-cut:before,.fa-scissors:before{content:"\f0c4"}.fa-sun-plant-wilt:before{content:"\e57a"}.fa-toilets-portable:before{content:"\e584"}.fa-hockey-puck:before{content:"\f453"}.fa-table:before{content:"\f0ce"}.fa-magnifying-glass-arrow-right:before{content:"\e521"}.fa-digital-tachograph:before,.fa-tachograph-digital:before{content:"\f566"}.fa-users-slash:before{content:"\e073"}.fa-clover:before{content:"\e139"}.fa-mail-reply:before,.fa-reply:before{content:"\f3e5"}.fa-star-and-crescent:before{content:"\f699"}.fa-house-fire:before{content:"\e50c"}.fa-minus-square:before,.fa-square-minus:before{content:"\f146"}.fa-helicopter:before{content:"\f533"}.fa-compass:before{content:"\f14e"}.fa-caret-square-down:before,.fa-square-caret-down:before{content:"\f150"}.fa-file-circle-question:before{content:"\e4ef"}.fa-laptop-code:before{content:"\f5fc"}.fa-swatchbook:before{content:"\f5c3"}.fa-prescription-bottle:before{content:"\f485"}.fa-bars:before,.fa-navicon:before{content:"\f0c9"}.fa-people-group:before{content:"\e533"}.fa-hourglass-3:before,.fa-hourglass-end:before{content:"\f253"}.fa-heart-broken:before,.fa-heart-crack:before{content:"\f7a9"}.fa-external-link-square-alt:before,.fa-square-up-right:before{content:"\f360"}.fa-face-kiss-beam:before,.fa-kiss-beam:before{content:"\f597"}.fa-film:before{content:"\f008"}.fa-ruler-horizontal:before{content:"\f547"}.fa-people-robbery:before{content:"\e536"}.fa-lightbulb:before{content:"\f0eb"}.fa-caret-left:before{content:"\f0d9"}.fa-circle-exclamation:before,.fa-exclamation-circle:before{content:"\f06a"}.fa-school-circle-xmark:before{content:"\e56d"}.fa-arrow-right-from-bracket:before,.fa-sign-out:before{content:"\f08b"}.fa-chevron-circle-down:before,.fa-circle-chevron-down:before{content:"\f13a"}.fa-unlock-alt:before,.fa-unlock-keyhole:before{content:"\f13e"}.fa-cloud-showers-heavy:before{content:"\f740"}.fa-headphones-alt:before,.fa-headphones-simple:before{content:"\f58f"}.fa-sitemap:before{content:"\f0e8"}.fa-circle-dollar-to-slot:before,.fa-donate:before{content:"\f4b9"}.fa-memory:before{content:"\f538"}.fa-road-spikes:before{content:"\e568"}.fa-fire-burner:before{content:"\e4f1"}.fa-flag:before{content:"\f024"}.fa-hanukiah:before{content:"\f6e6"}.fa-feather:before{content:"\f52d"}.fa-volume-down:before,.fa-volume-low:before{content:"\f027"}.fa-comment-slash:before{content:"\f4b3"}.fa-cloud-sun-rain:before{content:"\f743"}.fa-compress:before{content:"\f066"}.fa-wheat-alt:before,.fa-wheat-awn:before{content:"\e2cd"}.fa-ankh:before{content:"\f644"}.fa-hands-holding-child:before{content:"\e4fa"}.fa-asterisk:before{content:"\2a"}.fa-check-square:before,.fa-square-check:before{content:"\f14a"}.fa-peseta-sign:before{content:"\e221"}.fa-header:before,.fa-heading:before{content:"\f1dc"}.fa-ghost:before{content:"\f6e2"}.fa-list-squares:before,.fa-list:before{content:"\f03a"}.fa-phone-square-alt:before,.fa-square-phone-flip:before{content:"\f87b"}.fa-cart-plus:before{content:"\f217"}.fa-gamepad:before{content:"\f11b"}.fa-circle-dot:before,.fa-dot-circle:before{content:"\f192"}.fa-dizzy:before,.fa-face-dizzy:before{content:"\f567"}.fa-egg:before{content:"\f7fb"}.fa-house-medical-circle-xmark:before{content:"\e513"}.fa-campground:before{content:"\f6bb"}.fa-folder-plus:before{content:"\f65e"}.fa-futbol-ball:before,.fa-futbol:before,.fa-soccer-ball:before{content:"\f1e3"}.fa-paint-brush:before,.fa-paintbrush:before{content:"\f1fc"}.fa-lock:before{content:"\f023"}.fa-gas-pump:before{content:"\f52f"}.fa-hot-tub-person:before,.fa-hot-tub:before{content:"\f593"}.fa-map-location:before,.fa-map-marked:before{content:"\f59f"}.fa-house-flood-water:before{content:"\e50e"}.fa-tree:before{content:"\f1bb"}.fa-bridge-lock:before{content:"\e4cc"}.fa-sack-dollar:before{content:"\f81d"}.fa-edit:before,.fa-pen-to-square:before{content:"\f044"}.fa-car-side:before{content:"\f5e4"}.fa-share-alt:before,.fa-share-nodes:before{content:"\f1e0"}.fa-heart-circle-minus:before{content:"\e4ff"}.fa-hourglass-2:before,.fa-hourglass-half:before{content:"\f252"}.fa-microscope:before{content:"\f610"}.fa-sink:before{content:"\e06d"}.fa-bag-shopping:before,.fa-shopping-bag:before{content:"\f290"}.fa-arrow-down-z-a:before,.fa-sort-alpha-desc:before,.fa-sort-alpha-down-alt:before{content:"\f881"}.fa-mitten:before{content:"\f7b5"}.fa-person-rays:before{content:"\e54d"}.fa-users:before{content:"\f0c0"}.fa-eye-slash:before{content:"\f070"}.fa-flask-vial:before{content:"\e4f3"}.fa-hand-paper:before,.fa-hand:before{content:"\f256"}.fa-om:before{content:"\f679"}.fa-worm:before{content:"\e599"}.fa-house-circle-xmark:before{content:"\e50b"}.fa-plug:before{content:"\f1e6"}.fa-chevron-up:before{content:"\f077"}.fa-hand-spock:before{content:"\f259"}.fa-stopwatch:before{content:"\f2f2"}.fa-face-kiss:before,.fa-kiss:before{content:"\f596"}.fa-bridge-circle-xmark:before{content:"\e4cb"}.fa-face-grin-tongue:before,.fa-grin-tongue:before{content:"\f589"}.fa-chess-bishop:before{content:"\f43a"}.fa-face-grin-wink:before,.fa-grin-wink:before{content:"\f58c"}.fa-deaf:before,.fa-deafness:before,.fa-ear-deaf:before,.fa-hard-of-hearing:before{content:"\f2a4"}.fa-road-circle-check:before{content:"\e564"}.fa-dice-five:before{content:"\f523"}.fa-rss-square:before,.fa-square-rss:before{content:"\f143"}.fa-land-mine-on:before{content:"\e51b"}.fa-i-cursor:before{content:"\f246"}.fa-stamp:before{content:"\f5bf"}.fa-stairs:before{content:"\e289"}.fa-i:before{content:"\49"}.fa-hryvnia-sign:before,.fa-hryvnia:before{content:"\f6f2"}.fa-pills:before{content:"\f484"}.fa-face-grin-wide:before,.fa-grin-alt:before{content:"\f581"}.fa-tooth:before{content:"\f5c9"}.fa-v:before{content:"\56"}.fa-bangladeshi-taka-sign:before{content:"\e2e6"}.fa-bicycle:before{content:"\f206"}.fa-rod-asclepius:before,.fa-rod-snake:before,.fa-staff-aesculapius:before,.fa-staff-snake:before{content:"\e579"}.fa-head-side-cough-slash:before{content:"\e062"}.fa-ambulance:before,.fa-truck-medical:before{content:"\f0f9"}.fa-wheat-awn-circle-exclamation:before{content:"\e598"}.fa-snowman:before{content:"\f7d0"}.fa-mortar-pestle:before{content:"\f5a7"}.fa-road-barrier:before{content:"\e562"}.fa-school:before{content:"\f549"}.fa-igloo:before{content:"\f7ae"}.fa-joint:before{content:"\f595"}.fa-angle-right:before{content:"\f105"}.fa-horse:before{content:"\f6f0"}.fa-q:before{content:"\51"}.fa-g:before{content:"\47"}.fa-notes-medical:before{content:"\f481"}.fa-temperature-2:before,.fa-temperature-half:before,.fa-thermometer-2:before,.fa-thermometer-half:before{content:"\f2c9"}.fa-dong-sign:before{content:"\e169"}.fa-capsules:before{content:"\f46b"}.fa-poo-bolt:before,.fa-poo-storm:before{content:"\f75a"}.fa-face-frown-open:before,.fa-frown-open:before{content:"\f57a"}.fa-hand-point-up:before{content:"\f0a6"}.fa-money-bill:before{content:"\f0d6"}.fa-bookmark:before{content:"\f02e"}.fa-align-justify:before{content:"\f039"}.fa-umbrella-beach:before{content:"\f5ca"}.fa-helmet-un:before{content:"\e503"}.fa-bullseye:before{content:"\f140"}.fa-bacon:before{content:"\f7e5"}.fa-hand-point-down:before{content:"\f0a7"}.fa-arrow-up-from-bracket:before{content:"\e09a"}.fa-folder-blank:before,.fa-folder:before{content:"\f07b"}.fa-file-medical-alt:before,.fa-file-waveform:before{content:"\f478"}.fa-radiation:before{content:"\f7b9"}.fa-chart-simple:before{content:"\e473"}.fa-mars-stroke:before{content:"\f229"}.fa-vial:before{content:"\f492"}.fa-dashboard:before,.fa-gauge-med:before,.fa-gauge:before,.fa-tachometer-alt-average:before{content:"\f624"}.fa-magic-wand-sparkles:before,.fa-wand-magic-sparkles:before{content:"\e2ca"}.fa-e:before{content:"\45"}.fa-pen-alt:before,.fa-pen-clip:before{content:"\f305"}.fa-bridge-circle-exclamation:before{content:"\e4ca"}.fa-user:before{content:"\f007"}.fa-school-circle-check:before{content:"\e56b"}.fa-dumpster:before{content:"\f793"}.fa-shuttle-van:before,.fa-van-shuttle:before{content:"\f5b6"}.fa-building-user:before{content:"\e4da"}.fa-caret-square-left:before,.fa-square-caret-left:before{content:"\f191"}.fa-highlighter:before{content:"\f591"}.fa-key:before{content:"\f084"}.fa-bullhorn:before{content:"\f0a1"}.fa-globe:before{content:"\f0ac"}.fa-synagogue:before{content:"\f69b"}.fa-person-half-dress:before{content:"\e548"}.fa-road-bridge:before{content:"\e563"}.fa-location-arrow:before{content:"\f124"}.fa-c:before{content:"\43"}.fa-tablet-button:before{content:"\f10a"}.fa-building-lock:before{content:"\e4d6"}.fa-pizza-slice:before{content:"\f818"}.fa-money-bill-wave:before{content:"\f53a"}.fa-area-chart:before,.fa-chart-area:before{content:"\f1fe"}.fa-house-flag:before{content:"\e50d"}.fa-person-circle-minus:before{content:"\e540"}.fa-ban:before,.fa-cancel:before{content:"\f05e"}.fa-camera-rotate:before{content:"\e0d8"}.fa-air-freshener:before,.fa-spray-can-sparkles:before{content:"\f5d0"}.fa-star:before{content:"\f005"}.fa-repeat:before{content:"\f363"}.fa-cross:before{content:"\f654"}.fa-box:before{content:"\f466"}.fa-venus-mars:before{content:"\f228"}.fa-arrow-pointer:before,.fa-mouse-pointer:before{content:"\f245"}.fa-expand-arrows-alt:before,.fa-maximize:before{content:"\f31e"}.fa-charging-station:before{content:"\f5e7"}.fa-shapes:before,.fa-triangle-circle-square:before{content:"\f61f"}.fa-random:before,.fa-shuffle:before{content:"\f074"}.fa-person-running:before,.fa-running:before{content:"\f70c"}.fa-mobile-retro:before{content:"\e527"}.fa-grip-lines-vertical:before{content:"\f7a5"}.fa-spider:before{content:"\f717"}.fa-hands-bound:before{content:"\e4f9"}.fa-file-invoice-dollar:before{content:"\f571"}.fa-plane-circle-exclamation:before{content:"\e556"}.fa-x-ray:before{content:"\f497"}.fa-spell-check:before{content:"\f891"}.fa-slash:before{content:"\f715"}.fa-computer-mouse:before,.fa-mouse:before{content:"\f8cc"}.fa-arrow-right-to-bracket:before,.fa-sign-in:before{content:"\f090"}.fa-shop-slash:before,.fa-store-alt-slash:before{content:"\e070"}.fa-server:before{content:"\f233"}.fa-virus-covid-slash:before{content:"\e4a9"}.fa-shop-lock:before{content:"\e4a5"}.fa-hourglass-1:before,.fa-hourglass-start:before{content:"\f251"}.fa-blender-phone:before{content:"\f6b6"}.fa-building-wheat:before{content:"\e4db"}.fa-person-breastfeeding:before{content:"\e53a"}.fa-right-to-bracket:before,.fa-sign-in-alt:before{content:"\f2f6"}.fa-venus:before{content:"\f221"}.fa-passport:before{content:"\f5ab"}.fa-heart-pulse:before,.fa-heartbeat:before{content:"\f21e"}.fa-people-carry-box:before,.fa-people-carry:before{content:"\f4ce"}.fa-temperature-high:before{content:"\f769"}.fa-microchip:before{content:"\f2db"}.fa-crown:before{content:"\f521"}.fa-weight-hanging:before{content:"\f5cd"}.fa-xmarks-lines:before{content:"\e59a"}.fa-file-prescription:before{content:"\f572"}.fa-weight-scale:before,.fa-weight:before{content:"\f496"}.fa-user-friends:before,.fa-user-group:before{content:"\f500"}.fa-arrow-up-a-z:before,.fa-sort-alpha-up:before{content:"\f15e"}.fa-chess-knight:before{content:"\f441"}.fa-face-laugh-squint:before,.fa-laugh-squint:before{content:"\f59b"}.fa-wheelchair:before{content:"\f193"}.fa-arrow-circle-up:before,.fa-circle-arrow-up:before{content:"\f0aa"}.fa-toggle-on:before{content:"\f205"}.fa-person-walking:before,.fa-walking:before{content:"\f554"}.fa-l:before{content:"\4c"}.fa-fire:before{content:"\f06d"}.fa-bed-pulse:before,.fa-procedures:before{content:"\f487"}.fa-shuttle-space:before,.fa-space-shuttle:before{content:"\f197"}.fa-face-laugh:before,.fa-laugh:before{content:"\f599"}.fa-folder-open:before{content:"\f07c"}.fa-heart-circle-plus:before{content:"\e500"}.fa-code-fork:before{content:"\e13b"}.fa-city:before{content:"\f64f"}.fa-microphone-alt:before,.fa-microphone-lines:before{content:"\f3c9"}.fa-pepper-hot:before{content:"\f816"}.fa-unlock:before{content:"\f09c"}.fa-colon-sign:before{content:"\e140"}.fa-headset:before{content:"\f590"}.fa-store-slash:before{content:"\e071"}.fa-road-circle-xmark:before{content:"\e566"}.fa-user-minus:before{content:"\f503"}.fa-mars-stroke-up:before,.fa-mars-stroke-v:before{content:"\f22a"}.fa-champagne-glasses:before,.fa-glass-cheers:before{content:"\f79f"}.fa-clipboard:before{content:"\f328"}.fa-house-circle-exclamation:before{content:"\e50a"}.fa-file-arrow-up:before,.fa-file-upload:before{content:"\f574"}.fa-wifi-3:before,.fa-wifi-strong:before,.fa-wifi:before{content:"\f1eb"}.fa-bath:before,.fa-bathtub:before{content:"\f2cd"}.fa-underline:before{content:"\f0cd"}.fa-user-edit:before,.fa-user-pen:before{content:"\f4ff"}.fa-signature:before{content:"\f5b7"}.fa-stroopwafel:before{content:"\f551"}.fa-bold:before{content:"\f032"}.fa-anchor-lock:before{content:"\e4ad"}.fa-building-ngo:before{content:"\e4d7"}.fa-manat-sign:before{content:"\e1d5"}.fa-not-equal:before{content:"\f53e"}.fa-border-style:before,.fa-border-top-left:before{content:"\f853"}.fa-map-location-dot:before,.fa-map-marked-alt:before{content:"\f5a0"}.fa-jedi:before{content:"\f669"}.fa-poll:before,.fa-square-poll-vertical:before{content:"\f681"}.fa-mug-hot:before{content:"\f7b6"}.fa-battery-car:before,.fa-car-battery:before{content:"\f5df"}.fa-gift:before{content:"\f06b"}.fa-dice-two:before{content:"\f528"}.fa-chess-queen:before{content:"\f445"}.fa-glasses:before{content:"\f530"}.fa-chess-board:before{content:"\f43c"}.fa-building-circle-check:before{content:"\e4d2"}.fa-person-chalkboard:before{content:"\e53d"}.fa-mars-stroke-h:before,.fa-mars-stroke-right:before{content:"\f22b"}.fa-hand-back-fist:before,.fa-hand-rock:before{content:"\f255"}.fa-caret-square-up:before,.fa-square-caret-up:before{content:"\f151"}.fa-cloud-showers-water:before{content:"\e4e4"}.fa-bar-chart:before,.fa-chart-bar:before{content:"\f080"}.fa-hands-bubbles:before,.fa-hands-wash:before{content:"\e05e"}.fa-less-than-equal:before{content:"\f537"}.fa-train:before{content:"\f238"}.fa-eye-low-vision:before,.fa-low-vision:before{content:"\f2a8"}.fa-crow:before{content:"\f520"}.fa-sailboat:before{content:"\e445"}.fa-window-restore:before{content:"\f2d2"}.fa-plus-square:before,.fa-square-plus:before{content:"\f0fe"}.fa-torii-gate:before{content:"\f6a1"}.fa-frog:before{content:"\f52e"}.fa-bucket:before{content:"\e4cf"}.fa-image:before{content:"\f03e"}.fa-microphone:before{content:"\f130"}.fa-cow:before{content:"\f6c8"}.fa-caret-up:before{content:"\f0d8"}.fa-screwdriver:before{content:"\f54a"}.fa-folder-closed:before{content:"\e185"}.fa-house-tsunami:before{content:"\e515"}.fa-square-nfi:before{content:"\e576"}.fa-arrow-up-from-ground-water:before{content:"\e4b5"}.fa-glass-martini-alt:before,.fa-martini-glass:before{content:"\f57b"}.fa-rotate-back:before,.fa-rotate-backward:before,.fa-rotate-left:before,.fa-undo-alt:before{content:"\f2ea"}.fa-columns:before,.fa-table-columns:before{content:"\f0db"}.fa-lemon:before{content:"\f094"}.fa-head-side-mask:before{content:"\e063"}.fa-handshake:before{content:"\f2b5"}.fa-gem:before{content:"\f3a5"}.fa-dolly-box:before,.fa-dolly:before{content:"\f472"}.fa-smoking:before{content:"\f48d"}.fa-compress-arrows-alt:before,.fa-minimize:before{content:"\f78c"}.fa-monument:before{content:"\f5a6"}.fa-snowplow:before{content:"\f7d2"}.fa-angle-double-right:before,.fa-angles-right:before{content:"\f101"}.fa-cannabis:before{content:"\f55f"}.fa-circle-play:before,.fa-play-circle:before{content:"\f144"}.fa-tablets:before{content:"\f490"}.fa-ethernet:before{content:"\f796"}.fa-eur:before,.fa-euro-sign:before,.fa-euro:before{content:"\f153"}.fa-chair:before{content:"\f6c0"}.fa-check-circle:before,.fa-circle-check:before{content:"\f058"}.fa-circle-stop:before,.fa-stop-circle:before{content:"\f28d"}.fa-compass-drafting:before,.fa-drafting-compass:before{content:"\f568"}.fa-plate-wheat:before{content:"\e55a"}.fa-icicles:before{content:"\f7ad"}.fa-person-shelter:before{content:"\e54f"}.fa-neuter:before{content:"\f22c"}.fa-id-badge:before{content:"\f2c1"}.fa-marker:before{content:"\f5a1"}.fa-face-laugh-beam:before,.fa-laugh-beam:before{content:"\f59a"}.fa-helicopter-symbol:before{content:"\e502"}.fa-universal-access:before{content:"\f29a"}.fa-chevron-circle-up:before,.fa-circle-chevron-up:before{content:"\f139"}.fa-lari-sign:before{content:"\e1c8"}.fa-volcano:before{content:"\f770"}.fa-person-walking-dashed-line-arrow-right:before{content:"\e553"}.fa-gbp:before,.fa-pound-sign:before,.fa-sterling-sign:before{content:"\f154"}.fa-viruses:before{content:"\e076"}.fa-square-person-confined:before{content:"\e577"}.fa-user-tie:before{content:"\f508"}.fa-arrow-down-long:before,.fa-long-arrow-down:before{content:"\f175"}.fa-tent-arrow-down-to-line:before{content:"\e57e"}.fa-certificate:before{content:"\f0a3"}.fa-mail-reply-all:before,.fa-reply-all:before{content:"\f122"}.fa-suitcase:before{content:"\f0f2"}.fa-person-skating:before,.fa-skating:before{content:"\f7c5"}.fa-filter-circle-dollar:before,.fa-funnel-dollar:before{content:"\f662"}.fa-camera-retro:before{content:"\f083"}.fa-arrow-circle-down:before,.fa-circle-arrow-down:before{content:"\f0ab"}.fa-arrow-right-to-file:before,.fa-file-import:before{content:"\f56f"}.fa-external-link-square:before,.fa-square-arrow-up-right:before{content:"\f14c"}.fa-box-open:before{content:"\f49e"}.fa-scroll:before{content:"\f70e"}.fa-spa:before{content:"\f5bb"}.fa-location-pin-lock:before{content:"\e51f"}.fa-pause:before{content:"\f04c"}.fa-hill-avalanche:before{content:"\e507"}.fa-temperature-0:before,.fa-temperature-empty:before,.fa-thermometer-0:before,.fa-thermometer-empty:before{content:"\f2cb"}.fa-bomb:before{content:"\f1e2"}.fa-registered:before{content:"\f25d"}.fa-address-card:before,.fa-contact-card:before,.fa-vcard:before{content:"\f2bb"}.fa-balance-scale-right:before,.fa-scale-unbalanced-flip:before{content:"\f516"}.fa-subscript:before{content:"\f12c"}.fa-diamond-turn-right:before,.fa-directions:before{content:"\f5eb"}.fa-burst:before{content:"\e4dc"}.fa-house-laptop:before,.fa-laptop-house:before{content:"\e066"}.fa-face-tired:before,.fa-tired:before{content:"\f5c8"}.fa-money-bills:before{content:"\e1f3"}.fa-smog:before{content:"\f75f"}.fa-crutch:before{content:"\f7f7"}.fa-cloud-arrow-up:before,.fa-cloud-upload-alt:before,.fa-cloud-upload:before{content:"\f0ee"}.fa-palette:before{content:"\f53f"}.fa-arrows-turn-right:before{content:"\e4c0"}.fa-vest:before{content:"\e085"}.fa-ferry:before{content:"\e4ea"}.fa-arrows-down-to-people:before{content:"\e4b9"}.fa-seedling:before,.fa-sprout:before{content:"\f4d8"}.fa-arrows-alt-h:before,.fa-left-right:before{content:"\f337"}.fa-boxes-packing:before{content:"\e4c7"}.fa-arrow-circle-left:before,.fa-circle-arrow-left:before{content:"\f0a8"}.fa-group-arrows-rotate:before{content:"\e4f6"}.fa-bowl-food:before{content:"\e4c6"}.fa-candy-cane:before{content:"\f786"}.fa-arrow-down-wide-short:before,.fa-sort-amount-asc:before,.fa-sort-amount-down:before{content:"\f160"}.fa-cloud-bolt:before,.fa-thunderstorm:before{content:"\f76c"}.fa-remove-format:before,.fa-text-slash:before{content:"\f87d"}.fa-face-smile-wink:before,.fa-smile-wink:before{content:"\f4da"}.fa-file-word:before{content:"\f1c2"}.fa-file-powerpoint:before{content:"\f1c4"}.fa-arrows-h:before,.fa-arrows-left-right:before{content:"\f07e"}.fa-house-lock:before{content:"\e510"}.fa-cloud-arrow-down:before,.fa-cloud-download-alt:before,.fa-cloud-download:before{content:"\f0ed"}.fa-children:before{content:"\e4e1"}.fa-blackboard:before,.fa-chalkboard:before{content:"\f51b"}.fa-user-alt-slash:before,.fa-user-large-slash:before{content:"\f4fa"}.fa-envelope-open:before{content:"\f2b6"}.fa-handshake-alt-slash:before,.fa-handshake-simple-slash:before{content:"\e05f"}.fa-mattress-pillow:before{content:"\e525"}.fa-guarani-sign:before{content:"\e19a"}.fa-arrows-rotate:before,.fa-refresh:before,.fa-sync:before{content:"\f021"}.fa-fire-extinguisher:before{content:"\f134"}.fa-cruzeiro-sign:before{content:"\e152"}.fa-greater-than-equal:before{content:"\f532"}.fa-shield-alt:before,.fa-shield-halved:before{content:"\f3ed"}.fa-atlas:before,.fa-book-atlas:before{content:"\f558"}.fa-virus:before{content:"\e074"}.fa-envelope-circle-check:before{content:"\e4e8"}.fa-layer-group:before{content:"\f5fd"}.fa-arrows-to-dot:before{content:"\e4be"}.fa-archway:before{content:"\f557"}.fa-heart-circle-check:before{content:"\e4fd"}.fa-house-chimney-crack:before,.fa-house-damage:before{content:"\f6f1"}.fa-file-archive:before,.fa-file-zipper:before{content:"\f1c6"}.fa-square:before{content:"\f0c8"}.fa-glass-martini:before,.fa-martini-glass-empty:before{content:"\f000"}.fa-couch:before{content:"\f4b8"}.fa-cedi-sign:before{content:"\e0df"}.fa-italic:before{content:"\f033"}.fa-church:before{content:"\f51d"}.fa-comments-dollar:before{content:"\f653"}.fa-democrat:before{content:"\f747"}.fa-z:before{content:"\5a"}.fa-person-skiing:before,.fa-skiing:before{content:"\f7c9"}.fa-road-lock:before{content:"\e567"}.fa-a:before{content:"\41"}.fa-temperature-arrow-down:before,.fa-temperature-down:before{content:"\e03f"}.fa-feather-alt:before,.fa-feather-pointed:before{content:"\f56b"}.fa-p:before{content:"\50"}.fa-snowflake:before{content:"\f2dc"}.fa-newspaper:before{content:"\f1ea"}.fa-ad:before,.fa-rectangle-ad:before{content:"\f641"}.fa-arrow-circle-right:before,.fa-circle-arrow-right:before{content:"\f0a9"}.fa-filter-circle-xmark:before{content:"\e17b"}.fa-locust:before{content:"\e520"}.fa-sort:before,.fa-unsorted:before{content:"\f0dc"}.fa-list-1-2:before,.fa-list-numeric:before,.fa-list-ol:before{content:"\f0cb"}.fa-person-dress-burst:before{content:"\e544"}.fa-money-check-alt:before,.fa-money-check-dollar:before{content:"\f53d"}.fa-vector-square:before{content:"\f5cb"}.fa-bread-slice:before{content:"\f7ec"}.fa-language:before{content:"\f1ab"}.fa-face-kiss-wink-heart:before,.fa-kiss-wink-heart:before{content:"\f598"}.fa-filter:before{content:"\f0b0"}.fa-question:before{content:"\3f"}.fa-file-signature:before{content:"\f573"}.fa-arrows-alt:before,.fa-up-down-left-right:before{content:"\f0b2"}.fa-house-chimney-user:before{content:"\e065"}.fa-hand-holding-heart:before{content:"\f4be"}.fa-puzzle-piece:before{content:"\f12e"}.fa-money-check:before{content:"\f53c"}.fa-star-half-alt:before,.fa-star-half-stroke:before{content:"\f5c0"}.fa-code:before{content:"\f121"}.fa-glass-whiskey:before,.fa-whiskey-glass:before{content:"\f7a0"}.fa-building-circle-exclamation:before{content:"\e4d3"}.fa-magnifying-glass-chart:before{content:"\e522"}.fa-arrow-up-right-from-square:before,.fa-external-link:before{content:"\f08e"}.fa-cubes-stacked:before{content:"\e4e6"}.fa-krw:before,.fa-won-sign:before,.fa-won:before{content:"\f159"}.fa-virus-covid:before{content:"\e4a8"}.fa-austral-sign:before{content:"\e0a9"}.fa-f:before{content:"\46"}.fa-leaf:before{content:"\f06c"}.fa-road:before{content:"\f018"}.fa-cab:before,.fa-taxi:before{content:"\f1ba"}.fa-person-circle-plus:before{content:"\e541"}.fa-chart-pie:before,.fa-pie-chart:before{content:"\f200"}.fa-bolt-lightning:before{content:"\e0b7"}.fa-sack-xmark:before{content:"\e56a"}.fa-file-excel:before{content:"\f1c3"}.fa-file-contract:before{content:"\f56c"}.fa-fish-fins:before{content:"\e4f2"}.fa-building-flag:before{content:"\e4d5"}.fa-face-grin-beam:before,.fa-grin-beam:before{content:"\f582"}.fa-object-ungroup:before{content:"\f248"}.fa-poop:before{content:"\f619"}.fa-location-pin:before,.fa-map-marker:before{content:"\f041"}.fa-kaaba:before{content:"\f66b"}.fa-toilet-paper:before{content:"\f71e"}.fa-hard-hat:before,.fa-hat-hard:before,.fa-helmet-safety:before{content:"\f807"}.fa-eject:before{content:"\f052"}.fa-arrow-alt-circle-right:before,.fa-circle-right:before{content:"\f35a"}.fa-plane-circle-check:before{content:"\e555"}.fa-face-rolling-eyes:before,.fa-meh-rolling-eyes:before{content:"\f5a5"}.fa-object-group:before{content:"\f247"}.fa-chart-line:before,.fa-line-chart:before{content:"\f201"}.fa-mask-ventilator:before{content:"\e524"}.fa-arrow-right:before{content:"\f061"}.fa-map-signs:before,.fa-signs-post:before{content:"\f277"}.fa-cash-register:before{content:"\f788"}.fa-person-circle-question:before{content:"\e542"}.fa-h:before{content:"\48"}.fa-tarp:before{content:"\e57b"}.fa-screwdriver-wrench:before,.fa-tools:before{content:"\f7d9"}.fa-arrows-to-eye:before{content:"\e4bf"}.fa-plug-circle-bolt:before{content:"\e55b"}.fa-heart:before{content:"\f004"}.fa-mars-and-venus:before{content:"\f224"}.fa-home-user:before,.fa-house-user:before{content:"\e1b0"}.fa-dumpster-fire:before{content:"\f794"}.fa-house-crack:before{content:"\e3b1"}.fa-cocktail:before,.fa-martini-glass-citrus:before{content:"\f561"}.fa-face-surprise:before,.fa-surprise:before{content:"\f5c2"}.fa-bottle-water:before{content:"\e4c5"}.fa-circle-pause:before,.fa-pause-circle:before{content:"\f28b"}.fa-toilet-paper-slash:before{content:"\e072"}.fa-apple-alt:before,.fa-apple-whole:before{content:"\f5d1"}.fa-kitchen-set:before{content:"\e51a"}.fa-r:before{content:"\52"}.fa-temperature-1:before,.fa-temperature-quarter:before,.fa-thermometer-1:before,.fa-thermometer-quarter:before{content:"\f2ca"}.fa-cube:before{content:"\f1b2"}.fa-bitcoin-sign:before{content:"\e0b4"}.fa-shield-dog:before{content:"\e573"}.fa-solar-panel:before{content:"\f5ba"}.fa-lock-open:before{content:"\f3c1"}.fa-elevator:before{content:"\e16d"}.fa-money-bill-transfer:before{content:"\e528"}.fa-money-bill-trend-up:before{content:"\e529"}.fa-house-flood-water-circle-arrow-right:before{content:"\e50f"}.fa-poll-h:before,.fa-square-poll-horizontal:before{content:"\f682"}.fa-circle:before{content:"\f111"}.fa-backward-fast:before,.fa-fast-backward:before{content:"\f049"}.fa-recycle:before{content:"\f1b8"}.fa-user-astronaut:before{content:"\f4fb"}.fa-plane-slash:before{content:"\e069"}.fa-trademark:before{content:"\f25c"}.fa-basketball-ball:before,.fa-basketball:before{content:"\f434"}.fa-satellite-dish:before{content:"\f7c0"}.fa-arrow-alt-circle-up:before,.fa-circle-up:before{content:"\f35b"}.fa-mobile-alt:before,.fa-mobile-screen-button:before{content:"\f3cd"}.fa-volume-high:before,.fa-volume-up:before{content:"\f028"}.fa-users-rays:before{content:"\e593"}.fa-wallet:before{content:"\f555"}.fa-clipboard-check:before{content:"\f46c"}.fa-file-audio:before{content:"\f1c7"}.fa-burger:before,.fa-hamburger:before{content:"\f805"}.fa-wrench:before{content:"\f0ad"}.fa-bugs:before{content:"\e4d0"}.fa-rupee-sign:before,.fa-rupee:before{content:"\f156"}.fa-file-image:before{content:"\f1c5"}.fa-circle-question:before,.fa-question-circle:before{content:"\f059"}.fa-plane-departure:before{content:"\f5b0"}.fa-handshake-slash:before{content:"\e060"}.fa-book-bookmark:before{content:"\e0bb"}.fa-code-branch:before{content:"\f126"}.fa-hat-cowboy:before{content:"\f8c0"}.fa-bridge:before{content:"\e4c8"}.fa-phone-alt:before,.fa-phone-flip:before{content:"\f879"}.fa-truck-front:before{content:"\e2b7"}.fa-cat:before{content:"\f6be"}.fa-anchor-circle-exclamation:before{content:"\e4ab"}.fa-truck-field:before{content:"\e58d"}.fa-route:before{content:"\f4d7"}.fa-clipboard-question:before{content:"\e4e3"}.fa-panorama:before{content:"\e209"}.fa-comment-medical:before{content:"\f7f5"}.fa-teeth-open:before{content:"\f62f"}.fa-file-circle-minus:before{content:"\e4ed"}.fa-tags:before{content:"\f02c"}.fa-wine-glass:before{content:"\f4e3"}.fa-fast-forward:before,.fa-forward-fast:before{content:"\f050"}.fa-face-meh-blank:before,.fa-meh-blank:before{content:"\f5a4"}.fa-parking:before,.fa-square-parking:before{content:"\f540"}.fa-house-signal:before{content:"\e012"}.fa-bars-progress:before,.fa-tasks-alt:before{content:"\f828"}.fa-faucet-drip:before{content:"\e006"}.fa-cart-flatbed:before,.fa-dolly-flatbed:before{content:"\f474"}.fa-ban-smoking:before,.fa-smoking-ban:before{content:"\f54d"}.fa-terminal:before{content:"\f120"}.fa-mobile-button:before{content:"\f10b"}.fa-house-medical-flag:before{content:"\e514"}.fa-basket-shopping:before,.fa-shopping-basket:before{content:"\f291"}.fa-tape:before{content:"\f4db"}.fa-bus-alt:before,.fa-bus-simple:before{content:"\f55e"}.fa-eye:before{content:"\f06e"}.fa-face-sad-cry:before,.fa-sad-cry:before{content:"\f5b3"}.fa-audio-description:before{content:"\f29e"}.fa-person-military-to-person:before{content:"\e54c"}.fa-file-shield:before{content:"\e4f0"}.fa-user-slash:before{content:"\f506"}.fa-pen:before{content:"\f304"}.fa-tower-observation:before{content:"\e586"}.fa-file-code:before{content:"\f1c9"}.fa-signal-5:before,.fa-signal-perfect:before,.fa-signal:before{content:"\f012"}.fa-bus:before{content:"\f207"}.fa-heart-circle-xmark:before{content:"\e501"}.fa-home-lg:before,.fa-house-chimney:before{content:"\e3af"}.fa-window-maximize:before{content:"\f2d0"}.fa-face-frown:before,.fa-frown:before{content:"\f119"}.fa-prescription:before{content:"\f5b1"}.fa-shop:before,.fa-store-alt:before{content:"\f54f"}.fa-floppy-disk:before,.fa-save:before{content:"\f0c7"}.fa-vihara:before{content:"\f6a7"}.fa-balance-scale-left:before,.fa-scale-unbalanced:before{content:"\f515"}.fa-sort-asc:before,.fa-sort-up:before{content:"\f0de"}.fa-comment-dots:before,.fa-commenting:before{content:"\f4ad"}.fa-plant-wilt:before{content:"\e5aa"}.fa-diamond:before{content:"\f219"}.fa-face-grin-squint:before,.fa-grin-squint:before{content:"\f585"}.fa-hand-holding-dollar:before,.fa-hand-holding-usd:before{content:"\f4c0"}.fa-bacterium:before{content:"\e05a"}.fa-hand-pointer:before{content:"\f25a"}.fa-drum-steelpan:before{content:"\f56a"}.fa-hand-scissors:before{content:"\f257"}.fa-hands-praying:before,.fa-praying-hands:before{content:"\f684"}.fa-arrow-right-rotate:before,.fa-arrow-rotate-forward:before,.fa-arrow-rotate-right:before,.fa-redo:before{content:"\f01e"}.fa-biohazard:before{content:"\f780"}.fa-location-crosshairs:before,.fa-location:before{content:"\f601"}.fa-mars-double:before{content:"\f227"}.fa-child-dress:before{content:"\e59c"}.fa-users-between-lines:before{content:"\e591"}.fa-lungs-virus:before{content:"\e067"}.fa-face-grin-tears:before,.fa-grin-tears:before{content:"\f588"}.fa-phone:before{content:"\f095"}.fa-calendar-times:before,.fa-calendar-xmark:before{content:"\f273"}.fa-child-reaching:before{content:"\e59d"}.fa-head-side-virus:before{content:"\e064"}.fa-user-cog:before,.fa-user-gear:before{content:"\f4fe"}.fa-arrow-up-1-9:before,.fa-sort-numeric-up:before{content:"\f163"}.fa-door-closed:before{content:"\f52a"}.fa-shield-virus:before{content:"\e06c"}.fa-dice-six:before{content:"\f526"}.fa-mosquito-net:before{content:"\e52c"}.fa-bridge-water:before{content:"\e4ce"}.fa-person-booth:before{content:"\f756"}.fa-text-width:before{content:"\f035"}.fa-hat-wizard:before{content:"\f6e8"}.fa-pen-fancy:before{content:"\f5ac"}.fa-digging:before,.fa-person-digging:before{content:"\f85e"}.fa-trash:before{content:"\f1f8"}.fa-gauge-simple-med:before,.fa-gauge-simple:before,.fa-tachometer-average:before{content:"\f629"}.fa-book-medical:before{content:"\f7e6"}.fa-poo:before{content:"\f2fe"}.fa-quote-right-alt:before,.fa-quote-right:before{content:"\f10e"}.fa-shirt:before,.fa-t-shirt:before,.fa-tshirt:before{content:"\f553"}.fa-cubes:before{content:"\f1b3"}.fa-divide:before{content:"\f529"}.fa-tenge-sign:before,.fa-tenge:before{content:"\f7d7"}.fa-headphones:before{content:"\f025"}.fa-hands-holding:before{content:"\f4c2"}.fa-hands-clapping:before{content:"\e1a8"}.fa-republican:before{content:"\f75e"}.fa-arrow-left:before{content:"\f060"}.fa-person-circle-xmark:before{content:"\e543"}.fa-ruler:before{content:"\f545"}.fa-align-left:before{content:"\f036"}.fa-dice-d6:before{content:"\f6d1"}.fa-restroom:before{content:"\f7bd"}.fa-j:before{content:"\4a"}.fa-users-viewfinder:before{content:"\e595"}.fa-file-video:before{content:"\f1c8"}.fa-external-link-alt:before,.fa-up-right-from-square:before{content:"\f35d"}.fa-table-cells:before,.fa-th:before{content:"\f00a"}.fa-file-pdf:before{content:"\f1c1"}.fa-bible:before,.fa-book-bible:before{content:"\f647"}.fa-o:before{content:"\4f"}.fa-medkit:before,.fa-suitcase-medical:before{content:"\f0fa"}.fa-user-secret:before{content:"\f21b"}.fa-otter:before{content:"\f700"}.fa-female:before,.fa-person-dress:before{content:"\f182"}.fa-comment-dollar:before{content:"\f651"}.fa-briefcase-clock:before,.fa-business-time:before{content:"\f64a"}.fa-table-cells-large:before,.fa-th-large:before{content:"\f009"}.fa-book-tanakh:before,.fa-tanakh:before{content:"\f827"}.fa-phone-volume:before,.fa-volume-control-phone:before{content:"\f2a0"}.fa-hat-cowboy-side:before{content:"\f8c1"}.fa-clipboard-user:before{content:"\f7f3"}.fa-child:before{content:"\f1ae"}.fa-lira-sign:before{content:"\f195"}.fa-satellite:before{content:"\f7bf"}.fa-plane-lock:before{content:"\e558"}.fa-tag:before{content:"\f02b"}.fa-comment:before{content:"\f075"}.fa-birthday-cake:before,.fa-cake-candles:before,.fa-cake:before{content:"\f1fd"}.fa-envelope:before{content:"\f0e0"}.fa-angle-double-up:before,.fa-angles-up:before{content:"\f102"}.fa-paperclip:before{content:"\f0c6"}.fa-arrow-right-to-city:before{content:"\e4b3"}.fa-ribbon:before{content:"\f4d6"}.fa-lungs:before{content:"\f604"}.fa-arrow-up-9-1:before,.fa-sort-numeric-up-alt:before{content:"\f887"}.fa-litecoin-sign:before{content:"\e1d3"}.fa-border-none:before{content:"\f850"}.fa-circle-nodes:before{content:"\e4e2"}.fa-parachute-box:before{content:"\f4cd"}.fa-indent:before{content:"\f03c"}.fa-truck-field-un:before{content:"\e58e"}.fa-hourglass-empty:before,.fa-hourglass:before{content:"\f254"}.fa-mountain:before{content:"\f6fc"}.fa-user-doctor:before,.fa-user-md:before{content:"\f0f0"}.fa-circle-info:before,.fa-info-circle:before{content:"\f05a"}.fa-cloud-meatball:before{content:"\f73b"}.fa-camera-alt:before,.fa-camera:before{content:"\f030"}.fa-square-virus:before{content:"\e578"}.fa-meteor:before{content:"\f753"}.fa-car-on:before{content:"\e4dd"}.fa-sleigh:before{content:"\f7cc"}.fa-arrow-down-1-9:before,.fa-sort-numeric-asc:before,.fa-sort-numeric-down:before{content:"\f162"}.fa-hand-holding-droplet:before,.fa-hand-holding-water:before{content:"\f4c1"}.fa-water:before{content:"\f773"}.fa-calendar-check:before{content:"\f274"}.fa-braille:before{content:"\f2a1"}.fa-prescription-bottle-alt:before,.fa-prescription-bottle-medical:before{content:"\f486"}.fa-landmark:before{content:"\f66f"}.fa-truck:before{content:"\f0d1"}.fa-crosshairs:before{content:"\f05b"}.fa-person-cane:before{content:"\e53c"}.fa-tent:before{content:"\e57d"}.fa-vest-patches:before{content:"\e086"}.fa-check-double:before{content:"\f560"}.fa-arrow-down-a-z:before,.fa-sort-alpha-asc:before,.fa-sort-alpha-down:before{content:"\f15d"}.fa-money-bill-wheat:before{content:"\e52a"}.fa-cookie:before{content:"\f563"}.fa-arrow-left-rotate:before,.fa-arrow-rotate-back:before,.fa-arrow-rotate-backward:before,.fa-arrow-rotate-left:before,.fa-undo:before{content:"\f0e2"}.fa-hard-drive:before,.fa-hdd:before{content:"\f0a0"}.fa-face-grin-squint-tears:before,.fa-grin-squint-tears:before{content:"\f586"}.fa-dumbbell:before{content:"\f44b"}.fa-list-alt:before,.fa-rectangle-list:before{content:"\f022"}.fa-tarp-droplet:before{content:"\e57c"}.fa-house-medical-circle-check:before{content:"\e511"}.fa-person-skiing-nordic:before,.fa-skiing-nordic:before{content:"\f7ca"}.fa-calendar-plus:before{content:"\f271"}.fa-plane-arrival:before{content:"\f5af"}.fa-arrow-alt-circle-left:before,.fa-circle-left:before{content:"\f359"}.fa-subway:before,.fa-train-subway:before{content:"\f239"}.fa-chart-gantt:before{content:"\e0e4"}.fa-indian-rupee-sign:before,.fa-indian-rupee:before,.fa-inr:before{content:"\e1bc"}.fa-crop-alt:before,.fa-crop-simple:before{content:"\f565"}.fa-money-bill-1:before,.fa-money-bill-alt:before{content:"\f3d1"}.fa-left-long:before,.fa-long-arrow-alt-left:before{content:"\f30a"}.fa-dna:before{content:"\f471"}.fa-virus-slash:before{content:"\e075"}.fa-minus:before,.fa-subtract:before{content:"\f068"}.fa-chess:before{content:"\f439"}.fa-arrow-left-long:before,.fa-long-arrow-left:before{content:"\f177"}.fa-plug-circle-check:before{content:"\e55c"}.fa-street-view:before{content:"\f21d"}.fa-franc-sign:before{content:"\e18f"}.fa-volume-off:before{content:"\f026"}.fa-american-sign-language-interpreting:before,.fa-asl-interpreting:before,.fa-hands-american-sign-language-interpreting:before,.fa-hands-asl-interpreting:before{content:"\f2a3"}.fa-cog:before,.fa-gear:before{content:"\f013"}.fa-droplet-slash:before,.fa-tint-slash:before{content:"\f5c7"}.fa-mosque:before{content:"\f678"}.fa-mosquito:before{content:"\e52b"}.fa-star-of-david:before{content:"\f69a"}.fa-person-military-rifle:before{content:"\e54b"}.fa-cart-shopping:before,.fa-shopping-cart:before{content:"\f07a"}.fa-vials:before{content:"\f493"}.fa-plug-circle-plus:before{content:"\e55f"}.fa-place-of-worship:before{content:"\f67f"}.fa-grip-vertical:before{content:"\f58e"}.fa-arrow-turn-up:before,.fa-level-up:before{content:"\f148"}.fa-u:before{content:"\55"}.fa-square-root-alt:before,.fa-square-root-variable:before{content:"\f698"}.fa-clock-four:before,.fa-clock:before{content:"\f017"}.fa-backward-step:before,.fa-step-backward:before{content:"\f048"}.fa-pallet:before{content:"\f482"}.fa-faucet:before{content:"\e005"}.fa-baseball-bat-ball:before{content:"\f432"}.fa-s:before{content:"\53"}.fa-timeline:before{content:"\e29c"}.fa-keyboard:before{content:"\f11c"}.fa-caret-down:before{content:"\f0d7"}.fa-clinic-medical:before,.fa-house-chimney-medical:before{content:"\f7f2"}.fa-temperature-3:before,.fa-temperature-three-quarters:before,.fa-thermometer-3:before,.fa-thermometer-three-quarters:before{content:"\f2c8"}.fa-mobile-android-alt:before,.fa-mobile-screen:before{content:"\f3cf"}.fa-plane-up:before{content:"\e22d"}.fa-piggy-bank:before{content:"\f4d3"}.fa-battery-3:before,.fa-battery-half:before{content:"\f242"}.fa-mountain-city:before{content:"\e52e"}.fa-coins:before{content:"\f51e"}.fa-khanda:before{content:"\f66d"}.fa-sliders-h:before,.fa-sliders:before{content:"\f1de"}.fa-folder-tree:before{content:"\f802"}.fa-network-wired:before{content:"\f6ff"}.fa-map-pin:before{content:"\f276"}.fa-hamsa:before{content:"\f665"}.fa-cent-sign:before{content:"\e3f5"}.fa-flask:before{content:"\f0c3"}.fa-person-pregnant:before{content:"\e31e"}.fa-wand-sparkles:before{content:"\f72b"}.fa-ellipsis-v:before,.fa-ellipsis-vertical:before{content:"\f142"}.fa-ticket:before{content:"\f145"}.fa-power-off:before{content:"\f011"}.fa-long-arrow-alt-right:before,.fa-right-long:before{content:"\f30b"}.fa-flag-usa:before{content:"\f74d"}.fa-laptop-file:before{content:"\e51d"}.fa-teletype:before,.fa-tty:before{content:"\f1e4"}.fa-diagram-next:before{content:"\e476"}.fa-person-rifle:before{content:"\e54e"}.fa-house-medical-circle-exclamation:before{content:"\e512"}.fa-closed-captioning:before{content:"\f20a"}.fa-hiking:before,.fa-person-hiking:before{content:"\f6ec"}.fa-venus-double:before{content:"\f226"}.fa-images:before{content:"\f302"}.fa-calculator:before{content:"\f1ec"}.fa-people-pulling:before{content:"\e535"}.fa-n:before{content:"\4e"}.fa-cable-car:before,.fa-tram:before{content:"\f7da"}.fa-cloud-rain:before{content:"\f73d"}.fa-building-circle-xmark:before{content:"\e4d4"}.fa-ship:before{content:"\f21a"}.fa-arrows-down-to-line:before{content:"\e4b8"}.fa-download:before{content:"\f019"}.fa-face-grin:before,.fa-grin:before{content:"\f580"}.fa-backspace:before,.fa-delete-left:before{content:"\f55a"}.fa-eye-dropper-empty:before,.fa-eye-dropper:before,.fa-eyedropper:before{content:"\f1fb"}.fa-file-circle-check:before{content:"\e5a0"}.fa-forward:before{content:"\f04e"}.fa-mobile-android:before,.fa-mobile-phone:before,.fa-mobile:before{content:"\f3ce"}.fa-face-meh:before,.fa-meh:before{content:"\f11a"}.fa-align-center:before{content:"\f037"}.fa-book-dead:before,.fa-book-skull:before{content:"\f6b7"}.fa-drivers-license:before,.fa-id-card:before{content:"\f2c2"}.fa-dedent:before,.fa-outdent:before{content:"\f03b"}.fa-heart-circle-exclamation:before{content:"\e4fe"}.fa-home-alt:before,.fa-home-lg-alt:before,.fa-home:before,.fa-house:before{content:"\f015"}.fa-calendar-week:before{content:"\f784"}.fa-laptop-medical:before{content:"\f812"}.fa-b:before{content:"\42"}.fa-file-medical:before{content:"\f477"}.fa-dice-one:before{content:"\f525"}.fa-kiwi-bird:before{content:"\f535"}.fa-arrow-right-arrow-left:before,.fa-exchange:before{content:"\f0ec"}.fa-redo-alt:before,.fa-rotate-forward:before,.fa-rotate-right:before{content:"\f2f9"}.fa-cutlery:before,.fa-utensils:before{content:"\f2e7"}.fa-arrow-up-wide-short:before,.fa-sort-amount-up:before{content:"\f161"}.fa-mill-sign:before{content:"\e1ed"}.fa-bowl-rice:before{content:"\e2eb"}.fa-skull:before{content:"\f54c"}.fa-broadcast-tower:before,.fa-tower-broadcast:before{content:"\f519"}.fa-truck-pickup:before{content:"\f63c"}.fa-long-arrow-alt-up:before,.fa-up-long:before{content:"\f30c"}.fa-stop:before{content:"\f04d"}.fa-code-merge:before{content:"\f387"}.fa-upload:before{content:"\f093"}.fa-hurricane:before{content:"\f751"}.fa-mound:before{content:"\e52d"}.fa-toilet-portable:before{content:"\e583"}.fa-compact-disc:before{content:"\f51f"}.fa-file-arrow-down:before,.fa-file-download:before{content:"\f56d"}.fa-caravan:before{content:"\f8ff"}.fa-shield-cat:before{content:"\e572"}.fa-bolt:before,.fa-zap:before{content:"\f0e7"}.fa-glass-water:before{content:"\e4f4"}.fa-oil-well:before{content:"\e532"}.fa-vault:before{content:"\e2c5"}.fa-mars:before{content:"\f222"}.fa-toilet:before{content:"\f7d8"}.fa-plane-circle-xmark:before{content:"\e557"}.fa-cny:before,.fa-jpy:before,.fa-rmb:before,.fa-yen-sign:before,.fa-yen:before{content:"\f157"}.fa-rouble:before,.fa-rub:before,.fa-ruble-sign:before,.fa-ruble:before{content:"\f158"}.fa-sun:before{content:"\f185"}.fa-guitar:before{content:"\f7a6"}.fa-face-laugh-wink:before,.fa-laugh-wink:before{content:"\f59c"}.fa-horse-head:before{content:"\f7ab"}.fa-bore-hole:before{content:"\e4c3"}.fa-industry:before{content:"\f275"}.fa-arrow-alt-circle-down:before,.fa-circle-down:before{content:"\f358"}.fa-arrows-turn-to-dots:before{content:"\e4c1"}.fa-florin-sign:before{content:"\e184"}.fa-arrow-down-short-wide:before,.fa-sort-amount-desc:before,.fa-sort-amount-down-alt:before{content:"\f884"}.fa-less-than:before{content:"\3c"}.fa-angle-down:before{content:"\f107"}.fa-car-tunnel:before{content:"\e4de"}.fa-head-side-cough:before{content:"\e061"}.fa-grip-lines:before{content:"\f7a4"}.fa-thumbs-down:before{content:"\f165"}.fa-user-lock:before{content:"\f502"}.fa-arrow-right-long:before,.fa-long-arrow-right:before{content:"\f178"}.fa-anchor-circle-xmark:before{content:"\e4ac"}.fa-ellipsis-h:before,.fa-ellipsis:before{content:"\f141"}.fa-chess-pawn:before{content:"\f443"}.fa-first-aid:before,.fa-kit-medical:before{content:"\f479"}.fa-person-through-window:before{content:"\e5a9"}.fa-toolbox:before{content:"\f552"}.fa-hands-holding-circle:before{content:"\e4fb"}.fa-bug:before{content:"\f188"}.fa-credit-card-alt:before,.fa-credit-card:before{content:"\f09d"}.fa-automobile:before,.fa-car:before{content:"\f1b9"}.fa-hand-holding-hand:before{content:"\e4f7"}.fa-book-open-reader:before,.fa-book-reader:before{content:"\f5da"}.fa-mountain-sun:before{content:"\e52f"}.fa-arrows-left-right-to-line:before{content:"\e4ba"}.fa-dice-d20:before{content:"\f6cf"}.fa-truck-droplet:before{content:"\e58c"}.fa-file-circle-xmark:before{content:"\e5a1"}.fa-temperature-arrow-up:before,.fa-temperature-up:before{content:"\e040"}.fa-medal:before{content:"\f5a2"}.fa-bed:before{content:"\f236"}.fa-h-square:before,.fa-square-h:before{content:"\f0fd"}.fa-podcast:before{content:"\f2ce"}.fa-temperature-4:before,.fa-temperature-full:before,.fa-thermometer-4:before,.fa-thermometer-full:before{content:"\f2c7"}.fa-bell:before{content:"\f0f3"}.fa-superscript:before{content:"\f12b"}.fa-plug-circle-xmark:before{content:"\e560"}.fa-star-of-life:before{content:"\f621"}.fa-phone-slash:before{content:"\f3dd"}.fa-paint-roller:before{content:"\f5aa"}.fa-hands-helping:before,.fa-handshake-angle:before{content:"\f4c4"}.fa-location-dot:before,.fa-map-marker-alt:before{content:"\f3c5"}.fa-file:before{content:"\f15b"}.fa-greater-than:before{content:"\3e"}.fa-person-swimming:before,.fa-swimmer:before{content:"\f5c4"}.fa-arrow-down:before{content:"\f063"}.fa-droplet:before,.fa-tint:before{content:"\f043"}.fa-eraser:before{content:"\f12d"}.fa-earth-america:before,.fa-earth-americas:before,.fa-earth:before,.fa-globe-americas:before{content:"\f57d"}.fa-person-burst:before{content:"\e53b"}.fa-dove:before{content:"\f4ba"}.fa-battery-0:before,.fa-battery-empty:before{content:"\f244"}.fa-socks:before{content:"\f696"}.fa-inbox:before{content:"\f01c"}.fa-section:before{content:"\e447"}.fa-gauge-high:before,.fa-tachometer-alt-fast:before,.fa-tachometer-alt:before{content:"\f625"}.fa-envelope-open-text:before{content:"\f658"}.fa-hospital-alt:before,.fa-hospital-wide:before,.fa-hospital:before{content:"\f0f8"}.fa-wine-bottle:before{content:"\f72f"}.fa-chess-rook:before{content:"\f447"}.fa-bars-staggered:before,.fa-reorder:before,.fa-stream:before{content:"\f550"}.fa-dharmachakra:before{content:"\f655"}.fa-hotdog:before{content:"\f80f"}.fa-blind:before,.fa-person-walking-with-cane:before{content:"\f29d"}.fa-drum:before{content:"\f569"}.fa-ice-cream:before{content:"\f810"}.fa-heart-circle-bolt:before{content:"\e4fc"}.fa-fax:before{content:"\f1ac"}.fa-paragraph:before{content:"\f1dd"}.fa-check-to-slot:before,.fa-vote-yea:before{content:"\f772"}.fa-star-half:before{content:"\f089"}.fa-boxes-alt:before,.fa-boxes-stacked:before,.fa-boxes:before{content:"\f468"}.fa-chain:before,.fa-link:before{content:"\f0c1"}.fa-assistive-listening-systems:before,.fa-ear-listen:before{content:"\f2a2"}.fa-tree-city:before{content:"\e587"}.fa-play:before{content:"\f04b"}.fa-font:before{content:"\f031"}.fa-rupiah-sign:before{content:"\e23d"}.fa-magnifying-glass:before,.fa-search:before{content:"\f002"}.fa-ping-pong-paddle-ball:before,.fa-table-tennis-paddle-ball:before,.fa-table-tennis:before{content:"\f45d"}.fa-diagnoses:before,.fa-person-dots-from-line:before{content:"\f470"}.fa-trash-can-arrow-up:before,.fa-trash-restore-alt:before{content:"\f82a"}.fa-naira-sign:before{content:"\e1f6"}.fa-cart-arrow-down:before{content:"\f218"}.fa-walkie-talkie:before{content:"\f8ef"}.fa-file-edit:before,.fa-file-pen:before{content:"\f31c"}.fa-receipt:before{content:"\f543"}.fa-pen-square:before,.fa-pencil-square:before,.fa-square-pen:before{content:"\f14b"}.fa-suitcase-rolling:before{content:"\f5c1"}.fa-person-circle-exclamation:before{content:"\e53f"}.fa-chevron-down:before{content:"\f078"}.fa-battery-5:before,.fa-battery-full:before,.fa-battery:before{content:"\f240"}.fa-skull-crossbones:before{content:"\f714"}.fa-code-compare:before{content:"\e13a"}.fa-list-dots:before,.fa-list-ul:before{content:"\f0ca"}.fa-school-lock:before{content:"\e56f"}.fa-tower-cell:before{content:"\e585"}.fa-down-long:before,.fa-long-arrow-alt-down:before{content:"\f309"}.fa-ranking-star:before{content:"\e561"}.fa-chess-king:before{content:"\f43f"}.fa-person-harassing:before{content:"\e549"}.fa-brazilian-real-sign:before{content:"\e46c"}.fa-landmark-alt:before,.fa-landmark-dome:before{content:"\f752"}.fa-arrow-up:before{content:"\f062"}.fa-television:before,.fa-tv-alt:before,.fa-tv:before{content:"\f26c"}.fa-shrimp:before{content:"\e448"}.fa-list-check:before,.fa-tasks:before{content:"\f0ae"}.fa-jug-detergent:before{content:"\e519"}.fa-circle-user:before,.fa-user-circle:before{content:"\f2bd"}.fa-user-shield:before{content:"\f505"}.fa-wind:before{content:"\f72e"}.fa-car-burst:before,.fa-car-crash:before{content:"\f5e1"}.fa-y:before{content:"\59"}.fa-person-snowboarding:before,.fa-snowboarding:before{content:"\f7ce"}.fa-shipping-fast:before,.fa-truck-fast:before{content:"\f48b"}.fa-fish:before{content:"\f578"}.fa-user-graduate:before{content:"\f501"}.fa-adjust:before,.fa-circle-half-stroke:before{content:"\f042"}.fa-clapperboard:before{content:"\e131"}.fa-circle-radiation:before,.fa-radiation-alt:before{content:"\f7ba"}.fa-baseball-ball:before,.fa-baseball:before{content:"\f433"}.fa-jet-fighter-up:before{content:"\e518"}.fa-diagram-project:before,.fa-project-diagram:before{content:"\f542"}.fa-copy:before{content:"\f0c5"}.fa-volume-mute:before,.fa-volume-times:before,.fa-volume-xmark:before{content:"\f6a9"}.fa-hand-sparkles:before{content:"\e05d"}.fa-grip-horizontal:before,.fa-grip:before{content:"\f58d"}.fa-share-from-square:before,.fa-share-square:before{content:"\f14d"}.fa-child-combatant:before,.fa-child-rifle:before{content:"\e4e0"}.fa-gun:before{content:"\e19b"}.fa-phone-square:before,.fa-square-phone:before{content:"\f098"}.fa-add:before,.fa-plus:before{content:"\2b"}.fa-expand:before{content:"\f065"}.fa-computer:before{content:"\e4e5"}.fa-close:before,.fa-multiply:before,.fa-remove:before,.fa-times:before,.fa-xmark:before{content:"\f00d"}.fa-arrows-up-down-left-right:before,.fa-arrows:before{content:"\f047"}.fa-chalkboard-teacher:before,.fa-chalkboard-user:before{content:"\f51c"}.fa-peso-sign:before{content:"\e222"}.fa-building-shield:before{content:"\e4d8"}.fa-baby:before{content:"\f77c"}.fa-users-line:before{content:"\e592"}.fa-quote-left-alt:before,.fa-quote-left:before{content:"\f10d"}.fa-tractor:before{content:"\f722"}.fa-trash-arrow-up:before,.fa-trash-restore:before{content:"\f829"}.fa-arrow-down-up-lock:before{content:"\e4b0"}.fa-lines-leaning:before{content:"\e51e"}.fa-ruler-combined:before{content:"\f546"}.fa-copyright:before{content:"\f1f9"}.fa-equals:before{content:"\3d"}.fa-blender:before{content:"\f517"}.fa-teeth:before{content:"\f62e"}.fa-ils:before,.fa-shekel-sign:before,.fa-shekel:before,.fa-sheqel-sign:before,.fa-sheqel:before{content:"\f20b"}.fa-map:before{content:"\f279"}.fa-rocket:before{content:"\f135"}.fa-photo-film:before,.fa-photo-video:before{content:"\f87c"}.fa-folder-minus:before{content:"\f65d"}.fa-store:before{content:"\f54e"}.fa-arrow-trend-up:before{content:"\e098"}.fa-plug-circle-minus:before{content:"\e55e"}.fa-sign-hanging:before,.fa-sign:before{content:"\f4d9"}.fa-bezier-curve:before{content:"\f55b"}.fa-bell-slash:before{content:"\f1f6"}.fa-tablet-android:before,.fa-tablet:before{content:"\f3fb"}.fa-school-flag:before{content:"\e56e"}.fa-fill:before{content:"\f575"}.fa-angle-up:before{content:"\f106"}.fa-drumstick-bite:before{content:"\f6d7"}.fa-holly-berry:before{content:"\f7aa"}.fa-chevron-left:before{content:"\f053"}.fa-bacteria:before{content:"\e059"}.fa-hand-lizard:before{content:"\f258"}.fa-notdef:before{content:"\e1fe"}.fa-disease:before{content:"\f7fa"}.fa-briefcase-medical:before{content:"\f469"}.fa-genderless:before{content:"\f22d"}.fa-chevron-right:before{content:"\f054"}.fa-retweet:before{content:"\f079"}.fa-car-alt:before,.fa-car-rear:before{content:"\f5de"}.fa-pump-soap:before{content:"\e06b"}.fa-video-slash:before{content:"\f4e2"}.fa-battery-2:before,.fa-battery-quarter:before{content:"\f243"}.fa-radio:before{content:"\f8d7"}.fa-baby-carriage:before,.fa-carriage-baby:before{content:"\f77d"}.fa-traffic-light:before{content:"\f637"}.fa-thermometer:before{content:"\f491"}.fa-vr-cardboard:before{content:"\f729"}.fa-hand-middle-finger:before{content:"\f806"}.fa-percent:before,.fa-percentage:before{content:"\25"}.fa-truck-moving:before{content:"\f4df"}.fa-glass-water-droplet:before{content:"\e4f5"}.fa-display:before{content:"\e163"}.fa-face-smile:before,.fa-smile:before{content:"\f118"}.fa-thumb-tack:before,.fa-thumbtack:before{content:"\f08d"}.fa-trophy:before{content:"\f091"}.fa-person-praying:before,.fa-pray:before{content:"\f683"}.fa-hammer:before{content:"\f6e3"}.fa-hand-peace:before{content:"\f25b"}.fa-rotate:before,.fa-sync-alt:before{content:"\f2f1"}.fa-spinner:before{content:"\f110"}.fa-robot:before{content:"\f544"}.fa-peace:before{content:"\f67c"}.fa-cogs:before,.fa-gears:before{content:"\f085"}.fa-warehouse:before{content:"\f494"}.fa-arrow-up-right-dots:before{content:"\e4b7"}.fa-splotch:before{content:"\f5bc"}.fa-face-grin-hearts:before,.fa-grin-hearts:before{content:"\f584"}.fa-dice-four:before{content:"\f524"}.fa-sim-card:before{content:"\f7c4"}.fa-transgender-alt:before,.fa-transgender:before{content:"\f225"}.fa-mercury:before{content:"\f223"}.fa-arrow-turn-down:before,.fa-level-down:before{content:"\f149"}.fa-person-falling-burst:before{content:"\e547"}.fa-award:before{content:"\f559"}.fa-ticket-alt:before,.fa-ticket-simple:before{content:"\f3ff"}.fa-building:before{content:"\f1ad"}.fa-angle-double-left:before,.fa-angles-left:before{content:"\f100"}.fa-qrcode:before{content:"\f029"}.fa-clock-rotate-left:before,.fa-history:before{content:"\f1da"}.fa-face-grin-beam-sweat:before,.fa-grin-beam-sweat:before{content:"\f583"}.fa-arrow-right-from-file:before,.fa-file-export:before{content:"\f56e"}.fa-shield-blank:before,.fa-shield:before{content:"\f132"}.fa-arrow-up-short-wide:before,.fa-sort-amount-up-alt:before{content:"\f885"}.fa-house-medical:before{content:"\e3b2"}.fa-golf-ball-tee:before,.fa-golf-ball:before{content:"\f450"}.fa-chevron-circle-left:before,.fa-circle-chevron-left:before{content:"\f137"}.fa-house-chimney-window:before{content:"\e00d"}.fa-pen-nib:before{content:"\f5ad"}.fa-tent-arrow-turn-left:before{content:"\e580"}.fa-tents:before{content:"\e582"}.fa-magic:before,.fa-wand-magic:before{content:"\f0d0"}.fa-dog:before{content:"\f6d3"}.fa-carrot:before{content:"\f787"}.fa-moon:before{content:"\f186"}.fa-wine-glass-alt:before,.fa-wine-glass-empty:before{content:"\f5ce"}.fa-cheese:before{content:"\f7ef"}.fa-yin-yang:before{content:"\f6ad"}.fa-music:before{content:"\f001"}.fa-code-commit:before{content:"\f386"}.fa-temperature-low:before{content:"\f76b"}.fa-biking:before,.fa-person-biking:before{content:"\f84a"}.fa-broom:before{content:"\f51a"}.fa-shield-heart:before{content:"\e574"}.fa-gopuram:before{content:"\f664"}.fa-earth-oceania:before,.fa-globe-oceania:before{content:"\e47b"}.fa-square-xmark:before,.fa-times-square:before,.fa-xmark-square:before{content:"\f2d3"}.fa-hashtag:before{content:"\23"}.fa-expand-alt:before,.fa-up-right-and-down-left-from-center:before{content:"\f424"}.fa-oil-can:before{content:"\f613"}.fa-t:before{content:"\54"}.fa-hippo:before{content:"\f6ed"}.fa-chart-column:before{content:"\e0e3"}.fa-infinity:before{content:"\f534"}.fa-vial-circle-check:before{content:"\e596"}.fa-person-arrow-down-to-line:before{content:"\e538"}.fa-voicemail:before{content:"\f897"}.fa-fan:before{content:"\f863"}.fa-person-walking-luggage:before{content:"\e554"}.fa-arrows-alt-v:before,.fa-up-down:before{content:"\f338"}.fa-cloud-moon-rain:before{content:"\f73c"}.fa-calendar:before{content:"\f133"}.fa-trailer:before{content:"\e041"}.fa-bahai:before,.fa-haykal:before{content:"\f666"}.fa-sd-card:before{content:"\f7c2"}.fa-dragon:before{content:"\f6d5"}.fa-shoe-prints:before{content:"\f54b"}.fa-circle-plus:before,.fa-plus-circle:before{content:"\f055"}.fa-face-grin-tongue-wink:before,.fa-grin-tongue-wink:before{content:"\f58b"}.fa-hand-holding:before{content:"\f4bd"}.fa-plug-circle-exclamation:before{content:"\e55d"}.fa-chain-broken:before,.fa-chain-slash:before,.fa-link-slash:before,.fa-unlink:before{content:"\f127"}.fa-clone:before{content:"\f24d"}.fa-person-walking-arrow-loop-left:before{content:"\e551"}.fa-arrow-up-z-a:before,.fa-sort-alpha-up-alt:before{content:"\f882"}.fa-fire-alt:before,.fa-fire-flame-curved:before{content:"\f7e4"}.fa-tornado:before{content:"\f76f"}.fa-file-circle-plus:before{content:"\e494"}.fa-book-quran:before,.fa-quran:before{content:"\f687"}.fa-anchor:before{content:"\f13d"}.fa-border-all:before{content:"\f84c"}.fa-angry:before,.fa-face-angry:before{content:"\f556"}.fa-cookie-bite:before{content:"\f564"}.fa-arrow-trend-down:before{content:"\e097"}.fa-feed:before,.fa-rss:before{content:"\f09e"}.fa-draw-polygon:before{content:"\f5ee"}.fa-balance-scale:before,.fa-scale-balanced:before{content:"\f24e"}.fa-gauge-simple-high:before,.fa-tachometer-fast:before,.fa-tachometer:before{content:"\f62a"}.fa-shower:before{content:"\f2cc"}.fa-desktop-alt:before,.fa-desktop:before{content:"\f390"}.fa-m:before{content:"\4d"}.fa-table-list:before,.fa-th-list:before{content:"\f00b"}.fa-comment-sms:before,.fa-sms:before{content:"\f7cd"}.fa-book:before{content:"\f02d"}.fa-user-plus:before{content:"\f234"}.fa-check:before{content:"\f00c"}.fa-battery-4:before,.fa-battery-three-quarters:before{content:"\f241"}.fa-house-circle-check:before{content:"\e509"}.fa-angle-left:before{content:"\f104"}.fa-diagram-successor:before{content:"\e47a"}.fa-truck-arrow-right:before{content:"\e58b"}.fa-arrows-split-up-and-left:before{content:"\e4bc"}.fa-fist-raised:before,.fa-hand-fist:before{content:"\f6de"}.fa-cloud-moon:before{content:"\f6c3"}.fa-briefcase:before{content:"\f0b1"}.fa-person-falling:before{content:"\e546"}.fa-image-portrait:before,.fa-portrait:before{content:"\f3e0"}.fa-user-tag:before{content:"\f507"}.fa-rug:before{content:"\e569"}.fa-earth-europe:before,.fa-globe-europe:before{content:"\f7a2"}.fa-cart-flatbed-suitcase:before,.fa-luggage-cart:before{content:"\f59d"}.fa-rectangle-times:before,.fa-rectangle-xmark:before,.fa-times-rectangle:before,.fa-window-close:before{content:"\f410"}.fa-baht-sign:before{content:"\e0ac"}.fa-book-open:before{content:"\f518"}.fa-book-journal-whills:before,.fa-journal-whills:before{content:"\f66a"}.fa-handcuffs:before{content:"\e4f8"}.fa-exclamation-triangle:before,.fa-triangle-exclamation:before,.fa-warning:before{content:"\f071"}.fa-database:before{content:"\f1c0"}.fa-arrow-turn-right:before,.fa-mail-forward:before,.fa-share:before{content:"\f064"}.fa-bottle-droplet:before{content:"\e4c4"}.fa-mask-face:before{content:"\e1d7"}.fa-hill-rockslide:before{content:"\e508"}.fa-exchange-alt:before,.fa-right-left:before{content:"\f362"}.fa-paper-plane:before{content:"\f1d8"}.fa-road-circle-exclamation:before{content:"\e565"}.fa-dungeon:before{content:"\f6d9"}.fa-align-right:before{content:"\f038"}.fa-money-bill-1-wave:before,.fa-money-bill-wave-alt:before{content:"\f53b"}.fa-life-ring:before{content:"\f1cd"}.fa-hands:before,.fa-sign-language:before,.fa-signing:before{content:"\f2a7"}.fa-calendar-day:before{content:"\f783"}.fa-ladder-water:before,.fa-swimming-pool:before,.fa-water-ladder:before{content:"\f5c5"}.fa-arrows-up-down:before,.fa-arrows-v:before{content:"\f07d"}.fa-face-grimace:before,.fa-grimace:before{content:"\f57f"}.fa-wheelchair-alt:before,.fa-wheelchair-move:before{content:"\e2ce"}.fa-level-down-alt:before,.fa-turn-down:before{content:"\f3be"}.fa-person-walking-arrow-right:before{content:"\e552"}.fa-envelope-square:before,.fa-square-envelope:before{content:"\f199"}.fa-dice:before{content:"\f522"}.fa-bowling-ball:before{content:"\f436"}.fa-brain:before{content:"\f5dc"}.fa-band-aid:before,.fa-bandage:before{content:"\f462"}.fa-calendar-minus:before{content:"\f272"}.fa-circle-xmark:before,.fa-times-circle:before,.fa-xmark-circle:before{content:"\f057"}.fa-gifts:before{content:"\f79c"}.fa-hotel:before{content:"\f594"}.fa-earth-asia:before,.fa-globe-asia:before{content:"\f57e"}.fa-id-card-alt:before,.fa-id-card-clip:before{content:"\f47f"}.fa-magnifying-glass-plus:before,.fa-search-plus:before{content:"\f00e"}.fa-thumbs-up:before{content:"\f164"}.fa-user-clock:before{content:"\f4fd"}.fa-allergies:before,.fa-hand-dots:before{content:"\f461"}.fa-file-invoice:before{content:"\f570"}.fa-window-minimize:before{content:"\f2d1"}.fa-coffee:before,.fa-mug-saucer:before{content:"\f0f4"}.fa-brush:before{content:"\f55d"}.fa-mask:before{content:"\f6fa"}.fa-magnifying-glass-minus:before,.fa-search-minus:before{content:"\f010"}.fa-ruler-vertical:before{content:"\f548"}.fa-user-alt:before,.fa-user-large:before{content:"\f406"}.fa-train-tram:before{content:"\e5b4"}.fa-user-nurse:before{content:"\f82f"}.fa-syringe:before{content:"\f48e"}.fa-cloud-sun:before{content:"\f6c4"}.fa-stopwatch-20:before{content:"\e06f"}.fa-square-full:before{content:"\f45c"}.fa-magnet:before{content:"\f076"}.fa-jar:before{content:"\e516"}.fa-note-sticky:before,.fa-sticky-note:before{content:"\f249"}.fa-bug-slash:before{content:"\e490"}.fa-arrow-up-from-water-pump:before{content:"\e4b6"}.fa-bone:before{content:"\f5d7"}.fa-user-injured:before{content:"\f728"}.fa-face-sad-tear:before,.fa-sad-tear:before{content:"\f5b4"}.fa-plane:before{content:"\f072"}.fa-tent-arrows-down:before{content:"\e581"}.fa-exclamation:before{content:"\21"}.fa-arrows-spin:before{content:"\e4bb"}.fa-print:before{content:"\f02f"}.fa-try:before,.fa-turkish-lira-sign:before,.fa-turkish-lira:before{content:"\e2bb"}.fa-dollar-sign:before,.fa-dollar:before,.fa-usd:before{content:"\24"}.fa-x:before{content:"\58"}.fa-magnifying-glass-dollar:before,.fa-search-dollar:before{content:"\f688"}.fa-users-cog:before,.fa-users-gear:before{content:"\f509"}.fa-person-military-pointing:before{content:"\e54a"}.fa-bank:before,.fa-building-columns:before,.fa-institution:before,.fa-museum:before,.fa-university:before{content:"\f19c"}.fa-umbrella:before{content:"\f0e9"}.fa-trowel:before{content:"\e589"}.fa-d:before{content:"\44"}.fa-stapler:before{content:"\e5af"}.fa-masks-theater:before,.fa-theater-masks:before{content:"\f630"}.fa-kip-sign:before{content:"\e1c4"}.fa-hand-point-left:before{content:"\f0a5"}.fa-handshake-alt:before,.fa-handshake-simple:before{content:"\f4c6"}.fa-fighter-jet:before,.fa-jet-fighter:before{content:"\f0fb"}.fa-share-alt-square:before,.fa-square-share-nodes:before{content:"\f1e1"}.fa-barcode:before{content:"\f02a"}.fa-plus-minus:before{content:"\e43c"}.fa-video-camera:before,.fa-video:before{content:"\f03d"}.fa-graduation-cap:before,.fa-mortar-board:before{content:"\f19d"}.fa-hand-holding-medical:before{content:"\e05c"}.fa-person-circle-check:before{content:"\e53e"}.fa-level-up-alt:before,.fa-turn-up:before{content:"\f3bf"}.fa-sr-only,.fa-sr-only-focusable:not(:focus),.sr-only,.sr-only-focusable:not(:focus){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}:host,:root{--fa-style-family-brands:"Font Awesome 6 Brands";--fa-font-brands:normal 400 1em/1 "Font Awesome 6 Brands"}@font-face{font-family:"Font Awesome 6 Brands";font-style:normal;font-weight:400;font-display:block;src:url(../webfonts/fa-brands-400.woff2) format("woff2"),url(../webfonts/fa-brands-400.ttf) format("truetype")}.fa-brands,.fab{font-weight:400}.fa-monero:before{content:"\f3d0"}.fa-hooli:before{content:"\f427"}.fa-yelp:before{content:"\f1e9"}.fa-cc-visa:before{content:"\f1f0"}.fa-lastfm:before{content:"\f202"}.fa-shopware:before{content:"\f5b5"}.fa-creative-commons-nc:before{content:"\f4e8"}.fa-aws:before{content:"\f375"}.fa-redhat:before{content:"\f7bc"}.fa-yoast:before{content:"\f2b1"}.fa-cloudflare:before{content:"\e07d"}.fa-ups:before{content:"\f7e0"}.fa-wpexplorer:before{content:"\f2de"}.fa-dyalog:before{content:"\f399"}.fa-bity:before{content:"\f37a"}.fa-stackpath:before{content:"\f842"}.fa-buysellads:before{content:"\f20d"}.fa-first-order:before{content:"\f2b0"}.fa-modx:before{content:"\f285"}.fa-guilded:before{content:"\e07e"}.fa-vnv:before{content:"\f40b"}.fa-js-square:before,.fa-square-js:before{content:"\f3b9"}.fa-microsoft:before{content:"\f3ca"}.fa-qq:before{content:"\f1d6"}.fa-orcid:before{content:"\f8d2"}.fa-java:before{content:"\f4e4"}.fa-invision:before{content:"\f7b0"}.fa-creative-commons-pd-alt:before{content:"\f4ed"}.fa-centercode:before{content:"\f380"}.fa-glide-g:before{content:"\f2a6"}.fa-drupal:before{content:"\f1a9"}.fa-hire-a-helper:before{content:"\f3b0"}.fa-creative-commons-by:before{content:"\f4e7"}.fa-unity:before{content:"\e049"}.fa-whmcs:before{content:"\f40d"}.fa-rocketchat:before{content:"\f3e8"}.fa-vk:before{content:"\f189"}.fa-untappd:before{content:"\f405"}.fa-mailchimp:before{content:"\f59e"}.fa-css3-alt:before{content:"\f38b"}.fa-reddit-square:before,.fa-square-reddit:before{content:"\f1a2"}.fa-vimeo-v:before{content:"\f27d"}.fa-contao:before{content:"\f26d"}.fa-square-font-awesome:before{content:"\e5ad"}.fa-deskpro:before{content:"\f38f"}.fa-sistrix:before{content:"\f3ee"}.fa-instagram-square:before,.fa-square-instagram:before{content:"\e055"}.fa-battle-net:before{content:"\f835"}.fa-the-red-yeti:before{content:"\f69d"}.fa-hacker-news-square:before,.fa-square-hacker-news:before{content:"\f3af"}.fa-edge:before{content:"\f282"}.fa-napster:before{content:"\f3d2"}.fa-snapchat-square:before,.fa-square-snapchat:before{content:"\f2ad"}.fa-google-plus-g:before{content:"\f0d5"}.fa-artstation:before{content:"\f77a"}.fa-markdown:before{content:"\f60f"}.fa-sourcetree:before{content:"\f7d3"}.fa-google-plus:before{content:"\f2b3"}.fa-diaspora:before{content:"\f791"}.fa-foursquare:before{content:"\f180"}.fa-stack-overflow:before{content:"\f16c"}.fa-github-alt:before{content:"\f113"}.fa-phoenix-squadron:before{content:"\f511"}.fa-pagelines:before{content:"\f18c"}.fa-algolia:before{content:"\f36c"}.fa-red-river:before{content:"\f3e3"}.fa-creative-commons-sa:before{content:"\f4ef"}.fa-safari:before{content:"\f267"}.fa-google:before{content:"\f1a0"}.fa-font-awesome-alt:before,.fa-square-font-awesome-stroke:before{content:"\f35c"}.fa-atlassian:before{content:"\f77b"}.fa-linkedin-in:before{content:"\f0e1"}.fa-digital-ocean:before{content:"\f391"}.fa-nimblr:before{content:"\f5a8"}.fa-chromecast:before{content:"\f838"}.fa-evernote:before{content:"\f839"}.fa-hacker-news:before{content:"\f1d4"}.fa-creative-commons-sampling:before{content:"\f4f0"}.fa-adversal:before{content:"\f36a"}.fa-creative-commons:before{content:"\f25e"}.fa-watchman-monitoring:before{content:"\e087"}.fa-fonticons:before{content:"\f280"}.fa-weixin:before{content:"\f1d7"}.fa-shirtsinbulk:before{content:"\f214"}.fa-codepen:before{content:"\f1cb"}.fa-git-alt:before{content:"\f841"}.fa-lyft:before{content:"\f3c3"}.fa-rev:before{content:"\f5b2"}.fa-windows:before{content:"\f17a"}.fa-wizards-of-the-coast:before{content:"\f730"}.fa-square-viadeo:before,.fa-viadeo-square:before{content:"\f2aa"}.fa-meetup:before{content:"\f2e0"}.fa-centos:before{content:"\f789"}.fa-adn:before{content:"\f170"}.fa-cloudsmith:before{content:"\f384"}.fa-pied-piper-alt:before{content:"\f1a8"}.fa-dribbble-square:before,.fa-square-dribbble:before{content:"\f397"}.fa-codiepie:before{content:"\f284"}.fa-node:before{content:"\f419"}.fa-mix:before{content:"\f3cb"}.fa-steam:before{content:"\f1b6"}.fa-cc-apple-pay:before{content:"\f416"}.fa-scribd:before{content:"\f28a"}.fa-openid:before{content:"\f19b"}.fa-instalod:before{content:"\e081"}.fa-expeditedssl:before{content:"\f23e"}.fa-sellcast:before{content:"\f2da"}.fa-square-twitter:before,.fa-twitter-square:before{content:"\f081"}.fa-r-project:before{content:"\f4f7"}.fa-delicious:before{content:"\f1a5"}.fa-freebsd:before{content:"\f3a4"}.fa-vuejs:before{content:"\f41f"}.fa-accusoft:before{content:"\f369"}.fa-ioxhost:before{content:"\f208"}.fa-fonticons-fi:before{content:"\f3a2"}.fa-app-store:before{content:"\f36f"}.fa-cc-mastercard:before{content:"\f1f1"}.fa-itunes-note:before{content:"\f3b5"}.fa-golang:before{content:"\e40f"}.fa-kickstarter:before{content:"\f3bb"}.fa-grav:before{content:"\f2d6"}.fa-weibo:before{content:"\f18a"}.fa-uncharted:before{content:"\e084"}.fa-firstdraft:before{content:"\f3a1"}.fa-square-youtube:before,.fa-youtube-square:before{content:"\f431"}.fa-wikipedia-w:before{content:"\f266"}.fa-rendact:before,.fa-wpressr:before{content:"\f3e4"}.fa-angellist:before{content:"\f209"}.fa-galactic-republic:before{content:"\f50c"}.fa-nfc-directional:before{content:"\e530"}.fa-skype:before{content:"\f17e"}.fa-joget:before{content:"\f3b7"}.fa-fedora:before{content:"\f798"}.fa-stripe-s:before{content:"\f42a"}.fa-meta:before{content:"\e49b"}.fa-laravel:before{content:"\f3bd"}.fa-hotjar:before{content:"\f3b1"}.fa-bluetooth-b:before{content:"\f294"}.fa-sticker-mule:before{content:"\f3f7"}.fa-creative-commons-zero:before{content:"\f4f3"}.fa-hips:before{content:"\f452"}.fa-behance:before{content:"\f1b4"}.fa-reddit:before{content:"\f1a1"}.fa-discord:before{content:"\f392"}.fa-chrome:before{content:"\f268"}.fa-app-store-ios:before{content:"\f370"}.fa-cc-discover:before{content:"\f1f2"}.fa-wpbeginner:before{content:"\f297"}.fa-confluence:before{content:"\f78d"}.fa-mdb:before{content:"\f8ca"}.fa-dochub:before{content:"\f394"}.fa-accessible-icon:before{content:"\f368"}.fa-ebay:before{content:"\f4f4"}.fa-amazon:before{content:"\f270"}.fa-unsplash:before{content:"\e07c"}.fa-yarn:before{content:"\f7e3"}.fa-square-steam:before,.fa-steam-square:before{content:"\f1b7"}.fa-500px:before{content:"\f26e"}.fa-square-vimeo:before,.fa-vimeo-square:before{content:"\f194"}.fa-asymmetrik:before{content:"\f372"}.fa-font-awesome-flag:before,.fa-font-awesome-logo-full:before,.fa-font-awesome:before{content:"\f2b4"}.fa-gratipay:before{content:"\f184"}.fa-apple:before{content:"\f179"}.fa-hive:before{content:"\e07f"}.fa-gitkraken:before{content:"\f3a6"}.fa-keybase:before{content:"\f4f5"}.fa-apple-pay:before{content:"\f415"}.fa-padlet:before{content:"\e4a0"}.fa-amazon-pay:before{content:"\f42c"}.fa-github-square:before,.fa-square-github:before{content:"\f092"}.fa-stumbleupon:before{content:"\f1a4"}.fa-fedex:before{content:"\f797"}.fa-phoenix-framework:before{content:"\f3dc"}.fa-shopify:before{content:"\e057"}.fa-neos:before{content:"\f612"}.fa-hackerrank:before{content:"\f5f7"}.fa-researchgate:before{content:"\f4f8"}.fa-swift:before{content:"\f8e1"}.fa-angular:before{content:"\f420"}.fa-speakap:before{content:"\f3f3"}.fa-angrycreative:before{content:"\f36e"}.fa-y-combinator:before{content:"\f23b"}.fa-empire:before{content:"\f1d1"}.fa-envira:before{content:"\f299"}.fa-gitlab-square:before,.fa-square-gitlab:before{content:"\e5ae"}.fa-studiovinari:before{content:"\f3f8"}.fa-pied-piper:before{content:"\f2ae"}.fa-wordpress:before{content:"\f19a"}.fa-product-hunt:before{content:"\f288"}.fa-firefox:before{content:"\f269"}.fa-linode:before{content:"\f2b8"}.fa-goodreads:before{content:"\f3a8"}.fa-odnoklassniki-square:before,.fa-square-odnoklassniki:before{content:"\f264"}.fa-jsfiddle:before{content:"\f1cc"}.fa-sith:before{content:"\f512"}.fa-themeisle:before{content:"\f2b2"}.fa-page4:before{content:"\f3d7"}.fa-hashnode:before{content:"\e499"}.fa-react:before{content:"\f41b"}.fa-cc-paypal:before{content:"\f1f4"}.fa-squarespace:before{content:"\f5be"}.fa-cc-stripe:before{content:"\f1f5"}.fa-creative-commons-share:before{content:"\f4f2"}.fa-bitcoin:before{content:"\f379"}.fa-keycdn:before{content:"\f3ba"}.fa-opera:before{content:"\f26a"}.fa-itch-io:before{content:"\f83a"}.fa-umbraco:before{content:"\f8e8"}.fa-galactic-senate:before{content:"\f50d"}.fa-ubuntu:before{content:"\f7df"}.fa-draft2digital:before{content:"\f396"}.fa-stripe:before{content:"\f429"}.fa-houzz:before{content:"\f27c"}.fa-gg:before{content:"\f260"}.fa-dhl:before{content:"\f790"}.fa-pinterest-square:before,.fa-square-pinterest:before{content:"\f0d3"}.fa-xing:before{content:"\f168"}.fa-blackberry:before{content:"\f37b"}.fa-creative-commons-pd:before{content:"\f4ec"}.fa-playstation:before{content:"\f3df"}.fa-quinscape:before{content:"\f459"}.fa-less:before{content:"\f41d"}.fa-blogger-b:before{content:"\f37d"}.fa-opencart:before{content:"\f23d"}.fa-vine:before{content:"\f1ca"}.fa-paypal:before{content:"\f1ed"}.fa-gitlab:before{content:"\f296"}.fa-typo3:before{content:"\f42b"}.fa-reddit-alien:before{content:"\f281"}.fa-yahoo:before{content:"\f19e"}.fa-dailymotion:before{content:"\e052"}.fa-affiliatetheme:before{content:"\f36b"}.fa-pied-piper-pp:before{content:"\f1a7"}.fa-bootstrap:before{content:"\f836"}.fa-odnoklassniki:before{content:"\f263"}.fa-nfc-symbol:before{content:"\e531"}.fa-ethereum:before{content:"\f42e"}.fa-speaker-deck:before{content:"\f83c"}.fa-creative-commons-nc-eu:before{content:"\f4e9"}.fa-patreon:before{content:"\f3d9"}.fa-avianex:before{content:"\f374"}.fa-ello:before{content:"\f5f1"}.fa-gofore:before{content:"\f3a7"}.fa-bimobject:before{content:"\f378"}.fa-facebook-f:before{content:"\f39e"}.fa-google-plus-square:before,.fa-square-google-plus:before{content:"\f0d4"}.fa-mandalorian:before{content:"\f50f"}.fa-first-order-alt:before{content:"\f50a"}.fa-osi:before{content:"\f41a"}.fa-google-wallet:before{content:"\f1ee"}.fa-d-and-d-beyond:before{content:"\f6ca"}.fa-periscope:before{content:"\f3da"}.fa-fulcrum:before{content:"\f50b"}.fa-cloudscale:before{content:"\f383"}.fa-forumbee:before{content:"\f211"}.fa-mizuni:before{content:"\f3cc"}.fa-schlix:before{content:"\f3ea"}.fa-square-xing:before,.fa-xing-square:before{content:"\f169"}.fa-bandcamp:before{content:"\f2d5"}.fa-wpforms:before{content:"\f298"}.fa-cloudversify:before{content:"\f385"}.fa-usps:before{content:"\f7e1"}.fa-megaport:before{content:"\f5a3"}.fa-magento:before{content:"\f3c4"}.fa-spotify:before{content:"\f1bc"}.fa-optin-monster:before{content:"\f23c"}.fa-fly:before{content:"\f417"}.fa-aviato:before{content:"\f421"}.fa-itunes:before{content:"\f3b4"}.fa-cuttlefish:before{content:"\f38c"}.fa-blogger:before{content:"\f37c"}.fa-flickr:before{content:"\f16e"}.fa-viber:before{content:"\f409"}.fa-soundcloud:before{content:"\f1be"}.fa-digg:before{content:"\f1a6"}.fa-tencent-weibo:before{content:"\f1d5"}.fa-symfony:before{content:"\f83d"}.fa-maxcdn:before{content:"\f136"}.fa-etsy:before{content:"\f2d7"}.fa-facebook-messenger:before{content:"\f39f"}.fa-audible:before{content:"\f373"}.fa-think-peaks:before{content:"\f731"}.fa-bilibili:before{content:"\e3d9"}.fa-erlang:before{content:"\f39d"}.fa-cotton-bureau:before{content:"\f89e"}.fa-dashcube:before{content:"\f210"}.fa-42-group:before,.fa-innosoft:before{content:"\e080"}.fa-stack-exchange:before{content:"\f18d"}.fa-elementor:before{content:"\f430"}.fa-pied-piper-square:before,.fa-square-pied-piper:before{content:"\e01e"}.fa-creative-commons-nd:before{content:"\f4eb"}.fa-palfed:before{content:"\f3d8"}.fa-superpowers:before{content:"\f2dd"}.fa-resolving:before{content:"\f3e7"}.fa-xbox:before{content:"\f412"}.fa-searchengin:before{content:"\f3eb"}.fa-tiktok:before{content:"\e07b"}.fa-facebook-square:before,.fa-square-facebook:before{content:"\f082"}.fa-renren:before{content:"\f18b"}.fa-linux:before{content:"\f17c"}.fa-glide:before{content:"\f2a5"}.fa-linkedin:before{content:"\f08c"}.fa-hubspot:before{content:"\f3b2"}.fa-deploydog:before{content:"\f38e"}.fa-twitch:before{content:"\f1e8"}.fa-ravelry:before{content:"\f2d9"}.fa-mixer:before{content:"\e056"}.fa-lastfm-square:before,.fa-square-lastfm:before{content:"\f203"}.fa-vimeo:before{content:"\f40a"}.fa-mendeley:before{content:"\f7b3"}.fa-uniregistry:before{content:"\f404"}.fa-figma:before{content:"\f799"}.fa-creative-commons-remix:before{content:"\f4ee"}.fa-cc-amazon-pay:before{content:"\f42d"}.fa-dropbox:before{content:"\f16b"}.fa-instagram:before{content:"\f16d"}.fa-cmplid:before{content:"\e360"}.fa-facebook:before{content:"\f09a"}.fa-gripfire:before{content:"\f3ac"}.fa-jedi-order:before{content:"\f50e"}.fa-uikit:before{content:"\f403"}.fa-fort-awesome-alt:before{content:"\f3a3"}.fa-phabricator:before{content:"\f3db"}.fa-ussunnah:before{content:"\f407"}.fa-earlybirds:before{content:"\f39a"}.fa-trade-federation:before{content:"\f513"}.fa-autoprefixer:before{content:"\f41c"}.fa-whatsapp:before{content:"\f232"}.fa-slideshare:before{content:"\f1e7"}.fa-google-play:before{content:"\f3ab"}.fa-viadeo:before{content:"\f2a9"}.fa-line:before{content:"\f3c0"}.fa-google-drive:before{content:"\f3aa"}.fa-servicestack:before{content:"\f3ec"}.fa-simplybuilt:before{content:"\f215"}.fa-bitbucket:before{content:"\f171"}.fa-imdb:before{content:"\f2d8"}.fa-deezer:before{content:"\e077"}.fa-raspberry-pi:before{content:"\f7bb"}.fa-jira:before{content:"\f7b1"}.fa-docker:before{content:"\f395"}.fa-screenpal:before{content:"\e570"}.fa-bluetooth:before{content:"\f293"}.fa-gitter:before{content:"\f426"}.fa-d-and-d:before{content:"\f38d"}.fa-microblog:before{content:"\e01a"}.fa-cc-diners-club:before{content:"\f24c"}.fa-gg-circle:before{content:"\f261"}.fa-pied-piper-hat:before{content:"\f4e5"}.fa-kickstarter-k:before{content:"\f3bc"}.fa-yandex:before{content:"\f413"}.fa-readme:before{content:"\f4d5"}.fa-html5:before{content:"\f13b"}.fa-sellsy:before{content:"\f213"}.fa-sass:before{content:"\f41e"}.fa-wirsindhandwerk:before,.fa-wsh:before{content:"\e2d0"}.fa-buromobelexperte:before{content:"\f37f"}.fa-salesforce:before{content:"\f83b"}.fa-octopus-deploy:before{content:"\e082"}.fa-medapps:before{content:"\f3c6"}.fa-ns8:before{content:"\f3d5"}.fa-pinterest-p:before{content:"\f231"}.fa-apper:before{content:"\f371"}.fa-fort-awesome:before{content:"\f286"}.fa-waze:before{content:"\f83f"}.fa-cc-jcb:before{content:"\f24b"}.fa-snapchat-ghost:before,.fa-snapchat:before{content:"\f2ab"}.fa-fantasy-flight-games:before{content:"\f6dc"}.fa-rust:before{content:"\e07a"}.fa-wix:before{content:"\f5cf"}.fa-behance-square:before,.fa-square-behance:before{content:"\f1b5"}.fa-supple:before{content:"\f3f9"}.fa-rebel:before{content:"\f1d0"}.fa-css3:before{content:"\f13c"}.fa-staylinked:before{content:"\f3f5"}.fa-kaggle:before{content:"\f5fa"}.fa-space-awesome:before{content:"\e5ac"}.fa-deviantart:before{content:"\f1bd"}.fa-cpanel:before{content:"\f388"}.fa-goodreads-g:before{content:"\f3a9"}.fa-git-square:before,.fa-square-git:before{content:"\f1d2"}.fa-square-tumblr:before,.fa-tumblr-square:before{content:"\f174"}.fa-trello:before{content:"\f181"}.fa-creative-commons-nc-jp:before{content:"\f4ea"}.fa-get-pocket:before{content:"\f265"}.fa-perbyte:before{content:"\e083"}.fa-grunt:before{content:"\f3ad"}.fa-weebly:before{content:"\f5cc"}.fa-connectdevelop:before{content:"\f20e"}.fa-leanpub:before{content:"\f212"}.fa-black-tie:before{content:"\f27e"}.fa-themeco:before{content:"\f5c6"}.fa-python:before{content:"\f3e2"}.fa-android:before{content:"\f17b"}.fa-bots:before{content:"\e340"}.fa-free-code-camp:before{content:"\f2c5"}.fa-hornbill:before{content:"\f592"}.fa-js:before{content:"\f3b8"}.fa-ideal:before{content:"\e013"}.fa-git:before{content:"\f1d3"}.fa-dev:before{content:"\f6cc"}.fa-sketch:before{content:"\f7c6"}.fa-yandex-international:before{content:"\f414"}.fa-cc-amex:before{content:"\f1f3"}.fa-uber:before{content:"\f402"}.fa-github:before{content:"\f09b"}.fa-php:before{content:"\f457"}.fa-alipay:before{content:"\f642"}.fa-youtube:before{content:"\f167"}.fa-skyatlas:before{content:"\f216"}.fa-firefox-browser:before{content:"\e007"}.fa-replyd:before{content:"\f3e6"}.fa-suse:before{content:"\f7d6"}.fa-jenkins:before{content:"\f3b6"}.fa-twitter:before{content:"\f099"}.fa-rockrms:before{content:"\f3e9"}.fa-pinterest:before{content:"\f0d2"}.fa-buffer:before{content:"\f837"}.fa-npm:before{content:"\f3d4"}.fa-yammer:before{content:"\f840"}.fa-btc:before{content:"\f15a"}.fa-dribbble:before{content:"\f17d"}.fa-stumbleupon-circle:before{content:"\f1a3"}.fa-internet-explorer:before{content:"\f26b"}.fa-telegram-plane:before,.fa-telegram:before{content:"\f2c6"}.fa-old-republic:before{content:"\f510"}.fa-square-whatsapp:before,.fa-whatsapp-square:before{content:"\f40c"}.fa-node-js:before{content:"\f3d3"}.fa-edge-legacy:before{content:"\e078"}.fa-slack-hash:before,.fa-slack:before{content:"\f198"}.fa-medrt:before{content:"\f3c8"}.fa-usb:before{content:"\f287"}.fa-tumblr:before{content:"\f173"}.fa-vaadin:before{content:"\f408"}.fa-quora:before{content:"\f2c4"}.fa-reacteurope:before{content:"\f75d"}.fa-medium-m:before,.fa-medium:before{content:"\f23a"}.fa-amilia:before{content:"\f36d"}.fa-mixcloud:before{content:"\f289"}.fa-flipboard:before{content:"\f44d"}.fa-viacoin:before{content:"\f237"}.fa-critical-role:before{content:"\f6c9"}.fa-sitrox:before{content:"\e44a"}.fa-discourse:before{content:"\f393"}.fa-joomla:before{content:"\f1aa"}.fa-mastodon:before{content:"\f4f6"}.fa-airbnb:before{content:"\f834"}.fa-wolf-pack-battalion:before{content:"\f514"}.fa-buy-n-large:before{content:"\f8a6"}.fa-gulp:before{content:"\f3ae"}.fa-creative-commons-sampling-plus:before{content:"\f4f1"}.fa-strava:before{content:"\f428"}.fa-ember:before{content:"\f423"}.fa-canadian-maple-leaf:before{content:"\f785"}.fa-teamspeak:before{content:"\f4f9"}.fa-pushed:before{content:"\f3e1"}.fa-wordpress-simple:before{content:"\f411"}.fa-nutritionix:before{content:"\f3d6"}.fa-wodu:before{content:"\e088"}.fa-google-pay:before{content:"\e079"}.fa-intercom:before{content:"\f7af"}.fa-zhihu:before{content:"\f63f"}.fa-korvue:before{content:"\f42f"}.fa-pix:before{content:"\e43a"}.fa-steam-symbol:before{content:"\f3f6"}:host,:root{--fa-font-regular:normal 400 1em/1 "Font Awesome 6 Free"}@font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:400;font-display:block;src:url(../webfonts/fa-regular-400.woff2) format("woff2"),url(../webfonts/fa-regular-400.ttf) format("truetype")}.fa-regular,.far{font-weight:400}:host,:root{--fa-style-family-classic:"Font Awesome 6 Free";--fa-font-solid:normal 900 1em/1 "Font Awesome 6 Free"}@font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:900;font-display:block;src:url(../webfonts/fa-solid-900.woff2) format("woff2"),url(../webfonts/fa-solid-900.ttf) format("truetype")}.fa-solid,.fas{font-weight:900}@font-face{font-family:"Font Awesome 5 Brands";font-display:block;font-weight:400;src:url(../webfonts/fa-brands-400.woff2) format("woff2"),url(../webfonts/fa-brands-400.ttf) format("truetype")}@font-face{font-family:"Font Awesome 5 Free";font-display:block;font-weight:900;src:url(../webfonts/fa-solid-900.woff2) format("woff2"),url(../webfonts/fa-solid-900.ttf) format("truetype")}@font-face{font-family:"Font Awesome 5 Free";font-display:block;font-weight:400;src:url(../webfonts/fa-regular-400.woff2) format("woff2"),url(../webfonts/fa-regular-400.ttf) format("truetype")}@font-face{font-family:"FontAwesome";font-display:block;src:url(../webfonts/fa-solid-900.woff2) format("woff2"),url(../webfonts/fa-solid-900.ttf) format("truetype")}@font-face{font-family:"FontAwesome";font-display:block;src:url(../webfonts/fa-brands-400.woff2) format("woff2"),url(../webfonts/fa-brands-400.ttf) format("truetype")}@font-face{font-family:"FontAwesome";font-display:block;src:url(../webfonts/fa-regular-400.woff2) format("woff2"),url(../webfonts/fa-regular-400.ttf) format("truetype");unicode-range:u+f003,u+f006,u+f014,u+f016-f017,u+f01a-f01b,u+f01d,u+f022,u+f03e,u+f044,u+f046,u+f05c-f05d,u+f06e,u+f070,u+f087-f088,u+f08a,u+f094,u+f096-f097,u+f09d,u+f0a0,u+f0a2,u+f0a4-f0a7,u+f0c5,u+f0c7,u+f0e5-f0e6,u+f0eb,u+f0f6-f0f8,u+f10c,u+f114-f115,u+f118-f11a,u+f11c-f11d,u+f133,u+f147,u+f14e,u+f150-f152,u+f185-f186,u+f18e,u+f190-f192,u+f196,u+f1c1-f1c9,u+f1d9,u+f1db,u+f1e3,u+f1ea,u+f1f7,u+f1f9,u+f20a,u+f247-f248,u+f24a,u+f24d,u+f255-f25b,u+f25d,u+f271-f274,u+f278,u+f27b,u+f28c,u+f28e,u+f29c,u+f2b5,u+f2b7,u+f2ba,u+f2bc,u+f2be,u+f2c0-f2c1,u+f2c3,u+f2d0,u+f2d2,u+f2d4,u+f2dc}@font-face{font-family:"FontAwesome";font-display:block;src:url(../webfonts/fa-v4compatibility.woff2) format("woff2"),url(../webfonts/fa-v4compatibility.ttf) format("truetype");unicode-range:u+f041,u+f047,u+f065-f066,u+f07d-f07e,u+f080,u+f08b,u+f08e,u+f090,u+f09a,u+f0ac,u+f0ae,u+f0b2,u+f0d0,u+f0d6,u+f0e4,u+f0ec,u+f10a-f10b,u+f123,u+f13e,u+f148-f149,u+f14c,u+f156,u+f15e,u+f160-f161,u+f163,u+f175-f178,u+f195,u+f1f8,u+f219,u+f27a} \ No newline at end of file diff --git a/26_Day_World_countries_data_visualization_2/26_day_starter/css/style.css b/26_Day_World_countries_data_visualization_2/26_day_starter/css/style.css new file mode 100644 index 0000000..f288367 --- /dev/null +++ b/26_Day_World_countries_data_visualization_2/26_day_starter/css/style.css @@ -0,0 +1,95 @@ +*{ + margin: 0; + padding: 0; +} + +body{ + font-family: Montserrat; +} + +.header{ + background-image: linear-gradient(to bottom, transparent, rgb(53, 83, 98)), url("../images/globe-2.jpg"); + + background-size: cover; + text-align: center; + padding-top: 100px; + padding-bottom: 100px; + min-height: 300px; + height: auto; +} + +.header h1{ + color: white; + font-size: 50px; + font-weight: bolder; + letter-spacing: 10px; +} + +.header h4{ + color: white; + font-size: 20px; +} +.header h5{ + color: white; + font-size: 15px; + display: none; +} +.header h5 .searchkey{ + color: rgb(201,88,84); + font-style: italic; +} +.header h5 .searchresult{ + color: rgb(125,179,102); +} + +.button-group{ + display: flex; + justify-content: center; + margin: 30px; +} + +.button-group button{ + padding:15px; + margin: 1px; + color: white; + background-color: rgb(127, 84, 214); + border: none; +} + +.button-group button:hover{ + background-color: rgb(80, 32, 165); +} + +.searchbar{ + padding: 10px; + min-width: 500px; + width: 25%; + border-radius: 20px; +} + +main{ + min-height: 200px; + background-color: rgb(255,255,227); + padding: 30px; +} + +.countries{ + width: 70%; + margin: auto; + text-align:center; + display: grid; + grid-gap: 20px; + grid-template-columns: repeat(6, minmax(200px, 1fr)); +} + +.countries .card{ + background-image: linear-gradient(to bottom, transparent, rgb(53, 83, 98)), url("../images/map_image.jpg"); + background-size: cover; + min-height: 200px; + display: flex; + justify-content: center; + align-items: center; + font-size: 20px; + font-weight: bold; + color: white; +} \ No newline at end of file diff --git a/26_Day_World_countries_data_visualization_2/26_day_starter/images/globe-2.jpg b/26_Day_World_countries_data_visualization_2/26_day_starter/images/globe-2.jpg index ec8f6f4..1e21d06 100644 Binary files a/26_Day_World_countries_data_visualization_2/26_day_starter/images/globe-2.jpg and b/26_Day_World_countries_data_visualization_2/26_day_starter/images/globe-2.jpg differ diff --git a/26_Day_World_countries_data_visualization_2/26_day_starter/index.html b/26_Day_World_countries_data_visualization_2/26_day_starter/index.html index 23f762b..c9f71ac 100644 --- a/26_Day_World_countries_data_visualization_2/26_day_starter/index.html +++ b/26_Day_World_countries_data_visualization_2/26_day_starter/index.html @@ -3,14 +3,37 @@ 30DaysOfJavaScript:11 Day + + + -

    30DaysOfJavaScript:11 Day

    -

    Destructuring and Spread

    +
    +

    WORLD COUNTRIES LIST

    +

    Total Number of countries : 193

    +
    Countries containing f are 7
    + +
    + + + +
    + + + +
    + +
    +
    + +
    +
    - + diff --git a/26_Day_World_countries_data_visualization_2/26_day_starter/js/main.js b/26_Day_World_countries_data_visualization_2/26_day_starter/js/main.js new file mode 100644 index 0000000..630de61 --- /dev/null +++ b/26_Day_World_countries_data_visualization_2/26_day_starter/js/main.js @@ -0,0 +1,191 @@ +console.log(countries) +// alert('Open the console and check if the countries has been loaded') + +let startingword = document.querySelector("#startingword"); +let anyword = document.querySelector("#anyword"); +let filter = document.querySelector("#filter"); +let searchbar = document.querySelector(".searchbar"); + +let startingwordappuie = 0; +let anywordappuie = 0; +let filterappuie = 0; + + +let h5 = document.querySelector("h5"); +let searchkey = document.querySelector(".searchkey"); +let searchresult = document.querySelector(".searchresult"); + +startingword.addEventListener("click", e=>{ + + if(startingwordappuie==0) + { + startingword.style.backgroundColor = "rgb(80, 32, 165)"; + anyword.style.backgroundColor = "rgb(127, 84, 214)"; + filter.style.backgroundColor = "rgb(127, 84, 214)"; + + startingwordappuie = 1; + anywordappuie = 0; + filterappuie = 0; + + if(searchbar.value!="") + { + divcountries.innerHTML = ""; + let count = 0; + countries.forEach(function(value){ + if(value.toLocaleLowerCase().startsWith(searchbar.value.toLocaleLowerCase())) + { + element = document.createElement("div"); + element.textContent = value; + element.className = "card"; + divcountries.appendChild(element); + count++; + } + }) + searchkey.textContent = searchbar.value; + searchresult.textContent = count; + h5.style.display = "block"; + } + } + else if(startingwordappuie==1) + { + startingword.style.backgroundColor = "rgb(127, 84, 214)"; + anyword.style.backgroundColor = "rgb(127, 84, 214)"; + filter.style.backgroundColor = "rgb(127, 84, 214)"; + + startingwordappuie = 0; + anywordappuie = 0; + filterappuie = 0; + + restoreList(); + } + +}); + +anyword.addEventListener("click", e=>{ + + if(anywordappuie==0) + { + anyword.style.backgroundColor = "rgb(80, 32, 165)"; + startingword.style.backgroundColor = "rgb(127, 84, 214)"; + filter.style.backgroundColor = "rgb(127, 84, 214)"; + + startingwordappuie = 0; + anywordappuie = 1; + filterappuie = 0; + + let count = 0; + + divcountries.innerHTML = ""; + countries.forEach(function(value){ + if(value.toLocaleLowerCase().includes(searchbar.value.toLocaleLowerCase())) + { + element = document.createElement("div"); + element.textContent = value; + element.className = "card"; + divcountries.appendChild(element); + count++; + } + }) + searchkey.textContent = searchbar.value; + searchresult.textContent = count; + h5.style.display = "block"; + } + else if(anywordappuie==1) + { + anyword.style.backgroundColor = "rgb(127, 84, 214)"; + startingword.style.backgroundColor = "rgb(127, 84, 214)"; + filter.style.backgroundColor = "rgb(127, 84, 214)"; + startingwordappuie = 0; + anywordappuie = 0; + filterappuie = 0; + + restoreList(); + } + +}); + +filter.addEventListener("click", e=>{ + + if(filterappuie == 0) + { + filter.style.backgroundColor = "rgb(80, 32, 165)"; + startingword.style.backgroundColor = "rgb(127, 84, 214)"; + anyword.style.backgroundColor = "rgb(127, 84, 214)"; + startingwordappuie = 0; + anywordappuie = 0; + filterappuie = 1; + + let count = 0; + + divcountries.innerHTML = ""; + let liste = countries; + liste.sort(); + liste.forEach(function(value){ + if(value.toLocaleLowerCase().includes(searchbar.value.toLocaleLowerCase())) + { + element = document.createElement("div"); + element.textContent = value; + element.className = "card"; + divcountries.appendChild(element); + count++; + } + }) + searchkey.textContent = searchbar.value; + searchresult.textContent = count; + h5.style.display = "block"; + } + else if(filterappuie == 1) + { + filter.style.backgroundColor = "rgb(127, 84, 214)"; + startingword.style.backgroundColor = "rgb(127, 84, 214)"; + anyword.style.backgroundColor = "rgb(127, 84, 214)"; + startingwordappuie = 0; + anywordappuie = 0; + filterappuie = 0; + + restoreList(); + } + +}); + +let divcountries = document.querySelector(".countries"); +let element; + + +searchbar.addEventListener("keypress", e=>{ + console.log(e) + if(e.key=="Enter") + { + let count = 0; + divcountries.innerHTML = ""; + countries.forEach(function(value){ + if(value.toLocaleLowerCase().includes(searchbar.value.toLocaleLowerCase())) + { + element = document.createElement("div"); + element.textContent = value; + element.className = "card"; + divcountries.appendChild(element); + count++; + } + searchkey.textContent = searchbar.value; + searchresult.textContent = count; + h5.style.display = "block"; + }) + } + +}) + +function restoreList() +{ + divcountries.innerHTML = ""; + countries.forEach(function(value){ + if(value.toLocaleLowerCase().includes(searchbar.value.toLocaleLowerCase())) + { + element = document.createElement("div"); + element.textContent = value; + element.className = "card"; + divcountries.appendChild(element); + } + }) + h5.style.display = "none"; +} \ No newline at end of file diff --git a/28_Day_Mini_project_leaderboard/28_day_starter/css/style.css b/28_Day_Mini_project_leaderboard/28_day_starter/css/style.css new file mode 100644 index 0000000..8ba4607 --- /dev/null +++ b/28_Day_Mini_project_leaderboard/28_day_starter/css/style.css @@ -0,0 +1,108 @@ +*{ + margin: 0; + padding: 0; +} + +body{ + font-family: Montserrat; +} + +main{ +} + +.container{ + width: 70%; + margin: auto; + text-align: center; + padding: 35px; +} + +.container h1{ + font-size: 22px; +} + + +.form-add-player{ + padding: 20px; + display: flex; + flex-wrap: wrap; + justify-content: center; +} + +.form-add-player input{ + padding: 10px; + margin: 5px; + border: solid 1px rgb(229, 201, 197); + width: 16%; + min-width: 150px; +} + +.form-add-player button{ + background-color: rgb(229, 201, 197); + color: white; + border: none; + font-size: 15px; + padding: 10px; + margin: 5px; + width: 16%; + min-width: 150px; +} + +.board{ + display: grid; + grid-template-columns: repeat(4, 1fr); + padding: 20px; + background-color: rgb(229, 201, 197); + font-size: 20px; + text-align: left; + margin: 10px; + text-transform: uppercase; +} + +.board .upname{ + display: flex; + align-items: center; +} +.board .player .name { + /* text-transform: uppercase; */ +} + +.board .player .time { + font-size: 15px; + color: grey; +} + +.board .country { + display: flex; + align-items: center; +} + +.board .score { + display: flex; + align-items: center; +} + +.board .options { + display: flex; + align-items: center; + justify-content: space-evenly; + flex-wrap: wrap; +} + +.board .options button{ + border-radius: 50px; + width: 70px; + height: 70px; + background-color: white; + border: none; +} + +.board .options button.delete{ + color: red; +} + +#errormessage{ + color: red; + font-weight: bold; + display: none; +} \ No newline at end of file diff --git a/28_Day_Mini_project_leaderboard/28_day_starter/index.html b/28_Day_Mini_project_leaderboard/28_day_starter/index.html index 1c2ed8d..158bb04 100644 --- a/28_Day_Mini_project_leaderboard/28_day_starter/index.html +++ b/28_Day_Mini_project_leaderboard/28_day_starter/index.html @@ -2,15 +2,55 @@ - 30DaysOfJavaScript:11 Day + 30DaysOfJavaScript: 28 Day + + + -

    30DaysOfJavaScript:11 Day

    -

    Destructuring and Spread

    + +
    +
    +

    30 Days of JavaScript Challenge Leaderboard

    + +
    +
    + + + + + +
    + +

    error message

    + +
    + +
    + +
    +
    +
    - + + diff --git a/28_Day_Mini_project_leaderboard/28_day_starter/js/main.js b/28_Day_Mini_project_leaderboard/28_day_starter/js/main.js new file mode 100644 index 0000000..38025f6 --- /dev/null +++ b/28_Day_Mini_project_leaderboard/28_day_starter/js/main.js @@ -0,0 +1,217 @@ +let data = [ + { id: 1, name: "Martha Yohanes", createdat: "2020-01-30 01:09", country: "Finland", score: 85 }, + { id: 2, name: "John Smith", createdat: "2020-01-30 01:10", country: "Usa", score: 84 }, + { id: 3, name: "David Smith", createdat: "2020-01-30 01:09", country: "United Kingdom", score: 80 }, + { id: 4, name: "Asabeneh Yetayeh", createdat: "2020-01-30 01:09", country: "Finland", score: 75 }, + { id: 5, name: "Mathias Elias", createdat: "2020-01-30 01:09", country: "Sweden", score: 70 } +]; + +function addScore(id, score) +{ + data.forEach(function(value){ + if(value.id==id) + { + // console.log("tafiditra"); + value.score+=score; + } + }) +} +function reduceScore(id, score) +{ + data.forEach(function(value){ + if(value.id==id) + { + // console.log("tafiditra"); + value.score-=score; + } + }) +} +function deleteRecord(id) +{ + data = data.filter(function(value){ + return value.id != id; + }) +} + +function addRecord(name, country, score) +{ + data.push({ id: getLastId(data)+1, name: name, createdat: (new Date()).toLocaleString(), country: country, score: score }); +} + +function getLastId(data) +{ + if(data.length==0) + { + return 0; + } + let retour = data[data.length-1].id; + return retour; +} + +function sortData(data) +{ + data.sort(function(a,b){ + if(a.scoreb.score) return -1 + return 0; + }) +} + +function updateButton() +{ + let element = document.querySelectorAll("button"); + let buttondelete = []; + let buttonplus = []; + let buttonminus = []; + element.forEach(function(value){ + if(value.className=="delete") + { + buttondelete.push(value); + value.addEventListener("click", function() { + // Imprime l'élément parent du bouton + // console.log(this.parentNode); + let id = this.parentNode.parentNode.children[0].value; + deleteRecord(id, 5); + update(); + console.log(id) + }); + } + else if(value.className=="plus"){ + buttonplus.push(value); + value.addEventListener("click", function() { + // Imprime l'élément parent du bouton + // console.log(this.parentNode); + let id = this.parentNode.parentNode.children[0].value; + console.log(id) + addScore(id, 5); + update(); + }); + } + else if(value.className=="minus"){ + buttonminus.push(value); + value.addEventListener("click", function() { + // Imprime l'élément parent du bouton + // console.log(this.parentNode); + let id = this.parentNode.parentNode.children[0].value; + console.log(id) + reduceScore(id, 5); + update(); + }); + } + }) +} + +function updateBoard() +{ + sortData(data); + + let leaderboard = document.querySelector(".leaderboard"); + let content = document.querySelector(".content"); + content.innerHTML = ""; + + + let board; + let inputhidden; + let upname; + let player; + let name; + let time; + let country; + let score; + let options; + let buttondelete; + let buttonplus; + let buttonminus; + + let element; + + data.forEach(function(value){ + board = document.createElement("div"); + board.className = "board"; + + inputhidden = document.createElement("input"); + inputhidden.type = "hidden"; + inputhidden.name = "id"; + inputhidden.value = value.id; + board.appendChild(inputhidden); + + upname = document.createElement("div"); + upname.className = "upname"; + player = document.createElement("div"); + player.className = "player"; + name = document.createElement("p"); + name.className = "name"; + name.textContent = value.name; + time = document.createElement("p"); + time.className = "time"; + time.textContent = moment(new Date(value.createdat)).format('lll'); + player.appendChild(name); + player.appendChild(time); + upname.appendChild(player); + board.appendChild(upname); + + country = document.createElement("div"); + country.className = "country"; + country.textContent = value.country; + board.appendChild(country); + + score = document.createElement("div"); + score.className = "score"; + score.textContent = value.score; + board.appendChild(score); + + options = document.createElement("div"); + options.className = "options"; + buttondelete = document.createElement("button"); + buttondelete.className = "delete"; + element = document.createElement("i"); + element.className = "fa fa-trash"; + buttondelete.appendChild(element); + buttonplus = document.createElement("button"); + buttonplus.className = "plus"; + buttonplus.textContent = "+5"; + buttonminus = document.createElement("button"); + buttonminus.className = "minus"; + buttonminus.textContent = "-5"; + options.appendChild(buttondelete); + options.appendChild(buttonplus); + options.appendChild(buttonminus); + board.appendChild(options); + + content.appendChild(board); + leaderboard.appendChild(content); + }) +} + + + +function update() +{ + updateBoard() + updateButton(); +} + + + +update(); + +let inputname = document.querySelector("#inputname"); +let inputsurname = document.querySelector("#inputsurname"); +let inputcountry = document.querySelector("#inputcountry"); +let inputscore = document.querySelector("#inputscore"); +let addsubmit = document.querySelector("#addsubmit"); +let errormessage = document.querySelector("#errormessage"); +addsubmit.addEventListener("click", function(e){ + if(inputname.value=="" || inputsurname.value=="" || + inputcountry.value=="" || inputscore.value=="") + { + errormessage.textContent = "veillez remplir les champs"; + errormessage.style.display = "block"; + } + else{ + errormessage.style.display = "none"; + addRecord(`${inputname.value} ${inputsurname.value}`, inputcountry.value, +(inputscore.value)); + update(); + } + return e; +}) \ No newline at end of file diff --git a/28_Day_Mini_project_leaderboard/28_day_starter/js/moment.min.js b/28_Day_Mini_project_leaderboard/28_day_starter/js/moment.min.js new file mode 100644 index 0000000..3427886 --- /dev/null +++ b/28_Day_Mini_project_leaderboard/28_day_starter/js/moment.min.js @@ -0,0 +1,2 @@ +!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):e.moment=t()}(this,function(){"use strict";var H;function f(){return H.apply(null,arguments)}function a(e){return e instanceof Array||"[object Array]"===Object.prototype.toString.call(e)}function F(e){return null!=e&&"[object Object]"===Object.prototype.toString.call(e)}function c(e,t){return Object.prototype.hasOwnProperty.call(e,t)}function L(e){if(Object.getOwnPropertyNames)return 0===Object.getOwnPropertyNames(e).length;for(var t in e)if(c(e,t))return;return 1}function o(e){return void 0===e}function u(e){return"number"==typeof e||"[object Number]"===Object.prototype.toString.call(e)}function V(e){return e instanceof Date||"[object Date]"===Object.prototype.toString.call(e)}function G(e,t){for(var n=[],s=e.length,i=0;i>>0,s=0;sAe(e)?(r=e+1,t-Ae(e)):(r=e,t);return{year:r,dayOfYear:n}}function qe(e,t,n){var s,i,r=ze(e.year(),t,n),r=Math.floor((e.dayOfYear()-r-1)/7)+1;return r<1?s=r+P(i=e.year()-1,t,n):r>P(e.year(),t,n)?(s=r-P(e.year(),t,n),i=e.year()+1):(i=e.year(),s=r),{week:s,year:i}}function P(e,t,n){var s=ze(e,t,n),t=ze(e+1,t,n);return(Ae(e)-s+t)/7}s("w",["ww",2],"wo","week"),s("W",["WW",2],"Wo","isoWeek"),t("week","w"),t("isoWeek","W"),n("week",5),n("isoWeek",5),v("w",p),v("ww",p,w),v("W",p),v("WW",p,w),Te(["w","ww","W","WW"],function(e,t,n,s){t[s.substr(0,1)]=g(e)});function Be(e,t){return e.slice(t,7).concat(e.slice(0,t))}s("d",0,"do","day"),s("dd",0,0,function(e){return this.localeData().weekdaysMin(this,e)}),s("ddd",0,0,function(e){return this.localeData().weekdaysShort(this,e)}),s("dddd",0,0,function(e){return this.localeData().weekdays(this,e)}),s("e",0,0,"weekday"),s("E",0,0,"isoWeekday"),t("day","d"),t("weekday","e"),t("isoWeekday","E"),n("day",11),n("weekday",11),n("isoWeekday",11),v("d",p),v("e",p),v("E",p),v("dd",function(e,t){return t.weekdaysMinRegex(e)}),v("ddd",function(e,t){return t.weekdaysShortRegex(e)}),v("dddd",function(e,t){return t.weekdaysRegex(e)}),Te(["dd","ddd","dddd"],function(e,t,n,s){s=n._locale.weekdaysParse(e,s,n._strict);null!=s?t.d=s:m(n).invalidWeekday=e}),Te(["d","e","E"],function(e,t,n,s){t[s]=g(e)});var Je="Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),Qe="Sun_Mon_Tue_Wed_Thu_Fri_Sat".split("_"),Xe="Su_Mo_Tu_We_Th_Fr_Sa".split("_"),Ke=k,et=k,tt=k;function nt(){function e(e,t){return t.length-e.length}for(var t,n,s,i=[],r=[],a=[],o=[],u=0;u<7;u++)s=l([2e3,1]).day(u),t=M(this.weekdaysMin(s,"")),n=M(this.weekdaysShort(s,"")),s=M(this.weekdays(s,"")),i.push(t),r.push(n),a.push(s),o.push(t),o.push(n),o.push(s);i.sort(e),r.sort(e),a.sort(e),o.sort(e),this._weekdaysRegex=new RegExp("^("+o.join("|")+")","i"),this._weekdaysShortRegex=this._weekdaysRegex,this._weekdaysMinRegex=this._weekdaysRegex,this._weekdaysStrictRegex=new RegExp("^("+a.join("|")+")","i"),this._weekdaysShortStrictRegex=new RegExp("^("+r.join("|")+")","i"),this._weekdaysMinStrictRegex=new RegExp("^("+i.join("|")+")","i")}function st(){return this.hours()%12||12}function it(e,t){s(e,0,0,function(){return this.localeData().meridiem(this.hours(),this.minutes(),t)})}function rt(e,t){return t._meridiemParse}s("H",["HH",2],0,"hour"),s("h",["hh",2],0,st),s("k",["kk",2],0,function(){return this.hours()||24}),s("hmm",0,0,function(){return""+st.apply(this)+r(this.minutes(),2)}),s("hmmss",0,0,function(){return""+st.apply(this)+r(this.minutes(),2)+r(this.seconds(),2)}),s("Hmm",0,0,function(){return""+this.hours()+r(this.minutes(),2)}),s("Hmmss",0,0,function(){return""+this.hours()+r(this.minutes(),2)+r(this.seconds(),2)}),it("a",!0),it("A",!1),t("hour","h"),n("hour",13),v("a",rt),v("A",rt),v("H",p),v("h",p),v("k",p),v("HH",p,w),v("hh",p,w),v("kk",p,w),v("hmm",ge),v("hmmss",we),v("Hmm",ge),v("Hmmss",we),D(["H","HH"],x),D(["k","kk"],function(e,t,n){e=g(e);t[x]=24===e?0:e}),D(["a","A"],function(e,t,n){n._isPm=n._locale.isPM(e),n._meridiem=e}),D(["h","hh"],function(e,t,n){t[x]=g(e),m(n).bigHour=!0}),D("hmm",function(e,t,n){var s=e.length-2;t[x]=g(e.substr(0,s)),t[T]=g(e.substr(s)),m(n).bigHour=!0}),D("hmmss",function(e,t,n){var s=e.length-4,i=e.length-2;t[x]=g(e.substr(0,s)),t[T]=g(e.substr(s,2)),t[N]=g(e.substr(i)),m(n).bigHour=!0}),D("Hmm",function(e,t,n){var s=e.length-2;t[x]=g(e.substr(0,s)),t[T]=g(e.substr(s))}),D("Hmmss",function(e,t,n){var s=e.length-4,i=e.length-2;t[x]=g(e.substr(0,s)),t[T]=g(e.substr(s,2)),t[N]=g(e.substr(i))});k=de("Hours",!0);var at,ot={calendar:{sameDay:"[Today at] LT",nextDay:"[Tomorrow at] LT",nextWeek:"dddd [at] LT",lastDay:"[Yesterday at] LT",lastWeek:"[Last] dddd [at] LT",sameElse:"L"},longDateFormat:{LTS:"h:mm:ss A",LT:"h:mm A",L:"MM/DD/YYYY",LL:"MMMM D, YYYY",LLL:"MMMM D, YYYY h:mm A",LLLL:"dddd, MMMM D, YYYY h:mm A"},invalidDate:"Invalid date",ordinal:"%d",dayOfMonthOrdinalParse:/\d{1,2}/,relativeTime:{future:"in %s",past:"%s ago",s:"a few seconds",ss:"%d seconds",m:"a minute",mm:"%d minutes",h:"an hour",hh:"%d hours",d:"a day",dd:"%d days",w:"a week",ww:"%d weeks",M:"a month",MM:"%d months",y:"a year",yy:"%d years"},months:Ce,monthsShort:Ue,week:{dow:0,doy:6},weekdays:Je,weekdaysMin:Xe,weekdaysShort:Qe,meridiemParse:/[ap]\.?m?\.?/i},R={},ut={};function lt(e){return e&&e.toLowerCase().replace("_","-")}function ht(e){for(var t,n,s,i,r=0;r=t&&function(e,t){for(var n=Math.min(e.length,t.length),s=0;s=t-1)break;t--}r++}return at}function dt(t){var e;if(void 0===R[t]&&"undefined"!=typeof module&&module&&module.exports&&null!=t.match("^[^/\\\\]*$"))try{e=at._abbr,require("./locale/"+t),ct(e)}catch(e){R[t]=null}return R[t]}function ct(e,t){return e&&((t=o(t)?mt(e):ft(e,t))?at=t:"undefined"!=typeof console&&console.warn&&console.warn("Locale "+e+" not found. Did you forget to load it?")),at._abbr}function ft(e,t){if(null===t)return delete R[e],null;var n,s=ot;if(t.abbr=e,null!=R[e])Q("defineLocaleOverride","use moment.updateLocale(localeName, config) to change an existing locale. moment.defineLocale(localeName, config) should only be used for creating a new locale See http://momentjs.com/guides/#/warnings/define-locale/ for more info."),s=R[e]._config;else if(null!=t.parentLocale)if(null!=R[t.parentLocale])s=R[t.parentLocale]._config;else{if(null==(n=dt(t.parentLocale)))return ut[t.parentLocale]||(ut[t.parentLocale]=[]),ut[t.parentLocale].push({name:e,config:t}),null;s=n._config}return R[e]=new K(X(s,t)),ut[e]&&ut[e].forEach(function(e){ft(e.name,e.config)}),ct(e),R[e]}function mt(e){var t;if(!(e=e&&e._locale&&e._locale._abbr?e._locale._abbr:e))return at;if(!a(e)){if(t=dt(e))return t;e=[e]}return ht(e)}function _t(e){var t=e._a;return t&&-2===m(e).overflow&&(t=t[O]<0||11We(t[Y],t[O])?b:t[x]<0||24P(r,u,l)?m(s)._overflowWeeks=!0:null!=h?m(s)._overflowWeekday=!0:(d=$e(r,a,o,u,l),s._a[Y]=d.year,s._dayOfYear=d.dayOfYear)),null!=e._dayOfYear&&(i=bt(e._a[Y],n[Y]),(e._dayOfYear>Ae(i)||0===e._dayOfYear)&&(m(e)._overflowDayOfYear=!0),h=Ze(i,0,e._dayOfYear),e._a[O]=h.getUTCMonth(),e._a[b]=h.getUTCDate()),t=0;t<3&&null==e._a[t];++t)e._a[t]=c[t]=n[t];for(;t<7;t++)e._a[t]=c[t]=null==e._a[t]?2===t?1:0:e._a[t];24===e._a[x]&&0===e._a[T]&&0===e._a[N]&&0===e._a[Ne]&&(e._nextDay=!0,e._a[x]=0),e._d=(e._useUTC?Ze:je).apply(null,c),r=e._useUTC?e._d.getUTCDay():e._d.getDay(),null!=e._tzm&&e._d.setUTCMinutes(e._d.getUTCMinutes()-e._tzm),e._nextDay&&(e._a[x]=24),e._w&&void 0!==e._w.d&&e._w.d!==r&&(m(e).weekdayMismatch=!0)}}function Tt(e){if(e._f===f.ISO_8601)St(e);else if(e._f===f.RFC_2822)Ot(e);else{e._a=[],m(e).empty=!0;for(var t,n,s,i,r,a=""+e._i,o=a.length,u=0,l=ae(e._f,e._locale).match(te)||[],h=l.length,d=0;de.valueOf():e.valueOf()"}),i.toJSON=function(){return this.isValid()?this.toISOString():null},i.toString=function(){return this.clone().locale("en").format("ddd MMM DD YYYY HH:mm:ss [GMT]ZZ")},i.unix=function(){return Math.floor(this.valueOf()/1e3)},i.valueOf=function(){return this._d.valueOf()-6e4*(this._offset||0)},i.creationData=function(){return{input:this._i,format:this._f,locale:this._locale,isUTC:this._isUTC,strict:this._strict}},i.eraName=function(){for(var e,t=this.localeData().eras(),n=0,s=t.length;nthis.clone().month(0).utcOffset()||this.utcOffset()>this.clone().month(5).utcOffset()},i.isLocal=function(){return!!this.isValid()&&!this._isUTC},i.isUtcOffset=function(){return!!this.isValid()&&this._isUTC},i.isUtc=At,i.isUTC=At,i.zoneAbbr=function(){return this._isUTC?"UTC":""},i.zoneName=function(){return this._isUTC?"Coordinated Universal Time":""},i.dates=e("dates accessor is deprecated. Use date instead.",ke),i.months=e("months accessor is deprecated. Use month instead",Ge),i.years=e("years accessor is deprecated. Use year instead",Ie),i.zone=e("moment().zone is deprecated, use moment().utcOffset instead. http://momentjs.com/guides/#/warnings/zone/",function(e,t){return null!=e?(this.utcOffset(e="string"!=typeof e?-e:e,t),this):-this.utcOffset()}),i.isDSTShifted=e("isDSTShifted is deprecated. See http://momentjs.com/guides/#/warnings/dst-shifted/ for more information",function(){if(!o(this._isDSTShifted))return this._isDSTShifted;var e,t={};return $(t,this),(t=Nt(t))._a?(e=(t._isUTC?l:W)(t._a),this._isDSTShifted=this.isValid()&&0 + -
    - +
    +
    + 30 Days of JavaScript Challenge 2020 Asabeneh Yetayeh +
    + + - + diff --git a/29_Day_Mini_project_animating_characters/29_day_starters/project_1/js/main.js b/29_Day_Mini_project_animating_characters/29_day_starters/project_1/js/main.js new file mode 100644 index 0000000..c81b631 --- /dev/null +++ b/29_Day_Mini_project_animating_characters/29_day_starters/project_1/js/main.js @@ -0,0 +1,20 @@ +let body = document.querySelector("body"); +let container = document.querySelector(".container"); +let animation = document.querySelector(".animation"); + +let string = "30 Days of JavaScript Challenge 2020 Asabeneh Yetayeh"; +let element; +setInterval(function() +{ + container.removeChild(animation); + animation = document.createElement("div"); + animation.className = "animation"; + for(let i = 0; i < string.length; i++){ + element = document.createElement("span"); + element.textContent = string[i]; + element.style.color = `rgb(${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)})` + animation.appendChild(element); + } + body.style.backgroundColor = `rgb(${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)})` + container.appendChild(animation); +}, 5000); \ No newline at end of file diff --git a/30_Day_Mini_project_final/30_day_starters/project_1/css/Montserrat.css b/30_Day_Mini_project_final/30_day_starters/project_1/css/Montserrat.css new file mode 100644 index 0000000..04a57dc --- /dev/null +++ b/30_Day_Mini_project_final/30_day_starters/project_1/css/Montserrat.css @@ -0,0 +1,810 @@ +/* cyrillic-ext */ +@font-face { + font-family: 'Montserrat'; + font-style: italic; + font-weight: 100; + font-display: swap; + src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUQjIg1_i6t8kCHKm459WxRxC7mw9c.woff2) format('woff2'); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; +} +/* cyrillic */ +@font-face { + font-family: 'Montserrat'; + font-style: italic; + font-weight: 100; + font-display: swap; + src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUQjIg1_i6t8kCHKm459WxRzS7mw9c.woff2) format('woff2'); + unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; +} +/* vietnamese */ +@font-face { + font-family: 'Montserrat'; + font-style: italic; + font-weight: 100; + font-display: swap; + src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUQjIg1_i6t8kCHKm459WxRxi7mw9c.woff2) format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB; +} +/* latin-ext */ +@font-face { + font-family: 'Montserrat'; + font-style: italic; + font-weight: 100; + font-display: swap; + src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUQjIg1_i6t8kCHKm459WxRxy7mw9c.woff2) format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; +} +/* latin */ +@font-face { + font-family: 'Montserrat'; + font-style: italic; + font-weight: 100; + font-display: swap; + src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUQjIg1_i6t8kCHKm459WxRyS7m.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} +/* cyrillic-ext */ +@font-face { + font-family: 'Montserrat'; + font-style: italic; + font-weight: 200; + font-display: swap; + src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUQjIg1_i6t8kCHKm459WxRxC7mw9c.woff2) format('woff2'); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; +} +/* cyrillic */ +@font-face { + font-family: 'Montserrat'; + font-style: italic; + font-weight: 200; + font-display: swap; + src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUQjIg1_i6t8kCHKm459WxRzS7mw9c.woff2) format('woff2'); + unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; +} +/* vietnamese */ +@font-face { + font-family: 'Montserrat'; + font-style: italic; + font-weight: 200; + font-display: swap; + src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUQjIg1_i6t8kCHKm459WxRxi7mw9c.woff2) format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB; +} +/* latin-ext */ +@font-face { + font-family: 'Montserrat'; + font-style: italic; + font-weight: 200; + font-display: swap; + src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUQjIg1_i6t8kCHKm459WxRxy7mw9c.woff2) format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; +} +/* latin */ +@font-face { + font-family: 'Montserrat'; + font-style: italic; + font-weight: 200; + font-display: swap; + src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUQjIg1_i6t8kCHKm459WxRyS7m.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} +/* cyrillic-ext */ +@font-face { + font-family: 'Montserrat'; + font-style: italic; + font-weight: 300; + font-display: swap; + src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUQjIg1_i6t8kCHKm459WxRxC7mw9c.woff2) format('woff2'); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; +} +/* cyrillic */ +@font-face { + font-family: 'Montserrat'; + font-style: italic; + font-weight: 300; + font-display: swap; + src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUQjIg1_i6t8kCHKm459WxRzS7mw9c.woff2) format('woff2'); + unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; +} +/* vietnamese */ +@font-face { + font-family: 'Montserrat'; + font-style: italic; + font-weight: 300; + font-display: swap; + src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUQjIg1_i6t8kCHKm459WxRxi7mw9c.woff2) format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB; +} +/* latin-ext */ +@font-face { + font-family: 'Montserrat'; + font-style: italic; + font-weight: 300; + font-display: swap; + src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUQjIg1_i6t8kCHKm459WxRxy7mw9c.woff2) format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; +} +/* latin */ +@font-face { + font-family: 'Montserrat'; + font-style: italic; + font-weight: 300; + font-display: swap; + src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUQjIg1_i6t8kCHKm459WxRyS7m.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} +/* cyrillic-ext */ +@font-face { + font-family: 'Montserrat'; + font-style: italic; + font-weight: 400; + font-display: swap; + src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUQjIg1_i6t8kCHKm459WxRxC7mw9c.woff2) format('woff2'); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; +} +/* cyrillic */ +@font-face { + font-family: 'Montserrat'; + font-style: italic; + font-weight: 400; + font-display: swap; + src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUQjIg1_i6t8kCHKm459WxRzS7mw9c.woff2) format('woff2'); + unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; +} +/* vietnamese */ +@font-face { + font-family: 'Montserrat'; + font-style: italic; + font-weight: 400; + font-display: swap; + src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUQjIg1_i6t8kCHKm459WxRxi7mw9c.woff2) format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB; +} +/* latin-ext */ +@font-face { + font-family: 'Montserrat'; + font-style: italic; + font-weight: 400; + font-display: swap; + src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUQjIg1_i6t8kCHKm459WxRxy7mw9c.woff2) format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; +} +/* latin */ +@font-face { + font-family: 'Montserrat'; + font-style: italic; + font-weight: 400; + font-display: swap; + src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUQjIg1_i6t8kCHKm459WxRyS7m.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} +/* cyrillic-ext */ +@font-face { + font-family: 'Montserrat'; + font-style: italic; + font-weight: 500; + font-display: swap; + src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUQjIg1_i6t8kCHKm459WxRxC7mw9c.woff2) format('woff2'); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; +} +/* cyrillic */ +@font-face { + font-family: 'Montserrat'; + font-style: italic; + font-weight: 500; + font-display: swap; + src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUQjIg1_i6t8kCHKm459WxRzS7mw9c.woff2) format('woff2'); + unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; +} +/* vietnamese */ +@font-face { + font-family: 'Montserrat'; + font-style: italic; + font-weight: 500; + font-display: swap; + src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUQjIg1_i6t8kCHKm459WxRxi7mw9c.woff2) format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB; +} +/* latin-ext */ +@font-face { + font-family: 'Montserrat'; + font-style: italic; + font-weight: 500; + font-display: swap; + src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUQjIg1_i6t8kCHKm459WxRxy7mw9c.woff2) format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; +} +/* latin */ +@font-face { + font-family: 'Montserrat'; + font-style: italic; + font-weight: 500; + font-display: swap; + src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUQjIg1_i6t8kCHKm459WxRyS7m.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} +/* cyrillic-ext */ +@font-face { + font-family: 'Montserrat'; + font-style: italic; + font-weight: 600; + font-display: swap; + src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUQjIg1_i6t8kCHKm459WxRxC7mw9c.woff2) format('woff2'); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; +} +/* cyrillic */ +@font-face { + font-family: 'Montserrat'; + font-style: italic; + font-weight: 600; + font-display: swap; + src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUQjIg1_i6t8kCHKm459WxRzS7mw9c.woff2) format('woff2'); + unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; +} +/* vietnamese */ +@font-face { + font-family: 'Montserrat'; + font-style: italic; + font-weight: 600; + font-display: swap; + src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUQjIg1_i6t8kCHKm459WxRxi7mw9c.woff2) format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB; +} +/* latin-ext */ +@font-face { + font-family: 'Montserrat'; + font-style: italic; + font-weight: 600; + font-display: swap; + src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUQjIg1_i6t8kCHKm459WxRxy7mw9c.woff2) format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; +} +/* latin */ +@font-face { + font-family: 'Montserrat'; + font-style: italic; + font-weight: 600; + font-display: swap; + src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUQjIg1_i6t8kCHKm459WxRyS7m.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} +/* cyrillic-ext */ +@font-face { + font-family: 'Montserrat'; + font-style: italic; + font-weight: 700; + font-display: swap; + src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUQjIg1_i6t8kCHKm459WxRxC7mw9c.woff2) format('woff2'); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; +} +/* cyrillic */ +@font-face { + font-family: 'Montserrat'; + font-style: italic; + font-weight: 700; + font-display: swap; + src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUQjIg1_i6t8kCHKm459WxRzS7mw9c.woff2) format('woff2'); + unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; +} +/* vietnamese */ +@font-face { + font-family: 'Montserrat'; + font-style: italic; + font-weight: 700; + font-display: swap; + src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUQjIg1_i6t8kCHKm459WxRxi7mw9c.woff2) format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB; +} +/* latin-ext */ +@font-face { + font-family: 'Montserrat'; + font-style: italic; + font-weight: 700; + font-display: swap; + src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUQjIg1_i6t8kCHKm459WxRxy7mw9c.woff2) format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; +} +/* latin */ +@font-face { + font-family: 'Montserrat'; + font-style: italic; + font-weight: 700; + font-display: swap; + src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUQjIg1_i6t8kCHKm459WxRyS7m.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} +/* cyrillic-ext */ +@font-face { + font-family: 'Montserrat'; + font-style: italic; + font-weight: 800; + font-display: swap; + src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUQjIg1_i6t8kCHKm459WxRxC7mw9c.woff2) format('woff2'); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; +} +/* cyrillic */ +@font-face { + font-family: 'Montserrat'; + font-style: italic; + font-weight: 800; + font-display: swap; + src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUQjIg1_i6t8kCHKm459WxRzS7mw9c.woff2) format('woff2'); + unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; +} +/* vietnamese */ +@font-face { + font-family: 'Montserrat'; + font-style: italic; + font-weight: 800; + font-display: swap; + src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUQjIg1_i6t8kCHKm459WxRxi7mw9c.woff2) format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB; +} +/* latin-ext */ +@font-face { + font-family: 'Montserrat'; + font-style: italic; + font-weight: 800; + font-display: swap; + src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUQjIg1_i6t8kCHKm459WxRxy7mw9c.woff2) format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; +} +/* latin */ +@font-face { + font-family: 'Montserrat'; + font-style: italic; + font-weight: 800; + font-display: swap; + src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUQjIg1_i6t8kCHKm459WxRyS7m.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} +/* cyrillic-ext */ +@font-face { + font-family: 'Montserrat'; + font-style: italic; + font-weight: 900; + font-display: swap; + src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUQjIg1_i6t8kCHKm459WxRxC7mw9c.woff2) format('woff2'); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; +} +/* cyrillic */ +@font-face { + font-family: 'Montserrat'; + font-style: italic; + font-weight: 900; + font-display: swap; + src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUQjIg1_i6t8kCHKm459WxRzS7mw9c.woff2) format('woff2'); + unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; +} +/* vietnamese */ +@font-face { + font-family: 'Montserrat'; + font-style: italic; + font-weight: 900; + font-display: swap; + src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUQjIg1_i6t8kCHKm459WxRxi7mw9c.woff2) format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB; +} +/* latin-ext */ +@font-face { + font-family: 'Montserrat'; + font-style: italic; + font-weight: 900; + font-display: swap; + src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUQjIg1_i6t8kCHKm459WxRxy7mw9c.woff2) format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; +} +/* latin */ +@font-face { + font-family: 'Montserrat'; + font-style: italic; + font-weight: 900; + font-display: swap; + src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUQjIg1_i6t8kCHKm459WxRyS7m.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} +/* cyrillic-ext */ +@font-face { + font-family: 'Montserrat'; + font-style: normal; + font-weight: 100; + font-display: swap; + src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUSjIg1_i6t8kCHKm459WRhyzbi.woff2) format('woff2'); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; +} +/* cyrillic */ +@font-face { + font-family: 'Montserrat'; + font-style: normal; + font-weight: 100; + font-display: swap; + src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2) format('woff2'); + unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; +} +/* vietnamese */ +@font-face { + font-family: 'Montserrat'; + font-style: normal; + font-weight: 100; + font-display: swap; + src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUSjIg1_i6t8kCHKm459WZhyzbi.woff2) format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB; +} +/* latin-ext */ +@font-face { + font-family: 'Montserrat'; + font-style: normal; + font-weight: 100; + font-display: swap; + src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2) format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; +} +/* latin */ +@font-face { + font-family: 'Montserrat'; + font-style: normal; + font-weight: 100; + font-display: swap; + src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} +/* cyrillic-ext */ +@font-face { + font-family: 'Montserrat'; + font-style: normal; + font-weight: 200; + font-display: swap; + src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUSjIg1_i6t8kCHKm459WRhyzbi.woff2) format('woff2'); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; +} +/* cyrillic */ +@font-face { + font-family: 'Montserrat'; + font-style: normal; + font-weight: 200; + font-display: swap; + src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2) format('woff2'); + unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; +} +/* vietnamese */ +@font-face { + font-family: 'Montserrat'; + font-style: normal; + font-weight: 200; + font-display: swap; + src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUSjIg1_i6t8kCHKm459WZhyzbi.woff2) format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB; +} +/* latin-ext */ +@font-face { + font-family: 'Montserrat'; + font-style: normal; + font-weight: 200; + font-display: swap; + src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2) format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; +} +/* latin */ +@font-face { + font-family: 'Montserrat'; + font-style: normal; + font-weight: 200; + font-display: swap; + src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} +/* cyrillic-ext */ +@font-face { + font-family: 'Montserrat'; + font-style: normal; + font-weight: 300; + font-display: swap; + src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUSjIg1_i6t8kCHKm459WRhyzbi.woff2) format('woff2'); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; +} +/* cyrillic */ +@font-face { + font-family: 'Montserrat'; + font-style: normal; + font-weight: 300; + font-display: swap; + src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2) format('woff2'); + unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; +} +/* vietnamese */ +@font-face { + font-family: 'Montserrat'; + font-style: normal; + font-weight: 300; + font-display: swap; + src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUSjIg1_i6t8kCHKm459WZhyzbi.woff2) format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB; +} +/* latin-ext */ +@font-face { + font-family: 'Montserrat'; + font-style: normal; + font-weight: 300; + font-display: swap; + src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2) format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; +} +/* latin */ +@font-face { + font-family: 'Montserrat'; + font-style: normal; + font-weight: 300; + font-display: swap; + src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} +/* cyrillic-ext */ +@font-face { + font-family: 'Montserrat'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUSjIg1_i6t8kCHKm459WRhyzbi.woff2) format('woff2'); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; +} +/* cyrillic */ +@font-face { + font-family: 'Montserrat'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2) format('woff2'); + unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; +} +/* vietnamese */ +@font-face { + font-family: 'Montserrat'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUSjIg1_i6t8kCHKm459WZhyzbi.woff2) format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB; +} +/* latin-ext */ +@font-face { + font-family: 'Montserrat'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2) format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; +} +/* latin */ +@font-face { + font-family: 'Montserrat'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} +/* cyrillic-ext */ +@font-face { + font-family: 'Montserrat'; + font-style: normal; + font-weight: 500; + font-display: swap; + src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUSjIg1_i6t8kCHKm459WRhyzbi.woff2) format('woff2'); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; +} +/* cyrillic */ +@font-face { + font-family: 'Montserrat'; + font-style: normal; + font-weight: 500; + font-display: swap; + src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2) format('woff2'); + unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; +} +/* vietnamese */ +@font-face { + font-family: 'Montserrat'; + font-style: normal; + font-weight: 500; + font-display: swap; + src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUSjIg1_i6t8kCHKm459WZhyzbi.woff2) format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB; +} +/* latin-ext */ +@font-face { + font-family: 'Montserrat'; + font-style: normal; + font-weight: 500; + font-display: swap; + src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2) format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; +} +/* latin */ +@font-face { + font-family: 'Montserrat'; + font-style: normal; + font-weight: 500; + font-display: swap; + src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} +/* cyrillic-ext */ +@font-face { + font-family: 'Montserrat'; + font-style: normal; + font-weight: 600; + font-display: swap; + src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUSjIg1_i6t8kCHKm459WRhyzbi.woff2) format('woff2'); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; +} +/* cyrillic */ +@font-face { + font-family: 'Montserrat'; + font-style: normal; + font-weight: 600; + font-display: swap; + src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2) format('woff2'); + unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; +} +/* vietnamese */ +@font-face { + font-family: 'Montserrat'; + font-style: normal; + font-weight: 600; + font-display: swap; + src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUSjIg1_i6t8kCHKm459WZhyzbi.woff2) format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB; +} +/* latin-ext */ +@font-face { + font-family: 'Montserrat'; + font-style: normal; + font-weight: 600; + font-display: swap; + src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2) format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; +} +/* latin */ +@font-face { + font-family: 'Montserrat'; + font-style: normal; + font-weight: 600; + font-display: swap; + src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} +/* cyrillic-ext */ +@font-face { + font-family: 'Montserrat'; + font-style: normal; + font-weight: 700; + font-display: swap; + src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUSjIg1_i6t8kCHKm459WRhyzbi.woff2) format('woff2'); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; +} +/* cyrillic */ +@font-face { + font-family: 'Montserrat'; + font-style: normal; + font-weight: 700; + font-display: swap; + src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2) format('woff2'); + unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; +} +/* vietnamese */ +@font-face { + font-family: 'Montserrat'; + font-style: normal; + font-weight: 700; + font-display: swap; + src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUSjIg1_i6t8kCHKm459WZhyzbi.woff2) format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB; +} +/* latin-ext */ +@font-face { + font-family: 'Montserrat'; + font-style: normal; + font-weight: 700; + font-display: swap; + src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2) format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; +} +/* latin */ +@font-face { + font-family: 'Montserrat'; + font-style: normal; + font-weight: 700; + font-display: swap; + src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} +/* cyrillic-ext */ +@font-face { + font-family: 'Montserrat'; + font-style: normal; + font-weight: 800; + font-display: swap; + src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUSjIg1_i6t8kCHKm459WRhyzbi.woff2) format('woff2'); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; +} +/* cyrillic */ +@font-face { + font-family: 'Montserrat'; + font-style: normal; + font-weight: 800; + font-display: swap; + src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2) format('woff2'); + unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; +} +/* vietnamese */ +@font-face { + font-family: 'Montserrat'; + font-style: normal; + font-weight: 800; + font-display: swap; + src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUSjIg1_i6t8kCHKm459WZhyzbi.woff2) format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB; +} +/* latin-ext */ +@font-face { + font-family: 'Montserrat'; + font-style: normal; + font-weight: 800; + font-display: swap; + src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2) format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; +} +/* latin */ +@font-face { + font-family: 'Montserrat'; + font-style: normal; + font-weight: 800; + font-display: swap; + src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} +/* cyrillic-ext */ +@font-face { + font-family: 'Montserrat'; + font-style: normal; + font-weight: 900; + font-display: swap; + src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUSjIg1_i6t8kCHKm459WRhyzbi.woff2) format('woff2'); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; +} +/* cyrillic */ +@font-face { + font-family: 'Montserrat'; + font-style: normal; + font-weight: 900; + font-display: swap; + src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2) format('woff2'); + unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; +} +/* vietnamese */ +@font-face { + font-family: 'Montserrat'; + font-style: normal; + font-weight: 900; + font-display: swap; + src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUSjIg1_i6t8kCHKm459WZhyzbi.woff2) format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB; +} +/* latin-ext */ +@font-face { + font-family: 'Montserrat'; + font-style: normal; + font-weight: 900; + font-display: swap; + src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2) format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; +} +/* latin */ +@font-face { + font-family: 'Montserrat'; + font-style: normal; + font-weight: 900; + font-display: swap; + src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} diff --git a/30_Day_Mini_project_final/30_day_starters/project_1/css/style.css b/30_Day_Mini_project_final/30_day_starters/project_1/css/style.css new file mode 100644 index 0000000..d310b1a --- /dev/null +++ b/30_Day_Mini_project_final/30_day_starters/project_1/css/style.css @@ -0,0 +1,333 @@ +*{ + margin: 0; + padding: 0; +} + +body{ + display: grid; + grid-template-columns: 1fr; + /* grid-gap: 1em; */ + font-family: 'Montserrat', sans-serif; +} + +header{ + min-height: 100px; + text-align: center; +} + +#title{ + background-color: rgb(239,237,243); + display: grid; + align-items: center; + padding: 10px; +} + +#title h1{ + font-weight: normal; + font-size: 40px; + color: rgb(246, 199, 127); +} + +#searchbar{ + min-height: 100px; + padding: 20px; +} + +#searchbar input{ + padding: 10px; + width: 50%; + border-radius: 50px; + border:solid 1px rgb(239,237,243); + margin-bottom: 35px; +} + +#searchbar input:focus{ + outline: solid 2px rgb(239,237,243); +} + +.filter-button{ + display: flex; + flex-wrap: wrap; + justify-content: center; +} + +.filter-button button{ + padding: 15px; + text-transform: uppercase; + width: 200px; + background-color: rgb(242,159,59); + border: none; + margin: 5px; + border-radius: 50px; + font-weight: bold; + font-size: 10px; +} + +.filter-button button:hover{ + background-color: rgb(255, 169, 63); + color: white; +} + +.filter-button #buttonsignal{ + width: auto; + background-color: white; + font-size: 20px; + border-radius: 0%; + border-left: solid 5px rgb(242,159,59); + border-bottom: solid 5px rgb(242,159,59); + padding: 0; + padding-left: 10px; + color: rgb(242,159,59); + font-size: 30px; +} + +main{ + background-color: pink; + min-height: 100vh; +} + +.searchresults{ + display: flex; + flex-wrap: wrap; + background-color: rgb(238, 235, 240); +} + +.card { + display: grid; + grid-template-columns: 1fr; + box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); + transition: 0.3s; + width: calc(14.285714285714285714285714285714% - 20px); + margin: 10px; + background-color: white; +} + +.card .image{ + margin-top: 20px; + margin-right: 50px; + margin-left: 50px; +} + +.card .image img{ + width: 100%; + box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); +} + +/* On mouse-over, add a deeper shadow */ +.card:hover { + box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); + width: 14.285714285714285714285714285714%; + margin:0; +} + +/* Add some padding inside the card container */ +.card .container { + padding: 30px 20px; +} + +.card .container h4{ + text-align: center; + text-transform: uppercase; + color: rgb(242,159,59); + font-weight: normal; + margin-bottom: 15px; +} + +.stats{ + min-height: 100px; +} + +.stats-header{ + background-color: white; + padding: 30px; + text-align: center; +} +.stats-button{ + display: flex; + flex-wrap: wrap; + justify-content: center; +} +.stats-button button{ + padding: 15px; + text-transform: uppercase; + min-width: 200px; + background-color: rgb(242,159,59); + border: none; + margin: 5px; + font-weight: bold; + font-size: 10px; + margin-bottom: 15px; +} + +.stats-button button:hover{ + background-color: rgb(255, 169, 63); + color: white; +} + +.stats-chart{ + min-height: 100px; + background-color: rgb(239,237,243); + padding: 30px; +} +.stats-container +{ + width: 80%; + margin: auto; +} +.stats-line{ + display: flex; + flex-wrap: wrap; + align-items: center; + margin: 20px; +} + +.stats-line .country{ + width: 20%; +} +.stats-line .portion-container{ + width: 60%; +} +.stats-line .total{ + width: 20%; +} + +.stats-line .portion{ + background-color: rgb(242,159,59); + width: 100%; + min-height: 50px; +} + +footer{ + background-color: rgb(199, 198, 201); +} +.copyright{ + display: flex; + flex-wrap: wrap; + justify-content: center; + padding: 30px; +} +.copyrightname{ + font-weight: bold; +} + +/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ + /* Extra small devices (phones, 600px and down) */ + @media only screen and (max-width: 600px) { + #title h1{ + font-size: 30px; + } + #searchbar input{ + width: 80%; + } + .filter-button{ + flex-direction: column; + align-items: center; + } + .card { + width: calc(50% - 20px); + margin: 10px; + } + .card:hover { + width: 50%; + margin:0; + } + .stats-button{ + flex-direction: column; + align-content: center; + } + .stats-container + { + width: 100%; + font-size: 10px; + } + } + + /* Small devices (portrait tablets and large phones, 600px and up) */ + @media only screen and (min-width: 600px) { + #title h1{ + font-size: 30px; + } + #searchbar input{ + width: 80%; + } + .filter-button{ + flex-direction: column; + align-items: center; + } + .card { + width: calc(33.3333% - 20px); + margin: 10px; + } + .card:hover { + width: 33.3333%; + margin:0; + } + .stats-container + { + width: 100%; + } + } + + /* Medium devices (landscape tablets, 768px and up) */ + @media only screen and (min-width: 768px) { + #title h1{ + font-size: 40px; + } + #searchbar input{ + width: 80%; + } + .filter-button{ + flex-direction: row; + align-items: center; + } + .card { + width: calc(25% - 20px); + margin: 10px; + } + .card:hover { + width: 25%; + margin:0; + } + .stats-container + { + width: 100%; + } + } + + /* Large devices (laptops/desktops, 992px and up) */ + @media only screen and (min-width: 992px) { + #searchbar input{ + width: 60%; + } + .card { + width: calc(20% - 20px); + margin: 10px; + } + .card:hover { + width: 20%; + margin:0; + } + .stats-container + { + width: 80%; + } + } + + /* Extra large devices (large laptops and desktops, 1200px and up) */ + @media only screen and (min-width: 1200px) { + #searchbar input{ + width: 50%; + } + .card { + width: calc(14.285714285714285714285714285714% - 20px); + margin: 10px; + } + .card:hover { + width: 14.285714285714285714285714285714%; + margin:0; + } + .stats-container + { + width: 80%; + } + } \ No newline at end of file diff --git a/30_Day_Mini_project_final/30_day_starters/project_1/img/img_avatar.png b/30_Day_Mini_project_final/30_day_starters/project_1/img/img_avatar.png new file mode 100644 index 0000000..2b83185 Binary files /dev/null and b/30_Day_Mini_project_final/30_day_starters/project_1/img/img_avatar.png differ diff --git a/30_Day_Mini_project_final/30_day_starters/project_1/index.html b/30_Day_Mini_project_final/30_day_starters/project_1/index.html index 323f758..cdb7efb 100644 --- a/30_Day_Mini_project_final/30_day_starters/project_1/index.html +++ b/30_Day_Mini_project_final/30_day_starters/project_1/index.html @@ -1,16 +1,171 @@ - - + - 30DaysOfJavaScript:30 + + + + + + + 30 Days Of JavaScript: Final Projects - - +
    +
    +

    World Countries Data

    +

    Currently we have 250 countries

    +
    + +
    +
    +
    +
    +
    + Avatar +
    +
    +

    Madagascar

    +

    Capital: Antananarivo

    +

    Languagues: French, Malagasy

    +

    Population: 276,910,19

    +
    +
    +
    +
    + Avatar +
    +
    +

    Madagascar

    +

    Capital: Antananarivo

    +

    Languagues: French, Malagasy

    +

    Population: 276,910,19

    +
    +
    +
    +
    + Avatar +
    +
    +

    Madagascar

    +

    Capital: Antananarivo

    +

    Languagues: French, Malagasy

    +

    Population: 276,910,19

    +
    +
    +
    +
    + Avatar +
    +
    +

    Madagascar

    +

    Capital: Antananarivo

    +

    Languagues: French, Malagasy

    +

    Population: 276,910,19

    +
    +
    +
    +
    + Avatar +
    +
    +

    Madagascar

    +

    Capital: Antananarivo

    +

    Languagues: French, Malagasy

    +

    Population: 276,910,19

    +
    +
    +
    +
    + Avatar +
    +
    +

    Madagascar

    +

    Capital: Antananarivo

    +

    Languagues: French, Malagasy

    +

    Population: 276,910,19

    +
    +
    +
    +
    + Avatar +
    +
    +

    Madagascar

    +

    Capital: Antananarivo

    +

    Languagues: French, Malagasy

    +

    Population: 276,910,19

    +
    +
    +
    +
    + Avatar +
    +
    +

    Madagascar

    +

    Capital: Antananarivo

    +

    Languagues: French, Malagasy

    +

    Population: 276,910,19

    +
    +
    +
    +
    + Avatar +
    +
    +

    Madagascar

    +

    Capital: Antananarivo

    +

    Languagues: French, Malagasy

    +

    Population: 276,910,19

    +
    +
    +
    +
    + Avatar +
    +
    +

    Madagascar

    +

    Capital: Antananarivo

    +

    Languagues: French, Malagasy

    +

    Population: 276,910,19

    +
    +
    +
    +
    +
    +
    + + +
    +

    World population

    +
    +
    +
    +
    +
    World
    +
    +
    +
    +
    7,693,165,599
    +
    +
    +
    +
    +
    +
    +
    +

    ©Copyright | Faliana Ranai

    +
    +
    - - + - \ No newline at end of file diff --git a/30_Day_Mini_project_final/30_day_starters/project_1/js/main.js b/30_Day_Mini_project_final/30_day_starters/project_1/js/main.js new file mode 100644 index 0000000..a23e713 --- /dev/null +++ b/30_Day_Mini_project_final/30_day_starters/project_1/js/main.js @@ -0,0 +1,3369 @@ +const data = [ + { + "name": "Afghanistan", + "capital": "Kabul", + "languages": [ + "Pashto", + "Uzbek", + "Turkmen" + ], + "population": 40218234, + "flag": "https://upload.wikimedia.org/wikipedia/commons/5/5c/Flag_of_the_Taliban.svg", + "region": "Asia", + "area": 652230 + }, + { + "name": "Åland Islands", + "capital": "Mariehamn", + "languages": [ + "Swedish" + ], + "population": 28875, + "flag": "https://flagcdn.com/ax.svg", + "region": "Europe", + "area": 1580 + }, + { + "name": "Albania", + "capital": "Tirana", + "languages": [ + "Albanian" + ], + "population": 2837743, + "flag": "https://flagcdn.com/al.svg", + "region": "Europe", + "area": 28748 + }, + { + "name": "Algeria", + "capital": "Algiers", + "languages": [ + "Arabic" + ], + "population": 43851043, + "flag": "https://flagcdn.com/dz.svg", + "region": "Africa", + "area": 2381741 + }, + { + "name": "American Samoa", + "capital": "Pago Pago", + "languages": [ + "English", + "Samoan" + ], + "population": 55197, + "flag": "https://flagcdn.com/as.svg", + "region": "Oceania", + "area": 199 + }, + { + "name": "Andorra", + "capital": "Andorra la Vella", + "languages": [ + "Catalan" + ], + "population": 77265, + "flag": "https://flagcdn.com/ad.svg", + "region": "Europe", + "area": 468 + }, + { + "name": "Angola", + "capital": "Luanda", + "languages": [ + "Portuguese" + ], + "population": 32866268, + "flag": "https://flagcdn.com/ao.svg", + "region": "Africa", + "area": 1246700 + }, + { + "name": "Anguilla", + "capital": "The Valley", + "languages": [ + "English" + ], + "population": 13452, + "flag": "https://flagcdn.com/ai.svg", + "region": "Americas", + "area": 91 + }, + { + "name": "Antarctica", + "languages": [ + "English", + "Russian" + ], + "population": 1000, + "flag": "https://flagcdn.com/aq.svg", + "region": "Polar", + "area": 14000000 + }, + { + "name": "Antigua and Barbuda", + "capital": "Saint John's", + "languages": [ + "English" + ], + "population": 97928, + "flag": "https://flagcdn.com/ag.svg", + "region": "Americas", + "area": 442 + }, + { + "name": "Argentina", + "capital": "Buenos Aires", + "languages": [ + "Spanish", + "Guaraní" + ], + "population": 45376763, + "flag": "https://flagcdn.com/ar.svg", + "region": "Americas", + "area": 2780400 + }, + { + "name": "Armenia", + "capital": "Yerevan", + "languages": [ + "Armenian" + ], + "population": 2963234, + "flag": "https://flagcdn.com/am.svg", + "region": "Asia", + "area": 29743 + }, + { + "name": "Aruba", + "capital": "Oranjestad", + "languages": [ + "Dutch", + "(Eastern) Punjabi" + ], + "population": 106766, + "flag": "https://flagcdn.com/aw.svg", + "region": "Americas", + "area": 180 + }, + { + "name": "Australia", + "capital": "Canberra", + "languages": [ + "English" + ], + "population": 25687041, + "flag": "https://flagcdn.com/au.svg", + "region": "Oceania", + "area": 7692024 + }, + { + "name": "Austria", + "capital": "Vienna", + "languages": [ + "German" + ], + "population": 8917205, + "flag": "https://flagcdn.com/at.svg", + "region": "Europe", + "area": 83871 + }, + { + "name": "Azerbaijan", + "capital": "Baku", + "languages": [ + "Azerbaijani" + ], + "population": 10110116, + "flag": "https://flagcdn.com/az.svg", + "region": "Asia", + "area": 86600 + }, + { + "name": "Bahamas", + "capital": "Nassau", + "languages": [ + "English" + ], + "population": 393248, + "flag": "https://flagcdn.com/bs.svg", + "region": "Americas", + "area": 13943 + }, + { + "name": "Bahrain", + "capital": "Manama", + "languages": [ + "Arabic" + ], + "population": 1701583, + "flag": "https://flagcdn.com/bh.svg", + "region": "Asia", + "area": 765 + }, + { + "name": "Bangladesh", + "capital": "Dhaka", + "languages": [ + "Bengali" + ], + "population": 164689383, + "flag": "https://flagcdn.com/bd.svg", + "region": "Asia", + "area": 147570 + }, + { + "name": "Barbados", + "capital": "Bridgetown", + "languages": [ + "English" + ], + "population": 287371, + "flag": "https://flagcdn.com/bb.svg", + "region": "Americas", + "area": 430 + }, + { + "name": "Belarus", + "capital": "Minsk", + "languages": [ + "Belarusian", + "Russian" + ], + "population": 9398861, + "flag": "https://flagcdn.com/by.svg", + "region": "Europe", + "area": 207600 + }, + { + "name": "Belgium", + "capital": "Brussels", + "languages": [ + "Dutch", + "French", + "German" + ], + "population": 11555997, + "flag": "https://flagcdn.com/be.svg", + "region": "Europe", + "area": 30528 + }, + { + "name": "Belize", + "capital": "Belmopan", + "languages": [ + "English", + "Spanish" + ], + "population": 397621, + "flag": "https://flagcdn.com/bz.svg", + "region": "Americas", + "area": 22966 + }, + { + "name": "Benin", + "capital": "Porto-Novo", + "languages": [ + "French" + ], + "population": 12123198, + "flag": "https://flagcdn.com/bj.svg", + "region": "Africa", + "area": 112622 + }, + { + "name": "Bermuda", + "capital": "Hamilton", + "languages": [ + "English" + ], + "population": 63903, + "flag": "https://flagcdn.com/bm.svg", + "region": "Americas", + "area": 54 + }, + { + "name": "Bhutan", + "capital": "Thimphu", + "languages": [ + "Dzongkha" + ], + "population": 771612, + "flag": "https://flagcdn.com/bt.svg", + "region": "Asia", + "area": 38394 + }, + { + "name": "Bolivia (Plurinational State of)", + "capital": "Sucre", + "languages": [ + "Spanish", + "Aymara", + "Quechua" + ], + "population": 11673029, + "flag": "https://flagcdn.com/bo.svg", + "region": "Americas", + "area": 1098581 + }, + { + "name": "Bonaire, Sint Eustatius and Saba", + "capital": "Kralendijk", + "languages": [ + "Dutch" + ], + "population": 17408, + "flag": "https://flagcdn.com/bq.svg", + "region": "Americas", + "area": 294 + }, + { + "name": "Bosnia and Herzegovina", + "capital": "Sarajevo", + "languages": [ + "Bosnian", + "Croatian", + "Serbian" + ], + "population": 3280815, + "flag": "https://flagcdn.com/ba.svg", + "region": "Europe", + "area": 51209 + }, + { + "name": "Botswana", + "capital": "Gaborone", + "languages": [ + "English", + "Tswana" + ], + "population": 2351625, + "flag": "https://flagcdn.com/bw.svg", + "region": "Africa", + "area": 582000 + }, + { + "name": "Bouvet Island", + "languages": [ + "Norwegian", + "Norwegian Bokmål", + "Norwegian Nynorsk" + ], + "population": 0, + "flag": "https://flagcdn.com/bv.svg", + "region": "Antarctic Ocean", + "area": 49 + }, + { + "name": "Brazil", + "capital": "Brasília", + "languages": [ + "Portuguese" + ], + "population": 212559409, + "flag": "https://flagcdn.com/br.svg", + "region": "Americas", + "area": 8515767 + }, + { + "name": "British Indian Ocean Territory", + "capital": "Diego Garcia", + "languages": [ + "English" + ], + "population": 3000, + "flag": "https://flagcdn.com/io.svg", + "region": "Africa", + "area": 60 + }, + { + "name": "United States Minor Outlying Islands", + "languages": [ + "English" + ], + "population": 300, + "flag": "https://flagcdn.com/um.svg", + "region": "Americas" + }, + { + "name": "Virgin Islands (British)", + "capital": "Road Town", + "languages": [ + "English" + ], + "population": 30237, + "flag": "https://flagcdn.com/vg.svg", + "region": "Americas", + "area": 151 + }, + { + "name": "Virgin Islands (U.S.)", + "capital": "Charlotte Amalie", + "languages": [ + "English" + ], + "population": 106290, + "flag": "https://flagcdn.com/vi.svg", + "region": "Americas", + "area": 346.36 + }, + { + "name": "Brunei Darussalam", + "capital": "Bandar Seri Begawan", + "languages": [ + "Malay" + ], + "population": 437483, + "flag": "https://flagcdn.com/bn.svg", + "region": "Asia", + "area": 5765 + }, + { + "name": "Bulgaria", + "capital": "Sofia", + "languages": [ + "Bulgarian" + ], + "population": 6927288, + "flag": "https://flagcdn.com/bg.svg", + "region": "Europe", + "area": 110879 + }, + { + "name": "Burkina Faso", + "capital": "Ouagadougou", + "languages": [ + "French", + "Fula" + ], + "population": 20903278, + "flag": "https://flagcdn.com/bf.svg", + "region": "Africa", + "area": 272967 + }, + { + "name": "Burundi", + "capital": "Gitega", + "languages": [ + "French", + "Kirundi" + ], + "population": 11890781, + "flag": "https://flagcdn.com/bi.svg", + "region": "Africa", + "area": 27834 + }, + { + "name": "Cambodia", + "capital": "Phnom Penh", + "languages": [ + "Khmer" + ], + "population": 16718971, + "flag": "https://flagcdn.com/kh.svg", + "region": "Asia", + "area": 181035 + }, + { + "name": "Cameroon", + "capital": "Yaoundé", + "languages": [ + "English", + "French" + ], + "population": 26545864, + "flag": "https://flagcdn.com/cm.svg", + "region": "Africa", + "area": 475442 + }, + { + "name": "Canada", + "capital": "Ottawa", + "languages": [ + "English", + "French" + ], + "population": 38005238, + "flag": "https://flagcdn.com/ca.svg", + "region": "Americas", + "area": 9984670 + }, + { + "name": "Cabo Verde", + "capital": "Praia", + "languages": [ + "Portuguese" + ], + "population": 555988, + "flag": "https://flagcdn.com/cv.svg", + "region": "Africa", + "area": 4033 + }, + { + "name": "Cayman Islands", + "capital": "George Town", + "languages": [ + "English" + ], + "population": 65720, + "flag": "https://flagcdn.com/ky.svg", + "region": "Americas", + "area": 264 + }, + { + "name": "Central African Republic", + "capital": "Bangui", + "languages": [ + "French", + "Sango" + ], + "population": 4829764, + "flag": "https://flagcdn.com/cf.svg", + "region": "Africa", + "area": 622984 + }, + { + "name": "Chad", + "capital": "N'Djamena", + "languages": [ + "French", + "Arabic" + ], + "population": 16425859, + "flag": "https://flagcdn.com/td.svg", + "region": "Africa", + "area": 1284000 + }, + { + "name": "Chile", + "capital": "Santiago", + "languages": [ + "Spanish" + ], + "population": 19116209, + "flag": "https://flagcdn.com/cl.svg", + "region": "Americas", + "area": 756102 + }, + { + "name": "China", + "capital": "Beijing", + "languages": [ + "Chinese" + ], + "population": 1402112000, + "flag": "https://flagcdn.com/cn.svg", + "region": "Asia", + "area": 9640011 + }, + { + "name": "Christmas Island", + "capital": "Flying Fish Cove", + "languages": [ + "English" + ], + "population": 2072, + "flag": "https://flagcdn.com/cx.svg", + "region": "Oceania", + "area": 135 + }, + { + "name": "Cocos (Keeling) Islands", + "capital": "West Island", + "languages": [ + "English" + ], + "population": 550, + "flag": "https://flagcdn.com/cc.svg", + "region": "Oceania", + "area": 14 + }, + { + "name": "Colombia", + "capital": "Bogotá", + "languages": [ + "Spanish" + ], + "population": 50882884, + "flag": "https://flagcdn.com/co.svg", + "region": "Americas", + "area": 1141748 + }, + { + "name": "Comoros", + "capital": "Moroni", + "languages": [ + "Arabic", + "French" + ], + "population": 869595, + "flag": "https://flagcdn.com/km.svg", + "region": "Africa", + "area": 1862 + }, + { + "name": "Congo", + "capital": "Brazzaville", + "languages": [ + "French", + "Lingala" + ], + "population": 5518092, + "flag": "https://flagcdn.com/cg.svg", + "region": "Africa", + "area": 342000 + }, + { + "name": "Congo (Democratic Republic of the)", + "capital": "Kinshasa", + "languages": [ + "French", + "Lingala", + "Kongo", + "Swahili", + "Luba-Katanga" + ], + "population": 89561404, + "flag": "https://flagcdn.com/cd.svg", + "region": "Africa", + "area": 2344858 + }, + { + "name": "Cook Islands", + "capital": "Avarua", + "languages": [ + "English", + "Cook Islands Māori" + ], + "population": 18100, + "flag": "https://flagcdn.com/ck.svg", + "region": "Oceania", + "area": 236 + }, + { + "name": "Costa Rica", + "capital": "San José", + "languages": [ + "Spanish" + ], + "population": 5094114, + "flag": "https://flagcdn.com/cr.svg", + "region": "Americas", + "area": 51100 + }, + { + "name": "Croatia", + "capital": "Zagreb", + "languages": [ + "Croatian" + ], + "population": 4047200, + "flag": "https://flagcdn.com/hr.svg", + "region": "Europe", + "area": 56594 + }, + { + "name": "Cuba", + "capital": "Havana", + "languages": [ + "Spanish" + ], + "population": 11326616, + "flag": "https://flagcdn.com/cu.svg", + "region": "Americas", + "area": 109884 + }, + { + "name": "Curaçao", + "capital": "Willemstad", + "languages": [ + "Dutch", + "(Eastern) Punjabi", + "English" + ], + "population": 155014, + "flag": "https://flagcdn.com/cw.svg", + "region": "Americas", + "area": 444 + }, + { + "name": "Cyprus", + "capital": "Nicosia", + "languages": [ + "Greek (modern)", + "Turkish", + "Armenian" + ], + "population": 1207361, + "flag": "https://flagcdn.com/cy.svg", + "region": "Europe", + "area": 9251 + }, + { + "name": "Czech Republic", + "capital": "Prague", + "languages": [ + "Czech", + "Slovak" + ], + "population": 10698896, + "flag": "https://flagcdn.com/cz.svg", + "region": "Europe", + "area": 78865 + }, + { + "name": "Denmark", + "capital": "Copenhagen", + "languages": [ + "Danish" + ], + "population": 5831404, + "flag": "https://flagcdn.com/dk.svg", + "region": "Europe", + "area": 43094 + }, + { + "name": "Djibouti", + "capital": "Djibouti", + "languages": [ + "French", + "Arabic" + ], + "population": 988002, + "flag": "https://flagcdn.com/dj.svg", + "region": "Africa", + "area": 23200 + }, + { + "name": "Dominica", + "capital": "Roseau", + "languages": [ + "English" + ], + "population": 71991, + "flag": "https://flagcdn.com/dm.svg", + "region": "Americas", + "area": 751 + }, + { + "name": "Dominican Republic", + "capital": "Santo Domingo", + "languages": [ + "Spanish" + ], + "population": 10847904, + "flag": "https://flagcdn.com/do.svg", + "region": "Americas", + "area": 48671 + }, + { + "name": "Ecuador", + "capital": "Quito", + "languages": [ + "Spanish" + ], + "population": 17643060, + "flag": "https://flagcdn.com/ec.svg", + "region": "Americas", + "area": 276841 + }, + { + "name": "Egypt", + "capital": "Cairo", + "languages": [ + "Arabic" + ], + "population": 102334403, + "flag": "https://flagcdn.com/eg.svg", + "region": "Africa", + "area": 1002450 + }, + { + "name": "El Salvador", + "capital": "San Salvador", + "languages": [ + "Spanish" + ], + "population": 6486201, + "flag": "https://flagcdn.com/sv.svg", + "region": "Americas", + "area": 21041 + }, + { + "name": "Equatorial Guinea", + "capital": "Malabo", + "languages": [ + "Spanish", + "French", + "Portuguese", + "Fang" + ], + "population": 1402985, + "flag": "https://flagcdn.com/gq.svg", + "region": "Africa", + "area": 28051 + }, + { + "name": "Eritrea", + "capital": "Asmara", + "languages": [ + "Tigrinya", + "Arabic", + "English", + "Tigre", + "Kunama", + "Saho", + "Bilen", + "Nara", + "Afar" + ], + "population": 5352000, + "flag": "https://flagcdn.com/er.svg", + "region": "Africa", + "area": 117600 + }, + { + "name": "Estonia", + "capital": "Tallinn", + "languages": [ + "Estonian" + ], + "population": 1331057, + "flag": "https://flagcdn.com/ee.svg", + "region": "Europe", + "area": 45227 + }, + { + "name": "Ethiopia", + "capital": "Addis Ababa", + "languages": [ + "Amharic" + ], + "population": 114963583, + "flag": "https://flagcdn.com/et.svg", + "region": "Africa", + "area": 1104300 + }, + { + "name": "Falkland Islands (Malvinas)", + "capital": "Stanley", + "languages": [ + "English" + ], + "population": 2563, + "flag": "https://flagcdn.com/fk.svg", + "region": "Americas", + "area": 12173 + }, + { + "name": "Faroe Islands", + "capital": "Tórshavn", + "languages": [ + "Faroese" + ], + "population": 48865, + "flag": "https://flagcdn.com/fo.svg", + "region": "Europe", + "area": 1393 + }, + { + "name": "Fiji", + "capital": "Suva", + "languages": [ + "English", + "Fijian", + "Fiji Hindi", + "Rotuman" + ], + "population": 896444, + "flag": "https://flagcdn.com/fj.svg", + "region": "Oceania", + "area": 18272 + }, + { + "name": "Finland", + "capital": "Helsinki", + "languages": [ + "Finnish", + "Swedish" + ], + "population": 5530719, + "flag": "https://flagcdn.com/fi.svg", + "region": "Europe", + "area": 338424 + }, + { + "name": "France", + "capital": "Paris", + "languages": [ + "French" + ], + "population": 67391582, + "flag": "https://flagcdn.com/fr.svg", + "region": "Europe", + "area": 640679 + }, + { + "name": "French Guiana", + "capital": "Cayenne", + "languages": [ + "French" + ], + "population": 254541, + "flag": "https://flagcdn.com/gf.svg", + "region": "Americas" + }, + { + "name": "French Polynesia", + "capital": "Papeetē", + "languages": [ + "French" + ], + "population": 280904, + "flag": "https://flagcdn.com/pf.svg", + "region": "Oceania", + "area": 4167 + }, + { + "name": "French Southern Territories", + "capital": "Port-aux-Français", + "languages": [ + "French" + ], + "population": 140, + "flag": "https://flagcdn.com/tf.svg", + "region": "Africa", + "area": 7747 + }, + { + "name": "Gabon", + "capital": "Libreville", + "languages": [ + "French" + ], + "population": 2225728, + "flag": "https://flagcdn.com/ga.svg", + "region": "Africa", + "area": 267668 + }, + { + "name": "Gambia", + "capital": "Banjul", + "languages": [ + "English" + ], + "population": 2416664, + "flag": "https://flagcdn.com/gm.svg", + "region": "Africa", + "area": 11295 + }, + { + "name": "Georgia", + "capital": "Tbilisi", + "languages": [ + "Georgian" + ], + "population": 3714000, + "flag": "https://flagcdn.com/ge.svg", + "region": "Asia", + "area": 69700 + }, + { + "name": "Germany", + "capital": "Berlin", + "languages": [ + "German" + ], + "population": 83240525, + "flag": "https://flagcdn.com/de.svg", + "region": "Europe", + "area": 357114 + }, + { + "name": "Ghana", + "capital": "Accra", + "languages": [ + "English" + ], + "population": 31072945, + "flag": "https://flagcdn.com/gh.svg", + "region": "Africa", + "area": 238533 + }, + { + "name": "Gibraltar", + "capital": "Gibraltar", + "languages": [ + "English" + ], + "population": 33691, + "flag": "https://flagcdn.com/gi.svg", + "region": "Europe", + "area": 6 + }, + { + "name": "Greece", + "capital": "Athens", + "languages": [ + "Greek (modern)" + ], + "population": 10715549, + "flag": "https://flagcdn.com/gr.svg", + "region": "Europe", + "area": 131990 + }, + { + "name": "Greenland", + "capital": "Nuuk", + "languages": [ + "Kalaallisut" + ], + "population": 56367, + "flag": "https://flagcdn.com/gl.svg", + "region": "Americas", + "area": 2166086 + }, + { + "name": "Grenada", + "capital": "St. George's", + "languages": [ + "English" + ], + "population": 112519, + "flag": "https://flagcdn.com/gd.svg", + "region": "Americas", + "area": 344 + }, + { + "name": "Guadeloupe", + "capital": "Basse-Terre", + "languages": [ + "French" + ], + "population": 400132, + "flag": "https://flagcdn.com/gp.svg", + "region": "Americas" + }, + { + "name": "Guam", + "capital": "Hagåtña", + "languages": [ + "English", + "Chamorro", + "Spanish" + ], + "population": 168783, + "flag": "https://flagcdn.com/gu.svg", + "region": "Oceania", + "area": 549 + }, + { + "name": "Guatemala", + "capital": "Guatemala City", + "languages": [ + "Spanish" + ], + "population": 16858333, + "flag": "https://flagcdn.com/gt.svg", + "region": "Americas", + "area": 108889 + }, + { + "name": "Guernsey", + "capital": "St. Peter Port", + "languages": [ + "English", + "French" + ], + "population": 62999, + "flag": "https://flagcdn.com/gg.svg", + "region": "Europe", + "area": 78 + }, + { + "name": "Guinea", + "capital": "Conakry", + "languages": [ + "French", + "Fula" + ], + "population": 13132792, + "flag": "https://flagcdn.com/gn.svg", + "region": "Africa", + "area": 245857 + }, + { + "name": "Guinea-Bissau", + "capital": "Bissau", + "languages": [ + "Portuguese" + ], + "population": 1967998, + "flag": "https://flagcdn.com/gw.svg", + "region": "Africa", + "area": 36125 + }, + { + "name": "Guyana", + "capital": "Georgetown", + "languages": [ + "English" + ], + "population": 786559, + "flag": "https://flagcdn.com/gy.svg", + "region": "Americas", + "area": 214969 + }, + { + "name": "Haiti", + "capital": "Port-au-Prince", + "languages": [ + "French", + "Haitian" + ], + "population": 11402533, + "flag": "https://flagcdn.com/ht.svg", + "region": "Americas", + "area": 27750 + }, + { + "name": "Heard Island and McDonald Islands", + "languages": [ + "English" + ], + "population": 0, + "flag": "https://flagcdn.com/hm.svg", + "region": "Antarctic", + "area": 412 + }, + { + "name": "Vatican City", + "capital": "Vatican City", + "languages": [ + "Latin", + "Italian", + "French", + "German" + ], + "population": 451, + "flag": "https://flagcdn.com/va.svg", + "region": "Europe", + "area": 0.44 + }, + { + "name": "Honduras", + "capital": "Tegucigalpa", + "languages": [ + "Spanish" + ], + "population": 9904608, + "flag": "https://flagcdn.com/hn.svg", + "region": "Americas", + "area": 112492 + }, + { + "name": "Hungary", + "capital": "Budapest", + "languages": [ + "Hungarian" + ], + "population": 9749763, + "flag": "https://flagcdn.com/hu.svg", + "region": "Europe", + "area": 93028 + }, + { + "name": "Hong Kong", + "capital": "City of Victoria", + "languages": [ + "English", + "Chinese" + ], + "population": 7481800, + "flag": "https://flagcdn.com/hk.svg", + "region": "Asia", + "area": 1104 + }, + { + "name": "Iceland", + "capital": "Reykjavík", + "languages": [ + "Icelandic" + ], + "population": 366425, + "flag": "https://flagcdn.com/is.svg", + "region": "Europe", + "area": 103000 + }, + { + "name": "India", + "capital": "New Delhi", + "languages": [ + "Hindi", + "English" + ], + "population": 1380004385, + "flag": "https://flagcdn.com/in.svg", + "region": "Asia", + "area": 3287590 + }, + { + "name": "Indonesia", + "capital": "Jakarta", + "languages": [ + "Indonesian" + ], + "population": 273523621, + "flag": "https://flagcdn.com/id.svg", + "region": "Asia", + "area": 1904569 + }, + { + "name": "Ivory Coast", + "capital": "Yamoussoukro", + "languages": [ + "French" + ], + "population": 26378275, + "flag": "https://flagcdn.com/ci.svg", + "region": "Africa", + "area": 322463 + }, + { + "name": "Iran (Islamic Republic of)", + "capital": "Tehran", + "languages": [ + "Persian (Farsi)" + ], + "population": 83992953, + "flag": "https://flagcdn.com/ir.svg", + "region": "Asia", + "area": 1648195 + }, + { + "name": "Iraq", + "capital": "Baghdad", + "languages": [ + "Arabic", + "Kurdish" + ], + "population": 40222503, + "flag": "https://flagcdn.com/iq.svg", + "region": "Asia", + "area": 438317 + }, + { + "name": "Ireland", + "capital": "Dublin", + "languages": [ + "Irish", + "English" + ], + "population": 4994724, + "flag": "https://flagcdn.com/ie.svg", + "region": "Europe", + "area": 70273 + }, + { + "name": "Isle of Man", + "capital": "Douglas", + "languages": [ + "English", + "Manx" + ], + "population": 85032, + "flag": "https://flagcdn.com/im.svg", + "region": "Europe", + "area": 572 + }, + { + "name": "Israel", + "capital": "Jerusalem", + "languages": [ + "Hebrew (modern)", + "Arabic" + ], + "population": 9216900, + "flag": "https://flagcdn.com/il.svg", + "region": "Asia", + "area": 20770 + }, + { + "name": "Italy", + "capital": "Rome", + "languages": [ + "Italian" + ], + "population": 59554023, + "flag": "https://flagcdn.com/it.svg", + "region": "Europe", + "area": 301336 + }, + { + "name": "Jamaica", + "capital": "Kingston", + "languages": [ + "English" + ], + "population": 2961161, + "flag": "https://flagcdn.com/jm.svg", + "region": "Americas", + "area": 10991 + }, + { + "name": "Japan", + "capital": "Tokyo", + "languages": [ + "Japanese" + ], + "population": 125836021, + "flag": "https://flagcdn.com/jp.svg", + "region": "Asia", + "area": 377930 + }, + { + "name": "Jersey", + "capital": "Saint Helier", + "languages": [ + "English", + "French" + ], + "population": 100800, + "flag": "https://flagcdn.com/je.svg", + "region": "Europe", + "area": 116 + }, + { + "name": "Jordan", + "capital": "Amman", + "languages": [ + "Arabic" + ], + "population": 10203140, + "flag": "https://flagcdn.com/jo.svg", + "region": "Asia", + "area": 89342 + }, + { + "name": "Kazakhstan", + "capital": "Nur-Sultan", + "languages": [ + "Kazakh", + "Russian" + ], + "population": 18754440, + "flag": "https://flagcdn.com/kz.svg", + "region": "Asia", + "area": 2724900 + }, + { + "name": "Kenya", + "capital": "Nairobi", + "languages": [ + "English", + "Swahili" + ], + "population": 53771300, + "flag": "https://flagcdn.com/ke.svg", + "region": "Africa", + "area": 580367 + }, + { + "name": "Kiribati", + "capital": "South Tarawa", + "languages": [ + "English" + ], + "population": 119446, + "flag": "https://flagcdn.com/ki.svg", + "region": "Oceania", + "area": 811 + }, + { + "name": "Kuwait", + "capital": "Kuwait City", + "languages": [ + "Arabic" + ], + "population": 4270563, + "flag": "https://flagcdn.com/kw.svg", + "region": "Asia", + "area": 17818 + }, + { + "name": "Kyrgyzstan", + "capital": "Bishkek", + "languages": [ + "Kyrgyz", + "Russian" + ], + "population": 6591600, + "flag": "https://flagcdn.com/kg.svg", + "region": "Asia", + "area": 199951 + }, + { + "name": "Lao People's Democratic Republic", + "capital": "Vientiane", + "languages": [ + "Lao" + ], + "population": 7275556, + "flag": "https://flagcdn.com/la.svg", + "region": "Asia", + "area": 236800 + }, + { + "name": "Latvia", + "capital": "Riga", + "languages": [ + "Latvian" + ], + "population": 1901548, + "flag": "https://flagcdn.com/lv.svg", + "region": "Europe", + "area": 64559 + }, + { + "name": "Lebanon", + "capital": "Beirut", + "languages": [ + "Arabic", + "French" + ], + "population": 6825442, + "flag": "https://flagcdn.com/lb.svg", + "region": "Asia", + "area": 10452 + }, + { + "name": "Lesotho", + "capital": "Maseru", + "languages": [ + "English", + "Southern Sotho" + ], + "population": 2142252, + "flag": "https://flagcdn.com/ls.svg", + "region": "Africa", + "area": 30355 + }, + { + "name": "Liberia", + "capital": "Monrovia", + "languages": [ + "English" + ], + "population": 5057677, + "flag": "https://flagcdn.com/lr.svg", + "region": "Africa", + "area": 111369 + }, + { + "name": "Libya", + "capital": "Tripoli", + "languages": [ + "Arabic" + ], + "population": 6871287, + "flag": "https://flagcdn.com/ly.svg", + "region": "Africa", + "area": 1759540 + }, + { + "name": "Liechtenstein", + "capital": "Vaduz", + "languages": [ + "German" + ], + "population": 38137, + "flag": "https://flagcdn.com/li.svg", + "region": "Europe", + "area": 160 + }, + { + "name": "Lithuania", + "capital": "Vilnius", + "languages": [ + "Lithuanian" + ], + "population": 2794700, + "flag": "https://flagcdn.com/lt.svg", + "region": "Europe", + "area": 65300 + }, + { + "name": "Luxembourg", + "capital": "Luxembourg", + "languages": [ + "French", + "German", + "Luxembourgish" + ], + "population": 632275, + "flag": "https://flagcdn.com/lu.svg", + "region": "Europe", + "area": 2586 + }, + { + "name": "Macao", + "languages": [ + "Chinese", + "Portuguese" + ], + "population": 649342, + "flag": "https://flagcdn.com/mo.svg", + "region": "Asia", + "area": 30 + }, + { + "name": "North Macedonia", + "capital": "Skopje", + "languages": [ + "Macedonian" + ], + "population": 2083380, + "flag": "https://flagcdn.com/mk.svg", + "region": "Europe", + "area": 25713 + }, + { + "name": "Madagascar", + "capital": "Antananarivo", + "languages": [ + "French", + "Malagasy" + ], + "population": 27691019, + "flag": "https://flagcdn.com/mg.svg", + "region": "Africa", + "area": 587041 + }, + { + "name": "Malawi", + "capital": "Lilongwe", + "languages": [ + "English", + "Chichewa" + ], + "population": 19129955, + "flag": "https://flagcdn.com/mw.svg", + "region": "Africa", + "area": 118484 + }, + { + "name": "Malaysia", + "capital": "Kuala Lumpur", + "languages": [ + "Malaysian" + ], + "population": 32365998, + "flag": "https://flagcdn.com/my.svg", + "region": "Asia", + "area": 330803 + }, + { + "name": "Maldives", + "capital": "Malé", + "languages": [ + "Divehi" + ], + "population": 540542, + "flag": "https://flagcdn.com/mv.svg", + "region": "Asia", + "area": 300 + }, + { + "name": "Mali", + "capital": "Bamako", + "languages": [ + "French" + ], + "population": 20250834, + "flag": "https://flagcdn.com/ml.svg", + "region": "Africa", + "area": 1240192 + }, + { + "name": "Malta", + "capital": "Valletta", + "languages": [ + "Maltese", + "English" + ], + "population": 525285, + "flag": "https://flagcdn.com/mt.svg", + "region": "Europe", + "area": 316 + }, + { + "name": "Marshall Islands", + "capital": "Majuro", + "languages": [ + "English", + "Marshallese" + ], + "population": 59194, + "flag": "https://flagcdn.com/mh.svg", + "region": "Oceania", + "area": 181 + }, + { + "name": "Martinique", + "capital": "Fort-de-France", + "languages": [ + "French" + ], + "population": 378243, + "flag": "https://flagcdn.com/mq.svg", + "region": "Americas" + }, + { + "name": "Mauritania", + "capital": "Nouakchott", + "languages": [ + "Arabic" + ], + "population": 4649660, + "flag": "https://flagcdn.com/mr.svg", + "region": "Africa", + "area": 1030700 + }, + { + "name": "Mauritius", + "capital": "Port Louis", + "languages": [ + "English" + ], + "population": 1265740, + "flag": "https://flagcdn.com/mu.svg", + "region": "Africa", + "area": 2040 + }, + { + "name": "Mayotte", + "capital": "Mamoudzou", + "languages": [ + "French" + ], + "population": 226915, + "flag": "https://flagcdn.com/yt.svg", + "region": "Africa" + }, + { + "name": "Mexico", + "capital": "Mexico City", + "languages": [ + "Spanish" + ], + "population": 128932753, + "flag": "https://flagcdn.com/mx.svg", + "region": "Americas", + "area": 1964375 + }, + { + "name": "Micronesia (Federated States of)", + "capital": "Palikir", + "languages": [ + "English" + ], + "population": 115021, + "flag": "https://flagcdn.com/fm.svg", + "region": "Oceania", + "area": 702 + }, + { + "name": "Moldova (Republic of)", + "capital": "Chișinău", + "languages": [ + "Romanian" + ], + "population": 2617820, + "flag": "https://flagcdn.com/md.svg", + "region": "Europe", + "area": 33846 + }, + { + "name": "Monaco", + "capital": "Monaco", + "languages": [ + "French" + ], + "population": 39244, + "flag": "https://flagcdn.com/mc.svg", + "region": "Europe", + "area": 2.02 + }, + { + "name": "Mongolia", + "capital": "Ulan Bator", + "languages": [ + "Mongolian" + ], + "population": 3278292, + "flag": "https://flagcdn.com/mn.svg", + "region": "Asia", + "area": 1564110 + }, + { + "name": "Montenegro", + "capital": "Podgorica", + "languages": [ + "Serbian", + "Bosnian", + "Albanian", + "Croatian" + ], + "population": 621718, + "flag": "https://flagcdn.com/me.svg", + "region": "Europe", + "area": 13812 + }, + { + "name": "Montserrat", + "capital": "Plymouth", + "languages": [ + "English" + ], + "population": 4922, + "flag": "https://flagcdn.com/ms.svg", + "region": "Americas", + "area": 102 + }, + { + "name": "Morocco", + "capital": "Rabat", + "languages": [ + "Arabic" + ], + "population": 36910558, + "flag": "https://flagcdn.com/ma.svg", + "region": "Africa", + "area": 446550 + }, + { + "name": "Mozambique", + "capital": "Maputo", + "languages": [ + "Portuguese" + ], + "population": 31255435, + "flag": "https://flagcdn.com/mz.svg", + "region": "Africa", + "area": 801590 + }, + { + "name": "Myanmar", + "capital": "Naypyidaw", + "languages": [ + "Burmese" + ], + "population": 54409794, + "flag": "https://flagcdn.com/mm.svg", + "region": "Asia", + "area": 676578 + }, + { + "name": "Namibia", + "capital": "Windhoek", + "languages": [ + "English", + "Afrikaans" + ], + "population": 2540916, + "flag": "https://flagcdn.com/na.svg", + "region": "Africa", + "area": 825615 + }, + { + "name": "Nauru", + "capital": "Yaren", + "languages": [ + "English", + "Nauruan" + ], + "population": 10834, + "flag": "https://flagcdn.com/nr.svg", + "region": "Oceania", + "area": 21 + }, + { + "name": "Nepal", + "capital": "Kathmandu", + "languages": [ + "Nepali" + ], + "population": 29136808, + "flag": "https://flagcdn.com/np.svg", + "region": "Asia", + "area": 147181 + }, + { + "name": "Netherlands", + "capital": "Amsterdam", + "languages": [ + "Dutch" + ], + "population": 17441139, + "flag": "https://flagcdn.com/nl.svg", + "region": "Europe", + "area": 41850 + }, + { + "name": "New Caledonia", + "capital": "Nouméa", + "languages": [ + "French" + ], + "population": 271960, + "flag": "https://flagcdn.com/nc.svg", + "region": "Oceania", + "area": 18575 + }, + { + "name": "New Zealand", + "capital": "Wellington", + "languages": [ + "English", + "Māori" + ], + "population": 5084300, + "flag": "https://flagcdn.com/nz.svg", + "region": "Oceania", + "area": 270467 + }, + { + "name": "Nicaragua", + "capital": "Managua", + "languages": [ + "Spanish" + ], + "population": 6624554, + "flag": "https://flagcdn.com/ni.svg", + "region": "Americas", + "area": 130373 + }, + { + "name": "Niger", + "capital": "Niamey", + "languages": [ + "French" + ], + "population": 24206636, + "flag": "https://flagcdn.com/ne.svg", + "region": "Africa", + "area": 1267000 + }, + { + "name": "Nigeria", + "capital": "Abuja", + "languages": [ + "English" + ], + "population": 206139587, + "flag": "https://flagcdn.com/ng.svg", + "region": "Africa", + "area": 923768 + }, + { + "name": "Niue", + "capital": "Alofi", + "languages": [ + "English" + ], + "population": 1470, + "flag": "https://flagcdn.com/nu.svg", + "region": "Oceania", + "area": 260 + }, + { + "name": "Norfolk Island", + "capital": "Kingston", + "languages": [ + "English" + ], + "population": 2302, + "flag": "https://flagcdn.com/nf.svg", + "region": "Oceania", + "area": 36 + }, + { + "name": "Korea (Democratic People's Republic of)", + "capital": "Pyongyang", + "languages": [ + "Korean" + ], + "population": 25778815, + "flag": "https://flagcdn.com/kp.svg", + "region": "Asia", + "area": 120538 + }, + { + "name": "Northern Mariana Islands", + "capital": "Saipan", + "languages": [ + "English", + "Chamorro" + ], + "population": 57557, + "flag": "https://flagcdn.com/mp.svg", + "region": "Oceania", + "area": 464 + }, + { + "name": "Norway", + "capital": "Oslo", + "languages": [ + "Norwegian", + "Norwegian Bokmål", + "Norwegian Nynorsk" + ], + "population": 5379475, + "flag": "https://flagcdn.com/no.svg", + "region": "Europe", + "area": 323802 + }, + { + "name": "Oman", + "capital": "Muscat", + "languages": [ + "Arabic" + ], + "population": 5106622, + "flag": "https://flagcdn.com/om.svg", + "region": "Asia", + "area": 309500 + }, + { + "name": "Pakistan", + "capital": "Islamabad", + "languages": [ + "Urdu", + "English" + ], + "population": 220892331, + "flag": "https://flagcdn.com/pk.svg", + "region": "Asia", + "area": 881912 + }, + { + "name": "Palau", + "capital": "Ngerulmud", + "languages": [ + "English" + ], + "population": 18092, + "flag": "https://flagcdn.com/pw.svg", + "region": "Oceania", + "area": 459 + }, + { + "name": "Palestine, State of", + "capital": "Ramallah", + "languages": [ + "Arabic" + ], + "population": 4803269, + "flag": "https://flagcdn.com/ps.svg", + "region": "Asia" + }, + { + "name": "Panama", + "capital": "Panama City", + "languages": [ + "Spanish" + ], + "population": 4314768, + "flag": "https://flagcdn.com/pa.svg", + "region": "Americas", + "area": 75417 + }, + { + "name": "Papua New Guinea", + "capital": "Port Moresby", + "languages": [ + "English" + ], + "population": 8947027, + "flag": "https://flagcdn.com/pg.svg", + "region": "Oceania", + "area": 462840 + }, + { + "name": "Paraguay", + "capital": "Asunción", + "languages": [ + "Spanish", + "Guaraní" + ], + "population": 7132530, + "flag": "https://flagcdn.com/py.svg", + "region": "Americas", + "area": 406752 + }, + { + "name": "Peru", + "capital": "Lima", + "languages": [ + "Spanish" + ], + "population": 32971846, + "flag": "https://flagcdn.com/pe.svg", + "region": "Americas", + "area": 1285216 + }, + { + "name": "Philippines", + "capital": "Manila", + "languages": [ + "English" + ], + "population": 109581085, + "flag": "https://flagcdn.com/ph.svg", + "region": "Asia", + "area": 342353 + }, + { + "name": "Pitcairn", + "capital": "Adamstown", + "languages": [ + "English" + ], + "population": 56, + "flag": "https://flagcdn.com/pn.svg", + "region": "Oceania", + "area": 47 + }, + { + "name": "Poland", + "capital": "Warsaw", + "languages": [ + "Polish" + ], + "population": 37950802, + "flag": "https://flagcdn.com/pl.svg", + "region": "Europe", + "area": 312679 + }, + { + "name": "Portugal", + "capital": "Lisbon", + "languages": [ + "Portuguese" + ], + "population": 10305564, + "flag": "https://flagcdn.com/pt.svg", + "region": "Europe", + "area": 92090 + }, + { + "name": "Puerto Rico", + "capital": "San Juan", + "languages": [ + "Spanish", + "English" + ], + "population": 3194034, + "flag": "https://flagcdn.com/pr.svg", + "region": "Americas", + "area": 8870 + }, + { + "name": "Qatar", + "capital": "Doha", + "languages": [ + "Arabic" + ], + "population": 2881060, + "flag": "https://flagcdn.com/qa.svg", + "region": "Asia", + "area": 11586 + }, + { + "name": "Republic of Kosovo", + "capital": "Pristina", + "languages": [ + "Albanian", + "Serbian" + ], + "population": 1775378, + "flag": "https://flagcdn.com/xk.svg", + "region": "Europe", + "area": 10908 + }, + { + "name": "Réunion", + "capital": "Saint-Denis", + "languages": [ + "French" + ], + "population": 840974, + "flag": "https://flagcdn.com/re.svg", + "region": "Africa" + }, + { + "name": "Romania", + "capital": "Bucharest", + "languages": [ + "Romanian" + ], + "population": 19286123, + "flag": "https://flagcdn.com/ro.svg", + "region": "Europe", + "area": 238391 + }, + { + "name": "Russian Federation", + "capital": "Moscow", + "languages": [ + "Russian" + ], + "population": 144104080, + "flag": "https://flagcdn.com/ru.svg", + "region": "Europe", + "area": 17124442 + }, + { + "name": "Rwanda", + "capital": "Kigali", + "languages": [ + "Kinyarwanda", + "English", + "French" + ], + "population": 12952209, + "flag": "https://flagcdn.com/rw.svg", + "region": "Africa", + "area": 26338 + }, + { + "name": "Saint Barthélemy", + "capital": "Gustavia", + "languages": [ + "French" + ], + "population": 9417, + "flag": "https://flagcdn.com/bl.svg", + "region": "Americas", + "area": 21 + }, + { + "name": "Saint Helena, Ascension and Tristan da Cunha", + "capital": "Jamestown", + "languages": [ + "English" + ], + "population": 4255, + "flag": "https://flagcdn.com/sh.svg", + "region": "Africa" + }, + { + "name": "Saint Kitts and Nevis", + "capital": "Basseterre", + "languages": [ + "English" + ], + "population": 53192, + "flag": "https://flagcdn.com/kn.svg", + "region": "Americas", + "area": 261 + }, + { + "name": "Saint Lucia", + "capital": "Castries", + "languages": [ + "English" + ], + "population": 183629, + "flag": "https://flagcdn.com/lc.svg", + "region": "Americas", + "area": 616 + }, + { + "name": "Saint Martin (French part)", + "capital": "Marigot", + "languages": [ + "English", + "French", + "Dutch" + ], + "population": 38659, + "flag": "https://flagcdn.com/mf.svg", + "region": "Americas", + "area": 53 + }, + { + "name": "Saint Pierre and Miquelon", + "capital": "Saint-Pierre", + "languages": [ + "French" + ], + "population": 6069, + "flag": "https://flagcdn.com/pm.svg", + "region": "Americas", + "area": 242 + }, + { + "name": "Saint Vincent and the Grenadines", + "capital": "Kingstown", + "languages": [ + "English" + ], + "population": 110947, + "flag": "https://flagcdn.com/vc.svg", + "region": "Americas", + "area": 389 + }, + { + "name": "Samoa", + "capital": "Apia", + "languages": [ + "Samoan", + "English" + ], + "population": 198410, + "flag": "https://flagcdn.com/ws.svg", + "region": "Oceania", + "area": 2842 + }, + { + "name": "San Marino", + "capital": "City of San Marino", + "languages": [ + "Italian" + ], + "population": 33938, + "flag": "https://flagcdn.com/sm.svg", + "region": "Europe", + "area": 61 + }, + { + "name": "Sao Tome and Principe", + "capital": "São Tomé", + "languages": [ + "Portuguese" + ], + "population": 219161, + "flag": "https://flagcdn.com/st.svg", + "region": "Africa", + "area": 964 + }, + { + "name": "Saudi Arabia", + "capital": "Riyadh", + "languages": [ + "Arabic" + ], + "population": 34813867, + "flag": "https://flagcdn.com/sa.svg", + "region": "Asia", + "area": 2149690 + }, + { + "name": "Senegal", + "capital": "Dakar", + "languages": [ + "French" + ], + "population": 16743930, + "flag": "https://flagcdn.com/sn.svg", + "region": "Africa", + "area": 196722 + }, + { + "name": "Serbia", + "capital": "Belgrade", + "languages": [ + "Serbian" + ], + "population": 6908224, + "flag": "https://flagcdn.com/rs.svg", + "region": "Europe", + "area": 88361 + }, + { + "name": "Seychelles", + "capital": "Victoria", + "languages": [ + "French", + "English" + ], + "population": 98462, + "flag": "https://flagcdn.com/sc.svg", + "region": "Africa", + "area": 452 + }, + { + "name": "Sierra Leone", + "capital": "Freetown", + "languages": [ + "English" + ], + "population": 7976985, + "flag": "https://flagcdn.com/sl.svg", + "region": "Africa", + "area": 71740 + }, + { + "name": "Singapore", + "capital": "Singapore", + "languages": [ + "English", + "Malay", + "Tamil", + "Chinese" + ], + "population": 5685807, + "flag": "https://flagcdn.com/sg.svg", + "region": "Asia", + "area": 710 + }, + { + "name": "Sint Maarten (Dutch part)", + "capital": "Philipsburg", + "languages": [ + "Dutch", + "English" + ], + "population": 40812, + "flag": "https://flagcdn.com/sx.svg", + "region": "Americas", + "area": 34 + }, + { + "name": "Slovakia", + "capital": "Bratislava", + "languages": [ + "Slovak" + ], + "population": 5458827, + "flag": "https://flagcdn.com/sk.svg", + "region": "Europe", + "area": 49037 + }, + { + "name": "Slovenia", + "capital": "Ljubljana", + "languages": [ + "Slovene" + ], + "population": 2100126, + "flag": "https://flagcdn.com/si.svg", + "region": "Europe", + "area": 20273 + }, + { + "name": "Solomon Islands", + "capital": "Honiara", + "languages": [ + "English" + ], + "population": 686878, + "flag": "https://flagcdn.com/sb.svg", + "region": "Oceania", + "area": 28896 + }, + { + "name": "Somalia", + "capital": "Mogadishu", + "languages": [ + "Somali", + "Arabic" + ], + "population": 15893219, + "flag": "https://flagcdn.com/so.svg", + "region": "Africa", + "area": 637657 + }, + { + "name": "South Africa", + "capital": "Pretoria", + "languages": [ + "Afrikaans", + "English", + "Southern Ndebele", + "Southern Sotho", + "Swati", + "Tswana", + "Tsonga", + "Venda", + "Xhosa", + "Zulu" + ], + "population": 59308690, + "flag": "https://flagcdn.com/za.svg", + "region": "Africa", + "area": 1221037 + }, + { + "name": "South Georgia and the South Sandwich Islands", + "capital": "King Edward Point", + "languages": [ + "English" + ], + "population": 30, + "flag": "https://flagcdn.com/gs.svg", + "region": "Americas" + }, + { + "name": "Korea (Republic of)", + "capital": "Seoul", + "languages": [ + "Korean" + ], + "population": 51780579, + "flag": "https://flagcdn.com/kr.svg", + "region": "Asia", + "area": 100210 + }, + { + "name": "Spain", + "capital": "Madrid", + "languages": [ + "Spanish" + ], + "population": 47351567, + "flag": "https://flagcdn.com/es.svg", + "region": "Europe", + "area": 505992 + }, + { + "name": "Sri Lanka", + "capital": "Sri Jayawardenepura Kotte", + "languages": [ + "Sinhalese", + "Tamil" + ], + "population": 21919000, + "flag": "https://flagcdn.com/lk.svg", + "region": "Asia", + "area": 65610 + }, + { + "name": "Sudan", + "capital": "Khartoum", + "languages": [ + "Arabic", + "English" + ], + "population": 43849269, + "flag": "https://flagcdn.com/sd.svg", + "region": "Africa", + "area": 1886068 + }, + { + "name": "South Sudan", + "capital": "Juba", + "languages": [ + "English" + ], + "population": 11193729, + "flag": "https://flagcdn.com/ss.svg", + "region": "Africa", + "area": 619745 + }, + { + "name": "Suriname", + "capital": "Paramaribo", + "languages": [ + "Dutch" + ], + "population": 586634, + "flag": "https://flagcdn.com/sr.svg", + "region": "Americas", + "area": 163820 + }, + { + "name": "Svalbard and Jan Mayen", + "capital": "Longyearbyen", + "languages": [ + "Norwegian" + ], + "population": 2562, + "flag": "https://flagcdn.com/sj.svg", + "region": "Europe" + }, + { + "name": "Swaziland", + "capital": "Mbabane", + "languages": [ + "English", + "Swati" + ], + "population": 1160164, + "flag": "https://flagcdn.com/sz.svg", + "region": "Africa", + "area": 17364 + }, + { + "name": "Sweden", + "capital": "Stockholm", + "languages": [ + "Swedish" + ], + "population": 10353442, + "flag": "https://flagcdn.com/se.svg", + "region": "Europe", + "area": 450295 + }, + { + "name": "Switzerland", + "capital": "Bern", + "languages": [ + "German", + "French", + "Italian", + "Romansh" + ], + "population": 8636896, + "flag": "https://flagcdn.com/ch.svg", + "region": "Europe", + "area": 41284 + }, + { + "name": "Syrian Arab Republic", + "capital": "Damascus", + "languages": [ + "Arabic" + ], + "population": 17500657, + "flag": "https://flagcdn.com/sy.svg", + "region": "Asia", + "area": 185180 + }, + { + "name": "Taiwan", + "capital": "Taipei", + "languages": [ + "Chinese" + ], + "population": 23503349, + "flag": "https://flagcdn.com/tw.svg", + "region": "Asia", + "area": 36193 + }, + { + "name": "Tajikistan", + "capital": "Dushanbe", + "languages": [ + "Tajik", + "Russian" + ], + "population": 9537642, + "flag": "https://flagcdn.com/tj.svg", + "region": "Asia", + "area": 143100 + }, + { + "name": "Tanzania, United Republic of", + "capital": "Dodoma", + "languages": [ + "Swahili", + "English" + ], + "population": 59734213, + "flag": "https://flagcdn.com/tz.svg", + "region": "Africa", + "area": 945087 + }, + { + "name": "Thailand", + "capital": "Bangkok", + "languages": [ + "Thai" + ], + "population": 69799978, + "flag": "https://flagcdn.com/th.svg", + "region": "Asia", + "area": 513120 + }, + { + "name": "Timor-Leste", + "capital": "Dili", + "languages": [ + "Portuguese" + ], + "population": 1318442, + "flag": "https://flagcdn.com/tl.svg", + "region": "Asia", + "area": 14874 + }, + { + "name": "Togo", + "capital": "Lomé", + "languages": [ + "French" + ], + "population": 8278737, + "flag": "https://flagcdn.com/tg.svg", + "region": "Africa", + "area": 56785 + }, + { + "name": "Tokelau", + "capital": "Fakaofo", + "languages": [ + "English" + ], + "population": 1411, + "flag": "https://flagcdn.com/tk.svg", + "region": "Oceania", + "area": 12 + }, + { + "name": "Tonga", + "capital": "Nuku'alofa", + "languages": [ + "English", + "Tonga (Tonga Islands)" + ], + "population": 105697, + "flag": "https://flagcdn.com/to.svg", + "region": "Oceania", + "area": 747 + }, + { + "name": "Trinidad and Tobago", + "capital": "Port of Spain", + "languages": [ + "English" + ], + "population": 1399491, + "flag": "https://flagcdn.com/tt.svg", + "region": "Americas", + "area": 5130 + }, + { + "name": "Tunisia", + "capital": "Tunis", + "languages": [ + "Arabic" + ], + "population": 11818618, + "flag": "https://flagcdn.com/tn.svg", + "region": "Africa", + "area": 163610 + }, + { + "name": "Turkey", + "capital": "Ankara", + "languages": [ + "Turkish" + ], + "population": 84339067, + "flag": "https://flagcdn.com/tr.svg", + "region": "Asia", + "area": 783562 + }, + { + "name": "Turkmenistan", + "capital": "Ashgabat", + "languages": [ + "Turkmen", + "Russian" + ], + "population": 6031187, + "flag": "https://flagcdn.com/tm.svg", + "region": "Asia", + "area": 488100 + }, + { + "name": "Turks and Caicos Islands", + "capital": "Cockburn Town", + "languages": [ + "English" + ], + "population": 38718, + "flag": "https://flagcdn.com/tc.svg", + "region": "Americas", + "area": 948 + }, + { + "name": "Tuvalu", + "capital": "Funafuti", + "languages": [ + "English" + ], + "population": 11792, + "flag": "https://flagcdn.com/tv.svg", + "region": "Oceania", + "area": 26 + }, + { + "name": "Uganda", + "capital": "Kampala", + "languages": [ + "English", + "Swahili" + ], + "population": 45741000, + "flag": "https://flagcdn.com/ug.svg", + "region": "Africa", + "area": 241550 + }, + { + "name": "Ukraine", + "capital": "Kyiv", + "languages": [ + "Ukrainian" + ], + "population": 44134693, + "flag": "https://flagcdn.com/ua.svg", + "region": "Europe", + "area": 603700 + }, + { + "name": "United Arab Emirates", + "capital": "Abu Dhabi", + "languages": [ + "Arabic" + ], + "population": 9890400, + "flag": "https://flagcdn.com/ae.svg", + "region": "Asia", + "area": 83600 + }, + { + "name": "United Kingdom of Great Britain and Northern Ireland", + "capital": "London", + "languages": [ + "English" + ], + "population": 67215293, + "flag": "https://flagcdn.com/gb.svg", + "region": "Europe", + "area": 242900 + }, + { + "name": "United States of America", + "capital": "Washington, D.C.", + "languages": [ + "English" + ], + "population": 329484123, + "flag": "https://flagcdn.com/us.svg", + "region": "Americas", + "area": 9629091 + }, + { + "name": "Uruguay", + "capital": "Montevideo", + "languages": [ + "Spanish" + ], + "population": 3473727, + "flag": "https://flagcdn.com/uy.svg", + "region": "Americas", + "area": 181034 + }, + { + "name": "Uzbekistan", + "capital": "Tashkent", + "languages": [ + "Uzbek", + "Russian" + ], + "population": 34232050, + "flag": "https://flagcdn.com/uz.svg", + "region": "Asia", + "area": 447400 + }, + { + "name": "Vanuatu", + "capital": "Port Vila", + "languages": [ + "Bislama", + "English", + "French" + ], + "population": 307150, + "flag": "https://flagcdn.com/vu.svg", + "region": "Oceania", + "area": 12189 + }, + { + "name": "Venezuela (Bolivarian Republic of)", + "capital": "Caracas", + "languages": [ + "Spanish" + ], + "population": 28435943, + "flag": "https://flagcdn.com/ve.svg", + "region": "Americas", + "area": 916445 + }, + { + "name": "Vietnam", + "capital": "Hanoi", + "languages": [ + "Vietnamese" + ], + "population": 97338583, + "flag": "https://flagcdn.com/vn.svg", + "region": "Asia", + "area": 331212 + }, + { + "name": "Wallis and Futuna", + "capital": "Mata-Utu", + "languages": [ + "French" + ], + "population": 11750, + "flag": "https://flagcdn.com/wf.svg", + "region": "Oceania", + "area": 142 + }, + { + "name": "Western Sahara", + "capital": "El Aaiún", + "languages": [ + "Spanish" + ], + "population": 510713, + "flag": "https://flagcdn.com/eh.svg", + "region": "Africa", + "area": 266000 + }, + { + "name": "Yemen", + "capital": "Sana'a", + "languages": [ + "Arabic" + ], + "population": 29825968, + "flag": "https://flagcdn.com/ye.svg", + "region": "Asia", + "area": 527968 + }, + { + "name": "Zambia", + "capital": "Lusaka", + "languages": [ + "English" + ], + "population": 18383956, + "flag": "https://flagcdn.com/zm.svg", + "region": "Africa", + "area": 752618 + }, + { + "name": "Zimbabwe", + "capital": "Harare", + "languages": [ + "English", + "Shona", + "Northern Ndebele" + ], + "population": 14862927, + "flag": "https://flagcdn.com/zw.svg", + "region": "Africa", + "area": 390757 + } +]; + +let nbcountries = document.querySelector("#nbcountries"); +nbcountries.textContent = data.length; + +let searchresults = document.querySelector(".searchresults"); + +function draw(data) +{ + let searchresults = document.querySelector(".searchresults"); + searchresults.innerHTML = ""; + + let card; + let image; + let container; + let element; + let paragraph; + + for(let i = 0; i < data.length; i++) + { + card = document.createElement("div"); + card.className = "card"; + + image = document.createElement("div"); + image.className = "image"; + element = document.createElement("img"); + element.src = data[i].flag; + image.appendChild(element); + card.appendChild(image); + + container = document.createElement("div"); + container.className = "container"; + + element = document.createElement("h4"); + element.className = "countryname"; + element.textContent = data[i].name; + container.appendChild(element); + + element = document.createElement("p"); + element.className = "countrycapital"; + element.textContent = `Capital: ${data[i].capital}`; + container.appendChild(element); + + element = document.createElement("p"); + element.className = "countrylanguages"; + element.textContent = `Languages: `; + for(let j = 0; j < data[i].languages.length; j++) + { + element.textContent += data[i].languages[j]; + if(j0) + { + filterbutton.children[i].removeChild(filterbutton.children[i].children[0]); + filterbutton.children[i].value = ""; + } + } + } +} + +buttonname.addEventListener("click", e=>{ + let element = document.createElement("i"); + let sort = [...viewdata]; + if(e.target.value =="") + { + element.className = "fa fa-long-arrow-down"; + element.style.marginLeft = "20px"; + e.target.appendChild(element); + e.target.value = "down"; + + sort.sort(function(a,b){ + if(a.nameb.name) return 1; + return 0; + }) + draw(sort); + drawStats(viewdata, statkey); + } + + else if(e.target.value =="up") + { + e.target.removeChild(e.target.children[0]); + e.target.value = ""; + sort = [...viewdata]; + draw(sort); + drawStats(viewdata, statkey); + } + + else if(e.target.value =="down") + { + e.target.removeChild(e.target.children[0]); + element.className = "fa fa-long-arrow-up"; + element.style.marginLeft = "20px"; + e.target.appendChild(element); + e.target.value = "up"; + + sort.sort(function(a,b){ + if(a.nameb.name) return -1; + return 0; + }) + draw(sort); + drawStats(viewdata, statkey); + } + normalizeButton(e.target.id); +}) + +buttoncapital.addEventListener("click", e=>{ + let element = document.createElement("i"); + let sort = [...viewdata]; + if(e.target.value =="") + { + element.className = "fa fa-long-arrow-down"; + element.style.marginLeft = "20px"; + e.target.appendChild(element); + e.target.value = "down"; + + sort.sort(function(a,b){ + if(a.capitalb.capital) return 1; + return 0; + }) + draw(sort); + drawStats(viewdata, statkey); + } + + else if(e.target.value =="up") + { + e.target.removeChild(e.target.children[0]); + e.target.value = ""; + sort = [...viewdata]; + draw(sort); + drawStats(viewdata, statkey); + } + + else if(e.target.value =="down") + { + e.target.removeChild(e.target.children[0]); + element.className = "fa fa-long-arrow-up"; + element.style.marginLeft = "20px"; + e.target.appendChild(element); + e.target.value = "up"; + + sort.sort(function(a,b){ + if(a.capitalb.capital) return -1; + return 0; + }) + draw(sort); + drawStats(viewdata, statkey); + } + normalizeButton(e.target.id); +}) + +buttonpopulation.addEventListener("click", e=>{ + let element = document.createElement("i"); + let sort = [...viewdata]; + if(e.target.value =="") + { + element.className = "fa fa-long-arrow-down"; + element.style.marginLeft = "20px"; + e.target.appendChild(element); + e.target.value = "down"; + + sort.sort(function(a,b){ + if(a.populationb.population) return 1; + return 0; + }) + draw(sort); + drawStats(viewdata, statkey); + } + + else if(e.target.value =="up") + { + e.target.removeChild(e.target.children[0]); + e.target.value = ""; + sort = [...viewdata]; + draw(sort); + drawStats(viewdata, statkey); + } + + else if(e.target.value =="down") + { + e.target.removeChild(e.target.children[0]); + element.className = "fa fa-long-arrow-up"; + element.style.marginLeft = "20px"; + e.target.appendChild(element); + e.target.value = "up"; + + sort.sort(function(a,b){ + if(a.populationb.population) return -1; + return 0; + }) + draw(sort); + drawStats(viewdata, statkey); + } + normalizeButton(e.target.id); +}) + +// ----------------------------------------------------------------------------------------------------------------------------------------------------- +function drawStatsWorld(data, key) +{ + let statscontainer = document.querySelector(".stats-container"); + statscontainer.innerHTML = ""; + + let statsline; + let country; + let portioncontainer; + let portion; + let total; + + statsline = document.createElement("div"); + statsline.className = "stats-line"; + country = document.createElement("div"); + country.className = "country"; + portioncontainer = document.createElement("div"); + portioncontainer.className = "portion-container"; + portion = document.createElement("div"); + portion.className = "portion"; + total = document.createElement("div"); + total.className = "total"; + + country.textContent = "World"; + let totalvalue = 0; + if(key=="population") + { + data.forEach(function(value){ + totalvalue += value.population; + }) + } + if(key=="languages") + { + let languages = []; + data.forEach(function(value){ + value.languages.forEach(function(language){ + languages.push(language); + }) + }) + // console.log(languages); + languages = languages.filter(function(value, index, self){ + return self.indexOf(value) == index; + }) + // console.log(languages); + totalvalue = languages.length; + } + total.textContent = totalvalue.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + " (100%)"; + portion.style.width = "100%"; + portioncontainer.appendChild(portion); + + statsline.appendChild(country); + statsline.appendChild(portioncontainer); + statsline.appendChild(total); + statscontainer.appendChild(statsline); +} +function drawStats(data, key) +{ + let statscontainer = document.querySelector(".stats-container"); + let temp = []; + for(let i = 1; i < statscontainer.children.length; i++) + { + temp.push(statscontainer.children[i]); + } + for(let i = 0; i < temp.length; i++) + { + statscontainer.removeChild(temp[i]); + } + + let statsline; + let country; + let portioncontainer; + let portion; + let total; + + statsline = document.createElement("div"); + statsline.className = "stats-line"; + country = document.createElement("div"); + country.className = "country"; + portioncontainer = document.createElement("div"); + portioncontainer.className = "portion-container"; + portion = document.createElement("div"); + portion.className = "portion"; + total = document.createElement("div"); + total.className = "total"; + + let worldtotal = statscontainer.children[0].children[2].textContent.replaceAll(",", ""); + // console.log(worldtotal); + + let pourcentage; + + if(key=="population") + { + data.sort(function(a,b){ + if(a.populationb.population) return -1; + return 0; + }); + + for(let i = 0; i < 10; i++) + { + statsline = document.createElement("div"); + statsline.className = "stats-line"; + country = document.createElement("div"); + country.className = "country"; + portioncontainer = document.createElement("div"); + portioncontainer.className = "portion-container"; + portion = document.createElement("div"); + portion.className = "portion"; + total = document.createElement("div"); + total.className = "total"; + + country.textContent = data[i].name; + pourcentage = (data[i].population*100)/parseInt(worldtotal); + // console.log(pourcentage); + total.textContent = data[i].population.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + ` (${Math.round(pourcentage*100000)/100000}%)`; + portion.style.width = pourcentage+"%"; + portioncontainer.appendChild(portion); + statsline.appendChild(country); + statsline.appendChild(portioncontainer); + statsline.appendChild(total); + statscontainer.appendChild(statsline); + } + // data.forEach(function(value){ + // statsline = document.createElement("div"); + // statsline.className = "stats-line"; + // country = document.createElement("div"); + // country.className = "country"; + // portioncontainer = document.createElement("div"); + // portioncontainer.className = "portion-container"; + // portion = document.createElement("div"); + // portion.className = "portion"; + // total = document.createElement("div"); + // total.className = "total"; + + // country.textContent = value.name; + // pourcentage = (value.population*100)/parseInt(worldtotal); + // console.log(pourcentage); + // total.textContent = value.population.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + ` (${Math.round(pourcentage*100000)/100000}%)`; + // portion.style.width = pourcentage+"%"; + // portioncontainer.appendChild(portion); + // statsline.appendChild(country); + // statsline.appendChild(portioncontainer); + // statsline.appendChild(total); + // statscontainer.appendChild(statsline); + // }) + } + if(key=="languages") + { + let languages = []; + data.forEach(function(value){ + value.languages.forEach(function(language){ + languages.push(language); + }) + }) + // console.log(languages); + + let newlanguages = languages.map(function(value){ + return { language: value, count:0 }; + }) + // console.log(newlanguages); + for(let i = 0; i < newlanguages.length; i++) + { + for(let j = 0; j < newlanguages.length; j++) + { + if(newlanguages[i].language == newlanguages[j].language) + { + newlanguages[i].count ++; + } + } + } + // console.log(newlanguages); + + // let temp = newlanguages.findIndex(function(value){ + // return value.language == "English"; + // }) + // console.log(temp); + + newlanguages = newlanguages.filter(function(value, index, self){ + return index == self.findIndex(function(language){ + return language.language == value.language; + }); + }); + // console.log(newlanguages); + + newlanguages.sort(function(a,b){ + if(a.countb.count) return -1; + return 0; + }); + // console.log(newlanguages); + + for(let i = 0; i < 10; i++) + { + statsline = document.createElement("div"); + statsline.className = "stats-line"; + country = document.createElement("div"); + country.className = "country"; + portioncontainer = document.createElement("div"); + portioncontainer.className = "portion-container"; + portion = document.createElement("div"); + portion.className = "portion"; + total = document.createElement("div"); + total.className = "total"; + + country.textContent = newlanguages[i].language; + pourcentage = (newlanguages[i].count*100)/parseInt(worldtotal); + // console.log(pourcentage); + total.textContent = newlanguages[i].count.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + ` (${Math.round(pourcentage*100000)/100000}%)`; + portion.style.width = pourcentage+"%"; + portioncontainer.appendChild(portion); + statsline.appendChild(country); + statsline.appendChild(portioncontainer); + statsline.appendChild(total); + statscontainer.appendChild(statsline); + } + } + +} + +drawStatsWorld(data, statkey); +drawStats(data, statkey); + +let buttonstatpopulation = document.querySelector(".buttonstatpopulation"); +let buttonstatlanguages = document.querySelector(".buttonstatlanguages"); +buttonstatpopulation.addEventListener("click", e=>{ + statkey = "population"; + drawStatsWorld(viewdata, statkey); + drawStats(viewdata, statkey); +}); +buttonstatlanguages.addEventListener("click", e=>{ + statkey = "languages"; + drawStatsWorld(viewdata, statkey); + drawStats(viewdata, statkey); +}); + +let search = document.querySelector("#search"); +search.addEventListener("keydown", e=>{ + let searchkey = e.target.value+e.key; + if(e.key=="Backspace") + { + searchkey = e.target.value.slice(0, -1); + } + if(e.key=="Enter") + { + searchkey = e.target.value; + } + + viewdata = []; + data.forEach(function(value){ + if(value.name.toLowerCase().includes(searchkey.toLowerCase())) + { + viewdata.push(value); + } + else if(value.capital!=undefined && value.capital.toLowerCase().includes(searchkey.toLowerCase())) + { + viewdata.push(value); + } + else{ + value.languages.forEach(function(language){ + if(language.toLowerCase().includes(searchkey.toLowerCase())) + { + viewdata.push(value); + } + }) + } + }) + + draw(viewdata); + drawStats(viewdata, statkey); +}); + +let copyrightyear = document.querySelector(".copyrightyear"); +copyrightyear.textContent = (new Date()).getFullYear(); \ No newline at end of file