edit two separate progress bars in html - javascript

That's my problem: I need to update two separates progbars with their own width but the And bar take the Or percentage and the Or one remains empty. I'm not so good with HTML and Js but I noticed that changing div class=progress-bar the And one works but the Or one doesn't. How can I fill every bar with its percentage?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>skills</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"
rel="stylesheet">
<link href="css/sb-admin-2.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body id="page-top">
<div id="wrapper">
<div id="content-wrapper" class="d-flex flex-column">
<div id="content">
<div class="container-fluid">
<div class="d-sm-flex align-items-center justify-content-between mb-4">
<h1 class="h3 mb-0 text-gray-800"></h1>
</div>
<!--SKILLS--------------------------------------------------------------------------------------->
<div class="row">
<div class="col-lg-6 mb-4">
<div class="card shadow mb-4">
<div class="card-header py-3">
<h6 class="m-0 font-weight-bold text-primary"></h6>
</div>
<div class="card-body">
<!--AND--------------------------------------------------------------------------------------->
<body>
<div class="m-4">
<h4 class="small font-weight-bold">AND</h4>
<div class="progress">
<div class="progress-bar" style="min-width: 0px;"></div> <!-- Progress bar HTML -->
</div>
<!-- JavaScript -->
<script>
const and=["And_1","And_2","And_3","And_4","And_5","And_6","And_7"];
const myand=["And_1","And_2"];
var la=and.length;
var lm=myand.length;
var mywid=0;
for(let i=0; i<la; i++){
for(let j=0; j<lm; j++){
if(and[i]==myand[j]){
mywid++;
}
}
}
var perc=(99/la)*mywid;
perc=Math.round((perc + Number.EPSILON) * 100) / 100
var bar = document.querySelector(".progress-bar");
function makeProgress(){
bar.style.width = `${perc}` + "%";
bar.innerText = `${perc}` + "%";
}
makeProgress();
</script>
</div>
</body>
<!--OR--------------------------------------------------------------------------------------->
<body>
<div class="m-4">
<h4 class="small font-weight-bold">OR</h4>
<div class="progress">
<div class="progress-bar" style="min-width: 0px;"></div> <!-- Progress bar HTML -->
</div>
<!-- JavaScript -->
<script>
const or=["Or_1","Or_2","Or_3","Or_4","Or_5"];
const myor=["Or_1"];
var lo=or.length;
var lmo=myor.length;
var orwid=0;
for(let i=0; i<lo; i++){
for(let j=0; j<lmo; j++){
if(or[i]==myor[j]){
orwid++;
}
}
}
var orperc=(99/la)*orwid;
orperc=Math.round((orperc + Number.EPSILON) * 100) / 100
var orBar = document.querySelector(".progress-bar");
function makeProgress(){
orBar.style.width = `${orperc}` + "%";
orBar.innerText = `${orperc}` + "%";
}
makeProgress();
</script>
</div>
</body>
</html>


You are setting the same elements width twice using document.querySelector(".progress-bar")
instead you should give each progress bar an unique ID and set the width for them separately
In HTML:
<div class="progress-bar" id="and-bar" style="min-width: 0px;"></div>
Query selector in Javascript:
var andBar = document.querySelector("#and-bar");

Related

Get URL of element on react page using vanilla JS [duplicate]

Any one knows a way to get all the URLs in a website using JavaScript?
I only need the links starting with the same domain name.no need to consider other links.

Well this will get all the same-host links on the page:
var urls = [];
for(var i = document.links.length; i --> 0;)
if(document.links[i].hostname === location.hostname)
urls.push(document.links[i].href);
If by site you mean you want to recursively get the links inside linked pages, that's a bit trickier. You'd have to download each link into a new document (for example in an <iframe>), and the onload check the iframe's own document for more links to add to the list to fetch. You'd need to keep a lookup of what URLs you'd already spidered to avoid fetching the same document twice. It probably wouldn't be very fast.

Or in es6
[...document.links].map(l => l.href)

Javascript to extract (and display) the domains, urls, and links from a page
The "for(var i = document.links.length; i --> 0;)" method is a good collection to work with. Here is a example to pulls it from specific parts of the html page.
You could alter it to select and filter to whatever you want. And then use the list however you want. I wanted to show a working example.
var re = /^((http[s]?|ftp|mailto):(?:\/\/)?)?\/?(([^\/\.]+\.)*?([^\/\.]+\.[^:\/\s\.]{1,4})?(\.[^:\/\s\.]{1,2})?(:\d+)?)($|\/)([^#?\s]+)?(.*?)?(#[\w\-]+)?$/i;
var reG = /^((http[s]?|ftp|mailto):(?:\/\/)?)?\/?(([^\/\.]+\.)*?([^\/\.]+\.[^:\/\s\.]{1,4})?(\.[^:\/\s\.]{1,2})?(:\d+)?)($|\/)([^#?\s]+)?(.*?)?(#[\w\-]+)?$/ig;
var printList = document.getElementById("domains");
var unorderedList = document.createElement("ul");
unorderedList.setAttribute("id", "domainsList");
unorderedList.setAttribute("class", "list-group");
printList.appendChild(unorderedList);
var domainsList = document.getElementById("domainsList");
var list = document.getElementsByTagName("a");
//console.log(list);
var listArray = Array.from(list);
//loop through the list
listArray.forEach(function(link){
//console.log(link.href);
//console.log(typeof(link.href));
var listItem = document.createElement("li");
listItem.setAttribute("class", "list-group-item domain");
domainsList.appendChild(listItem);
var str = link.href;
var match = str.match(reG);
var matchGroup = str.match(re);
//console.log(matchGroup[5]);
var domainNode = document.createTextNode("Domain: " + matchGroup[5]);
listItem.appendChild(domainNode);
var breakNode = document.createElement("br");
listItem.appendChild(breakNode);
var websiteNode = document.createTextNode("Website: " + matchGroup[3]);
listItem.appendChild(websiteNode);
var breakNode = document.createElement("br");
listItem.appendChild(breakNode);
var fullNode = document.createTextNode("Full Link: " + match);
listItem.appendChild(fullNode);
domainsList.appendChild(listItem);
unorderedList.appendChild(listItem)
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Pull Domains form a page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="card-deck">
<div class="card mb-3" style="min-width: 10rem;"><div class="card-body">Link 1</div></div>
<div class="card mb-3" style="min-width: 10rem;"><div class="card-body">Link 2</div></div>
<div class="card mb-3" style="min-width: 10rem;"><div class="card-body">Link 3</div></div>
<div class="card mb-3" style="min-width: 10rem;"><div class="card-body">Link 4</div></div>
<div class="card mb-3" style="min-width: 10rem;"><div class="card-body">Link 5</div></div>
<div class="card mb-3" style="min-width: 10rem;"><div class="card-body">Link 6</div></div>
<div class="card mb-3" style="min-width: 10rem;"><div class="card-body">Link 7</div></div>
<div class="card mb-3" style="min-width: 10rem;"><div class="card-body">Link 8</div></div>
<div class="card mb-3" style="min-width: 10rem;"><div class="card-body">Link 9</div></div>
<div class="card mb-3" style="min-width: 10rem;"><div class="card-body">Link 10</div></div>
</div>
<div id="domains"></div>
</body>
</html>
JSFiddle of a working copy

In Javascript:
(function(){
let links = [], l = document.links;
for(let i=0; i<l.length; i++) {
links.push(l[i].href);
}
return links;
})();

using jquery u can find all the links on the page that match a specific criteria
$("a[href=^domain.com]").each(function(){
alert($(this).attr("href"));
});

Creating multiple fields in the same line

I'm trying to develop a dynamic form, where, if the user click on the plus icon, it should create two new fields in the same line.
The code that I have right now, it only create one single field, I tried to duplicate the same code in the funtion, but it only create two fields in vertical position and not in the same line.
Thank you Kindly !
Javascript code
var survey_options = document.getElementById('columna');
var add_more_fields = document.getElementById('add_more_fields');
var remove_fields = document.getElementById('remove_fields');
function Añadir(){
var newField = document.createElement('input');
newField.setAttribute('type','text');
newField.setAttribute('class','form-control');
newField.setAttribute('placeholder','Another Field');
survey_options.appendChild(newField);
}
function Eliminar(){
var input_tags = survey_options.getElementsByTagName('input');
if(input_tags.length > 2) {
survey_options.removeChild(input_tags[(input_tags.length) - 1]);
}
}
Html Code
<!doctype html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<!-- Awsome Fonts-->
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Styling -->
<link rel="stylesheet" type="text/css" href="style.css">
<!-- My Title-->
<title>Hello, world!</title>
</head>
<body>
<form class="Form" id="formulario">
<h1>Factibilidad Técnica y Operativa</h1>
<h2>Análisis de Infraestructura</h2>
<!-- Campos en Columnas-->
<div class="container" id="contenedor">
<div class="row" id="campo">
<div class="col" id="columna">
<input type="text" class="form-control" placeholder="Infraestructura">
</div>
<div class="col" id="columna">
<input type="text" class="form-control" placeholder="Infraestructura">
</div>
</div>
</div>
<!-- Iconos de Agregar / Eliminar Campos-->
<div class="Controls">
<i class="fa fa-plus-square"></i>Añadir
<i class="fa fa-minus-square"></i>Eliminar
</div>
</form>
<!-- JS Script-->
<script src="script.js"></script>
</body>
</html>

Very first point id value must not repeat. It should be unique. For More Info
In html, inputs are embedded in div so you should follow the same in JS to get same result.
div.col-lg-6 makes tags inside them to set half of screen when screen size is large. It will helps to your design
As I said, I created div.col-lg-6.mb-2 in JS and embedded input in div to get final result. mb-2 gives margin-bottom
div is embedded in div#campo and final result is here
var survey_options = document.getElementById('campo');
var add_more_fields = document.getElementById('add_more_fields');
var remove_fields = document.getElementById('remove_fields');
function Añadir(){
var newDiv = document.createElement('div');
newDiv.setAttribute('class', 'col-lg-6 mb-2')
var newField = document.createElement('input');
newField.setAttribute('type','text');
newField.setAttribute('class','form-control');
newField.setAttribute('placeholder','Another Field');
survey_options.appendChild(newDiv)
newDiv.appendChild(newField);
}
function Eliminar(){
var input_tags = survey_options.getElementsByTagName('input');
if(input_tags.length > 2) {
survey_options.removeChild(input_tags[(input_tags.length) - 1]);
}
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<!-- Awsome Fonts-->
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<body>
<form class="Form" id="formulario">
<h1>Factibilidad Técnica y Operativa</h1>
<h2>Análisis de Infraestructura</h2>
<!-- Campos en Columnas-->
<div class="container" id="contenedor">
<div class="row" id="campo">
<div class="col-lg-6 mb-2">
<input type="text" class="form-control" placeholder="Infraestructura">
</div>
<div class="col-lg-6 mb-2">
<input type="text" class="form-control" placeholder="Infraestructura">
</div>
</div>
</div>
<!-- Iconos de Agregar / Eliminar Campos-->
<div class="Controls">
<i class="fa fa-plus-square"></i>Añadir
<i class="fa fa-minus-square"></i>Eliminar
</div>
</form>
</body>
Update
<!-- In HTML -->
<i class="fa fa-plus-square"></i>Añadir
<!-- In Script -->
function createTwoInput(){
Añadir();
Añadir();
}
If any clarification needed, Mention in comment

Update DOM with div tag along with bootstrap classes

for (i = 0; i < 10; i++) {
if(i%4===0){
$("#image-album").append('<div class="row">');
}
$("#image-album").append('<div class="col-md-3">image '+i+'</div>')
if(i!==0 && (i+1)%4===0){
$("#image-album").append('</div>');
}
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<span id="image-album">
</span>
I want to update my dom with jquery which contains bootstrap classes to display images in grid. But i am not able to add div with "row" class. I tried to do something as shown in the snippet.
Expect it to be:
<div class="row">
<div class="col">
image 1
</div>
<div class="col">
image 2
</div>
<div class="col">
image 3
</div>
<div class="col">
image 4
</div>
</div>
But it end up being:
<div class="row"></div>
<div class="col">
image 1
</div>
<div class="col">
image 2
</div>
<div class="col">
image 3
</div>
<div class="col">
image 4
</div>

First, build full HTML and then append to span
let htlm ="";
for (i = 0; i < 10; i++)
{
if(i%4===0)
{
htlm +='<div class="row">';
}
htlm +='<div class="col-md-3">image '+i+'</div>';
if(i%4===3)
{
htlm +='</div>';
}
};
$("#image-album").append(htlm);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<span id="image-album">
</span>

Loading bootstrap columns one by one on page load

I want to load the columns one by one with gap of few seconds when the page is loaded and to make this working, following the code:
setTimeout(function()
{
$("#box1").removeClass("noDisplay");
},1000);
setTimeout(function()
{
$("#box2").removeClass("noDisplay");
},1200);
setTimeout(function()
{
$("#box3").removeClass("noDisplay");
},1400);
.noDisplay{display:none;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-xs-4 noDisplay" id="box1">Column 1 </div>
<div class="col-xs-4 noDisplay" id="box2">Column 2 </div>
<div class="col-xs-4 noDisplay" id="box3">Column 3 </div>
</div>
</div>
But I think there must be some other way to do it easily and with some effects like fade or something, can anybody please suggest?
thanks in advance

Try this from How to show each div, one by one on jquery?
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-xs-4 noDisplay" id="box1">Column 1 </div>
<div class="col-xs-4 noDisplay" id="box2">Column 2 </div>
<div class="col-xs-4 noDisplay" id="box3">Column 3 </div>
</div>
</div>
<style>
.noDisplay{display:none;}
</style>
<script>
$(function() {
showDiv();
});
function showDiv() {
if($('.noDisplay:hidden').length) {
$('.noDisplay:hidden:first').fadeIn();
setTimeout(showDiv, 1000);
}
}
</script>

Try this:
$(document).ready(function() {
var tTimer, count = 0;
tTimer = setInterval(function (){
count++;
$("#box" + count).removeClass("noDisplay");
if (count >= 4) clearInterval(tTimer);
}, 100);
});

You can use interval to do it and also mix it up with some css so here's the code:
Javascript
$(document).ready(function(){
var num = 3; //Number of elements
var currentElem = 1;
setInterval(function () {
if(currentElem <= num) {
$("#box"+currentElem).css('opacity','1');
currentElem++;
}
}, 1000);
});
CSS
.Lazy {
opacity: 0;
transition: 1s;
}
HTML
<div class="container">
<div class="row">
<div class="col-xs-4 Lazy" id="box1">Column 1 </div>
<div class="col-xs-4 Lazy" id="box2">Column 2 </div>
<div class="col-xs-4 Lazy" id="box3">Column 3 </div>
</div>
</div>
You can also make it more dynamic by checking existence of element with "box"+currentElem ID instead!

Do you mean like this?
$(document).ready(function() {
var dispInterval = 750;
$.each($('div.noDisplay'), function(key, divItem) {
setTimeout(function(){
$(divItem).fadeToggle('slow');
}, dispInterval);
dispInterval += dispInterval;
});
});
.noDisplay{display:none;}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-md-4 noDisplay" id="box1">Column 1 </div>
<div class="col-md-4 noDisplay" id="box2">Column 2 </div>
<div class="col-md-4 noDisplay" id="box3">Column 3 </div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

How to get all the URLs in a web site using JavaScript?

Any one knows a way to get all the URLs in a website using JavaScript?
I only need the links starting with the same domain name.no need to consider other links.

Well this will get all the same-host links on the page:
var urls = [];
for(var i = document.links.length; i --> 0;)
if(document.links[i].hostname === location.hostname)
urls.push(document.links[i].href);
If by site you mean you want to recursively get the links inside linked pages, that's a bit trickier. You'd have to download each link into a new document (for example in an <iframe>), and the onload check the iframe's own document for more links to add to the list to fetch. You'd need to keep a lookup of what URLs you'd already spidered to avoid fetching the same document twice. It probably wouldn't be very fast.

Or in es6
[...document.links].map(l => l.href)

Javascript to extract (and display) the domains, urls, and links from a page
The "for(var i = document.links.length; i --> 0;)" method is a good collection to work with. Here is a example to pulls it from specific parts of the html page.
You could alter it to select and filter to whatever you want. And then use the list however you want. I wanted to show a working example.
var re = /^((http[s]?|ftp|mailto):(?:\/\/)?)?\/?(([^\/\.]+\.)*?([^\/\.]+\.[^:\/\s\.]{1,4})?(\.[^:\/\s\.]{1,2})?(:\d+)?)($|\/)([^#?\s]+)?(.*?)?(#[\w\-]+)?$/i;
var reG = /^((http[s]?|ftp|mailto):(?:\/\/)?)?\/?(([^\/\.]+\.)*?([^\/\.]+\.[^:\/\s\.]{1,4})?(\.[^:\/\s\.]{1,2})?(:\d+)?)($|\/)([^#?\s]+)?(.*?)?(#[\w\-]+)?$/ig;
var printList = document.getElementById("domains");
var unorderedList = document.createElement("ul");
unorderedList.setAttribute("id", "domainsList");
unorderedList.setAttribute("class", "list-group");
printList.appendChild(unorderedList);
var domainsList = document.getElementById("domainsList");
var list = document.getElementsByTagName("a");
//console.log(list);
var listArray = Array.from(list);
//loop through the list
listArray.forEach(function(link){
//console.log(link.href);
//console.log(typeof(link.href));
var listItem = document.createElement("li");
listItem.setAttribute("class", "list-group-item domain");
domainsList.appendChild(listItem);
var str = link.href;
var match = str.match(reG);
var matchGroup = str.match(re);
//console.log(matchGroup[5]);
var domainNode = document.createTextNode("Domain: " + matchGroup[5]);
listItem.appendChild(domainNode);
var breakNode = document.createElement("br");
listItem.appendChild(breakNode);
var websiteNode = document.createTextNode("Website: " + matchGroup[3]);
listItem.appendChild(websiteNode);
var breakNode = document.createElement("br");
listItem.appendChild(breakNode);
var fullNode = document.createTextNode("Full Link: " + match);
listItem.appendChild(fullNode);
domainsList.appendChild(listItem);
unorderedList.appendChild(listItem)
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Pull Domains form a page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="card-deck">
<div class="card mb-3" style="min-width: 10rem;"><div class="card-body">Link 1</div></div>
<div class="card mb-3" style="min-width: 10rem;"><div class="card-body">Link 2</div></div>
<div class="card mb-3" style="min-width: 10rem;"><div class="card-body">Link 3</div></div>
<div class="card mb-3" style="min-width: 10rem;"><div class="card-body">Link 4</div></div>
<div class="card mb-3" style="min-width: 10rem;"><div class="card-body">Link 5</div></div>
<div class="card mb-3" style="min-width: 10rem;"><div class="card-body">Link 6</div></div>
<div class="card mb-3" style="min-width: 10rem;"><div class="card-body">Link 7</div></div>
<div class="card mb-3" style="min-width: 10rem;"><div class="card-body">Link 8</div></div>
<div class="card mb-3" style="min-width: 10rem;"><div class="card-body">Link 9</div></div>
<div class="card mb-3" style="min-width: 10rem;"><div class="card-body">Link 10</div></div>
</div>
<div id="domains"></div>
</body>
</html>
JSFiddle of a working copy

In Javascript:
(function(){
let links = [], l = document.links;
for(let i=0; i<l.length; i++) {
links.push(l[i].href);
}
return links;
})();

using jquery u can find all the links on the page that match a specific criteria
$("a[href=^domain.com]").each(function(){
alert($(this).attr("href"));
});

Categories

Resources