I tried to made a list with a for Loop and now I'm stuck because the program isn't showing any error but is not building any list elements. Can somebody explain why and how?
It seems that it can read the value of the input element which I thought don`t seems to be the problem, so I was thinking that it must be the problem with reading it from the array. But I am just a beginner so when someone knows the actual solution to the problem, I would appreciate it.
let array = [];
function buildList() {
let ul = document.getElementById("prototype_List");
ul.innerHTML = "";
for (i = 0; i < array.length; i++) {
let list = document.createElement("li");
list.innerText = array[i];
let setting = document.getElementById("prototype_List");
setting.append(list);
}
}
function Name_Tag() {
let checkName = document.getElementById("textfeld").value;
if(checkName.length === 0) {
alert("write Name");
} else {
array.push(checkName);
buildList();
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="test.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="input-group mb-3">
<button onclick="Name_Tag" class="btn btn-outline-secondary" type="button" id="button-addon1">ADD Name</button>
<input id="textfeld" type="text" class="form-control" placeholder="" aria-label="Example text with button addon" aria-describedby="button-addon1">
</div>
<ul id="prototype_List">
</ul>
</div>
</body>
</html>
I have 3 html files for this page. index.html, positive review page and negative review page. I already have my JavaScript redirected to the right pages after clicking the emojis feedback and then the button. After clicking the button depending on the emojis clicked it redirects to the negative review page, if the emoji selected is neutral or unhappy and, if the emoji selected is satisfied it redirects to the positive review page. I am now stuck with subject line error in the console. The below is my Javascript file, followed by index.html file. Kindly assist me, thanks in advance.
const sendButton = document.querySelector("#send");
const panelContainer = document.querySelector(".panel-container");
const ratings = document.querySelectorAll(".rating");
const experience = document.querySelectorAll(".active small");
const removeActive = () => {
for (let i = 0; i < ratings.length; i++) {
ratings[i].classList.remove("active");
}
};
panelContainer.addEventListener("click", (e) => {
if (e.target.parentNode.classList.contains("rating")) {
removeActive();
e.target.parentNode.classList.add("active");
}
});
sendButton.addEventListener("click", () => {
const experience = document.querySelector(".active small");
console.log(experience);
if (
experience.innerHTML === "Unhappy" ||
experience.innerHTML === "Neutral"
) {
window.location = "negative_review.html";
} else {
window.location = "positive_review.html";
}
});
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
/>
<link rel="stylesheet" href="style.css" />
<title>Feedback</title>
</head>
<body>
<div id="panel" class="panel-container">
<h2>Welcome Text</h2>
<strong
>How was your experience <br />
with us?
</strong>
<div class="ratings-container">
<div class="rating">
<img
src="https://cdn-icons-png.flaticon.com/128/742/742752.png"
alt=""
/>
<small>Unhappy</small>
</div>
<div class="rating">
<img
src="https://cdn-icons-png.flaticon.com/128/725/725085.png"
alt=""
/>
<small>Neutral</small>
</div>
<div class="rating active">
<img
src="https://cdn-icons-png.flaticon.com/128/166/166549.png"
alt=""
/>
<small>Satisfied</small>
</div>
</div>
<form>
<label for="feedback">Please Tell Us About Your Experience</label>
<textarea name="" id="" maxlength="350" cols="30" rows="10"></textarea>
</form>
<button class="btn" id="send">Send Review</button>
</div>
<script src="script.js"></script>
</body>
</html>
negative review. html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
/>
<link rel="stylesheet" href="style.css" />
<title>Feedback</title>
</head>
<body>
<div id="panel" class="panel-container">
<!-- <form> -->
<strong>Thank you!</strong> <i class="fa-solid fa-heart"></i>
<br/>
<br/>
One of our team members will review your comments <br />
and reach out to you to resolve any issues.
<!-- </form> -->
</div>
<script src="script.js"></script>
</body>
</html>
On the negative review page, there isn't a button with the id send, so your querySelector call in line 1 returns null. To fix this, you should conditionally add an event listener like so:
if (sendButton !== null) {
sendButton.addEventListener("click", () => {
const experience = document.querySelector(".active small");
console.log(experience);
if (
experience.innerHTML === "Unhappy" ||
experience.innerHTML === "Neutral"
) {
window.location = "negative_review.html";
} else {
window.location = "positive_review.html";
}
});
}
I am looking to copy the text written in an input when the user click on a button. How can I do it ?
Here is my HTML structure :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2b2tyoung.tk</title>
<link rel="stylesheet" href="style.css">
<script src="main.js"></script>
</head>
<body>
<div class="container">
<div label>
Join server
</div>
<div class="copy-text">
<input type="text" class="text" value="2b2tyoung.tk">
<button>
<i class="fa fa-clone"></i>
</button>
</div>
</div>
</body>
</html>
Here I selected the fa-clone icon, added a listener on click, then I copied the value of the input.
document.querySelector(".fa-clone").addEventListener("click", () => {
let input = document.querySelector(".copy-text input");
navigator.clipboard.writeText(input.value);
console.log("copied "+input.value)
})
<div class="copy-text">
<input type="text" class="text" value="2b2tyoung.tk">
<button>
<i class="fa fa-clone">Clone</i>
</button>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>2b2tyoung.tk</title>
<link rel="stylesheet" href="style.css" />
<script src="main.js"></script>
</head>
<body>
<div class="container">
<div label>Join server</div>
<div class="copy-text">
<input type="text" class="text" value="2b2tyoung.tk" />
<button onclick="copyInputValue()">
<i class="fa fa-clone"></i>
</button>
</div>
</div>
</body>
</html>
<script>
function copyInputValue() {
const ipt = document.querySelector("#app input");
ipt.select();
const copyed = document.execCommand("copy");
if (copyed) {
alert("copy success!");
} else {
alert("copy failed!");
}
}
</script>
When a value(person) is entered, the code create a <li> with the name of it. Multiple names, multiple <li>. I would also like to push all the values into people for future use.
const addForm = document.querySelector('.add');
const list = document.querySelector('.todos');
let people
const generateTemplate = todo => {
const html = `
<li>
<span>${todo}</span>
<i class="far fa-trash-alt delete"></i>
</li>`
list.innerHTML += html;
}
addForm.addEventListener('submit', e => {
const todo = addForm.add.value.trim();
e.preventDefault();
if (todo.length) {
if (people === null) {
people = [];
}
people.push(todo);
console.log(people)
}
generateTemplate(todo);
addForm.reset();
people.push(todo)
console.log(people)
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<title>Todolist</title>
</head>
<body>
<form action="" class="add">
<h1>Group generator</h1>
<input type="text" id="name" name="add" placeholder="Enter name here">
<input type="submit" value="submit them">
<p>you can also press enter instead</p>
</form>
<ul class="todos">
</ul>
</body>
</html>
Instead of people===null use if (!people), because people is undefined at first time:
if (!people) {
people = [];
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<title>Todolist</title>
</head>
<body>
<form action="" class="add">
<h1>Group generator</h1>
<input type="text" id="name" name="add" placeholder="Enter name here">
<input type="submit" value="submit them"> <p>you can also press enter instead</p>
</form>
<ul class="todos">
</ul>
<script>
const addForm = document.querySelector('.add');
const list = document.querySelector('.todos');
let people
const generateTemplate = todo => {
const html = `
<li>
<span>${todo}</span>
<i class="far fa-trash-alt delete"></i>
</li>`
list.innerHTML += html;
}
addForm.addEventListener('submit', e => {
debugger
const todo = addForm.add.value.trim();
e.preventDefault();
if (todo.length) {
if (!people) {
people = [];
}
people.push(todo);
console.log(people)
}
generateTemplate(todo);
addForm.reset();
people.push(todo)
console.log(people)
});
</script>
</body>
</html>
I would like to access to a data present in a JSON File, which it URL is present in a JSON file, it is complicated to explain, so I will tell you what I want to do:
I would like to access to get all the contributors and the last hunded commits of a given repository on github.
for that I begin by accessing the : https://api.github.com/search/repositories?q= link, by adding a repository name through a searchbar.
Let's take an example of :bootstrap4-zhcn-documentation and so I have the following link : https://api.github.com/search/repositories?q=bootstrap4-zhcn-documentation
I would like to list all the contributors, presented under the contributors_url ID :
enter image description here
after that, I would like to access the URL which is a JSON file, and get the Login ID, in this example : enter image description here
I should get "zoomla"
of course, here I have only one contributor, I would like to list them all.
THE PROBLEM IS : that I don't know how can I, via jQuery/Javascript access this URL, open it, list all the login ID and display them.
This is my code, I do have "undefined" at the Contributors section,
Thank you in advance.
$(document).ready(function() {
console.log("Ready!");
$("#SearchRep").on("keyup", function(e) {
let repository = e.target.value;
console.log(repository);
$.ajax({
// type: "method",
url: "https://api.github.com/search/repositories?q=" + repository,
data: {
"client-id": "522a9db59ec192e4cf6a",
"client-secret": "4bc5227ec0d26b14193923a1ee80afad19fe2ff6"
}
// dataType: "dataType",
// success: function (response) {
// }
}).done(function(repo) {
$("#repositoryResult").html(`
<h3 class="panel-title">Repository name: ${
repo.items[0].name
} </h3>
<h3> Contributors: ${ repo.items[1].contributors_url.login} </h3>
`);
});
});
});
body {
padding-top: 65px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Jekyll v3.8.5">
<title>Github Repositories Finder</title>
<!-- Bootstrap core CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" >
<!doctype html>
<html lang="en" class="h-100">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Jekyll v3.8.5">
<title>Github Repositories Finder</title>
<!-- Bootstrap core CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet">
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
}
#media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
</style>
<!-- Custom styles for this template -->
<link href="css/style.css" rel="stylesheet">
</head>
<body class="d-flex flex-column h-100">
<header>
<!-- Fixed navbar -->
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">Github Repositories Finder</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</ul>
<div class="searchContainer">
<form class="form-inline mt-2 mt-md-0">
<input class="form-control mr-sm-2" type="text" placeholder= "Search" id="SearchRep" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</div>
</nav>
</header>
<!-- Begin page content -->
<main role="main" class="flex-shrink-0">
<div class="container">
<h1 class="mt-5">Github Public Repositories</h1>
</div>
<div id="repositoryResult"></div>
</main>
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" ></script>
<script src="js/main.js"></script>
</body>
</html>
You will need to make another Ajax call to the Contributors URL that is returned from the first API call. Because you will only have the correct URL after the first API call is returned, your second API call needs to go in the .done() method of your first one.
$(document).ready(function() {
console.log("Ready!");
$("#SearchRep").on("keyup", function(e) {
let repository = e.target.value;
console.log(repository);
$.ajax({
// type: "method",
url: "https://api.github.com/search/repositories?q=" + repository,
data: {
"client-id": "522a9db59ec192e4cf6a",
"client-secret": "4bc5227ec0d26b14193923a1ee80afad19fe2ff6"
}
// dataType: "dataType",
// success: function (response) {
// }
}).done(function(repo) {
// HERE IS WHERE YOU MAKE A SECOND CALL TO THE CONTRIBUTORS URL
$.ajax({
url: repo.items[0].contributors_url
}).done(function(contributors) {
$("#repositoryResult").html(`
<h3 class="panel-title">Repository name: ${
repo.items[0].name
} </h3>
<h3> Contributors: ${ contributors[0].login} </h3>
`);
});
});
});
});
Be aware that this code will only display the first contributor of the first repository that is returned. You will need more complicated code to loop over repo.items[] and contributors[] (including making a separate Ajax call to each contributors_url for each repo returned) if you are wanting to display the full list, but this should give you the basic idea of what you need to do.
Thank you,
I have updated my code, not I can get the contributors, I did not use a new ajax call but instead I used a GET method inside the ajax, and I looped with a FOR loop to get all the logins, this works in the console with console.log but I don't know how to display it with HTML.
this is the new code :
$(document).ready(function() {
console.log("Ready!");
$("#SearchRep").on("keyup", function(e) {
let repository = e.target.value;
console.log(repository);
$.ajax({
// type: "method",
url: "https://api.github.com/search/repositories?q=" + repository,
data: {
"client-id": "522a9db59ec192e4cf6a",
"client-secret": "4bc5227ec0d26b14193923a1ee80afad19fe2ff6"
}
// dataType: "dataType",
// success: function (response) {
// }
}).done(function(repo) {
$("#repositoryResult").html(`
<h3 class="panel-title">Repository name: ${
repo.items[0].name
} </h3>
<p> Contributors: ${
$.get('https://api.github.com/repos/'+repo.items[0].owner.login+'/'+repo.items[0].name+'/contributors').done(function (e) {
for (let i = 0; i < e.length; i++){
console.log(e[i].login) ;
}
// console.log (e[0].login);
// console.log(e.login) ;
//});
})} </p>
`);
});
});
});
body {
padding-top: 65px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Jekyll v3.8.5">
<title>Github Repositories Finder</title>
<!-- Bootstrap core CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" >
<!doctype html>
<html lang="en" class="h-100">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Jekyll v3.8.5">
<title>Github Repositories Finder</title>
<!-- Bootstrap core CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet">
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
}
#media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
</style>
<!-- Custom styles for this template -->
<link href="css/style.css" rel="stylesheet">
</head>
<body class="d-flex flex-column h-100">
<header>
<!-- Fixed navbar -->
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">Github Repositories Finder</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</ul>
<div class="searchContainer">
<form class="form-inline mt-2 mt-md-0">
<input class="form-control mr-sm-2" type="text" placeholder= "Search" id="SearchRep" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</div>
</nav>
</header>
<!-- Begin page content -->
<main role="main" class="flex-shrink-0">
<div class="container">
<h1 class="mt-5">Github Public Repositories</h1>
</div>
<div id="repositoryResult"></div>
</main>
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" ></script>
<script src="js/main.js"></script>
</body>
</html>
jQuery doodoo
change auth / token
search for mootools-core
document.addEventListener('DOMContentLoaded', function(e) {
console.log('DOM fully loaded and parsed');
document.getElementById('SearchRep').addEventListener('keyup', function(e) {
let repository = e.target.value;
console.log(repository);
fetch(`https://api.github.com/repos/mootools/${repository}/contributors`, {
token: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
})
.then(r => {
if (!r.ok) throw new Error('Something went wrong!');
return r.json();
})
.then(r => {
console.log(r);
document.getElementById(
'repositoryResult'
).innerHTML = `<h3 class="panel-titile">Repository name: ${repository}</h3><h4>Contributors:</h4><p>${r
.map(c => `${c.login}`)
.join(', ')}</p>`;
})
.catch(console.log);
});
});