Scribd
Upload
83 views

Assignment5 Js

The document defines functions and event listeners for 3 buttons to fetch data from an API and display it. Button1 fetches text and displays it in an H1. Button2 fetches JSON data and displays images and info in divs. Button3 fetches and displays data in a table.

Uploaded by

gauravpatel7777g
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
83 views

Assignment5 Js

The document defines functions and event listeners for 3 buttons to fetch data from an API and display it. Button1 fetches text and displays it in an H1. Button2 fetches JSON data and displays images and info in divs. Button3 fetches and displays data in a table.

Uploaded by

gauravpatel7777g
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

const url = "https://csunix.mohawkcollege.ca/~adams/10259/a6_responder.

php";

let first = document.querySelector("#first");


const contentDiv = document.querySelector("#content");
const content2Div = document.querySelector("#content2");
const button1 = document.querySelector("#b1");
const button2 = document.querySelector("#b2");
const button3 = document.querySelector("#b3");

button1.addEventListener("click", function() {
Button1();
});

function Button1() {
fetch(url, { credentials: 'include' })
.then(response => response.text())
.then(Button1Success);
}
function Button1Success(text) {
first.innerHTML = "<h1>" + text + "000898120 </h1>";
}

button2.addEventListener("click", Button2);
function Button2() {
const choiceSelector =
document.querySelector("input[name='choice']:checked").value;
console.log("SelectedCoice is ",choiceSelector);
const fetchUrl = url + "?choice=" + choiceSelector;
fetch(fetchUrl)
.then(response => response.json())
.then(Button2Success);

}
function Button2Success(data) {
contentDiv.innerHTML = "";
for (let e = 0; e < data.length; e++) {
const info = data[e];
const div = document.createElement("div");

const title = document.createElement("h2");


title.innerHTML = info.name;
console.log(title);
div.appendChild(title);

const photo = document.createElement("photo");


photo.src = info.url;
photo.style.width = "300px";
div.appendChild(photo);

const description = document.createElement("p");


description.innerHTML = info.series;
div.appendChild(description);

contentDiv.appendChild(div);
}
}

function Button3() {
const choiceInputs = document.getElementsByName("choice");
let selectedChoice;
for (let e = 0; e < choiceInputs.length; e++) {
if (choiceInputs[i].checked) {
selectedChoice = choiceInputs[i].value;
break;
}
}
if (selectedChoice === "mario" || selectedChoice === "starwars") {
const formData = new FormData();
formData.append("choice", selectedChoice);

fetch("https://csunix.mohawkcollege.ca/~adams/10259/a6_responder.php", {
method: "POST",
body: formData
})
.then(response => response.json())
.then(Button3Success);
}
}

function Button3Success(data) {
content2Div.innerHTML = "";
const createTable = document.createElement("table");

const createTableCell = (content) => {


const createCell = document.createElement("td");
createCell.innerHTML = content;
return createCell;
};

const createTableRow = (rowData) => {


const createRow = document.createElement("tr");
rowData.forEach((content) => {
const createCell = createTableCell(content);
row.appendChild(createCell);
});
return createRow;
};

data.forEach((item) => {
const rowData = [item.series, item.url, item.name];
const createRow = createTableRow(rowData);
table.appendChild(createRow);
});

content2Div.appendChild(createTable);
}

button3.addEventListener("click", function() {
Button3();
});

You might also like