Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Reminder, task and event button #62

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Reminder, task and event button #62

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e48fc31
first commit
mehaksmansoori Jan 5, 2024
c08d40a
1st
mehaksmansoori Jan 5, 2024
f6d29dd
ADD
mehaksmansoori Jan 20, 2024
f29dcd3
hie
mehaksmansoori Jan 22, 2024
42a2c32
hii
mehaksmansoori Jan 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 3 additions & 5 deletions app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
//DOM selectors

showNotes();
let addbtn = document.getElementById("addBtn");
let done = document.getElementById("editBtn");
Expand All @@ -7,12 +7,10 @@ let searchTxt = document.getElementById("searchTxt");
let heading = document.getElementById("heading");
let volumeButton = document.getElementById('mute-button');
done.style.visibility="hidden";
//Event listeners

addbtn.addEventListener("click", addaNote);
searchTxt.addEventListener("input", searchtext);

//Functions
// let notesArray=[]
function showNotes() {
let notes = localStorage.getItem("notes");
if (notes == null) {
Expand Down Expand Up @@ -165,4 +163,4 @@ function toggleMute() {
volumeButton.classList.remove('fa-volume-up');
volumeButton.classList.add('fa-volume-mute');
}
}
}
120 changes: 43 additions & 77 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,113 +2,79 @@
<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">
<script src='https://kit.fontawesome.com/49a2f38d1d.js' crossorigin='anonymous'></script>
<title>Notes app</title>

<link rel = "icon" href = "notes-1.png" type = "image/x-icon">

<!-- ... (existing head content) ... -->
<link rel="stylesheet" href="style.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">
<style>
body{background: var(--color-secondary)}
/* Add your additional styles here */

.toast{
color: white;
background: var(--color-secondary);
}
.fade {
transition-duration: 1s;
body {
background: var(--color-secondary);
margin-bottom: 50px; /* Add bottom margin to the body */
}
</style>
</head>

<body>

<!-- navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">


<img class="logo" src="notes-1.png" alt="">

<a class="navbar-brand" href="#">Notes</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>
.container {
padding: 20px;
margin-bottom: 20px; /* Add bottom margin to the container */
}

<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#"><span class="sr-only">(current)</span></a>
</li>
.navbar {
margin-bottom: 20px; /* Add bottom margin to the navbar */
}

</ul>
<i id="mute-button" onclick="toggleMute()" class='fas fa-volume-up blue-mute'></i>
<form class="form-inline my-2 my-lg-0">
#notes {
margin-top: 20px; /* Add top margin to the notes section */
}

<!-- theme switcher -->
<div class="container">
.card-body {
background: var(--color-secondary);
border: 1px solid #ccc;
border-radius: 10px;
}

<label id="switch" class="switch">
#addBtn,
#editBtn,
#addTaskBtn,
#addEventBtn,
#addReminderBtn {
margin-top: 10px; /* Add top margin to the buttons */
}

<input type="checkbox" onchange="toggleTheme()" id="slider">
<span class="slider round"></span>
/* Additional styles as needed */

<!-- <form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" id="searchTxt" type="search" placeholder="Search" aria-label="Search"> -->
</form>
</style>
</head>

</div>
</div>
<body>

</nav>
<!-- navbar -->
<!-- ... (existing body content) ... -->

<div class="container my-3">
<h1 style="color: rgb(134, 153, 237);">Welcome To Notes</h1>
<h1 style="color: rgb(134, 153, 237); margin-bottom: 20px;">Welcome To Notes</h1>
<div class="card">
<div class="card-body" style="background: var(--color-secondary);">
<div class="card-body">
<h5 class="card-title" style="color: rgb(134, 153, 237);">Add a note
<audio src="sounds/mixkit-tile-game-reveal-960.wav" class="sound"></audio>
</h5>
<div class="form-group">
<textarea class="form-control" id="heading" rows="1" placeholder="Title"></textarea> <br>
<textarea class="form-control" id="addTxt" rows="3" placeholder="Note"></textarea>
</div>
<button class="btn btn-primary" id="addBtn" style="margin-top: 7px;">Add Note</button>
<button class="btn btn-primary" id="editBtn" style="margin-top: 7px;">DONE</button>
<button class="btn btn-primary" id="addBtn">Add Note</button>
<button class="btn btn-primary" id="editBtn">DONE</button>
</div>
</div>
<h3 style="color: rgb(134, 153, 237); margin-top: 8px;">Your Notes</h3>
<h3 style="color: rgb(134, 153, 237); margin-top: 20px; margin-bottom: 10px;">Your Notes</h3>
<div id="notes" class="row container-fluid"> </div>
<button class="btn btn-primary" id="addTaskBtn">Add Task</button>
<button class="btn btn-primary" id="addEventBtn">Add Event</button>
<button class="btn btn-primary" id="addReminderBtn">Add Reminder</button>
</div>
</div>


<!-- *** Toast Message *** -->
<div id="" role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-animation="true" data-autohide="true" data-delay="1000" style="position: absolute; top:90vh; right:18px ">
<div class="toast-body">
<img src="images/check-mark.png" class="rounded mr-2" width="23px">
Note Created Successfully!
</div>
</div>

<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>
<script src="app.js"></script>
<!-- ... (existing body content) ... -->

</body>

</html>
</html>
<!-- ... (end of app comp) ... -->
2 changes: 1 addition & 1 deletion style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,7 @@ body {
border-radius: 50%;
}
.blue-mute {
color: #637cf3;
color: #8763f3;
font-size: 40px;
margin-right: 20px;
cursor: pointer;
Expand Down