Skip to content

Commit 2c5fb26

Browse files
Shaun PellingShaun Pelling
Shaun Pelling
authored and
Shaun Pelling
committed
lesson 1 code
1 parent 7023854 commit 2c5fb26

File tree

2 files changed

+186
-0
lines changed

2 files changed

+186
-0
lines changed

‎index.html‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<link href="styles.css" rel="stylesheet" />
6+
<title>JavaScript DOM Tutorials</title>
7+
</head>
8+
<body>
9+
<div id="wrapper">
10+
<header>
11+
<div id="page-banner">
12+
<h1 class="title">Bookorama</h1>
13+
<p>Books for Ninjas</p>
14+
<form id="search-books">
15+
<input type="text" placeholder="Search books..." />
16+
</form>
17+
</div>
18+
</header>
19+
<div id="book-list">
20+
<h2 class="title">Books to Read</h2>
21+
<ul>
22+
<li>
23+
<span class="name">Name of the Wind</span>
24+
<span class="delete">delete</span>
25+
</li>
26+
<li>
27+
<span class="name">The Wise Man's Fear</span>
28+
<span class="delete">delete</span>
29+
</li>
30+
<li>
31+
<span class="name">Kafka on the Shore</span>
32+
<span class="delete">delete</span>
33+
</li>
34+
<li>
35+
<span class="name">The Master and the Margarita</span>
36+
<span class="delete">delete</span>
37+
</li>
38+
</ul>
39+
</div>
40+
<form id="add-book">
41+
<input type="text" placeholder="Add a book..." />
42+
<button>Add</button>
43+
</form>
44+
45+
</div>
46+
<script src="app.js"></script>
47+
</body>
48+
</html>

‎styles.css‎

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
body{
2+
font-family: Tahoma;
3+
color: #444;
4+
letter-spacing: 1px;
5+
}
6+
7+
h1, h2{
8+
font-weight: normal;
9+
}
10+
11+
#wrapper{
12+
width: 90%;
13+
max-width: 960px;
14+
margin: 20px auto;
15+
border-radius: 6px;
16+
box-shadow: 0px 1px 6px rgba(0,0,0,0.2);
17+
box-sizing: border-box;
18+
padding: 0 0 20px;
19+
overflow: hidden;
20+
border: 1px solid lightgray;
21+
}
22+
23+
#page-banner{
24+
background: #eee ;
25+
padding: 10px 0;
26+
27+
}
28+
29+
#page-banner h1, #page-banner p{
30+
width: 100%;
31+
text-align: center;
32+
margin: 10px 0;
33+
}
34+
35+
#page-banner input{
36+
width: 90%;
37+
max-width: 300px;
38+
margin: 20px auto;
39+
display: block;
40+
padding: 8px;
41+
border: 1px solid #ddd;
42+
border-radius: 4px;
43+
font-size: 16px;
44+
color: #444;
45+
}
46+
47+
#book-list, #add-book, #tabbed-content{
48+
margin: 30px;
49+
}
50+
51+
#book-list ul, #tabbed-content ul{
52+
list-style-type: none;
53+
padding: 0;
54+
}
55+
56+
#book-list li{
57+
padding: 20px;
58+
border-left: 5px solid #ddd;
59+
margin: 20px 10px;
60+
}
61+
62+
#book-list li:hover{
63+
border-color: #9361bf;
64+
}
65+
66+
.delete{
67+
float: right;
68+
background: #9361bf;
69+
padding: 6px;
70+
border-radius: 4px;
71+
cursor: pointer;
72+
color: white;
73+
}
74+
75+
.delete:hover{
76+
background: #333;
77+
}
78+
79+
#add-book{
80+
width: 400px;
81+
margin: 0 auto;
82+
}
83+
84+
#add-book input{
85+
display: block;
86+
margin: 20px 0;
87+
padding: 10px;
88+
border: 1px solid #ccc;
89+
font-size: 16px;
90+
border-radius: 4px 0 0 4px;
91+
box-sizing: border-box;
92+
width: 300px;
93+
float: left;
94+
}
95+
96+
#add-book button{
97+
border: 1px solid #9361bf;
98+
background: #9361bf;
99+
padding: 10px 20px;
100+
font-size: 16px;
101+
display: inline-block;
102+
margin: 0;
103+
border-radius: 0 4px 4px 0;
104+
cursor: pointer;
105+
width: 100px;
106+
float: left;
107+
margin: 20px 0;
108+
border-left: 0;
109+
color: white;
110+
}
111+
112+
#add-book:after{
113+
content: '';
114+
display: block;
115+
clear: both;
116+
}
117+
118+
/*
119+
#tabbed-content li{
120+
display: inline-block;
121+
padding: 10px 14px;
122+
background: #ddd;
123+
border-radius: 4px;
124+
cursor: pointer;
125+
margin-right: 10px;
126+
}
127+
128+
#tabbed-content .tab{
129+
display: none;
130+
border: 1px solid #ddd;
131+
padding: 0 10px;
132+
border-radius: 4px;
133+
}
134+
135+
#tabbed-content .tab.active{
136+
display: block;
137+
}
138+
*/

0 commit comments

Comments
 (0)