diff options
Diffstat (limited to 'wk8/lect')
| -rw-r--r-- | wk8/lect/background.html | 27 | ||||
| -rw-r--r-- | wk8/lect/geolocation.html | 15 | ||||
| -rw-r--r-- | wk8/lect/headings.html | 29 | ||||
| -rw-r--r-- | wk8/lect/hello2.html | 21 | ||||
| -rw-r--r-- | wk8/lect/hello3.html | 23 | ||||
| -rw-r--r-- | wk8/lect/home.css | 20 | ||||
| -rw-r--r-- | wk8/lect/home.html | 19 | ||||
| -rw-r--r-- | wk8/lect/link.html | 34 | ||||
| -rw-r--r-- | wk8/lect/list.html | 16 | ||||
| -rw-r--r-- | wk8/lect/meta0.html | 11 | ||||
| -rw-r--r-- | wk8/lect/meta1.html | 13 | ||||
| -rw-r--r-- | wk8/lect/paragraphs.html | 20 | ||||
| -rw-r--r-- | wk8/lect/register.html | 14 | ||||
| -rw-r--r-- | wk8/lect/search.html | 13 |
14 files changed, 275 insertions, 0 deletions
diff --git a/wk8/lect/background.html b/wk8/lect/background.html new file mode 100644 index 0000000..114e3e8 --- /dev/null +++ b/wk8/lect/background.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> + +<html lang="en"> + <head> + <title>background</title> + </head> + <body> + <button id="red">R</button> + <button id="green">G</button> + <button id="blue">B</button> + <script> + + let body = document.querySelector('body'); + document.querySelector('#red').addEventListener('click', function() { + body.style.backgroundColor = 'red'; + }); + document.querySelector('#green').addEventListener('click', function() { + body.style.backgroundColor = 'green'; + }); + document.querySelector('#blue').addEventListener('click', function() { + body.style.backgroundColor = 'blue'; + }); + + </script> + </body> +</html> + diff --git a/wk8/lect/geolocation.html b/wk8/lect/geolocation.html new file mode 100644 index 0000000..6abaaa5 --- /dev/null +++ b/wk8/lect/geolocation.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> + +<html lang="en"> + <head> + <title>geolocation</title> + </head> + <body> + <script> + + navigator.geolocation.getCurrentPosition(function(position) { + document.write(position.coords.latitude + ", " + position.coords.longitude); + }); + </script> + </body> +</html> diff --git a/wk8/lect/headings.html b/wk8/lect/headings.html new file mode 100644 index 0000000..5f033ce --- /dev/null +++ b/wk8/lect/headings.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> + +<html lang="en"> + <head> + <title> + headings + </title> + </head> + <body> + <h1> + One + </h1> + <p> + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. + </p> + <h2> + Two + </h2> + <p> + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. + </p> + <h3> + Three + </h3> + <p> + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. + </p> + </body> +</html> diff --git a/wk8/lect/hello2.html b/wk8/lect/hello2.html new file mode 100644 index 0000000..a2baede --- /dev/null +++ b/wk8/lect/hello2.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> + +<html lang="en"> + <head> + <title>hello2</title> + </head> + <body> + <form> + <input autocomple="off" autofocus id="name" placeholder="Name" type="text"> + <input type="submit"> + </form> + <script> + + document.querySelector('form').addEventListener('submit', function(event) { + alert('hello, ' + document.querySelector('#name').value); + event.preventDefault(); + }); + + </script> + </body> +</html> diff --git a/wk8/lect/hello3.html b/wk8/lect/hello3.html new file mode 100644 index 0000000..6e1ce4e --- /dev/null +++ b/wk8/lect/hello3.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> + +<html lang="en"> + <head> + <script> + + document.addEventListener('DOMContentLoaded', function() { + document.querySelector('form').addEventListener('submit', function(event) { + alert('hello, ' + document.querySelector('#name').value); + event.preventDefault(); + }); + }); + + </script> + <title>hello2</title> + </head> + <body> + <form> + <input autocomplete="off" autofocus id="name" placeholder="Name" type="text"> + <input type="submit"> + </form> + </body> +</html> diff --git a/wk8/lect/home.css b/wk8/lect/home.css new file mode 100644 index 0000000..ceeb12b --- /dev/null +++ b/wk8/lect/home.css @@ -0,0 +1,20 @@ +.centered +{ + text-align: center; +} + +.large +{ + font-size: large; +} + +.medium +{ + font-size: medium; +} + +.small +{ + color: red; + font-size: small; +} diff --git a/wk8/lect/home.html b/wk8/lect/home.html new file mode 100644 index 0000000..ef0e981 --- /dev/null +++ b/wk8/lect/home.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> + +<html lang="en"> + <head> + <link href="home.css" rel="stylesheet"> + <title>home</title> + </head> + <body class="centered"> + <header class="large"> + Ivy Forge + </header> + <main class="medium"> + Welcome home pookie! + </main> + <footer class="small"> + Δ Copyworng :3 + </footer> + </body> +</html> diff --git a/wk8/lect/link.html b/wk8/lect/link.html new file mode 100644 index 0000000..ff230d0 --- /dev/null +++ b/wk8/lect/link.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> + +<html lang="en"> + <head> + <style> + + #harvard + { + color: red; + } + + #yale + { + color: blue; + } + + a + { + text-decoration: none; + } + + a:hover + { + text-decoration: underline; + } + + </style> + <title>list</title> + </head> + <body> + Visit <a href="https://www.harvard.edu/" id="harvard">Harvard</a> + or <a href="https://www.yale.edu/" id="yale">Yale</a> + </body> +</html> diff --git a/wk8/lect/list.html b/wk8/lect/list.html new file mode 100644 index 0000000..c61caf8 --- /dev/null +++ b/wk8/lect/list.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> + +<html lang="en"> + <head> + <title> + list + </title> + </head> + <body> + <ol> + <li>foo</li> + <li>bar</li> + <li>baz</li> + </ol> + </body> +</html> diff --git a/wk8/lect/meta0.html b/wk8/lect/meta0.html new file mode 100644 index 0000000..4e24d3b --- /dev/null +++ b/wk8/lect/meta0.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> + +<html lang="en"> + <head> + <meta name="viewport" content="initial-scale=1, width=device-width"> + <title>meta</title> + </head> + <body> + I love cats; miau + </body> +</html> diff --git a/wk8/lect/meta1.html b/wk8/lect/meta1.html new file mode 100644 index 0000000..7e4ced4 --- /dev/null +++ b/wk8/lect/meta1.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> + +<html lang="en"> + <head> + <meta property="og:title" content="CS50"> + <meta property="og:description" content="wow descript"> + <meta property="og:image" content="K2red.jpg"> + <title>meta</title> + </head> + <body> + I love cats; miau + </body> +</html> diff --git a/wk8/lect/paragraphs.html b/wk8/lect/paragraphs.html new file mode 100644 index 0000000..e26f9e0 --- /dev/null +++ b/wk8/lect/paragraphs.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> + +<html lang="en"> + <head> + <title> + paragraphs + </title> + </head> + <body> + <p> + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. + </p> + <p> + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. + </p> + <p> + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. + </p> + </body> +</html> diff --git a/wk8/lect/register.html b/wk8/lect/register.html new file mode 100644 index 0000000..a99f274 --- /dev/null +++ b/wk8/lect/register.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> + +<html lang="en"> + <head> + <title>register</title> + </head> + <body> + <form> + <input autocomplete="off" autofocus name="email" pattern=".+@.+\.edu" placeholder="Email" type="email"> + <button>Register</button> + </form> + + </body> +</html> diff --git a/wk8/lect/search.html b/wk8/lect/search.html new file mode 100644 index 0000000..fcbd10e --- /dev/null +++ b/wk8/lect/search.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> + +<html lang="en"> + <head> + <title>search</title> + </head> + <body> + <form action="https://www.google.com/search" method="get"> + <input autocomplete="off" autofocus name="q" placeholder="Query" type="search"> + <button>Google Search</button> + </form> + </body> +</html> |