first and only commit

2018-04-09 21:58:47 -06:00
commit 586f88024d
4 changed files with 156 additions and 0 deletions
--- a/README.md
+++ b/README.md
@@ -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
--- a/fib.js
+++ b/fib.js
@@ -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);
--- a/index.html
+++ b/index.html
@@ -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>
--- a/style.css
+++ b/style.css
@@ -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);
+}