Skip to content

Commit 8542de0

Browse files
SheriDoverSheriDover
committed
class work
1 parent ee3a4a6 commit 8542de0

12 files changed

Lines changed: 372 additions & 0 deletions

File tree

‎Sheri/My_Web_Project_W5/custom.js‎

Whitespace-only changes.

‎Sheri/My_Web_Project_W5/images.jpg‎

76.1 KB
Loading

‎Sheri/My_Web_Project_W5/images/eddie.jpg‎

76.1 KB
Loading

‎Sheri/My_Web_Project_W5/index.html‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Week 5 Website</title>
6+
<link rel="stylesheet" href="style.css">
7+
</head>
8+
<body>
9+
<div class="wrapper">
10+
<header class="head">
11+
<nav class="nav">
12+
<ul>
13+
<li><a href="#">Home</a></li>
14+
<li><a href="#">About</a></li>
15+
<li><a href="#">Contact</a></li>
16+
</ul>
17+
</nav>
18+
</header>
19+
<div class="main">
20+
<h1>Header 1</h1>
21+
<h2>Header 2</h2>
22+
<p><img src="images.jpg" alt="Eddie the cat has his ears back and is sitting on a book" align="left">Mark territory has closed eyes but still sees you. Eat a plant, kill a hand play time find something else more interesting. Eat prawns daintily with a claw then lick paws clean wash down prawns with a lap of carnation milk then retire to the warmest spot on the couch to claw at the fabric before taking a catnap poop on grasses for thug cat . Refuse to drink water except out of someone's glass spot something, big eyes, big eyes, crouch, shake butt, prepare to pounce. Pooping rainbow while flying in a toasted bread costume in space sleep in the bathroom sink or meow all night having their mate disturbing sleeping humans. Need to chase tail play riveting piece on synthesizer keyboard the dog smells bad jump off balcony, onto stranger's head. Find something else more interesting if it fits, i sits. Who's the baby meow all night having their mate disturbing sleeping humans favor packaging over toy all of a sudden cat goes crazy, for caticus cuteicus or pee in the shoe. Unwrap toilet paper. Stretch leave fur on owners clothes. Chew foot meow all night having their mate disturbing sleeping humans attack feet meow. </p>
23+
24+
25+
</div>
26+
27+
</div>
28+
<footer>
29+
<p> paragraph for the footer</p>
30+
</footer>
31+
32+
</body>
33+
</html>

‎Sheri/My_Web_Project_W5/style.css‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
.head {
2+
border:5px, solid,navy;
3+
background-color:rgba(122, 207, 225, 0.6);
4+
border:5px solid navy;
5+
6+
}
7+
h1 {
8+
font-weight: bolder;
9+
font-size: 5em;
10+
color: navy;
11+
}
12+
h2 {
13+
font-weight: bold;
14+
font-size: 4em;
15+
color:navy;
16+
}
17+
p {
18+
color:blue;
19+
font-size: 2em;
20+
21+
}
22+
img {
23+
border-radius: 100px;
24+
width: 10em;
25+
text-align: left;
26+
27+
margin: 1em;
28+
border:5px solid navy;
29+
30+
}
31+
32+
.nav ul li{
33+
display:inline;
34+
35+
}
36+
37+
.main {
38+
max-width: 96%;
39+
margin-left:auto;
40+
margin-right:auto;
41+
display: inline-block;
42+
}

‎Sheri/tiffanyjavascriptlesson/pricing.js‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
/* We're gonna need:
2+
-list that stores our inventory
3+
- for each item
4+
- material
5+
-price
6+
-is it in stock
7+
-a function that adds to the list
8+
- a function that removes from the list
9+
- a function that adds stock
10+
- a function that removes stock of an item
11+
*/
12+
13+
// first thing: make an array that will store a list of objects for every item in our store
14+
//add event listener add it here because we want a window onload event
15+
//this is an anon button find it in dom by using its name we don't need getelementby
16+
window.onload = function() {
17+
document.getElementById('add_button').onclick = addInventoryItem;
18+
} //normally youdon't use () because it will call the function instead of asssigning it
19+
20+
var inventory = [];
21+
22+
//define our object definition by making a constructor
23+
//this is a constructor function for an inventory item
24+
25+
function makeInventoryItem(name, price, in_stock) {
26+
this.name = name;
27+
this.price =price;
28+
this.in_stock = in_stock;
29+
}
30+
31+
// add inventory to the list
32+
function addInventoryItem() {
33+
//create new Inventory object
34+
//get text out of the inputs
35+
//assign each input field's value to a variable
36+
//pass those valuse to the object constructor
37+
var name = document.getElementById('name').value;
38+
var price = document.getElementById("price").value;
39+
var in_stock = document.getElementById("in_stock").value;
40+
var newer_item = new makeInventoryItem(name, price, in_stock);
41+
//add new object to the inventory array
42+
inventory.push(newer_item);
43+
console.log(inventory);
44+
45+
//update inventory displayed on web page
46+
}

‎Sheri/tiffanyjavascriptlesson/pricing_raw.html‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Construction Pricing</title>
6+
<link rel="stylesheet" href="red_test.css"/>
7+
</head>
8+
<body>
9+
<main>
10+
<h1>Materials for Sale</h1>
11+
12+
<table width="100%">
13+
<thead>
14+
<tr>
15+
<th>Material</th>
16+
<th>Price</th>
17+
<th>In Stock</th>
18+
</tr>
19+
</thead>
20+
<tbody id="inventory">
21+
<tr>
22+
<td>Wood</td>
23+
<td>$15</td>
24+
<td id="woodStock" class="true">Yes</td>
25+
</tr>
26+
</tbody>
27+
<tfoot>
28+
<tr>
29+
<td><input type ="text" id="name"/></td>
30+
<td><input type ="number" id="price"/></td>
31+
<td><input type="checkbox" id="in_stock"/></td>
32+
</tr>
33+
</tfoot>
34+
</table>
35+
36+
<button>Add Stock</button>
37+
<button>Remove Stock</button>
38+
<button id="add_button">Add Inventory </button>
39+
40+
</main>
41+
<script src="pricing.js"></script>
42+
</body>
43+
</html>

‎Sheri/tiffanyjavascriptlesson/red_test.css‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
body {
2+
width: 50%;
3+
margin: 0 auto;
4+
padding: 20px;
5+
text-align: center;
6+
}
7+
8+
main {
9+
border: solid 1px #333;
10+
}
11+
12+
h1 {
13+
background-color: #F59581;
14+
padding: 35px;
15+
margin: 0 auto auto;
16+
}
17+
18+
.false {
19+
background-color: #c00;
20+
color: #fff;
21+
}
22+
23+
.true {
24+
background-color: #0c0;
25+
}

‎Sheri/to_do_start/css/style.css‎

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
/* Basic Style */
2+
body {
3+
background: #fff;
4+
color: #333;
5+
font-family: Lato, sans-serif;
6+
}
7+
.container {
8+
display: block;
9+
width: 400px;
10+
margin: 100px auto 0;
11+
}
12+
ul {
13+
margin: 0;
14+
padding: 0;
15+
}
16+
li * {
17+
float: left;
18+
}
19+
li, h3 {
20+
clear:both;
21+
list-style:none;
22+
}
23+
input, button {
24+
outline: none;
25+
}
26+
button {
27+
background: none;
28+
border: 0px;
29+
color: #888;
30+
font-size: 15px;
31+
width: 60px;
32+
margin: 10px 0 0;
33+
font-family: Lato, sans-serif;
34+
cursor: pointer;
35+
}
36+
button:hover {
37+
color: #333;
38+
}
39+
/* Heading */
40+
h3,
41+
label[for='new-task'] {
42+
color: #333;
43+
font-weight: 700;
44+
font-size: 15px;
45+
border-bottom: 2px solid #333;
46+
padding: 30px 0 10px;
47+
margin: 0;
48+
text-transform: uppercase;
49+
}
50+
input[type="text"] {
51+
margin: 0;
52+
font-size: 18px;
53+
line-height: 18px;
54+
height: 18px;
55+
padding: 10px;
56+
border: 1px solid #ddd;
57+
background: #fff;
58+
border-radius: 6px;
59+
font-family: Lato, sans-serif;
60+
color: #888;
61+
}
62+
input[type="text"]:focus {
63+
color: #333;
64+
}
65+
66+
/* New Task */
67+
label[for='new-task'] {
68+
display: block;
69+
margin: 0 0 20px;
70+
}
71+
input#new-task {
72+
float: left;
73+
width: 318px;
74+
}
75+
p > button:hover {
76+
color: #0FC57C;
77+
}
78+
79+
/* Task list */
80+
li {
81+
overflow: hidden;
82+
padding: 20px 0;
83+
border-bottom: 1px solid #eee;
84+
}
85+
li > input[type="checkbox"] {
86+
margin: 0 10px;
87+
position: relative;
88+
top: 15px;
89+
}
90+
li > label {
91+
font-size: 18px;
92+
line-height: 40px;
93+
width: 237px;
94+
padding: 0 0 0 11px;
95+
}
96+
li > input[type="text"] {
97+
width: 226px;
98+
}
99+
li > .delete:hover {
100+
color: #CF2323;
101+
}
102+
103+
/* Completed */
104+
#completed-tasks label {
105+
text-decoration: line-through;
106+
color: #888;
107+
}
108+
109+
/* Edit Task */
110+
ul li input[type=text] {
111+
display:none;
112+
}
113+
114+
ul li.editMode input[type=text] {
115+
display:block;
116+
}
117+
118+
ul li.editMode label {
119+
display:none;
120+
}

‎Sheri/to_do_start/index.html‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!-- taken from TreeHouse Course -->
2+
<!DOCTYPE html>
3+
<html>
4+
<head>
5+
<title>Todo App</title>
6+
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
7+
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" charset="utf-8">
8+
</head>
9+
<body>
10+
<div class="container">
11+
<label for="new-task">Add Item</label>
12+
<input id="new-task" type="text">
13+
<button id="add-button">Add</button>
14+
15+
<h3>Todo</h3>
16+
<ul id="incomplete-tasks">
17+
<li>
18+
<label>Pay Bills</label>
19+
</li>
20+
<li>
21+
<label>Go Shopping</label>
22+
</li>
23+
</ul>
24+
</div>
25+
26+
<script type="text/javascript" src="js/app.js"></script>
27+
28+
</body>
29+
</html>

0 commit comments

Comments
 (0)