So I was making this sticky note adding project, where if you click on the “plus” icon a window will pop up where you can type your note content with your name.
For the first note it’s working good when I tap on preview another window pops-up and I can how my note actually looks before submitting or I can tap on “submit” in the first window to save it in an empty container.
So as I was saying it’s working well for the first note but from the second note the “preview” button isn’t working all the notes are getting saved inside preview but I want them inside that empty container just like the first Note.
HTML
<!DOCTYPE html> <html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="sticky.css"> </head> <body>
<div class="welcome">
<div class="text-1">
<h1 class="h1">Welcome to stickey Notez just stick something memorable </h1>
</div> </div>
<div class="plus">
<div class="icon-plus">
<div id="plus" class="fa-solid">+</div>
</div> </div>
<div id="newModel" class="model"> <h2>Note Form</h2> <div class="close" id="closeButton">X</div> <div id="notePreview" class="notez">
<!-- <label class="content" for="inputTitle">Name:</label> -->
<input class="content" placeholder="Name:" id="inputTitle" name="title">
<!-- <label class="content" for="inputContent">Content:</label> -->
<textarea class="content" placeholder="Content:" id="inputContent" name="content"></textarea>
<div class="color-opts">
<label class="color-option" style="background-color: rgb(131, 26, 26);">
</label>
<div class="color-option" style="background-color: rgb(118, 212, 117);">
</div>
<div class="color-option" style="background-color: rgb(250, 159, 220);">
</div>
<div class="color-option" style="background-color: rgb(102, 200, 215);">
</div>
</div>
</div> <div class="sutton"> <button type="button" id="submitNote">Submit</button> <button type="menu" id="noteMenu">Preview?</button> </div>
</div>
<div id="preview" class="preview1">
<div class="rutton">
<button type="button" id="submitNote1">Submit</button> <button type="menu" id="noteeMenu">Back?</button> </div> </div>
<div id="savedNotesContainer">
</div>
<script src="sticky.js"></script> <script src="https://kit.fontawesome.com/29e2b58a51.js" crossorigin="anonymous"></script> </body> </html>
CSS
@import url('https://fonts.googleapis.com/css2?family=Lobster&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap');
body{
padding: 0 40px;
display: grid;
/* align-items: center;
flex-direction: column; */
background: #0c0e16;
}
.h1{
font-family: 'Lobster',cursive;
display: flex;
justify-content: center;
font-size: 60px;
color: #cc00ff;
text-shadow: 2px 2px #601e6298;
}
.fa-solid{
color: #ffffff;
font-size: 70px;
position: fixed;
right: 50px;
bottom: 70px;
padding: 10px 14px;
border-radius: 50%;
transition: background 0.5s ease;
cursor: pointer;;
}
.fa-solid:hover{
background: #cc00ff2c;
}
.icon-plus{
display: flex;
position: absolute;
/* padding: 30px; */
flex-direction: column;
justify-content: center;
right: 70px;
top: 500px;
}
h2{
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
font-size: 35px;
color: white;
margin: 0 0 20px 0;
}
.model{
height: 400px;
width: 50%;
align-items: center;
display: none;
padding: 30px;
justify-self: center;
flex-direction: column;
justify-content: space-evenly;
background-color: rgba(67, 31, 44, 0.418);
position: relative;
border-radius: 20px;
position: absolute;
bottom: 100px;
}
.close{
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
position: absolute;
right: 10px;
top: 10px;
cursor: pointer;
font-weight: bolder;
padding: 10px;
color: white;;
}
.close:hover{
color: red;
}
label{
display: block;
}
.color-opts{
display: flex;
margin: 10px;
}
.notez{
background-color: #0c0e16;
justify-content: center;
align-self: center;
flex-direction: column;
padding: 30px;
display: flex;
width: 40%;
border-radius: 20px;
}
.content{
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-size: large;
color: rgb(105, 93, 218);
padding: 5px;
}
input, textarea{
background-color: transparent;
border: none;
width: 70%;
border-bottom: 1px dashed green;
margin: 10px;
/* resize: none; */
height: auto;
}
#inputTitle{
font-weight: bolder;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-size: 30px;
color: white;
}
#inputContent{
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
color: white;
}
input,textarea:focus{
outline: none;
}
textarea::-webkit-scrollbar {
width: 10px;
}
textarea::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
}
textarea::-webkit-scrollbar-thumb {
background-color: rgba(53, 48, 48, 0.377);
cursor: pointer;
}
button{
padding: 10px 10px;
border: 3px solid rgb(255, 0, 0);
background-color: #0c0e16;
color: white;
font-size: medium;
cursor: pointer;
}
.color-option {
height: 45px;
width: 50px;
margin: 0 10px;
border-radius: 10px;
border: 2px solid black;
}
.sutton{
width: 100%;
display: flex;
justify-content: space-between;
}
.preview1{
height: 500px;
width: 600px;
display: none;
background-color: rgba(255, 255, 255, 0);
position: absolute;
bottom: 50px;
justify-content: center;
align-items: center;
flex-direction: column;
justify-self: center;
padding: 0 20px;
}
.note{
width: 340px;
height: 370px;
display: flex;
border-radius: 20px;
color: white;
font-size: 29px;
flex-direction: column;
padding: 10px;
margin: 20px;
align-items: center;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}
/* .note h3{
} */
.rutton{
display: flex;
justify-content: space-between;
width: 100%;
}
JavaScript
document.addEventListener('DOMContentLoaded', function() {
const newModel = document.getElementById("newModel");
const plus = document.getElementById("plus")
const closeBtn = document.getElementById("closeButton")
const notePreview = document.getElementById("notePreview")
plus.addEventListener('click', () => {
if(newModel.style.display === "none"){
newModel.style.display = "flex"
}
else if(newModel.style.display = "flex"){
newModel.style.display = "none"
}
})
closeBtn.addEventListener('click',() =>{
newModel.style.display = "none"
}
)
const colorBtn = document.querySelectorAll(".color-option")
if (colorBtn.length > 0) {
notePreview.style.backgroundColor = getComputedStyle(colorBtn[0]).backgroundColor;
}
colorBtn.forEach(child => {
child.addEventListener('click', () => {
notePreview.style.backgroundColor = getComputedStyle(child).backgroundColor;
})
})
const noteMenu = document.getElementById("noteMenu");
const preview = document.getElementById("preview");
let newNote = null;
noteMenu.addEventListener('click', () => {
const title = document.getElementById("inputTitle");
const content = document.getElementById("inputContent");
const noteColor = getComputedStyle(notePreview).backgroundColor;
// const newNote = document.createElement('div');
// newNote.classList.add('note');
newNote = document.createElement('div');
newNote.className = 'note';
newNote.style.backgroundColor = noteColor;
newNote.innerHTML = `
<h3>${title.value}</h3>
<p>${content.value}</p>
`;
preview.appendChild(newNote);
// if (noteMenu === 'click') {
// Toggling the preview visibility
if (preview.style.display === "flex") {
preview.style.display = "none";
} else {
preview.style.display = "flex";
}
inputTitle.value = "";
inputContent.value = "";
newModel.style.display = "none";
})
const noteemenu = document.getElementById("noteeMenu");
const submiteNote = document.getElementById("submitNote");
const savedNotesContainer = document.getElementById("savedNotesContainer");
const submiteNote1 = document.getElementById("submitNote1");
noteemenu.addEventListener('click', () => {
preview.style.display = "none";
newModel.style.display = "flex"
// newNote.remove();
})
// const note = document.getElementsByClassName("note");
submiteNote.addEventListener('click', () => {
if (newNote) {
const savedNote = newNote.cloneNode(true); // Clone the previewed note
savedNotesContainer.appendChild(savedNote);
newNote = null;
preview.innerHTML = ''; // Clear the preview after submission
preview.style.display = "none"; // Hide the preview
} else {
console.log("No note to submit.");
}
});
submiteNote1.addEventListener('click', ()=>{
if (newNote) {
const savedNote = newNote.cloneNode(true); // Clone the previewed note
savedNotesContainer.appendChild(savedNote);
newNote = null;
preview.innerHTML = ''; // Clear the preview after submission
preview.style.display = "none"; // Hide the preview
} else {
console.log("No note to submit.");
}
})
})