Skip to content

Commit 17448c3

Browse files
author
Matej Jeglic
committed
finished day 7 and day 8
1 parent 7d5a3b7 commit 17448c3

File tree

7 files changed

+204
-0
lines changed

7 files changed

+204
-0
lines changed

‎.gitignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -172,3 +172,6 @@ days/013-016-css-basics/demos/selectorville/.idea/encodings.xml
172172
days/013-016-css-basics/demos/selectorville/.idea/selectorville.iml
173173
**.DS_Store
174174
days/041-044-react/**node_modules
175+
176+
177+
*.idea

‎days/005-008-html5/your-turn/extras/form.css

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
2+
form input, form select {
3+
4+
display: block;
5+
width: 100%;
6+
height: calc(1.5em + .75rem + 2px);
7+
padding: .375rem .75rem;
8+
font-size: 1rem;
9+
font-weight: 400;
10+
line-height: 1.5;
11+
color: #495057;
12+
background-color: #fff;
13+
background-clip: padding-box;
14+
border: 1px solid #ced4da;
15+
border-radius: .25rem;
16+
transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
17+
18+
}
19+
20+
form input::placeholder {
21+
color: #6c757d;
22+
opacity: 1;
23+
}
24+
25+
button {
26+
display: inline-block;
27+
font-weight: 400;
28+
color: #212529;
29+
text-align: center;
30+
vertical-align: middle;
31+
-webkit-user-select: none;
32+
-moz-user-select: none;
33+
-ms-user-select: none;
34+
user-select: none;
35+
background-color: transparent;
36+
border: 1px solid transparent;
37+
border-top-color: transparent;
38+
border-right-color: transparent;
39+
border-bottom-color: transparent;
40+
border-left-color: transparent;
41+
padding: .375rem .75rem;
42+
font-size: 1rem;
43+
line-height: 1.5;
44+
border-radius: .25rem;
45+
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
46+
}
47+
48+
49+
button {
50+
51+
color: #fff;
52+
background-color: #28a745;
53+
border-color: #28a745;
54+
55+
}

‎days/005-008-html5/your-turn/extras/form_hook.js

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
$(document).ready(function () {
2+
3+
$("form").submit(function (e) {
4+
e.preventDefault()
5+
6+
const $inputs = $('form :input');
7+
8+
let values = {}
9+
$inputs.each(function () {
10+
if (this.name) {
11+
values[this.name] = $(this).val();
12+
}
13+
})
14+
15+
alert(JSON.stringify(values, null, 2))
16+
17+
return false
18+
})
19+
})

‎days/005-008-html5/your-turn/extras/site.css

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
2+
form {
3+
margin-left: auto;
4+
margin-right: auto;
5+
max-width: 350px;
6+
background-color: white;
7+
padding: 20px;
8+
padding-right: 30px;
9+
border-radius: 10px;
10+
}
11+
12+
form > * {
13+
margin: 10px;
14+
}
15+
16+
form > div {
17+
text-align: right;
18+
margin-right: -10px;
19+
}
20+
21+
body {
22+
background-color: #84cbff;
23+
}
24+
25+
h1 {
26+
color: white;
27+
text-align: center;
28+
margin-top: 50px;
29+
margin-bottom: 50px;
30+
font-size: 64px;
31+
font-weight: lighter;
32+
}

‎days/005-008-html5/your-turn/google.jpg

6.5 KB
Loading

‎days/005-008-html5/your-turn/index.html

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>My Google</title>
6+
</head>
7+
<body>
8+
9+
<div style="text-align: center; margin-bottom: 10px;">
10+
<img src="google.jpg">
11+
</div>
12+
13+
14+
<div style="text-align: center;">
15+
<form style="margin: 10px;">
16+
Search the web using Google! <br>
17+
<input type="text" name="search" style="margin: 10px;" required size="40">
18+
<br>
19+
<button>Google Search</button>
20+
<button>Feeling lucky</button>
21+
</form>
22+
23+
<table border="0" width="80%" align="center">
24+
<tr>
25+
<td bgcolor="#7EE5DA">
26+
Special Searches<br>
27+
<a href="#">Standford Search</a> <br>
28+
<a href="#">Linux Search</a>
29+
</td>
30+
<td bgcolor="#70CCC2">
31+
<a href="#">Help!</a> <br>
32+
<a href="#">About Google</a> <br>
33+
<a href="#">Company Info</a> <br>
34+
<a href="#">Google! Logos</a> <br>
35+
</td>
36+
<td bgcolor="#62B3AA">
37+
Get Google!<br>
38+
updates monthly:<br>
39+
<form>
40+
<input type="email" name="emailadrr" required> <br>
41+
<input type="submit" name="SubmitAction" value="Subscribe"> &nbsp &nbsp <a href="#">Archive</a>
42+
</form>
43+
</td>
44+
</tr>
45+
</table>
46+
47+
<div>
48+
<a href="register.html">Register</a>
49+
</div>
50+
51+
52+
</div>
53+
54+
55+
</body>
56+
</html>

‎days/005-008-html5/your-turn/register.html

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Sign up for FoxRem</title>
6+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
7+
<link rel="stylesheet" href="extras/form.css">
8+
<link rel="stylesheet" href="extras/site.css">
9+
10+
</head>
11+
<body>
12+
13+
<!-- sign up form here ... -->
14+
<h1>Sign up for FoxRem</h1>
15+
16+
<form action="" method="post">
17+
18+
<input type="text" name="full_name" required placeholder=" full name">
19+
<input type="email" multiple name="email" required placeholder=" email">
20+
<input type="password" minlength="6" name="password" required placeholder=" password">
21+
<input type="number" min="18" name="age" required placeholder=" age in years">
22+
<select name="heard_of" required>
23+
<option value="" selected>Please select an option</option>
24+
<option value="podcast">Podcast</option>
25+
<option value="search">Search engine</option>
26+
<option value="friend">Friend's recommendation</option>
27+
</select>
28+
<input type="time" name="datetime">
29+
<input type="datetime-local" name="datetime" id="datetime">
30+
<input type="date" name="datetime" id="date">
31+
<button type="submit">Register</button>
32+
33+
</form>
34+
35+
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
36+
<script src="extras/form_hook.js"></script>
37+
38+
</body>
39+
</html>

0 commit comments

Comments
 (0)