repl.it
@ulisesantana/

awesome web

HTML, CSS, JS

No description

fork
loading
Files
  • index.html
  • script.js
  • style.css
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>repl.it</title>
	<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
	<section>
		<h2>
			Input en base a extensión
		</h2>
		<label for="pdf">
      PDF
    </label>
    <input name="pdf" type="file" accept="application/pdf" />
    <br>
    <br>

    <label for="audio">
      Audio
    </label>
    <input name="audio" type="file" accept="audio/*" />
    <br>
    <br>

    <label for="png">
      PNG
    </label>
    <input name="png" type="file" accept="image/png" />
    <br>
    <br>

    <label for="image">
      Images
    </label>
    <input name="image" type="file" accept="image/*" />
  </section>
	<section>
    <h2>
      Datalist
    </h2>
    <input type="text" list="subjects">
    <datalist id="subjects">
      <option value="Lenguaje de marcas"></option>
      <option value="Desarrollo web en entorno cliente"></option>
      <option value="Desarrollo web en entorno servidor"></option>
      <option value="Diseño de interfaces web"></option>
      <option value="Bases de datos"></option>
      <option value="Entornos de desarrollo"></option>
      <option value="Programación"></option>
    </datalist>

    <input type="color" list="colors" value="#ffff00">
<datalist id="colors">
  <option value="#ff0066"></option>
  <option value="#ff6600"></option>
  <option value="#00ff00"></option>
</datalist>
  </section>
  <section>
    <h2>
      CSS Filter
    </h2>
    <img id="rick-img" src="https://images.genius.com/d043f8f4c06f117c3efeec06dc8761dd.1000x1000x1.jpg"/>
    <div id="img-filter">
    
    </div>
  </section>
  <section>
    <h2>
      Web API
    </h2>
      La memoria de este dispositivo es ~ <span id="ram"></span> GiB.
  </section>


  <script src="script.js"></script>
</body>
</html>
result
console
?