Merge a14e11c928 into 8b41cd49c3
Helder Cambuta
3 years ago
committed by
GitHub
commit
91afe66324
@ -0,0 +1,93 @@
|
|||||||
|
// 1 - Declare an empty array
|
||||||
|
let arr = [];
|
||||||
|
|
||||||
|
// 2 - Declare an array with more than 5 numbers of elements
|
||||||
|
arr = ['HTML', 'CSS', 'JS', 'VueJs', 'React', 'TailwindCSS', 'Styled-components'];
|
||||||
|
|
||||||
|
// 3 - Find the length of your array
|
||||||
|
const arrLength = arr.length;
|
||||||
|
|
||||||
|
// 4 - Get the first item, the middle item and the last item of the array
|
||||||
|
let middle = Math.floor(arr.length / 2);
|
||||||
|
let last = arr.length - 1;
|
||||||
|
|
||||||
|
// 5 - 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 = [
|
||||||
|
'Nangazaki44',
|
||||||
|
7590,
|
||||||
|
{ skills: ['HTML', 'CSS', 'JS', 'VueJs', 'React', 'TailwindCSS', 'Styled-components'] },
|
||||||
|
{ contry: 'Angola', city: 'Luanda' },
|
||||||
|
true,
|
||||||
|
'Day 01 of 30-Days-Of-React'
|
||||||
|
]
|
||||||
|
|
||||||
|
// 6 - 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']
|
||||||
|
|
||||||
|
// 7 - Print the array using console.log()
|
||||||
|
console.log(itCompanies)
|
||||||
|
|
||||||
|
// 8 - Print the number of companies in the array
|
||||||
|
console.log('The number of companies is', itCompanies.length)
|
||||||
|
|
||||||
|
// 9 - Print the first company, middle and last company
|
||||||
|
middle = Math.floor(itCompanies.length / 2);
|
||||||
|
last = itCompanies.length - 1;
|
||||||
|
|
||||||
|
console.log('The first company is', itCompanies[0])
|
||||||
|
console.log('The middle company is', itCompanies[middle])
|
||||||
|
console.log('The last company is', itCompanies[last])
|
||||||
|
|
||||||
|
// 10 - Print out each company
|
||||||
|
itCompanies.map((company) => console.log(company))
|
||||||
|
|
||||||
|
// 11 - Change each company name to uppercase one by one and print them out
|
||||||
|
itCompanies.map((company) => console.log(company.toUpperCase()))
|
||||||
|
|
||||||
|
// 12 - Print the array like as a sentence: Facebook, Google, Microsoft, Apple, IBM,Oracle and Amazon are big IT companies.
|
||||||
|
const words = itCompanies.toString(', ')
|
||||||
|
console.log(words)
|
||||||
|
|
||||||
|
// 13 - Check if a certain company exists in the itCompanies array. If it exist return the company else return a company is not found
|
||||||
|
let check = itCompanies.indexOf('NCR')
|
||||||
|
if (check != -1) {
|
||||||
|
console.log(itCompanies[check])
|
||||||
|
} else {
|
||||||
|
console.log('Company not found!')
|
||||||
|
}
|
||||||
|
|
||||||
|
// 14 - Filter out companies which have more than one 'o'
|
||||||
|
itCompanies.filter((company) => {
|
||||||
|
return company.includes('oo')
|
||||||
|
? console.log(company)
|
||||||
|
: ''
|
||||||
|
})
|
||||||
|
|
||||||
|
// 15 - Sort the array using sort() method
|
||||||
|
itCompanies.sort()
|
||||||
|
|
||||||
|
// 16 - Reverse the array using reverse() method
|
||||||
|
itCompanies.reverse()
|
||||||
|
|
||||||
|
// 17 - Slice out the first 3 companies from the array
|
||||||
|
itCompanies.slice(0, 3)
|
||||||
|
|
||||||
|
// 18 - Slice out the last 3 companies from the array
|
||||||
|
console.log(itCompanies.slice(middle + 1, last + 1))
|
||||||
|
|
||||||
|
// 19 - Slice out the middle IT company or companies from the array
|
||||||
|
itCompanies.slice(middle, middle + 1)
|
||||||
|
|
||||||
|
// 20 - Remove the first IT company from the array
|
||||||
|
itCompanies.splice(0)
|
||||||
|
|
||||||
|
// 21 - Remove the middle IT company or companies from the array
|
||||||
|
itCompanies.splice(middle, 1)
|
||||||
|
|
||||||
|
// 22 - Remove the last IT company from the array
|
||||||
|
itCompanies.pop(last)
|
||||||
|
|
||||||
|
// 23 - Remove all IT companies
|
||||||
|
itCompanies.splice()
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
module.exports = countries = [
|
||||||
|
'Albania',
|
||||||
|
'Bolivia',
|
||||||
|
'Canada',
|
||||||
|
'Denmark',
|
||||||
|
'Ethiopia',
|
||||||
|
'Finland',
|
||||||
|
'Germany',
|
||||||
|
'Hungary',
|
||||||
|
'Ireland',
|
||||||
|
'Japan',
|
||||||
|
'Kenya',
|
||||||
|
]
|
||||||
@ -0,0 +1,49 @@
|
|||||||
|
const countries = require('./countries')
|
||||||
|
const webTechs = require("./web_techs")
|
||||||
|
|
||||||
|
console.log(countries)
|
||||||
|
console.log(webTechs)
|
||||||
|
|
||||||
|
|
||||||
|
let text = 'I love teaching and empowering people. I teach HTML, CSS, JS, React, Python.'
|
||||||
|
let words = text.replace('/[,]+/g', ' ').split(' ')
|
||||||
|
|
||||||
|
console.log(words)
|
||||||
|
console.log(words.length)
|
||||||
|
|
||||||
|
|
||||||
|
const shoppingCart = ['Milk', 'Coffee', 'Tea', 'Honey']
|
||||||
|
|
||||||
|
shoppingCart.includes('Meat') ? '' : shoppingCart.push('Meat')
|
||||||
|
shoppingCart.includes('Sugar') ? '' : shoppingCart.push('Sugar')
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
let alergic = true
|
||||||
|
if (alergic) {
|
||||||
|
let index = shoppingCart.indexOf('Honey')
|
||||||
|
shoppingCart.splice(index, 1)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
if (countries.includes('Ethiopia')) {
|
||||||
|
let index = countries.indexOf('Ethiopia')
|
||||||
|
console.log(countries[index].toUpperCase())
|
||||||
|
} else {
|
||||||
|
countries.push('Ethiopia')
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
if (webTechs.includes('Sass')) {
|
||||||
|
console.log('Sass is a CSS preprocess')
|
||||||
|
} else {
|
||||||
|
webTechs.push('Sass')
|
||||||
|
console.log(webTechs)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
const frontEnd = ['HTML', 'CSS', 'JS', 'React', 'Redux']
|
||||||
|
const backEnd = ['Node', 'Express', 'MongoDB']
|
||||||
|
|
||||||
|
const fullStack = [...frontEnd, ...backEnd]
|
||||||
|
console.log(fullStack)
|
||||||
@ -0,0 +1,9 @@
|
|||||||
|
module.exports = webTechs = [
|
||||||
|
'HTML',
|
||||||
|
'CSS',
|
||||||
|
'JavaScript',
|
||||||
|
'React',
|
||||||
|
'Redux',
|
||||||
|
'Node',
|
||||||
|
'MongoDB',
|
||||||
|
]
|
||||||
@ -0,0 +1,195 @@
|
|||||||
|
module.exports = countries = [
|
||||||
|
'Afghanistan',
|
||||||
|
'Albania',
|
||||||
|
'Algeria',
|
||||||
|
'Andorra',
|
||||||
|
'Angola',
|
||||||
|
'Antigua and Barbuda',
|
||||||
|
'Argentina',
|
||||||
|
'Armenia',
|
||||||
|
'Australia',
|
||||||
|
'Austria',
|
||||||
|
'Azerbaijan',
|
||||||
|
'Bahamas',
|
||||||
|
'Bahrain',
|
||||||
|
'Bangladesh',
|
||||||
|
'Barbados',
|
||||||
|
'Belarus',
|
||||||
|
'Belgium',
|
||||||
|
'Belize',
|
||||||
|
'Benin',
|
||||||
|
'Bhutan',
|
||||||
|
'Bolivia',
|
||||||
|
'Bosnia and Herzegovina',
|
||||||
|
'Botswana',
|
||||||
|
'Brazil',
|
||||||
|
'Brunei',
|
||||||
|
'Bulgaria',
|
||||||
|
'Burkina Faso',
|
||||||
|
'Burundi',
|
||||||
|
'Cambodia',
|
||||||
|
'Cameroon',
|
||||||
|
'Canada',
|
||||||
|
'Cape Verde',
|
||||||
|
'Central African Republic',
|
||||||
|
'Chad',
|
||||||
|
'Chile',
|
||||||
|
'China',
|
||||||
|
'Colombi',
|
||||||
|
'Comoros',
|
||||||
|
'Congo (Brazzaville)',
|
||||||
|
'Congo',
|
||||||
|
'Costa Rica',
|
||||||
|
"Cote d'Ivoire",
|
||||||
|
'Croatia',
|
||||||
|
'Cuba',
|
||||||
|
'Cyprus',
|
||||||
|
'Czech Republic',
|
||||||
|
'Denmark',
|
||||||
|
'Djibouti',
|
||||||
|
'Dominica',
|
||||||
|
'Dominican Republic',
|
||||||
|
'East Timor (Timor Timur)',
|
||||||
|
'Ecuador',
|
||||||
|
'Egypt',
|
||||||
|
'El Salvador',
|
||||||
|
'Equatorial Guinea',
|
||||||
|
'Eritrea',
|
||||||
|
'Estonia',
|
||||||
|
'Ethiopia',
|
||||||
|
'Fiji',
|
||||||
|
'Finland',
|
||||||
|
'France',
|
||||||
|
'Gabon',
|
||||||
|
'Gambia, The',
|
||||||
|
'Georgia',
|
||||||
|
'Germany',
|
||||||
|
'Ghana',
|
||||||
|
'Greece',
|
||||||
|
'Grenada',
|
||||||
|
'Guatemala',
|
||||||
|
'Guinea',
|
||||||
|
'Guinea-Bissau',
|
||||||
|
'Guyana',
|
||||||
|
'Haiti',
|
||||||
|
'Honduras',
|
||||||
|
'Hungary',
|
||||||
|
'Iceland',
|
||||||
|
'India',
|
||||||
|
'Indonesia',
|
||||||
|
'Iran',
|
||||||
|
'Iraq',
|
||||||
|
'Ireland',
|
||||||
|
'Israel',
|
||||||
|
'Italy',
|
||||||
|
'Jamaica',
|
||||||
|
'Japan',
|
||||||
|
'Jordan',
|
||||||
|
'Kazakhstan',
|
||||||
|
'Kenya',
|
||||||
|
'Kiribati',
|
||||||
|
'Korea, North',
|
||||||
|
'Korea, South',
|
||||||
|
'Kuwait',
|
||||||
|
'Kyrgyzstan',
|
||||||
|
'Laos',
|
||||||
|
'Latvia',
|
||||||
|
'Lebanon',
|
||||||
|
'Lesotho',
|
||||||
|
'Liberia',
|
||||||
|
'Libya',
|
||||||
|
'Liechtenstein',
|
||||||
|
'Lithuania',
|
||||||
|
'Luxembourg',
|
||||||
|
'Macedonia',
|
||||||
|
'Madagascar',
|
||||||
|
'Malawi',
|
||||||
|
'Malaysia',
|
||||||
|
'Maldives',
|
||||||
|
'Mali',
|
||||||
|
'Malta',
|
||||||
|
'Marshall Islands',
|
||||||
|
'Mauritania',
|
||||||
|
'Mauritius',
|
||||||
|
'Mexico',
|
||||||
|
'Micronesia',
|
||||||
|
'Moldova',
|
||||||
|
'Monaco',
|
||||||
|
'Mongolia',
|
||||||
|
'Morocco',
|
||||||
|
'Mozambique',
|
||||||
|
'Myanmar',
|
||||||
|
'Namibia',
|
||||||
|
'Nauru',
|
||||||
|
'Nepal',
|
||||||
|
'Netherlands',
|
||||||
|
'New Zealand',
|
||||||
|
'Nicaragua',
|
||||||
|
'Niger',
|
||||||
|
'Nigeria',
|
||||||
|
'Norway',
|
||||||
|
'Oman',
|
||||||
|
'Pakistan',
|
||||||
|
'Palau',
|
||||||
|
'Panama',
|
||||||
|
'Papua New Guinea',
|
||||||
|
'Paraguay',
|
||||||
|
'Peru',
|
||||||
|
'Philippines',
|
||||||
|
'Poland',
|
||||||
|
'Portugal',
|
||||||
|
'Qatar',
|
||||||
|
'Romania',
|
||||||
|
'Russia',
|
||||||
|
'Rwanda',
|
||||||
|
'Saint Kitts and Nevis',
|
||||||
|
'Saint Lucia',
|
||||||
|
'Saint Vincent',
|
||||||
|
'Samoa',
|
||||||
|
'San Marino',
|
||||||
|
'Sao Tome and Principe',
|
||||||
|
'Saudi Arabia',
|
||||||
|
'Senegal',
|
||||||
|
'Serbia and Montenegro',
|
||||||
|
'Seychelles',
|
||||||
|
'Sierra Leone',
|
||||||
|
'Singapore',
|
||||||
|
'Slovakia',
|
||||||
|
'Slovenia',
|
||||||
|
'Solomon Islands',
|
||||||
|
'Somalia',
|
||||||
|
'South Africa',
|
||||||
|
'Spain',
|
||||||
|
'Sri Lanka',
|
||||||
|
'Sudan',
|
||||||
|
'Suriname',
|
||||||
|
'Swaziland',
|
||||||
|
'Sweden',
|
||||||
|
'Switzerland',
|
||||||
|
'Syria',
|
||||||
|
'Taiwan',
|
||||||
|
'Tajikistan',
|
||||||
|
'Tanzania',
|
||||||
|
'Thailand',
|
||||||
|
'Togo',
|
||||||
|
'Tonga',
|
||||||
|
'Trinidad and Tobago',
|
||||||
|
'Tunisia',
|
||||||
|
'Turkey',
|
||||||
|
'Turkmenistan',
|
||||||
|
'Tuvalu',
|
||||||
|
'Uganda',
|
||||||
|
'Ukraine',
|
||||||
|
'United Arab Emirates',
|
||||||
|
'United Kingdom',
|
||||||
|
'United States',
|
||||||
|
'Uruguay',
|
||||||
|
'Uzbekistan',
|
||||||
|
'Vanuatu',
|
||||||
|
'Vatican City',
|
||||||
|
'Venezuela',
|
||||||
|
'Vietnam',
|
||||||
|
'Yemen',
|
||||||
|
'Zambia',
|
||||||
|
'Zimbabwe'
|
||||||
|
]
|
||||||
@ -0,0 +1,48 @@
|
|||||||
|
// 1. The following is an array of 10 students ages: js const
|
||||||
|
// ages = [19, 22, 19, 24, 20, 25, 26, 24, 25, 24]
|
||||||
|
// - 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
|
||||||
|
|
||||||
|
const age = [19, 22, 19, 24, 20, 25, 26, 24, 25, 24]
|
||||||
|
|
||||||
|
let min = Math.min(...age)
|
||||||
|
let max = Math.max(...age)
|
||||||
|
|
||||||
|
age.sort()
|
||||||
|
let [m1, m2] = [(age.length / 2), (age.length / 2 + 1)]
|
||||||
|
let median = (age[m1] + age[m2]) / 2
|
||||||
|
|
||||||
|
let average = age.reduce((x, y) => {
|
||||||
|
return x + y
|
||||||
|
}, 0) / age.length
|
||||||
|
|
||||||
|
let range = max - min
|
||||||
|
|
||||||
|
|
||||||
|
// 1. Slice the first ten countries from the countries array
|
||||||
|
const countries = require('./countries')
|
||||||
|
|
||||||
|
let firstTen = countries.slice(0, 9)
|
||||||
|
|
||||||
|
// 2. Find the middle country(ies) in the countries array
|
||||||
|
let middle = Math.floor(countries.length / 2)
|
||||||
|
|
||||||
|
|
||||||
|
// 3. 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.
|
||||||
|
let arr1, arr2 = []
|
||||||
|
|
||||||
|
if (countries.length % 2 == 0) {
|
||||||
|
let middle = (countries.length / 2)
|
||||||
|
|
||||||
|
arr1 = countries.slice(0, middle)
|
||||||
|
arr2 = countries.slice(middle, countries.length)
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
let middle = Math.ceil(countries.length / 2)
|
||||||
|
|
||||||
|
arr1 = countries.slice(0, middle)
|
||||||
|
arr2 = countries.slice(middle, countries.length)
|
||||||
|
}
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
<!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>Level 1 Exercise</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<script src="./level1.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,53 @@
|
|||||||
|
/**
|
||||||
|
* 1. 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.
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
let age = Number(prompt('Enter your age: '))
|
||||||
|
|
||||||
|
if (age >= 18) {
|
||||||
|
console.log('You are old enough to drive.')
|
||||||
|
} else {
|
||||||
|
console.log(`You are left with ${18 - age} years to drive.`)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 2. 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.
|
||||||
|
*/
|
||||||
|
let yourAge = Number(prompt('Enter your age: '))
|
||||||
|
let myAge = 21
|
||||||
|
|
||||||
|
if (yourAge > myAge) {
|
||||||
|
console.log(`You are ${yourAge - myAge} years older than me.`)
|
||||||
|
} else {
|
||||||
|
console.log(`I'm ${myAge - yourAge} years older than you`)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 3. If a is greater than b return 'a is greater than b' else
|
||||||
|
* 'a is less than b'. Try to implement it in two ways
|
||||||
|
*/
|
||||||
|
let a = 4
|
||||||
|
let b = 3
|
||||||
|
|
||||||
|
a > b
|
||||||
|
? console.log(`${a} is greater than ${b}`)
|
||||||
|
: console.log(`${b} is greater than ${a}`)
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 4. Even numbers are divisible by 2 and the remainder is zero. How do you check,
|
||||||
|
* if a number is even or not using JavaScript?
|
||||||
|
*/
|
||||||
|
let number = Number(prompt('Enter a number: '))
|
||||||
|
|
||||||
|
if (number % 2 == 0) {
|
||||||
|
console.log(`${number} is an even number.`)
|
||||||
|
} else {
|
||||||
|
console.log(`${number} is an odd number.`)
|
||||||
|
}
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
<!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>Level 2 Exercises</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<script src="./level2.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,83 @@
|
|||||||
|
/**
|
||||||
|
* 1. 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
|
||||||
|
*/
|
||||||
|
let score = Number(prompt('Enter your score: '))
|
||||||
|
|
||||||
|
switch (true) {
|
||||||
|
case 80 <= score && score <= 100:
|
||||||
|
console.log('A')
|
||||||
|
break
|
||||||
|
case 70 <= score && score <= 79:
|
||||||
|
console.log('B')
|
||||||
|
break
|
||||||
|
case 60 <= score && score <= 69:
|
||||||
|
console.log('C')
|
||||||
|
break
|
||||||
|
case 50 <= score && score <= 59:
|
||||||
|
console.log('D')
|
||||||
|
break
|
||||||
|
case 0 <= score && score <= 49:
|
||||||
|
console.log('F')
|
||||||
|
break
|
||||||
|
default:
|
||||||
|
console.log('Number invalid')
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 2. 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
|
||||||
|
*/
|
||||||
|
let season = prompt('Whats is the month? ')
|
||||||
|
|
||||||
|
let Autumn = ['September', 'October', 'November']
|
||||||
|
let Winter = ['December', 'January', 'February']
|
||||||
|
let Spring = ['March', 'April', 'May']
|
||||||
|
let Summer = ['June', 'July', 'August']
|
||||||
|
|
||||||
|
switch (true) {
|
||||||
|
case Autumn.includes(season):
|
||||||
|
console.log('The season is Autumn')
|
||||||
|
break
|
||||||
|
case Winter.includes(season):
|
||||||
|
console.log('The season is Winter')
|
||||||
|
break
|
||||||
|
case Spring.includes(season):
|
||||||
|
console.log('The season is Spring')
|
||||||
|
break
|
||||||
|
case Summer.includes(season):
|
||||||
|
console.log('The season is Summer')
|
||||||
|
break
|
||||||
|
default:
|
||||||
|
console.log('Season invalid')
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 3. Check if a day is weekend day or a working day. Your script will
|
||||||
|
* take day as an input.
|
||||||
|
*/
|
||||||
|
let day = prompt('Whats is the day today? ')
|
||||||
|
let newDay = day[0].toUpperCase()+day.slice(1, day.length).toLowerCase()
|
||||||
|
|
||||||
|
let dayWork = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday']
|
||||||
|
let weekend = ['Saturday', 'Sunday']
|
||||||
|
|
||||||
|
switch (true) {
|
||||||
|
case dayWork.includes(newDay):
|
||||||
|
console.log(`${newDay} is a working day.`)
|
||||||
|
break
|
||||||
|
case weekend.includes(newDay):
|
||||||
|
console.log(`${newDay} is a weekend.`)
|
||||||
|
break
|
||||||
|
default:
|
||||||
|
console.log('Day invalid')
|
||||||
|
}
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
<!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>Level 3 Exercise</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<script src="./level3.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,89 @@
|
|||||||
|
/**
|
||||||
|
* 1. Write a program which tells the number of days in a month.
|
||||||
|
* */
|
||||||
|
const daysInMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
|
||||||
|
|
||||||
|
let month = prompt('Enter a month: ')
|
||||||
|
month = month.toLowerCase()
|
||||||
|
|
||||||
|
if (month == 'january') {
|
||||||
|
console.log(`January has ${daysInMonth[0]} day`)
|
||||||
|
}
|
||||||
|
else if (month == 'february') {
|
||||||
|
console.log(`February has ${daysInMonth[1]} day`)
|
||||||
|
}
|
||||||
|
else if (month == 'march') {
|
||||||
|
console.log(`March has ${daysInMonth[2]} day`)
|
||||||
|
}
|
||||||
|
else if (month == 'april') {
|
||||||
|
console.log(`April has ${daysInMonth[3]} day`)
|
||||||
|
}
|
||||||
|
else if (month == 'may') {
|
||||||
|
console.log(`May has ${daysInMonth[4]} day`)
|
||||||
|
}
|
||||||
|
else if (month == 'june') {
|
||||||
|
console.log(`June has ${daysInMonth[5]} day`)
|
||||||
|
}
|
||||||
|
else if (month == 'july') {
|
||||||
|
console.log(`July has ${daysInMonth[6]} day`)
|
||||||
|
}
|
||||||
|
else if (month == 'august') {
|
||||||
|
console.log(`August has ${daysInMonth[7]} day`)
|
||||||
|
}
|
||||||
|
else if (month == 'september') {
|
||||||
|
console.log(`September has ${daysInMonth[8]} day`)
|
||||||
|
}
|
||||||
|
else if (month == 'october') {
|
||||||
|
console.log(`October has ${daysInMonth[9]} day`)
|
||||||
|
}
|
||||||
|
else if (month == 'november') {
|
||||||
|
console.log(`November has ${daysInMonth[10]} day`)
|
||||||
|
}
|
||||||
|
else if (month == 'december') {
|
||||||
|
console.log(`December has ${daysInMonth[11]} day`)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1.2. Write a program which tells the number of days in a month,
|
||||||
|
* now consider leap year.
|
||||||
|
* */
|
||||||
|
month = prompt('Enter a month in leap year: ')
|
||||||
|
month = month.toLowerCase()
|
||||||
|
|
||||||
|
if (month == 'january') {
|
||||||
|
console.log(`January has ${daysInMonth[0]} day`)
|
||||||
|
}
|
||||||
|
else if (month == 'february') {
|
||||||
|
console.log(`February has ${daysInMonth[1]+1} day`)
|
||||||
|
}
|
||||||
|
else if (month == 'march') {
|
||||||
|
console.log(`March has ${daysInMonth[2]} day`)
|
||||||
|
}
|
||||||
|
else if (month == 'april') {
|
||||||
|
console.log(`April has ${daysInMonth[3]} day`)
|
||||||
|
}
|
||||||
|
else if (month == 'may') {
|
||||||
|
console.log(`May has ${daysInMonth[4]} day`)
|
||||||
|
}
|
||||||
|
else if (month == 'june') {
|
||||||
|
console.log(`June has ${daysInMonth[5]} day`)
|
||||||
|
}
|
||||||
|
else if (month == 'july') {
|
||||||
|
console.log(`July has ${daysInMonth[6]} day`)
|
||||||
|
}
|
||||||
|
else if (month == 'august') {
|
||||||
|
console.log(`August has ${daysInMonth[7]} day`)
|
||||||
|
}
|
||||||
|
else if (month == 'september') {
|
||||||
|
console.log(`September has ${daysInMonth[8]} day`)
|
||||||
|
}
|
||||||
|
else if (month == 'october') {
|
||||||
|
console.log(`October has ${daysInMonth[9]} day`)
|
||||||
|
}
|
||||||
|
else if (month == 'november') {
|
||||||
|
console.log(`November has ${daysInMonth[10]} day`)
|
||||||
|
}
|
||||||
|
else if (month == 'december') {
|
||||||
|
console.log(`December has ${daysInMonth[11]} day`)
|
||||||
|
}
|
||||||
@ -0,0 +1,27 @@
|
|||||||
|
// 1. Create an empty object called dog
|
||||||
|
const 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 = 'Madara'
|
||||||
|
dog.leps = 4
|
||||||
|
dog.color = 'Black'
|
||||||
|
dog.age = 1
|
||||||
|
dog.bark = function() {
|
||||||
|
return 'woof woof'
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// 4. Get name, legs, color, age and bark value from the dog object
|
||||||
|
let values = Object.values(dog)
|
||||||
|
|
||||||
|
// 5. Set new properties the dog object: breed, getDogInfo
|
||||||
|
dog.breed = ''
|
||||||
|
dog.getDogInfo = function() {
|
||||||
|
return `Its name is ${this.name}, its is ${this.color}, its is ${this.age}
|
||||||
|
years old.`
|
||||||
|
}
|
||||||
@ -0,0 +1,104 @@
|
|||||||
|
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.
|
||||||
|
const userWithMaxSkills = (users) => Object.entries(users)
|
||||||
|
.reduce((res, [username, data]) => {
|
||||||
|
console.log(res)
|
||||||
|
if (data.skills.length > res.maxSkills) {
|
||||||
|
return {
|
||||||
|
maxSkills: data.skills.length,
|
||||||
|
user: {
|
||||||
|
[username]: data
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return res
|
||||||
|
}, {
|
||||||
|
maxSkills: -1,
|
||||||
|
user: undefined
|
||||||
|
}).user
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Count logged in users,count users having greater than equal
|
||||||
|
* to 50 points from the following object.
|
||||||
|
* */
|
||||||
|
const usersIsLogged = Object.values(users).filter(user => user.isLoggedIn).length
|
||||||
|
const usersUnderPoints = Object.values(users).filter(user => user.points >= 50).length
|
||||||
|
|
||||||
|
console.log(`User logged: ${usersIsLogged}, users having greater than equal to 50 points ${usersUnderPoints}`)
|
||||||
|
|
||||||
|
|
||||||
|
// Find people who are MERN stack developer from the users object
|
||||||
|
const usersMERNStack = Object.values(users)
|
||||||
|
.filter(user => user.skills.includes('MongoDB', 'Express', 'React', 'Node'))
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Set your name in the users object without modifying the
|
||||||
|
* original users object
|
||||||
|
*/
|
||||||
|
const Nangazaki = Object.assign(users.Asab)
|
||||||
|
Nangazaki.email = 'heldercambuta44@gmail.com'
|
||||||
|
Nangazaki.skills = ['HTML', 'CSS', 'JavaScript', 'VueJS', 'TailwindCSS']
|
||||||
|
Nangazaki.age = 21
|
||||||
|
|
||||||
|
|
||||||
|
// Get all keys or properties of users object
|
||||||
|
const keys = Object.keys(users)
|
||||||
|
|
||||||
|
// Get all the values of users object
|
||||||
|
const values = Object.values(users)
|
||||||
|
|
||||||
|
// Use the countries object to print a country name, capital, populations and languages.
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"nuxt.isNuxtApp": false
|
||||||
|
}
|
||||||
@ -0,0 +1,65 @@
|
|||||||
|
<!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>Day 02 - Exercise</title>
|
||||||
|
|
||||||
|
<link
|
||||||
|
href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500|Roboto:300,400,500&display=swap"
|
||||||
|
rel="stylesheet"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
height: 100%;
|
||||||
|
line-height: 1.5;
|
||||||
|
font-family: "Montserrat";
|
||||||
|
font-weight: 300;
|
||||||
|
color: white;
|
||||||
|
background-color: #242424;
|
||||||
|
}
|
||||||
|
|
||||||
|
.root {
|
||||||
|
min-height: 100%;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="root"></div>
|
||||||
|
|
||||||
|
<script
|
||||||
|
crossorigin
|
||||||
|
src="https://unpkg.com/react@18/umd/react.development.js"
|
||||||
|
></script>
|
||||||
|
<script
|
||||||
|
crossorigin
|
||||||
|
src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
|
||||||
|
></script>
|
||||||
|
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
|
||||||
|
|
||||||
|
<script type="text/babel">
|
||||||
|
|
||||||
|
|
||||||
|
// JSX element, app
|
||||||
|
const app = (
|
||||||
|
<div className="app">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
const container = document.querySelector(".root");
|
||||||
|
const root = ReactDOM.createRoot(container);
|
||||||
|
root.render(app);
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,197 @@
|
|||||||
|
<!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>30 Days of React - Day 02</title>
|
||||||
|
|
||||||
|
<link
|
||||||
|
href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500|Roboto:300,400,500&display=swap"
|
||||||
|
rel="stylesheet"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* == General style === */
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
height: 100%;
|
||||||
|
line-height: 1.5;
|
||||||
|
font-family: "Montserrat";
|
||||||
|
font-weight: 300;
|
||||||
|
color: white;
|
||||||
|
background-color: #242424;
|
||||||
|
}
|
||||||
|
|
||||||
|
.root {
|
||||||
|
min-height: 100%;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-wrapper,
|
||||||
|
.main-wrapper,
|
||||||
|
.footer-wrapper {
|
||||||
|
width: 85%;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-wrapper,
|
||||||
|
.main-wrapper {
|
||||||
|
padding: 10px;
|
||||||
|
margin: 2px auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 56px;
|
||||||
|
font-weight: 300;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2,
|
||||||
|
h3 {
|
||||||
|
font-weight: 300;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
background-color: #202020;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
padding: 10px;
|
||||||
|
padding-bottom: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
margin-left: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul li {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 60px;
|
||||||
|
background: #202020;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-wrapper {
|
||||||
|
font-weight: 400;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 60px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="root"></div>
|
||||||
|
|
||||||
|
<script
|
||||||
|
crossorigin
|
||||||
|
src="https://unpkg.com/react@18/umd/react.development.js"
|
||||||
|
></script>
|
||||||
|
<script
|
||||||
|
crossorigin
|
||||||
|
src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
|
||||||
|
></script>
|
||||||
|
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
|
||||||
|
|
||||||
|
<script type="text/babel">
|
||||||
|
const welcome = "Welcome to 30 Days Of React Challenge";
|
||||||
|
const title = "Getting Started React";
|
||||||
|
const subtitle = "JavaScript Library";
|
||||||
|
const author = {
|
||||||
|
firstName: "Asabeneh",
|
||||||
|
lastName: "Yetayeh",
|
||||||
|
};
|
||||||
|
const date = "March 14, 2023";
|
||||||
|
|
||||||
|
// JSX Element, header
|
||||||
|
const header = (
|
||||||
|
<header>
|
||||||
|
<div>
|
||||||
|
<h1>{welcome}</h1>
|
||||||
|
<h2>{title}</h2>
|
||||||
|
<h3>{subtitle}</h3>
|
||||||
|
<p>
|
||||||
|
Instructor: {author.firstName} {author.lastName}
|
||||||
|
</p>
|
||||||
|
<small>Date: {date}</small>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
);
|
||||||
|
|
||||||
|
const numOne = 3;
|
||||||
|
const numTwo = 2;
|
||||||
|
|
||||||
|
const result = (
|
||||||
|
<p>
|
||||||
|
{numOne} + {numTwo} = {numOne + numTwo}
|
||||||
|
</p>
|
||||||
|
);
|
||||||
|
|
||||||
|
const yearBorn = 1820;
|
||||||
|
const currentYear = 2020;
|
||||||
|
const age = currentYear - yearBorn;
|
||||||
|
const personAge = (
|
||||||
|
<p>
|
||||||
|
{" "}
|
||||||
|
{author.firstName} {author.lastName} is {age} years old
|
||||||
|
</p>
|
||||||
|
);
|
||||||
|
|
||||||
|
// JSX element, main
|
||||||
|
const techs = ["HTML", "CSS", "JavaScript"];
|
||||||
|
const techsFormatted = techs.map((tech) => <li key={tech}>{tech}</li>);
|
||||||
|
|
||||||
|
// JSX element, main
|
||||||
|
const main = (
|
||||||
|
<main>
|
||||||
|
<div className="main-wrapper">
|
||||||
|
<p>
|
||||||
|
Prerequisite to get started{" "}
|
||||||
|
<strong>
|
||||||
|
<em>react.js</em>
|
||||||
|
</strong>
|
||||||
|
:
|
||||||
|
</p>
|
||||||
|
<ul>{techsFormatted}</ul>
|
||||||
|
{result}
|
||||||
|
{personAge}
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
|
||||||
|
const copyRight = "Copyright 2023";
|
||||||
|
|
||||||
|
// JSX element, footer
|
||||||
|
const footer = (
|
||||||
|
<footer>
|
||||||
|
<div className="footer-wrapper">
|
||||||
|
<p>{copyRight}</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
);
|
||||||
|
|
||||||
|
// JSX element, app
|
||||||
|
const app = (
|
||||||
|
<div className="app">
|
||||||
|
{header}
|
||||||
|
{main}
|
||||||
|
{footer}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
const container = document.querySelector(".root");
|
||||||
|
const root = ReactDOM.createRoot(container);
|
||||||
|
root.render(app);
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"nuxt.isNuxtApp": false
|
||||||
|
}
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"nuxt.isNuxtApp": false
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,2 @@
|
|||||||
|
/.vscode
|
||||||
|
/node_modules
|
||||||
@ -0,0 +1,70 @@
|
|||||||
|
# Getting Started with Create React App
|
||||||
|
|
||||||
|
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
|
||||||
|
|
||||||
|
## Available Scripts
|
||||||
|
|
||||||
|
In the project directory, you can run:
|
||||||
|
|
||||||
|
### `npm start`
|
||||||
|
|
||||||
|
Runs the app in the development mode.\
|
||||||
|
Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
|
||||||
|
|
||||||
|
The page will reload when you make changes.\
|
||||||
|
You may also see any lint errors in the console.
|
||||||
|
|
||||||
|
### `npm test`
|
||||||
|
|
||||||
|
Launches the test runner in the interactive watch mode.\
|
||||||
|
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
|
||||||
|
|
||||||
|
### `npm run build`
|
||||||
|
|
||||||
|
Builds the app for production to the `build` folder.\
|
||||||
|
It correctly bundles React in production mode and optimizes the build for the best performance.
|
||||||
|
|
||||||
|
The build is minified and the filenames include the hashes.\
|
||||||
|
Your app is ready to be deployed!
|
||||||
|
|
||||||
|
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
|
||||||
|
|
||||||
|
### `npm run eject`
|
||||||
|
|
||||||
|
**Note: this is a one-way operation. Once you `eject`, you can't go back!**
|
||||||
|
|
||||||
|
If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
|
||||||
|
|
||||||
|
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
|
||||||
|
|
||||||
|
You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
|
||||||
|
|
||||||
|
## Learn More
|
||||||
|
|
||||||
|
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
|
||||||
|
|
||||||
|
To learn React, check out the [React documentation](https://reactjs.org/).
|
||||||
|
|
||||||
|
### Code Splitting
|
||||||
|
|
||||||
|
This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
|
||||||
|
|
||||||
|
### Analyzing the Bundle Size
|
||||||
|
|
||||||
|
This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
|
||||||
|
|
||||||
|
### Making a Progressive Web App
|
||||||
|
|
||||||
|
This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
|
||||||
|
|
||||||
|
### Advanced Configuration
|
||||||
|
|
||||||
|
This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
|
||||||
|
|
||||||
|
### Deployment
|
||||||
|
|
||||||
|
This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
|
||||||
|
|
||||||
|
### `npm run build` fails to minify
|
||||||
|
|
||||||
|
This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
|
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,38 @@
|
|||||||
|
{
|
||||||
|
"name": "30-days-of-react",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"dependencies": {
|
||||||
|
"@testing-library/jest-dom": "^5.16.5",
|
||||||
|
"@testing-library/react": "^13.4.0",
|
||||||
|
"@testing-library/user-event": "^13.5.0",
|
||||||
|
"react": "^18.2.0",
|
||||||
|
"react-dom": "^18.2.0",
|
||||||
|
"react-scripts": "5.0.1",
|
||||||
|
"web-vitals": "^2.1.4"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"start": "react-scripts start",
|
||||||
|
"build": "react-scripts build",
|
||||||
|
"test": "react-scripts test",
|
||||||
|
"eject": "react-scripts eject"
|
||||||
|
},
|
||||||
|
"eslintConfig": {
|
||||||
|
"extends": [
|
||||||
|
"react-app",
|
||||||
|
"react-app/jest"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"browserslist": {
|
||||||
|
"production": [
|
||||||
|
">0.2%",
|
||||||
|
"not dead",
|
||||||
|
"not op_mini all"
|
||||||
|
],
|
||||||
|
"development": [
|
||||||
|
"last 1 chrome version",
|
||||||
|
"last 1 firefox version",
|
||||||
|
"last 1 safari version"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,20 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<link
|
||||||
|
href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500|Roboto:300,400,500&display=swap"
|
||||||
|
rel="stylesheet"
|
||||||
|
/>
|
||||||
|
<meta
|
||||||
|
name="description"
|
||||||
|
content="Web site created using create-react-app"
|
||||||
|
/>
|
||||||
|
<title>30 Days Of React</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||||
|
<div id="root"></div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
After Width: | Height: | Size: 20 KiB |
|
After Width: | Height: | Size: 82 KiB |
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 528 KiB |
|
After Width: | Height: | Size: 40 KiB |
@ -0,0 +1,35 @@
|
|||||||
|
import React from "react"
|
||||||
|
import ReactDOM from "react-dom/client"
|
||||||
|
import "./style/style.css"
|
||||||
|
|
||||||
|
import html from "./images/html_logo.png"
|
||||||
|
import css from "./images/css_logo.png"
|
||||||
|
import js from "./images/js_logo.png"
|
||||||
|
import react from "./images/react_logo.png"
|
||||||
|
|
||||||
|
const techsLogos = [html, css, js, react]
|
||||||
|
const techsLogoImgs = techsLogos.map((logo) => <img key={logo} src={logo} alt='logo tech' />)
|
||||||
|
|
||||||
|
const frontTechs = (
|
||||||
|
<div className="techs">
|
||||||
|
<h3>Front End Technologies</h3>
|
||||||
|
<div className="tech-images-wrapper">
|
||||||
|
{techsLogoImgs}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
|
||||||
|
const main = (
|
||||||
|
<main>
|
||||||
|
<div className="main-wrapper">
|
||||||
|
{frontTechs}
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
)
|
||||||
|
|
||||||
|
const root = ReactDOM.createRoot(document.getElementById('root'));
|
||||||
|
root.render(
|
||||||
|
<React.StrictMode>
|
||||||
|
{main}
|
||||||
|
</React.StrictMode>
|
||||||
|
);
|
||||||
@ -0,0 +1,67 @@
|
|||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
height: 100%;
|
||||||
|
line-height: 1.5;
|
||||||
|
font-family: "Montserrat";
|
||||||
|
font-weight: 300;
|
||||||
|
color: white;
|
||||||
|
background-color: #202020;
|
||||||
|
}
|
||||||
|
|
||||||
|
.root {
|
||||||
|
min-height: 100%;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-wrapper {
|
||||||
|
width: 85%;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-wrapper {
|
||||||
|
padding: 10px;
|
||||||
|
margin: 2px auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 56px;
|
||||||
|
font-weight: 300;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2,
|
||||||
|
h3 {
|
||||||
|
font-weight: 300;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
padding: 10px;
|
||||||
|
padding-bottom: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.techs {
|
||||||
|
margin: 64px 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 48px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.techs h3 {
|
||||||
|
text-align: center;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tech-images-wrapper {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tech-images-wrapper img {
|
||||||
|
max-width: 150px;
|
||||||
|
}
|
||||||
@ -0,0 +1,2 @@
|
|||||||
|
/.vscode
|
||||||
|
/node_modules
|
||||||
@ -0,0 +1,70 @@
|
|||||||
|
# Getting Started with Create React App
|
||||||
|
|
||||||
|
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
|
||||||
|
|
||||||
|
## Available Scripts
|
||||||
|
|
||||||
|
In the project directory, you can run:
|
||||||
|
|
||||||
|
### `npm start`
|
||||||
|
|
||||||
|
Runs the app in the development mode.\
|
||||||
|
Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
|
||||||
|
|
||||||
|
The page will reload when you make changes.\
|
||||||
|
You may also see any lint errors in the console.
|
||||||
|
|
||||||
|
### `npm test`
|
||||||
|
|
||||||
|
Launches the test runner in the interactive watch mode.\
|
||||||
|
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
|
||||||
|
|
||||||
|
### `npm run build`
|
||||||
|
|
||||||
|
Builds the app for production to the `build` folder.\
|
||||||
|
It correctly bundles React in production mode and optimizes the build for the best performance.
|
||||||
|
|
||||||
|
The build is minified and the filenames include the hashes.\
|
||||||
|
Your app is ready to be deployed!
|
||||||
|
|
||||||
|
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
|
||||||
|
|
||||||
|
### `npm run eject`
|
||||||
|
|
||||||
|
**Note: this is a one-way operation. Once you `eject`, you can't go back!**
|
||||||
|
|
||||||
|
If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
|
||||||
|
|
||||||
|
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
|
||||||
|
|
||||||
|
You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
|
||||||
|
|
||||||
|
## Learn More
|
||||||
|
|
||||||
|
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
|
||||||
|
|
||||||
|
To learn React, check out the [React documentation](https://reactjs.org/).
|
||||||
|
|
||||||
|
### Code Splitting
|
||||||
|
|
||||||
|
This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
|
||||||
|
|
||||||
|
### Analyzing the Bundle Size
|
||||||
|
|
||||||
|
This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
|
||||||
|
|
||||||
|
### Making a Progressive Web App
|
||||||
|
|
||||||
|
This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
|
||||||
|
|
||||||
|
### Advanced Configuration
|
||||||
|
|
||||||
|
This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
|
||||||
|
|
||||||
|
### Deployment
|
||||||
|
|
||||||
|
This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
|
||||||
|
|
||||||
|
### `npm run build` fails to minify
|
||||||
|
|
||||||
|
This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
|
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,38 @@
|
|||||||
|
{
|
||||||
|
"name": "30-days-of-react",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"dependencies": {
|
||||||
|
"@testing-library/jest-dom": "^5.16.5",
|
||||||
|
"@testing-library/react": "^13.4.0",
|
||||||
|
"@testing-library/user-event": "^13.5.0",
|
||||||
|
"react": "^18.2.0",
|
||||||
|
"react-dom": "^18.2.0",
|
||||||
|
"react-scripts": "5.0.1",
|
||||||
|
"web-vitals": "^2.1.4"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"start": "react-scripts start",
|
||||||
|
"build": "react-scripts build",
|
||||||
|
"test": "react-scripts test",
|
||||||
|
"eject": "react-scripts eject"
|
||||||
|
},
|
||||||
|
"eslintConfig": {
|
||||||
|
"extends": [
|
||||||
|
"react-app",
|
||||||
|
"react-app/jest"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"browserslist": {
|
||||||
|
"production": [
|
||||||
|
">0.2%",
|
||||||
|
"not dead",
|
||||||
|
"not op_mini all"
|
||||||
|
],
|
||||||
|
"development": [
|
||||||
|
"last 1 chrome version",
|
||||||
|
"last 1 firefox version",
|
||||||
|
"last 1 safari version"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,20 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<link
|
||||||
|
href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500|Roboto:300,400,500&display=swap"
|
||||||
|
rel="stylesheet"
|
||||||
|
/>
|
||||||
|
<meta
|
||||||
|
name="description"
|
||||||
|
content="Web site created using create-react-app"
|
||||||
|
/>
|
||||||
|
<title>30 Days Of React</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||||
|
<div id="root"></div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,26 @@
|
|||||||
|
import React from "react"
|
||||||
|
import ReactDOM from "react-dom/client"
|
||||||
|
|
||||||
|
import "./style/style.css"
|
||||||
|
|
||||||
|
const form = (
|
||||||
|
<div className="form-wrapper">
|
||||||
|
<div className="form">
|
||||||
|
<h1>SUBSCRIBE</h1>
|
||||||
|
<p>Sign up with your email address to receive news and updates.</p>
|
||||||
|
<div>
|
||||||
|
<input type="text" placeholder="First name" />
|
||||||
|
<input type="text" placeholder="Last name" />
|
||||||
|
<input type="email" placeholder="Email" />
|
||||||
|
</div>
|
||||||
|
<button>Subscribe</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
|
||||||
|
const root = ReactDOM.createRoot(document.getElementById('root'));
|
||||||
|
root.render(
|
||||||
|
<React.StrictMode>
|
||||||
|
{form}
|
||||||
|
</React.StrictMode>
|
||||||
|
);
|
||||||
@ -0,0 +1,79 @@
|
|||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
height: 100%;
|
||||||
|
line-height: 1.5;
|
||||||
|
font-family: "Montserrat";
|
||||||
|
font-weight: 300;
|
||||||
|
color: white;
|
||||||
|
background-color: #202020;
|
||||||
|
}
|
||||||
|
|
||||||
|
.root {
|
||||||
|
min-height: 100%;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-wrapper,
|
||||||
|
.main-wrapper,
|
||||||
|
.footer-wrapper {
|
||||||
|
width: 85%;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-wrapper,
|
||||||
|
.main-wrapper {
|
||||||
|
padding: 10px;
|
||||||
|
margin: 2px auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-wrapper {
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form {
|
||||||
|
width: 80%;
|
||||||
|
padding: 42px;
|
||||||
|
background-color: #242424;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 24px;
|
||||||
|
align-items: center;
|
||||||
|
border-radius: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form h1 {
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form input {
|
||||||
|
padding: 12px;
|
||||||
|
margin: 0 8px 24px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
background-color: #333;
|
||||||
|
font-size: .875rem;
|
||||||
|
color: #858585;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form button {
|
||||||
|
padding: 10px 16px;
|
||||||
|
max-width: 300px;
|
||||||
|
width: 100%;
|
||||||
|
border-radius: 4px;
|
||||||
|
border: none;
|
||||||
|
background: #3d75ee;
|
||||||
|
font-size: 1rem;
|
||||||
|
color: white;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
@ -0,0 +1,2 @@
|
|||||||
|
/.vscode
|
||||||
|
/node_modules
|
||||||
@ -0,0 +1,70 @@
|
|||||||
|
# Getting Started with Create React App
|
||||||
|
|
||||||
|
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
|
||||||
|
|
||||||
|
## Available Scripts
|
||||||
|
|
||||||
|
In the project directory, you can run:
|
||||||
|
|
||||||
|
### `npm start`
|
||||||
|
|
||||||
|
Runs the app in the development mode.\
|
||||||
|
Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
|
||||||
|
|
||||||
|
The page will reload when you make changes.\
|
||||||
|
You may also see any lint errors in the console.
|
||||||
|
|
||||||
|
### `npm test`
|
||||||
|
|
||||||
|
Launches the test runner in the interactive watch mode.\
|
||||||
|
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
|
||||||
|
|
||||||
|
### `npm run build`
|
||||||
|
|
||||||
|
Builds the app for production to the `build` folder.\
|
||||||
|
It correctly bundles React in production mode and optimizes the build for the best performance.
|
||||||
|
|
||||||
|
The build is minified and the filenames include the hashes.\
|
||||||
|
Your app is ready to be deployed!
|
||||||
|
|
||||||
|
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
|
||||||
|
|
||||||
|
### `npm run eject`
|
||||||
|
|
||||||
|
**Note: this is a one-way operation. Once you `eject`, you can't go back!**
|
||||||
|
|
||||||
|
If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
|
||||||
|
|
||||||
|
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
|
||||||
|
|
||||||
|
You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
|
||||||
|
|
||||||
|
## Learn More
|
||||||
|
|
||||||
|
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
|
||||||
|
|
||||||
|
To learn React, check out the [React documentation](https://reactjs.org/).
|
||||||
|
|
||||||
|
### Code Splitting
|
||||||
|
|
||||||
|
This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
|
||||||
|
|
||||||
|
### Analyzing the Bundle Size
|
||||||
|
|
||||||
|
This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
|
||||||
|
|
||||||
|
### Making a Progressive Web App
|
||||||
|
|
||||||
|
This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
|
||||||
|
|
||||||
|
### Advanced Configuration
|
||||||
|
|
||||||
|
This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
|
||||||
|
|
||||||
|
### Deployment
|
||||||
|
|
||||||
|
This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
|
||||||
|
|
||||||
|
### `npm run build` fails to minify
|
||||||
|
|
||||||
|
This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
|
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,38 @@
|
|||||||
|
{
|
||||||
|
"name": "30-days-of-react",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"dependencies": {
|
||||||
|
"@testing-library/jest-dom": "^5.16.5",
|
||||||
|
"@testing-library/react": "^13.4.0",
|
||||||
|
"@testing-library/user-event": "^13.5.0",
|
||||||
|
"react": "^18.2.0",
|
||||||
|
"react-dom": "^18.2.0",
|
||||||
|
"react-scripts": "5.0.1",
|
||||||
|
"web-vitals": "^2.1.4"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"start": "react-scripts start",
|
||||||
|
"build": "react-scripts build",
|
||||||
|
"test": "react-scripts test",
|
||||||
|
"eject": "react-scripts eject"
|
||||||
|
},
|
||||||
|
"eslintConfig": {
|
||||||
|
"extends": [
|
||||||
|
"react-app",
|
||||||
|
"react-app/jest"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"browserslist": {
|
||||||
|
"production": [
|
||||||
|
">0.2%",
|
||||||
|
"not dead",
|
||||||
|
"not op_mini all"
|
||||||
|
],
|
||||||
|
"development": [
|
||||||
|
"last 1 chrome version",
|
||||||
|
"last 1 firefox version",
|
||||||
|
"last 1 safari version"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,20 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<link
|
||||||
|
href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500|Roboto:300,400,500&display=swap"
|
||||||
|
rel="stylesheet"
|
||||||
|
/>
|
||||||
|
<meta
|
||||||
|
name="description"
|
||||||
|
content="Web site created using create-react-app"
|
||||||
|
/>
|
||||||
|
<title>30 Days Of React</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||||
|
<div id="root"></div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
After Width: | Height: | Size: 20 KiB |
@ -0,0 +1,37 @@
|
|||||||
|
import React from "react"
|
||||||
|
import ReactDOM from "react-dom/client"
|
||||||
|
|
||||||
|
import "./style/style.css"
|
||||||
|
|
||||||
|
import image from "./images/asabeneh.jpg"
|
||||||
|
|
||||||
|
const techs = ['HTML', 'CSS', 'Sass', 'React', 'Redux', 'Node', 'MongoDB', 'Python',
|
||||||
|
'Flask', 'Django', 'NumPy', 'Data Analylis', 'MYSQL', 'GrapgQL', 'D3.js', 'Gatsby',
|
||||||
|
'Docker', 'Heroku', 'Git']
|
||||||
|
|
||||||
|
const card = (
|
||||||
|
<div className="card-wrapper">
|
||||||
|
<div className="card">
|
||||||
|
<div className="card__img">
|
||||||
|
<img src={image} />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2>ASABENEH YETAYEH <img className="icon" src="https://img.icons8.com/color/48/null/verified-badge.png"/> </h2>
|
||||||
|
<p>Senior Developer, Finland.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3>SKILLS</h3>
|
||||||
|
<div className="tech-wrapper">
|
||||||
|
{techs.map((tech) => (<span key={tech} className="tech__card">{tech}</span>))}
|
||||||
|
</div>
|
||||||
|
<p>Joined on Aug 30, 2023</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
|
||||||
|
const root = ReactDOM.createRoot(document.getElementById('root'));
|
||||||
|
root.render(
|
||||||
|
<React.StrictMode>
|
||||||
|
{card}
|
||||||
|
</React.StrictMode>
|
||||||
|
);
|
||||||
@ -0,0 +1,79 @@
|
|||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
height: 100%;
|
||||||
|
line-height: 1.5;
|
||||||
|
font-family: "Montserrat";
|
||||||
|
font-weight: 300;
|
||||||
|
color: white;
|
||||||
|
background-color: #202020;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.root {
|
||||||
|
min-height: 100%;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-wrapper {
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
width: 80%;
|
||||||
|
padding: 42px;
|
||||||
|
background-color: #242424;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 28px;
|
||||||
|
border-radius: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card .card__img {
|
||||||
|
width: 150px;
|
||||||
|
border-radius: 50%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card .tech-wrapper {
|
||||||
|
display: flex;
|
||||||
|
gap: 16px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card .tech__card {
|
||||||
|
display: block;
|
||||||
|
padding: 4px 10px;
|
||||||
|
border-radius: 4px;
|
||||||
|
border: none;
|
||||||
|
background: #3d75ee;
|
||||||
|
font-size: 1rem;
|
||||||
|
color: white;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
Loading…
Reference in new issue