From f2bf325cd3539dea7e30d594a484bb500d4d58dc Mon Sep 17 00:00:00 2001 From: Vankum100 Date: Sat, 24 Oct 2020 11:50:00 +0300 Subject: [PATCH] completed functions and scope module --- css/main.css | 241 ++++++++++++++++++++++++++++++++++++++++++++++ fundamentals.js | 93 ++++++++++++++++++ index.html | 208 +++++++++++++++++++++++++++++++++++++-- package-lock.json | 2 +- script.js | 21 ++++ utils.js | 7 ++ 6 files changed, 561 insertions(+), 11 deletions(-) create mode 100644 css/main.css create mode 100644 fundamentals.js create mode 100644 utils.js diff --git a/css/main.css b/css/main.css new file mode 100644 index 0000000..b1cdd69 --- /dev/null +++ b/css/main.css @@ -0,0 +1,241 @@ +/* HEADER */ +.header-nav--nav {border: 0; border-bottom: 1px solid #a0a0a0; margin-bottom: 0;} + +.header-nav--nav .header-nav--main ul {margin: 10px 0 10px;} +.header-nav--nav .header-nav--main ul li.nav-item {font-size: 14px; text-transform: uppercase; font-weight: 700; letter-spacing: 0.2px; padding-bottom: 10px;} +.header-nav--nav .header-nav--main ul li.nav-item:after {content: ""; display: inline-block; width: 15px;} +.header-nav--nav .header-nav--main ul li.nav-item:last-child:after {width: 0;} +.header-nav--nav .header-nav--main ul li.nav-item a {padding: 0;} + +.header-nav--nav .header-nav--main .form-inline input.form-control {width: 330px; height: 30px; margin: 0; box-shadow: none;} +.header-nav--nav .header-nav--main .form-inline .btn-default {background: #a0a0a0; position: relative; border: 0; border-radius: 0; font-weight: 300; width: 100px; height: 30px; min-width: auto; top: 0; left: -3px;} + +.header-nav--nav .navbar-brand {padding: 0; width: 100%;} +.header-nav--nav .navbar-brand a {display: block; width: 170px;} + +.header-nav--nav .navbar-collapse {padding-right: 0;} + +.header-nav--nav .header-nav--utilities {margin-bottom: 15px;} +.header-nav--nav .header-nav--utilities .account {text-align: left; font-size: 14px;} +.header-nav--nav .header-nav--utilities .account a {font-size: 14px;} +.header-nav--nav .header-nav--utilities .image {width: 60px; height: 60px; margin-right: 15px;} +.header-nav--nav .header-nav--utilities .image img {border-radius: 100px;} + +.header-nav--search {background: #a0a0a0; padding: 5px 20px;} +.header-nav--search input.form-control {margin-bottom: 0; width: 100%;} + +@media only screen and (min-width: 768px) { + .header-nav--nav .navbar-collapse.collapse {flex: 1; display: flex !important;} + .header-nav--nav .navbar-brand {padding: 0; width: auto; margin-right: 0;} + .header-nav--nav .navbar-brand a {display: block; width: 120px;} + .header-nav--nav .header-nav--main ul {margin-bottom: 0;} + .header-nav--nav .header-nav--main ul li.nav-item {font-size: 13px; padding-bottom: 0;} + .header-nav--nav .header-nav--main ul li.nav-item:after {width: 8px;} + .header-nav--nav .header-nav--utilities {margin-left: auto; margin-bottom: 0;} + .header-nav--nav .header-nav--utilities .account {font-size: 14px; text-align: right;} + .header-nav--nav .header-nav--utilities .image {margin-left: 15px;} +} + +@media only screen and (min-width: 992px) { + .header-nav--nav .header-nav--main ul li.nav-item {font-size: 16px;} + .header-nav--nav .navbar-brand {margin-right: 40px;} + .header-nav--nav .navbar-brand a {display: block; width: 170px;} + .header-nav--nav .header-nav--main ul li.nav-item:after {width: 15px;} + .header-nav--nav .header-nav--utilities .account {font-size: 18px;} +} + +/* HERO */ +.crf-hero {background-image: url('https://www.pluralsight.com/content/dam/pluralsight2/teach/author-tools/carved-rock-fitness/hero_bkgd_v1.jpg'); background-repeat: no-repeat; height: 400px; background-size: cover; background-position: center center; text-align: center;} +.crf-hero h1, .crf-hero h2 {font-size: 63px; font-weight: 700; margin: 0; flex: inherit; line-height: 0.9;} +.crf-hero h1 {left: -30px;} +.crf-hero h2 {color: #faa541;} +.crf-hero p.lead {letter-spacing: 2px; font-weight: 700;} + +@media only screen and (min-width: 1200px) { + .crf-hero .container {max-width: 1170px;} +} +@media only screen and (max-width: 768px) { + .crf-hero {margin-bottom: 0; padding-bottom: 0; background-position: 70% 0; background-size: 180%;} + .crf-hero .container {margin-top: auto; background-color: #faa541; padding: 15px;} + .crf-hero h1 {left: 0;} + .crf-hero h2 , .crf-hero p.lead {color: white;} + .crf-hero p.lead {margin-top: 5px; margin-bottom: 0;} +} +@media only screen and (max-width: 480px) { + .crf-hero h1, .crf-hero h2 {font-size: 55px;} +} + +/* CIGAR BANNER */ +.crf-cigar-banner {margin-top: 55px; margin-bottom: 55px;} +.crf-cigar-banner--container {width: 100%; border-top: 1px solid #a0a0a0; border-bottom: 1px solid #a0a0a0; padding: 25px 0; margin-left: 15px; margin-right: 15px; text-align: center; position: relative; overflow: hidden;} +.crf-cigar-banner--container img {width: 250px;} +.crf-cigar-banner--text > div {font-size: 30px; font-weight: 700; text-transform: uppercase; line-height: 1;} +.crf-cigar-banner--text > div:last-child {font-size: 16px; font-weight: 400; margin-top: 5px;} + +@media only screen and (max-width: 1024px) { + .crf-cigar-banner--text > div {font-size: 24px;} + .crf-cigar-banner--container img {width: 220px;} +} +@media only screen and (max-width: 768px) { + .crf-cigar-banner {margin-top: 0;} + .crf-cigar-banner--container {flex-wrap: wrap; margin-left: 0; margin-right: 0; border-bottom-color: transparent;} + .crf-cigar-banner--text > div:last-child {margin-top: 15px;} + .crf-cigar-banner--container img:nth-of-type(1) {left:0; top: 0;} + .crf-cigar-banner--container img:nth-of-type(2) {top: 0; right: 0;} + .crf-cigar-banner--container img {width: 350px; position: absolute; mix-blend-mode: multiply;} + .crf-cigar-banner--text {flex: 0 0 100%; margin-top: 250px;} +} +@media only screen and (max-width: 640px) { + .crf-cigar-banner--container img:nth-of-type(1) {left: -15%;} + .crf-cigar-banner--container img:nth-of-type(2) {right: -15%;} +} +@media only screen and (max-width: 480px) { + .order-sm-0 {order: 0;} + .order-sm-1 {order: 1;} + .order-sm-2 {order: 2;} + .crf-cigar-banner--container img {width: 270px;} + .crf-cigar-banner--text {margin-top: 180px;} +} + +/* STORIES */ +.crf-story a > div {color: #364147;} +.crf-story .crf-story--text {padding: 30px 0; text-transform: uppercase; text-align: center;} +.crf-story .crf-story--text > div {font-size: 16px; font-weight: 200; color: #faa541;} +.crf-story .crf-story--text h3 {font-size: 30px; font-weight: 700; line-height: 1; margin: 0;} +.crf-story .crf-story--image img {width: 100%;} + +@media only screen and (max-width: 991px) { + .crf-story .crf-story--image {height: 180px; overflow: hidden; position: relative;} + .crf-story .crf-story--image img {position: relative; top: 50%; transform: translateY(-50%);} +} + +/* FULL BANNER */ +.crf-full-banner {margin-top: 50px; margin-bottom: 50px;} +.crf-full-banner .row {position: relative;} +.crf-full-banner .row:before {content: ""; position: absolute; border: 1px solid white; display: block; top: 30px; bottom: 30px; left: 50px; right: 50px; z-index: 1;} +.crf-full-banner .crf-full-banner--image { + flex: 0 0 58.333333%; + background-image: url('https://www.pluralsight.com/content/dam/pluralsight2/teach/author-tools/carved-rock-fitness/img-vistas.jpg'); + background-repeat: no-repeat; + background-size: cover; + background-position: top center; + min-height: 400px; +} +.crf-full-banner .crf-full-banner--text {flex: 0 0 41.666667%; background: #364147; text-transform: uppercase; padding: 30px; position: relative;} +.crf-full-banner .crf-full-banner--text h4 {font-size: 40px; font-weight: 700; color: #637f94; font-style: italic; line-height: 1; margin: 0;} +.crf-full-banner .crf-full-banner--text h4:after {content: ""; width: 100px; height: 1px; background: #faa541; margin: 20px auto; display: block;} +.crf-full-banner .crf-full-banner--text > div {color: white;} +.crf-full-banner .crf-full-banner--text > div:nth-of-type(1) {font-size: 60px; font-weight: 700; line-height: 1;} +.crf-full-banner .crf-full-banner--text > div:nth-of-type(2) {font-size: 25px; font-weight: 200; letter-spacing: 3px;} +.crf-full-banner .crf-full-banner--text .btn.btn-default {text-transform: none; margin-top: 50px; text-transform: uppercase; letter-spacing: 1px; z-index: 1;} + +@media only screen and (max-width: 991px) { + .crf-full-banner .col {position: relative; flex-direction: column;} + .crf-full-banner .crf-full-banner--text {padding: 30px 30px 50px;} + .crf-full-banner .crf-full-banner--text h4 {display: none;} + .crf-full-banner .crf-full-banner--text .btn.btn-default {margin-top: 20px;} + .crf-full-banner .crf-full-banner--image {min-height: 300px;} + .crf-full-banner .crf-full-banner--image h4 {font-size: 40px; font-weight: 700; color: #637f94; font-style: italic; line-height: 1; margin: 0; text-align: center; top: 50px; position: relative; text-transform: uppercase;} +} +@media only screen and (max-width: 768px) { + .crf-full-banner .col {padding-left: 0; padding-right: 0;} + .crf-full-banner .row:before {left: 30px; right: 30px;} +} + +/* FOOTER */ +footer {background: black; position: relative; z-index: 0; min-height: 330px;} +footer:after {content: ""; background: #a0a0a0; width: 75%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1;} + +footer .crf-footer--category {flex: 0 0 75%; padding: 40px 15px;} +footer .crf-footer--header {text-transform: uppercase; font-weight: 700; font-size: 16px; margin-bottom: 15px;} + +footer .crf-footer--links a {color: white; text-transform: uppercase; font-size: 12px; display: block; padding: 0 0 4px;} +footer .crf-footer--links a:hover {text-decoration: underline;} +footer .crf-footer--links.active .crf-footer--header {margin-bottom: 15px;} +footer .crf-footer--links.active ul {display: block;} + +footer .crf-footer--newsletter .crf-footer--header {font-size: 12px; font-weight: 400; margin-bottom: 5px;} +footer .crf-footer--newsletter .crf-footer--subheader {font-style: italic; font-size: 12px; font-weight: 400; margin-bottom: 15px;} +footer .crf-footer--newsletter input {border: 1px solid #364147; width: 200px; margin-bottom: 10px;} +footer .crf-footer--newsletter button {width: 150px; min-width: auto; text-transform: uppercase; letter-spacing: 1px;} + +footer .crf-footer-m--social {order: 4; position: relative;} +footer .crf-footer--social ul li, footer .crf-footer-m--social ul li {display: inline-block;} +footer .crf-footer--social ul li a, footer .crf-footer-m--social ul li a {display: block; width: 23px; height: 23px; background-size: 23px 23px; background-position: center;} +footer .crf-footer--social .twitter, footer .crf-footer-m--social .twitter {background-image: url('https://www.pluralsight.com/content/dam/pluralsight2/teach/author-tools/carved-rock-fitness/social_icons/Twitter_Icon.svg');} +footer .crf-footer--social .facebook, footer .crf-footer-m--social .facebook {background-image: url('https://www.pluralsight.com/content/dam/pluralsight2/teach/author-tools/carved-rock-fitness/social_icons/Facebook_Icon.svg');} +footer .crf-footer--social .instagram, footer .crf-footer-m--social .instagram {background-image: url('https://www.pluralsight.com/content/dam/pluralsight2/teach/author-tools/carved-rock-fitness/social_icons/Instagram_Icon.svg');} +footer .crf-footer--social .pinterest, footer .crf-footer-m--social .pinterest {background-image: url('https://www.pluralsight.com/content/dam/pluralsight2/teach/author-tools/carved-rock-fitness/social_icons/Pinterest_Icon.svg');} +footer .crf-footer--social .googleplus, footer .crf-footer-m--social .googleplus {background-image: url('https://www.pluralsight.com/content/dam/pluralsight2/teach/author-tools/carved-rock-fitness/social_icons/GooglePlus_Icon.svg');} + +footer .crf-footer--logo {color: #e5e5e5; font-size: 16px; flex: 0 0 25%;} +footer .crf-footer--logo img {max-width: 230px;} +footer .crf-footer--logo .container {padding: 40px 0;} +footer .crf-footer--logo .container > div {padding: 0 30px;} +footer .crf-footer--logo .container > div:before {content: ""; display: block; width: 100%; height: 1px; margin: 30px 0; background: linear-gradient(to right,#f05a28 0,#e80a89 100%);} +footer .crf-footer--copyright {text-align: center; font-size: 12px; flex: 0 0 75%; padding: 10px 0;} + +@media only screen and (min-width: 992px) { + footer {flex-wrap: wrap;} +} +@media only screen and (max-width: 991px) and (min-width: 320px) { + footer {flex-direction: column; background: transparent;} + footer:after {width: 100%; background: transparent;} + + footer .crf-footer--category {background: #a0a0a0; padding-bottom: 0;} + footer .crf-footer--logo {background: black; margin: 50px 20px;} + + footer .crf-footer--links:after {content: ""; display: block; height: 2px; background: white; margin: 10px -15px 10px;} + footer .crf-footer--links:nth-of-type(1) {order: 1;} + footer .crf-footer--links:nth-of-type(2) {order: 2;} + footer .crf-footer--links:nth-of-type(3) {order: 3;} + footer .crf-footer--links ul {display: none;} + + footer .crf-footer--header {margin-bottom: 10px; cursor: pointer; position: relative;} + footer .crf-footer--header:after { + content: "+"; + display: block; + font-weight: 200; + font-size: 30px; + line-height: 1; + color: white; + width: 30px; + height: 30px; + text-align: center; + position: absolute; + top: 50%; + right: 0; + transform: translateY(-50%); + border: 1px solid white; + border-radius: 100px; + } + + footer .crf-footer--links.active .crf-footer--header:after {content: "";} + footer .crf-footer--links.active .crf-footer--header:before {content: ""; width: 15px; height: 2px; background: white; transform: translate(-50%); position: absolute; top: 50%; right: 0;} + + footer .crf-footer--newsletter .crf-footer--header {cursor: default;} + footer .crf-footer--newsletter .crf-footer--header:before, + footer .crf-footer--newsletter .crf-footer--header:after, + footer .crf-footer-m--social .crf-footer--header:before, + footer .crf-footer-m--social .crf-footer--header:after {display: none;} + + footer .crf-footer-m--social .crf-footer--header {cursor: default;} + footer .crf-footer-m--social ul {display: block; position: absolute; top: 0; right: 0;} + footer .crf-footer-m--social:after {display: none;} + + footer .crf-footer--social {order: 0; padding-bottom: 10px;} + footer .crf-footer--social:after {content: ""; display: block; height: 15px; background: white; margin: 40px -15px 0;} + + footer .crf-footer--logo .container {padding: 40px 10px;} +} +@media only screen and (max-width: 768px) { + footer .crf-footer--category .row {flex-direction: column;} +} + +/* MOBILE VIEW ORDER */ +@media only screen and (max-width: 768px) { + .crf {display: flex; flex-direction: column;} + .crf-story {order: 6; margin-bottom: 50px;} + .crf-full-banner {order: 5; margin-top: 0;} + footer {order: 7;} +} \ No newline at end of file diff --git a/fundamentals.js b/fundamentals.js new file mode 100644 index 0000000..b424bfb --- /dev/null +++ b/fundamentals.js @@ -0,0 +1,93 @@ + +/* ----------------FUNCTIONS AND SCOPE --------------------*/ + +// Bock Scope for let keyword + +let message = 'Outside the scope block'; + +if(5 === 5){ + let message = 'Inside block scope'; + //console.log(message); +} +//console.log(message); + +// No scope for Var keyword + +var messaging = 'declared outside'; +if(5 === 5){ + var messaging = 'declared inside'; + //console.log(messaging); +} +//console.log(messaging); + +// IIFE - invoked immediately invoked upon declaration + +(function(){ + // console.log('in function'); +})(); + +// Closures with IIFEs +// closures make sure that data is persistent + +let app = (function(){ + let carId = 123; + let getId = function(){ + return carId; + }; + + return { + getId: getId + }; +})(); + +//console.log(app.getId()); + +// THIS keyword is the context object for a function +// we can use the CALL fucntion to change the context of an object + +let o = { + carId: 123, + getId: function(){ + return this.carId; + }, + getIdByApply: function(prefix){ + return prefix + this.carId; + } +}; + +let newCar = {carId: 456}; + +// call accepts the object +//console.log(o.getId.call(newCar)); // 456 + +// apply allows us to pass parameters +//console.log(o.getIdByApply.apply(newCar, ['ID: '])); + +// bind makes a copy of an object and give it a new context +let newFn = o.getId.bind(newCar); +//console.log( newFn() ); + +// Arrow Functions +// they dont have their own context - menaing no 'this' + +let getId = (prefix, suffix) => { + + return prefix + 123 + suffix ; +}; + +//console.log(getId('ID: ', '!')); + +// DEfault Parameters -- they must be on the right side of the +// of the function parameters list + +let trackCar = function(carId, city = 'New York'){ + console.log(`Trackiing ${carId} in ${city}.`); +}; + +//console.log(trackCar(123)); + +//console.log(trackCar(123,'Chicago')); + + +/* ----------------OBJECTS AND ARRAYS --------------------*/ + diff --git a/index.html b/index.html index 43d88d1..15ec609 100644 --- a/index.html +++ b/index.html @@ -1,18 +1,206 @@ - - - - - JS Starter - - + + Carved Rock Fitness + + + + + + + + + + -

Hello World!

+
+ + - - + +
+
+ +
+
+ +
+
+

GET A GRIP

+

20% OFF

+

THROUGHOUT THE SEASON

+
+
+ + +
+
+
Brown Boots +
+
Couples retreat weekend
+
Save an extra 20%
+
when you buy 2 pairs of boots
+
Grey Boots
+
+
+ + +
+
+
+
Splash Chic
+
+

Splash Chic

+
Women's Wet Gear
+
+
+
+
Kid Klimbers
+
+

Kid Klimbers

+
Children's Gear
+
+
+
+
Pack It In
+
+

Pack It In

+
Camping Gear
+
+
+
+
Nature's AC
+
+

Nature's AC

+
Men's Shorts
+
+
+
+
+ + +
+
+
+
+

Trail Review

+
+
+

Trail Review

+
Asphalt
+
National Park
+ See Review +
+
+
+
+ + + +
+ + + \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index a733cbe..8712e44 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,5 +1,5 @@ { - "name": "js-starter", + "name": "js-starter-code", "version": "1.0.0", "lockfileVersion": 1, "requires": true, diff --git a/script.js b/script.js index e69de29..ffe0a6a 100644 --- a/script.js +++ b/script.js @@ -0,0 +1,21 @@ + +let person ={ + name: 'John', + lastName: 'Doe', + age: 32, + partTime: false, + showLastName: function(){ + //showMessage(this.lastName); + return this.lastName; + } + +}; + +let myFunction = function (message, firstName) { + + + return message + ' '+ firstName; +} + +showMessage(myFunction('Hello', 'John') + ' '+ person.showLastName()); +changePercentOff('50% OFF'); \ No newline at end of file diff --git a/utils.js b/utils.js new file mode 100644 index 0000000..3195272 --- /dev/null +++ b/utils.js @@ -0,0 +1,7 @@ +function showMessage(message){ + document.getElementById('message').textContent = message; +} + +function changePercentOff(percentage){ + document.getElementById('percent-off').textContent = percentage; +}