Skip to content

Commit 6f2ed70

Browse files
iamshaunjpiamshaunjp
committed
lesson-2
1 parent bff7ec0 commit 6f2ed70

File tree

5 files changed

+135
-5
lines changed

5 files changed

+135
-5
lines changed

‎README.md

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎index.html

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<html lang="en">
2+
<head>
3+
<meta charset="UTF-8">
4+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
5+
<title>TypeScript Tutorial</title>
6+
<link rel="stylesheet" href="styles.css">
7+
</head>
8+
<body>
9+
10+
<div class="wrapper">
11+
<h1>Finance Logger</h1>
12+
13+
<!-- output list -->
14+
<ul class="item-list">
15+
16+
</ul>
17+
</div>
18+
19+
<footer>
20+
<form class="new-item-form">
21+
<div class="field">
22+
<label>Type:</label>
23+
<select id="type">
24+
<option value="invoice">Invoice</option>
25+
<option value="payment">Payment</option>
26+
</select>
27+
</div>
28+
<div class="field">
29+
<label>To / From:</label>
30+
<input type="text" id="tofrom">
31+
</div>
32+
<div class="field">
33+
<label>Details:</label>
34+
<input type="text" id="details">
35+
</div>
36+
<div class="field">
37+
<label>Amount (£):</label>
38+
<input type="number" id="amount">
39+
</div>
40+
<button>Add</button>
41+
</form>
42+
43+
<a href="https://www.thenetninja.co.uk">The Net Ninja</a>
44+
</footer>
45+
46+
<script src='sandbox.js'></script>
47+
</body>
48+
</html>

‎sandbox.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
var character = 'mario';
2+
console.log(character);
3+
var inputs = document.querySelectorAll('input');
4+
inputs.forEach(function (input) {
5+
console.log(input);
6+
});

‎sandbox.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
const character = 'mario';
2+
3+
console.log(character);
4+
5+
const inputs = document.querySelectorAll('input');
6+
7+
inputs.forEach(input => {
8+
console.log(input);
9+
});

‎styles.css

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
body{
2+
margin: 0;
3+
font-family: Roboto;
4+
}
5+
.wrapper{
6+
max-width: 960px;
7+
margin: 0 auto;
8+
}
9+
h1{
10+
margin: 40px auto;
11+
color: #ff0aa7;
12+
text-align: center;
13+
}
14+
ul{
15+
padding: 0;
16+
list-style-type: none;
17+
}
18+
li{
19+
padding: 6px 10px;
20+
border: 1px solid #eee;
21+
margin: 10px auto;
22+
}
23+
li h4{
24+
color: #ff0aa7;
25+
margin: 0;
26+
text-transform: capitalize;
27+
}
28+
li p{
29+
color: #333;
30+
margin: 8px 0 0;
31+
}
32+
footer{
33+
background: #eee;
34+
padding: 60px;
35+
margin-top: 60px;
36+
}
37+
form{
38+
max-width: 960px;
39+
margin: 0 auto;
40+
text-align: center;
41+
}
42+
label{
43+
display: block;
44+
font-weight: bold;
45+
font-size: 0.8em;
46+
color: #333;
47+
margin: 16px 0 6px;
48+
}
49+
input, select{
50+
padding: 6px;
51+
border: 1px solid #e1e1e1;
52+
border-radius: 4px;
53+
}
54+
.field{
55+
display: inline-block;
56+
margin: 0 10px;
57+
}
58+
button{
59+
color: white;
60+
border: 0;
61+
background: #ff0aa7;
62+
padding: 6px;
63+
min-width: 80px;
64+
border-radius: 4px;
65+
}
66+
footer a{
67+
text-align: center;
68+
display: block;
69+
color: #999;
70+
margin-top: 40px;
71+
font-size: 0.7em;
72+
}

0 commit comments

Comments
 (0)