Created
August 4, 2021 16:59
-
-
Save dnlsyfq/6ade37c809ee0b5ece37edb80f488596 to your computer and use it in GitHub Desktop.
JavaScript Arrays // source https://jsbin.com/kipujiv
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"> | |
| 'use strict'; | |
| var inStock = ['pizza', 'cookies', 'eggs', 'apples', 'milk', 'cheese', 'bread', 'lettuce', 'carrots', 'broccoli', 'potatoes', 'crackers', 'onions', 'tofu', 'limes', 'cucumbers']; | |
| var search = prompt('Search for a product.'); | |
| var message = ''; | |
| if (!search) { | |
| message += 'All products in stock: ' + inStock.join(', '); | |
| } else if (inStock.includes(search.toLowerCase())) { | |
| message += 'Yes, we have <strong>' + search.toLowerCase() + '</strong>. It\'s #' + inStock.indexOf(search) + ' on the list! '; | |
| } else { | |
| message += 'Sorry, we do not have <strong>' + search.toLowerCase() + '</strong>'; | |
| } | |
| document.querySelector("main").innerHTML = '<center><h1>Product List</h1></center><br>' + message; | |
| </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 inStock = ['pizza', 'cookies', 'eggs', 'apples', 'milk', 'cheese', 'bread', 'lettuce', 'carrots', 'broccoli', 'potatoes', 'crackers', 'onions', 'tofu', 'limes', 'cucumbers']; | |
| const search = prompt('Search for a product.'); | |
| let message = ``; | |
| if(!search){ | |
| message += `All products in stock: ${inStock.join(', ')}` | |
| } else if(inStock.includes(search.toLowerCase())){ | |
| message += `Yes, we have <strong>${search.toLowerCase()}</strong>. It\'s #${inStock.indexOf(search)} on the list! ` | |
| } else { | |
| message += `Sorry, we do not have <strong>${search.toLowerCase()}</strong>`; | |
| } | |
| document.querySelector("main").innerHTML=`<center><h1>Product List</h1></center><br>${message}`; | |
| </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
| 'use strict'; | |
| var inStock = ['pizza', 'cookies', 'eggs', 'apples', 'milk', 'cheese', 'bread', 'lettuce', 'carrots', 'broccoli', 'potatoes', 'crackers', 'onions', 'tofu', 'limes', 'cucumbers']; | |
| var search = prompt('Search for a product.'); | |
| var message = ''; | |
| if (!search) { | |
| message += 'All products in stock: ' + inStock.join(', '); | |
| } else if (inStock.includes(search.toLowerCase())) { | |
| message += 'Yes, we have <strong>' + search.toLowerCase() + '</strong>. It\'s #' + inStock.indexOf(search) + ' on the list! '; | |
| } else { | |
| message += 'Sorry, we do not have <strong>' + search.toLowerCase() + '</strong>'; | |
| } | |
| document.querySelector("main").innerHTML = '<center><h1>Product List</h1></center><br>' + message; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment