From 586f88024dc8171a29891bc8302f02e4a4474af7 Mon Sep 17 00:00:00 2001 From: bradybodily Date: Mon, 9 Apr 2018 21:58:47 -0600 Subject: [PATCH] first and only commit --- README.md | 5 ++++ fib.js | 56 ++++++++++++++++++++++++++++++++++++ index.html | 12 ++++++++ style.css | 83 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 156 insertions(+) create mode 100644 README.md create mode 100644 fib.js create mode 100644 index.html create mode 100644 style.css diff --git a/README.md b/README.md new file mode 100644 index 0000000..2709c09 --- /dev/null +++ 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 diff --git a/fib.js b/fib.js new file mode 100644 index 0000000..142771a --- /dev/null +++ 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); \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..53ffddf --- /dev/null +++ b/index.html @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/style.css b/style.css new file mode 100644 index 0000000..4869567 --- /dev/null +++ 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); +}