비전공자 개발일기

Sticky Note 본문

JQuery

Sticky Note

HiroDaegu 2022. 6. 21. 00:24
728x90
SMALL

 

<!DOCTYPE html>
<html lang="ko">
<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">
  <title>STICKY NOTE</title>
  <link rel="stylesheet" href="style.css">
  <script src = "https://code.jquery.com/jquery-3.6.0.min.js"   
  integrity = "sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="   
        crossorigin = "anonymous">  
</script>  
  <script defer src="main.js"></script>
</head>
<body>
  <div>  
    <ul>  
     <li>  
      <a href = "#" contenteditable = "true">  
      <h2>Title #1</h2>  
      <p>Text Content #1</p>  
      </a>  
     </li>  
     <li>  
      <a href = "#" contenteditable = "true">  
      <h2>Title #2</h2>  
      <p>Text Content #2</p>  
      </a>  
     </li>  
     <li>  
      <a href = "#" contenteditable = "true">  
      <h2>Title #3</h2>  
      <p>Text Content #3</p>  
      </a>  
     </li>  
     <li>  
      <a href = "#" contenteditable = "true">  
      <h2>Title #4</h2>  
      <p>Text Content #4</p>  
      </a>  
     </li>  
     <li>  
      <a href = "#" contenteditable = "true">  
      <h2>Title #5</h2>  
      <p>Text Content #5</p>  
      </a>  
     </li>  
     <li>  
      <a href = "#" contenteditable = "true">  
      <h2>Title #6</h2>  
      <p>Text Content #6</p>  
      </a>  
     </li>  
        <li>  
      <a href = "#" contenteditable = "true">  
      <h2>Title #7</h2>  
      <p>Text Content #7</p>  
      </a>  
     </li>  
        <li>  
      <a href = "#" contenteditable = "true">  
      <h2>Title #8</h2>  
      <p>Text Content #8</p>  
      </a>  
     </li>  
    </ul>  
  </div>
</body>
</html>
@import url('https://fonts.googleapis.com/css2?family=Reenie+Beanie&display=swap');  
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@1,300&display=swap');  
div {  
 margin: 20px auto;  
 width: 70%;  
 font-family: 'Lato';  
 padding: 5px;  
 background:#666;  
 color:#fff;  
}  
*{  
 margin:0;  
 padding:0;  
}  
h4 {  
 font-weight: bold;  
 font-size: 2rem;  
}  
p {  
 font-family: 'Reenie Beanie';  
 font-size: 2rem;  
}  
ul,li{  
 list-style:none;  
}  
ul{  
 display: flex;  
 flex-wrap: wrap;  
 justify-content: center;  
}  
ul li a{  
 text-decoration:none;  
 color:#000;  
 background:#ffc;  
 display:block;  
 height:10em;  
 width:10em;  
 padding:1em;  
 box-shadow: 5px 5px 7px rgba(33,33,33,.7);  
 transition: transform .15s linear;   
}  
ul li{  
 margin:1em;  
}  
ul li:nth-child(odd) a{  
 transform:rotate(-4deg);  
 position:relative;  
 top:5px;  
}  
ul li:nth-child(even) a{  
 transform:rotate(4deg);  
 position:relative;  
 top:5px;  
}  
ul li:nth-child(3n) a{  
 transform:rotate(-3deg);  
 position:relative;  
 top:-5px;  
}  
ul li:nth-child(5n) a{  
 transform:rotate(5deg);  
 position:relative;  
 top:-10px;  
}  
ul li a:hover,ul li a:focus{  
 box-shadow:10px 10px 7px rgba(0,0,0,.7);  
 transform: scale(1.25);  
 position:relative;  
 z-index:5;  
}  
ul li:nth-child(even) a{  
 position:relative;  
 top:5px;  
 background:#cfc;  
}  
ul li:nth-child(3n) a{  
 position:relative;  
 top:-5px;  
 background:#ccf;  
}
$(document).ready(function () {  
  all_notes = $("li a");  
  all_notes.on("keyup", function () {  
   note_title = $(this).find("h2").text();  
   note_content = $(this).find("p").text();  
   item_key = "list_" + $(this).parent().index();  
   data = {  
    title: note_title,  
    content: note_content  
   };  
   window.localStorage.setItem(item_key, JSON.stringify(data));  
  });  
  all_notes.each(function (index) {  
   data = JSON.parse(window.localStorage.getItem("list_" + index));  
   if (data !== null) {  
    note_title = data.title;  
    note_content = data.content;  
    $(this).find("h2").text(note_title);  
    $(this).find("p").text(note_content);  
   }  
  });  
 });
728x90
LIST

'JQuery' 카테고리의 다른 글

Auto Rotate Image  (0) 2022.07.11
Sumoselect  (0) 2022.07.02
Simple Image Comparison Slider  (0) 2022.06.04
Virtual Keyboard  (0) 2022.06.01
Sly.js example Naver App Menu(수평 스크롤)  (0) 2022.05.27
'JQuery' Related Articles more