Using a few simple lines of CSS, create Pinterest’s Pin layout.
:root {
--card_width: 250px;
--row_increment: 10px;
--card_border_radius: 16px;
--card_small: 26;
--card_med: 33;
--card_large: 45;
}
Note:
Responsive, Auto-Play & Manual Navigation
We won’t be using any external libraries; all native HTML, CSS, and JS.
We need two components: Deck.js and Card.js
We have 6 elements to work with:
Responsive, Auto-play, Manual Navigation Buttons
We won’t be using any external libraries; all native JSX, CSS, JavaScript.
We need two components: Deck.js and Card.js
We have 6 elements to work with:
Fully responsive; Mobile and Desktop; Button, Wheel, & Touch navigation.
for (let i = 0; i < this.images.children.length; i++) {
this.updated_position = this.last_positions[i] + difference;
this.images.children[i].style.left = `${this.updated_position}px`;
this.last_positions[i] = this.updated_position;
}
What it says is this:
Take the current position of all of the images — where are they on the X-axis?; add some difference which will move them to a new position.
We have a last_positions array to keep track of where our images are on screen.
We’re concerned with three touch event listeners.
The final Phase of our Cyberpunk 2077-inspired React-Chrome Extension
We have a course for completely-new-to-web-dev’ers
as well as for experienced web dev’s who want a more curated experience.
We, of course, inject from our Background.js script.
chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
if (changeInfo.status === ‘complete’ && tab.url.includes(‘http’)) {
active_tabId = tabId;chrome.tabs.executeScript(tabId, { file: ‘./inject_script.js’ }, function () {
chrome.tabs.executeScript(tabId, { file: ‘./foreground.bundle.js’ }, function () {
console.log(“INJECTED AND EXECUTED”);
});
});
}
});chrome.tabs.onActivated.addListener(activeInfo => {
chrome.tabs.get(activeInfo.tabId, function (tab) {
if (tab.url.includes(‘http’)) active_tabId = activeInfo.tabId;
});
});
Staying in our Background.js file, we’ll create those two functions…
function get_state() {
return new Promise((resolve, reject) => {
chrome.storage.local.get(‘chrome-ext-Spotify-controller’, item => {
if (chrome.runtime.lastError) {
reject(‘fail’);
} else {
const state = item[‘chrome-ext-Spotify-controller’] ? …
Fully responsive; Mobile & Desktop; Button, Wheel, & Touch navigation.
for (let i = 0; i < images.children.length; i++) {
updated_position = last_positions[i] + difference;
images.children[i].style.left = `${updated_position}px`;
last_positions[i] = updated_position;
}
What it says is this:
Take the current position of all of the images — where are they on the X-axis?; add some difference which will move them to a new position.
We have a last_positions array to keep track of where our images are on screen.
We’re concerned with three touch event listeners.
Phase 5 of Cyberpunk 2077-inspired React-Chrome Extension
We have a course for completely-new-to-web-dev’ers
as well as for experienced web dev’s who want a more curated experience.
We want to be able to refresh our token, so we’ll be using the Authorization Code Flow with Proof Key.
We’ll handle all of this logic in the background.js of our extension.
Here, we’re creating variables to hold all of the parameters for the request URL. …
Fully responsive; Mobile and Desktop; Button, Wheel, & Touch navigation.
We need two components: Deck.js and Card.js
We have 7 elements to work with:
Phase 4 of Cyberpunk 2077-inspired React-Chrome Extension
We have a course for completely-new-to-web-dev’ers
as well as for experienced web dev’s who want a more curated experience.
>> npm install — save react-transition-group
We have two components that use this new package the Player and OptionsPage components.
CSSTransition works by wrapping an HTML element in a DIV element.
This wrapper DIV then has CSS classes added and removed from it.
Those CSS classes have pre-defined names (defined by React Transition Group).
Those class names are:
Fully responsive; Mobile and Desktop; Button, Wheel, Touch navigation.
We have 7 elements to work with:
1. a button for moving right (BUTTON)
2. a button for moving left (BUTTON)
3. a view port (DIV)
4. an images container (DIV)
5. a “card” which we’ll use to hold the image (DIV)
6. the actual image (IMG)
7. a touch area that we’ll use to determine whether or not the user is allowed to scroll the carousel (DIV)
About