Question

Java Script I need the code to produce these 3 output. I can only get it...

Java Script

I need the code to produce these 3 output. I can only get it to produce input #3

I need it to produce the following:

// Input #1:

// http://www.example.com

// Output

// http://www.example.com

// Input #2:

// http://www.example.com?name=r2d2

// Output

// http://www.example.com

// name: r2d2

// Input #3:

// http://www.example.com?name=r2d2&email=r2d2%40me.com&human=no

// Output

// http://www.example.com

// name: r2d2

// email: [email protected]

// human: no

THIS IS WHAT I HAVE SO FAR:

HTML

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>JavaScript URL Exercise</title>

<link

rel="stylesheet"

type="text/css"

href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css"

/>

</head>

<body class="bg-info">

<form class="bg-light border rounded w-50 mx-auto mt-5 p-3">

<h2 class="mt-2 mb-4">String Manipulation</h2>

<div class="form-group">

<label for="comments">Enter a URL:</label>

<textarea class="form-control" id="comments" rows="1"> </textarea>

</div>

<div class="form-group mt-4">

<input type="submit" class="btn btn-info" value="Submit" />

<input type="reset" class="btn btn-secondary" value="Reset" />

</div>

</form>

<body class="bg-info">

<form class="bg-light border rounded w-50 mx-auto mt-5 p-3">

<h2 class="mt-2 mb-4">Results</h2>

<div class="form-group">

<h6>URL</h6>

<p id='url'></p>

<h6>Query Parameters</h6>

<div><span id='name'></span><span id='nameValue'></span></div>

<div><span id='email'></span><span id='emailValue'></span></div>

<div><span id='human'></span><span id='humanValue'></span></div>

</form>

<div id="resultForm"></div>

<script src="02-url.js"></script>

</body>

</html>

.JS

document

.getElementsByClassName("btn")[0]

.addEventListener("click", function (event) {

event.preventDefault();

let queryString = document.getElementById("comments").value;

//console.log(queryString);

let stringAfterDomain = queryString.indexOf("?");

let stringKeyValue = [];

let i = stringAfterDomain;

stringKeyValue.push(0, queryString.slice(0, stringAfterDomain));

while (stringAfterDomain <= queryString.length) {

let equal = queryString.indexOf("=", stringAfterDomain);

stringKeyValue.push(queryString.slice(stringAfterDomain + 1, equal));

stringAfterDomain += equal - stringAfterDomain;

let and = queryString.indexOf("&", stringAfterDomain);

if (!(queryString.lastIndexOf("=", queryString.length) == equal)) {

stringKeyValue.push(queryString.slice(stringAfterDomain + 1, and));

stringAfterDomain += and - stringAfterDomain;

} else {

stringKeyValue.push(queryString.slice(stringAfterDomain + 1));

stringAfterDomain += queryString.length;

}

}

console.log(stringKeyValue);

document.getElementById("url").innerHTML = stringKeyValue[1];

document.getElementById("name").innerHTML = stringKeyValue[2];

document.getElementById("nameValue").innerHTML = ": " + stringKeyValue[3];

document.getElementById("email").innerHTML = stringKeyValue[4];

document.getElementById("emailValue").innerHTML = ": " + stringKeyValue[5];

document.getElementById("human").innerHTML = stringKeyValue[6];

document.getElementById("humanValue").innerHTML = ": " + stringKeyValue[7];

});

Engineering   Computer-Science   
0 0
Add a commentTranscribed image text
Next >

Homework Answers

Answer #1

Changes only in Javascript file not in HTML

HTML

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>JavaScript URL Exercise</title>
   <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css"/>
</head>
<body class="bg-info">
   <form class="bg-light border rounded w-50 mx-auto mt-5 p-3">
       <h2 class="mt-2 mb-4">String Manipulation</h2>
       <div class="form-group">
           <label for="comments">Enter a URL:</label>
           <textarea class="form-control" id="comments" rows="1"> </textarea>
       </div>
       <div class="form-group mt-4">
           <input type="submit" class="btn btn-info" value="Submit" />
           <input type="reset" class="btn btn-secondary" value="Reset" />
       </div>

   </form>

   <form class="bg-light border rounded w-50 mx-auto mt-5 p-3">
       <h2 class="mt-2 mb-4">Results</h2>
       <div class="form-group">
           <h6>URL</h6>
           <p id='url'></p>
           <h6>Query Parameters</h6>
           <div><span id='name'></span><span id='nameValue'></span></div>
           <div><span id='email'></span><span id='emailValue'></span></div>
           <div><span id='human'></span><span id='humanValue'></span></div>
   </form>
   <div id="resultForm"></div>
   <script src="02-url.js"></script>
</body>
</html>

Javascript

document.getElementsByClassName("btn")[0].addEventListener("click", function (event) {
   event.preventDefault();
   let queryString = document.getElementById("comments").value;

   //indexof method is return index of varible in string but if charcter is not available in string is return -1
   let stringAfterDomain = queryString.indexOf("?");

   //so use if else condition its check stringAfterDomain is greater than zero in first input url "?" is not available so execute if statement
   if(stringAfterDomain<0)
   {
       //Query parameters is not available in url so bind data with url name
       document.getElementById("url").innerHTML = queryString;
       document.getElementById("name").innerHTML = queryString;
   }
   else
   {
       // Query parameters is available in url
       let stringKeyValue = [];
       let i = stringAfterDomain;
       stringKeyValue.push(0, queryString.slice(0, stringAfterDomain))
       while (stringAfterDomain <= queryString.length)
       {
           let equal = queryString.indexOf("=", stringAfterDomain);
           stringKeyValue.push(queryString.slice(stringAfterDomain + 1, equal));
           stringAfterDomain += equal - stringAfterDomain;
           let and = queryString.indexOf("&", stringAfterDomain);
           if (!(queryString.lastIndexOf("=", queryString.length) == equal))
           {
               stringKeyValue.push(queryString.slice(stringAfterDomain + 1, and));
               stringAfterDomain += and - stringAfterDomain;
           }
           else
           {
               stringKeyValue.push(queryString.slice(stringAfterDomain + 1));
               stringAfterDomain += queryString.length;
           }
       }

       //add code for bind data
       let stringKeyValueUnique = [...new Set(stringKeyValue)]; //this is used for remove duplicates values in array
       document.getElementById("url").innerHTML = stringKeyValue[1]; //bind Url name
       //for loop for stringKeyValueUnique array
       for(var j=2;j<stringKeyValueUnique.length;j++)
       {
           //array value is equal to name
           if(stringKeyValueUnique[j] == "name")
           {
               //bind data of name Query parameters
               document.getElementById(stringKeyValueUnique[j]).innerHTML = stringKeyValueUnique[j];
               document.getElementById(stringKeyValueUnique[j]+"Value").innerHTML = ": " + stringKeyValueUnique[j+1];
           }
           else if(stringKeyValueUnique[j] == "email") //array value is equal to email
           {
               //bind data of email Query parameters
               document.getElementById(stringKeyValueUnique[j]).innerHTML = stringKeyValueUnique[j];
               document.getElementById(stringKeyValueUnique[j]+"Value").innerHTML = ": " + stringKeyValueUnique[j+1];
           }
           else if(stringKeyValueUnique[j] == "human") //array value is equal to human
           {
               //bind data of human Query parameters
               document.getElementById(stringKeyValueUnique[j]).innerHTML = stringKeyValueUnique[j];
               document.getElementById(stringKeyValueUnique[j]+"Value").innerHTML = ": " + stringKeyValueUnique[j+1];
           }

       }
   }
});

================================OUTPUT========================

Input #1:

Input #2:

Input #3:

One more input with two Query parameters

==Please Upvote==

0 0
Know the answer?
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Log In

Sign Up

Not the answer you're looking for?
Ask your own homework help question
Similar Questions
This will be my third time submitting this question. THERE SHOULD BE NO USE OF CSS...
This will be my third time submitting this question. THERE SHOULD BE NO USE OF CSS OR SWITCH STATEMENTS IN THE JAVASCRIPT. Even though there is stylesheet in the HTML file do no create a new one. Project Standards: Students will use click events to capture user input. Students will use variables to store information needed by their application and keep track of their program’s state. Students will use conditionals to control project flow. Project Task You will be building...
ADVERTISEMENT
Need Online Homework Help?

Get Answers For Free
Most questions answered within 1 hours.

Ask a Question
ADVERTISEMENT