Created
August 5, 2021 07:03
-
-
Save dnlsyfq/33be0d05da41acacf447e3d8fe5e8fea to your computer and use it in GitHub Desktop.
JavaScript Arrays // source https://jsbin.com/xudiwuv
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>JavaScript Arrays</title> | |
| <link href="style.css" rel="stylesheet"> | |
| <style id="jsbin-css"> | |
| * { | |
| box-sizing: border-box; | |
| } | |
| body { | |
| color: #fff; | |
| font-size: 1em; | |
| font-family: "Gotham Rounded A", "Gotham Rounded B", "Gotham Rounded", "Helvetica Neue", Helvetica, Arial, sans-serif; | |
| padding-top: 1em; | |
| background-color: #42b4d6; | |
| } | |
| main { | |
| width: 60%; | |
| max-width: 1080px; | |
| padding: 40px 0 0; | |
| margin: 0 auto; | |
| } | |
| h1 { | |
| font-size: 3.75em; | |
| text-align: center; | |
| margin-bottom: 0.35em; | |
| text-shadow: 0 2px 0 rgba(0,0,0, 0.1); | |
| } | |
| h2 { | |
| font-size: 2.5em; | |
| font-weight: normal; | |
| } | |
| main p { | |
| font-size: 1.9em; | |
| margin: 0; | |
| line-height: 1.5; | |
| text-align: center; | |
| } | |
| ul, | |
| ol { | |
| list-style-position: inside; | |
| font-size: 1.5em; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| li { | |
| line-height: 1.25; | |
| margin: 0 0 1.1em; | |
| color: #42b4d6; | |
| padding: 0.8em; | |
| background-color: white; | |
| border-radius: 3px; | |
| box-shadow: 0 2px 0 rgba(0,0,0, 0.1); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <main></main> | |
| <script src="script.js"></script> | |
| <script id="jsbin-javascript"> | |
| const playlist = [ | |
| ['So What','Miles Davis','9:04'], | |
| ['Respect','Aretha Franklin','2:45'], | |
| ['What a Wonderful World','Louis Armstrong','2:21'], | |
| ['At Last','Ella Fitzgerald','4:18'], | |
| ['Three Little Birds','Bob Marley and the Wailers','3:01'], | |
| ['The Way You Look Tonight'] | |
| ]; | |
| function createListItems( arr ) { | |
| let items = ''; | |
| for ( let i = 0; i < arr.length; i++ ) { | |
| items += `<li>${ arr[i][0] },${ arr[i][1] } - ${ arr[i][2] }</li>`; | |
| } | |
| return items; | |
| } | |
| document.querySelector('main').innerHTML = ` | |
| <ol> | |
| ${createListItems(playlist)} | |
| </ol> | |
| `; | |
| </script> | |
| <script id="jsbin-source-css" type="text/css">* { | |
| box-sizing: border-box; | |
| } | |
| body { | |
| color: #fff; | |
| font-size: 1em; | |
| font-family: "Gotham Rounded A", "Gotham Rounded B", "Gotham Rounded", "Helvetica Neue", Helvetica, Arial, sans-serif; | |
| padding-top: 1em; | |
| background-color: #42b4d6; | |
| } | |
| main { | |
| width: 60%; | |
| max-width: 1080px; | |
| padding: 40px 0 0; | |
| margin: 0 auto; | |
| } | |
| h1 { | |
| font-size: 3.75em; | |
| text-align: center; | |
| margin-bottom: 0.35em; | |
| text-shadow: 0 2px 0 rgba(0,0,0, 0.1); | |
| } | |
| h2 { | |
| font-size: 2.5em; | |
| font-weight: normal; | |
| } | |
| main p { | |
| font-size: 1.9em; | |
| margin: 0; | |
| line-height: 1.5; | |
| text-align: center; | |
| } | |
| ul, | |
| ol { | |
| list-style-position: inside; | |
| font-size: 1.5em; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| li { | |
| line-height: 1.25; | |
| margin: 0 0 1.1em; | |
| color: #42b4d6; | |
| padding: 0.8em; | |
| background-color: white; | |
| border-radius: 3px; | |
| box-shadow: 0 2px 0 rgba(0,0,0, 0.1); | |
| } | |
| </script> | |
| <script id="jsbin-source-javascript" type="text/javascript">const playlist = [ | |
| ['So What','Miles Davis','9:04'], | |
| ['Respect','Aretha Franklin','2:45'], | |
| ['What a Wonderful World','Louis Armstrong','2:21'], | |
| ['At Last','Ella Fitzgerald','4:18'], | |
| ['Three Little Birds','Bob Marley and the Wailers','3:01'], | |
| ['The Way You Look Tonight'] | |
| ]; | |
| function createListItems( arr ) { | |
| let items = ''; | |
| for ( let i = 0; i < arr.length; i++ ) { | |
| items += `<li>${ arr[i][0] },${ arr[i][1] } - ${ arr[i][2] }</li>`; | |
| } | |
| return items; | |
| } | |
| document.querySelector('main').innerHTML = ` | |
| <ol> | |
| ${createListItems(playlist)} | |
| </ol> | |
| `;</script></body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| * { | |
| box-sizing: border-box; | |
| } | |
| body { | |
| color: #fff; | |
| font-size: 1em; | |
| font-family: "Gotham Rounded A", "Gotham Rounded B", "Gotham Rounded", "Helvetica Neue", Helvetica, Arial, sans-serif; | |
| padding-top: 1em; | |
| background-color: #42b4d6; | |
| } | |
| main { | |
| width: 60%; | |
| max-width: 1080px; | |
| padding: 40px 0 0; | |
| margin: 0 auto; | |
| } | |
| h1 { | |
| font-size: 3.75em; | |
| text-align: center; | |
| margin-bottom: 0.35em; | |
| text-shadow: 0 2px 0 rgba(0,0,0, 0.1); | |
| } | |
| h2 { | |
| font-size: 2.5em; | |
| font-weight: normal; | |
| } | |
| main p { | |
| font-size: 1.9em; | |
| margin: 0; | |
| line-height: 1.5; | |
| text-align: center; | |
| } | |
| ul, | |
| ol { | |
| list-style-position: inside; | |
| font-size: 1.5em; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| li { | |
| line-height: 1.25; | |
| margin: 0 0 1.1em; | |
| color: #42b4d6; | |
| padding: 0.8em; | |
| background-color: white; | |
| border-radius: 3px; | |
| box-shadow: 0 2px 0 rgba(0,0,0, 0.1); | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const playlist = [ | |
| ['So What','Miles Davis','9:04'], | |
| ['Respect','Aretha Franklin','2:45'], | |
| ['What a Wonderful World','Louis Armstrong','2:21'], | |
| ['At Last','Ella Fitzgerald','4:18'], | |
| ['Three Little Birds','Bob Marley and the Wailers','3:01'], | |
| ['The Way You Look Tonight'] | |
| ]; | |
| function createListItems( arr ) { | |
| let items = ''; | |
| for ( let i = 0; i < arr.length; i++ ) { | |
| items += `<li>${ arr[i][0] },${ arr[i][1] } - ${ arr[i][2] }</li>`; | |
| } | |
| return items; | |
| } | |
| document.querySelector('main').innerHTML = ` | |
| <ol> | |
| ${createListItems(playlist)} | |
| </ol> | |
| `; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment