Skip to content

Commit ea30d75

Browse files
swapnilsparshswapnilsparsh
authored
Merge pull request swapnilsparsh#748 from iamrahulmahato/note
Sticky Notes
2 parents 1426673 + b0a6186 commit ea30d75

File tree

6 files changed

+241
-0
lines changed

6 files changed

+241
-0
lines changed

‎Sticky Notes/README.md

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<p align="center">
2+
<img alt="" height="80" src="./img/notes.png">
3+
</a>
4+
</p>
5+
<h1 align="center"> Sticky Notes</h1>
6+
7+
<div align="center">
8+
Save your notes with Sticky Notes
9+
</div>
10+
11+
<br />
12+
13+
<div align="center">
14+
<!-- Standard -->
15+
<a href="https://standardjs.com">
16+
<img src="https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square"
17+
alt="Standard" />
18+
</a>
19+
</div>
20+
21+
## ⚡️ Introduction
22+
23+
Sticky Notes helps you to store text in local storage
24+
25+
## 📷 Screenshots
26+
27+
![ss1](./img/stickynote.png)
28+
29+
30+

‎Sticky Notes/css/style.css

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Reenie+Beanie&display=swap');
2+
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@1,300&display=swap');
3+
div {
4+
margin: 20px auto;
5+
width: 70%;
6+
font-family: 'Lato';
7+
padding: 5px;
8+
background: #666;
9+
color: #fff;
10+
}
11+
12+
* {
13+
margin: 0;
14+
padding: 0;
15+
}
16+
17+
#header {
18+
color: white;
19+
padding: 0 20px;
20+
min-height: 70px;
21+
text-shadow: 1px 1px black;
22+
display: flex;
23+
flex-wrap: wrap;
24+
justify-content: space-between;
25+
align-items: center;
26+
}
27+
28+
h4 {
29+
font-weight: bold;
30+
font-size: 2rem;
31+
}
32+
33+
p {
34+
font-family: 'Reenie Beanie';
35+
font-size: 2rem;
36+
}
37+
38+
ul,
39+
li {
40+
list-style: none;
41+
}
42+
43+
ul {
44+
display: flex;
45+
flex-wrap: wrap;
46+
justify-content: center;
47+
}
48+
49+
ul li a {
50+
text-decoration: none;
51+
color: #000;
52+
background: #ffc;
53+
display: block;
54+
height: 10em;
55+
width: 10em;
56+
padding: 1em;
57+
box-shadow: 5px 5px 7px rgba(33, 33, 33, .7);
58+
transition: transform .15s linear;
59+
}
60+
61+
ul li {
62+
margin: 1em;
63+
}
64+
65+
ul li:nth-child(odd) a {
66+
transform: rotate(-4deg);
67+
position: relative;
68+
top: 5px;
69+
}
70+
71+
ul li:nth-child(even) a {
72+
transform: rotate(4deg);
73+
position: relative;
74+
top: 5px;
75+
}
76+
77+
ul li:nth-child(3n) a {
78+
transform: rotate(-3deg);
79+
position: relative;
80+
top: -5px;
81+
}
82+
83+
ul li:nth-child(5n) a {
84+
transform: rotate(5deg);
85+
position: relative;
86+
top: -10px;
87+
}
88+
89+
ul li a:hover,
90+
ul li a:focus {
91+
box-shadow: 10px 10px 7px rgba(0, 0, 0, .7);
92+
transform: scale(1.25);
93+
position: relative;
94+
z-index: 5;
95+
}
96+
97+
ul li:nth-child(even) a {
98+
position: relative;
99+
top: 5px;
100+
background: #cfc;
101+
}
102+
103+
ul li:nth-child(3n) a {
104+
position: relative;
105+
top: -5px;
106+
background: #ccf;
107+
}

‎Sticky Notes/img/notes.png

1.69 KB
Loading

‎Sticky Notes/img/stickynote.png

103 KB
Loading

‎Sticky Notes/index.html

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
<html>
2+
3+
<head>
4+
<title>Sticky Note</title>
5+
<link rel="stylesheet" type="text/css" href="./css/style.css"></link>
6+
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous">
7+
</script>
8+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
9+
<link rel="shortcut icon" type="image/png" href="./img/notes.png" />
10+
</head>
11+
12+
<body>
13+
<header>
14+
<div class="container">
15+
<div id="header">
16+
<h1><i class="fas fa-sticky-note"></i> Sticky Notes</h1>
17+
</div>
18+
</div>
19+
</header>
20+
<div>
21+
<ul>
22+
<li>
23+
<a href="#" contenteditable="true">
24+
<h2>Title #1</h2>
25+
<p>Text Content #1</p>
26+
</a>
27+
</li>
28+
<li>
29+
<a href="#" contenteditable="true">
30+
<h2>Title #2</h2>
31+
<p>Text Content #2</p>
32+
</a>
33+
</li>
34+
<li>
35+
<a href="#" contenteditable="true">
36+
<h2>Title #3</h2>
37+
<p>Text Content #3</p>
38+
</a>
39+
</li>
40+
<li>
41+
<a href="#" contenteditable="true">
42+
<h2>Title #4</h2>
43+
<p>Text Content #4</p>
44+
</a>
45+
</li>
46+
<li>
47+
<a href="#" contenteditable="true">
48+
<h2>Title #5</h2>
49+
<p>Text Content #5</p>
50+
</a>
51+
</li>
52+
<li>
53+
<a href="#" contenteditable="true">
54+
<h2>Title #6</h2>
55+
<p>Text Content #6</p>
56+
</a>
57+
</li>
58+
<li>
59+
<a href="#" contenteditable="true">
60+
<h2>Title #7</h2>
61+
<p>Text Content #7</p>
62+
</a>
63+
</li>
64+
<li>
65+
<a href="#" contenteditable="true">
66+
<h2>Title #8</h2>
67+
<p>Text Content #8</p>
68+
</a>
69+
</li>
70+
</ul>
71+
</div>
72+
<script src="./js/script.js"></script>
73+
</body>
74+
75+
</html>

‎Sticky Notes/js/script.js

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
$(document).ready(function() {
2+
all_notes = $("li a");
3+
4+
all_notes.on("keyup", function() {
5+
note_title = $(this).find("h2").text();
6+
note_content = $(this).find("p").text();
7+
8+
item_key = "list_" + $(this).parent().index();
9+
10+
data = {
11+
title: note_title,
12+
content: note_content
13+
};
14+
15+
window.localStorage.setItem(item_key, JSON.stringify(data));
16+
});
17+
18+
all_notes.each(function(index) {
19+
data = JSON.parse(window.localStorage.getItem("list_" + index));
20+
21+
if (data !== null) {
22+
note_title = data.title;
23+
note_content = data.content;
24+
25+
$(this).find("h2").text(note_title);
26+
$(this).find("p").text(note_content);
27+
}
28+
});
29+
});

0 commit comments

Comments
 (0)