Flex Panels 💪

diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html index 2712384201..f1a0d95425 100644 --- a/02 - JS + CSS Clock/index-START.html +++ b/02 - JS + CSS Clock/index-START.html @@ -18,7 +18,7 @@ diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html index 7171607a8b..2fb7964fc2 100644 --- a/03 - CSS Variables/index-START.html +++ b/03 - CSS Variables/index-START.html @@ -22,6 +22,35 @@

Update CSS Variables with JS

diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html index 4162bce339..a9dfb7ae1e 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -33,28 +33,108 @@ // Array.prototype.filter() // 1. Filter the list of inventors for those who were born in the 1500's + //My solution + function bornedIn1500(inventors) { + if (inventors.year >= 1500 && inventors.year < 1600) return true; + } + console.log(inventors.filter(bornedIn1500)); + + //Wes's Solution + const fifteen = inventors.filter(inventor => (inventor.year >= 1500 && inventor.year < 1600)); + console.table(fifteen); // Array.prototype.map() // 2. Give us an array of the inventors' first and last names + //My solution + const fullNames = inventors.map(inventor => inventor.first + " " + inventor.last); + console.log(fullNames); + + //Wes's Solution + const fullNames2 = inventors.map(inventor => `${inventor.first} ${inventor.last}`); + console.log(fullNames2); + // Array.prototype.sort() // 3. Sort the inventors by birthdate, oldest to youngest + //my Solution + const orderedByYears = inventors.sort(function (a, b){ + return (a.year > b.year)? 1 : -1 ; + }); + console.table(orderedByYears); + + //Wes's Solution + const ordered= inventors.sort((a, b)=> a.year > b.year ? 1 : -1 ); + console.table(ordered); // Array.prototype.reduce() // 4. How many years did all the inventors live? + //ça sert a rien mais j'ai fait ça + const lifeTime = inventors.map(inventor =>`${inventor.first} ${inventor.last} ${ inventor.passed - inventor.year}` ); + console.log(lifeTime); + //my solution + const lifeTimesTotal = inventors.reduce((total, inventor) => total + (inventor.passed - inventor.year), 0); + console.log(lifeTimesTotal); + + //Wes's Solution + const totalYears = inventors.reduce((total, inventor) => { + return total + (inventor.passed - inventor.year); + },0); + console.log(totalYears); + // 5. Sort the inventors by years lived + //My Solution + const oldest = inventors.sort((a, b)=> a.passed - a.year > b.passed - b.year ? -1 : 1 ); + console.table(oldest); + + //Wes's Solution + const oldest2 = inventors.sort(function (a, b){ + const lastGuy = a.passed - a.year; + const nextGuy = b.passed - b.year; + return lastGuy > nextGuy ? -1 : 1; + }); + console.table(oldest2); + // 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name // https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris + /* + const category = document.querySelector('.mw-category');//on peux aussi faire document.querySelector('mw-category a'); + //on peux appler queryselectorAll sur tout les query + const links = [...category.querySelectorAll('a')]; //avec [... query] on transforme la nodeList en tableau + + const de = links + .map(link => link.textContent) + .filter(streerName => streerName.includes('de')); + console.log(de);*/ // 7. sort Exercise // Sort the people alphabetically by last name + //my bad solution + const Alphabetical = people.sort(guy => guy[0]); + console.log(Alphabetical); + + //wes's Solution + const alpha = people.sort((lastOne, nextOne) => { + const [aLast, aFirst] = lastOne.split(','); + const [bLast, bFirst] = nextOne.split(','); + return aLast > bLast ? -1 : 1; + }); + console.log(alpha); + // 8. Reduce Exercise // Sum up the instances of each of these const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck' ]; + const transportation = data.reduce((obj, item)=>{ + if(!obj[item]){ + obj[item] = 0; + } + obj[item]++; + return obj; + },{}); + console.log(transportation); diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html index e1d643ad5c..b789a1322b 100644 --- a/05 - Flex Panel Gallery/index-START.html +++ b/05 - Flex Panel Gallery/index-START.html @@ -4,78 +4,10 @@ Flex Panels 💪 + -

@@ -84,7 +16,7 @@

Let's

Dance

Give

Take

Receive

@@ -106,11 +38,6 @@

- - - - + diff --git a/05 - Flex Panel Gallery/script.js b/05 - Flex Panel Gallery/script.js new file mode 100644 index 0000000000..445622c1c3 --- /dev/null +++ b/05 - Flex Panel Gallery/script.js @@ -0,0 +1,22 @@ +/** + * Created by nausicaaj on 19/12/2016. + */ + + //je selectionne tout mes panneaux +const panels = document.querySelectorAll('.panel'); + +//fajoute et supprime la classe 'open' qui permet d'ouvrir et de fermer mes panneaux quand on clique dessus +function openWide() { + this.classList.toggle('open'); +} + + +//ajoute et supprime la clacce 'open-active' pour recentrer les mot du haut et du bas +function callWords(e) { + console.log(e.propertyName); + if (e.propertyName.includes('flex')) this.classList.toggle('open-active'); + +} +//on aurait pu mettre (e.propertyName === 'flex-box' mais ça aurait été pas très bien compris par safary +panels.forEach(panel => panel.addEventListener('click', openWide)); +panels.forEach(panel => panel.addEventListener('transitionend', callWords)); diff --git a/05 - Flex Panel Gallery/style.css b/05 - Flex Panel Gallery/style.css new file mode 100644 index 0000000000..2b77439970 --- /dev/null +++ b/05 - Flex Panel Gallery/style.css @@ -0,0 +1,84 @@ +html { + box-sizing: border-box; + background:#ffc600; + font-family:'helvetica neue'; + font-size: 20px; + font-weight: 200; +} +body { + margin: 0; +} +*, *:before, *:after { + box-sizing: inherit; +} + +.panels { + min-height:100vh; + overflow: hidden; + display: flex; +} + +.panel { + background:#6B0F9C; + box-shadow:inset 0 0 0 5px rgba(255,255,255,0.1); + color:white; + text-align: center; + align-items:center; + /* Safari transitionend event.propertyName === flex */ + /* Chrome + FF transitionend event.propertyName === flex-grow */ + transition: + font-size 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11), + flex 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11), + background 0.2s; + font-size: 20px; + background-size:cover; + background-position:center; + justify-content: center; + align-items: center; + display: flex; + flex: 1; + flex-direction: column; +} + + +.panel1 { background-image:url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500); } +.panel2 { background-image:url(https://source.unsplash.com/1CD3fd8kHnE/1500x1500); } +.panel3 { background-image:url(https://images.unsplash.com/photo-1465188162913-8fb5709d6d57?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&w=1500&h=1500&fit=crop&s=967e8a713a4e395260793fc8c802901d); } +.panel4 { background-image:url(https://source.unsplash.com/ITjiVXcwVng/1500x1500); } +.panel5 { background-image:url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500); } + +.panel > * { + margin:0; + width: 100%; + transition:transform 0.5s; + flex: 1 0 auto; + display: flex; + justify-content: center; + align-items: center; +} + +.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);} + +.panel p { + text-transform: uppercase; + font-family: 'Amatic SC', cursive; + text-shadow:0 0 4px rgba(0, 0, 0, 0.72), 0 0 14px rgba(0, 0, 0, 0.45); + font-size: 2em; +} +.panel p:nth-child(2) { + font-size: 4em; +} + +.panel.open { + + flex: 5; + font-size: 40px; +} + +.cta { + color:white; + text-decoration: none; +} \ No newline at end of file diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html index 1436886918..b24a3e2b75 100644 --- a/06 - Type Ahead/index-START.html +++ b/06 - Type Ahead/index-START.html @@ -1,22 +1,58 @@ - - - Type Ahead 👀 - - - + + + Type Ahead 👀 + + + - - + const cities = []; + const objet = fetch(endpoint) + .then(blob => blob.json()) + .then(data => cities.push(...data)); + console.log(objet); + + function findMatches(wordToMatch, cities) { + return cities.filter(place =>{ + //voyons si on a une ville ou un etat qui correspond a la recherche + const regex = new RegExp(wordToMatch, "gi"); + return place.city.match(regex) || place.state.match(regex); + }); + } + function displayMatches(e) { + const matchArray = findMatches(e.target.value, cities); + const html = matchArray.map(place => { + const regex = new RegExp(e.target.value, 'gi'); + const cityName = place.city.replace(regex,`${e.target.value}`); + const stateName = place.state.replace(regex,`${e.target.value}`); + return ` +

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

`; + }).join(''); + suggestionInput.innerHTML = html; + } + //regex toute faite qui rajoute des virgules auw grand nombre + function numberWithCommas(x) { + return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); + } + const searchInput = document.querySelector('.search'); + const suggestionInput = document.querySelector('.suggestions'); + + searchInput.addEventListener('change', displayMatches); + searchInput.addEventListener('keyup', displayMatches); + diff --git a/07 - Array Cardio Day 2/index-START.html b/07 - Array Cardio Day 2/index-START.html index 206ec31aa0..18da822aa9 100644 --- a/07 - Array Cardio Day 2/index-START.html +++ b/07 - Array Cardio Day 2/index-START.html @@ -26,16 +26,35 @@ // Some and Every Checks // Array.prototype.some() // is at least one person 19? + + const isAdult = people.some((person) => ((new Date()) + .getFullYear()) - person.year >= 19); + // Array.prototype.every() // is everyone 19? + const allAdult = people.every(person => ((new Date()) + .getFullYear()) - person.year >= 19); + console.log({isAdult}); + console.log({allAdult}); // Array.prototype.find() // Find is like filter, but instead returns just the one you are looking for // find the comment with the ID of 823423 + const comment = comments.find(comment => comment.id === 823423); + console.log(comment); // Array.prototype.findIndex() + const index = comments.findIndex(comment => comment.id === 823423); + console.log(index); // Find the comment with this ID // delete the comment with the ID of 823423 + //comments.splice(index,1); + const newComments = [ + ...comments.slice(0, index), + ...comments.slice(index + 1) + ]; + console.table(comments); + console.table(newComments);