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

day-01

Browse Source
pull/46/head
jeremiahiro 5 years ago
parent ad36153d95
commit 4559a5602c
7 changed files with 389 additions and 0 deletions
Show Stats Download Patch File Download Diff File

13
solutions/day-01/countries.js
Unescape View File

@ -0,0 +1,13 @@
const countries = [
'Albania',
'Bolivia',
'Canada',
'Denmark',
'Ethiopia',
'Finland',
'Germany',
'Hungary',
'Ireland',
'Japan',
'Kenya',
]

12
solutions/day-01/index.html
Unescape View File

@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- <script src="./level1.js"></script> -->
<script src="./level2.js"></script>
</body>
</html>

129
solutions/day-01/level1.js
Unescape View File

@ -0,0 +1,129 @@
// Declare an empty array;
const arr = []
console.log(arr);
// Declare an array with more than 5 number of elements
const element = [
'element 1',
'element 2',
'element 3',
'element 4',
'element 5',
'element 6',
'element 7',
]
// Find the length of your array
console.log(element.length);
// Get the first item, the middle item and the last item of the array
let firstItem = element[0]
console.log(firstItem)
secondItem = element[3]
console.log(secondItem)
let lastIndex = element.length - 1
lastIndex = element[lastIndex]
console.log(lastIndex)
// 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 = [
'Jeremiah Iro',
250,
true,
{ country: 'Nigeria', city: 'Port Harcourt' },
{ skills: ['HTML', 'CSS', 'JS', 'React', 'Jquery'] },
]
// 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('Number of Companies:', itCompanies.length)
sum = itCompanies.length;
// Print out each company
for(var i = 0; i < sum; i++){
console.log(itCompanies[i]);
}
// Change each company name to uppercase one by one and print them out
toUpper = function(x){
return x.toUpperCase();
};
console.log(itCompanies.map(toUpper))
// Print the array like as a sentence: Facebook, Google, Microsoft, Apple, IBM,Oracle and Amazon are big IT companies.
itCompanies[itCompanies.length-1] = 'and '+ itCompanies[itCompanies.length-1];
var string = itCompanies.join(', ');
console.log(string, '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
let ItCoy = itCompanies.includes('IBM'); // -1, if the element not found index is -1
if (ItCoy) {
console.log('This It Company does exist in the array')
} else {
console.log('This It Company does not exist in the array')
}
// Filter out companies which have more than one 'o' without the filter method
let ItCom = itCompanies.includes('oo'); // -1, if the element not found index is -1
if (ItCom) {
console.log('This It Company does exist in the array')
} else {
console.log('This It Company does not exist in the array')
}
// Sort the array using sort() method
itCompanies.sort()
console.log(itCompanies);
// Reverse the array using reverse() method
itCompanies.reverse()
console.log(itCompanies);
// Slice out the first 3 companies from the array
var slice3 = itCompanies.slice(1, 3);
console.log(slice3);
// Slice out the last 3 companies from the array
var splice3 = itCompanies.slice(Math.max(itCompanies.length - 3, 1))
console.log(splice3);
// Slice out the middle IT company or companies from the array
const mid = itCompanies.indexOf('Apple')
console.log(mid)
// Remove the first IT company from the array
itCompanies.shift()
console.log(itCompanies)
// Remove the middle IT company or companies from the array
itCompanies.splice(3)
console.log(itCompanies)
// Remove the last IT company from the array
itCompanies.pop()
console.log(itCompanies)
// Remove all IT companies
while (itCompanies.length > 0) {
itCompanies.pop();
}
console.log(itCompanies)

25
solutions/day-01/level2.js
Unescape View File

@ -0,0 +1,25 @@
let words = 'I love teaching and empowering people. I teach HTML, CSS, JS, React, Python.'
console.log(words)
console.log(words.length)
// add 'Meat' in the beginning of your shopping cart if it has not been already added
const shoppingCart = ['Milk', 'Coffee', 'Tea', 'Honey']
shoppingCart.unshift('Meat');
console.log(shoppingCart)
// add Sugar at the end of you shopping cart if it has not been already added
shoppingCart.push('Sugar');
console.log(shoppingCart)
// remove 'Honey' if you are allergic to honey
// modify Tea to 'Green Tea'
//Concatenate the following two variables and store it in a fullStack variable.
const frontEnd = ['HTML', 'CSS', 'JS', 'React', 'Redux']
const backEnd = ['Node', 'Express', 'MongoDB']
const fullStack = [frontEnd, backEnd]
console.log(fullStack)

3
solutions/day-01/main.js
Unescape View File

@ -0,0 +1,3 @@
import countries from './countries.js';
import web_techs from './web_techs.js';

9
solutions/day-01/web_techs.js
Unescape View File

@ -0,0 +1,9 @@
const webTechs = [
'HTML',
'CSS',
'JavaScript',
'React',
'Redux',
'Node',
'MongoDB',
]

198
solutions/day-02/index.html
Unescape View File

@ -0,0 +1,198 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500|Roboto:300,400,500&display=swap"
rel="stylesheet"
/>
<title>30 Days Of React Challenge</title>
<style>
/* == General style === */
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html,
body {
height: 100%;
line-height: 1.5;
font-family: 'Montserrat';
font-weight: 300;
color: black;
}
.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: 70px;
font-weight: 300;
}
h2,
h3 {
font-weight: 300;
}
header {
background-color: #61dbfb;
padding: 10px;
}
main {
padding: 10px;
padding-bottom: 60px;
/* Height of the footer */
}
ul {
margin-left: 15px;
}
ul li {
list-style: none;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
/* Height of the footer */
background: #6cf;
}
.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@16/umd/react.development.js"
></script>
<script
crossorigin
src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"
></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
// To get the root element from the HTML document
const rootElement = document.querySelector('.root')
// JSX element, header
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 = 'Oct 2, 2020'
// JSX element, header
const header = (
<header>
<div className='header-wrapper'>
<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 2020'
// 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>
)
// we render the JSX element using the ReactDOM package
ReactDOM.render(app, rootElement)
</script>
</body>
</html>
Write Preview
Loading…
Cancel
Save