We include a custom auto-play slideshow and custom navigation bar.
1. Section 1 — our product logo and an image gallery
2. Section 2 — information about our product
3. Section 3 — accolades about our product
4. Section 4 — opportunities to buy our product
5. Section 5 — contact information for our business
We’ll deal with the details of the image gallery implementation later.
For now we position our logo and button on the page and place our image gallery behind everything.
<div className=”section1"> <div className=”container”> <img src=”./images/reyna.png” alt=”” className=”splash_img” /> <img src=”./images/val-logo.png” alt=”” className=”splash_logo”
/> <div className=”sign_up”>…
Save the sites you browse in a Pinterest board.
This write-up assumes you know how to create a JavaScript Pinterest Clone from scratch. If you don’t know how, watch the tutorial here.
For this tutorial, we are simply upgrading the functionality of our JavaScript Pinterest Clone and integrating it into a Chrome Extension.
We’ll start with the manifest.json.
{ “name”: “Pinterest Chrome Extension”, “description”: “Pinterest Chrome Extension”, “version”: “0.1.0”, “manifest_version”: 2, “icons”: { “16”: “./images/icon-16x16.png”, “32”: “./images/icon-32x32.png”, “48”: “./images/icon-48x48.png”, “128”: “./images/icon-128x128.png” }, “background”: { “scripts”: [“./scripts/background.js”] }, “browser_action”: { “default_popup”: “popup.html” }, “permissions”: [ “tabs”, “storage”, “unlimitedStorage”, “https://*/*png", “https://*/*jpg", “https://*/*jpeg",…
Let’s get the skeleton for our component written up. We’ll be using ‘react-router-dom’ and font awesome for this project.
<div className=”nav_bar”> <div className=”icon_container menu_switch”> </div> <div className={`nav_container`}> <div className=”icon_container logo”> </div> <ul className=”menu_items”> </ul> </div></div>
We have a place for our open/close menu button, a logo, and the menu with links to different pages.
When the user clicks our menu button, we’ll open or close our menu depending on the current state of the menu.
We’ll have a piece of state called showMenu to manage this.
const [showMenu, setShowMenu] = useState(false);function switch_menu() { setShowMenu(!showMenu);
}
When showMenu is…
1. Top — the greeting for our customer
2. Middle — a place for information about our business’ mission
3. Bottom — a footer for information about our business
We’ll create a Home.js component for our main page.
All we’re going to do here is set an image for our background and title for our company.
The image gallery comes later; it’s a separate element that we float around our page depending on the dimensions.
<div className=”section1"> <img src=”./images/background-section1.jpg” alt=””
className=”background_image_section1" /> <div className=”title”>Sinclaire<br />Market</div></div>
This is our result:
1. Top — the greeting for our customer
2. Middle — a place for information about our business’ mission
3. Bottom — a sign-up option and footer for information about our business
<div className=”section1" ><img src=”./images/space.png” alt=”” className=”space-background”/><img src=”./images/earth.png” alt=”” className=”earth”/><img src=”./images/rocket.png” alt=”” className=”rocket-ship”/><img src=”./images/planet1.png” alt=”” className=”planet1"/><img src=”./images/satellite.png” alt=”” className=”satellite”/><div className=”greeting”>[Welcome]</div></div>
It’s important in the CSS styles for all of these images that we make sure they have a position of ‘fixed’ and are positioned using the ’top’ property.
This important for later when we use our Parallax HOC Wrapper to make these…
This tutorial uses a boilerplate Google Chrome Extension setup. If you want to know how to get that setup, check out our write-up here:
We’ll have a simple HTML page that allows our user to pick a search engine; this page will be the popup in our Chrome Extension.
In the foreground script we’ll listen for when the user copies a piece of text. When they do, we’ll get our background script to open a new with the appropriate URL and search parameter.
Let’s start.
Nothing special here.
{ “name”: “Clipboard Search”, “manifest_version”: 2, “description”: “Testing clipboard functionality.”, “version”: “0.0.0”…
Add parallax elements to your next web design.
We are going to create an HOC (Higher Order Component).
It’s a function that’s going to take a JSX Element.
ex. higherOrderFunction(<div></div>)
It’s then going to return a JSX Component.
ex. ParallaxComponent
We’ll then render it to our page like this:
<ParallaxComponent />
We are going to fix a JSX element to our page (in this case a DIV shaped like a circle).
When we scroll our page DOWN, we’ll manually scroll the JSX element UP.
Since we are manually scrolling our element up, we can control how fast or slow it…
Get started with a Pinterest clone. No external libraries needed.
1. Create a mock-up of a single Pinterest Pin.
2. Create a mock-up of the Pinterest “Add a Pin Screen”.
3. Merge the above; Use the “Add Pin Screen” to generate a single Pinterest Pin.
4. Transfer the logic of our merge in step 3 into our Pinterest Layout.
1. Pin title — the user won’t see this; you can use this on the back-end as a way to store the Pin in a database
2. …
A ‘PinterestLayout.js’ component that we’ll use for the Pinterest board.
A ‘Card.js’ component that we’ll use for the actual pins on the board.
It’s a very simple component:
function PinterestLayout() {
return (
<div style={styles.pin_container}>
</div>
)
}
The container is what powers our entire layout.
const styles = {
pin_container: {
margin: 0,
padding: 0,
width: ‘80vw’,
display: ‘grid’,
gridTemplateColumns: ‘repeat(auto-fill, 250px)’,
gridAutoRows: ‘10px’,
position: ‘absolute’,
left: ‘50%’,
transform: ‘translateX(-50%)’,
justifyContent: ‘center’,
backgroundColor: ‘black’
}
}
Note:
1. Create a mock-up of a single Pinterest Pin.
2. Create a mock-up of the Pinterest “Add a Pin Screen”.
3. Merge the above; Use the “Add Pin Screen” to generate a single Pinterest Pin.
4. Transfer the logic of our merge in step 3 into our Pinterest Layout.
1. Pin title — the user won’t see this; you can use this on the back-end as a way to store the Pin in a database
2. Pin modal — this is the overlay for each card; this won’t be functional for this tutorial, just cosmetic
Learning to code…