Sticky Notes close separate and edit

Question

I want to make a sticky notes by HTML, CSS, JavaScript, here is the source: https://iamcodefoxx.github.io/Sticky-Notes/

And I want to add the close separate and edit function in each piece of notes, but I couldn't find the way because the notes' place is random. I tried the icon(svg), button...but still could not work. Please help!

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
  <title>Sticky Notes</title>
</head>
<style>
  @import url('https://fonts.googleapis.com/css2?family=Architects+Daughter&display=swap');
  * {
    padding: 0;
    margin: 0;
  }
  
  body {
    background-color: #c68c53a8;
    font-family: 'Architects Daughter', cursive;
  }
  
  button {
    padding: 8px;
    outline: none;
    cursor: pointer;
    font-family: inherit;
    //border-radius: 5px;
    background: whitesmoke;
    border: 1px solid lightgray;
  }
  
  button:hover {
    color: white;
    background-color: rgba(0, 0, 0, 0.1);
  }
  
  .container {
    width: 95%;
    margin: auto;
    position: relative;
  }
  
  .nav {
    color: white;
    padding: 15px 0;
    text-shadow: 1px 1px black;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  
  .createBox {
    position: absolute;
    left: 50%;
    top: 0;
    margin-left: -160px;
    margin-top: 50px;
    z-index: 1;
    width: 275px;
    height: 275px;
    outline: none;
  }
  
  .createBox textarea {
    width: 275px;
    height: 275px;
    padding: 25px;
    font-family: inherit;
    outline: none;
    resize: none;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.9);
  }
  
  .notes {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 10px;
  }
  
  .note {
    width: 250px;
    height: 250px;
    padding: 15px;
    //transition: 2s;
    cursor: pointer;
    overflow-wrap: break-word;
    box-shadow: 0px 10px 24px 0px rgba(0, 0, 0, 0.75);
  }
  
  .note h1 {
    font-size: 1.5rem;
  }
  
  @media(max-width:768px) {
    .nav {
      flex-direction: column;
      align-items: center;
      text-align: center;
    }
  }
  
  @media(max-width:480px) {
    .createBox {
      width: 100%;
    }
  }
</style>

<body>

  <header>
    <div class="container">
      <div class="nav">
        <div>
          <h1><i style="color: #c2ff3d;"></i> Sticky Notes</h1>
        </div>
        <div>
          <button onclick="createNote()">Hide / Create Note</button>
          <button onclick="deleteNotes()">Delete Notes</button>
        </div>
      </div>
    </div>
  </header>

  <div class="container">
    <div class="createBox" style="display:block">
      <textarea placeholder="Write note..." id="user-input" maxlength="135" style="font-size: 20px;"></textarea>
    </div>
  </div>

  <div class="container">
    <div class="notes"></div>
  </div>

  <script>
    const createBox = document.getElementsByClassName("createBox")[0];
    const notes = document.getElementsByClassName("notes")[0];
    const input = document.getElementById("user-input");
    let contentArray = localStorage.getItem('items') ? JSON.parse(localStorage.getItem('items')) : [];

    var i = 0;

    contentArray.forEach(divMaker);


    function divMaker(text) {
      var div = document.createElement("div");
      var h1 = document.createElement("h1");
      h1.textContent = text;

      div.className = "note";
      div.setAttribute('style', 'margin:' + margin() + '; background:' + color() + '');
      div.appendChild(h1);

      notes.appendChild(div);

      div.addEventListener("mouseenter", function() {
        div.style.transform = "scale(1.1)";
      })

      div.addEventListener("mouseleave", function() {
        div.style.transform = "scale(1)";
      })
    }

    function addNote() {
      contentArray.push(input.value);
      localStorage.setItem('items', JSON.stringify(contentArray));
      divMaker(input.value);
      input.value = '';
    }

    function createNote() {
      if (createBox.style.display === "none")
        createBox.style.display = "block";
      else
        createBox.style.display = "none";
    }



    function deleteNotes() {
      localStorage.clear();
      notes.innerHTML = '';
      contentArray = [];
    }

    function margin() {
      var random_margin = ["-5px", "1px", "5px", "10px", "15px", "20px"];

      return random_margin[Math.floor(Math.random() * random_margin.length)];
    }


    function color() {
      var random_colors = ["#87CEEB", "#ADD8E6", "#6CA6CD", "#8DB6CD", "#A2B5CD", "#BFEFFF"];

      if (i > random_colors.length - 1) {
        i = 0;
      }
      return random_colors[i++];
    }

    createBox.addEventListener('keydown', function(event) {
      if (event.key === 'Enter')
        addNote();
    })
  </script>
</body>

</html>

mac thiem · Accepted Answer

I have created function delete specified note. you can do the same with the edit function

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
  <title>Sticky Notes</title>
</head>
<style>
@import url('https://fonts.googleapis.com/css2?family=Architects+Daughter&display=swap');

*{
  padding: 0;
  margin: 0;
}

body{
  background-color:  #c68c53a8;
  font-family: 'Architects Daughter', cursive;
}

button{
  padding: 8px;
  outline: none;
  cursor: pointer;
  font-family: inherit;
  //border-radius: 5px;
  background: whitesmoke;
  border: 1px solid lightgray;
}

button:hover{
  color: white;
  background-color: rgba(0, 0, 0, 0.1);
}

.container{
  width: 95%;
  margin: auto;
  position: relative;
}

.nav{
  color: white;
  padding: 15px 0;
  text-shadow: 1px 1px black;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.createBox{
  position: absolute;
  left: 50%;
  top: 0;
  margin-left: -160px;
  margin-top: 50px;
  z-index: 1;
  width: 275px;
  height: 275px;
  outline: none;
}

.createBox textarea{
  width: 275px;
  height: 275px;
  padding: 25px;
  font-family: inherit;
  outline: none;
  resize: none;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.9);
}

.notes{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 10px;
}

.note{
  width:250px;
  height:250px;
  padding:15px;
  //transition: 2s;
  cursor: pointer;
  overflow-wrap: break-word;
  box-shadow: 0px 10px 24px 0px rgba(0,0,0,0.75);
}

.note h1{
  font-size: 1.5rem;
}

@media(max-width:768px){
  .nav{
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

@media(max-width:480px){
  .createBox{
    width: 100%;
  }

}
</style>
<body>

  <header>
    <div class="container">
      <div class="nav">
        <div>
          <h1><i style="color: #c2ff3d;" ></i> Sticky Notes</h1>
        </div>
        <div>
          <button onclick="createNote()">Hide / Create Note</button>
          <button onclick="deleteNotes()">Delete Notes</button>
        </div>
      </div>
    </div>
  </header>

  <div class="container">
    <div class="createBox" style="display:block">
      <textarea placeholder="Write note..." id="user-input" maxlength="135" style="font-size: 20px;"></textarea>
    </div>
  </div>

  <div class="container">
    <div class="notes"></div>
  </div>
  
<script>
const createBox = document.getElementsByClassName("createBox")[0];
createBox.style.display = "none";
const notes = document.getElementsByClassName("notes")[0];
const input = document.getElementById("user-input");
let contentArray = localStorage.getItem('items') ? JSON.parse(localStorage.getItem('items')) : [];

var i = 0;

contentArray.forEach(divMaker);


function divMaker(text){
  var div = document.createElement("div");
  var h1 = document.createElement("h1");
  var cancle = document.createElement("button");
  h1.textContent = text;

  // Create Delete button

  cancle.textContent= "Delete";
  cancle.addEventListener('click', function (e) {
    let value = text;
    localStorage.clear();
    let newContentArray = contentArray.filter(item => item != value);
    localStorage.setItem('items', JSON.stringify(newContentArray));
    location.reload();
  });
  div.appendChild(cancle);

  div.className = "note";
  
  div.setAttribute('style', 'margin:'+margin()+'; background:'+color()+'');
  div.appendChild(h1);

  notes.appendChild(div);

  div.addEventListener("mouseenter", function(){
    div.style.transform = "scale(1.1)";
  })

  div.addEventListener("mouseleave", function(){
    div.style.transform = "scale(1)";
  })
}


function addNote(){
  contentArray.push(input.value);
  localStorage.setItem('items', JSON.stringify(contentArray));
  divMaker(input.value);
  input.value = '';
}

function createNote(){
  if(createBox.style.display === "none")
    createBox.style.display = "block";
  else
    createBox.style.display = "none";
}



function deleteNotes(){
  localStorage.clear();
  notes.innerHTML = '';
  contentArray = [];
}

function margin(){
  var random_margin = ["-5px","1px", "5px", "10px","15px","20px"];

  return random_margin[Math.floor(Math.random() * random_margin.length)];
}


function color(){
  var random_colors = ["#87CEEB","#ADD8E6","#6CA6CD","#8DB6CD","#A2B5CD","#BFEFFF"];

  if(i > random_colors.length - 1){
    i = 0;
  }
  return random_colors[i++];
}

createBox.addEventListener('keydown', function(event){
  if(event.key === 'Enter')
    addNote();
})
</script>
</body>
</html>

ikhvjs · Answer

I add the functionality of delete a note for you.

The changes:

I add a hidden class in your css.
I add two click event listener. One is to toggle the delete button in a note. One is used to delete a note when you click the delete button.
I save a noteId in your localStorage because you need to identify which note you need to delete.

Hope it helps you to understand more. You can work on editing a note for yourself.

const createBox = document.getElementsByClassName("createBox")[0];
const notes = document.getElementsByClassName("notes")[0];
let contentArray = localStorage.getItem("items")
  ? JSON.parse(localStorage.getItem("items"))
  : [];

var i = 0;

contentArray.forEach(divMaker);

function divMaker(noteObj) {
  var div = document.createElement("div");
  div.setAttribute("noteId", noteObj.noteId);
  var h1 = document.createElement("h1");

  const deleteBtn = document.createElement("button");
  deleteBtn.setAttribute("class", "hidden");
  deleteBtn.setAttribute("name", "delete");
  deleteBtn.textContent = "delete";
  h1.textContent = noteObj.text;

  div.className = "note";
  div.setAttribute(
    "style",
    "margin:" + margin() + "; background:" + color() + ""
  );
  div.appendChild(deleteBtn);
  div.appendChild(h1);

  notes.appendChild(div);

  div.addEventListener("mouseenter", function () {
    div.style.transform = "scale(1.1)";
  });

  div.addEventListener("mouseleave", function () {
    div.style.transform = "scale(1)";
  });
}

function addNote() {
  const input = document.getElementById("user-input");
  const noteId = getUniqueId();
  const noteObj = { noteId: noteId, text: input.value };
  contentArray.push(noteObj);
  localStorage.setItem("items", JSON.stringify(contentArray));
  divMaker(noteObj);
  input.value = "";
}

function createNote() {
  if (createBox.style.display === "none") createBox.style.display = "block";
  else createBox.style.display = "none";
}

function deleteNotes() {
  localStorage.clear();
  notes.innerHTML = "";
  contentArray = [];
}

function margin() {
  var random_margin = ["-5px", "1px", "5px", "10px", "15px", "20px"];

  return random_margin[Math.floor(Math.random() * random_margin.length)];
}

function color() {
  var random_colors = [
    "#87CEEB",
    "#ADD8E6",
    "#6CA6CD",
    "#8DB6CD",
    "#A2B5CD",
    "#BFEFFF",
  ];

  if (i > random_colors.length - 1) {
    i = 0;
  }
  return random_colors[i++];
}

createBox.addEventListener("keydown", function (event) {
  if (event.key === "Enter") addNote();
});

///-----------------Added----------------------

function getUniqueId() {
  return Date.now().toString(36) + Math.random().toString(36).substr(2);
}

//-----addEventListener for selecting a .notes element:
//-----it toggle delete btn when you click inside or outside the .notes element
notes.addEventListener("click", function (event) {
  const noteElement = event.target.closest(".note");
  if (noteElement !== null) {
    const buttons = noteElement.querySelectorAll("button");
    buttons.forEach(function (btn) {
      btn.classList.remove("hidden");
    });
  } else {
    document.querySelectorAll(".note button").forEach(function (btn) {
      btn.classList.add("hidden");
    });
  }
});

//-----addEventListener for deleting a .note element
notes.addEventListener("click", function (event) {
  if (event.target.tagName === "BUTTON") {
    const noteElement = event.target.closest(".note");
    const noteId = noteElement.getAttribute("noteId");
    console.log(noteId);
    //remove item from localStorage
    contentArray = contentArray.filter(x => x.noteId !== noteId);
    localStorage.setItem("items", JSON.stringify(contentArray));
    //remove note element
    noteElement.remove();
  }
});

@import url("https://fonts.googleapis.com/css2?family=Architects+Daughter&display=swap");
* {
  padding: 0;
  margin: 0;
}

body {
  background-color: #c68c53a8;
  font-family: "Architects Daughter", cursive;
}

button {
  padding: 8px;
  outline: none;
  cursor: pointer;
  font-family: inherit;
  /* border-radius: 5px; */
  background: whitesmoke;
  border: 1px solid lightgray;
}

button:hover {
  color: white;
  background-color: rgba(0, 0, 0, 0.1);
}

.container {
  width: 95%;
  margin: auto;
  position: relative;
}

.hidden {
  display: none;
}

.nav {
  color: white;
  padding: 15px 0;
  text-shadow: 1px 1px black;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.createBox {
  position: absolute;
  left: 50%;
  top: 0;
  margin-left: -160px;
  margin-top: 50px;
  z-index: 1;
  width: 275px;
  height: 275px;
  outline: none;
}

.createBox textarea {
  width: 275px;
  height: 275px;
  padding: 25px;
  font-family: inherit;
  outline: none;
  resize: none;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.9);
}

.notes {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 10px;
}

.note {
  width: 250px;
  height: 250px;
  padding: 15px;
  /* transition: 2s; */
  cursor: pointer;
  overflow-wrap: break-word;
  box-shadow: 0px 10px 24px 0px rgba(0, 0, 0, 0.75);
}

.note h1 {
  font-size: 1.5rem;
}

@media (max-width: 768px) {
  .nav {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .createBox {
    width: 100%;
  }
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
    />
    <!-- <link rel="stylesheet" href="test.css" /> -->
    <title>Sticky Notes</title>
  </head>

  <body>
    <header>
      <div class="container">
        <div class="nav">
          <div>
            <h1><i style="color: #c2ff3d"></i> Sticky Notes</h1>
          </div>
          <div>
            <button onclick="createNote()">Hide / Create Note</button>
            <button onclick="deleteNotes()">Delete All Notes</button>
          </div>
        </div>
      </div>
    </header>

    <div class="container">
      <div class="createBox" style="display: block">
        <textarea
          placeholder="Write note..."
          id="user-input"
          maxlength="135"
          style="font-size: 20px"
        ></textarea>
      </div>
    </div>

    <div class="container">
      <div class="notes"></div>
    </div>

    <!-- <script src="test.js"></script> -->
  </body>
</html>

Sticky Notes close separate and edit

Tags:

javascript

html

css

Yun

2 Answers

mac thiem

ikhvjs

Recent Activity

Donate For Us

Sticky Notes close separate and edit

Tags:

javascript

html

css

Yun

2 Answers

mac thiem

ikhvjs

Related questions

Recent Activity

Donate For Us