Update CSS Variables with JS

Date: Mon, 19 Dec 2016 20:01:29 -0500 Subject: [PATCH 4/7] completed day 4 --- 04 - Array Cardio Day 1/index-WORKED.html | 89 +++++++++++++++++++++++ 1 file changed, 89 insertions(+) create mode 100644 04 - Array Cardio Day 1/index-WORKED.html diff --git a/04 - Array Cardio Day 1/index-WORKED.html b/04 - Array Cardio Day 1/index-WORKED.html new file mode 100644 index 0000000000..4ba857d89c --- /dev/null +++ b/04 - Array Cardio Day 1/index-WORKED.html @@ -0,0 +1,89 @@ + + + + + Array Cardio 💪 + + + + + From 9479a85825fca86cce35203a46f978dafe5659bb Mon Sep 17 00:00:00 2001 From: PirieD704 Date: Thu, 22 Dec 2016 11:41:28 -0500 Subject: [PATCH 5/7] finished day 5 with readme --- 05 - Flex Panel Gallery/index-WORKED.html | 149 ++++++++++++++++++++++ 05 - Flex Panel Gallery/readMe.md | 42 ++++++ 2 files changed, 191 insertions(+) create mode 100644 05 - Flex Panel Gallery/index-WORKED.html create mode 100644 05 - Flex Panel Gallery/readMe.md diff --git a/05 - Flex Panel Gallery/index-WORKED.html b/05 - Flex Panel Gallery/index-WORKED.html new file mode 100644 index 0000000000..c129850d96 --- /dev/null +++ b/05 - Flex Panel Gallery/index-WORKED.html @@ -0,0 +1,149 @@ + + + + + Flex Panels 💪 + + + + + + +

Hey

Let's

Dance

Give

Take

Receive

Experience

Today

Give

All

You can

Life

Motion

+ + + + + + + diff --git a/05 - Flex Panel Gallery/readMe.md b/05 - Flex Panel Gallery/readMe.md new file mode 100644 index 0000000000..1780d76280 --- /dev/null +++ b/05 - Flex Panel Gallery/readMe.md @@ -0,0 +1,42 @@ +Flex panel gallery: + +* worked with Flex Box: + new terms: + justify-content: + align-items: + flex: 1 (makes all flex boxes share equal amount of space) + display: flex (applies the flexbox display) + + nested flex boxes to achieve layout design (three layers of nesting i believe) + + +```css + .panel > *:first-child {transform: translateY(-100%);} + .panel.open-active > *:first-child {transform: translateY(0);} + .panel > *:last-child {transform: translateY(100%);} + .panel.open-active > *:last-child {transform: translateY(0);} +``` +This code creates the transition effect for the upper and lower text. The translate holds the text off of the screen and when open-active is applied, it cancels the translate (essentially). Note the child identification + + +```javascript + const panels = document.querySelectorAll('.panel'); + + function toggleOpen() { + this.classList.toggle('open'); + } + + function toggleActive(e) { + console.log(e.propertyName); + if(e.propertyName.includes('flex')) { + this.classList.toggle('open-active') + }sd + } + + panels.forEach(panel => panel.addEventListener('click', toggleOpen)); + panels.forEach(panel => panel.addEventListener('transitionend', toggleActive)); +``` +This is all the javascript needed to complete this. Here, again we use querySelectorAll to target all things with .panel class. Toggle open handles the first effect of resizing the panel and growing the text. This is put into effect by the first eventListener. THe second eventListener listens for the end of the transition. We specifically listen for the end of any propertyName that includes 'flex' in it. upon completion, we fire the toggleActive function which applies our second class of open-active (the thing that removes the translateY on the upper and lower text). + + +There is a lot of transition and translate to this as well, but overall a cool implementation of flex box. From 5b580324025766ad77c764c3f808cfefa4b18a23 Mon Sep 17 00:00:00 2001 From: PirieD704 Date: Thu, 22 Dec 2016 13:05:23 -0500 Subject: [PATCH 6/7] completed day six with readme --- 05 - Flex Panel Gallery/index-WORKED.html | 2 +- 06 - Type Ahead/index-WORKED.html | 60 +++++++++++++++++++++++ 06 - Type Ahead/readMe.md | 49 ++++++++++++++++++ 3 files changed, 110 insertions(+), 1 deletion(-) create mode 100644 06 - Type Ahead/index-WORKED.html create mode 100644 06 - Type Ahead/readMe.md diff --git a/05 - Flex Panel Gallery/index-WORKED.html b/05 - Flex Panel Gallery/index-WORKED.html index c129850d96..eb8c3b83c1 100644 --- a/05 - Flex Panel Gallery/index-WORKED.html +++ b/05 - Flex Panel Gallery/index-WORKED.html @@ -135,7 +135,7 @@ console.log(e.propertyName); if(e.propertyName.includes('flex')) { this.classList.toggle('open-active') - } + }sd } panels.forEach(panel => panel.addEventListener('click', toggleOpen)); diff --git a/06 - Type Ahead/index-WORKED.html b/06 - Type Ahead/index-WORKED.html new file mode 100644 index 0000000000..e960bbc2e4 --- /dev/null +++ b/06 - Type Ahead/index-WORKED.html @@ -0,0 +1,60 @@ + + + + + Type Ahead 👀 + + + + + + + + diff --git a/06 - Type Ahead/readMe.md b/06 - Type Ahead/readMe.md new file mode 100644 index 0000000000..1054ecc8fe --- /dev/null +++ b/06 - Type Ahead/readMe.md @@ -0,0 +1,49 @@ +Type Ahead: + +Goal is to pull in a large block of JSON and make it so that as you type characters into the input box, it readjusts and displays a list of matches for cities and states plus the population. + +```javascript +const cities = []; + +fetch(endpoint).then(blob => blob.json()).then(data => cities.push(...data)); + +``` +we use fetch() to make the AJAX request (similar to JQuery's JSON.get). Fetch returns a promise which requires us to make a .then call. the object return has a property inherent to it named 'json' which allows for us to call it (this also uses a promise) and return an actual array. we want to put this into const variable array so we use .push method and apply "..." which is called 'spread'. This keeps us from having nested array inside our declared array. Now each object is pushed onto cities. + +```javascript +function findMatches(wordToMatch, cities){ + return cities.filter(place => { + const regex = new RegExp(wordToMatch, 'gi'); + return place.city.match(regex) || place.state.match(regex) + }); +} +``` +we create a function findMatches that takes to arguments: one is whatever we are filtering against the array and two is the array we are filtering (cities). We use the .filter method and we create a new RegExp where we pass it the wordToMatch argument and define the regex parametere 'g' for global and 'i' for insensitive(or case insensitive). We filter this regex against the city and state properties of each place in cities using the .match method. + +```javascript +const searchInput = document.querySelector('.search'); +const suggestions = document.querySelector('.suggestions'); + +searchInput.addEventListener('change', displayMatches); +searchInput.addEventListener('keyup', displayMatches); +``` +we use query selectors to watch the input box for changes and the ul with the suggestions class to populate the results. Our eventListener for change watches when we click off of the input box and keyup watches for each key we let up on so we can have a seemless update of matches. + +```javascript +function displayMatches() { + const matchArray = findMatches(this.value, cities); + const html = matchArray.map(place => { + const regex = new RegExp(this.value, 'gi'); + const cityName = place.city.replace(regex, `${this.value}`) + const stateName = place.state.replace(regex, `${this.value}`) + return ` +

+ ${cityName}, ${stateName} + ${numberWithCommas(place.population)} +

+ `; + }).join(''); + suggestions.innerHTML = html; +} +``` +displayMatches handles most of the functionality. \ No newline at end of file From a62cec40d2896b72c983eb1a7c04b6cbb3ab761d Mon Sep 17 00:00:00 2001 From: PirieD704 Date: Wed, 18 Jan 2017 15:10:25 -0500 Subject: [PATCH 7/7] through day12 --- 07 - Array Cardio Day 2/index-WORKED.html | 69 ++++++++ 08 - Fun with HTML5 Canvas/index-WORKED.html | 68 ++++++++ 08 - Fun with HTML5 Canvas/readMe.md | 2 + 09 - Dev Tools Domination/index-WORKED.html | 46 ++++++ 09 - Dev Tools Domination/readMe.md | 31 ++++ .../index-WORKED.html | 151 ++++++++++++++++++ .../readMe.md | 36 +++++ 11 - Custom Video Player/scripts.js | 57 +++++++ 12 - Key Sequence Detection/index-WORKED.html | 25 +++ 12 - Key Sequence Detection/readMe.md | 11 ++ 13 - Slide in on Scroll/index-WORKED.html | 140 ++++++++++++++++ 11 files changed, 636 insertions(+) create mode 100644 07 - Array Cardio Day 2/index-WORKED.html create mode 100644 08 - Fun with HTML5 Canvas/index-WORKED.html create mode 100644 08 - Fun with HTML5 Canvas/readMe.md create mode 100644 09 - Dev Tools Domination/index-WORKED.html create mode 100644 09 - Dev Tools Domination/readMe.md create mode 100644 10 - Hold Shift and Check Checkboxes/index-WORKED.html create mode 100644 10 - Hold Shift and Check Checkboxes/readMe.md create mode 100644 12 - Key Sequence Detection/index-WORKED.html create mode 100644 12 - Key Sequence Detection/readMe.md create mode 100644 13 - Slide in on Scroll/index-WORKED.html diff --git a/07 - Array Cardio Day 2/index-WORKED.html b/07 - Array Cardio Day 2/index-WORKED.html new file mode 100644 index 0000000000..c9ac846eb2 --- /dev/null +++ b/07 - Array Cardio Day 2/index-WORKED.html @@ -0,0 +1,69 @@ + + + + + Document + + + + + diff --git a/08 - Fun with HTML5 Canvas/index-WORKED.html b/08 - Fun with HTML5 Canvas/index-WORKED.html new file mode 100644 index 0000000000..4eb0835b31 --- /dev/null +++ b/08 - Fun with HTML5 Canvas/index-WORKED.html @@ -0,0 +1,68 @@ + + + + + HTML5 Canvas + + +

+ + + + + + diff --git a/08 - Fun with HTML5 Canvas/readMe.md b/08 - Fun with HTML5 Canvas/readMe.md new file mode 100644 index 0000000000..3216c9b304 --- /dev/null +++ b/08 - Fun with HTML5 Canvas/readMe.md @@ -0,0 +1,2 @@ +cool tricks with canvas: + diff --git a/09 - Dev Tools Domination/index-WORKED.html b/09 - Dev Tools Domination/index-WORKED.html new file mode 100644 index 0000000000..196fffd719 --- /dev/null +++ b/09 - Dev Tools Domination/index-WORKED.html @@ -0,0 +1,46 @@ + + + + + Console Tricks! + + + +

×BREAK×DOWN×

+ + + + diff --git a/09 - Dev Tools Domination/readMe.md b/09 - Dev Tools Domination/readMe.md new file mode 100644 index 0000000000..ae5b04a15f --- /dev/null +++ b/09 - Dev Tools Domination/readMe.md @@ -0,0 +1,31 @@ + +Interpolated: +in a console.log(), you can pass as second string or whatever and have it inserted into the first string with the identifying piece %s. This was much like the query strings in SQL. + +Styling: +You can style console.log by using the %c. include it in the qoutations at the beginning. then pass it some regular css in qoutations the same way you would a second argument in a method. + + +Warning: +shows up in red with a little X when you console.warn() + +Info: +puts a little i for info in console.info() + +Testing: +console.assert() takes two parameters, the first being a boolean check, if true, then nothing happens, if false, then the assertion is console.logged and the second parameter message is logged. + +clear: +console.clear() will clear the console. Not smart to put at the bottom of the JS file. + +viewing DOM elements: +you can console.log or console.dir DOM elements that are stored in JS variables. console.dir is a way to look at all the properties and methods that live in a given element. + +Grouping: +when you want to console.log a bunch of stuff for items in something like an Array, you run console.log in your loop. by doing console.groupName and passing the identifying name for each item, you create a bold header in the console. This requires a console.groupEnd() a the completion that is passed the same identifying name the first console.group was. You can also do console.groupCollapsed so that the tabs start out collapsed. + +Count: +just logs in real time how many of whatever string you have iterated over. + +timing: +helps to have quick visual for how long something is taking. You run console.time() and pass a string to defining whatever you are timing. Then run whatever task you need that takes time. You then run console.timeEnd() and pass it the same string you used to define it in the first console.time() and it will log the appropriately in the console. \ No newline at end of file diff --git a/10 - Hold Shift and Check Checkboxes/index-WORKED.html b/10 - Hold Shift and Check Checkboxes/index-WORKED.html new file mode 100644 index 0000000000..983fa064cb --- /dev/null +++ b/10 - Hold Shift and Check Checkboxes/index-WORKED.html @@ -0,0 +1,151 @@ + + + + + Document + + + + +

+ +

This is an inbox layout.

+ +

Check one item

+ +

Hold down your Shift key

+ +

Check a lower item

+ +

Everything inbetween should also be set to checked

+ +

Try do it with out any libraries

+ +

Just regular JavaScript

+ +

Good Luck!

+ +

Don't forget to tweet your result!

+ + + + + + + + + + + + + + + + + + + + + + diff --git a/10 - Hold Shift and Check Checkboxes/readMe.md b/10 - Hold Shift and Check Checkboxes/readMe.md new file mode 100644 index 0000000000..e375ada247 --- /dev/null +++ b/10 - Hold Shift and Check Checkboxes/readMe.md @@ -0,0 +1,36 @@ +###Objective: +we are looking to create list feature where we check a list and using the shift key, we can select everything in between another checkbox. + +We start by selecting the checkboxes and storing it in a variable. +```javascript +const checkboxes = document.querySelectorAll('.inbox input[type="checkbox"]') +``` +To note the identification method that is used here, we are looking at the parent div of the list by the className "inbox" and then specifying further by identifying the input element with the type "Checkbox". + +Next want to make a loop that attaches an EventListener to each checkbox. We use a click listener and that has a callback that use to call in our functionality: handleCheck. +```javascript +checkboxes.forEach(checkbox => checkbox.addEventListener("click" , handleCheck)); +``` +Now we look at our handCheck function: +```javascript +function handleCheck(e){ + let inBetween = false; + if (e.shiftKey && this.checked){ + checkboxes.forEach(checkbox => { + console.log(checkbox) + if (checkbox === this || checkbox === lastChecked){ + inBetween = !inBetween; + console.log("looking inbetween") + } + if(inBetween){ + checkbox.checked = true; + } + }); + } + + lastChecked = this; +} + +``` +We must pass it the event which allows us to see if the shiftkey was used during the click via a property of the event: e.shiftKey which is a boolean. We use an if statement to determine if they did use shift and if they were selecting/checking a box (and not unselecting a box). If so, we want to run a loop over the our nodeList "checkboxes" . +Now for this part we must define some variables to help us manipulate our checkboxes properly. We need a variable to keep track of the input last selected. We also need one to keep track of whether we are 'inbetween' the selected area. our lastChecked variable is global to retain our first selection. we set this at the end of our handlecheck function. Inside our loop, we check each checkbox. If we are on the current one we selected or the lastChecked one, we take our inBetween boolean and flip it from false to true (or true to false if its already selected). This accounts for going both ways, such as the first one selected is below the second selected on the list. This will still properly change the boolean To identify what is in between. Our final conditional checks the boxes if the inBetween boolean is set to true. \ No newline at end of file diff --git a/11 - Custom Video Player/scripts.js b/11 - Custom Video Player/scripts.js index e69de29bb2..cabcbf8eb6 100644 --- a/11 - Custom Video Player/scripts.js +++ b/11 - Custom Video Player/scripts.js @@ -0,0 +1,57 @@ +// get our elements +const player = document.querySelector('.player'); +const video = player.querySelector('.viewer'); +const progress = player.querySelector('.progress'); +const progressBar = player.querySelector('.progress__filled'); +const toggle = player.querySelector('.toggle'); +const skipButtons = player.querySelectorAll('[data-skip]'); +const ranges = player.querySelectorAll('.player__slider'); + +// Build out functions +// function togglePlay(){ +// if(video.paused){ +// video.play(); +// }else{ +// video.pause(); +// } +// } +// an alternative way to code it that looks cleaner using a ternary operator +function togglePlay() { + const method = video.paused ? 'play' : 'pause'; + video[method](); +} + +function updateButton() { + const icon = this.paused ? "►" : "❚ ❚"; + toggle.textContent = icon; +} + +function skipUpdate() { + video.currentTime += parseFloat(this.dataset.skip); +} + +function handleRangeUpdate() { + video[this.name] = this.value; +} + +function handleProgress() { + const percent = (video.currentTime / video.duration) * 100; + progressBar.style.flexBasis = `${percent}%`; +} + +function scrub(e) { + const scrubTime = (e.offsetX / video.offsetWidth) * video.duration; + video.currentTime = scrubTime; +} + +// Hook up our event listeners: +video.addEventListener("click", togglePlay); +// these are bound to the video and will check for the given property +video.addEventListener("play", updateButton); +video.addEventListener("pause", updateButton); +video.addEventListener("timeupdate", handleProgress); +toggle.addEventListener("click", togglePlay); +skipButtons.forEach(button => button.addEventListener("click", skipUpdate)); +ranges.forEach(range => range.addEventListener("change", handleRangeUpdate)); +ranges.forEach(range => range.addEventListener("mousemove", handleRangeUpdate)); +progress.addEventListener("click", scrub); \ No newline at end of file diff --git a/12 - Key Sequence Detection/index-WORKED.html b/12 - Key Sequence Detection/index-WORKED.html new file mode 100644 index 0000000000..beff0115d9 --- /dev/null +++ b/12 - Key Sequence Detection/index-WORKED.html @@ -0,0 +1,25 @@ + + + + + Key Detection + + + + + + diff --git a/12 - Key Sequence Detection/readMe.md b/12 - Key Sequence Detection/readMe.md new file mode 100644 index 0000000000..b6bff17842 --- /dev/null +++ b/12 - Key Sequence Detection/readMe.md @@ -0,0 +1,11 @@ +The purpose of this exercise is to detect when a certain sequence is typed while viewing a screen (just like a cheat code in a video game). + +We start by creating an event listener that watches for a keyup on the DOM. you pass the anonymous function the event and in order to access the specific key that was pressed. You can either look up the key by e.key or by e.keyCode. For sake of not having to type out the sequence we desired, I went with the keyCode as it is just a number representation of the particular key. + +You need an array to push each key press onto so that you can check for the sequence. You need another variable to hold the particular sequence you are looking for to check against the first array. You then push the e.keyCode onto your pressed array but you need to control the length of the array so that it does not get bigger than what you need to check for. You can make this dynamic by using the splice method and checking backwards through the array. +```javascript + pressed.splice(-secretCode.length - 1, pressed.length - secretCode.length); +``` +You first indicate that the start which only applies once the length of pressed reachs the length of secretCode. Then you specify the delete count which will be 1 for each key press. This too only become a value of 1 when pressed reaches one larger in length than secretCode (i.e. it's too big). + +From here, we check the array's against eachother(I used join but I don't think it's necessary, just looks better when console logging) and if it's confirmed, we can execute whatever we so choose. Here we use cornify which adds something random and corny to the page everytime it's called. \ No newline at end of file diff --git a/13 - Slide in on Scroll/index-WORKED.html b/13 - Slide in on Scroll/index-WORKED.html new file mode 100644 index 0000000000..12591bad30 --- /dev/null +++ b/13 - Slide in on Scroll/index-WORKED.html @@ -0,0 +1,140 @@ + + + + + Document + + + +

+ +

Slide in on Scroll

+ +

Consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariaturlores sunt esse magni, ut, dignissimos.

Lorem ipsum cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut, dignissimos.

Adipisicing elit. Tempore tempora rerum..

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut, dignissimos.

+ +

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, deserunt facilis et iste corrupti omnis tenetur est. Iste ut est dicta dolor itaque adipisci, dolorum minima, veritatis earum provident error molestias. Ratione magni illo sint vel velit ut excepturi consectetur suscipit, earum modi accusamus voluptatem nostrum, praesentium numquam, reiciendis voluptas sit id quisquam. Consequatur in quis reprehenderit modi perspiciatis necessitatibus saepe, quidem, suscipit iure natus dignissimos ipsam, eligendi deleniti accusantium, rerum quibusdam fugit perferendis et optio recusandae sed ratione. Culpa, dolorum reprehenderit harum ab voluptas fuga, nisi eligendi natus maiores illum quas quos et aperiam aut doloremque optio maxime fugiat doloribus. Eum dolorum expedita quam, nesciunt

+ +

at provident praesentium atque quas rerum optio dignissimos repudiandae ullam illum quibusdam. Vel ad error quibusdam, illo ex totam placeat. Quos excepturi fuga, molestiae ea quisquam minus, ratione dicta consectetur officia omnis, doloribus voluptatibus? Veniam ipsum veritatis architecto, provident quas consequatur doloremque quam quidem earum expedita, ad delectus voluptatum, omnis praesentium nostrum qui aspernatur ea eaque adipisci et cumque ab? Ea voluptatum dolore itaque odio. Eius minima distinctio harum, officia ab nihil exercitationem. Tempora rem nemo nam temporibus molestias facilis minus ipsam quam doloribus consequatur debitis nesciunt tempore officiis aperiam quisquam, molestiae voluptates cum, fuga culpa. Distinctio accusamus quibusdam, tempore perspiciatis dolorum optio facere consequatur quidem ullam beatae architecto, ipsam sequi officiis dignissimos amet impedit natus necessitatibus tenetur repellendus dolor rem! Dicta dolorem, iure, facilis illo ex nihil ipsa amet officia, optio temporibus eum autem odit repellendus nisi. Possimus modi, corrupti error debitis doloribus dicta libero earum, sequi porro ut excepturi nostrum ea voluptatem nihil culpa? Ullam expedita eligendi obcaecati reiciendis velit provident omnis quas qui in corrupti est dolore facere ad hic, animi soluta assumenda consequuntur reprehenderit! Voluptate dolor nihil veniam laborum voluptas nisi pariatur sed optio accusantium quam consectetur, corrupti, sequi et consequuntur, excepturi doloremque. Tempore quis velit corporis neque fugit non sequi eaque rem hic. Facere, inventore, aspernatur. Accusantium modi atque, asperiores qui nobis soluta cumque suscipit excepturi possimus doloremque odit saepe perferendis temporibus molestiae nostrum voluptatum quis id sint quidem nesciunt culpa. Rerum labore dolor beatae blanditiis praesentium explicabo velit optio esse aperiam similique, voluptatem cum, maiores ipsa tempore. Reiciendis sed culpa atque inventore, nam ullam enim expedita consectetur id velit iusto alias vitae explicabo nemo neque odio reprehenderit soluta sint eaque. Aperiam, qui ut tenetur, voluptate doloremque officiis dicta quaerat voluptatem rerum natus magni. Eum amet autem dolor ullam.

+ +

+ + +

laborum neque repudiandae quam, cumque, voluptate veritatis itaque, placeat veniam ad nisi. Expedita, laborum reprehenderit ratione soluta velit natus, odit mollitia. Corporis rerum minima fugiat in nostrum. Assumenda natus cupiditate hic quidem ex, quas, amet ipsum esse dolore facilis beatae maxime qui inventore, iste? Maiores dignissimos dolore culpa debitis voluptatem harum, excepturi enim reiciendis, tempora ab ipsam illum aspernatur quasi qui porro saepe iure sunt eligendi tenetur quaerat ducimus quas sequi omnis aperiam suscipit! Molestiae obcaecati officiis quo, ratione eveniet, provident pariatur. Veniam quasi expedita distinctio, itaque molestiae sequi, dolorum nisi repellendus quia facilis iusto dignissimos nam? Tenetur fugit quos autem nihil, perspiciatis expedita enim tempore, alias ab maiores quis necessitatibus distinctio molestias eum, quidem. Delectus impedit quidem laborum, fugit vel neque quo, ipsam, quasi aspernatur quas odio nihil? Veniam amet reiciendis blanditiis quis reprehenderit repudiandae neque, ab ducimus, odit excepturi voluptate saepe ipsam. Voluptatem eum error voluptas porro officiis, amet! Molestias, fugit, ut! Tempore non magnam, amet, facere ducimus accusantium eos veritatis neque.

+ +

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio maiores adipisci quibusdam repudiandae dolor vero placeat esse sit! Quibusdam saepe aperiam explicabo placeat optio, consequuntur nihil voluptatibus expedita quia vero perferendis, deserunt et incidunt eveniet temporibus doloremque possimus facilis. Possimus labore, officia dolore! Eaque ratione saepe, alias harum laboriosam deserunt laudantium blanditiis eum explicabo placeat reiciendis labore iste sint. Consectetur expedita dignissimos, non quos distinctio, eos rerum facilis eligendi. Asperiores laudantium, rerum ratione consequatur, culpa consectetur possimus atque ab tempore illum non dolor nesciunt. Neque, rerum. A vel non incidunt, quod doloremque dignissimos necessitatibus aliquid laboriosam architecto at cupiditate commodi expedita in, quae blanditiis. Deserunt labore sequi, repellat laboriosam est, doloremque culpa reiciendis tempore excepturi. Enim nostrum fugit itaque vel corporis ullam sed tenetur ipsa qui rem quam error sint, libero. Laboriosam rem, ratione. Autem blanditiis laborum neque repudiandae quam, cumque, voluptate veritatis itaque, placeat veniam ad nisi. Expedita, laborum reprehenderit ratione soluta velit natus, odit mollitia. Corporis rerum minima fugiat in nostrum. Assumenda natus cupiditate hic quidem ex, quas, amet ipsum esse dolore facilis beatae maxime qui inventore, iste? Maiores dignissimos dolore culpa debitis voluptatem harum, excepturi enim reiciendis, tempora ab ipsam illum aspernatur quasi qui porro saepe iure sunt eligendi tenetur quaerat ducimus quas sequi omnis aperiam suscipit! Molestiae obcaecati officiis quo, ratione eveniet, provident pariatur. Veniam quasi expedita distinctio, itaque molestiae sequi, dolorum nisi repellendus quia facilis iusto dignissimos nam? Tenetur fugit quos autem nihil, perspiciatis expedita enim tempore, alias ab maiores quis necessitatibus distinctio molestias eum, quidem. Delectus impedit quidem laborum, fugit vel neque quo, ipsam, quasi aspernatur quas odio nihil? Veniam amet reiciendis blanditiis quis reprehenderit repudiandae neque, ab ducimus, odit excepturi voluptate saepe ipsam. Voluptatem eum error voluptas porro officiis, amet! Molestias, fugit, ut! Tempore non magnam, amet, facere ducimus accusantium eos veritatis neque.

+ + + + +

+ + + + + + +