Created
August 4, 2021 07:49
-
-
Save dnlsyfq/285557aaba372e2dd6c53fdafafed1ca to your computer and use it in GitHub Desktop.
JavaScript Arrays // source https://jsbin.com/fofaxo
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> | |
| <h1>My Music Playlist</h1> | |
| <main></main> | |
| <script src="script.js"></script> | |
| <script id="jsbin-javascript"> | |
| const playlist = [ | |
| 'So What', | |
| 'Respect', | |
| 'What a Wonderful World', | |
| 'At Last', | |
| 'Three Little Birds', | |
| 'The Way You Look Tonight' | |
| ]; | |
| let html = `<ol>` | |
| for(let i=0 ; i < playlist.length ; i++){ | |
| html += `<li>${playlist[i]}</li>`; | |
| } | |
| document.querySelector("main").innerHTML = html + `</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', | |
| 'Respect', | |
| 'What a Wonderful World', | |
| 'At Last', | |
| 'Three Little Birds', | |
| 'The Way You Look Tonight' | |
| ]; | |
| let html = `<ol>` | |
| for(let i=0 ; i < playlist.length ; i++){ | |
| html += `<li>${playlist[i]}</li>`; | |
| } | |
| document.querySelector("main").innerHTML = html + `</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', | |
| 'Respect', | |
| 'What a Wonderful World', | |
| 'At Last', | |
| 'Three Little Birds', | |
| 'The Way You Look Tonight' | |
| ]; | |
| let html = `<ol>` | |
| for(let i=0 ; i < playlist.length ; i++){ | |
| html += `<li>${playlist[i]}</li>`; | |
| } | |
| document.querySelector("main").innerHTML = html + `</ol>` |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment