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

Merge 4c7d6a657a into 09f408a1b7

Browse Source
pull/420/merge
Fitsum Helina 7 months ago committed by GitHub
parent 09f408a1b7 4c7d6a657a
commit 55984bcc60
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 673 additions and 0 deletions
Show Stats Download Patch File Download Diff File

77
Exercises/day-1/array-exersise-1.js
Unescape View File

@ -0,0 +1,77 @@
// Exercise: Level 1
const countries = [
'Albania',
'Bolivia',
'Canada',
'Denmark',
'Ethiopia',
'Finland',
'Germany',
'Hungary',
'Ireland',
'Japan',
'Kenya',
]
const webTechs = [
'HTML',
'CSS',
'JavaScript',
'React',
'Redux',
'Node',
'MongoDB',
]
// Declare an empty array;
const emptyArray = []
// Declare an array with more than 5 number of elements
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9]
// Find the length of your array
console.log(numbers.length)
// Get the first item, the middle item and the last item of the array
console.log(numbers[0], numbers[Math.floor(numbers.length / 2)], numbers[numbers.length - 1])
// 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
const mixedDataTypes = [1, 'two', true, { name: 'John' }, [1, 2, 3, 4, 5]]
// Declare an array variable name itCompanies and assign initial values Facebook, Google, Microsoft, Apple, IBM, Oracle and Amazon
const itCompanies = ['Facebook', 'Google', 'Microsoft', 'Apple', 'IBM', 'Oracle', 'Amazon']
// Print the array using console.log()
console.log(itCompanies)
// Print the number of companies in the array
console.log(itCompanies.length)
// Print the first company, middle and last company
console.log(itCompanies[0], itCompanies[Math.floor(itCompanies.length / 2)], itCompanies[itCompanies.length - 1])
// Print out each company
itCompanies.forEach(company => console.log(company))
// Change each company name to uppercase one by one and print them out
itCompanies.forEach(company => console.log(company.toUpperCase()))
// Print the array like as a sentence: Facebook, Google, Microsoft, Apple, IBM,Oracle and Amazon are big IT companies.
console.log(itCompanies.join(', ') + ' 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
const company = 'Google'
if (itCompanies.includes(company)) {
console.log(company +'is found in the array.')
} else {
console.log(company +'is not found in the array.')
}
// Filter out companies which have more than one 'o' without the filter method
const filteredCompanies = itCompanies.filter(company => company.toLowerCase().indexOf('o') === -1)
console.log(filteredCompanies)
// Sort the array using sort() method
console.log(itCompanies.sort())
// Reverse the array using reverse() method
console.log(itCompanies.reverse())
// Slice out the first 3 companies from the array
console.log(itCompanies.slice(0, 3))
// Slice out the last 3 companies from the array
console.log(itCompanies.slice(-3))
// Slice out the middle IT company or companies from the array
console.log(itCompanies.slice(3, 4))
// Remove the first IT company from the array
console.log(itCompanies.shift())
// Remove the middle IT company or companies from the array
console.log(itCompanies.splice(3, 1))
// Remove the last IT company from the array
console.log(itCompanies.pop())
// Remove all IT companies
console.log(itCompanies.splice(0))

28
Exercises/day-1/array-exersise-2.js
Unescape View File

@ -0,0 +1,28 @@
// Exercise: Level 2
// Create a separate countries.js file and store the countries array into this file, create a separate file web_techs.js and store the webTechs array into 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.'
const word = text.replace(/[,.]/gi ,'').split(' ')
console.log(word)
// In the following shopping cart add, remove, edit items
const shoppingCart = ['Milk', 'Coffee', 'Tea', 'Honey']
// 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'
// 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.
// 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.
// Concatenate the following two variables and store it in a fullStack variable.
const frontEnd = ['HTML', 'CSS', 'JS', 'React', 'Redux']
const backEnd = ['Node', 'Express', 'MongoDB']
console.log(fullStack)
["HTML", "CSS", "JS", "React", "Redux", "Node", "Express", "MongoDB"]

34
Exercises/day-1/function-exercise-1.js
Unescape View File

@ -0,0 +1,34 @@
// Create a function called getPersonInfo. The getPersonInfo function takes an object parameter.
// The structure of the object and the output of the function is given below. Try to use both a regular way and destructuring
// and compare the cleanness of the code. If you want to compare your solution with my solution, check this link.
const person = {
firstName: 'Asabeneh',
lastName: 'Yetayeh',
age: 250,
country: 'Finland',
job: 'Instructor and Developer',
skills: [
'HTML',
'CSS',
'JavaScript',
'React',
'Redux',
'Node',
'MongoDB',
'Python',
'D3.js',
],
languages: ['Amharic', 'English', 'Suomi(Finnish)'],
}
const getPersonInfo = (person) => {
const {firstName, lastName, age, country, job, skills, languages} = person;
const {skill1,skill2,skill3,skill4,skill5,skill6,skill7,skill8,skill9} = skills;
console.log(`${firstName} ${lastName} lives in ${country}. He is ${age} years old. He is an ${job}. He teaches ${skill1}, ${skill2}, ${skill3}, ${skill4}, ${skill5}, ${skill6}, ${skill7}, ${skill8}, ${skill9}. He speaks ${languages[0]}, ${languages[1]} and a little bit of ${languages[2]}`);
}
getPersonInfo(person)
/*
Asabeneh Yetayeh lives in Finland. He is 250 years old. He is an Instructor and Developer. He teaches HTML, CSS, JavaScript, React, Redux, Node, MongoDB, Python and D3.js. He speaks Amharic, English and a little bit of Suomi(Finnish)
*/

56
Exercises/day-1/function-exersice-1.js
Unescape View File

@ -0,0 +1,56 @@
// Exercises: Level 1
// Declare a function fullName and it takes firstName, lastName as a parameter and it returns your full - name.
const fullname = (firstname, lastname) => {
return `${firstname} ${lastname}`
}
// Declare a function addNumbers and it takes two two parameters and it returns sum.
const sum = (a, b) =>{
return a + b
}
// Area of a circle is calculated as follows: area = π x r x r. Write a function which calculates _areaOfCircle
const areaOfCircle = (r,pi=3.14) => {
return pi * r * r
}
// Temperature in oC can be converted to oF using this formula: oF = (oC x 9/5) + 32. Write a function which convert oC to oF convertCelciusToFahrenheit.
const temperature = (oC) => {
return (oC * 9/5) + 32
}
// Body mass index(BMI) is calculated as follows: bmi = weight in Kg / (height x height) in m2. Write a function which calculates bmi. BMI is used to broadly define different weight groups in adults 20 years old or older.Check if a person is underweight, normal, overweight or obese based the information given below.
const BMI = (W,H) => {
let bmi= W / (H * H)
if (bmi>18.4 || bmi<25){
return 'Normal weight'
}
else if (bmi>25){
return 'Overweight'
}
else{
return 'Underweight'
}
}
// The same groups apply to both men and women.
// Underweight: BMI is less than 18.5
// Normal weight: BMI is 18.5 to 24.9
// Overweight: BMI is 25 to 29.9
// Obese: BMI is 30 or more
// Write a function called checkSeason, it takes a month parameter and returns the season:Autumn, Winter, Spring or Summer.
const checkSeason = (month) => {
if (month >= 3 && month <= 5){
return 'Spring'
}
else if (month >= 6 && month <= 8){
return 'Summer'
}
else if (month >= 9 && month <= 11){
return 'Autumn'
}
else{
return 'Winter'
}
}

24
Exercises/day-1/object-exercise-1.js
Unescape View File

@ -0,0 +1,24 @@
// Exercises: Level 1
// Create an empty object called dog
const dog = {}
// Print the the dog object on the console
console.log(dog)
// Add name, legs, color, age and bark properties for the dog object. The bark property is a method which return woof woof
dog.name = 'Buddy'
dog.legs = 4
dog.color = 'Golden'
dog.age = 3
// Get name, legs, color, age and bark value from the dog object
console.log(dog.name) // Output: Buddy
console.log(dog.legs) // Output: 4
console.log(dog.color) // Output: Golden
console.log(dog.age) // Output: 3
console.log(dog.bark()) // Output: Woof woof
// Set new properties the dog object: breed, getDogInfo
dog.breed = 'Labrador'
dog.getDogInfo = function() {
return `Name: ${this.name}, Age: ${this.age}, Color: ${this.color}, Breed: ${this.breed}`
}
// Get the dogInfo from the dog object
console.log(dog.getDogInfo()) // Output: Name: Buddy, Age: 3, Color: Golden, Breed: Labrador

123
Exercises/day-1/object-exercise-2.js
Unescape View File

@ -0,0 +1,123 @@
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
}
}
// Find the person who has many skills in the users object.
let maxskill =0
let mostskilledperson=null
for (const user in users){
const skillcount = users[user].skills.length
if (skillcount > maxskill){
maxskill = skillcount
mostskilledperson = user
}
}
console.log(`The person with the most skills is ${mostskilledperson} with ${maxskill} skills.`)
// Count logged in users,count users having greater than equal to 50 points from the following object.
let looged = 0
let person = 0
for (const user in users ){
if (users[user].points >= 50 ){
person++
}
if (users[user].isLoggedIn){
looged++
}
}
console.log(`Number of logged in users are ${looged}. ${person} users are greater than 50`)
// Find people who are MERN stack developer from the users object
const mern = ["MongoDB", "Express", "React", "Node"];
let dev = 0;
for (const user in users) {
if (mern.every(skill => users[user].skills.includes(skill))) {
dev++;
}
}
console.log(`Number of MERN stack developers are ${dev}.`);
// Set your name in the users object without modifying the original users object
const copyperson = Object.assign({}, users)
copyperson.Fitsum = {
name: "Fitsum",
skills: ["HTML", "CSS", "JavaScript", "React"],
points: 95,
isLoggedIn: true,
};
// console.log(copyperson.Fitsum);
const key = Object.keys(copyperson)
console.log(`Key ${key}`)
// Get all the values of users object
const val = Object.values(copyperson)
console.log(`Value ${val}`)
// Use the countries object to print a country name, capital, populations and languages.
const country = {
name: "Japan",
capital: "Tokyo",
population: 126476461,
languages: ["Japanese"],
}
const getinfo = function (copyperson ) {
console.log(`Country Name: ${copyperson.name}`)
console.log(`Capital: ${copyperson.capital}`)
console.log(`Population: ${copyperson.population}`)
console.log(`Languages: ${copyperson.languages.join(", ")}`)
}
getinfo(country)

287
Exercises/day-1/object-exercise-3.js
Unescape View File

@ -0,0 +1,287 @@
// // Exercises: Level 3
// // 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.
// const personAccount = {
// firstName: "fitsum",
// lastName: "helina",
// incomes: [
// { description: "Salary", amount: 50000 },
// { description: "Bonus", amount: 10000 },
// ],
// expenses: [
// { description: "Rent", amount: 10000 },
// { description: "Groceries", amount: 5000 },
// ],
// totalIncome() {
// return this.incomes.reduce((total, income) => total + income.amount, 0);
// },
// totalExpense() {
// return this.expenses.reduce((total, expense) => total + expense.amount, 0);
// },
// accountInfo() {
// return `Account Information: ${this.firstName} ${this.lastName}`;
// },
// addIncome(description, amount) {
// this.incomes.push({ description, amount });
// },
// };
// // **** Questions:2, 3 and 4 are based on the following two arrays:users and products ()
const users = [
{
_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: "ab12ex", 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.
// const newuser = {
// _id: "eedfcf",
// username: "John Doe",
// email: "johndoe@johndoe.com",
// password: "123456",
// createdAt: "08/01/2020 10:15 AM",
// isLoggedIn: null,
// };
// const signUp = (newuser) => {
// // //solution1
// const userExists = users.find((user) => user._id === newuser._id);
// if (userExists) {
// console.log("User already exists!");
// return;
// } else {
// users.push(newuser);
// console.log("User added successfully!");
// }
// // solution 2
// for (const user of users) {
// if (user._id === newuser._id) {
// console.log("User already exists!");
// return;
// } else {
// users.push(newuser);
// console.log("User added successfully!");
// break;
// }
// }
// };
// signUp(newuser);
// // b. Create a function called signIn which allows user to sign in to the application
// const signIn = (newuser) => {
// const exists = users.find((user) => user._id === newuser._id);
// if (exists) {
// exists.isLoggedIn = true;
// console.log("user signIn success");
// } else {
// exists.isLoggedIn = false;
// console.log("account does not exist");
// }
// };
// The products array has three elements and each of them has six properties.
// const product = [
// {
// _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: "aegfal", rate: 5 }, { userId: "zwf8md", rate: 3.5 },],
// likes: ["fg12cy"],
// },
// ];
// a. Create a function called rateProduct which rates the product
// const rateproduct = (productId, userid, rate) => {
// const product = product.find((item) => productId === item._id);
// if (product) {
// const exixst = product.ratings.find((rating) => userid === rating.userId);
// if (exixst) {
// console.log("user already rated this product");
// } else {
// product.rating.push({ userid, rate });
// }
// } else {
// console.log("product not found");
// }
// };
// const rateProduct = (productId, userId, rate) => {
// const product = products.find((product) => product._id === productId );
// if (product) {
// const user = users.find((users) => users._id === userId);
// if (user) {
// const existingRating = product.ratings.find(
// (rating) => rating.userId === userId
// );
// if(!existingRating){
// product.ratings.push({ userId: users._id, rate });
// console.log("Product rating updated successfully");}
// else{
// console.log("User already rated this product");
// }
// }
// else{
// console.log("User not found");
// }
// }
// else{
// console.log("Product not found");
// }
// }
// rateProduct("aegfal", "ab12ex", 2);
// // b. Create a function called averageRating which calculate the average rating of a product
// const averageRating = (productid, products) => {
// const product = products.find((item) => productid === item._id);
// if (product) {
// if (product.ratings.length === 0) {
// console.log(`No ratings yet for ${product.name}`);
// return;
// }
// const sum = product.ratings.reduce((sum, rating) => sum + rating.rate, 0);
// const average = sum / product.ratings.length;
// console.log(
// `average rating for ${product.name} is ${average} and it had ${product.ratings.length} rates `
// );
// } else {
// console.log("product not found");
// }
// };
// // 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.
// const likeProduct = (productId, userId, products) => {
// const product = products.find((item) => productId === item._id);
// if (product) {
// const exixst = product.likes.find((like) => userId === like);
// if (exixst) {
// product.likes = product.likes.filter((like) => like !== userId);
// console.log(`${userId} has removed like from ${product.name}`);
// } else {
// product.likes.push(userId);
// console.log(`${userId} has liked ${product.name}`);
// }
// } else {
// console.log("product not found");
// }
// };
// const userratedproduct = (productId, userId, products) => {
// const rated = products.filter((item) => item.rating.userId===userId)
// if (rated != 0) {
// const product = products.filter((item) => productId === item._id);
// if (product) {
// console.log(`${userId} has rated ${product.name}`);
// } else {
// console.log("product not found");
// }
// }
// }
const userRatedProducts = (userId, products) => {
const ratedProducts = products.filter((item) =>
item.ratings.find((rating) => rating.userId === userId)
);
return ratedProducts.map((item) => item.name);
};
const ratedByUser = userRatedProducts("ab12ex", products);
console.log(ratedByUser);

44
Exercises/test/test.js
Unescape View File

@ -0,0 +1,44 @@
// const arr = ['Finland', 'Estonia', 'Sweden', 'Norway']
// const arr2 = []
// arr.forEach((country) => arr2.push(country.toUpperCase()))
// console.log(arr2)
// const arr = [1,2,3,4,5]
// let sum = 0
// const add = (num,i,arr) =>{
// sum+=num
// }
// arr.forEach(add)
// console.log(sum)
// const hey = () => {
// console.log('hey')
// }
// function hello() {
// console.log('hello')
// }
// hello()
// hey()
// const countries = ['Finland', 'Estonia', 'Sweden', 'Norway']
// const newarr = []
// countries.forEach(x => {
// if (x.includes('land')) {
// newarr.push(x)
// }
// });
// console.log(countries.map((country) => country.toUpperCase()))
// console.log(countries.filter((country) => !country.includes('land')))
// console.log(newarr)
// const numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
// const sum = numbers.reduce((x, y) => x + y)
// console.log(sum) // 55
// const numbers = [1, 2, 3, 4, 5]
// const value = numbers.reduce((acc, cur) => acc * cur ,0)
// console.log(value) // 0
Write Preview
Loading…
Cancel
Save