I am building a project using HTML, bootstrap CSS and Jquery.
This is my HTML code:
<!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="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="node_modules/bootstrap-social/bootstrap-social.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Exo&display=swap">
<link rel="stylesheet" href="styles.css">
<title>TimeGuard</title>
</head>
<body>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-body">
<form>
<div class="form-group row">
<label for="name" class="col-form-label">NAME: <input id="targetname" type="text"
placeholder="Enter name of target website" style="width:350px"></label>
<label for="url" class="col-form-label">URL: <input id="targeturl" type="text"
placeholder="Enter URL of target website"
style="width:350px;margin-left:15px;"></label>
<div class="alert alert-info" role="alert">
Both the input fields are mandatory
</div>
<div>
<button type="submit" class="btn btn-light" id="close">Cancel</button>
<button type="submit" class="btn btn-dark" id="submit"
disabled="disabled">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="main">
<div>
<nav class="navbar">
<ul class="nav nav-tabs nav-justified" id="firstul">
<li class="nav-item active" style="width:200px"><a class="nav-link" href="#dashboard">DASHBOARD</a>
</li>
<li class="nav-item inactive" style="width:200px;"><a class="nav-link" href="#reports">REPORTS</a>
</li>
<li class="nav-item inactive" style="width:500px;"><a class="nav-link" href="#addict">ADDICT
SETTINGS</a></li>
</ul>
</nav>
</div>
<div class="tab-content" style="padding:20px;">
<div class="tab-pane fade active show" role="tab-panel" id="dashboard">
<div>
<h1>OVERVIEW</h1>
<div class="container-fluid box">
<div class="row justify-content-around">
<div class="overview col-3">
<div style="font-size:79px;">
00:00:00
</div>
</div>
<div class="overview col-3">
<div style="font-size:79px;">
00:00:00
</div>
</div>
</div>
<div class="row justify-content-around">
<div class="col-3">
</div>
<div class="col-3">
</div>
</div>
</div>
</div>
<div>
<h1>TARGET WEBSITES</h1>
<div class="box container-fluid">
<div class="row justify-content-center">
<div id="tarwebs" class="col-6">
</div>
<div class="row">
<i id="addbtn" class="fa fa-plus-circle" type="button"
style="font-size:50px;margin-left:650px;margin-top:20px;"></i>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" role="tab-panel" id="reports">
<h1>DAILY</h1>
<div class="box container-fluid">
<div class="row justify-content-around">
</div>
</div>
<h1>WEEKLY</h1>
<div class="box container-fluid">
<div class="row justify-content-around">
<canvas id="myChart" style="width:100%;max-width:600px"></canvas>
</div>
</div>
<h1>MONTHLY</h1>
<div class="box container-fluid">
<div class="row justify-content-around">
</div>
</div>
</div>
</div>
</div>
<script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
<script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<script src="dashboard.js"></script>
</body>
</html>
This is CSS code:
body{
font-family: 'Exo', sans-serif;
}
.main{
background-color:rgb(4, 209, 4);
margin:30px;
border-radius:10px;
padding-top: 0px;
padding-bottom:20px;
}
.navbar{
background-color:white;
padding-left:0px;
padding-right:0px;
margin-left:auto;
margin-right:auto;
padding:0px;
}
.nav-link{
color:black;
}
li{
font-size:25px;
text-align:center;
}
li.active{
background-color: rgb(4, 209, 4);
color:black;
border:5px double;
border-bottom:none;
}
li.inactive{
background-color: green;
}
.box{
border:1px solid rgb(92, 86, 86);
border-radius:10px;
padding:20px;
}
.overview{
background-color: white;
padding:5px;
justify-content:center;
border-radius:50px;
text-align:center;
}
#tarwebs{
background-color: rgb(128, 183, 231);
padding:10px;
justify-content:center;
border-radius:50px;
}
.targets{
background-color: white;
height: 40px;
border-radius:25px;
padding:8px 30px 8px 15px;
}
.target-input{
background-color: antiquewhite;
border-radius:2px;
}
.fa-star:hover{
color:rgb(241, 241, 214);
}
.select{
color:yellow;
}
.deselect{
color:black;
}
This is the Javascript(Jquery) code:
$(document).ready(function () {
$("#firstul li").on("click", function () {
$("#firstul li").removeClass("active").addClass("inactive");
$(this).removeClass("inactive").addClass("active");
$(".tab-pane").removeClass("active show").addClass("d-none");
let value = this.children[0].getAttribute("href");
$(value).addClass("active show").removeClass("d-none");
});
$("#addbtn").on("click", function () {
$("#myModal").modal("show");
});
$("#close").on("click", function () {
$("#myModal").modal("hide");
});
$("#targeturl").on("input change", function () {
if ($("this").val() == "")
$("#submit").prop("disabled", true);
else
$("#submit").prop("disabled", false);
});
$(".fa-star").on("click", function () {
$(this).toggleClass("select deselect");
});
$("#submit").on("click", function (e) {
e.preventDefault();
$("#myModal").modal("hide");
let url = $("#targeturl").val();
let name = $("#targetname").val();
let domain = new URL(url);
domain = domain.hostname;
if (name == "") {
name = domain;
}
let text = `<div class="targets" style="margin-down:10px;"><img src="https://s2.googleusercontent.com/s2/favicons?domain_url=${domain}"><b style="margin-left:10px;">${name}</b><i class="fa fa-trash" style="font-size:25px;float:right;" type="button"></i><i class="fa fa-star select" style="font-size:25px;float:right;margin-right: 10px;" type="button"></i></div>`;
document.getElementById("tarwebs").innerHTML+=text;
})
});
My issues are:
-
After entering the form specified in the modal and submitting it, the document is changed as expected (A div element appears as expected) . But after opening the modal again (By clicking the plus icon below), if I click “cancel” button without entering any detail , the page reloads and all the previous div elements in the document disappear. I want that the user should retain the previous div element as well as add another div element by filling the modal again.
-
After re-opening the modal second time, the previous inputs are retained. I have to first delete those inputs before filling another.
I would be glad if someone could solve these issues.