Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
mdthejaswini123 authored Jun 12, 2024
0 parents commit c515e62
Showing 1 changed file with 111 additions and 0 deletions.
111 changes: 111 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,111 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Courses</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg bg-primary navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link active" aria-current="page" href="#">Home</a>
<a class="nav-link" href="#">Features</a>
<a class="nav-link" href="#">Pricing</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</div>
</div>
</div>
</nav>
</header>
<div class="container mt-5 col-6">
<div class="input-group mb-4">
<input type="text" id="inputtext"class="form-control" placeholder="Chapter Name" aria-label="Recipient's username" aria-describedby="button-addon2">
<button class="btn btn-outline-success" type="button" id="add" id="button-addon2">Add</button>
</div>
<ul class="list-group" id="parentlist" >

<li class="list-group-item d-flex justify-content-between my-2" id="list"><h4 class="flex-grow-1">Chapter1 </h4>
<button class="btn btn-warning mx-5" onclick="editchapter(this)" >Edit</button>
<button class="btn btn-danger " onclick="removechapter(this)">Remove</button></li>
</ul>
</div>
<script>
// to add an element into list
let addBtn=document.getElementById("add");
addBtn.addEventListener('click',addchapter);
let parentlist=document.getElementById('parentlist');
function addchapter(e)
{
//to remove the empty message if there is
//to get the entered input
let currentInput=document.getElementById('inputtext');
if(currentInput.value=='')
{
alert('you have not entered the task');//empty task cannot be inserted
}
// console.log(currentInput.value);
//to create the li element
else{
if(parentlist.children[0].className=="emptyMsg alert alert-danger")
{
parentlist.children[0].remove();
}
let newli=document.createElement('li');
// newli.classList.add("list-group-item");
newli.className="list-group-item d-flex justify-content-between my-2";
newli.id='list';
//adding text to li element
newli.innerHTML=`<h4 class="flex-grow-1">${currentInput.value} </h4>
<button class="btn btn-warning mx-5" onclick="editchapter(this)" >Edit</button>
<button class="btn btn-danger " onclick="removechapter(this)" >Remove</button>`;
//to append the created element into ul
parentlist.appendChild(newli);
currentInput.value='';//cleraing the input field
}
}
//to remove the element
function removechapter(currentElement)
{
currentElement.parentElement.remove();//removing the parent element
if(parentlist.children.length<=0)
{
let newmsg=document.createElement('h4');
newmsg.textContent="Nothing is here please add a chapter! "// to give message if there are no element
parentlist.appendChild(newmsg);//append message to parent
newmsg.className='emptyMsg alert alert-danger';//styling
}
}
//to edit the element
function editchapter(currentElement)
{
if(currentElement.textContent=='Done')
{
currentElement.textContent='Edit';
currentChapter=currentElement.previousElementSibling.value;
let currentheading=document.createElement('h4');
currentheading.textContent= currentChapter;
currentheading.className='flex-grow-1';
currentElement.parentElement.replaceChild( currentheading,currentElement.previousElementSibling);
}
else{
currentElement.textContent='Done';
currentChapter=currentElement.previousElementSibling.textContent;
let currentInput=document.createElement('input');
currentInput.value= currentChapter;
currentInput.placeholder="Chapter Name"
currentInput.className="form-control";
currentElement.parentElement.replaceChild(currentInput,currentElement.previousElementSibling);
}

}
</script>
</body>
</html>

0 comments on commit c515e62

Please sign in to comment.