Cornell
6 years ago
committed by
GitHub
commit
ff8c6315fd
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,17 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>30DaysOfJavaScript:10 Day </title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>30DaysOfJavaScript:10 Day</h1>
|
||||
<h2>Set and Map</h2>
|
||||
|
||||
<script src="./data/countries_data.js"></script>
|
||||
<script src="./scripts/main.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -0,0 +1,2 @@
|
||||
console.log(countries)
|
||||
alert('Open the console and check if the countries has been loaded')
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,17 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>30DaysOfJavaScript:11 Day </title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>30DaysOfJavaScript:11 Day</h1>
|
||||
<h2>Destructuring and Spread</h2>
|
||||
|
||||
<script src="./data/countries_data.js"></script>
|
||||
<script src="./scripts/main.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -0,0 +1,2 @@
|
||||
console.log(countries)
|
||||
alert('Open the console and check if the countries has been loaded')
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,17 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>30DaysOfJavaScript:11 Day </title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>30DaysOfJavaScript:11 Day</h1>
|
||||
<h2>Destructuring and Spread</h2>
|
||||
|
||||
<script src="./data/countries_data.js"></script>
|
||||
<script src="./scripts/main.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -0,0 +1,2 @@
|
||||
console.log(countries)
|
||||
alert('Open the console and check if the countries has been loaded')
|
||||
@ -0,0 +1,358 @@
|
||||
<div align="center">
|
||||
<h1> 30 Days Of JavaScript</h1>
|
||||
<a class="header-badge" target="_blank" href="https://www.linkedin.com/in/asabeneh/">
|
||||
<img src="https://img.shields.io/badge/style--5eba00.svg?label=LinkedIn&logo=linkedin&style=social">
|
||||
</a>
|
||||
<a class="header-badge" target="_blank" href="https://twitter.com/Asabeneh">
|
||||
<img alt="Twitter Follow" src="https://img.shields.io/twitter/follow/asabeneh?style=social">
|
||||
</a>
|
||||
|
||||
<sub>Author:
|
||||
<a href="https://www.linkedin.com/in/asabeneh/" target="_blank">Asabeneh Yetayeh</a><br>
|
||||
<small> January, 2020</small>
|
||||
</sub>
|
||||
|
||||
</div>
|
||||
|
||||
[<< Day 12](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/12_Day/12_day_regular_expressions.md) | [Day 14>>](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/14_Day/14_day_error_handling.md)
|
||||
|
||||
|
||||
|
||||
- [Day 13](#day-13)
|
||||
- [Console Object Methods](#console-object-methods)
|
||||
- [console.log()](#consolelog)
|
||||
- [console.warn()](#consolewarn)
|
||||
- [console.error()](#consoleerror)
|
||||
- [console.table()](#consoletable)
|
||||
- [console.time()](#consoletime)
|
||||
- [console.info()](#consoleinfo)
|
||||
- [console.assert()](#consoleassert)
|
||||
- [console.group()](#consolegroup)
|
||||
- [console.count()](#consolecount)
|
||||
- [console.clear()](#consoleclear)
|
||||
- [Exercises](#exercises)
|
||||
- [Exercises:Level 1](#exerciseslevel-1)
|
||||
- [Exercises:Level 2](#exerciseslevel-2)
|
||||
- [Exercises:Level 3](#exerciseslevel-3)
|
||||
|
||||
# Day 13
|
||||
|
||||
## Console Object Methods
|
||||
|
||||
In this section, we will cover about console and console object methods. Absolute beginners usually do not know which to use: console.log(), document.write() or document.getElementById.
|
||||
|
||||
We use console object methods to show output on the browser console and we use document.write to show output on the browser document(view port). Both methods used only for testing and debugging purposes. The console method is the most popular testing and debugging tool on the browser. We use document.getElementById() when we like to interact with DOM try using JavaScript. We will cover DOM in another section.
|
||||
|
||||
In addition to the famous, console.log() method, the console provides other more methods methods.
|
||||
|
||||
### console.log()
|
||||
|
||||
We use console.log() to show output on the browser console. We can substitute values and also we can style the logging out put using %c.
|
||||
|
||||
- Showing output on browser console
|
||||
|
||||
```js
|
||||
console.log('30 Days of JavaScript')
|
||||
```
|
||||
|
||||
```sh
|
||||
30 Days of JavaScript
|
||||
```
|
||||
|
||||
- Substitution
|
||||
|
||||
```js
|
||||
console.log('%d %s of JavaScript', 30, 'Days')
|
||||
```
|
||||
|
||||
```sh
|
||||
30 Days of JavaScript
|
||||
```
|
||||
|
||||
- CSS
|
||||
|
||||
We can style logging message using css. Copy the following code and paste it on browser console to see the result.
|
||||
|
||||
```js
|
||||
console.log('%c30 Days Of JavaScript', 'color:green') // log output is green
|
||||
console.log(
|
||||
'%c30 Days%c %cOf%c %cJavaScript%c',
|
||||
'color:green',
|
||||
'',
|
||||
'color:red',
|
||||
'',
|
||||
'color:yellow'
|
||||
) // log output green red and yellow text
|
||||
```
|
||||
|
||||
### console.warn()
|
||||
|
||||
We use console.warn() to give warning on browser. For instance to inform or warn deprecation of version of a package or bad practices. Copy the following code and paste it on browser console to see warning messages.
|
||||
|
||||
```js
|
||||
console.warn('This is a warning')
|
||||
console.warn(
|
||||
'You are using React. Do not touch the DOM. Virtual DOM will take care of handling the DOM!'
|
||||
)
|
||||
console.warn('Warning is different from error')
|
||||
```
|
||||
|
||||
### console.error()
|
||||
|
||||
The console.error() methods shows an error messages.
|
||||
|
||||
```js
|
||||
console.error('This is an error message')
|
||||
console.error('We all make mistakes')
|
||||
```
|
||||
|
||||
### console.table()
|
||||
|
||||
The console.table() method display data as a table on the console. Displays tabular data as a table. The console.table() takes one required argument data, which must be an array or an object, and one additional optional parameter columns.
|
||||
|
||||
Let us first start with a simple array. The code below displays a table with two columns. An index column to display the index and value column to display the names
|
||||
|
||||
```js
|
||||
const names = ['Asabeneh', 'Brook', 'David', 'John']
|
||||
console.table(names)
|
||||
```
|
||||
|
||||
Let us also check the result of an object. This creates table with two columns:an index column containing the keys and a value column contain the values of the object.
|
||||
|
||||
```js
|
||||
const user = {
|
||||
name: 'Asabeneh',
|
||||
title: 'Programmer',
|
||||
country: 'Finland',
|
||||
city: 'Helsinki',
|
||||
age: 250
|
||||
}
|
||||
console.table(user)
|
||||
```
|
||||
|
||||
Check the rest of the examples by copying and paste on the browser console.
|
||||
|
||||
```js
|
||||
const countries = [
|
||||
['Finland', 'Helsinki'],
|
||||
['Sweden', 'Stockholm'],
|
||||
['Norway', 'Oslo']
|
||||
]
|
||||
console.table(countries)
|
||||
```
|
||||
|
||||
```js
|
||||
const users = [
|
||||
{
|
||||
name: 'Asabeneh',
|
||||
title: 'Programmer',
|
||||
country: 'Finland',
|
||||
city: 'Helsinki',
|
||||
age: 250
|
||||
},
|
||||
{
|
||||
name: 'Eyob',
|
||||
title: 'Teacher',
|
||||
country: 'Sweden',
|
||||
city: 'London',
|
||||
age: 25
|
||||
},
|
||||
{
|
||||
name: 'Asab',
|
||||
title: 'Instructor',
|
||||
country: 'Norway',
|
||||
city: 'Oslo',
|
||||
age: 22
|
||||
},
|
||||
{
|
||||
name: 'Matias',
|
||||
title: 'Developer',
|
||||
country: 'Denmark',
|
||||
city: 'Copenhagen',
|
||||
age: 28
|
||||
}
|
||||
]
|
||||
console.table(users)
|
||||
```
|
||||
|
||||
### console.time()
|
||||
|
||||
Starts a timer you can use to track how long an operation takes. You give each timer a unique name, and may have up to 10,000 timers running on a given page. When you call console.timeEnd() with the same name, the browser will output the time, in milliseconds, that elapsed since the timer was started.
|
||||
|
||||
```js
|
||||
const countries = [
|
||||
['Finland', 'Helsinki'],
|
||||
['Sweden', 'Stockholm'],
|
||||
['Norway', 'Oslo']
|
||||
]
|
||||
|
||||
console.time('Regular for loop')
|
||||
for (let i = 0; i < countries.length; i++) {
|
||||
console.log(countries[i][0], countries[i][1])
|
||||
}
|
||||
console.timeEnd('Regular for loop')
|
||||
|
||||
console.time('for of loop')
|
||||
for (const [name, city] of countries) {
|
||||
console.log(name, city)
|
||||
}
|
||||
console.timeEnd('for of loop')
|
||||
|
||||
console.time('forEach loop')
|
||||
countries.forEach(([name, city]) => {
|
||||
console.log(name, city)
|
||||
})
|
||||
console.timeEnd('forEach loop')
|
||||
```
|
||||
|
||||
```sh
|
||||
Finland Helsinki
|
||||
Sweden Stockholm
|
||||
Norway Oslo
|
||||
Regular for loop: 0.34716796875ms
|
||||
Finland Helsinki
|
||||
Sweden Stockholm
|
||||
Norway Oslo
|
||||
for of loop: 0.26806640625ms
|
||||
Finland Helsinki
|
||||
Sweden Stockholm
|
||||
Norway Oslo
|
||||
forEach loop: 0.358154296875ms
|
||||
```
|
||||
|
||||
According the above output the regular for loop is slower than for of or forEach loop.
|
||||
|
||||
### console.info()
|
||||
|
||||
It display information message on browser console.
|
||||
|
||||
```js
|
||||
console.info('30 Days Of JavaScript challenge is trending on Github')
|
||||
console.info('30 Days Of fullStack challenge might be released')
|
||||
console.info('30 Days Of HTML and CSS challenge might be released')
|
||||
```
|
||||
|
||||
### console.assert()
|
||||
|
||||
The console.assert() methods writes an error message to the console if the assertion is false. If the assertion is true, nothing happens. The first parameter is an assertion expression. If this expression is false, an Assertion failed error message will be displayed.
|
||||
|
||||
```js
|
||||
console.assert(4 > 3, '4 is greater than 3') // no result
|
||||
console.assert(3 > 4, '3 is not greater than 4') // Assertion failed: 3 is not greater than 4
|
||||
|
||||
for (let i = 0; i <= 10; i += 1) {
|
||||
let errorMessage = `${i} is not even`
|
||||
console.log('the # is ' + i)
|
||||
console.assert(i % 2 === 0, { number: i, errorMessage: errorMessage })
|
||||
}
|
||||
```
|
||||
|
||||
### console.group()
|
||||
|
||||
The console.group() can help to group different log groups. Copy the following code and paste it on browser console to the groups.
|
||||
|
||||
```js
|
||||
const names = ['Asabeneh', 'Brook', 'David', 'John']
|
||||
const countries = [
|
||||
['Finland', 'Helsinki'],
|
||||
['Sweden', 'Stockholm'],
|
||||
['Norway', 'Oslo']
|
||||
]
|
||||
const user = {
|
||||
name: 'Asabeneh',
|
||||
title: 'Programmer',
|
||||
country: 'Finland',
|
||||
city: 'Helsinki',
|
||||
age: 250
|
||||
}
|
||||
const users = [
|
||||
{
|
||||
name: 'Asabeneh',
|
||||
title: 'Programmer',
|
||||
country: 'Finland',
|
||||
city: 'Helsinki',
|
||||
age: 250
|
||||
},
|
||||
{
|
||||
name: 'Eyob',
|
||||
title: 'Teacher',
|
||||
country: 'Sweden',
|
||||
city: 'London',
|
||||
age: 25
|
||||
},
|
||||
{
|
||||
name: 'Asab',
|
||||
title: 'Instructor',
|
||||
country: 'Norway',
|
||||
city: 'Oslo',
|
||||
age: 22
|
||||
},
|
||||
{
|
||||
name: 'Matias',
|
||||
title: 'Developer',
|
||||
country: 'Denmark',
|
||||
city: 'Copenhagen',
|
||||
age: 28
|
||||
}
|
||||
]
|
||||
|
||||
console.group('Names')
|
||||
console.log(names)
|
||||
console.groupEnd()
|
||||
|
||||
console.group('Countries')
|
||||
console.log(countries)
|
||||
console.groupEnd()
|
||||
|
||||
console.group('Users')
|
||||
console.log(user)
|
||||
console.log(users)
|
||||
console.groupEnd()
|
||||
```
|
||||
|
||||
### console.count()
|
||||
|
||||
It prints the number of time this console.count() is called. It takes a string label parameter. It is very helpful to count the number of times a function is called. In the following example, the console.count() method will run three times
|
||||
|
||||
```js
|
||||
const func = () => {
|
||||
console.count('Function has been called')
|
||||
}
|
||||
func()
|
||||
func()
|
||||
func()
|
||||
```
|
||||
|
||||
```sh
|
||||
Function has been called: 1
|
||||
Function has been called: 2
|
||||
Function has been called: 3
|
||||
```
|
||||
|
||||
### console.clear()
|
||||
|
||||
The console.clear() cleans the browser console.
|
||||
|
||||
🌕 Keep up the good work. Keep pushing, the sky is the limit! You have just completed day 13 challenges and you are 13 steps a head in to your way to greatness. Now do some exercises for your brain and for your muscle.
|
||||
|
||||
## Exercises
|
||||
|
||||
### Exercises:Level 1
|
||||
|
||||
1. Display the countries array as a table
|
||||
2. Display the countries object as a table
|
||||
3. Use console.group() to group logs
|
||||
|
||||
### Exercises:Level 2
|
||||
|
||||
1. 10 > 2 \* 10 use console.assert()
|
||||
2. Write a warning message using console.warn()
|
||||
3. Write an error message using console.error()
|
||||
|
||||
### Exercises:Level 3
|
||||
|
||||
1. Check the speed difference among the following loops: while, for, for of, forEach
|
||||
|
||||
🎉 CONGRATULATIONS ! 🎉
|
||||
|
||||
[<< Day 12](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/12_Day/12_day_regular_expressions.md) | [Day 14>>](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/14_Day/14_day_error_handling.md)
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,17 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>30DaysOfJavaScript:13 Day </title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>30DaysOfJavaScript:13 Day</h1>
|
||||
<h2>Console Object Methods</h2>
|
||||
|
||||
<script src="./data/countries_data.js"></script>
|
||||
<script src="./scripts/main.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -0,0 +1,2 @@
|
||||
console.log(countries)
|
||||
alert('Open the console and check if the countries has been loaded')
|
||||
@ -0,0 +1,193 @@
|
||||
<div align="center">
|
||||
<h1> 30 Days Of JavaScript</h1>
|
||||
<a class="header-badge" target="_blank" href="https://www.linkedin.com/in/asabeneh/">
|
||||
<img src="https://img.shields.io/badge/style--5eba00.svg?label=LinkedIn&logo=linkedin&style=social">
|
||||
</a>
|
||||
<a class="header-badge" target="_blank" href="https://twitter.com/Asabeneh">
|
||||
<img alt="Twitter Follow" src="https://img.shields.io/twitter/follow/asabeneh?style=social">
|
||||
</a>
|
||||
|
||||
<sub>Author:
|
||||
<a href="https://www.linkedin.com/in/asabeneh/" target="_blank">Asabeneh Yetayeh</a><br>
|
||||
<small> January, 2020</small>
|
||||
</sub>
|
||||
|
||||
</div>
|
||||
|
||||
[<< Day 13](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/13_Day/13_day_console_object_methods.md) | [Day 15>>](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/15_Day/15_day_classes.md)
|
||||
|
||||
|
||||
|
||||
- [Day 14](#day-14)
|
||||
- [Error Handling](#error-handling)
|
||||
- [Error Types](#error-types)
|
||||
- [Exercises](#exercises)
|
||||
- [Exercises:Level 1](#exerciseslevel-1)
|
||||
- [Exercises: Level 2](#exercises-level-2)
|
||||
- [Exercises:Level](#exerciseslevel)
|
||||
|
||||
# Day 14
|
||||
|
||||
## Error Handling
|
||||
|
||||
JavaScript is a loosely-typed language. Some times you will get a runtime error when you try to access an undefined variable or call undefined function etc.
|
||||
|
||||
JavaScript similar to python or Java provides an error-handling mechanism to catch runtime errors using try-catch-finally block.
|
||||
|
||||
```js
|
||||
try {
|
||||
// code that may throw an error
|
||||
} catch (err) {
|
||||
// code to be executed if an error occurs
|
||||
} finally {
|
||||
// code to be executed regardless of an error occurs or not
|
||||
}
|
||||
```
|
||||
|
||||
**try**: wrap suspicious code that may throw an error in try block.The try statement allows us to define a block of code to be tested for errors while it is being executed.
|
||||
|
||||
**catch**: write code to do something in catch block when an error occurs. The catch block can have parameters that will give you error information. Catch block is used to log an error or display specific messages to the user.
|
||||
|
||||
**finally**: finally block will always be executed regardless of the occurrence of an error. The finally block can be used to complete the remaining task or reset variables that might have changed before error occurred in try block.
|
||||
|
||||
**Example:**
|
||||
|
||||
```js
|
||||
try {
|
||||
let lastName = 'Yetayeh'
|
||||
let fullName = fistName + ' ' + lastName
|
||||
} catch (err) {
|
||||
console.log(err)
|
||||
}
|
||||
```
|
||||
|
||||
```sh
|
||||
ReferenceError: fistName is not defined
|
||||
at <anonymous>:4:20
|
||||
```
|
||||
|
||||
```js
|
||||
try {
|
||||
let lastName = 'Yetayeh'
|
||||
let fullName = fistName + ' ' + lastName
|
||||
} catch (err) {
|
||||
console.error(err) // we can use console.log() or console.error()
|
||||
} finally {
|
||||
console.log('In any case I will be executed')
|
||||
}
|
||||
```
|
||||
|
||||
```sh
|
||||
ReferenceError: fistName is not defined
|
||||
at <anonymous>:4:20
|
||||
In any case I will be executed
|
||||
```
|
||||
|
||||
The catch block take a parameter. It is common to pass e, err or error as a parameter to the catch block. This parameter is an object and it has name and message keys. Lets use the name and message.
|
||||
|
||||
```js
|
||||
try {
|
||||
let lastName = 'Yetayeh'
|
||||
let fullName = fistName + ' ' + lastName
|
||||
} catch (err) {
|
||||
console.log('Name of the error', err.name)
|
||||
console.log('Error message', err.message)
|
||||
} finally {
|
||||
console.log('In any case I will be executed')
|
||||
}
|
||||
```
|
||||
|
||||
```sh
|
||||
Name of the error ReferenceError
|
||||
Error message fistName is not defined
|
||||
In any case I will be executed
|
||||
```
|
||||
|
||||
throw: the throw statement allows us to create a custom error. We can through a string, number, boolean or an object. Use the throw statement to throw an exception. When you throw an exception, expression specifies the value of the exception. Each of the following throws an exception:
|
||||
|
||||
```js
|
||||
throw 'Error2' // generates an exception with a string value
|
||||
throw 42 // generates an exception with the value 42
|
||||
throw true // generates an exception with the value true
|
||||
throw new Error('Required') // generates an error object with the message of Required
|
||||
```
|
||||
|
||||
```js
|
||||
const throwErroExampleFun = () => {
|
||||
let message
|
||||
let x = prompt('Enter a number: ')
|
||||
try {
|
||||
if (x == '') throw 'empty'
|
||||
if (isNaN(x)) throw 'not a number'
|
||||
x = Number(x)
|
||||
if (x < 5) throw 'too low'
|
||||
if (x > 10) throw 'too high'
|
||||
} catch (err) {
|
||||
console.log(err)
|
||||
}
|
||||
}
|
||||
throwErroExampleFun()
|
||||
```
|
||||
|
||||
### Error Types
|
||||
|
||||
- ReferenceError: An illegal reference has occurred. A ReferenceError is thrown if we use a variable that has not been declared.
|
||||
|
||||
```js
|
||||
let firstName = 'Asabeneh'
|
||||
let fullName = firstName + ' ' + lastName
|
||||
|
||||
console.log(fullName)
|
||||
```
|
||||
|
||||
```sh
|
||||
Uncaught ReferenceError: lastName is not defined
|
||||
at <anonymous>:2:35
|
||||
```
|
||||
|
||||
- SyntaxError: A syntax error has occurred
|
||||
|
||||
```js
|
||||
let square = 2 x 2
|
||||
console.log(square)
|
||||
|
||||
console.log('Hello, world")
|
||||
```
|
||||
|
||||
```sh
|
||||
Uncaught SyntaxError: Unexpected identifier
|
||||
```
|
||||
|
||||
- TypeError: A type error has occurred
|
||||
|
||||
```js
|
||||
let num = 10
|
||||
console.log(num.toLowerCase())
|
||||
```
|
||||
|
||||
```sh
|
||||
Uncaught TypeError: num.toLowerCase is not a function
|
||||
at <anonymous>:2:17
|
||||
```
|
||||
|
||||
These are some of the common error you may face when you write a code. Understanding errors can help you to know what mistakes you made and it will help you to debug your code fast.
|
||||
|
||||
🌕 You are flawless. Now, you knew how to handle errors and you can write robust application which handle unexpected user inputs. You have just completed day 14 challenges and you are 14 steps a head in to your way to greatness. Now do some exercises for your brain and for your muscle.
|
||||
|
||||
## Exercises
|
||||
|
||||
### Exercises:Level 1
|
||||
|
||||
Practice
|
||||
|
||||
### Exercises: Level 2
|
||||
|
||||
Practice
|
||||
|
||||
### Exercises:Level
|
||||
|
||||
Practice
|
||||
|
||||
🎉 CONGRATULATIONS ! 🎉
|
||||
|
||||
[<< Day 13](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/13_Day/13_day_console_object_methods.md) | [Day 15>>](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/15_Day/15_day_classes.md)
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,17 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>30DaysOfJavaScript:12 Day </title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>30DaysOfJavaScript:14 Day</h1>
|
||||
<h2>DOM</h2>
|
||||
|
||||
<script src="./data/countries_data.js"></script>
|
||||
<script src="./scripts/main.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -0,0 +1,2 @@
|
||||
console.log(countries)
|
||||
alert('Open the console and check if the countries has been loaded')
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,17 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>30DaysOfJavaScript:15 Day </title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>30DaysOfJavaScript:15 Day</h1>
|
||||
<h2>Classes</h2>
|
||||
|
||||
<script src="./data/countries_data.js"></script>
|
||||
<script src="./scripts/main.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -0,0 +1,105 @@
|
||||
|
||||
|
||||
class Person {
|
||||
constructor(firstName, lastName, age, country, city) {
|
||||
this.firstName = firstName
|
||||
this.lastName = lastName
|
||||
this.age = age
|
||||
this.country = country
|
||||
this.city = city
|
||||
this.score = 0
|
||||
this.skills = []
|
||||
}
|
||||
getFullName() {
|
||||
const fullName = this.firstName + ' ' + this.lastName
|
||||
return fullName
|
||||
}
|
||||
get getScore() {
|
||||
return this.score
|
||||
}
|
||||
get getSkills() {
|
||||
return this.skills
|
||||
}
|
||||
set setScore(score) {
|
||||
this.score += score
|
||||
}
|
||||
set setSkill(skill) {
|
||||
this.skills.push(skill)
|
||||
}
|
||||
getPersonInfo() {
|
||||
let fullName = this.getFullName()
|
||||
let skills =
|
||||
this.skills.length > 0 &&
|
||||
this.skills.slice(0, this.skills.length - 1).join(', ') +
|
||||
` and ${this.skills[this.skills.length - 1]}`
|
||||
|
||||
let formattedSkills = skills ? `He knows ${skills}` : ''
|
||||
|
||||
let info = `${fullName} is ${this.age}. He lives ${this.city}, ${this.country}. ${formattedSkills}`
|
||||
console.log(this)
|
||||
return info
|
||||
}
|
||||
static favoriteSkill() {
|
||||
const skills = ['HTML', 'CSS', 'JS', 'React', 'Python', 'Node']
|
||||
const index = Math.floor(Math.random() * skills.length)
|
||||
console.log('hi')
|
||||
return skills[index]
|
||||
}
|
||||
}
|
||||
|
||||
console.log(Person.favoriteSkill())
|
||||
|
||||
class Student extends Person {
|
||||
constructor(firstName, lastName, age, country, city, gender) {
|
||||
super(firstName, lastName, age, country, city)
|
||||
this.gender = gender
|
||||
}
|
||||
|
||||
saySomething() {
|
||||
console.log('I am a child of the person class')
|
||||
}
|
||||
getPersonInfo() {
|
||||
let fullName = this.getFullName()
|
||||
let skills =
|
||||
this.skills.length > 0 &&
|
||||
this.skills.slice(0, this.skills.length - 1).join(', ') +
|
||||
` and ${this.skills[this.skills.length - 1]}`
|
||||
|
||||
let formattedSkills = skills ? `He knows ${skills}` : ''
|
||||
let pronoun = this.gender == 'Male' ? 'He' : 'She'
|
||||
|
||||
let info = `${fullName} is ${this.age}. ${pronoun} lives in ${this.city}, ${this.country}. ${formattedSkills}`
|
||||
console.log(this)
|
||||
return info
|
||||
}
|
||||
}
|
||||
|
||||
const s1 = new Student(
|
||||
'Asabeneh',
|
||||
'Yetayeh',
|
||||
250,
|
||||
'Finland',
|
||||
'Helsinki',
|
||||
'Male'
|
||||
)
|
||||
const s2 = new Student('Lidiya', 'Tekle', 28, 'Finland', 'Helsinki', 'Female')
|
||||
s1.setScore = 1
|
||||
s1.setSkill = 'HTML'
|
||||
s1.setSkill = 'CSS'
|
||||
s1.setSkill = 'JavaScript'
|
||||
|
||||
s2.setScore = 1
|
||||
s2.setSkill = 'Planning'
|
||||
s2.setSkill = 'Managing'
|
||||
s2.setSkill = 'Organizing'
|
||||
|
||||
console.log(s1)
|
||||
console.log(s2)
|
||||
|
||||
console.log(s1.saySomething())
|
||||
console.log(s1.getFullName())
|
||||
console.log(s1.getPersonInfo())
|
||||
|
||||
console.log(s2.saySomething())
|
||||
console.log(s2.getFullName())
|
||||
console.log(s2.getPersonInfo())
|
||||
@ -0,0 +1,597 @@
|
||||
<div align="center">
|
||||
<h1> 30 Days Of JavaScript</h1>
|
||||
<a class="header-badge" target="_blank" href="https://www.linkedin.com/in/asabeneh/">
|
||||
<img src="https://img.shields.io/badge/style--5eba00.svg?label=LinkedIn&logo=linkedin&style=social">
|
||||
</a>
|
||||
<a class="header-badge" target="_blank" href="https://twitter.com/Asabeneh">
|
||||
<img alt="Twitter Follow" src="https://img.shields.io/twitter/follow/asabeneh?style=social">
|
||||
</a>
|
||||
|
||||
<sub>Author:
|
||||
<a href="https://www.linkedin.com/in/asabeneh/" target="_blank">Asabeneh Yetayeh</a><br>
|
||||
<small> January, 2020</small>
|
||||
</sub>
|
||||
|
||||
</div>
|
||||
|
||||
[<< Day 15](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/15_Day/15_day_classes.md) | [Day 17 >>](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/17_Day/17_day_web_storage.md)
|
||||
|
||||
|
||||
|
||||
- [Day 16](#day-16)
|
||||
- [JSON](#json)
|
||||
- [Converting JSON to JavaScript Object](#converting-json-to-javascript-object)
|
||||
- [JSON.parse()](#jsonparse)
|
||||
- [Using a reviver function with JSON.parse()](#using-a-reviver-function-with-jsonparse)
|
||||
- [Converting Object to JSON](#converting-object-to-json)
|
||||
- [Using a Filter Array with JSON.stringify](#using-a-filter-array-with-jsonstringify)
|
||||
- [Exercises](#exercises)
|
||||
- [Exercises Level 1](#exercises-level-1)
|
||||
- [Exercises Level 2](#exercises-level-2)
|
||||
- [Exercises Level 3](#exercises-level-3)
|
||||
|
||||
# Day 16
|
||||
|
||||
## JSON
|
||||
|
||||
JSON stands for JavaScript Object Notation. The JSON syntax is derived from JavaScript object notation syntax, but the JSON format is text or string only. JSON is a light weight data format for storing and transporting. JSON is mostly used when data is sent from a server to a client. JSON is an easier-to-use alternative to XML.
|
||||
|
||||
**Example:**
|
||||
|
||||
```js
|
||||
{
|
||||
"users":[
|
||||
{
|
||||
"firstName":"Asabeneh",
|
||||
"lastName":"Yetayeh",
|
||||
"age":250,
|
||||
"email":"asab@asb.com"
|
||||
},
|
||||
{
|
||||
"firstName":"Alex",
|
||||
"lastName":"James",
|
||||
"age":25,
|
||||
"email":"alex@alex.com"
|
||||
},
|
||||
{
|
||||
"firstName":"Lidiya",
|
||||
"lastName":"Tekle",
|
||||
"age":28,
|
||||
"email":"lidiya@lidiya.com"
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
The above JSON example is not much different for a normal object. Then, what is the difference ? The difference is the key of a JSON object should be with double quotes or it should be a string. JavaScript Object and JSON are very similar that we can change JSON to Object and Object to JSON.
|
||||
|
||||
Let us see the above example in more detail, it starts with a curly bracket. Inside the curly bracket, there is "users" key which has a value array. Inside the array we have different objects and each objects has keys, each keys has to have double quotes. For instance, we use "firstNaMe" instead of just firstName, however in object we use keys without double quotes. This is the major difference between an object and a JSON. Let's see more examples about JSON.
|
||||
|
||||
**Example:**
|
||||
|
||||
```js
|
||||
{
|
||||
"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
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Converting JSON to JavaScript Object
|
||||
|
||||
Mostly we fetch JSON data from HTTP response or from a file, but we can store the JSON as a string and we can change to Object for sake of demonstration. In JavaScript the keyword _JSON_ has _parse()_ and _stringify()_ methods. When we want to change the JSON to an object we parse the JSON using _JSON.parse()_. When we want to change the object to JSON we use _JSON.stringify()_.
|
||||
|
||||
#### JSON.parse()
|
||||
|
||||
```js
|
||||
JSON.parse(json[, reviver])
|
||||
// json or text , the data
|
||||
// reviver is an optional callback function
|
||||
```
|
||||
|
||||
```js
|
||||
const usersText = `{
|
||||
"users":[
|
||||
{
|
||||
"firstName":"Asabeneh",
|
||||
"lastName":"Yetayeh",
|
||||
"age":250,
|
||||
"email":"asab@asb.com"
|
||||
},
|
||||
{
|
||||
"firstName":"Alex",
|
||||
"lastName":"James",
|
||||
"age":25,
|
||||
"email":"alex@alex.com"
|
||||
},
|
||||
{
|
||||
"firstName":"Lidiya",
|
||||
"lastName":"Tekle",
|
||||
"age":28,
|
||||
"email":"lidiya@lidiya.com"
|
||||
}
|
||||
]
|
||||
}`
|
||||
|
||||
const usersObj = JSON.parse(usersText, undefined, 4)
|
||||
console.log(usersObj)
|
||||
```
|
||||
|
||||
### Using a reviver function with JSON.parse()
|
||||
|
||||
To use the reviver function as a formatter, we put the keys we want to format first name and last name value. Let us say, we are interested to format the firstName and lastName of the JSON data .
|
||||
|
||||
```js
|
||||
const usersText = `{
|
||||
"users":[
|
||||
{
|
||||
"firstName":"Asabeneh",
|
||||
"lastName":"Yetayeh",
|
||||
"age":250,
|
||||
"email":"asab@asb.com"
|
||||
},
|
||||
{
|
||||
"firstName":"Alex",
|
||||
"lastName":"James",
|
||||
"age":25,
|
||||
"email":"alex@alex.com"
|
||||
},
|
||||
{
|
||||
"firstName":"Lidiya",
|
||||
"lastName":"Tekle",
|
||||
"age":28,
|
||||
"email":"lidiya@lidiya.com"
|
||||
}
|
||||
]
|
||||
}`
|
||||
|
||||
const usersObj = JSON.parse(usersText, (key, value) => {
|
||||
let newValue =
|
||||
typeof value == 'string' && key != 'email' ? value.toUpperCase() : value
|
||||
return newValue
|
||||
})
|
||||
console.log(usersObj)
|
||||
```
|
||||
|
||||
The _JSON.parse()_ is very handy to use. You do not have to pass optional parameter, you can just use it with the required parameter and you will achieve quite a lot.
|
||||
|
||||
### Converting Object to JSON
|
||||
|
||||
When we want to change the object to JSON we use _JSON.stringify()_. The stringify method takes one required parameter and two optional parameters. The replacer is used as filter and the space is an indentations. If we do not want to filter out any of the keys from the object we can just pass undefined.
|
||||
|
||||
```js
|
||||
JSON.stringify(obj, replacer, space)
|
||||
// json or text , the data
|
||||
// reviver is an optional callback function
|
||||
```
|
||||
|
||||
Let us convert the following object to a string. First let use keep all the keys and also let us have 4 space indentation.
|
||||
|
||||
```js
|
||||
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
|
||||
}
|
||||
}
|
||||
|
||||
const txt = JSON.stringify(users, undefined, 4)
|
||||
console.log(txt) // text means JSON- because json is a string form of an object.
|
||||
```
|
||||
|
||||
```sh
|
||||
{
|
||||
"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
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Using a Filter Array with JSON.stringify
|
||||
|
||||
Now, lets use the replacer as a filter. The user object has long list of keys but we are interested only in few of them. We put the keys we want to keep in array as show in the example and use it the place of the replacer.
|
||||
|
||||
```js
|
||||
const user = {
|
||||
firstName: 'Asabeneh',
|
||||
lastName: 'Yetayeh',
|
||||
country: 'Finland',
|
||||
city: 'Helsinki',
|
||||
email: 'alex@alex.com',
|
||||
skills: ['HTML', 'CSS', 'JavaScript', 'React', 'Pyhton'],
|
||||
age: 250,
|
||||
isLoggedIn: false,
|
||||
points: 30
|
||||
}
|
||||
|
||||
const txt = JSON.stringify(user,['firstName', 'lastName', 'country', 'city', 'age'],4)
|
||||
console.log(txt)
|
||||
```
|
||||
|
||||
```sh
|
||||
{
|
||||
"firstName": "Asabeneh",
|
||||
"lastName": "Yetayeh",
|
||||
"country": "Finland",
|
||||
"city": "Helsinki",
|
||||
"age": 250
|
||||
}
|
||||
```
|
||||
|
||||
🌕 You are extraordinary. Now, you knew a light-weight data format which you may use to store data or to send it an HTTP server. You are 16 steps a head to your way to greatness. Now do some exercises for your brain and for your muscle.
|
||||
|
||||
## Exercises
|
||||
|
||||
```js
|
||||
const skills = ['HTML', 'CSS', 'JS', 'React','Node', 'Python']
|
||||
let age = 250;
|
||||
let isMarried = true
|
||||
const student = {
|
||||
firstName:'Asabeneh',
|
||||
lastName:'Yetayehe',
|
||||
age:250,
|
||||
isMarried:true,
|
||||
skills:['HTML', 'CSS', 'JS', 'React','Node', 'Python', ]
|
||||
}
|
||||
const text = `{
|
||||
"Alex": {
|
||||
"email": "alex@alex.com",
|
||||
"skills": [
|
||||
"HTML",
|
||||
"CSS",
|
||||
"JavaScript"
|
||||
],
|
||||
"age": 20,
|
||||
"isLoggedIn": false,
|
||||
"points": 30
|
||||
},
|
||||
"Asab": {
|
||||
"email": "asab@asab.com",
|
||||
"skills": [
|
||||
"HTML",
|
||||
"CSS",
|
||||
"JavaScript",
|
||||
"Redux",
|
||||
"MongoDB",
|
||||
"Express",
|
||||
"React",
|
||||
"Node"
|
||||
],
|
||||
"age": 25,
|
||||
"isLoggedIn": false,
|
||||
"points": 50
|
||||
},
|
||||
"Brook": {
|
||||
"email": "daniel@daniel.com",
|
||||
"skills": [
|
||||
"HTML",
|
||||
"CSS",
|
||||
"JavaScript",
|
||||
"React",
|
||||
"Redux"
|
||||
],
|
||||
"age": 30,
|
||||
"isLoggedIn": true,
|
||||
"points": 50
|
||||
},
|
||||
"Daniel": {
|
||||
"email": "daniel@alex.com",
|
||||
"skills": [
|
||||
"HTML",
|
||||
"CSS",
|
||||
"JavaScript",
|
||||
"Python"
|
||||
],
|
||||
"age": 20,
|
||||
"isLoggedIn": false,
|
||||
"points": 40
|
||||
},
|
||||
"John": {
|
||||
"email": "john@john.com",
|
||||
"skills": [
|
||||
"HTML",
|
||||
"CSS",
|
||||
"JavaScript",
|
||||
"React",
|
||||
"Redux",
|
||||
"Node.js"
|
||||
],
|
||||
"age": 20,
|
||||
"isLoggedIn": true,
|
||||
"points": 50
|
||||
},
|
||||
"Thomas": {
|
||||
"email": "thomas@thomas.com",
|
||||
"skills": [
|
||||
"HTML",
|
||||
"CSS",
|
||||
"JavaScript",
|
||||
"React"
|
||||
],
|
||||
"age": 20,
|
||||
"isLoggedIn": false,
|
||||
"points": 40
|
||||
},
|
||||
"Paul": {
|
||||
"email": "paul@paul.com",
|
||||
"skills": [
|
||||
"HTML",
|
||||
"CSS",
|
||||
"JavaScript",
|
||||
"MongoDB",
|
||||
"Express",
|
||||
"React",
|
||||
"Node"
|
||||
],
|
||||
"age": 20,
|
||||
"isLoggedIn": false,
|
||||
"points": 40
|
||||
}
|
||||
}
|
||||
`
|
||||
```
|
||||
|
||||
### Exercises Level 1
|
||||
|
||||
1. Change skills array to JSON using JSON.stringify()
|
||||
|
||||
1. Stringify the age variable
|
||||
|
||||
1. Stringify the isMarried variable
|
||||
|
||||
1. Stringify the student object
|
||||
|
||||
### Exercises Level 2
|
||||
|
||||
1. Stringify the students object with only firstName, lastName and skills properties
|
||||
|
||||
### Exercises Level 3
|
||||
|
||||
1. Parse the *text* JSON to object.
|
||||
2. Find the the user who has many skills.
|
||||
|
||||
🎉 CONGRATULATIONS ! 🎉
|
||||
|
||||
[<< Day 15](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/15_Day/15_day_classes.md) | [Day 17 >>](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/17_Day/17_day_web_storage.md)
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,17 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>30DaysOfJavaScript:16 Day </title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>30DaysOfJavaScript:16 Day</h1>
|
||||
<h2>JSON</h2>
|
||||
|
||||
<script src="./data/countries_data.js"></script>
|
||||
<script src="./scripts/main.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -0,0 +1,2 @@
|
||||
console.log(countries)
|
||||
alert('Open the console and check if the countries has been loaded')
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,16 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>30DaysOfJavaScript:17 Day </title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>30DaysOfJavaScript:17 Day</h1>
|
||||
<h2>Web Storage</h2>
|
||||
|
||||
<script src="./scripts/main.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
Before Width: | Height: | Size: 75 KiB After Width: | Height: | Size: 75 KiB |
|
Before Width: | Height: | Size: 74 KiB After Width: | Height: | Size: 74 KiB |
|
Before Width: | Height: | Size: 75 KiB After Width: | Height: | Size: 75 KiB |
|
Before Width: | Height: | Size: 75 KiB After Width: | Height: | Size: 75 KiB |
|
Before Width: | Height: | Size: 75 KiB After Width: | Height: | Size: 75 KiB |
|
After Width: | Height: | Size: 234 KiB |
|
After Width: | Height: | Size: 83 KiB |
|
After Width: | Height: | Size: 183 KiB |
@ -0,0 +1,109 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Document Object Model:30 Days Of JavaScript</title>
|
||||
<link href="https://fonts.googleapis.com/css?family=Aldrich|Roboto|Lato|Raleway
|
||||
:300,400,500&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
text-align: center;
|
||||
margin-top: 50px;
|
||||
font-family: 'Lato', sans-serif;
|
||||
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 36px;
|
||||
margin: 50px auto;
|
||||
background: #fbe324;
|
||||
width: 650px;
|
||||
padding: 15px;
|
||||
color: #444;
|
||||
font-weight: lighter;
|
||||
|
||||
}
|
||||
|
||||
input {
|
||||
width: 250px;
|
||||
height: 45px;
|
||||
text-indent: 10px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
input:focus {
|
||||
border: 1px solid #fbe324;
|
||||
outline: 1px solid #fbe324;
|
||||
}
|
||||
|
||||
input::placeholder {
|
||||
color: rgb(195, 190, 190);
|
||||
}
|
||||
|
||||
button {
|
||||
width: 150px;
|
||||
height: 45px;
|
||||
border: none;
|
||||
background: #fbe324;
|
||||
color: #444;
|
||||
font-size: 18px;
|
||||
font-family: 'Lato', sans-serif;
|
||||
}
|
||||
|
||||
button:focus{
|
||||
border: 1px solid #fbe324;
|
||||
outline: 1px solid #fbe324;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 15px auto;
|
||||
background: #fbe324;
|
||||
width: 650px;
|
||||
padding: 5px;
|
||||
font-size: 28px;
|
||||
font-family: 'Raleway', sans-serif;
|
||||
|
||||
}
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
padding: 5px;
|
||||
border-radius: 50%;
|
||||
background: rgb(246, 192, 91);
|
||||
line-height: 70px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>Body Mass Index Calculator</h1>
|
||||
|
||||
<input type="text" id="mass" placeholder="Mass in Kilogram" />
|
||||
<input type="text" id="height" placeholder="Height in meters" />
|
||||
<button>Calculate BMI</button>
|
||||
|
||||
<script>
|
||||
const mass = document.querySelector('#mass')
|
||||
const height = document.querySelector('#height')
|
||||
const button = document.querySelector('button')
|
||||
const bmiResult = document.createElement('p')
|
||||
let bmi
|
||||
button.addEventListener('click', () => {
|
||||
bmi = mass.value / height.value ** 2
|
||||
bmiResult.innerHTML = `<span>${bmi.toFixed(2)}</span>`
|
||||
document.body.appendChild(bmiResult)
|
||||
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in new issue