Skip to content

Commit 8d90e14

Browse files
Jaideep25-techJaideep25-tech
authored
Merge pull request #415 from Sulagna-Dutta-Roy/Sulagna
Added sticky notes app
2 parents 4840bfd + d881db8 commit 8d90e14

File tree

4 files changed

+221
-0
lines changed

4 files changed

+221
-0
lines changed

‎Sticky Notes/Readme.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
## Sticky Notes App
2+
3+
<h3> Tech Stack Used <img src = "https://media2.giphy.com/media/QssGEmpkyEOhBCb7e1/giphy.gif?cid=ecf05e47a0n3gi1bfqntqmob8g9aid1oyj2wr3ds3mg700bl&rid=giphy.gif" width = 32px> </h3>
4+
<p align="left"> <a href="https://www.w3.org/html/" target="_blank"> <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/html5/html5-original-wordmark.svg" alt="html5" width="40" height="40"/> </a> <a href="https://www.w3schools.com/css/" target="_blank"> <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/css3/css3-original-wordmark.svg" alt="css3" width="40" height="40"/> </a> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank"> <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/javascript/javascript-original.svg" alt="javascript" width="40" height="40"/> </a> </p>
5+
6+
### Preview
7+
8+
![StickyNote](https://user-images.githubusercontent.com/72568715/171050681-7cdd850d-336d-48aa-8924-85047dd68eee.PNG)

‎Sticky Notes/code/index.html

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Sticky Notes App</title>
8+
<link rel="stylesheet" href="style.css">
9+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
10+
</head>
11+
<body>
12+
<div id="card">
13+
<div id="inner-text">
14+
<textarea placeholder="Note..." id="user" maxlength="160"></textarea>
15+
<i class="far fa-times-circle" id="hide"></i>
16+
</div>
17+
</div>
18+
<main>
19+
<header>
20+
<div class="container">
21+
<div id="header">
22+
<h1> Sticky Notes</h1>
23+
<button id="add_note">Add Note</button>
24+
</div>
25+
</div>
26+
</header>
27+
<section>
28+
<div class="container">
29+
<div id="all_notes"></div>
30+
</div>
31+
</section>
32+
</main>
33+
<script src="script.js"></script>
34+
</body>
35+
</html>

‎Sticky Notes/code/script.js

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
var random_margin = ["-5px", "1px", "5px", "10px", "7px"];
2+
var random_colors = ["#c2ff3d","#ff3de8","#3dc2ff","#04e022","#bc83e6","#ebb328"];
3+
var random_degree = ["rotate(3deg)", "rotate(1deg)", "rotate(-1deg)", "rotate(-3deg)", "rotate(-5deg)", "rotate(-8deg)"];
4+
var index = 0;
5+
6+
window.onload = document.querySelector("#user").select();
7+
8+
document.querySelector("#add_note").addEventListener("click", () => {
9+
document.querySelector("#card").style.display = "block";
10+
});
11+
12+
document.querySelector("#hide").addEventListener("click", () => {
13+
document.querySelector("#card").style.display = "none";
14+
});
15+
16+
document.querySelector("#user").addEventListener('keydown', (event) => {
17+
if(event.key === 'Enter'){
18+
const text = document.querySelector("#user");
19+
createStickyNote(text.value);
20+
}
21+
});
22+
createStickyNote = (text) => {
23+
let note = document.createElement("div");
24+
let details = document.createElement("div");
25+
let noteText = document.createElement("h1");
26+
27+
note.className = "note";
28+
details.className = "details";
29+
noteText.textContent = text;
30+
31+
details.appendChild(noteText);
32+
note.appendChild(details);
33+
34+
if(index > random_colors.length - 1)
35+
index = 0;
36+
37+
note.setAttribute("style", `margin:${random_margin[Math.floor(Math.random() * random_margin.length)]}; background-color:${random_colors[index++]}; transform:${random_degree[Math.floor(Math.random() * random_degree.length)]}`);
38+
note.addEventListener("dblclick", () => {
39+
note.remove();
40+
})
41+
document.querySelector("#all_notes").appendChild(note);
42+
}

‎Sticky Notes/code/style.css

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
*{
2+
padding: 0;
3+
margin: 0;
4+
}
5+
6+
body{
7+
position: relative;
8+
background-color: #fafafa;
9+
font-family: sans-serif;
10+
}
11+
h1 {
12+
color: #797979;
13+
}
14+
button{
15+
padding: 8px;
16+
outline: none;
17+
cursor: pointer;
18+
font-family: inherit;
19+
border-radius: 5px;
20+
background: rgb(7, 52, 78);
21+
border: 1px solid lightgray;
22+
color: #fff;
23+
}
24+
25+
button:hover{
26+
color: #2a2a2a;
27+
background-color: lightgray;
28+
}
29+
30+
#card{
31+
position: fixed;
32+
z-index: 1;
33+
width: 100%;
34+
min-height: 100vh;
35+
background-color: rgba(0, 0, 0, 0.5);
36+
}
37+
38+
#inner-text{
39+
display: flex;
40+
justify-content: center;
41+
align-items: center;
42+
min-height: 100vh;
43+
}
44+
45+
#inner-text textarea{
46+
width: 276px;
47+
height: 276px;
48+
padding: 25px;
49+
outline: none;
50+
resize: none;
51+
font-size: 1.5rem;
52+
font-family: inherit;
53+
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.9);
54+
}
55+
56+
#inner-text i{
57+
font-size: 1.4rem;
58+
color: gray;
59+
cursor: pointer;
60+
margin-top: -285px;
61+
margin-left: -35px;
62+
transition: 1s ease-in-out;
63+
}
64+
65+
#inner-text i:hover{
66+
color: lightgray;
67+
}
68+
69+
.container{
70+
width: 1280px;
71+
margin: auto;
72+
}
73+
74+
#header{
75+
color: white;
76+
padding: 0 20px;
77+
min-height: 70px;
78+
text-shadow: 1px 1px black;
79+
display: flex;
80+
flex-wrap: wrap;
81+
justify-content: space-between;
82+
align-items: center;
83+
}
84+
85+
.fas{
86+
color: #c2ff3d;
87+
}
88+
89+
#all_notes{
90+
display: flex;
91+
justify-content: center;
92+
flex-wrap: wrap;
93+
padding-top: 10px;
94+
}
95+
96+
.note{
97+
width:300px;
98+
height: 300px;
99+
transition: 2s;
100+
cursor: pointer;
101+
overflow-wrap: break-word;
102+
box-shadow: 0px 10px 24px 0px rgba(0,0,0,0.75);
103+
}
104+
105+
.note h1{
106+
font-size: 1.5rem;
107+
color: #2a2a2a;
108+
}
109+
110+
.details {
111+
margin-top: 25px;
112+
padding: 0 15px;
113+
font-size: 1.5rem;
114+
}
115+
116+
.details i{
117+
color: whitesmoke;
118+
cursor: pointer;
119+
text-shadow: 1px 1px #BBB;
120+
}
121+
122+
@media(max-width:1280px){
123+
.container{
124+
width: 100%;
125+
}
126+
}
127+
128+
@media(max-width:768px){
129+
#header{
130+
padding: 20px;
131+
gap: 10px;
132+
flex-direction: column;
133+
align-items: center;
134+
text-align: center;
135+
}
136+
}

0 commit comments

Comments
 (0)