Skip to content
This repository was archived by the owner on Nov 7, 2021. It is now read-only.

Commit 50a930a

Browse files
jcsalinas20jcsalinas20
committed
agrager nuevo elemento a la lista
1 parent 7bf21f7 commit 50a930a

File tree

6 files changed

+135
-59
lines changed

6 files changed

+135
-59
lines changed

‎jquery-3.5.1.min.js

+2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎materialize.min.css

+13
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎materialize.min.js

+6
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎www/css/index.css

+102-50
Original file line numberDiff line numberDiff line change
@@ -17,94 +17,146 @@
1717
* under the License.
1818
*/
1919
* {
20-
-webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
20+
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
21+
/* make transparent link selection, adjust last value opacity 0 to 1.0 */
2122
}
2223

2324
body {
24-
-webkit-touch-callout: none; /* prevent callout to copy image, etc when tap to hold */
25-
-webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */
26-
-webkit-user-select: none; /* prevent copy paste, to allow, change 'none' to 'text' */
27-
background-color:#E4E4E4;
28-
background-image:linear-gradient(to bottom, #A7A7A7 0%, #E4E4E4 51%);
25+
-webkit-touch-callout: none;
26+
/* prevent callout to copy image, etc when tap to hold */
27+
-webkit-text-size-adjust: none;
28+
/* prevent webkit from resizing text to fit */
29+
-webkit-user-select: none;
30+
/* prevent copy paste, to allow, change 'none' to 'text' */
31+
background-color: #E4E4E4;
32+
background-image: linear-gradient(to bottom, #A7A7A7 0%, #E4E4E4 51%);
2933
font-family: system-ui, -apple-system, -apple-system-font, 'Segoe UI', 'Roboto', sans-serif;
30-
font-size:12px;
31-
height:100vh;
32-
margin:0px;
33-
padding:0px;
34+
font-size: 12px;
35+
height: 100vh;
36+
margin: 0px;
37+
padding: 0px;
3438
/* Padding to avoid the "unsafe" areas behind notches in the screen */
3539
padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
36-
text-transform:uppercase;
37-
width:100%;
40+
text-transform: uppercase;
41+
width: 100%;
3842
}
3943

4044
/* Portrait layout (default) */
4145
.app {
42-
background:url(../img/logo.png) no-repeat center top; /* 170px x 200px */
43-
position:absolute; /* position in the center of the screen */
44-
left:50%;
45-
top:50%;
46-
height:50px; /* text area height */
47-
width:225px; /* text area width */
48-
text-align:center;
49-
padding:180px 0px 0px 0px; /* image height is 200px (bottom 20px are overlapped with text) */
50-
margin:-115px 0px 0px -112px; /* offset vertical: half of image height and text area height */
51-
/* offset horizontal: half of text area width */
46+
background: url(../img/logo.png) no-repeat center top;
47+
/* 170px x 200px */
48+
position: absolute;
49+
/* position in the center of the screen */
50+
left: 50%;
51+
top: 50%;
52+
height: 50px;
53+
/* text area height */
54+
width: 225px;
55+
/* text area width */
56+
text-align: center;
57+
padding: 180px 0px 0px 0px;
58+
/* image height is 200px (bottom 20px are overlapped with text) */
59+
margin: -115px 0px 0px -112px;
60+
/* offset vertical: half of image height and text area height */
61+
/* offset horizontal: half of text area width */
5262
}
5363

5464
/* Landscape layout (with min-width) */
5565
@media screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
5666
.app {
57-
background-position:left center;
58-
padding:75px 0px 75px 170px; /* padding-top + padding-bottom + text area = image height */
59-
margin:-90px 0px 0px -198px; /* offset vertical: half of image height */
60-
/* offset horizontal: half of image width and text area width */
67+
background-position: left center;
68+
padding: 75px 0px 75px 170px;
69+
/* padding-top + padding-bottom + text area = image height */
70+
margin: -90px 0px 0px -198px;
71+
/* offset vertical: half of image height */
72+
/* offset horizontal: half of image width and text area width */
6173
}
6274
}
6375

6476
h1 {
65-
font-size:24px;
66-
font-weight:normal;
67-
margin:0px;
68-
overflow:visible;
69-
padding:0px;
70-
text-align:center;
77+
font-size: 24px;
78+
font-weight: normal;
79+
margin: 0px;
80+
overflow: visible;
81+
padding: 0px;
82+
text-align: center;
7183
}
7284

7385
.event {
74-
border-radius:4px;
75-
color:#FFFFFF;
76-
font-size:12px;
77-
margin:0px 30px;
78-
padding:2px 0px;
86+
border-radius: 4px;
87+
color: #FFFFFF;
88+
font-size: 12px;
89+
margin: 0px 30px;
90+
padding: 2px 0px;
7991
}
8092

8193
.event.listening {
82-
background-color:#333333;
83-
display:block;
94+
background-color: #333333;
95+
display: block;
8496
}
8597

8698
.event.received {
87-
background-color:#4B946A;
88-
display:none;
99+
background-color: #4B946A;
100+
display: none;
89101
}
90102

91-
#deviceready.ready .event.listening { display: none; }
92-
#deviceready.ready .event.received { display: block; }
103+
#deviceready.ready .event.listening {
104+
display: none;
105+
}
106+
107+
#deviceready.ready .event.received {
108+
display: block;
109+
}
93110

94111
@keyframes fade {
95-
from { opacity: 1.0; }
96-
50% { opacity: 0.4; }
97-
to { opacity: 1.0; }
112+
from {
113+
opacity: 1.0;
114+
}
115+
116+
50% {
117+
opacity: 0.4;
118+
}
119+
120+
to {
121+
opacity: 1.0;
122+
}
98123
}
99124

100125
.blink {
101-
animation:fade 3000ms infinite;
102-
-webkit-animation:fade 3000ms infinite;
126+
animation: fade 3000ms infinite;
127+
-webkit-animation: fade 3000ms infinite;
103128
}
104129

130+
.ui-footer.ui-bar-inherit.ui-footer-fixed.slideup {
131+
display: flex;
132+
flex-direction: row;
133+
justify-content: center;
134+
padding: 10px 0;
135+
}
136+
137+
form.add-new-element {
138+
display: flex;
139+
justify-content: center;
140+
}
141+
142+
.ui-btn.ui-input-btn.ui-corner-all.ui-shadow {
143+
padding: 12px;
144+
margin: 6px 10px;
145+
}
146+
147+
h1.ui-title {
148+
place-self: center;
149+
font-weight: bold;
150+
}
151+
152+
@media screen and (max-width: 500px) {
153+
.ui-footer.ui-bar-inherit.ui-footer-fixed.slideup {
154+
flex-direction: column;
155+
}
156+
}
105157

106158
@media screen and (prefers-color-scheme: dark) {
107159
body {
108-
background-image:linear-gradient(to bottom, #585858 0%, #1B1B1B 51%);
160+
background-image: linear-gradient(to bottom, #585858 0%, #1B1B1B 51%);
109161
}
110-
}
162+
}

‎www/index.html

+3-6
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<head>
55
<meta charset="utf-8">
66
<meta http-equiv="Content-Security-Policy"
7-
content="default-src &apos;self&apos; data: gap: https://ssl.gstatic.com &apos;unsafe-eval&apos;; style-src &apos;self&apos; &apos;unsafe-inline&apos;; media-src *; img-src &apos;self&apos; data: content:;">
7+
content="default-src &apos;self&apos; data: gap: https://ssl.gstatic.com 'sha256-tkJydKrWBpGiiW0XQKgEKviapv3waKafG2+Bffcb5rA=' &apos;unsafe-eval&apos;; style-src &apos;self&apos; &apos;unsafe-inline&apos;; media-src *; img-src &apos;self&apos; data: content:;">
88
<meta name="format-detection" content="telephone=no">
99
<meta name="msapplication-tap-highlight" content="no">
1010
<meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
@@ -14,7 +14,7 @@
1414

1515
<!-- CDN -->
1616
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
17-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
17+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" />
1818
<link rel="stylesheet" type="text/css" href="js/jquery-1.5.0.mobile.min.css">
1919
<style>
2020
/* For avoiding title truncation in wp8 */
@@ -39,14 +39,11 @@
3939
<h1>Home</h1>
4040
</div>
4141
<ul data-role="listview" id="list">
42-
<li><a href="#page1">Page1</a></li>
43-
<li><a href="#page2">Page2</a></li>
44-
<li><a href="#page3">Page3</a></li>
4542
</ul>
4643

4744
<div data-role="footer" data-position="fixed">
4845
<h1>Add new element</h1>
49-
<form>
46+
<form class="add-new-element">
5047
<input type="text" name="" i="">
5148
<input type="button" value="Submit">
5249
</form>

‎www/js/index.js

+9-3
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,12 @@ function onDeviceReady() {
55
document.getElementById('deviceready').classList.add('ready');
66
}
77

8-
function addNewElement() {
9-
console.log($("#list"))
10-
}
8+
function addNewElement(e) {
9+
e.preventDefault();
10+
var value = $("form.add-new-element input[type='text']").val();
11+
$("#list").append(`<li class="ui-last-child"><a href="#${value}" class="ui-btn ui-btn-icon-right ui-icon-carat-r">${value}</a></li>`)
12+
}
13+
14+
$(function () {
15+
$("form.add-new-element").on("click", (e) => addNewElement(e));
16+
})

0 commit comments

Comments
 (0)