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 77a7369558 into 09f408a1b7

Browse Source
pull/152/merge
Diego Baena Fronteira 7 months ago committed by GitHub
parent 09f408a1b7 77a7369558
commit ec21f52c8b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 277 additions and 0 deletions
Show Stats Download Patch File Download Diff File

48
solutions/day-01/Level1.js
Unescape View File

@ -0,0 +1,48 @@
// Declare an empty array;
const emptyArray = [];
// Declare an array with more than 5 number of elements
const numberArray = [1, 2, 3, 4, 5];
// Find the length of your array
console.log(numberArray.length);
// Get the first item, the middle item and the last item of the array
console.log(numberArray[0], numberArray[2], numberArray[4]);
// 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, true, "Diego", 10, false, "black"];
// Print the number of companies in the array
console.log(mixedDataTypes.length);
// 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);
// Change each company name to uppercase one by one and print them out
for(let i = 0; i < itCompanies.length; i++) {
console.log(itCompanies[i].toUpperCase());
}
// Check if a certain company exists in the itCompanies array. If it exist return the company else return a company is not found
console.log(itCompanies.includes("Facebook"));
// 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, 2));
// Slice out the last 3 companies from the array
console.log(itCompanies.slice(0, -4));
// Remove the first IT company from the array
console.log('teste');
console.log(itCompanies.shift());
// Remove the last IT company from the array
console.log(itCompanies.pop());

0
solutions/day-01/Level2.js
Unescape View 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',
]

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

@ -0,0 +1,9 @@
<!DOCTYPE html>
<html>
<head>
<title>30DaysOfScript:Internal Script</title>
</head>
<body>
<script src="./Level2.js"></script>
</body>
</html>

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