Skip to content

Instantly share code, notes, and snippets.

@master-elodin

master-elodin/mini-project-edit.html

Created August 5, 2020 14:36
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save master-elodin/42193c76d9d9c425d37ff706ab25070a to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save master-elodin/42193c76d9d9c425d37ff706ab25070a to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. master-elodin created this gist Aug 5, 2020.
    32 changes: 32 additions & 0 deletions mini-project-edit.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,32 @@
    <!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>