Skip to content

Commit

Permalink
Merge branch 'main' into main
Browse files Browse the repository at this point in the history
  • Loading branch information
@Garima-149
Garima-149 authored Jan 28, 2024
2 parents fe0186f + 296bd26 commit 5f1df1c
Show file tree
Hide file tree
Showing 3 changed files with 140 additions and 63 deletions.
143 changes: 84 additions & 59 deletions app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,30 +29,44 @@ function showNotes(searchTerm = "") {
}

let filteredNotes = notesArray.filter(function (element) {
let cardTitle = element[0].toLowerCase();
let cardTxt = element[1].toLowerCase();
let cardTitle = element.title.toLowerCase();
let cardTxt = element.text.toLowerCase();

return cardTitle.includes(searchTerm) || cardTxt.includes(searchTerm);
});
console.log(filteredNotes);
console.log(searchTerm);

let html = "";
filteredNotes.forEach(function (element, index) {
html += `
<div class="noteCard my-2 card" style="width: 18rem;">
<div class="card-body">
<div style="display:flex; justify-content:space-between;" >
<h5 class="card-title">${element[0]}</h5>
<div style="position:relative; left:0; cursor:pointer">
<i id="${index}" onclick="editNote(this.id)" class="fas fa-edit btn btn-primary"></i>
<i id="${index}" onclick="deleteNote(this.id)" class="fas fa-trash-alt btn btn-danger"></i>
</div>
</div>
<p class="card-text"> ${element[1]}</p>
</div>
</div>`;
let groupedNotes = {};

filteredNotes.forEach(function (element) {
const label = element.label || "Uncategorized";
if (!groupedNotes[label]) {
groupedNotes[label] = [];
}
groupedNotes[label].push(element);
});

for (const label in groupedNotes) {
html += `<h3>${label}</h3>`;
groupedNotes[label].forEach(function (element, index) {
let fontColor = isLightColor(element.color || '#ffffff') ? 'black' : 'white';
html += `
<div class="noteCard my-2 card" style="width: 18rem; background-color: ${element.color || '#ffffff'}; color: ${fontColor};">
<div class="card-body">
<div style="display:flex; justify-content:space-between;" >
<h5 class="card-title">${element.title}</h5>
<div style="position:relative; left:0; cursor:pointer">
<i id="${index}" onclick="editNote(this.id)" class="fas fa-edit btn btn-primary"></i>
<i id="${index}" onclick="deleteNote(this.id)" class="fas fa-trash-alt btn btn-danger"></i>
</div>
</div>
<p class="card-text">${element.text}</p>
</div>
</div>`;
});
}

let notesElm = document.getElementById("notes");
if (filteredNotes.length !== 0) {
notesElm.innerHTML = html;
Expand All @@ -72,51 +86,65 @@ function addaNote() {
} else {
notesArray = JSON.parse(notes);
}

const selectedColor = document.getElementById("backgroundColorPicker").value;

let useDefaultTitle = document.getElementById("useDefaultTitle").checked;
let label = document.getElementById("labelInput").value.trim() || null;

if (addtext.value !== "") {
if (heading.value === "" && useDefaultTitle) {
if (useDefaultTitle) {
let title = getDefaultTitle(addtext.value);
notesArray.push([title, addtext.value]);
notesArray.push({ label: label, title: title, text: addtext.value, color: selectedColor });
localStorage.setItem("notes", JSON.stringify(notesArray));
addtext.value = "";
heading.value = "";
$(".toast").toast("show");
if (volumeButton.classList.contains('fa-volume-up')) {
audio.play();
}
}
else if (heading.value === "" && !useDefaultTitle) {
styledTitle.innerHTML =
'<div class="alert alert-warning" role="alert" style="background: #b5f2fb;">Title cannot be empty! Please enter a title or check the below box for default title</div>';
setTimeout(() => {
styledTitle.innerHTML = "";
}
, 4000);
}
else {
let title = heading.value;
notesArray.push([title, addtext.value]);
localStorage.setItem("notes", JSON.stringify(notesArray));
addtext.value = "";
heading.value = "";
$(".toast").toast("show");
if (volumeButton.classList.contains('fa-volume-up')) {
audio.play();
} else {
if (heading.value === "") {
styledTitle.innerHTML =
'<div class="alert alert-warning" role="alert" style="background: #b5f2fb;">Title cannot be empty! Please enter a title or check the below box for default title</div>';
setTimeout(() => {
styledTitle.innerHTML = "";
}, 4000);
} else {
let title = heading.value;
notesArray.push({ label: label, title: title, text: addtext.value, color: selectedColor });
localStorage.setItem("notes", JSON.stringify(notesArray));
addtext.value = "";
heading.value = "";
$(".toast").toast("show");
if (volumeButton.classList.contains('fa-volume-up')) {
audio.play();
}
}
}

} else {
styledMessageContainer.innerHTML =
'<div class="alert alert-warning" role="alert">Notes cannot be empty!</div>';
setTimeout(() => {
styledMessageContainer.innerHTML = "";
}
, 2000);

}, 2000);
}
showNotes();
}

//Function to determine if the background color is light or dark

function isLightColor(hexColor) {

let r = parseInt(hexColor.slice(1, 3), 16);
let g = parseInt(hexColor.slice(3, 5), 16);
let b = parseInt(hexColor.slice(5, 7), 16);

let luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;

return luminance > 0.5;
}

// Function to get default title from the first two words of text
function getDefaultTitle(text) {
let words = text.split(" ");
Expand All @@ -132,13 +160,12 @@ function editNote(index) {
} else {
notesObj = JSON.parse(notes);
}

heading.value = notesObj[index][0].replace(/ \(Edited\) .*/, '');
addtext.value = notesObj[index][1];
heading.value = notesObj[index].title.replace(/ \(Edited\) .*/, '');
addtext.value = notesObj[index].text;

done.onclick = () => {
const updatedHeading = heading.value.trim(); // Trim leading and trailing spaces
const updatedAddText = addtext.value.trim(); // Trim leading and trailing spaces
const updatedHeading = heading.value.trim();
const updatedAddText = addtext.value.trim();

if (!updatedAddText) {
window.alert("Note cannot be empty. Your item will be deleted.");
Expand All @@ -158,18 +185,15 @@ function editNote(index) {
// Check if heading is not empty before appending "(Edited) " + " " + n
if (headingString) {
headingString += " (Edited) " + new Date().toLocaleTimeString();
const update = [headingString, updatedAddText];

notesObj.splice(index, 1, update);
localStorage.setItem("notes", JSON.stringify(notesObj));
showNotes();
heading.value = "";
addtext.value = "";
addbtn.style.visibility = "visible";
done.style.visibility = "hidden";
}
else {
// Heading is empty, show an alert message
notesObj[index].title = headingString;
notesObj[index].text = updatedAddText;
localStorage.setItem("notes", JSON.stringify(notesObj));
showNotes();
heading.value = "";
addtext.value = "";
addbtn.style.visibility = "visible";
done.style.visibility = "hidden";
} else {
window.alert("Heading cannot be empty.");
}
}
Expand All @@ -178,6 +202,7 @@ function editNote(index) {




function deleteNote(index) {
const notes = localStorage.getItem("notes");
if (notes == null) {
Expand Down
Binary file added boy.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
60 changes: 56 additions & 4 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,18 @@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style>
.center-image {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}

.image-container {
width: 500px;
height: 400px;
}
body{background: var(--color-secondary)}

.toast{
Expand All @@ -25,6 +37,29 @@
.fade {
transition-duration: 1s;
}

.btn-grad {
background-image: linear-gradient(to right, #9259b8 0%, #49a09d 51%, #af68df 100%);
margin: 10px;
padding: 15px 45px;
text-align: center;
text-transform: uppercase;
transition: 0.5s;
background-size: 200% auto;
color: white;
box-shadow: 0 0 20px #eee;
border-radius: 10px;
display: block;

}

.btn-grad:hover {
background-position: right center; /* change the direction of the change here */
color: #fff;
text-decoration: none;
transform: scale(1.1);
}

</style>
</head>

Expand Down Expand Up @@ -67,9 +102,15 @@
</form>
</div>
</nav>

<!-- navbar -->

<div class="center-image">
<div class="image-container">
<img src="boy.jpg" style="width: 100%; height: 100%;" alt="Boy Image">
</div>
<div class="container my-3">


<h1 style="color: rgb(134, 153, 237);">Welcome To Notes</h1>
<div id="styled-message-container"></div>
<div class="card">
Expand All @@ -78,6 +119,8 @@ <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">
<input class="form-control" id="labelInput" rows="1" placeholder="Label"></input>
<br>
<input class="form-control" id="heading" rows="1" placeholder="Title"
onkeydown="if(event.keyCode==13 && !event.ctrlKey && !event.shiftKey){document.getElementById('addTxt').focus(); return false;}"
></input>
Expand All @@ -88,24 +131,33 @@ <h5 class="card-title" style="color: rgb(134, 153, 237);">Add a note
<!-- Adding checkbox in HTML -->
<input type="checkbox" id="useDefaultTitle"> Use Default Title <br>

<!-- Color picker for background color -->
<label for="backgroundColorPicker">Background Color:</label>
<input type="color" id="backgroundColorPicker" value="#ffffff">

<textarea class="form-control" id="addTxt" rows="3" placeholder="Note"
onkeydown="if(event.keyCode==13 && !event.ctrlKey && !event.shiftKey){document.getElementById('addBtn').click(); return false;}"
></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-grad" id="addBtn" style="margin-top: 7px; padding-left: 65px; padding-right: 65px;">Add Note</button>
<button class="btn-grad" id="editBtn" style="margin-top: 7px;padding-left: 65px; padding-right: 65px;">DONE</button>
</div>
</div>
<h3 style="color: rgb(134, 153, 237); margin:1rem 0;">Your Notes</h3>
<div id="notes" class="row container-fluid" style="gap: 1rem;"> </div>
</div>

<submit id="btn"><a style="text-decoration:none" href="faq.html">FAQ'S</a></submit><!---adding faq section in form of buttton-->

</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;color: var(--font-color); ">
<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;color: var(--font-color);">
<img src="images/check-mark.png" class="rounded mr-2" width="23px">
<span>Note Created Successfully!</span>
</div>
Expand Down

0 comments on commit 5f1df1c

Please sign in to comment.