From bc7a6dcef3baaf188fcaa74aadd2bf57ebe6d21d Mon Sep 17 00:00:00 2001 From: Brightlaz Date: Thu, 14 Apr 2022 18:22:12 -0700 Subject: [PATCH 01/18] Nav-bar, link and scroll haven't finished the scrolling yet --- projects/landing-page/css/styles.css | 68 ++++++++++++------ projects/landing-page/index.html | 103 +++++++++++++++------------ projects/landing-page/js/app.js | 69 +++++++++++++----- 3 files changed, 156 insertions(+), 84 deletions(-) diff --git a/projects/landing-page/css/styles.css b/projects/landing-page/css/styles.css index 16145e98c..74d5c652c 100755 --- a/projects/landing-page/css/styles.css +++ b/projects/landing-page/css/styles.css @@ -10,9 +10,10 @@ /* ---- Base Rules ---- */ + body { - background: rgb(136,203,171); - background: linear-gradient(0deg, rgba(136,203,171,1) 0%, rgba(0,13,60,1) 100%); + background: rgb(136, 203, 171); + background: linear-gradient(0deg, rgba(136, 203, 171, 1) 0%, rgba(0, 13, 60, 1) 100%); margin: 0; font-family: 'Merriweather', serif; color: #fff; @@ -20,13 +21,14 @@ body { /* Typeography General*/ + h1 { font-family: 'Fira Sans', sans-serif; font-size: 3em; margin: 2em 1rem; } -@media only screen and (min-width: 35em){ +@media only screen and (min-width: 35em) { h1 { font-size: 7em; margin: 2em 4rem 1em; @@ -45,7 +47,9 @@ p { color: #eee; } + /* ---- Layout Rules ---- */ + main { margin: 10vh 1em 10vh; } @@ -63,7 +67,9 @@ section { /* ---- Module Rules ---- */ + /* Navigation Styles*/ + .navbar__menu ul { padding-left: 0; margin: 0; @@ -75,7 +81,7 @@ section { } .navbar__menu .menu__link { - display: block; + /* display: block; */ padding: 1em; font-weight: bold; text-decoration: none; @@ -88,7 +94,9 @@ section { transition: ease 0.3s all; } + /* Header Styles */ + .page__header { background: #fff; position: fixed; @@ -97,26 +105,31 @@ section { z-index: 5; } + /* Footer Styles */ + .page__footer { background: #000; padding: 3em; color: #fff; } -.page__footer p{ +.page__footer p { color: #fff; } /* ---- Theme Rules ---- */ + + /* Landing Container Styles */ + .landing__container { padding: 1em; text-align: left; } -@media only screen and (min-width: 35em){ +@media only screen and (min-width: 35em) { .landing__container { max-width: 50em; padding: 4em; @@ -126,12 +139,18 @@ section { section:nth-of-type(even) .landing__container { margin-right: 0; margin-left: auto; - text-align: right; + text-align: right; } + /* Background Circles */ + + /* Note that background circles are created with psuedo elements before and after */ + + /* Circles appear to be random do to use of :nth-of-type psuedo class */ + section:nth-of-type(odd) .landing__container::before { content: ''; background: rgba(255, 255, 255, 0.187); @@ -146,8 +165,8 @@ section:nth-of-type(odd) .landing__container::before { section:nth-of-type(even) .landing__container::before { content: ''; - background: rgb(255,255,255); - background: linear-gradient(0deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,.2) 100%); + background: rgb(255, 255, 255); + background: linear-gradient(0deg, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, .2) 100%); position: absolute; top: 3em; right: 3em; @@ -161,8 +180,8 @@ section:nth-of-type(even) .landing__container::before { section:nth-of-type(3n) .landing__container::after { content: ''; - background: rgb(255,255,255); - background: linear-gradient(0deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,.2) 100%); + background: rgb(255, 255, 255); + background: linear-gradient(0deg, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, .2) 100%); position: absolute; right: 0; bottom: 0; @@ -176,8 +195,8 @@ section:nth-of-type(3n) .landing__container::after { section:nth-of-type(3n + 1) .landing__container::after { content: ''; - background: rgb(255,255,255); - background: linear-gradient(0deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,.2) 100%); + background: rgb(255, 255, 255); + background: linear-gradient(0deg, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, .2) 100%); position: absolute; right: 20vw; bottom: -5em; @@ -191,8 +210,13 @@ section:nth-of-type(3n + 1) .landing__container::after { /* ---- Theme State Rules ---- */ + + /* Section Active Styles */ + + /* Note: your-active-class class is applied through javascript. You should update the class here and in the index.html to what you set in your javascript file. */ + section.your-active-class { background: rgb(0, 0, 0); background: linear-gradient(0deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 100%); @@ -208,16 +232,14 @@ section.your-active-class .landing__container::after { animation: rotate 5s linear 0s infinite forwards reverse; } + /* Section Active Styles Keyframe Animations */ + @keyframes rotate { - from { - transform: rotate(0deg) - translate(-1em) - rotate(0deg); - } - to { - transform: rotate(360deg) - translate(-1em) - rotate(-360deg); - } + from { + transform: rotate(0deg) translate(-1em) rotate(0deg); + } + to { + transform: rotate(360deg) translate(-1em) rotate(-360deg); + } } \ No newline at end of file diff --git a/projects/landing-page/index.html b/projects/landing-page/index.html index baadb068a..ca49138aa 100755 --- a/projects/landing-page/index.html +++ b/projects/landing-page/index.html @@ -1,59 +1,72 @@ + - - - - Manipulating the DOM - - - + + + + Manipulating the DOM + + + + + - -
- -
-
-
-

Landing Page

+
+
- -
-
-

Section 1

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum metus faucibus lectus pharetra dapibus. Suspendisse potenti. Aenean aliquam elementum mi, ac euismod augue. Donec eget lacinia ex. Phasellus imperdiet porta orci eget mollis. Sed convallis sollicitudin mauris ac tincidunt. Donec bibendum, nulla eget bibendum consectetur, sem nisi aliquam leo, ut pulvinar quam nunc eu augue. Pellentesque maximus imperdiet elit a pharetra. Duis lectus mi, aliquam in mi quis, aliquam porttitor lacus. Morbi a tincidunt felis. Sed leo nunc, pharetra et elementum non, faucibus vitae elit. Integer nec libero venenatis libero ultricies molestie semper in tellus. Sed congue et odio sed euismod.

+
+
+

Section 1

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum metus faucibus lectus pharetra dapibus. Suspendisse potenti. Aenean aliquam elementum mi, ac euismod augue. Donec eget lacinia ex. Phasellus imperdiet porta orci + eget mollis. Sed convallis sollicitudin mauris ac tincidunt. Donec bibendum, nulla eget bibendum consectetur, sem nisi aliquam leo, ut pulvinar quam nunc eu augue. Pellentesque maximus imperdiet elit a pharetra. Duis lectus mi, aliquam + in mi quis, aliquam porttitor lacus. Morbi a tincidunt felis. Sed leo nunc, pharetra et elementum non, faucibus vitae elit. Integer nec libero venenatis libero ultricies molestie semper in tellus. Sed congue et odio sed euismod.

-

Aliquam a convallis justo. Vivamus venenatis, erat eget pulvinar gravida, ipsum lacus aliquet velit, vel luctus diam ipsum a diam. Cras eu tincidunt arcu, vitae rhoncus purus. Vestibulum fermentum consectetur porttitor. Suspendisse imperdiet porttitor tortor, eget elementum tortor mollis non.

-
-
-
-
-

Section 2

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum metus faucibus lectus pharetra dapibus. Suspendisse potenti. Aenean aliquam elementum mi, ac euismod augue. Donec eget lacinia ex. Phasellus imperdiet porta orci eget mollis. Sed convallis sollicitudin mauris ac tincidunt. Donec bibendum, nulla eget bibendum consectetur, sem nisi aliquam leo, ut pulvinar quam nunc eu augue. Pellentesque maximus imperdiet elit a pharetra. Duis lectus mi, aliquam in mi quis, aliquam porttitor lacus. Morbi a tincidunt felis. Sed leo nunc, pharetra et elementum non, faucibus vitae elit. Integer nec libero venenatis libero ultricies molestie semper in tellus. Sed congue et odio sed euismod.

+

Aliquam a convallis justo. Vivamus venenatis, erat eget pulvinar gravida, ipsum lacus aliquet velit, vel luctus diam ipsum a diam. Cras eu tincidunt arcu, vitae rhoncus purus. Vestibulum fermentum consectetur porttitor. Suspendisse imperdiet + porttitor tortor, eget elementum tortor mollis non.

+
+
+
+
+

Section 2

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum metus faucibus lectus pharetra dapibus. Suspendisse potenti. Aenean aliquam elementum mi, ac euismod augue. Donec eget lacinia ex. Phasellus imperdiet porta orci + eget mollis. Sed convallis sollicitudin mauris ac tincidunt. Donec bibendum, nulla eget bibendum consectetur, sem nisi aliquam leo, ut pulvinar quam nunc eu augue. Pellentesque maximus imperdiet elit a pharetra. Duis lectus mi, aliquam + in mi quis, aliquam porttitor lacus. Morbi a tincidunt felis. Sed leo nunc, pharetra et elementum non, faucibus vitae elit. Integer nec libero venenatis libero ultricies molestie semper in tellus. Sed congue et odio sed euismod.

-

Aliquam a convallis justo. Vivamus venenatis, erat eget pulvinar gravida, ipsum lacus aliquet velit, vel luctus diam ipsum a diam. Cras eu tincidunt arcu, vitae rhoncus purus. Vestibulum fermentum consectetur porttitor. Suspendisse imperdiet porttitor tortor, eget elementum tortor mollis non.

-
-
-
-
-

Section 3

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum metus faucibus lectus pharetra dapibus. Suspendisse potenti. Aenean aliquam elementum mi, ac euismod augue. Donec eget lacinia ex. Phasellus imperdiet porta orci eget mollis. Sed convallis sollicitudin mauris ac tincidunt. Donec bibendum, nulla eget bibendum consectetur, sem nisi aliquam leo, ut pulvinar quam nunc eu augue. Pellentesque maximus imperdiet elit a pharetra. Duis lectus mi, aliquam in mi quis, aliquam porttitor lacus. Morbi a tincidunt felis. Sed leo nunc, pharetra et elementum non, faucibus vitae elit. Integer nec libero venenatis libero ultricies molestie semper in tellus. Sed congue et odio sed euismod.

- -

Aliquam a convallis justo. Vivamus venenatis, erat eget pulvinar gravida, ipsum lacus aliquet velit, vel luctus diam ipsum a diam. Cras eu tincidunt arcu, vitae rhoncus purus. Vestibulum fermentum consectetur porttitor. Suspendisse imperdiet porttitor tortor, eget elementum tortor mollis non.

-
-
-
- +

Aliquam a convallis justo. Vivamus venenatis, erat eget pulvinar gravida, ipsum lacus aliquet velit, vel luctus diam ipsum a diam. Cras eu tincidunt arcu, vitae rhoncus purus. Vestibulum fermentum consectetur porttitor. Suspendisse imperdiet + porttitor tortor, eget elementum tortor mollis non.

+ + +
+
+

Section 3

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum metus faucibus lectus pharetra dapibus. Suspendisse potenti. Aenean aliquam elementum mi, ac euismod augue. Donec eget lacinia ex. Phasellus imperdiet porta orci + eget mollis. Sed convallis sollicitudin mauris ac tincidunt. Donec bibendum, nulla eget bibendum consectetur, sem nisi aliquam leo, ut pulvinar quam nunc eu augue. Pellentesque maximus imperdiet elit a pharetra. Duis lectus mi, aliquam + in mi quis, aliquam porttitor lacus. Morbi a tincidunt felis. Sed leo nunc, pharetra et elementum non, faucibus vitae elit. Integer nec libero venenatis libero ultricies molestie semper in tellus. Sed congue et odio sed euismod.

+

Aliquam a convallis justo. Vivamus venenatis, erat eget pulvinar gravida, ipsum lacus aliquet velit, vel luctus diam ipsum a diam. Cras eu tincidunt arcu, vitae rhoncus purus. Vestibulum fermentum consectetur porttitor. Suspendisse imperdiet + porttitor tortor, eget elementum tortor mollis non.

+
+
+ + + - + + \ No newline at end of file diff --git a/projects/landing-page/js/app.js b/projects/landing-page/js/app.js index f52ee8672..1bb2cd348 100755 --- a/projects/landing-page/js/app.js +++ b/projects/landing-page/js/app.js @@ -11,52 +11,89 @@ * * JS Standard: ESlint * -*/ + */ /** * Comments should be present at the beginning of each procedure and class. * Great to have comments before crucial code sections within the procedure. -*/ + */ /** * Define Global Variables * -*/ - + */ +const ul = document.querySelector('#navbar__list'); +const one = document.querySelector('#section1'); +const two = document.querySelector('#section2'); +const three = document.querySelector('#section3') /** * End Global Variables * Start Helper Functions * -*/ - - + */ +const link = function(text, id) { + let li = document.createElement('li'); + li.innerHTML = ` ${text} `; + li.setAttribute('id', id) + li.classList.add('menu__link'); + return li +} +const scrollY = function(start, old) { + if (window.scrollY >= start.getBoundingClientRect().top && window.scrollY >= start.getBoundingClientRect().bottom === 16) { + start.classList.add('your-active-class'); + old.classList.remove('your-active-class'); + } else { + start.classList.add('your-active-class'); + } +} /** * End Helper Functions * Begin Main Functions * -*/ + */ -// build the nav +// build the nav +ul.appendChild(link('Section 1', 'sec1')); +ul.appendChild(link('Section 2', 'sec2')); +ul.appendChild(link('Section 3', 'sec3')); +const sec1 = document.querySelector('#sec1'); +const sec2 = document.querySelector('#sec2') +const sec3 = document.querySelector('#sec3') // Add class 'active' to section when near top of viewport - +// function scroll() { +// document.addEventListener('scroll', function() { +// scrollY(two, one) +// scrollY(three, two) +// }) +// } // Scroll to anchor ID using scrollTO event - /** * End Main Functions * Begin Events * -*/ + */ // Build menu // Scroll to section on link click - -// Set sections as active - - +const mlink = function(sec, num) { + sec.addEventListener('click', function() { + window.scrollTo({ + // top: num.getBoundingClientRect().top, + top: num.offsetTop, + behavior: 'smooth' + }) + }) +} + +mlink(sec1, one) +mlink(sec2, two) +mlink(sec3, three) + // Set sections as active +scroll() \ No newline at end of file From 4263a58743a3ac736823c4eae72eba82d3c73dde Mon Sep 17 00:00:00 2001 From: Brightlaz Date: Fri, 15 Apr 2022 13:13:26 -0700 Subject: [PATCH 02/18] Updated the app.js in the landing page I converted the landing page project from a static project to an interactive one. --- projects/landing-page/README.md | 32 +++++++++-- projects/landing-page/index.html | 11 ++++ projects/landing-page/js/app.js | 94 ++++++++++++++++++-------------- 3 files changed, 90 insertions(+), 47 deletions(-) diff --git a/projects/landing-page/README.md b/projects/landing-page/README.md index 3282de7b9..9d4bb4bd7 100755 --- a/projects/landing-page/README.md +++ b/projects/landing-page/README.md @@ -1,13 +1,35 @@ # Landing Page Project +A landing page project that involes using the `js/app.js` file to covert the static version of the landing page project to a more interactive one. + ## Table of Contents -* [Instructions](#instructions) +* [Description](#Description) +* [Process](#Process) +* [Dependencies](#Dependencies) + +## Description + +The starter project has some HTML and CSS styling to display a static version of the Landing Page project. I converted this project from a static project to an interactive one. It required modifying the HTML and CSS files, but primarily the JavaScript file. + +To get started, open `js/app.js` and view the app's functionality + +For specific, detailed instructions linking to this project, look at the project instructions in the Udacity Classroom. + +## Process + +Firstly, I linked the `js/app.js` to the `index.html`. + +I created a **fourth** content section in the `index.html`. + +I created the helper functions to create the **list** for the nav-bar, then I created the **active class** scroll for the section and lastly for the helper function I created the **scrollTo** function for when you click a link. + +Then I worked on the main functions. I used the main functions to basically call the helper functions that work the same. -## Instructions +Finally, I begin events by calling the main functions. -The starter project has some HTML and CSS styling to display a static version of the Landing Page project. You'll need to convert this project from a static project to an interactive one. This will require modifying the HTML and CSS files, but primarily the JavaScript file. +In summary, I built the menu bar, created a **scrollTo** link to the **sections** and lastly I created an **active class** scroll function. -To get started, open `js/app.js` and start building out the app's functionality +## Dependencies +I used a starter-code from *[refresh-2019](https://github.com/udacity/fend/tree/refresh-2019/projects/landing-page)* -For specific, detailed instructions, look at the project instructions in the Udacity Classroom. diff --git a/projects/landing-page/index.html b/projects/landing-page/index.html index ca49138aa..c7026824d 100755 --- a/projects/landing-page/index.html +++ b/projects/landing-page/index.html @@ -62,6 +62,17 @@

Section 3

porttitor tortor, eget elementum tortor mollis non.

+
+
+

Section 4

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum metus faucibus lectus pharetra dapibus. Suspendisse potenti. Aenean aliquam elementum mi, ac euismod augue. Donec eget lacinia ex. Phasellus imperdiet porta orci + eget mollis. Sed convallis sollicitudin mauris ac tincidunt. Donec bibendum, nulla eget bibendum consectetur, sem nisi aliquam leo, ut pulvinar quam nunc eu augue. Pellentesque maximus imperdiet elit a pharetra. Duis lectus mi, aliquam + in mi quis, aliquam porttitor lacus. Morbi a tincidunt felis. Sed leo nunc, pharetra et elementum non, faucibus vitae elit. Integer nec libero venenatis libero ultricies molestie semper in tellus. Sed congue et odio sed euismod.

+ +

Aliquam a convallis justo. Vivamus venenatis, erat eget pulvinar gravida, ipsum lacus aliquet velit, vel luctus diam ipsum a diam. Cras eu tincidunt arcu, vitae rhoncus purus. Vestibulum fermentum consectetur porttitor. Suspendisse imperdiet + porttitor tortor, eget elementum tortor mollis non.

+
+