Created
August 5, 2020 14:36
-
-
Save master-elodin/42193c76d9d9c425d37ff706ab25070a to your computer and use it in GitHub Desktop.
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 lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Mini Project 2</title> | |
| </head> | |
| <body> | |
| <p> | |
| <span>Your link:</span><br /> | |
| <span id='linkCheck'></span> | |
| </p> | |
| <script> | |
| /* | |
| 1. Ask user for URL - prompt | |
| 2. Check if the link starts with http - substring | |
| 3. If it doesn't start with http, fix the variable if or if/else statements | |
| 4. Inject link into your page using .innerHTML - grab HTML node and insert link | |
| */ | |
| const linkLower = prompt("Enter URL Here").toLowerCase(); | |
| const newHtml = linkLower.indexOf('http://') === 0 // check if given link starts with http:// | |
| ? `Well done, <a href ="${linkLower}">${linkLower}</a> starts with http://.` | |
| : `I'm sorry, ${linkLower} didn't start with http://, so we added it for you: <a href="http://${linkLower}">http://${linkLower}</a>`; | |
| // the new HTML is variable, but the setting of the element inner HTML only happens once | |
| document.getElementById("linkCheck").innerHTML = newHtml; | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment