Merge pull request #415 from Sulagna-Dutta-Roy/Sulagna

Added sticky notes app
Dezenix · May 31, 2022 · 8d90e14 · 8d90e14
2 parents 4840bfd + d881db8
commit 8d90e14
Show file tree

Hide file tree

Showing 4 changed files with 221 additions and 0 deletions.
diff --git a/Sticky Notes/Readme.md b/Sticky Notes/Readme.md
@@ -0,0 +1,8 @@
+## Sticky Notes App
+
+<h3> Tech Stack Used <img src = "https://media2.giphy.com/media/QssGEmpkyEOhBCb7e1/giphy.gif?cid=ecf05e47a0n3gi1bfqntqmob8g9aid1oyj2wr3ds3mg700bl&rid=giphy.gif" width = 32px> </h3>
+<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>
+
+### Preview
+
+![StickyNote](https://user-images.githubusercontent.com/72568715/171050681-7cdd850d-336d-48aa-8924-85047dd68eee.PNG)
diff --git a/Sticky Notes/code/index.html b/Sticky Notes/code/index.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<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 Notes App</title>
+    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
+</head>
+<body>
+    <div id="card">
+        <div id="inner-text">
+          <textarea placeholder="Note..." id="user" maxlength="160"></textarea>
+          <i class="far fa-times-circle" id="hide"></i>
+        </div>
+      </div>
+      <main>    
+        <header>
+          <div class="container">
+            <div id="header">
+              <h1> Sticky Notes</h1>
+              <button id="add_note">Add Note</button>
+            </div>
+          </div>
+        </header>
+        <section>
+          <div class="container">
+            <div id="all_notes"></div>
+          </div>
+        </section>
+      </main>
+<script src="script.js"></script>
+</body>
+</html>
diff --git a/Sticky Notes/code/script.js b/Sticky Notes/code/script.js
@@ -0,0 +1,42 @@
+var random_margin = ["-5px", "1px", "5px", "10px", "7px"];
+var random_colors = ["#c2ff3d","#ff3de8","#3dc2ff","#04e022","#bc83e6","#ebb328"];
+var random_degree = ["rotate(3deg)", "rotate(1deg)", "rotate(-1deg)", "rotate(-3deg)", "rotate(-5deg)", "rotate(-8deg)"];
+var index = 0;
+
+window.onload = document.querySelector("#user").select();
+
+document.querySelector("#add_note").addEventListener("click", () => {
+  document.querySelector("#card").style.display = "block";
+});
+
+document.querySelector("#hide").addEventListener("click", () => {
+  document.querySelector("#card").style.display = "none";
+});
+
+document.querySelector("#user").addEventListener('keydown', (event) => {
+  if(event.key === 'Enter'){
+    const text = document.querySelector("#user");
+    createStickyNote(text.value);
+  }
+});
+createStickyNote = (text) => {
+  let note = document.createElement("div");
+  let details = document.createElement("div");
+  let noteText = document.createElement("h1");
+
+  note.className = "note";
+  details.className = "details";
+  noteText.textContent = text;
+
+  details.appendChild(noteText);
+  note.appendChild(details);
+
+  if(index > random_colors.length - 1)
+    index = 0;
+
+  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)]}`);
+  note.addEventListener("dblclick", () => {
+    note.remove();
+  })
+  document.querySelector("#all_notes").appendChild(note);
+}
diff --git a/Sticky Notes/code/style.css b/Sticky Notes/code/style.css
@@ -0,0 +1,136 @@
+*{
+    padding: 0;
+    margin: 0;
+  }
+
+  body{
+    position: relative;
+    background-color:  #fafafa;
+    font-family: sans-serif;
+  }
+h1 {
+    color: #797979;
+}
+  button{
+    padding: 8px;
+    outline: none;
+    cursor: pointer;
+    font-family: inherit;
+    border-radius: 5px;
+    background: rgb(7, 52, 78);
+    border: 1px solid lightgray;
+    color: #fff;
+  }
+
+  button:hover{
+    color: #2a2a2a;
+    background-color: lightgray;
+  }
+
+  #card{
+    position: fixed;
+    z-index: 1;
+    width: 100%;
+    min-height: 100vh;
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+
+  #inner-text{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+  }
+
+  #inner-text textarea{
+    width: 276px;
+    height: 276px;
+    padding: 25px;
+    outline: none;
+    resize: none;
+    font-size: 1.5rem;
+    font-family: inherit;
+    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.9);
+  }
+
+  #inner-text i{
+    font-size: 1.4rem;
+    color: gray;
+    cursor: pointer;
+    margin-top: -285px;
+    margin-left: -35px;
+    transition: 1s ease-in-out;
+  }
+
+  #inner-text i:hover{
+    color: lightgray;
+  }
+
+  .container{
+    width: 1280px;
+    margin: auto;
+  }
+
+  #header{
+    color: white;
+    padding: 0 20px;
+    min-height: 70px;
+    text-shadow: 1px 1px black;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .fas{
+    color: #c2ff3d;
+  }
+
+  #all_notes{
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    padding-top: 10px;
+  }
+
+  .note{
+    width:300px;
+    height: 300px;
+    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;
+    color: #2a2a2a;
+  }
+
+  .details {
+    margin-top: 25px;
+    padding: 0 15px;
+    font-size: 1.5rem;
+  }
+
+  .details i{
+    color: whitesmoke;
+    cursor: pointer;
+    text-shadow: 1px 1px #BBB;
+  }
+
+  @media(max-width:1280px){
+    .container{
+      width: 100%;
+    }
+  }
+
+  @media(max-width:768px){
+    #header{
+      padding: 20px;
+      gap: 10px;
+      flex-direction: column;
+      align-items: center;
+      text-align: center;
+    }
+  }