From 21de9c053c9430cc573360347be035998651fd6a Mon Sep 17 00:00:00 2001 From: bwcsemaj Date: Thu, 9 Jul 2020 10:15:27 -0400 Subject: [PATCH 01/25] Rough stretched navigation bar and chose some dab pictures which I might replace with cats. Still don't fully know what website will be about. --- about.html | 0 contact.html | 0 css/style.css | 39 ++++++++++++++++++++---- index.html | 67 ++++++++++++++++++++++++++---------------- js/footer-functions.js | 4 +-- js/header-functions.js | 14 ++++----- 6 files changed, 85 insertions(+), 39 deletions(-) create mode 100644 about.html create mode 100644 contact.html diff --git a/about.html b/about.html new file mode 100644 index 0000000..e69de29 diff --git a/contact.html b/contact.html new file mode 100644 index 0000000..e69de29 diff --git a/css/style.css b/css/style.css index d17d83a..61b4307 100644 --- a/css/style.css +++ b/css/style.css @@ -1,9 +1,38 @@ -body { - background-color: navy; +* { + /*https://stackoverflow.com/questions/7008039/css-html5-why-does-my-body-have-a-spacing-at-the-top*/ + /* margin: 0px; + padding: 0px; + border-width: 0px; */ + /*https://stackoverflow.com/questions/30489594/prevent-100vw-from-creating-horizontal-scroll/30504010*/ + box-sizing: border-box; } +html { + height: 100%; + width: 100%; + text-align: center; + padding: 0px; +} -object { - height: 100vh; - width: 100vh; +body { + height: 100%; + width: 100%; + background: linear-gradient(rgb(128, 7, 7) 0.0%, rgb(255, 50, 100) 100.0%); + padding: 0px; +} + +/* START TOP NAVIGATION */ +#top-navigation-container{ + background-color: red; + height: 65px; +} +#logo{ + height: 65px; + width: 65px; +} +/* Scale images https://stackoverflow.com/questions/16217355/automatically-resize-images-with-browser-size-using-css*/ +img { + max-width: 100%; + height: auto; } +/* END TOP NAVIGATION */ \ No newline at end of file diff --git a/index.html b/index.html index 4dc0c72..13d3ba2 100644 --- a/index.html +++ b/index.html @@ -1,24 +1,23 @@ - - - - + + + - + + + + + - - - - - - + + @@ -29,29 +28,47 @@ - - - - - The quickest of brown foxes. + + + + + +
+
+ +
NAME OF COMPANY
+
HOME
+
ABOUT
+
CONTACT
+
+
+ + +
+
+ Could not find image + Could not find image + Could not find image + Could not find image + Could not find image + Could not find image + Could not find image +
+
+ - - + - - + + - - - + \ No newline at end of file diff --git a/js/footer-functions.js b/js/footer-functions.js index c7d6a2c..452c081 100644 --- a/js/footer-functions.js +++ b/js/footer-functions.js @@ -1,2 +1,2 @@ -w3IncludeHTML(); -document.write(''); +// w3IncludeHTML(); +// document.write(''); diff --git a/js/header-functions.js b/js/header-functions.js index ff2614d..f354946 100644 --- a/js/header-functions.js +++ b/js/header-functions.js @@ -1,11 +1,11 @@ -// import jquery-3.4.0 -document.write(''); -document.write(''); +// // import jquery-3.4.0 +// document.write(''); +// document.write(''); -// import `utils.js` -document.write(''); +// // import `utils.js` +// document.write(''); -// import w3-include -document.write(''); +// // import w3-include +// document.write(''); From 58879455f906d6910bb2f1c64029314b433e2e0a Mon Sep 17 00:00:00 2001 From: bwcsemaj Date: Thu, 9 Jul 2020 11:17:50 -0400 Subject: [PATCH 02/25] Worked on Navigation bar, decided to use bootstrap --- css/about.css | 0 css/contact.css | 0 css/home.css | 0 css/style.css | 7 +++---- 4 files changed, 3 insertions(+), 4 deletions(-) create mode 100644 css/about.css create mode 100644 css/contact.css create mode 100644 css/home.css diff --git a/css/about.css b/css/about.css new file mode 100644 index 0000000..e69de29 diff --git a/css/contact.css b/css/contact.css new file mode 100644 index 0000000..e69de29 diff --git a/css/home.css b/css/home.css new file mode 100644 index 0000000..e69de29 diff --git a/css/style.css b/css/style.css index 61b4307..f7106c1 100644 --- a/css/style.css +++ b/css/style.css @@ -17,14 +17,13 @@ html { body { height: 100%; width: 100%; - background: linear-gradient(rgb(128, 7, 7) 0.0%, rgb(255, 50, 100) 100.0%); + background: linear-gradient(rgb(255, 255, 255) 0.0%, rgb(129, 217, 233) 100.0%); padding: 0px; } /* START TOP NAVIGATION */ -#top-navigation-container{ - background-color: red; - height: 65px; +.nav-item a{ + font-size: 2em !important; } #logo{ height: 65px; From 5a46bcceaab8833d71ec23506b4e46bc61a1fadd Mon Sep 17 00:00:00 2001 From: bwcsemaj Date: Thu, 9 Jul 2020 11:40:03 -0400 Subject: [PATCH 03/25] Slightly changed home and working on contact page --- css/style.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/css/style.css b/css/style.css index f7106c1..8ffdc9c 100644 --- a/css/style.css +++ b/css/style.css @@ -11,13 +11,14 @@ html { height: 100%; width: 100%; text-align: center; + background: black !important; padding: 0px; } body { height: 100%; width: 100%; - background: linear-gradient(rgb(255, 255, 255) 0.0%, rgb(129, 217, 233) 100.0%); + background: black !important; padding: 0px; } From ebc195c256d3531ec64583023bcd0d2db230523b Mon Sep 17 00:00:00 2001 From: bwcsemaj Date: Thu, 9 Jul 2020 14:34:05 -0400 Subject: [PATCH 04/25] Add function to animate a selection --- js/main.js | 79 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 79 insertions(+) create mode 100644 js/main.js diff --git a/js/main.js b/js/main.js new file mode 100644 index 0000000..2fab6f3 --- /dev/null +++ b/js/main.js @@ -0,0 +1,79 @@ +class Vacaction { + constructor(name, url) { + this.name = name; + this.url = url; + } +} + +var running = false; +var vacations = new Array(); +var intervalId = null; + +window.onload = (event) => { + //Initialize imageElements + //First get Div holding Images + let div = document.getElementById("image-container"); + imageElements = div.getElementsByTagName("img"); + for (imageElement of imageElements) { + vacations.push(new Vacaction(imageElement.name, imageElement.currentSrc)); + imageElement.onclick = (event) => { + if (running) { + return; + } + running = true; + console.log(running); + startRandomSelectionAnimation(); + }; + } + console.log(vacations); + + //Add Listener to body so that we can start animation by click + var centerContainer = document.getElementById("center-container"); + console.log(centerContainer); + centerContainer.onclick = (event) => { + if (running) { + return; + } + running = true; + console.log(running); + intervalId = setInterval(step, 500); + }; + + +}; + +var previousSelectedImageElement = null; +var count = 0; +const MAX_COUNT = 10; +//Select Random Element and Change CSS +function step() { + console.log("STEP" + count); + //Reset Previous + if (previousSelectedImageElement != null) { + previousSelectedImageElement.id = ""; + } + + //Stop loop + if (MAX_COUNT < count) { + count = 0; + clearInterval(intervalId); + running = false; + return; + } + console.log("STEP" + count); + //Pick a random element and change its id so it is glowing + let randomIndex = getRandomInt(vacations.length); + let randomVacation = vacations[randomIndex]; + let imageElement = document.getElementsByName(randomVacation.name)[0]; + console.log(imageElement); + imageElement.id = "select-image"; + console.log("STEP" + count); + count++; + previousSelectedImageElement = imageElement; +} + +//https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random +function getRandomInt(max) { + return Math.floor(Math.random() * Math.floor(max)); +} + From 4c54d79976ec5a1de3d5af2539e9eb5044140bb4 Mon Sep 17 00:00:00 2001 From: bwcsemaj Date: Thu, 9 Jul 2020 15:07:21 -0400 Subject: [PATCH 05/25] test --- about.html | 80 +++++++++++++++++++++++++++++ contact.html | 128 ++++++++++++++++++++++++++++++++++++++++++++++ css/home.css | 45 +++++++++++++++++ css/style.css | 15 ++++++ index.html | 137 +++++++++++++++++++++++++++++++++++++++----------- 5 files changed, 375 insertions(+), 30 deletions(-) diff --git a/about.html b/about.html index e69de29..1be4a16 100644 --- a/about.html +++ b/about.html @@ -0,0 +1,80 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ + + +
+ +
+ + + + + + \ No newline at end of file diff --git a/contact.html b/contact.html index e69de29..28d775e 100644 --- a/contact.html +++ b/contact.html @@ -0,0 +1,128 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+

Enter in your message here.

+ +
+
+
+
+
+
+ +
+
+
+
+
+ +
+
+
+
+
+
+ +
+
+
+
+
+
+ +
+
+
+
+
+ +
+ SEND +
+
+
+ +
+ +
+ + + + +
+ +
+ + + + + + \ No newline at end of file diff --git a/css/home.css b/css/home.css index e69de29..f4004cb 100644 --- a/css/home.css +++ b/css/home.css @@ -0,0 +1,45 @@ +#select-image{ + box-shadow: white; + opacity: 1; +} + +img { + max-width: 100%; + height: auto; + pointer-events: none; + opacity: .2; +} + +.center-holder{ + position: relative; +} + +#center-container{ + z-index: 1; + position: absolute; +} + +#center-top{ + z-index: 2; + position: relative; + text-align: center; + color: white; + font-size: 5em; + vertical-align: middle; + line-height: 5em; + box-shadow: white; + opacity: 0; + pointer-events: none; + animation-name: show; + animation-duration: 7000ms; + animation-iteration-count: infinite; + animation-timing-function: linear; +} + +@keyframes show{ + from { + opacity: 0; + } to { + opacity: 1; + } +} \ No newline at end of file diff --git a/css/style.css b/css/style.css index 8ffdc9c..39f5063 100644 --- a/css/style.css +++ b/css/style.css @@ -30,6 +30,21 @@ body { height: 65px; width: 65px; } +#logo:hover{ + animation-name: spin; + animation-duration: 4000ms; + animation-iteration-count: infinite; + animation-timing-function: linear; +} + +@keyframes spin{ + from { + transform: rotate(0deg); + } to { + transform: rotate(360deg); + } +} + /* Scale images https://stackoverflow.com/questions/16217355/automatically-resize-images-with-browser-size-using-css*/ img { max-width: 100%; diff --git a/index.html b/index.html index 13d3ba2..bd779de 100644 --- a/index.html +++ b/index.html @@ -10,6 +10,7 @@ + @@ -19,52 +20,128 @@ - - - - - - - - - - - - -
-
- -
NAME OF COMPANY
-
HOME
-
ABOUT
-
CONTACT
+ +
+ -
-
- Could not find image - Could not find image - Could not find image - Could not find image - Could not find image - Could not find image - Could not find image +
+
+
+ Could not find image + Could not find image + Could not find image + Could not find image + Could not find image + Could not find image + Could not find image + Could not find image + Could not find image + Could not find image + Could not find image + Could not find image + Could not find image + Could not find image + Could not find image + Could not find image + Could not find image + Could not find image + Could not find image + Could not find image + Could not find image + Could not find image + Could not find image + Could not find image +
+
+
+ HELLO WORLD; +
+ +
- +
+
From bf7aa680c1540ad10325f8cc1a203a01b7d60de5 Mon Sep 17 00:00:00 2001 From: bwcsemaj Date: Thu, 9 Jul 2020 15:34:34 -0400 Subject: [PATCH 06/25] Finished animation of home page. Added drop down to contacts. --- contact.html | 12 +++++++----- css/home.css | 11 ++++++++--- css/style.css | 3 +++ index.html | 5 +++-- js/main.js | 34 +++++++++++++++++++--------------- 5 files changed, 40 insertions(+), 25 deletions(-) diff --git a/contact.html b/contact.html index 28d775e..127a817 100644 --- a/contact.html +++ b/contact.html @@ -64,7 +64,7 @@ -
+

Enter in your message here.

@@ -86,10 +86,12 @@

Enter in your message here.

-
- -
+ +
diff --git a/css/home.css b/css/home.css index f4004cb..4ae3fc7 100644 --- a/css/home.css +++ b/css/home.css @@ -2,10 +2,14 @@ box-shadow: white; opacity: 1; } - img { max-width: 100%; height: auto; +} + +div > img { + max-width: 100%; + height: auto; pointer-events: none; opacity: .2; } @@ -31,9 +35,10 @@ img { opacity: 0; pointer-events: none; animation-name: show; - animation-duration: 7000ms; - animation-iteration-count: infinite; + animation-duration: 4000ms; + animation-iteration-count: 1; animation-timing-function: linear; + animation-fill-mode: forwards; } @keyframes show{ diff --git a/css/style.css b/css/style.css index 39f5063..dbf1070 100644 --- a/css/style.css +++ b/css/style.css @@ -1,3 +1,5 @@ +@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap'); + * { /*https://stackoverflow.com/questions/7008039/css-html5-why-does-my-body-have-a-spacing-at-the-top*/ /* margin: 0px; @@ -5,6 +7,7 @@ border-width: 0px; */ /*https://stackoverflow.com/questions/30489594/prevent-100vw-from-creating-horizontal-scroll/30504010*/ box-sizing: border-box; + font-family: 'Roboto', sans-serif; } html { diff --git a/index.html b/index.html index bd779de..1a4a1eb 100644 --- a/index.html +++ b/index.html @@ -130,8 +130,9 @@
-
- HELLO WORLD; + +
+
diff --git a/js/main.js b/js/main.js index 2fab6f3..6ebe41f 100644 --- a/js/main.js +++ b/js/main.js @@ -7,7 +7,7 @@ class Vacaction { var running = false; var vacations = new Array(); -var intervalId = null; +var randomIntervalId = null; window.onload = (event) => { //Initialize imageElements @@ -36,7 +36,7 @@ window.onload = (event) => { } running = true; console.log(running); - intervalId = setInterval(step, 500); + randomIntervalId = setInterval(randomStep, 500); }; @@ -44,34 +44,38 @@ window.onload = (event) => { var previousSelectedImageElement = null; var count = 0; -const MAX_COUNT = 10; +const MAX_RANDOM_COUNT = 10; //Select Random Element and Change CSS -function step() { - console.log("STEP" + count); +function randomStep() { //Reset Previous if (previousSelectedImageElement != null) { previousSelectedImageElement.id = ""; } - //Stop loop - if (MAX_COUNT < count) { - count = 0; - clearInterval(intervalId); - running = false; - return; - } - console.log("STEP" + count); //Pick a random element and change its id so it is glowing let randomIndex = getRandomInt(vacations.length); let randomVacation = vacations[randomIndex]; let imageElement = document.getElementsByName(randomVacation.name)[0]; - console.log(imageElement); imageElement.id = "select-image"; - console.log("STEP" + count); + + //Update Center Top Text to display the name of vacation; + let centerTopTextElement = document.getElementsByName("center-top")[0]; + centerTopTextElement.textContent = randomVacation.name; + count++; previousSelectedImageElement = imageElement; + + //Stop loop + if (MAX_RANDOM_COUNT < count) { + count = 0; + clearInterval(randomIntervalId); + running = false; + centerTopTextElement.id = "center-top"; + return; + } } + //https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random function getRandomInt(max) { return Math.floor(Math.random() * Math.floor(max)); From f375f51963815b9a334d4cfdd8aa625878e029c2 Mon Sep 17 00:00:00 2001 From: bwcsemaj Date: Thu, 9 Jul 2020 15:45:45 -0400 Subject: [PATCH 07/25] Fixed bug regarding text showing on top after a next selection is being choosen --- about.html | 18 ++++++++++++++++-- css/home.css | 3 +-- js/main.js | 10 ++++++++-- 3 files changed, 25 insertions(+), 6 deletions(-) diff --git a/about.html b/about.html index 1be4a16..8b7beac 100644 --- a/about.html +++ b/about.html @@ -63,10 +63,24 @@ -
- +
+
+
+
+ HELLO +
+
+ WORLD +
+
+ WORLD +
+
+
+