├── Dockerfile
├── KubernetesDeployment
    ├── services.yaml
    └── deployment.yaml
├── icons
    ├── dark.svg
    └── light.svg
├── README.md
└── index.html


/Dockerfile:
--------------------------------------------------------------------------------
 1 | # Creating server with nginx image from dockerhub
 2 | FROM nginx:alpine
 3 | 
 4 | # Copy all info on html container server
 5 | COPY . /usr/share/nginx/html
 6 | 
 7 | # Expose on port 80
 8 | EXPOSE 80
 9 | # NGINX INCLUDES CMD TO RUN .html not necesary
10 | #This dockerfile is created to test env
11 | 


--------------------------------------------------------------------------------
/KubernetesDeployment/services.yaml:
--------------------------------------------------------------------------------
 1 | apiVersion: v1
 2 | kind: Service
 3 | metadata:
 4 |   name: my-nginx-service
 5 | spec:
 6 |   selector:
 7 |     app: my-nginx
 8 |   type: NodePort  # Expose port on local. 
 9 |   ports:
10 |   - protocol: TCP
11 |     port: 80  # External Port
12 |     targetPort: 80  # Port from container
13 |     nodePort: 30080 #External Port to localhost acces
14 | 


--------------------------------------------------------------------------------
/icons/dark.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 384 512" stroke="currentColor">
2 |     <path fill="#e9e5d7"
3 |         d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z" />
4 | </svg>


--------------------------------------------------------------------------------
/icons/light.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 512 512" stroke="currentColor">
2 |     <path fill="#0d23e7"
3 |         d="M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM160 256a96 96 0 1 1 192 0 96 96 0 1 1 -192 0zm224 0a128 128 0 1 0 -256 0 128 128 0 1 0 256 0z" />
4 | </svg>


--------------------------------------------------------------------------------
/KubernetesDeployment/deployment.yaml:
--------------------------------------------------------------------------------
 1 | apiVersion: apps/v1
 2 | kind: Deployment
 3 | metadata:
 4 |   name: my-nginx-deployment
 5 | spec:
 6 |   replicas: 3  # Number of replicas
 7 |   selector:
 8 |     matchLabels:
 9 |       app: my-nginx
10 |   template:
11 |     metadata:
12 |       labels:
13 |         app: my-nginx
14 |     spec:
15 |       containers:
16 |       - name: my-nginx-container
17 |         image: pamblo/nginx:osiristape  # Image we tested on Dockerfile
18 |         ports:
19 |         - containerPort: 80  # Port open from container
20 | ---
21 | apiVersion: autoscaling/v2
22 | kind: HorizontalPodAutoscaler
23 | metadata:
24 |   name: my-nginx-hpa
25 | spec:
26 |   scaleTargetRef:
27 |     apiVersion: apps/v1
28 |     kind: Deployment
29 |     name: my-nginx-deployment
30 |   minReplicas: 3
31 |   maxReplicas: 10
32 |   metrics:
33 |   - type: Resource
34 |     resource:
35 |       name: cpu
36 |       target:
37 |         type: Utilization
38 |         averageUtilization: 50  # Scale on 50% of cpu consumed resources... Max 10 conteiners.
39 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Notes Application
 2 | 
 3 | This is a simple notes application that allows users to create, edit, and delete notes. The application is built using basic web technologies such as HTML, CSS, and JavaScript, and is deployed as a dynamic website.
 4 | 
 5 | > This application also provides theme toggling
 6 | 
 7 | #### Link: https://8ORUZ7.github.io/notes-application/
 8 | 
 9 | ## Features
10 | 
11 | - **Create Notes**: Add new notes easily.
12 | - **Edit Notes**: Modify existing notes.
13 | - **Delete Notes**: Remove notes that are no longer needed.
14 | - **Responsive Design**: Works well on both desktop and mobile devices.
15 | - **Docker&Kubernetes**: You can deploy your app on a minikube cluster to practice deployment
16 | 
17 | ## Installation
18 | 
19 | ### 1. Clone the Repository
20 | 
21 | First, clone the repository to your local machine using Git:
22 | 
23 | ```
24 | git clone https://github.com/8ORUZ7/notes-application.git
25 | ```
26 | 
27 | ### 2. Navigate to the Project Directory
28 | 
29 | ```
30 | cd notes-application
31 | ```
32 | 
33 | ### 3. Open in Browser
34 | 
35 | Since this is a static website, you can simply open the index.html file in your browser:
36 | 
37 | ```
38 | open index.html
39 | ```
40 | 
41 | ### 4. Optional deployment
42 | 
43 | You can apply a kubectl deployment and services and test in localhost:80 
44 | 
45 | ``
46 | cd /KubernetesDeployment
47 | kubectl apply -f deployment.yaml
48 | kubectl apply -f services.yaml
49 | minikube services my-nginx-service
50 | ``
51 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |     <link rel="icon" type="image" href="https://raw.githubusercontent.com/8ORUZ7/8ORUZ7.github.io/refs/heads/main/site_logo.png">
  7 |     <title>Notes</title>
  8 |     <style>
  9 |         *{
 10 |             padding: 0;
 11 |             margin: 0;
 12 |         }
 13 |         body{
 14 |             margin: 0;
 15 |             background-color: #000000;
 16 |             font-family: cursive;
 17 |         }
 18 |         
 19 |         .heading{
 20 |             color: #ffffff;
 21 |             text-align: center;
 22 |             padding-top: 10px;
 23 |             font-size: 35px;
 24 |         }
 25 |         
 26 |         .info-text{
 27 |             text-align: center;
 28 |             color: #ffffff;
 29 |             font-size: 18px;
 30 |         }
 31 |         
 32 |         .app{
 33 |             display: grid;
 34 |             grid-template-columns: repeat(auto-fill,300px);
 35 |             gap: 40px;
 36 |             justify-content: center;
 37 |             padding: 50px;
 38 |         }
 39 |         
 40 |         .note{
 41 |             padding: 17px;
 42 |             border-radius: 5px;
 43 |             resize: none;
 44 |             box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
 45 |             font-size: 18px;
 46 |             height: 300px;
 47 |             color: #000000;
 48 |             border: none;
 49 |             outline: none;
 50 |             background: rgba(255,255,255,0.7);
 51 |             box-sizing: border-box;
 52 |             transition: all 0.3s ease;
 53 |         }
 54 |         
 55 |         .note::placeholder{
 56 |             color: rgb(75, 74, 74);
 57 |             opacity: 0.5;
 58 |         }
 59 |         
 60 |         .note:hover,
 61 |         .note:focus{
 62 |             box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
 63 |             background:  rgba(255,255,255,0.9);
 64 |         }
 65 |         
 66 |         .btn{
 67 |             height: 300px;
 68 |             border: none;
 69 |             border-radius: 5px;
 70 |             font-size: 70px;
 71 |             font-weight: 700;
 72 |             color: #000000;
 73 |             cursor: pointer;
 74 |             background-color: #ffffff;
 75 |             transition: all 0.3s ease;
 76 |         }
 77 |         
 78 |         .btn:hover{
 79 |             transform: scale(1.1);
 80 |             background-color: #818181;
 81 |             color: #ffffff;
 82 |         }
 83 |         /* added theme class for theme btn */
 84 |         .theme {
 85 |           cursor: pointer;
 86 |           color: white;
 87 |           position: fixed;
 88 |           top: 1rem;
 89 |           right: 1rem;
 90 |         }
 91 |     </style>
 92 | </head>
 93 | <body>
 94 |     <img class="theme" height="30px" />
 95 |     <h1 class="heading">notes.</h1>
 96 |     <p class="info-text">double click on a note to remove it.</p>
 97 |     <div class="app" id="App">
 98 |         <button class="btn" id="btn">+</button>
 99 |     </div>
100 |     <script>
101 |         const btnEl = document.getElementById("btn");
102 |         const appEl = document.getElementById("App");
103 |         const themeBtn = document.querySelector(".theme");
104 |         if (!localStorage.getItem("theme")) {
105 |             localStorage.setItem("theme", "dark");
106 |         }
107 |         if (localStorage.getItem("theme") === "dark") {
108 |           console.log(localStorage.getItem("theme"));
109 |             setIcon("dark");
110 |                    document.body.style.backgroundColor = "black";
111 |                    document.body.style.filter = "invert(0)";
112 |         } else {
113 |             setIcon("light");
114 |             document.body.style.backgroundColor = "white";
115 |             document.body.style.filter = "invert(1)";
116 |         }
117 |         themeBtn.addEventListener("click", (e) =>{
118 |             if (localStorage.getItem("theme") === "light") {
119 |                 setIcon("dark");
120 |                 localStorage.setItem("theme", "dark");
121 |                 document.body.style.backgroundColor = "black";
122 |                 document.body.style.filter = "invert(0)";
123 |             } else if (localStorage.getItem("theme") === "dark") {
124 |                 setIcon("light");
125 |                 localStorage.setItem("theme", "light");
126 |                 document.body.style.backgroundColor = "white";
127 |                 document.body.style.filter = "invert(1)";
128 |             }
129 |         })
130 |         function setIcon(theme) {
131 |             themeBtn.src = `icons/${theme}.svg`;
132 |         }
133 |         // contribution ended
134 |         getNotes().forEach((note)=>{
135 |             const noteEl = createNoteEl(note.id,note.content);
136 |             appEl.insertBefore(noteEl,btnEl);
137 |         });
138 |         function createNoteEl(id,content){
139 |             const element = document.createElement("textarea");
140 |             element.classList.add("note");
141 |             element.placeholder = "Empty Note";
142 |             element.value = content;
143 |         
144 |             element.addEventListener("dblclick",()=>{
145 |                     const warning = confirm("Do you want to delete this note?");
146 |                     if(warning){
147 |                         deleteNote(id,element)
148 |                     }
149 |             });
150 |             element.addEventListener("input",()=>{
151 |                 updateNote(id,element.value);
152 |             });
153 |             return element;
154 |         
155 |         }
156 |         
157 |         function deleteNote(id,element){
158 |             notes = getNotes().filter((note)=> note.id!=id);
159 |             saveNote(notes);
160 |             appEl.removeChild(element);
161 |         
162 |         }
163 |         
164 |         function updateNote(id,content){
165 |            const notes = getNotes();
166 |            const target = notes.filter((note)=> note.id==id)[0]; 
167 |            target.content = content; 
168 |            saveNote(notes);
169 |         }
170 |             
171 |         function addNote(){
172 |             const notes = getNotes();
173 |             const noteObj = {
174 |                     id: Math.floor(Math.random() * 10000),
175 |                     content: ""           
176 |             };
177 |         
178 |             const noteEl = createNoteEl(noteObj.id,noteObj.content);
179 |             appEl.insertBefore(noteEl,btnEl);
180 |             notes.push(noteObj);
181 |             saveNote(notes)
182 |         }
183 |         
184 |         function saveNote(notes){
185 |             localStorage.setItem("note-app",JSON.stringify(notes));
186 |         }
187 |         
188 |         function getNotes(){
189 |             return JSON.parse(localStorage.getItem("note-app") || "[]");
190 |         }
191 |         
192 |         btnEl.addEventListener("click", addNote);
193 |     </script>
194 | </body>
195 | </html>
196 | 


--------------------------------------------------------------------------------