Skip to content

Commit 85ca18d

Browse files
vladocarvladocar
committed
for mobile
1 parent 5f4f2fd commit 85ca18d

File tree

2 files changed

+152
-0
lines changed

2 files changed

+152
-0
lines changed

‎.DS_Store

0 Bytes
Binary file not shown.

‎index-mobile.html

+152
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
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+
* {box-sizing: border-box;}
16+
17+
body {
18+
font: 14px/1.6'Avenir', Helvetica, Arial, sans-serif;
19+
}
20+
i {
21+
font-size: 12px;
22+
clear: both;
23+
font-style: normal;
24+
display: block;
25+
}
26+
h2 {
27+
margin: 10px
28+
}
29+
#app {
30+
31+
width: 100%;
32+
33+
34+
}
35+
#app>div {
36+
position: relative;
37+
padding: 8px;
38+
margin: 12px 2% 12px 2%;
39+
border: 1px solid #ccc;
40+
border-radius: 4px;
41+
}
42+
textarea {
43+
display: block;
44+
width: 96%;
45+
height: 54px;
46+
padding: 8px;
47+
margin: 0 2% 10px 2%;
48+
border: 1px solid #ccc;
49+
border-radius: 4px;
50+
}
51+
button {
52+
padding: 0;
53+
cursor: pointer;
54+
background: transparent;
55+
border: 0;
56+
-webkit-appearance: none;
57+
}
58+
.button {
59+
width: 96%;
60+
height: 34px;
61+
padding: 8px;
62+
margin: 0 2% 20px 2%;
63+
border: 1px solid #ccc;
64+
border-radius: 4px;
65+
cursor: pointer;
66+
67+
}
68+
.close {
69+
position: absolute;
70+
top: 7px;
71+
right: 5px;
72+
font-size: 21px;
73+
font-weight: bold;
74+
line-height: 0.75;
75+
margin: 0 2px 0 0;
76+
text-shadow: 0 1px 0 #fff;
77+
}
78+
.close:hover,
79+
.close:focus {
80+
text-decoration: none;
81+
cursor: pointer;
82+
}
83+
.done{
84+
background-color:green;
85+
}
86+
</style>
87+
</head>
88+
89+
<body>
90+
<div id="app">
91+
92+
<h2>{{title}}</h2>
93+
94+
<textarea autofocus placeholder="insert your note .." v-model="note.text"></textarea>
95+
96+
<button class="button" @click="addNote">Submit</button>
97+
98+
<div :class="{addNote:note.done}" v-for="(note, index) in notes">
99+
<button class="close" @click="removeNote(index)">&times;</button>
100+
<i>{{note.date}}</i>
101+
{{note.text}}
102+
{{note.color}}
103+
</div>
104+
</div>
105+
<script>
106+
document.getElementById("app").style.height = document.documentElement.clientHeight + "px";
107+
var app = new Vue({
108+
el: '#app',
109+
data: {
110+
title: 'Minimal Notes',
111+
note: {
112+
text: '',
113+
date: ''
114+
},
115+
notes: [{
116+
text: 'Minimal Notes',
117+
date: new Date(Date.now()).toLocaleString()
118+
}]
119+
},
120+
methods: {
121+
addNote() {
122+
let {
123+
text, title, color
124+
} = this.note
125+
this.notes.push({
126+
text,
127+
date: new Date(Date.now()).toLocaleString(),
128+
129+
})
130+
},
131+
removeNote(index) {
132+
133+
this.$delete(this.notes, index)
134+
},
135+
136+
},
137+
mounted() {
138+
if (localStorage.getItem('notes')) this.notes = JSON.parse(localStorage.getItem('notes'));
139+
},
140+
watch: {
141+
notes: {
142+
handler() {
143+
localStorage.setItem('notes', JSON.stringify(this.notes));
144+
},
145+
deep: true,
146+
},
147+
}
148+
})
149+
</script>
150+
</body>
151+
152+
</html>

0 commit comments

Comments
 (0)