Skip to content

Commit 93735a0

Browse files
cjoshmartincjoshmartin
committed
github pages fix
0 parents  commit 93735a0

File tree

8 files changed

+251
-0
lines changed

8 files changed

+251
-0
lines changed

‎.DS_Store

6 KB
Binary file not shown.

‎index.css

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
body {
2+
padding: 1rem;
3+
background-color: #BBDEFB;
4+
}
5+
6+
#go-button {
7+
margin-left: -11px;
8+
}
9+
ul{
10+
margin-top: 20px;
11+
list-style-type: none;
12+
border-radius: 5px;
13+
}

‎index.html

+59
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<title>Person Stats</title>
7+
<meta name="description" content="">
8+
<meta name="viewport" content="width=device-width, initial-scale=1">
9+
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.0/css/foundation.min.css">--> <!--NO Foundation-->
10+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
11+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
12+
13+
<link rel="stylesheet" href="index.css">
14+
</head>
15+
<body>
16+
<div class="container">
17+
<div class="row animated bounceInDown">
18+
<div class="col-md-offset-4 person-form">
19+
<div class="col-md-offset-1">
20+
<h1>Person Stats</h1>
21+
</div>
22+
<form id="person-form">
23+
<div class="form-group row">
24+
<div class="col-md-6">
25+
<label class="sr-only" for="personName">Name</label>
26+
<div class="input-group">
27+
<div class="input-group-addon">Name</div>
28+
<input type="text" name="personName" class="form-control" value="Pablo">
29+
</div>
30+
</div>
31+
</div>
32+
<div class="form-group row">
33+
<div class="col-md-6">
34+
<label class="sr-only" for="age">Age</label>
35+
<div class="input-group">
36+
<div class="input-group-addon">#</div>
37+
<input type="number" name="personAge" class="form-control" value="49">
38+
</div>
39+
</div>
40+
</div>
41+
<div class="form-group row">
42+
<div class="col-md-offset-2 col-sm-offset-4">
43+
<label for="favoriteColor">Favorite color</label>
44+
<input type="color" name="favoriteColor">
45+
</div>
46+
</div>
47+
<div class="col-md-6" id="go-button">
48+
<button type="submit" class="btn btn-info btn-lg btn-block">Go</button>
49+
</div>
50+
</form>
51+
</div>
52+
</div>
53+
54+
<div id="stats"></div>
55+
</div >
56+
57+
<script src="index.js"></script>
58+
</body>
59+
</html>

‎index.js

+101
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
function Update(ev) {
2+
ev.preventDefault()
3+
/*
4+
* Grabbing text
5+
*/
6+
const f = ev.target
7+
const name = f.personName.value
8+
const age = f.personAge.value
9+
const favcolor = f.favoriteColor.value
10+
11+
/*
12+
* Grabbing Selectors
13+
*/
14+
// starting variables
15+
const div = document.querySelector('#stats')
16+
// const list = document.createElement('ul') // where content goes
17+
const nameItem = document.createElement('li')
18+
const ageItem = document.createElement('li')
19+
const colorItem = document.createElement('li')
20+
const colorDiv = document.createElement('div')
21+
22+
/*
23+
* Functions
24+
*/
25+
26+
function renderColor (color) { // #1
27+
// very unique
28+
const newDiv = document.createElement('div')
29+
// newDiv.style.backgroundColor = color;
30+
newDiv.textContent = color
31+
return newDiv;
32+
}
33+
34+
35+
function renderListItem(a) { //# 2
36+
return document.createElement(a)
37+
}
38+
39+
40+
function renderList(name,age,favcolor){ // #3
41+
const newList = renderListItem('ul') // parent
42+
newList.classList.add("animated", "slideInLeft")
43+
newList.style.backgroundColor ="#f7f7f7"
44+
// debugger
45+
const nameItem = renderListItem('li')
46+
nameItem.textContent = `Name: ${name}`
47+
48+
const ageItem = renderListItem('li')
49+
ageItem.textContent = `Age: ${age}`
50+
51+
const favcolorItem = renderListItem('li') // parent
52+
const pindiv = renderListItem("p")
53+
pindiv.textContent = `Favorite Color : ${favcolor}`
54+
const coloredDiv = renderListItem('div')
55+
coloredDiv.style.backgroundColor = favcolor
56+
coloredDiv.style.width = '6rem'
57+
coloredDiv.style.height = '3rem'
58+
coloredDiv.classList.add('col-md-offset-11')
59+
// coloredDiv.style.float = 'right'
60+
favcolorItem.appendChild(pindiv)
61+
favcolorItem.appendChild(coloredDiv)
62+
63+
newList.appendChild(nameItem)
64+
newList.appendChild(ageItem)
65+
newList.appendChild(favcolorItem)
66+
67+
return newList
68+
}
69+
70+
/*
71+
* Busness Logic
72+
*/
73+
74+
// name tag
75+
// nameItem.textContent = `Name: ${name}`
76+
// list.appendChild(nameItem)
77+
//
78+
//
79+
// ageItem.textContent = `Age: ${age}`
80+
// list.appendChild(ageItem)
81+
//
82+
// colorItem.textContent = 'Favorite Color: '
83+
//
84+
//
85+
// colorDiv.style.backgroundColor = favcolor
86+
// colorDiv.style.width = '6rem'
87+
// colorDiv.style.height = '3rem'
88+
// colorItem.appendChild(colorDiv)
89+
//colorItem.appendChild(renderColor(favcolor)) // #1
90+
91+
// list.appendChild(colorItem)
92+
93+
// list.appendChild()
94+
95+
96+
div.appendChild(renderList(name,age,favcolor))
97+
98+
}// end of function
99+
100+
const personForm = document.querySelector('#person-form')
101+
personForm.addEventListener('submit', Update)

‎particles.min.js

+9
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎person-stats/README.md

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
# Person Stats
2+
3+
## Day 1 Homework
4+
5+
* Update the new _stats_ div with the value of the text input.
6+
7+
### Bonus Credit
8+
9+
* Add the name to a _paragraph_ inside the _stats_ div.
10+
11+
### Super Mega Bonus Credit
12+
13+
* Add another input to the form.
14+
* Display the value of that input alongside the name in the `div` (or `p`).
15+
16+
### Super Mega Bonus Credit Hyper Fighting
17+
18+
* Change the appearance of the paragraph (think CSS) based on a value from the form. _e.g._ Turn the text blue if the user types "blue" in the form field.

‎person-stats/index.html

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<title>Person Stats</title>
7+
<meta name="description" content="">
8+
<meta name="viewport" content="width=device-width, initial-scale=1">
9+
</head>
10+
<body>
11+
<h1>Person Stats</h1>
12+
13+
<form id="person-form">
14+
<p>
15+
<label for="personName">Name</label>
16+
<input type="text" name="personName">
17+
<br />
18+
<label for="personAge">Age</label>
19+
<input type="text" name="personAge">
20+
21+
</p>
22+
<button type="submit">Go</button>
23+
</form>
24+
25+
<div id="stats"></div>
26+
27+
<script src="index.js"></script>
28+
</body>
29+
</html>

‎person-stats/index.js

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
function changeStats(ev) {
2+
ev.preventDefault()
3+
const f = ev.target
4+
const name = f.personName.value
5+
const age = f.personAge.value
6+
const statsSelector = document.querySelector('#stats')
7+
if (name =="blue"){
8+
document.querySelector("input[name=\"personName\"]").style.color = "blue"
9+
}
10+
else if(age =="blue"){
11+
document.querySelector("input[name=\"personage\"]").style.color = "blue"
12+
}
13+
else if (name=="" || age=="") {
14+
alert("ERROR: CAN NOT LEAVE EMPTY")
15+
}
16+
else{
17+
statsSelector.innerHTML = "<p>name: "+ name +"</p><p>Age: " +age +"</a>"
18+
}
19+
}
20+
21+
const personForm = document.querySelector('#person-form')
22+
personForm.addEventListener('submit', changeStats)

0 commit comments

Comments
 (0)