Merge pull request #1 from ClubToCode/main

Add Font Awesome library for icons
ClubToCode · Apr 12, 2024 · 2f9fc5a · 2f9fc5a
2 parents 20c4e4c + 5fc5965
commit 2f9fc5a
Show file tree

Hide file tree

Showing 9 changed files with 454 additions and 70 deletions.
diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -0,0 +1,38 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Desktop (please complete the following information):**
+ - OS: [e.g. iOS]
+ - Browser [e.g. chrome, safari]
+ - Version [e.g. 22]
+
+**Smartphone (please complete the following information):**
+ - Device: [e.g. iPhone6]
+ - OS: [e.g. iOS8.1]
+ - Browser [e.g. stock browser, safari]
+ - Version [e.g. 22]
+
+**Additional context**
+Add any other context about the problem here.
diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md
@@ -0,0 +1,20 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 ClubToCode
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/src/asset/github.png b/src/asset/github.png
diff --git a/src/index.html b/src/index.html
@@ -1,32 +1,41 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>To-Do App</title>
-    <link rel="stylesheet" href="style.css">
-</head>
-<body>
-  <div class="navbar">
-    <div class="logo">
-      <img src="./asset/Notzy.png" alt="Notzy">
-      <br>
-      <p>by ClubToCode MITM</p>
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
+      integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    />
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <div class="navbar">
+      <div class="logo">
+        <img src="./asset/Notzy.png" alt="Notzy" />
+        <p>by ClubToCode MITM</p>
+        <i class="fa-brands fa-github logo-github"></i>
+      </div>
+      <div id="nav">
+        <button><a href="//todo url">To-do</a></button>
+        <button><a href="notes.html">Notes</a></button>
+      </div>
     </div>
-    <div>
-      <button><a href="//todo url">Todo</a></button>
-      <button> <a href="//notes url">Notes</a></button>
+    <div class="todo-section">
+      <div class="input-container">
+        <input type="text" id="new-task" placeholder="Add a new task" />
+        <button id="add-task">
+          <i class="fa-sharp fa-solid fa-plus" style="font-size: 15px"></i>Add
+        </button>
+      </div>
+      <div>
+        <ul id="todo-list"></ul>
+      </div>
     </div>
-  </div>
-  <div class="todo-section">
-    <div class="input-container">
-        <input type="text" id="new-task" placeholder="Add a new task">
-        <button id="add-task">Add</button>
-    </div>
-    <div>
-      <ul id="todo-list"></ul>
-    </div>
-  </div>
-  <script src="script.js"></script>
-</body>
+    <script src="script.js"></script>
+  </body>
 </html>
diff --git a/src/notes.css b/src/notes.css
@@ -0,0 +1,109 @@
+.notes-section{
+    margin: 20px;
+    width: 100%;
+    height: 70%;
+    display: flex;
+    justify-content: center;
+}
+
+.notes-container{
+    z-index: 1;
+    padding: 20px;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    height: 90%;
+    width: 70%;
+    border: 2px solid rgb(3, 91, 255);
+    box-shadow: 0 0 20px rgb(0, 195, 255);
+    border-radius: 5px;
+    overflow-y: scroll;
+}
+.notes-container::-webkit-scrollbar{
+    display: none;
+}
+.note-box{
+    margin: 17px;
+    padding: 6px;
+    width: 150px;
+    height: 140px;
+    border: 2px solid rgb(0, 196, 250);
+    border-radius: 15px;
+    background-color: rgb(218, 218, 218);
+    font-size: 16px;
+    overflow-y: hidden;
+    transition: all 0.3s linear;
+}
+.main-block{
+    height: 100%;
+    width: 100%;
+}
+.note-box h4{
+    margin: 3px;
+    padding: 0%;
+    letter-spacing: 1px;
+    color: blue;
+}
+.note-box p{
+    margin: 3px;
+    padding: 2px;
+}
+.add-note{
+    margin: 17px;
+    padding: 6px;
+    width: 150px;
+    height: 140px;
+    border: 2px solid rgb(0, 242, 255);
+    border-radius: 15px;
+    font-weight: 700;
+    background-color: rgb(0, 157, 255);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+}
+.add-note i{
+    font-size: 30px;
+}
+.note-slide{
+    display: none;
+}
+.visi-slide{
+    padding: 15px;
+    position:absolute;
+    top: 25%;
+    left: 17%;
+    width: 67%;
+    height: 60%;
+    background-color: rgb(255, 255, 255);
+    border: 1px solid rgb(0, 119, 255);
+    border-radius: 5px;
+    box-shadow: 0 0 8px rgb(0, 204, 255);
+    opacity: 1;
+    z-index: 10;
+    transition: all 0.7s linear;
+}
+.slide-title{
+    display: flex;
+    justify-content: space-between;
+}
+#note-title{
+    appearance: none;
+    width: 80%;
+    border: none;
+    outline: none;
+    background-color: transparent;
+    font-size: 22px;
+    font-weight: 550;
+    margin: 0%;
+}
+#note{
+    resize: none;
+    width: 100%;
+    height: 65vh;
+    border: none;
+    outline: none;
+    background-color: transparent;
+    font-size: 18px;
+    overflow-y: scroll;
+}
diff --git a/src/notes.html b/src/notes.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Notes App</title>
+    <script src="https://kit.fontawesome.com/fb9074960e.js" crossorigin="anonymous"></script>
+    <link rel="stylesheet" href="style.css" />
+    <link rel="stylesheet" href="notes.css" />
+</head>
+
+<body>
+    <div class="navbar">
+        <div class="logo">
+            <img src="./asset/Notzy.png" alt="Notzy" />
+            <p>by ClubToCode MITM</p>
+            <i class="fa-brands fa-github logo-github"></i>
+        </div>
+        <div id="nav">
+            <button><a href="index.html">To-do</a></button>
+            <button><a href="#Note-URL">Notes</a></button>
+        </div>
+    </div>
+    <!--Notes section-->
+    <div class="notes-section">
+        <!--All Notes container or Box-->
+        <div class="notes-container">
+            <!--Note boxe-->
+            <div class="add-note">
+                <i class="fa-sharp fa-solid fa-plus"></i>
+            </div>
+        </div>
+    </div>
+    </div>
+    <script src="notes.js"></script>
+</body>
+
+</html>
diff --git a/src/notes.js b/src/notes.js
@@ -0,0 +1,86 @@
+let add = document.querySelector(".add-note");
+let title = document.querySelector("#note-title");
+let note = document.querySelector("#note");
+let box = document.querySelector(".note-box");
+let edit = document.querySelector(".edit-note");
+let delet = document.querySelector(".delet-note");
+let close = document.querySelector(".close-note");
+let noteContainer = document.querySelector(".notes-container");
+let noteSlide = document.querySelector(".note-slide");
+function hide(item){
+    item.querySelector('.visi-slide').classList.add('note-slide');
+    item.querySelector('.note-slide').classList.remove('visi-slide');
+    console.log('hello');
+}
+function addNote() {
+    let a = 1;
+    const item = document.createElement("div")
+    item.classList.add('note-box');
+    item.innerHTML=`
+    <div class="main-block">
+        <h4>Title</h4>
+        <p class="title">CLICK HERE TO VIEW OR EDIT NOTE</p>
+    </div>
+    <div class="note-slide">
+        <div class="slide-title">
+            <input type="text" id="note-title" placeholder="Write the title here" readonly>
+            <div class="title-opt">
+                <i class="fa-solid fa-pen-to-square edit-note"></i>
+                <i class="fa-solid fa-trash delet-note"></i>
+                <i class="fa-solid fa-circle-xmark close-note"></i>
+            </div>
+        </div>
+        <hr />
+        <div class="slide-data">
+            <textarea name="note" id="note"  placeholder="Desribe the title"  readonly></textarea>
+        </div>
+    </div>
+    `;
+    noteContainer.prepend(item);
+    item.querySelector('.note-slide').classList.add('visi-slide');
+    item.querySelector('.visi-slide').classList.remove('note-slide');
+    item.querySelector('#note-title').removeAttribute('readonly');
+    item.querySelector('#note').removeAttribute('readonly');
+    item.querySelector('#note-title').focus();
+    item.querySelector('.edit-note').classList.add("fa-floppy-disk");
+    item.querySelector('.main-block').addEventListener('click',()=>{
+        item.querySelector('.note-slide').classList.add('visi-slide');
+        item.querySelector('.visi-slide').classList.remove('note-slide');
+
+    });
+
+    item.querySelector('.close-note').addEventListener('click',()=>{
+    hide(item);
+    });
+
+    item.querySelector('.delet-note').addEventListener('click',()=>{
+        item.remove();
+    });
+
+    item.querySelector('.edit-note').addEventListener("click",() =>{
+        if(a%2==0){ 
+            a++;
+            item.querySelector('#note-title').removeAttribute('readonly');
+            item.querySelector('#note').removeAttribute('readonly');
+            item.querySelector('#note-title').focus();
+            item.querySelector('.edit-note').classList.add("fa-floppy-disk");
+            console.log("on");
+
+        }
+        else {
+            console.log("off");
+            item.querySelector('#note-title').setAttribute('readonly','readonly');
+            item.querySelector('#note').setAttribute('readonly','readonly');
+            item.querySelector('.edit-note').classList.remove("fa-floppy-disk");
+            a++;
+            let data = item.querySelector('#note-title').value; 
+            item.querySelector('.title').textContent= data;
+
+        } 
+    })
+}
+
+add.addEventListener("click", () => {
+    addNote();
+})
+