Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit f1faf0a

Browse files
added notes add and delete functionality
0 parents commit f1faf0a

File tree

2 files changed

+121
-0
lines changed

2 files changed

+121
-0
lines changed

‎index.html‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<!-- Required meta tags -->
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
8+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
9+
<!-- Bootstrap CSS -->
10+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
11+
12+
<title>Hello, world!</title>
13+
</head>
14+
<body>
15+
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
16+
<a class="navbar-brand" href="#">Navbar</a>
17+
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
18+
<span class="navbar-toggler-icon"></span>
19+
</button>
20+
21+
<div class="collapse navbar-collapse" id="navbarSupportedContent">
22+
<ul class="navbar-nav mr-auto">
23+
<li class="nav-item active">
24+
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
25+
</li>
26+
<li class="nav-item">
27+
<a class="nav-link" href="#">Link</a>
28+
</li>
29+
<li class="nav-item dropdown">
30+
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
31+
Dropdown
32+
</a>
33+
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
34+
<a class="dropdown-item" href="#">Action</a>
35+
<a class="dropdown-item" href="#">Another action</a>
36+
<div class="dropdown-divider"></div>
37+
<a class="dropdown-item" href="#">Something else here</a>
38+
</div>
39+
</li>
40+
<li class="nav-item">
41+
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
42+
</li>
43+
</ul>
44+
<form class="form-inline my-2 my-lg-0">
45+
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
46+
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
47+
</form>
48+
</div>
49+
</nav>
50+
<div class="main-container mx-auto" style="width: 60%">
51+
52+
<h2 class=" mt-5 mb-2">Welcome to Notes App</h2>
53+
<form>
54+
55+
<div class="form-group">
56+
<input type="text" class="form-control my-3" id="note_title" placeholder="Note Title" style="border: 1px solid black;">
57+
<textarea class="form-control" id="exampleFormControlTextarea1" rows="7" placeholder="Your Note" style="resize: none; border: 1px solid black;"></textarea>
58+
</div>
59+
<button type="button" class="btn btn-dark" onclick="add_note()">Add Note</button>
60+
</form>
61+
<div class="note_container my-5" id="nc">
62+
<h4>Your Notes</h4>
63+
<div class="notes row container-fluid justify-content-between" id="nt">
64+
65+
</div>
66+
</div>
67+
</div>
68+
</div>
69+
<script src="js/script.js"></script>
70+
<!-- Optional JavaScript; choose one of the two! -->
71+
72+
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
73+
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
74+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
75+
76+
<!-- Option 2: jQuery, Popper.js, and Bootstrap JS
77+
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
78+
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
79+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
80+
-->
81+
</body>
82+
</html>

‎js/script.js‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
function note_layout_creater(title,text)
2+
{
3+
4+
note_card = document.createElement('div')
5+
note_card.className="note";
6+
let html;
7+
8+
console.log(note_card);
9+
return note_card
10+
}
11+
main_container = document.querySelector('.note_container');
12+
13+
function add_note()
14+
{
15+
notes_count=document.querySelectorAll('.note').length;
16+
text = document.getElementById('exampleFormControlTextarea1').value;
17+
note_card = note_layout_creater(notes_count,text);
18+
note_title = document.getElementById('note_title').value;
19+
20+
note_card.id = `${notes_count+1}`;
21+
22+
main_container = document.getElementById('nt');
23+
main_container.appendChild(note_card);
24+
html = `
25+
<div class="card text-white bg-dark mx-1 mb-3 id="${notes_count+1}" style=" max-width: 18rem;">
26+
<div class="card-header row container-fluid justify-content-between" style="margin: 0px !important">Note: ${notes_count+1} <i" onclick="notedelete(${notes_count+1})"style="padding: 3px 0 0 0; cursor:pointer;" class="fa fa-trash" aria-hidden="true"></i></div>
27+
<div class="card-body">
28+
<h5 class="card-title">${note_title}</h5>
29+
<p class="card-text">${text.slice(0,15)}...</p>
30+
</div>`;
31+
document.getElementById(`${notes_count+1}`).innerHTML=html;
32+
33+
}
34+
function notedelete(id)
35+
{
36+
el=document.getElementById(id);
37+
el.remove()
38+
console.log("hello")
39+
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /