bradybod-usu/cs2610hw6
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first and only commit

Browse Source
This commit is contained in:
bradybodily
2018-04-09 21:58:47 -06:00
commit 586f88024d
4 changed files with 156 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
README.md Normal file
View File

@@ -0,0 +1,5 @@
# HW6 - Fibonacci Sequence through JavaScript DOM Manipulation
## create a webpage using as little HTML as possible
See [https://usu.instructure.com/courses/485880/assignments/2421372] for complete details

56
fib.js Normal file
View File

@@ -0,0 +1,56 @@
// Set the document title
document.title = 'Dynamic Fibonacci Sequence in JavaScript';
// Create a red div in the body
var div = document.createElement('div');
div.setAttribute('class', 'red shadowed stuff-box');
document.querySelector('body').appendChild(div);
var fib = document.createElement('div');
fib.setAttribute('class', 'flex');
// Add instructions
var para = document.createElement('p');
para.textContent = "FIB(0)";
div.appendChild(para);
var computefib = function(sliderPos){
var now = 0;
var last = 0;
if(sliderPos === 0) {
return 0;
}
for(var i = 0; i < sliderPos; i++){
if(last === 1 && i === 2){
last = 0;
}
if(i !== 0 && last === 0 ){
now = 1;
}
now += last;
last = now - last;
var masdfl = document.createElement('fib');
masdfl.setAttribute('class', 'fib');
masdfl.innerHTML = now;
fib.appendChild(masdfl);
}
};
var slider = document.createElement('input');
slider.type = "range";
slider.max = "50" ;
slider.min = "0";
slider.value = "0";
slider.oninput = function(){
para.textContent= "FIB(" + this.value +")";
};
slider.onchange = function(){
while(fib.firstChild){
fib.removeChild(fib.firstChild);
}
computefib(this.value);
};
div.appendChild(slider);
div.appendChild(fib);

12
index.html Normal file
View File

@@ -0,0 +1,12 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="style.css" type="text/css"/>
</head>
<body>
<script src="fib.js" type="text/javascript"></script>
</body>
</html>

83
style.css Normal file
View File

@@ -0,0 +1,83 @@
body {
}
.fib {
padding: 10px 10px;
display: inline-block;
background-color: rgba(112,128,144,0.1);
}
.fib-left {
float: left;
display: inline-block;
margin-right: 10px;
}
.fib-right {
float: right;
display: inline-block;
margin-left: 10px;
}
.shadowed {
text-shadow: 1px 1px 2px black;
color: white;
}
.stuff-box {
font-family: 'helvetica neue', helvetica, sans-serif;
letter-spacing: 1px;
text-transform: capitalize;
text-align: center;
padding: 3px 10px;
margin: 10px;
cursor: pointer;
border-radius: 10px;
border-width: 2px;
border-style: solid;
}
.flex {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
}
.red {
border-color: rgb(255,0,0);
background: rgb(180,60,60);
box-shadow: 1px 1px 2px rgba(200,0,0,0.4);
}
.yellow {
border-color: rgb(255,255,0);
background: rgb(180,180,60);
box-shadow: 1px 1px 2px rgba(200,200,0,0.4);
}
.blue {
border-color: rgb(0,0,255);
background: rgb(60,60,180);
box-shadow: 1px 1px 2px rgba(0,0,200,0.4);
}
.green {
border-color: rgb(0,255,0);
background: rgb(60,180,60);
box-shadow: 1px 1px 2px rgba(0,200,0,0.4);
}
.white {
border-color: rgb(255,255,255);
background: rgb(180,180,180);
box-shadow: 1px 1px 2px rgba(200,200,0,0.4);
}
.black {
border-color: rgb(0,0,0);
background: rgb(75,75,75);
box-shadow: 1px 1px 2px rgba(200,200,0,0.4);
}