8 changed files with 116 additions and 0 deletions
+ 6
- 0
14-grid/.prettierrc
View File
| @@ -0,0 +1,6 @@ | |||
| { | |||
| "trailingComma": "es5", | |||
| "tabWidth": 4, | |||
| "semi": true, | |||
| "singleQuote": true | |||
| } | |||
+ 31
- 0
14-grid/index.html
View File
| @@ -0,0 +1,31 @@ | |||
| <!DOCTYPE html> | |||
| <html lang="en"> | |||
| <head> | |||
| <meta charset="UTF-8" /> | |||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |||
| <meta http-equiv="X-UA-Compatible" content="ie=edge" /> | |||
| <link rel="stylesheet" href="styles/main.css" /> | |||
| <title>14-grid</title> | |||
| </head> | |||
| <body> | |||
| <div class="layout"> | |||
| <div class="yellow">one</div> | |||
| <div class="yellow">two</div> | |||
| <div class="yellow">three</div> | |||
| <div class="red">four</div> | |||
| <div class="yellow">five</div> | |||
| <div class="red">six</div> | |||
| <div class="yellow">seven</div> | |||
| <div class="yellow">eight</div> | |||
| <div class="black">nine</div> | |||
| <div class="yellow">ten</div> | |||
| <div class="yellow">eleven</div> | |||
| <div class="yellow">twelve</div> | |||
| <div class="green">thirteen</div> | |||
| </div> | |||
| <script src="scripts/main.js"></script> | |||
| </body> | |||
| </html> | |||
+ 0
- 0
14-grid/scripts/main.js
View File
+ 34
- 0
14-grid/styles/main.css
View File
| @@ -0,0 +1,34 @@ | |||
| .layout { | |||
| width: 500px; | |||
| height: 500px; | |||
| display: grid; | |||
| /* grid-template-rows: [header-start] 50px [header-stop content-start] 50px [content-stop footer-start] 50px [footer-stop]; */ | |||
| /* grid-template-columns: [adds] 100px [content] 200px [links]50px; */ | |||
| grid-template-rows: repeat(4, 1fr); | |||
| grid-template-columns: 50px 40% 1fr 1fr; | |||
| row-gap: 20px; | |||
| grid-template-areas: | |||
| 'colyellow colyellow colyellow colred' | |||
| 'colyellow colred colyellow colyellow' | |||
| 'colblack colyellow colyellow colyellow' | |||
| 'colblack colgreen colgreen colgreen'; | |||
| } | |||
| .layout .red { | |||
| background-color: red; | |||
| } | |||
| .layout .green { | |||
| background-color: green; | |||
| grid-column: 2 / span 3; | |||
| } | |||
| .layout .black { | |||
| background-color: black; | |||
| grid-row: 3 / span 2; | |||
| } | |||
| .layout .yellow { | |||
| background-color: yellow; | |||
| } | |||
+ 6
- 0
15-promises/.prettierrc
View File
| @@ -0,0 +1,6 @@ | |||
| { | |||
| "trailingComma": "es5", | |||
| "tabWidth": 4, | |||
| "semi": true, | |||
| "singleQuote": true | |||
| } | |||
+ 16
- 0
15-promises/index.html
View File
| @@ -0,0 +1,16 @@ | |||
| <!DOCTYPE html> | |||
| <html lang="en"> | |||
| <head> | |||
| <meta charset="UTF-8"> | |||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |||
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |||
| <link rel="stylesheet" href="styles/main.css"> | |||
| <title>promises</title> | |||
| </head> | |||
| <body> | |||
| <script src="scripts/main.js"></script> | |||
| </body> | |||
| </html> | |||
+ 23
- 0
15-promises/scripts/main.js
View File
| @@ -0,0 +1,23 @@ | |||
| function doSomething(){ | |||
| const promise = new Promise(function(resolve,reject){ | |||
| let newAray = []; | |||
| for(let i = 0; i < 99999999;i++){ | |||
| newAray.push(i); | |||
| } | |||
| resolve(newAray); | |||
| if(newAray.length ===0){ | |||
| reject('oh ow!'); | |||
| } | |||
| }); | |||
| doSomething() | |||
| .then(function(result){ | |||
| console.log(result); | |||
| }) | |||
| .catch(function(error){ | |||
| console.log(error); | |||
| }); | |||
| } | |||
+ 0
- 0
15-promises/styles/main.css
View File
Loading…