Skip to content

Commit 04c78bd

Browse files
ssanudinssanudin
committed
Deploy Note App
1 parent 5cf64ee commit 04c78bd

31 files changed

+8701
-0
lines changed

‎.prettierignore

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
# Ignore build/output directories
2+
/dist
3+
/build
4+
/out
5+
/coverage
6+
7+
# Ignore dependency directories
8+
/node_modules
9+
10+
# Ignore configuration files
11+
/.vscode
12+
/.idea
13+
/.github
14+
15+
# Ignore logs and cache
16+
/logs
17+
/.cache
18+
/.npm
19+
/.yarn
20+
21+
# Ignore environment files
22+
.env
23+
.env.local
24+
.env.development
25+
.env.production
26+
27+
# Ignore lock files
28+
package-lock.json
29+
yarn.lock
30+
pnpm-lock.yaml
31+
32+
# Ignore auto-generated files
33+
*.min.js
34+
*.min.css
35+
36+
# Ignore specific file types
37+
*.md
38+
*.json
39+
*.yml
40+
*.yaml
41+
*.html
42+
*.txt
43+
44+
# Ignore specific files
45+
README.md
46+
LICENSE
47+
CHANGELOG.md
48+
49+
# Ignore test files (if not formatting them)
50+
/__tests__
51+
/__mocks__
52+
*.test.js
53+
*.spec.js
54+
55+
# Ignore temporary files
56+
*.tmp
57+
*.bak
58+
*.swp

‎.prettierrc

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{}

‎README.md

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
# Notes App
2+
3+
## Description
4+
5+
A notes application to manage your tasks and notes efficiently. This app allows users to create, edit, and delete notes, providing a simple and intuitive interface.
6+
7+
## Installation
8+
9+
1. Clone the repository:
10+
```bash
11+
git clone https://github.com/ssanudin/notes-app-v1.git
12+
```
13+
2. Navigate to the project directory:
14+
```bash
15+
cd notes-app-v1
16+
```
17+
3. Install the dependencies:
18+
```bash
19+
npm install
20+
```
21+
22+
## Usage
23+
24+
To start the application, run:
25+
26+
```bash
27+
npm run start-dev
28+
```
29+
30+
Then open your browser and navigate to `http://localhost:8080` to access the app.
31+
32+
To format files with prettier, run:
33+
34+
```bash
35+
npm run prettier
36+
```
37+
38+
To build production files, run:
39+
40+
```bash
41+
npm run build
42+
```
43+
44+
## Custom Elements
45+
This project utilizes custom element components in JavaScript, allowing for a modular and reusable approach to building the user interface.
46+
47+
## License
48+
This project is licensed under the MIT License.

‎index.html

Lines changed: 227 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,227 @@
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+
<meta
7+
name="description"
8+
content="A notes application to manage your tasks and notes efficiently."
9+
/>
10+
<meta property="og:title" content="Notes App" />
11+
<meta
12+
property="og:description"
13+
content="A notes application to manage your tasks and notes efficiently."
14+
/>
15+
<meta property="og:image" content="./images/preview.png" />
16+
<meta
17+
property="og:url"
18+
content="https://ssanudin.github.io/notes-app-v1/"
19+
/>
20+
<meta name="twitter:card" content="summary_large_image" />
21+
<meta name="twitter:title" content="Notes App" />
22+
<meta
23+
name="twitter:description"
24+
content="A notes application to manage your tasks and notes efficiently."
25+
/>
26+
<meta name="twitter:image" content="./images/preview.png" />
27+
28+
<title>Notes App</title>
29+
<link rel="shortcut icon" href="./images/favicon.ico" type="image/x-icon" />
30+
31+
<link rel="preconnect" href="https://fonts.googleapis.com" />
32+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
33+
<link
34+
href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"
35+
rel="stylesheet"
36+
/>
37+
</head>
38+
<body>
39+
<template id="noteItem">
40+
<style>
41+
:host {
42+
display: block;
43+
width: 100%;
44+
}
45+
46+
.note-item {
47+
background-color: var(--yellownote);
48+
border-radius: 1rem;
49+
padding: 1.5rem 2rem 1rem;
50+
transition: all 150ms linear;
51+
}
52+
53+
.note-item:hover {
54+
scale: 1.04;
55+
}
56+
57+
.note-item__title {
58+
font-weight: 700;
59+
font-size: 1.35rem;
60+
border-bottom: 1px solid var(--fontcolor);
61+
padding-bottom: 1rem;
62+
margin-top: 0.2rem;
63+
margin-bottom: 1rem;
64+
}
65+
66+
.note-item__body {
67+
font-size: 1rem;
68+
word-wrap: break-word;
69+
word-break: break-all;
70+
}
71+
72+
.note-item__date-created,
73+
.note-item__time-created {
74+
display: flex;
75+
justify-content: space-between;
76+
align-items: center;
77+
font-size: 0.9rem;
78+
margin: 0.5rem 0;
79+
}
80+
81+
.note-item__time-created {
82+
margin-top: 2.5rem;
83+
}
84+
85+
.note-item__time-created > span {
86+
display: flex;
87+
align-items: center;
88+
}
89+
90+
.note-item__time-created > span > img {
91+
display: inline;
92+
margin-right: 0.25rem;
93+
}
94+
95+
.yellow {
96+
background-color: var(--yellownote);
97+
}
98+
99+
.red {
100+
background-color: var(--rednote);
101+
}
102+
103+
.blue {
104+
background-color: var(--bluenote);
105+
}
106+
107+
button {
108+
appearance: none;
109+
-moz-appearance: none;
110+
-webkit-appearance: none;
111+
position: relative;
112+
background: transparent;
113+
border: none;
114+
border-radius: 100%;
115+
cursor: pointer;
116+
padding: 0.5rem;
117+
width: 3rem;
118+
height: 3rem;
119+
transition: all 150ms linear;
120+
}
121+
122+
button::after {
123+
content: attr(tooltip);
124+
font-size: 0.7rem;
125+
font-weight: 400;
126+
position: absolute;
127+
bottom: 110%;
128+
left: 50%;
129+
transform: translateX(-50%);
130+
background-color: var(--fontcolor);
131+
color: #fff;
132+
padding: 0.5rem;
133+
border-radius: 0.25rem;
134+
white-space: nowrap;
135+
opacity: 0;
136+
transition: opacity 0.2s ease;
137+
pointer-events: none;
138+
}
139+
140+
button:hover {
141+
scale: 1.1;
142+
box-shadow: 0 0.25rem 0.8rem rgba(0, 0, 0, 0.15);
143+
border: 1px solid #fff;
144+
}
145+
146+
button:hover::after {
147+
opacity: 1;
148+
}
149+
150+
button:hover img {
151+
scale: 1.2;
152+
}
153+
154+
button:hover.toggle-archive-status {
155+
background-color: var(--bluenote);
156+
}
157+
158+
button:hover.delete-note {
159+
background-color: var(--rednote);
160+
}
161+
162+
button:active {
163+
scale: 0.9;
164+
}
165+
166+
@media screen and (min-width: 576px) {
167+
.note-item:hover {
168+
scale: 1.055;
169+
}
170+
}
171+
172+
@media screen and (min-width: 768px) {
173+
.note-item:hover {
174+
scale: 1.075;
175+
}
176+
}
177+
</style>
178+
179+
<div data-noteid="" class="note-item yellow">
180+
<p class="note-item__date-created">
181+
<span></span>
182+
<button
183+
type="button"
184+
class="toggle-archive-status"
185+
tooltip="Ubah status arsip"
186+
>
187+
<img src="" alt="Toggle archive status" />
188+
</button>
189+
</p>
190+
<h3 class="note-item__title"></h3>
191+
<p class="note-item__body"></p>
192+
<p class="note-item__time-created">
193+
<span>
194+
<img src="./images/timer.svg" alt="Jam catatan dibuat" />
195+
<span class="time"></span>, <span class="day"></span>
196+
</span>
197+
<button type="button" class="delete-note" tooltip="Hapus catatan">
198+
<img src="./images/delete.svg" alt="Hapus catatan" />
199+
</button>
200+
</p>
201+
</div>
202+
</template>
203+
204+
<header>
205+
<app-header class="header-container"></app-header>
206+
</header>
207+
208+
<sidebar-menu></sidebar-menu>
209+
210+
<main>
211+
<section class="add-note-container" hidden>
212+
<add-note-form></add-note-form>
213+
<button type="button" class="close-add-note-form">
214+
Tutup form <img src="./images/add.svg" alt="Tutup form" />
215+
</button>
216+
</section>
217+
<section class="notes-container">
218+
<note-list></note-list>
219+
</section>
220+
</main>
221+
222+
<footer>
223+
<hr />
224+
<app-footer class="footer-container"></app-footer>
225+
</footer>
226+
</body>
227+
</html>

0 commit comments

Comments
 (0)