msb-public
/
30-Days-Of-JavaScript
mirror of https://github.com/Asabeneh/30-Days-Of-JavaScript
1
0
Code Issues Projects Releases Wiki Activity

publishing my work on this challenge

Browse Source
pull/667/head
Faliana 2 years ago
parent ffd79e248d
commit 90f2a4d739
72 changed files with 10296 additions and 117 deletions

25
01_Day_Introduction/01_day_starter/datatypes.js
Unescape View File

@ -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");

39
01_Day_Introduction/01_day_starter/index.html
Unescape View File

@ -1,19 +1,34 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Day 1</title>
<script src="main.js"></script>
<script src="variable.js"></script>
<script src="datatypes.js"></script>
</head>
<body>
<h1>Day 1: Exercises</h1>
<ul>
<li>Write a single line comment which says, comments can make code readable</li>
<head>
<title>30DaysOfJavaScript</title>
</head>
<li>Write another single comment which says, Welcome to 30DaysOfJavaScript</li>
<body>
<h1>30DaysOfJavaScript:03 Day</h1>
<h2>Introduction</h2>
<button onclick="alert('Welcome to 30DaysOfJavaScript!');">Click Me</button>
<script src="./helloworld.js"></script>
<script src="./introduction.js"></script>
<script src="./variable.js"></script>
<script src="./main.js"></script>
<li>Write a multiline comment which says, comments can make code readable, easy to reuse and informative</li>
</body>
<li>Create a variable.js file and declare variables and assign string, boolean, undefined and null data types</li>
<li>Create datatypes.js file and use the JavaScript typeof operator to check different data types. Check the data type of each variable</li>
<li>Declare four variables without assigning values</li>
<li>Declare four variables with assigned values</li>
<li>Declare variables to store your first name, last name, marital status, country and age in multiple lines</li>
<li>Declare variables to store your first name, last name, marital status, country and age in a single line</li>
<li>Declare two variables myAge and yourAge and assign them initial values and log to the browser console.</li>
</ul>
</body>
</html>

5
01_Day_Introduction/01_day_starter/main.js
Unescape View File

@ -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)
console.log('Hello, World!');

28
01_Day_Introduction/01_day_starter/variable.js
Unescape View File

@ -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);

109
02_Day_Data_types/02_day_starter/index.html
Unescape View File

@ -1,17 +1,108 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Day 2</title>
<script src="main.js"></script>
</head>
<body>
<h1>Day 2: Exercises</h1>
<h2>Exercise: Level 1</h2>
<ul>
<li>Declare a variable named challenge and assign it to an initial value '30 Days Of JavaScript'.</li>
<head>
<title>30DaysOfJavaScript</title>
</head>
<li>Print the string on the browser console using console.log()</li>
<body>
<h1>30DaysOfJavaScript:02 Day</h1>
<h2>Data types</h2>
<li>Print the length of the string on the browser console using console.log()</li>
<!-- import your scripts here -->
<script src="./main.js"></script>
<li>Change all the string characters to capital letters using toUpperCase() method</li>
</body>
<li>Change all the string characters to lowercase letters using toLowerCase() method</li>
<li>Cut (slice) out the first word of the string using substr() or substring() method</li>
<li>Slice out the phrase Days Of JavaScript from 30 Days Of JavaScript.</li>
<li>Check if the string contains a word Script using includes() method</li>
<li>Split the string into an array using split() method</li>
<li>Split the string 30 Days Of JavaScript at the space using split() method</li>
<li>'Facebook, Google, Microsoft, Apple, IBM, Oracle, Amazon' split the string at the comma and change it to an array.
Change 30 Days Of JavaScript to 30 Days Of Python using replace() method.</li>
<li>What is character at index 15 in '30 Days Of JavaScript' string? Use charAt() method.</li>
<li>What is the character code of J in '30 Days Of JavaScript' string using charCodeAt()</li>
<li>Use indexOf to determine the position of the first occurrence of a in 30 Days Of JavaScript</li>
<li>Use lastIndexOf to determine the position of the last occurrence of a in 30 Days Of JavaScript.</li>
<li>Use indexOf to find the position of the first occurrence of the word because in the following sentence:'You cannot end a sentence with because because because is a conjunction'</li>
<li>Use lastIndexOf to find the position of the last occurrence of the word because in the following sentence:'You cannot end a sentence with because because because is a conjunction'</li>
<li>Use search to find the position of the first occurrence of the word because in the following sentence:'You cannot end a sentence with because because because is a conjunction'</li>
<li>Use trim() to remove any trailing whitespace at the beginning and the end of a string.E.g ' 30 Days Of JavaScript '.</li>
<li>Use startsWith() method with the string 30 Days Of JavaScript and make the result true</li>
<li>Use endsWith() method with the string 30 Days Of JavaScript and make the result true</li>
<li>Use match() method to find all the a’s in 30 Days Of JavaScript</li>
<li>Use concat() and merge '30 Days of' and 'JavaScript' to a single string, '30 Days Of JavaScript'</li>
<li>Use repeat() method to print 30 Days Of JavaScript 2 times</li>
</ul>
<h2>Exercise: Level 2</h2>
<ul>
<li>Using console.log() print out the following statement:
<i>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.</i>
</li>
<li>
Using console.log() print out the following quote by Mother Teresa:
<i>"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."</i>
</li>
<li>Check if typeof '10' is exactly equal to 10. If not make it exactly equal.</li>
<li>Check if parseFloat('9.8') is equal to 10 if not make it exactly equal with 10.</li>
<li>Check if 'on' is found in both python and jargon</li>
<li>I hope this course is not full of jargon. Check if jargon is in the sentence.</li>
<li>Generate a random number between 0 and 100 inclusively.</li>
<li>Generate a random number between 50 and 100 inclusively.</li>
<li>Generate a random number between 0 and 255 inclusively.</li>
<li>Access the 'JavaScript' string characters using a random number.</li>
<li>Use console.log() and escape characters to print the following pattern. </br>
1 1 1 1 1 </br>
2 1 2 4 8 </br>
3 1 3 9 27 </br>
4 1 4 16 64 </br>
5 1 5 25 125
</li>
<li>Use substr to slice out the phrase because because because from the following sentence:'You cannot end a sentence with because because because is a conjunction'</li>
</ul>
<h2>Exercises: Level 3</h2>
<ul>
<li>'Love is the best thing in this world. Some found their love and some are still looking for their love.' Count the number of word love in this sentence.</li>
<li>Use match() to count the number of all because in the following sentence:'You cannot end a sentence with because because because is a conjunction'</li>
<li>Clean the following text and find the most frequent word (hint, use replace and regular expressions).
</br><i> const 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'</i>
</li>
<li>
Calculate the total annual income of the person by extracting the numbers from the following text. 'He earns 5000 euro from salary per month, 10000 euro annual bonus, 15000 euro online courses per month.'
</li>
</ul>
</body>
</html>

64
02_Day_Data_types/02_day_starter/main.js
Unescape View File

@ -1 +1,63 @@
// this is your main.js script
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));

133
03_Day_Booleans_operators_date/03_day_starter/index.html
Unescape View File

@ -3,15 +3,140 @@
<head>
<title>30DaysOfJavaScript: 03 Day</title>
<link rel="stylesheet" href="mvp.css">
<!-- import your scripts here -->
<script src="./scripts/main.js"></script>
</head>
<body>
<h1>30DaysOfJavaScript:03 Day</h1>
<h2>Booleans, undefined, null, date object</h2>
<main>
<h1>30DaysOfJavaScript:03 Day</h1>
<h2>Booleans, undefined, null, date object</h2>
<hr>
<h2>Exercises: Level 1</h2>
<p>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.</p>
<!-- import your scripts here -->
<script src="./scripts/main.js"></script>
<p>2. Check if type of '10' is equal to 10</p>
<p>3. Check if parseInt('9.8') is equal to 10</p>
<p>4. Boolean value is either true or false.</p>
<ul>
<li>i. Write three JavaScript statement which provide truthy value.</li>
<li>ii. Write three JavaScript statement which provide falsy value.</li>
</ul>
<p>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()</p>
<ul>
<li>i. 4 > 3</li>
<li>ii. 4 >= 3</li>
<li>iii. 4 < 3</li>
<li>iv. 4 <= 3</li>
<li>v. 4 == 4</li>
<li>vi. 4 === 4</li>
<li>vii. 4 != 4</li>
<li>viii. 4 !== 4</li>
<li>ix. 4 != '4'</li>
<li>x. 4 == '4'</li>
<li>xi. 4 === '4'</li>
</ul>
<p>6. Find the length of python and jargon and make a falsy comparison statement.</p>
<ul>
<li>4 > 3 && 10 < 12</li>
<li>4 > 3 && 10 > 12</li>
<li>4 > 3 || 10 < 12</li>
<li>4 > 3 || 10 > 12</li>
<li>!(4 > 3)</li>
<li>!(4 < 3)</li>
<li>!(false)</li>
<li>!(4 > 3 && 10 < 12)</li>
<li>!(4 > 3 && 10 > 12)</li>
<li>!(4 === '4')</li>
<li>There is no 'on' in both dragon and python</li>
</ul>
<p>7. Use the Date object to do the following activities</p>
<ul>
<li>What is the year today?</li>
<li>What is the month today as a number?</li>
<li>What is the date today?</li>
<li>What is the day today as a number?</li>
<li>What is the hours now?</li>
<li>What is the minutes now?</li>
<li>Find out the numbers of seconds elapsed from January 1, 1970 to now.</li>
</ul>
<hr>
<h2>Exercises: Level 2</h2>
<p>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). </p>
<i>
Enter base: 20 </br>
Enter height: 10</br>
The area of the triangle is 100</br>
</i>
<p>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)</p>
<i>
Enter side a: 5</br>
Enter side b: 4</br>
Enter side c: 3</br>
The perimeter of the triangle is 12</br>
</i>
<p>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))</p>
<p>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.</p>
<p>5. Calculate the slope, x-intercept and y-intercept of y = 2x -2</p>
<p>6. Slope is m = (y2-y1)/(x2-x1). Find the slope between point (2, 2) and point(6,10)</p>
<p>7. Compare the slope of above two questions.</p>
<p>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.</p>
<p>9. Writ a script that prompt a user to enter hours and rate per hour. Calculate pay of the person?</p>
<p>10. If the length of your name is greater than 7 say, your name is long else say your name is short.</p>
<p>11. Compare your first name length and your family name length and you should get this output.</p>
<i>
let firstName = 'Asabeneh'</br>
let lastName = 'Yetayeh'</br>
Your first name, Asabeneh is longer than your family name, Yetayeh</br>
</i>
<p>12. Declare two variables myAge and yourAge and assign them initial values and myAge and yourAge.</p>
<i>
let myAge = 250</br>
let yourAge = 25</br>
I am 225 years older than you.</br>
</i>
<p>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.</p>
<i>
Enter birth year: 1995</br>
You are 25. You are old enough to drive</br></br>
Enter birth year: 2005</br>
You are 15. You will be allowed to drive after 3 years.</br>
</i>
<p>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</p>
<i>
Enter number of years you live: 100</br>
You lived 3153600000 seconds.</br>
</i>
<p>15. Create a human readable time format using the Date time object</p>
<ul>
<li>YYYY-MM-DD HH:mm</li>
<li>DD-MM-YYYY HH:mm</li>
<li>DD/MM/YYYY HH:mm</li>
</ul>
<hr>
<h2>Exercises: Level 3</h2>
<p>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 )</p>
<ul>
<li>i. YYY-MM-DD HH:mm eg. 20120-01-02 07:05</li>
</ul>
</main>
</body>
</html>

486
03_Day_Booleans_operators_date/03_day_starter/mvp.css
Unescape View File

@ -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;
}

253
03_Day_Booleans_operators_date/03_day_starter/scripts/main.js
Unescape View File

@ -1 +1,252 @@
// this is your main.js script
// 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)

253
04_Day_Conditionals/04_day_starter/scripts/main.js
Unescape View File

@ -1,3 +1,254 @@
// this is your main.js script
alert('Open the browser console whenever you work on JavaScript')
// 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");
}

206
05_Day_Arrays/05_day_starter/scripts/main.js
Unescape View File

@ -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')
// 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)

14
06_Day_Loops/06_day_starter/data/countries.js
Unescape View File

@ -192,4 +192,16 @@ const countries = [
'Yemen',
'Zambia',
'Zimbabwe'
]
];
const webTechs = [
'HTML',
'CSS',
'JavaScript',
'React',
'Redux',
'Node',
'MongoDB'
];
const mernStack = ['MongoDB', 'Express', 'React', 'Node'];

1
06_Day_Loops/06_day_starter/index.html
Unescape View File

@ -3,6 +3,7 @@
<head>
<title>30DaysOfJavaScript:06 Day </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>

388
06_Day_Loops/06_day_starter/scripts/main.js
Unescape View File

@ -1,2 +1,386 @@
console.log(countries)
alert('Open the console and check if the countries has been loaded')
// 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<i; j++)
{
if(i%j==0)
{
nbdiviseur++;
}
}
if(nbdiviseur==0)
{
console.log(i);
}
}
// Use for loop to iterate from 0 to 100 and print the sum of all numbers.
var sumnombre = 0;
for(i = 0; i <= 100; i++)
{
sumnombre += i;
}
console.log("The sum of all numbers from 0 to 100 is "+sumnombre+".");
// Use for loop to iterate from 0 to 100 and print the sum of all evens and the sum of all odds.
var sumnombreeven = 0;
var sumnombreodd = 0;
for(i = 0; i <= 100; i++)
{
if(i%2==0)
{
sumnombreeven += i;
}
else
{
sumnombreodd += i;
}
sumnombre += i;
}
console.log("The sum of all evens from 0 to 100 is "+sumnombreeven+". And the sum of all odds from 0 to 100 is "+sumnombreodd+".")
console.log([sumnombreeven, sumnombreodd]);
// Develop a small script which generate array of 5 random numbers
var tab = [];
for(i = 0; i <5; i++)
{
tab.push(Math.floor(Math.random()*69));
}
console.log(tab);
// Develop a small script which generate array of 5 random numbers and the numbers must be unique
// aiko fa kamo zah
// Develop a small script which generate a six characters random id:
var characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
var randomid = "";
for(i = 0; i <6; i++)
{
randomid+=characters[Math.floor(Math.random()*characters.length)];
}
console.log(randomid);
// Develop a small script which generate any number of characters random id:
randomid = "";
for(i = 10; i < Math.floor(Math.random()*255+10); i++)
{
randomid+=characters[Math.floor(Math.random()*characters.length)];
}
console.log(randomid);
// Write a script which generates a random hexadecimal number.
// pfffff
// Write a script which generates a random rgb color number.
$("body").append(`<div style="height:100px; width:100px;background-color: rgb(${Math.floor(Math.random()*255)}, ${Math.floor(Math.random()*255)}, ${Math.floor(Math.random()*255)})"></div>`);
// 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; j<fullStack[i].length; j++)
{
console.log(fullStack[i][j]+"\n");
}
}
// Arrays are mutable. Create a copy of array which does not modify the original. Sort the copied array and store in a variable sortedCountries
var sortedCountries = [];
for(i = 0; i < countries.length; i++)
{
sortedCountries.push(countries[i]);
}
sortedCountries.sort();
console.log(sortedCountries);
// efa natao lay ambony reo

11
07_Day_Functions/07_day_starter/scripts/main.js
Unescape View File

@ -1,2 +1,9 @@
console.log(countries)
alert('Open the console and check if the countries has been loaded')
// console.log(countries)
// alert('Open the console and check if the countries has been loaded')
// 1) Declare a function fullName and it print out your full name.
function fullName(name){
console.log(name);
}

373
08_Day_Objects/08_day_starter/scripts/main.js
Unescape View File

@ -1,2 +1,373 @@
console.log(countries)
alert('Open the console and check if the countries has been loaded')
// alert('Open the console and check if the countries has been loaded')
// Exercises: Level 1
// 1) Create an empty object called dog
var dog = {};
// 2) Print the the dog object on the console
console.log(dog);
// 3) Add name, legs, color, age and bark properties for the dog object. The bark property is a method which return woof woof
dog.name = "inu";
dog.legs = 4;
dog.color = "blue";
dog.age = 5;
dog.bark = function(){
return "woof woof";
};
// 4) Get name, legs, color, age and bark value from the dog object
console.log(dog.name);
console.log(dog.legs);
console.log(dog.color);
console.log(dog.age);
console.log(dog.bark());
// 5) Set new properties the dog object: breed, getDogInfo
dog.breed = "shiba inu";
dog.getDogInfo = function(){};
// Exercises: Level 2
const users = {
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
}
};
// 1) Find the person who has many skills in the users object.
var persons = Object.entries(users);
var count = 0;
var person = "";
for(var i = 0; i < persons.length; i++)
{
if(persons[i][1].skills.length>count)
{
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]);

260
09_Day_Higher_order_functions/09_day_starter/scripts/main.js
Unescape View File

@ -1,2 +1,260 @@
console.log(countries)
alert('Open the console and check if the countries has been loaded')
// 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.name<b.name){
return -1
}
if(a.name>b.name) return 1
return 0;
});
console.log(countries);
countries.sort(function(a,b){
if(a.capital<b.capital){
return -1
}
if(a.capital>b.capital) return 1
return 0;
});
console.log(countries);
countries.sort(function(a,b){
if(a.population<b.population){
return -1
}
if(a.population>b.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.count<b.count) return 1
if(a.count>b.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.population<b.population) return 1
if(a.population>b.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))

94
10_Day_Sets_and_Maps/10_day_starter/scripts/main.js
Unescape View File

@ -1,2 +1,94 @@
console.log(countries)
alert('Open the console and check if the countries has been loaded')
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 }
// ]

185
11_Day_Destructuring_and_spreading/11_day_starter/scripts/main.js
Unescape View File

@ -1,2 +1,185 @@
console.log(countries)
alert('Open the console and check if the countries has been loaded')
// 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);

108
12_Day_Regular_expressions/12_day_starter/scripts/main.js
Unescape View File

@ -1,2 +1,108 @@
console.log(countries)
alert('Open the console and check if the countries has been loaded')
// 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.count<b.count) return 1
if(a.count>b.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.count<b.count) return 1
if(a.count>b.count) return -1
return 0
})
return retour.slice(0,3);
}
var farany = cleanText(sentence);
console.log(threeMostFrequentWords(farany))

59
13_Day_Console_object_methods/13_day_starter/scripts/main.js
Unescape View File

@ -1,2 +1,59 @@
console.log(countries)
alert('Open the console and check if the countries has been loaded')
// 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')

193
14_Day_Error_handling/14_day_error_handling.md
Unescape View File

@ -0,0 +1,193 @@
<div align="center">
<h1> 30 Days Of JavaScript: Error handling</h1>
<a class="header-badge" target="_blank" href="https://www.linkedin.com/in/asabeneh/">
<img src="https://img.shields.io/badge/style--5eba00.svg?label=LinkedIn&logo=linkedin&style=social">
</a>
<a class="header-badge" target="_blank" href="https://twitter.com/Asabeneh">
<img alt="Twitter Follow" src="https://img.shields.io/twitter/follow/asabeneh?style=social">
</a>
<sub>Author:
<a href="https://www.linkedin.com/in/asabeneh/" target="_blank">Asabeneh Yetayeh</a><br>
<small> January, 2020</small>
</sub>
</div>
[<< 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 <anonymous>: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 <anonymous>: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 <anonymous>: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 <anonymous>: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)

21
14_Day_Error_handling/14_day_starter/scripts/main.js
Unescape View File

@ -1,2 +1,21 @@
console.log(countries)
alert('Open the console and check if the countries has been loaded')
// 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)
}

114
15_Day_Classes/15_day_starter/scripts/main.js
Unescape View File

@ -102,4 +102,116 @@ console.log(s1.getPersonInfo())
console.log(s2.saySomething())
console.log(s2.getFullName())
console.log(s2.getPersonInfo())
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)]

153
16_Day_JSON/16_day_starter/scripts/main.js
Unescape View File

@ -1,2 +1,153 @@
console.log(countries)
alert('Open the console and check if the countries has been loaded')
// 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)

24
17_Day_Web_storages/17_day_starter/scripts/main.js
Unescape View File

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

52
18_Day_Promises/18_day_starter/scripts/main.js
Unescape View File

@ -1,2 +1,52 @@
console.log(countries)
alert('Open the console and check if the countries has been loaded')
// 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<b.area) return 1
if(a.area<b.area) return -1
return 0;
});
console.log("ten largest: ", tenlargest.slice(0,10))
})
.catch(error => console.error(error))
// Read the countries api and count total number of languages in the world used as officials.

2
19_Day_Closures/19_day_starter/index.html
Unescape View File

@ -9,7 +9,7 @@
<h1>30DaysOfJavaScript:19 Day</h1>
<h2>Writing Clean Code</h2>
<script src="./data/countries_data.js"></script>
<script src="./scripts/main.js"></script>
</body>

46
19_Day_Closures/19_day_starter/scripts/main.js
Unescape View File

@ -1,2 +1,46 @@
console.log(countries)
alert('Open the console and check if the countries has been loaded')
// 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

27
21_Day_DOM/21_day_starter/exersice.html
Unescape View File

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>30DaysOfJavaScript:21 Day </title>
</head>
<body>
<div class="wrapper">
<h1>Asabeneh Yetayeh challenges in <span id="year">2020</span></h1>
<h2>30DaysOfJavaScript Challenge</h2>
<p id="date">January 22, 2023 19:40:34</p>
<ul>
<li>30DaysOfPython Challenge Done</li>
<li>30DaysOfJavaScript Challenge Ongoing</li>
<li>30DaysOfReact Challenge Coming</li>
<li>30DaysOfFullStack Challenge Coming</li>
<li>30DaysOfDataAnalysis Challenge Coming</li>
<li>30DaysOfReactNative Challenge Coming</li>
<li>30DaysOfMachineLearning Challenge Coming</li>
</ul>
</div>
<script src="./scripts/exersise.js"></script>
</body>
</html>

4
21_Day_DOM/21_day_starter/index.html
Unescape View File

@ -19,6 +19,10 @@
<li>30DaysOfMachineLearning Challenge Coming</li>
</ul>
</div>
<p id="p1">AAAAAAAAAAAAAAAAAA</p>
<p id="p2">BBBBBBBBBBBB</p>
<p id="p3">CCCCCCCCCCCCC</p>
<p id="p4"></p>
<script src="./scripts/main.js"></script>
</body>

99
21_Day_DOM/21_day_starter/scripts/exersise.js
Unescape View File

@ -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)";
}

57
21_Day_DOM/21_day_starter/scripts/main.js
Unescape View File

@ -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

23
22_Day_Manipulating_DOM_object/22_day_starters/index.html
Unescape View File

@ -0,0 +1,23 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="index.js"></script>
</head>
<body>
<script>
// creating multiple elements and appending to parent element
let title
for (let i = 0; i < 3; i++) {
title = document.createElement('h1')
title.className = 'title'
title.style.fontSize = '24px'
title.textContent = i
document.body.appendChild(title)
}
</script>
</body>
</html>

0
22_Day_Manipulating_DOM_object/22_day_starters/index.js
Unescape View File

1
22_Day_Manipulating_DOM_object/22_day_starters/project_1/index.html
Unescape View File

@ -9,6 +9,7 @@
<h1>Number Generator</h1>
<h2>30DaysOfJavaScript:DOM Day 2</h2>
<h3>Author: Asabeneh Yetayeh</h3>
<div class="wrapper">
</div>

65
22_Day_Manipulating_DOM_object/22_day_starters/project_1/scripts/main.js
Unescape View File

@ -1,2 +1,63 @@
console.log(countries)
alert('Open the console and check if the countries has been loaded')
// 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])
}

2
22_Day_Manipulating_DOM_object/22_day_starters/project_2/index.html
Unescape View File

@ -22,7 +22,7 @@
</div>
<script src="./data/countries.js"></script>
<script src="./js/script.js"></script>
<script src="./scripts/main.js"></script>
</body>

27
22_Day_Manipulating_DOM_object/22_day_starters/project_2/scripts/main.js
Unescape View File

@ -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)

4
22_Day_Manipulating_DOM_object/22_day_starters/project_3/index.html
Unescape View File

@ -6,11 +6,13 @@
</head>
<body>
<div class="wrapper">
</div>
<script src="./data/challenges_info.js"></script>
<script src="./js/script.js"></script>
<script src="./scripts/main.js"></script>
</body>

188
22_Day_Manipulating_DOM_object/22_day_starters/project_3/scripts/main.js
Unescape View File

@ -1 +1,187 @@
console.log(asabenehChallenges2020)
// 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"
}
}
}
}

35
23_Day_Event_listeners/23_day_starters/project_1/index.html
Unescape View File

@ -1,22 +1,35 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>30DaysOfJavaScript:23 Day: Number Generator </title>
</head>
<head>
<title>30DaysOfJavaScript:23 Day: Number Generator </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Number Generator</h1>
<h2>30DaysOfJavaScript:DOM Day 2</h2>
<h3>Author: Asabeneh Yetayeh</h3>
<div class="wrapper">
<body>
<h1>Number Generator</h1>
<h2>30DaysOfJavaScript:DOM Day 2</h2>
<h3>Author: Asabeneh Yetayeh</h3>
</div>
<div class="wrapper">
<p></p>
<div class="numbergenerator">
<input type="text" name="number" placeholder="Generate more number">
<button>Generate numbers</button>
</div>
<div class="generatednumber">
</div>
</div>
<script src="./scripts/main.js"></script>
</body>
<script src="./scripts/main.js"></script>
</body>
</html>

137
23_Day_Event_listeners/23_day_starters/project_1/scripts/main.js
Unescape View File

@ -1,2 +1,135 @@
console.log(countries)
alert('Open the console and check if the countries has been loaded')
// 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]);
}
}
});

54
23_Day_Event_listeners/23_day_starters/project_1/style.css
Unescape View File

@ -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;
}

6
23_Day_Event_listeners/23_day_starters/project_2/index.html
Unescape View File

@ -3,10 +3,14 @@
<head>
<title>30DaysOfJavaScript:23 Day: Keyboard Key </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="project">
<div class="keyinput">You pressed the key <span class="keyname"></span></div>
<div class="keycode"></div>
</div>
<script src="./scripts/main.js"></script>

12
23_Day_Event_listeners/23_day_starters/project_2/scripts/main.js
Unescape View File

@ -1,2 +1,10 @@
console.log(countries)
alert('Open the console and check if the countries has been loaded')
// 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;
})

33
23_Day_Event_listeners/23_day_starters/project_2/style.css
Unescape View File

@ -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;
}

57
23_Day_Event_listeners/index.html
Unescape View File

@ -0,0 +1,57 @@
<!DOCTYPE html>
<html>
<head>
<title>Document Object Model</title>
</head>
<body>
<button>Click Me</button>
<!-- <script>
const button = document.querySelector('button')
button.addEventListener('click', e => {
console.log('e gives the event listener object:', e)
console.log('e.target gives the selected element: ', e.target)
console.log(
'e.target.textContent gives content of selected element: ',
e.target.textContent
)
})
</script> -->
<script>
const button = document.querySelector('button')
button.addEventListener('dblclick', e => {
console.log('e gives the event listener object:', e)
console.log('e.target gives the selected element: ', e.target)
console.log(
'e.target.textContent gives content of selected element: ',
e.target.textContent
)
})
</script>
<h1>Giving feedback using blur event</h1>
<input type="text" id="mass" placeholder="say something" />
<p></p>
<script>
const input = document.querySelector('input')
const p = document.querySelector('p')
input.addEventListener('blur', (e) => {
p.textContent = 'Field is required'
p.style.color = 'red'
})
</script>
<h1>Key events: Press any key</h1>
<script>
document.body.addEventListener('keypress', e => {
alert(e.keyCode)
})
</script>
</body>
</html>

BIN
24_Day_Project_solar_system/24_day_starter/design/dom_min_project_solar_system_day_4.1.mp4
View File

Binary file not shown.

10
24_Day_Project_solar_system/24_day_starter/index.html
Unescape View File

@ -4,6 +4,7 @@
<head>
<title>Solar System: Document Object Model:30 Days Of JavaScript</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
@ -22,7 +23,14 @@
<div class="flex-item image">
<img src='./images/earth.png' class="planet-image" />
</div>
<div class="flex-item description"></div>
<div class="flex-item description">
<h2>The weigth of object on: <span class="planetname">EARTH</span></h2>
<div class="weight">900 N</div>
</div>
<div class="flex-item error">
</div>
</div>

104
24_Day_Project_solar_system/24_day_starter/scripts/main.js
Unescape View File

@ -1,2 +1,102 @@
console.log(countries)
alert('Open the console and check if the countries has been loaded')
// 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";
}
}
})

84
24_Day_Project_solar_system/24_day_starter/style.css
Unescape View File

@ -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;
}

88
25_Day_World_countries_data_visualization_1/25_day_starter/css/style.css
Unescape View File

@ -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{
}

15
25_Day_World_countries_data_visualization_1/25_day_starter/index.html
Unescape View File

@ -13,7 +13,7 @@
<body>
<header id="countries">
<h2>World Countries Data</h2>
<p class="subtitle"></p>
<p class="subtitle">Currently, we have <span class="numberofcountries"></span> countries</p>
<p class="feedback"></p>
</header>
<main>
@ -23,14 +23,23 @@
<button class="population">Population</button>
<button class="languages">Languages</button>
</div>
<h4 class="graph-title"></h4>
<h4 class="graph-title">Top 10 of most spoken languages in the world</h4>
<div class="graphs">
<div class="graph-wrapper" id="stat"></div>
<div class="graph-wrapper" id="stat">
<div class="grid">
<!-- <div class="pays card">English</div>
<div class="portion card">
<div class="baton"></div>
</div>
<div class="valeur card">91</div> -->
</div>
</div>
</div>
</div>
</main>
<script src="./data/countries_data.js"></script>
<script src="./data/countries_data_old.js"></script>
<script src="./js/main.js"></script>
</body>

146
25_Day_World_countries_data_visualization_1/25_day_starter/js/main.js
Unescape View File

@ -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.population<b.population) return 1
if(a.population>b.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.count<b.count) return 1
if(a.count>b.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);
}
})

6
26_Day_World_countries_data_visualization_2/26_day_starter/css/all.css
View File

File diff suppressed because one or more lines are too long

95
26_Day_World_countries_data_visualization_2/26_day_starter/css/style.css
Unescape View File

@ -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;
}

BIN
26_Day_World_countries_data_visualization_2/26_day_starter/images/globe-2.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.3 MiB

After

Width:  |  Height:  |  Size: 6.3 MiB

29
26_Day_World_countries_data_visualization_2/26_day_starter/index.html
Unescape View File

@ -3,14 +3,37 @@
<head>
<title>30DaysOfJavaScript:11 Day </title>
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.2.1/css/all.css">
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<h1>30DaysOfJavaScript:11 Day</h1>
<h2>Destructuring and Spread</h2>
<div class="header">
<h1>WORLD COUNTRIES LIST</h1>
<h4>Total Number of countries : <span class="numberofcountries">193</span></h4>
<h5>Countries containing <span class="searchkey">f</span> are <span class="searchresult">7</span></h5>
<div class="button-group">
<button id="startingword">STARTING WORD</button>
<button id="anyword">SEARCH WITH ANY WORD</button>
<button id="filter"><i class="fa-solid fa-arrow-down-a-z"></i></button>
</div>
<input type="text" class="searchbar" placeholder="Search country..."><span style="color: white; margin: 20px; font-size: 20px;"><i class="fa fa-search"></i></span>
</div>
<main>
<div class="countries">
<!-- <div class="card">
AFGHANISTAN
</div> -->
</div>
</main>
<script src="./data/countries.js"></script>
<script src="./scripts/main.js"></script>
<script src="./js/main.js"></script>
</body>

191
26_Day_World_countries_data_visualization_2/26_day_starter/js/main.js
Unescape View File

@ -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";
}

108
28_Day_Mini_project_leaderboard/28_day_starter/css/style.css
Unescape View File

@ -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;
}

48
28_Day_Mini_project_leaderboard/28_day_starter/index.html
Unescape View File

@ -2,15 +2,55 @@
<html lang="en">
<head>
<title>30DaysOfJavaScript:11 Day </title>
<title>30DaysOfJavaScript: 28 Day </title>
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.2.1/css/all.css">
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<h1>30DaysOfJavaScript:11 Day</h1>
<h2>Destructuring and Spread</h2>
<main>
<div class="container">
<h1>30 Days of JavaScript Challenge Leaderboard</h1>
<div class="leaderboard">
<div class="form-add-player">
<input type="text" id="inputname">
<input type="text" id="inputsurname">
<input type="text" id="inputcountry">
<input type="text" id="inputscore">
<button id="addsubmit">Add Player</button>
</div>
<p id="errormessage">error message</p>
<div class="content">
</div>
<!-- <div class="board">
<input type="hidden" name="id" value="1">
<div class="upname">
<div class="player">
<p class="name">Martha Yohanes</p>
<p class="time">JAN 30, 2020 01:09</p>
</div>
</div>
<div class="country">Finland</div>
<div class="score">85</div>
<div class="options">
<button class="delete"><i class="fa fa-trash"></i></button>
<button class="plus">+5</button>
<button class="minus">-5</button>
</div>
</div> -->
</div>
</div>
</main>
<script src="./data/countries_data.js"></script>
<script src="./scripts/main.js"></script>
<script src="./js/moment.min.js"></script>
<script src="./js/main.js"></script>
</body>

217
28_Day_Mini_project_leaderboard/28_day_starter/js/main.js
Unescape View File

@ -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.score<b.score) return 1
else if(a.score>b.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;
})

2
28_Day_Mini_project_leaderboard/28_day_starter/js/moment.min.js vendored
View File

File diff suppressed because one or more lines are too long

26
29_Day_Mini_project_animating_characters/29_day_starters/project_1/css/style.css
Unescape View File

@ -0,0 +1,26 @@
body{
font-family: Montserrat;
}
.container{
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items:center;
font-size: 145px;
}
.animation {
animation: fadeInAnimation ease 5s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
text-transform: uppercase;
width: 80%;
}
@keyframes fadeInAnimation {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

11
29_Day_Mini_project_animating_characters/29_day_starters/project_1/index.html
Unescape View File

@ -5,6 +5,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./css/style.css">
<link
href="https://fonts.googleapis.com/css?family=Aldrich|Lato:300,400,700|Montserrat:300,400,500|Nunito:300,400,600|Oswald|Raleway+Dots|Raleway:300,400|Roboto:300,400,500&display=swap"
@ -15,11 +16,15 @@
</head>
<body>
<div>
<div class="container">
<div class="animation">
30 Days of JavaScript Challenge 2020 Asabeneh Yetayeh
</div>
</div>
<script src="./scripts/main.js"></script>
<script src="./js/main.js"></script>
</body>

20
29_Day_Mini_project_animating_characters/29_day_starters/project_1/js/main.js
Unescape View File

@ -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);

810
30_Day_Mini_project_final/30_day_starters/project_1/css/Montserrat.css
Unescape View File

@ -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;
}

333
30_Day_Mini_project_final/30_day_starters/project_1/css/style.css
Unescape View File

@ -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%;
}
}

BIN
30_Day_Mini_project_final/30_day_starters/project_1/img/img_avatar.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.0 KiB

171
30_Day_Mini_project_final/30_day_starters/project_1/index.html
Unescape View File

@ -1,16 +1,171 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<title>30DaysOfJavaScript:30 </title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="./css/Montserrat.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="./css/style.css">
<title>30 Days Of JavaScript: Final Projects</title>
</head>
<body>
<header>
<div id="title">
<h1>World Countries Data</h1>
<p>Currently we have <span id="nbcountries">250</span> countries</p>
</div>
<div id="searchbar">
<input type="text" name="search" id="search" placeholder="Search countries by name, city and languages...">
<div class="filter-button">
<button id="buttonname">Name</button>
<button id="buttoncapital">Capital</button>
<button id="buttonpopulation">Population</button>
<button id="buttonsignal"><i class="fa fa-signal"></i></button>
</div>
</div>
</header>
<main>
<div class="searchresults">
<div class="card">
<div class="image">
<img src="https://flagcdn.com/mg.svg" alt="Avatar">
</div>
<div class="container">
<h4 class="countryname">Madagascar</h4>
<p class="countrycapital">Capital: <span class="capital">Antananarivo</span></p>
<p class="countrylanguages">Languagues: <span class="languages">French, Malagasy</span></p>
<p class="countrypopulation">Population: <span class="population">276,910,19</span></p>
</div>
</div>
<div class="card">
<div class="image">
<img src="https://flagcdn.com/mg.svg" alt="Avatar">
</div>
<div class="container">
<h4 class="countryname">Madagascar</h4>
<p class="countrycapital">Capital: <span class="capital">Antananarivo</span></p>
<p class="countrylanguages">Languagues: <span class="languages">French, Malagasy</span></p>
<p class="countrypopulation">Population: <span class="population">276,910,19</span></p>
</div>
</div>
<div class="card">
<div class="image">
<img src="https://flagcdn.com/mg.svg" alt="Avatar">
</div>
<div class="container">
<h4 class="countryname">Madagascar</h4>
<p class="countrycapital">Capital: <span class="capital">Antananarivo</span></p>
<p class="countrylanguages">Languagues: <span class="languages">French, Malagasy</span></p>
<p class="countrypopulation">Population: <span class="population">276,910,19</span></p>
</div>
</div>
<div class="card">
<div class="image">
<img src="https://flagcdn.com/mg.svg" alt="Avatar">
</div>
<div class="container">
<h4 class="countryname">Madagascar</h4>
<p class="countrycapital">Capital: <span class="capital">Antananarivo</span></p>
<p class="countrylanguages">Languagues: <span class="languages">French, Malagasy</span></p>
<p class="countrypopulation">Population: <span class="population">276,910,19</span></p>
</div>
</div>
<div class="card">
<div class="image">
<img src="https://flagcdn.com/mg.svg" alt="Avatar">
</div>
<div class="container">
<h4 class="countryname">Madagascar</h4>
<p class="countrycapital">Capital: <span class="capital">Antananarivo</span></p>
<p class="countrylanguages">Languagues: <span class="languages">French, Malagasy</span></p>
<p class="countrypopulation">Population: <span class="population">276,910,19</span></p>
</div>
</div>
<div class="card">
<div class="image">
<img src="https://flagcdn.com/mg.svg" alt="Avatar">
</div>
<div class="container">
<h4 class="countryname">Madagascar</h4>
<p class="countrycapital">Capital: <span class="capital">Antananarivo</span></p>
<p class="countrylanguages">Languagues: <span class="languages">French, Malagasy</span></p>
<p class="countrypopulation">Population: <span class="population">276,910,19</span></p>
</div>
</div>
<div class="card">
<div class="image">
<img src="https://flagcdn.com/mg.svg" alt="Avatar">
</div>
<div class="container">
<h4 class="countryname">Madagascar</h4>
<p class="countrycapital">Capital: <span class="capital">Antananarivo</span></p>
<p class="countrylanguages">Languagues: <span class="languages">French, Malagasy</span></p>
<p class="countrypopulation">Population: <span class="population">276,910,19</span></p>
</div>
</div>
<div class="card">
<div class="image">
<img src="https://flagcdn.com/mg.svg" alt="Avatar">
</div>
<div class="container">
<h4 class="countryname">Madagascar</h4>
<p class="countrycapital">Capital: <span class="capital">Antananarivo</span></p>
<p class="countrylanguages">Languagues: <span class="languages">French, Malagasy</span></p>
<p class="countrypopulation">Population: <span class="population">276,910,19</span></p>
</div>
</div>
<div class="card">
<div class="image">
<img src="https://flagcdn.com/mg.svg" alt="Avatar">
</div>
<div class="container">
<h4 class="countryname">Madagascar</h4>
<p class="countrycapital">Capital: <span class="capital">Antananarivo</span></p>
<p class="countrylanguages">Languagues: <span class="languages">French, Malagasy</span></p>
<p class="countrypopulation">Population: <span class="population">276,910,19</span></p>
</div>
</div>
<div class="card">
<div class="image">
<img src="https://flagcdn.com/mg.svg" alt="Avatar">
</div>
<div class="container">
<h4 class="countryname">Madagascar</h4>
<p class="countrycapital">Capital: <span class="capital">Antananarivo</span></p>
<p class="countrylanguages">Languagues: <span class="languages">French, Malagasy</span></p>
<p class="countrypopulation">Population: <span class="population">276,910,19</span></p>
</div>
</div>
</div>
<div class="stats">
<div class="stats-header">
<div class="stats-button">
<button class="buttonstatpopulation">Population</button>
<button class="buttonstatlanguages">Languages</button>
</div>
<p>World population</p>
</div>
<div class="stats-chart">
<div class="stats-container">
<div class="stats-line">
<div class="country">World</div>
<div class="portion-container">
<div class="portion"></div>
</div>
<div class="total">7,693,165,599</div>
</div>
</div>
</div>
</div>
</main>
<footer>
<div class="copyright">
<p>&copy;Copyright <span class="copyrightyear"></span> | <span class="copyrightname">Faliana Ranai</span></p>
</div>
</footer>
<script src="./data/countries_data.js"></script>
<script src="./scripts/main.js"></script>
<script src="./js/main.js"></script>
</body>
</html>

3369
30_Day_Mini_project_final/30_day_starters/project_1/js/main.js
View File

File diff suppressed because it is too large Load Diff
Write Preview
Loading…
Cancel
Save