Skip to content

Commit 64511c7

Browse files
geminixianggeminixiang
committed
add color picker, raw json download button
1 parent e667ca6 commit 64511c7

File tree

1 file changed

+258
-0
lines changed

1 file changed

+258
-0
lines changed

‎color-notes.html

+258
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,258 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
6+
<meta name="viewport" content="user-scalable=yes, width=device-width, initial-scale=1.0" />
7+
8+
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
9+
10+
<title>Minimal Notes</title>
11+
12+
<link rel="icon" sizes="192x192" href="icon.png">
13+
14+
<style>
15+
@import url('https://fonts.googleapis.com/css?family=Montserrat');
16+
17+
body {
18+
font-family: "Montserrat";
19+
/* font: 14px/1.6'Avenir', Helvetica, Arial, sans-serif; */
20+
}
21+
22+
i {
23+
font-size: 12px;
24+
clear: both;
25+
font-style: normal;
26+
display: block;
27+
}
28+
29+
h2 {
30+
margin: 10px;
31+
}
32+
33+
header>h2 {
34+
display: inline;
35+
}
36+
37+
header>a {
38+
font-size: 20px;
39+
cursor: pointer;
40+
}
41+
42+
#app {
43+
display: flex;
44+
flex-flow: column wrap;
45+
margin: 0 auto;
46+
height: 600px;
47+
justify-content: flex-start;
48+
align-content: flex-start;
49+
}
50+
51+
#app>* {
52+
border-radius: 2px;
53+
transition: all ease 0.3s;
54+
}
55+
56+
textarea {
57+
display: block;
58+
max-width: 200px;
59+
padding: 8px;
60+
margin: 10px;
61+
border: 1px solid #ccc;
62+
}
63+
64+
textarea:focus {
65+
border-color: black;
66+
}
67+
68+
button {
69+
padding: 0;
70+
cursor: pointer;
71+
background: transparent;
72+
border: 0;
73+
-webkit-appearance: none;
74+
}
75+
76+
input[type="color"] {
77+
-webkit-appearance: none;
78+
border: none;
79+
border-radius: 999px 999px 999px 35px;
80+
width: 25px;
81+
height: 25px;
82+
cursor: pointer;
83+
background-color: white;
84+
float: right;
85+
}
86+
87+
input[type="color"]::-webkit-color-swatch-wrapper {
88+
padding: 0;
89+
}
90+
91+
input[type="color"]::-webkit-color-swatch {
92+
border: none;
93+
border-radius: 999px 999px 999px 35px;
94+
}
95+
96+
.noteBox {
97+
position: relative;
98+
width: 216px;
99+
margin: 10px;
100+
padding: 0;
101+
border: 1px solid #ccc;
102+
}
103+
104+
.button {
105+
display: block;
106+
box-sizing: content-box;
107+
width: 200px;
108+
padding: 8px;
109+
margin: 0 10px 20px 10px;
110+
border: 1px solid #ccc;
111+
cursor: pointer;
112+
clear: both;
113+
}
114+
115+
.button:hover {
116+
background-color: black;
117+
color: white;
118+
border-color: black;
119+
}
120+
121+
.top {
122+
text-align: right;
123+
display: flex;
124+
flex-direction: row-reverse;
125+
justify-content: space-between;
126+
padding: 15px 10px;
127+
margin-bottom: 0.5em;
128+
}
129+
130+
.content {
131+
padding: 10px;
132+
}
133+
134+
.close {
135+
text-align: right;
136+
height: 10px;
137+
width: 10px;
138+
position: relative;
139+
box-sizing: border-box;
140+
line-height: 10px;
141+
display: inline-block;
142+
}
143+
144+
.close:before,
145+
.close:after {
146+
transform: rotate(-45deg);
147+
content: "";
148+
position: absolute;
149+
top: 50%;
150+
left: 50%;
151+
margin-top: -1px;
152+
margin-left: -5px;
153+
display: block;
154+
height: 2px;
155+
width: 10px;
156+
background-color: black;
157+
transition: all 0.25s ease-out;
158+
}
159+
160+
.close:after {
161+
transform: rotate(-135deg);
162+
}
163+
164+
.close:hover:before,
165+
.close:hover:after {
166+
transform: rotate(0deg);
167+
}
168+
</style>
169+
</head>
170+
171+
<body>
172+
<div id="app">
173+
<header>
174+
<a @click="downloadNote">📋</a>
175+
<h2>{{ title }}</h2>
176+
<input type="color" id="favcolor" name="favcolor" v-model="note.color">
177+
</header>
178+
179+
<textarea autofocus placeholder="insert your note .." v-model="note.text"
180+
@keyup.ctrl.enter="addNote"></textarea>
181+
<button class="button" @click="addNote">Submit</button>
182+
183+
184+
<div v-for="(note, index) in notes" class="noteBox">
185+
<div class="top" :style="{ 'background-color': note.color }">
186+
<button class="close" @click="removeNote(index)"></button>
187+
<i>{{ note.date }}</i>
188+
</div>
189+
<div class="content">
190+
{{ note.text }}
191+
</div>
192+
</div>
193+
</div>
194+
<script>
195+
var app = new Vue({
196+
el: '#app',
197+
data: {
198+
title: 'Minimal Notes',
199+
note: {
200+
text: '',
201+
date: '',
202+
color: '#fecf28'
203+
},
204+
notes: [{
205+
text: 'Minimal Notes',
206+
date: new Date(Date.now()).toLocaleString(),
207+
color: '#fecf28'
208+
}]
209+
},
210+
methods: {
211+
addNote() {
212+
let { text, date, color } = this.note;
213+
this.notes.push({
214+
text,
215+
date: new Date(Date.now()).toLocaleString(),
216+
color
217+
});
218+
this.note.text = '';
219+
},
220+
removeNote(index) {
221+
this.$delete(this.notes, index);
222+
},
223+
downloadNote() {
224+
var json = [JSON.stringify(this.notes)];
225+
var file = new Blob(json, { type: "application/json;charset=utf-8" });
226+
227+
// Check the Browser.
228+
var isIE = false || !!document.documentMode;
229+
if (isIE) {
230+
window.navigator.msSaveBlob(file, "Minimal-Notes.json");
231+
} else {
232+
var url = window.URL || window.webkitURL;
233+
link = url.createObjectURL(file);
234+
var a = document.createElement("a");
235+
a.download = "Minimal-Notes.json";
236+
a.href = link;
237+
document.body.appendChild(a);
238+
a.click();
239+
document.body.removeChild(a);
240+
}
241+
}
242+
},
243+
mounted() {
244+
if (localStorage.getItem('notes')) this.notes = JSON.parse(localStorage.getItem('notes'));
245+
},
246+
watch: {
247+
notes: {
248+
handler() {
249+
localStorage.setItem('notes', JSON.stringify(this.notes));
250+
},
251+
deep: true,
252+
},
253+
}
254+
})
255+
</script>
256+
</body>
257+
258+
</html>

0 commit comments

Comments
 (0)