I'm working on a website which is used to display the news using vertically collapsing accordions.I'm using an external API to fetch the news.
I need only news to be visible at a time.
When I click on the 2nd news title, I need the 1st news description to be hidden/collapsed. Similarly, when I click on any of the news , I want the rest to be kept collapsed/hidden , but this doesn't work . (See web page snip)
Here are the html and JS codes.
JS :
let display = document.getElementById("display");
const xhr = new XMLHttpRequest;
xhr.open("GET", "https://newsapi.org/v2/top-headlines?sources=bbc-news&apiKey=70893d07e43d413faf7813e13df0f8aa", true)
xhr.onload = function () {
let strHtml = "";
if (this.status === 200) {
let newsObj = JSON.parse(this.responseText);
let newsArticles = newsObj.articles;
console.log(newsArticles)
newsArticles.forEach(function (element, index) { //newsArticle --> an array which contains the news data including the title and description of the news
let str = `<div class="accordion-item">
<h2 class="accordion-header" id="heading${index}">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse${index}" aria-expanded="false" aria-controls="collapse${index}">
${element.title}
</button>
</h2>
<div id="collapse${index}" class="accordion-collapse collapse" aria-labelledby="heading${index}" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong> ${element.description}</strong>
Learn more</button>
</div>
</div>
</div>`
strHtml += str; //append news data into strHtml string
});
}
else {
console.log("some error")
}
display.innerHTML = strHtml; //to display the news on the page
}
xhr.send();
<!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>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">BBC News</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<div class="container my-3">
<h3><span class="badge bg-primary">Top news</span>
</h3>
</div>
<hr>
<div class="container accordionExample" >
<div class="accordion" id="display">
</div>
</div>
</div>
<script src="./JS/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
</body>
</html>
You need a <div> around your accordion with a parent ID:
<div class="accordion" id="accordionExample">
And in your .collapse element you need that
data-bs-parent="#accordionExample"
You already have that. So I guess it's just the missing wrapper.
trying replacing the 'str' variable with the below one. It should work then.
let str = `<div class="card">
<div class="accordion-header" id="heading${index}">
<h5 class="mb-0">
<button class="btn" data-toggle="collapse" data-target="#collapse${index}" aria-expanded="true" aria-controls="collapse${index}">
${element.title}
</button>
</h5>
</div>
<div id="collapse${index}" class="collapse collapse" aria-labelledby="heading${index}">
<div class="accordion-body">
<strong> ${element.description}</strong>
Learn more</button>
</div>
</div>
</div>`
Related
I tried the navbar toggler in mobile view and it is not showing the list.
here is my code, I have a CSS file linked in the head tag and other script tags inside the body tag
<body>
<header class="bg-info">
<div class="row text-white">
<div class="col-md-6 xs-9 ">
<h2>yahiya muhammed</h2>
</div>
<div class="col-md-6 col-xs-3 my-auto">
<nav class="navbar navbar-expand-lg navbar-light">
<button class="navbar-toggler ms-auto" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end " id="navbarSupportedContent">
<ul class="navbar-nav ">
<li class="nav-item active">
<a class="nav-link text-white" href="#">Home <span class="sr-only"></span></a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#">services</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#">prjects</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#">contact me</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</header>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
</body>
I tried to mobile view and the navbar toggler is not showing items
Your toggle button has incorrect attributes. Change data-toggle="collapse" to data-bs-toggle="collapse" and change data-target="#navbarSupportedContent" to data-bs-target="#navbarSupportedContent".
Working snippet below:
<button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>
<body>
<header class="bg-info">
<div class="row text-white">
<div class="col-md-6 xs-9 ">
<h2>yahiya muhammed</h2>
</div>
<div class="col-md-6 col-xs-3 my-auto">
<nav class="navbar navbar-expand-lg navbar-light">
<button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end " id="navbarSupportedContent">
<ul class="navbar-nav ">
<li class="nav-item active">
<a class="nav-link text-white" href="#">Home <span class="sr-only"></span></a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#">services</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#">prjects</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#">contact me</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</header>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>
</body>
</html>
I'm trying to resolve a coding task. I have to pull the data from the https://jsonplaceholder.typicode.com/users using fetch API function, bootstrap and jquery. I used the array.map() to print the data in a div element. Below is the vanilla version of the code - JS is running in the script tags in the HTML element.
However, the second part of the task is to hide the element on Delete button click and this is where I struggle to find a solution. I tried the callback function or button 'onclick' but that didn't work. Can someone please point me in the right direction?
Thanks!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>UI Demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font- awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container-fluid">
<span class="navbar-brand" href="#">Test App</span>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item dropdown bg-light" >
<a class="nav-link dropdown-toggle text-dark" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Menu
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Menu 1</a></li>
<li><a class="dropdown-item" href="#">Menu 2</a></li>
<li><a class="dropdown-item" href="#">Menu 3</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<main>
<div class="container" id="box">
<h3>Showing </h3>
<div class="row">
<!-- Fetched data gets inserted here -->
</div>
</div>
</main>
<script>
fetch('https://jsonplaceholder.typicode.com/users').then((data) => {
// console.log(data);
return data.json();
}).then((jsondata) => {
const names = jsondata.map((values)=> {
return `<div class="col col-lg-4 col-md-4 gx-4 gy-4">
<div id="card" class="card p-2">
<h2 id="user">${values.name}</h2>
<div class="card-body">
<p><strong>Street:</strong> ${values.address.street}</p>
<p><strong>Suite:</strong> ${values.address.suite}</p>
<p><strong>City:</strong> ${values.address.city}</p>
<p><strong>Zip Code:</strong> ${values.address.zipcode}
</p>
<button "class="btn btn-primary float-end"><span><i class="fa-solid fa-trash-can"></i> </span>Delete</button>
</div>
</div>
</div>`
})
// document.getElementById('user').innerHTML = names;
document.querySelector('.row').innerHTML = names;
</script>
You need to give id to card element.
Add click event that remove DOM element.
Also array.map returns array so If you don't want that comma you can use array.join()
Note that this will not delete items from backend/database,for that you need to make other api call.
final result :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>UI Demo</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font- awesome/6.1.1/css/all.min.css"
integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container-fluid">
<span class="navbar-brand" href="#">Test App</span>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item dropdown bg-light">
<a
class="nav-link dropdown-toggle text-dark"
href="#"
id="navbarDropdown"
role="button"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Menu
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Menu 1</a></li>
<li><a class="dropdown-item" href="#">Menu 2</a></li>
<li><a class="dropdown-item" href="#">Menu 3</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<main>
<div class="container" id="box">
<h3>Showing</h3>
<div class="row">
<!-- Fetched data gets inserted here -->
</div>
</div>
</main>
<script>
function deleteCard(id) {
document.getElementById(id).remove();
}
fetch("https://jsonplaceholder.typicode.com/users")
.then((data) => {
return data.json();
})
.then((jsondata) => {
console.log(jsondata);
const names = jsondata.map((values) => {
return `<div class="col col-lg-4 col-md-4 gx-4 gy-4" id="${values.id}">
<div id="card" class="card p-2">
<h2 id="user">${values.name}</h2>
<div class="card-body">
<p><strong>Street:</strong> ${values.address.street}</p>
<p><strong>Suite:</strong> ${values.address.suite}</p>
<p><strong>City:</strong> ${values.address.city}</p>
<p><strong>Zip Code:</strong> ${values.address.zipcode}</p>
<button onclick="deleteCard(${values.id})" "class="btn btn-primary float-end"><span><i class="fa-solid fa-trash-can"></i> </span>Delete</button>
</div>
</div>
</div>`;
});
document.querySelector(".row").innerHTML = names.join("");
});
</script>
</body>
</html>
I am new to Bootstrap and am trying to build a three-column navigation menu with the nav-links centered in the middle. I could build this in five minutes using grids or flexbox but for the life of me, I can't center the nav-links!!! picture for reference.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<img src="/resources/images/Babyboom_logo_main.png" width="200" height="50" alt="BabyBoom logo" class="navbar-brand">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<col>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Sessions</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
<div class="col-sm">
<a class="btn btn-primary float-right" href="#" role="button">Book Now</a>
</div>
</div>
</nav>
try using mx-auto. The bellow code should work for you:)
<html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" ></script>
<div class="row ">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<img src="/resources/images/Babyboom_logo_main.png" width="200" height="50" alt="BabyBoom logo" class="navbar-brand">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="col-md-9 ">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="col-md-3 navbar-nav mx-auto">
<li class="nav-item">
<a class="nav-link" href="#">Sessions</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
<div class="col-md-2">
<a class="btn btn-primary float-right" href="#" role="button">Book Now</a>
</div>
</div>
</div>
</nav>
<!-- end snippet -->
</html>
You can do it in two ways
By adding mx-auto class to ul tag i.e
<ul class="col-md-3 navbar-nav mx-auto">
By adding justify-content-center to the collapse div
<div class="collapse navbar-collapse justify-content-center" id="navbarSupportedContent">
Hope it work for you :)
I am making a 'to-do' web page and there I am adding all the tasks into an array. Now, to delete an already added task, I have tried to use Splice, Shift and remove but none are deleting the task at the desired index as well as the card from UI. Would be thankful for any help as I am total beginner.
let addbtn=document.getElementById('addbtn')
addbtn.addEventListener('click',addnotes)
var nodeadd=[];
var arr;
var result;
var unique;
function addnotes(){
console.log("I am adding");
let addtxt=document.getElementById('addTxt');
nodeadd.push(addtxt.value);
unique=[...new Set(nodeadd)];
//arr=unique.join("").trim().split(' ');
// result=unique.filter((item)=>item!=' ');
console.log("I am texting",unique);
addtxt.value="";
showNotes();
}
function showNotes(){
let html="";
console.log("I am getting",unique);
//result=unique.join("").trim().split(' ');
//const result=unique.filter((item)=>item!=' ');
result = unique.filter(unique => unique.trim().length > 0);
console.log("I am result",result);
result.forEach((element,index) => {
console.log("I am calling")
console.log(element,index);
html+=`<div class="nodeCard my-2 mx-2 card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">${index}</h5>
<p class="card-text">${element}</p>
<button id="${index}" onclick="deleteNote(this.id)" class="btn btn-primary">Delete note</a>
</div>
</div>`
});
let ele=document.getElementById('notes');
if(result.length!=0){
ele.innerHTML=html;
}
}
function deleteNote(index){
for(let i=0;i<result.length;i++){
//console.log("I am logging");
//console.log("index",i);
//console.log("indexing",index);
console.log(index);
if(i==index){
//console.log("I am getting index",i,index);
result.splice(i,1);
// result.shift();
}
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" id="search" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<div class="container my-3">
<h1>Welcome to magic notes</h1>
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Add a note</h5>
<div class="mb-3">
<label for="exampleFormControlTextarea1" class="form-label">Example textarea</label>
<textarea class="form-control" id="addTxt" rows="3"></textarea>
</div>
<button class="btn btn-primary" id="addbtn">Add note</a>
</div>
</div>
<h2>Notes</h2>
<hr/>
<div id="notes" class="row container-fluid">
</div>
<script src="app.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.3/dist/umd/popper.min.js" integrity="sha384-W8fXfP3gkOKtndU4JGtKDvXbO53Wy8SZCQHczT5FMiiqmQfUpWbYdTil/SxwZgAN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.min.js" integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/" crossorigin="anonymous"></script>
</body>
</html>
Use arr.filter instead of splice. you can also read docs on arr.filter from MDN it will be helpful to you.
For example
const updatedarr = oldarr.filter((item) => item.id ===id )
// filter returns a new array containing the elements that meet the condition in the function passed to it
You need to add ID to new element and then remove it by this ID from DOM. Check triple-line // comments inline.
As for array, basically splice is right, but you need to handle last array element and not forget about nodeadd array
BUT - keep in mind, that you removing notes by their ID, so if you first remove id 0, then after splice your prev id 1 will become id 0, but your button will reference to id 1 - this will prevent elements from removing. Try to update this code, so element id's will be refreshed each time you remove note.
let addbtn=document.getElementById('addbtn')
addbtn.addEventListener('click',addnotes)
var nodeadd=[];
var arr;
var result;
var unique;
function addnotes(){
console.log("I am adding");
let addtxt=document.getElementById('addTxt');
nodeadd.push(addtxt.value);
unique=[...new Set(nodeadd)];
//arr=unique.join("").trim().split(' ');
// result=unique.filter((item)=>item!=' ');
console.log("I am texting",unique);
addtxt.value="";
showNotes();
}
function showNotes(){
let html="";
console.log("I am getting",unique);
//result=unique.join("").trim().split(' ');
//const result=unique.filter((item)=>item!=' ');
result = unique.filter(unique => unique.trim().length > 0);
console.log("I am result",result);
result.forEach((element,index) => {
console.log("I am calling")
console.log(element,index);
//
// Add ID to html element
//
html+=`<div id="noteId-${index}" class="nodeCard my-2 mx-2 card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">${index}</h5>
<p class="card-text">${element}</p>
<button id="${index}" onclick="deleteNote(this.id)" class="btn btn-primary">Delete note</a>
</div>
</div>`
});
let ele=document.getElementById('notes');
if(result.length!=0){
ele.innerHTML=html;
}
//
// Log results
//
console.log(result);
}
function deleteNote(index){
for(let i=0;i<result.length;i++){
//console.log("I am logging");
//console.log("index",i);
//console.log("indexing",index);
console.log(index);
if(i==index){
//console.log("I am getting index",i,index);
//
// Check if last result
//
if(result.length === 1) {
result.splice(-1);
// also splice nodeadd array
nodeadd.splice(-1);
} else {
result.splice(i,1);
// also splice nodeadd array
nodeadd.splice(i,1);
}
break;
// result.shift();
}
}
//
// Log results
//
console.log(result);
//
// Remove element from DOM by ID
//
document.getElementById(`noteId-${index}`).remove();
//
//
//
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" id="search" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<div class="container my-3">
<h1>Welcome to magic notes</h1>
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Add a note</h5>
<div class="mb-3">
<label for="exampleFormControlTextarea1" class="form-label">Example textarea</label>
<textarea class="form-control" id="addTxt" rows="3"></textarea>
</div>
<button class="btn btn-primary" id="addbtn">Add note</a>
</div>
</div>
<h2>Notes</h2>
<hr/>
<div id="notes" class="row container-fluid">
</div>
<script src="app.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.3/dist/umd/popper.min.js" integrity="sha384-W8fXfP3gkOKtndU4JGtKDvXbO53Wy8SZCQHczT5FMiiqmQfUpWbYdTil/SxwZgAN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.min.js" integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/" crossorigin="anonymous"></script>
</body>
</html>
did you try .indexOf()?
arr.splice(arr.indexOf(ele), 1);
I am new to this so please bear with me. I copied this navbar code from Bootstrap and tweaked it to fit my code.
I have a dropdown list with three dropdown items. I want the user to have two options. They can go to the portfolio page and find the links there or they can use the dropdown menu.
The link to the portfolio page does not work when the last script that contains bootstrap.min.js is in the code. Not sure why this is not working. If I take out the dropdown and make it a regular link it goes to the portfolio page. Here is my code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<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">
<link rel ="stylesheet" type="text/css" href="style.css">
<title>Do You Know Jennipher</title>
</head>
<nav class="navbar sticky-top navbar-expand-lg">
<a class="navbar-brand" href="index.html">Do You Know Jennipher</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="aboutme.html">About Me</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="previous_work.html">Portfolio</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="previous_work.html">Egyptian Petrdise</a>
<a class="dropdown-item" href="previous_work.html">Movie Madness</a>
<a class="dropdown-item" href="previous_work.html">George's Safari Adventure</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="gallery.html">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="say_hello.html">Say Hello</a>
</li>
</ul>
</div>
</nav>
<header>
<div class="flex-container">
<img src="images/banner_ad.jpg" class="banner" alt="banner ad">
</div>
</header>
<body>
<section class="intro">
<div class="container">
<div class="row">
<div class="col-6">
<img src="images/mountains.jpg" alt="rocky mountains" class="mountain" width="500px">
</div>
<div class="col-6">
<p class="intro-text">Hello, my name is Jennipher </p>
</div>
</div>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
</script>
</body>
<footer>
<p class="footer">© Copyright 2019 Jennipher Samms</p>
</footer>
</html>
There's nothing wrong with min.js library. Only you should follow perfect body layout and syntax. It's better to always keep your <script> files before </body> tag ends. End you forgot write some elements inside the body instead you wrote them outside body tag. I just adjusted some of your code. Check it once.
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel ="stylesheet" type="text/css" href="style.css">
<title>Do You Know Jennipher</title>
</head>
<body>
<nav class="navbar sticky-top navbar-expand-lg">
<a class="navbar-brand" href="index.html">Do You Know Jennipher</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="aboutme.html">About Me</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="previous_work.html">Portfolio</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="previous_work.html">Egyptian Petrdise</a>
<a class="dropdown-item" href="previous_work.html">Movie Madness</a>
<a class="dropdown-item" href="previous_work.html">George's Safari Adventure</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="gallery.html">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="say_hello.html">Say Hello</a>
</li>
</ul>
</div>
</nav>
<header>
<div class="flex-container">
<img src="images/banner_ad.jpg" class="banner" alt="banner ad">
</div>
</header>
<section class="intro">
<div class="container">
<div class="row">
<div class="col-md-6">
<img src="images/mountains.jpg" alt="rocky mountains" class="mountain" width="500px">
</div>
<div class="col-md-6">
<p class="intro-text">Hello, my name is Jennipher </p>
</div>
</div>
</div>
</section>
<footer>
<p class="footer text-center">© Copyright 2019 Jennipher Samms</p>
</footer>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>
For better practice please go through this link