Menu
Bounties /Pin to ProfileBookmark
@ocwjayFeb 08.2024 — #I've done something similar to this using flex and height. Doing it that way, you could add an animation as well for the row below the clicked movie to open with. Start with isClicked == false leaves the row at height: 0. On click, if isClicked == false, then isClicked = true and then run a function checkClicked. That function could then, if isClicked is true, change the height of the row to the desired height, making it visible. Everything having a flex will push the row below that one down as the height gets bigger. If you have visibility problems while the div height is 0, then you can just add visibility: hidden; in css and have that change as well with the height.
@neststayhomeFeb 21.2024 — #To implement the Figma design in React, HTML, and CSS:
Break down the design into components.
Translate each component into JSX in React.
Apply styles using CSS classes or inline styles.
Utilize Flexbox or CSS Grid for layout.
Use media queries for responsiveness.
Ensure accessibility and optimize for performance.
Davinci•003 auto-replyTo implement a Figma design using React, HTML, and CSS, you would first need to break down the design into components. React is a component-based library, so it's best to think of your design in terms of components.
Here's a general step-by-step guide:
1. **Break down the design into components**: Look at the design and identify the different parts that can be made into components. For example, a header, a footer, a sidebar, a main content area, etc.
2. **Create a new React app**: You can do this by running
3. **Create your components**: In your
4. **Write your JSX**: In each component file, write the JSX that represents the HTML structure of that component. For example, in
5. **Write your CSS**: You can write CSS in separate
6. **Assemble your components**: In your
Remember, this is a very general guide and the specifics will depend on your particular design. Also, this doesn't cover state management or any kind of dynamic behavior, which you would likely need for a real-world application. But it should give you a good starting point.
How to implement this figma design using React, HTML and CSS?
This is a link to the figma design:
https://www.figma.com/file/SJy6zFUux6AqbFY1onQuso/task?type=design&node-id=0-1&mode=design
Here are pictures of what i am trying to do:
So basically when i click the card i need the layout to create a new row and make it expand until the end.
Here is a link to my code:
https://github.com/alexpetkoff/Top-Movie/tree/main/top-movie/src/components/Movies
Movies.jsx – here is the whole layout , where i map all the data
MovieCard.jsx – is the code for the card
Sign in
to post a answer3 Replies ↴
2
@ocwjayFeb 08.2024 — #I've done something similar to this using flex and height. Doing it that way, you could add an animation as well for the row below the clicked movie to open with. Start with isClicked == false leaves the row at height: 0. On click, if isClicked == false, then isClicked = true and then run a function checkClicked. That function could then, if isClicked is true, change the height of the row to the desired height, making it visible. Everything having a flex will push the row below that one down as the height gets bigger. If you have visibility problems while the div height is 0, then you can just add visibility: hidden; in css and have that change as well with the height.0
@neststayhomeFeb 21.2024 — #To implement the Figma design in React, HTML, and CSS:Break down the design into components.
Translate each component into JSX in React.
Apply styles using CSS classes or inline styles.
Utilize Flexbox or CSS Grid for layout.
Use media queries for responsiveness.
Ensure accessibility and optimize for performance.
Davinci•003 auto-replyTo implement a Figma design using React, HTML, and CSS, you would first need to break down the design into components. React is a component-based library, so it's best to think of your design in terms of components. Here's a general step-by-step guide:
1. **Break down the design into components**: Look at the design and identify the different parts that can be made into components. For example, a header, a footer, a sidebar, a main content area, etc.
2. **Create a new React app**: You can do this by running
npx create-react-app my-app in your terminal.3. **Create your components**: In your
src folder, create a new folder called components. Inside this folder, create a new file for each component you identified in step 1. For example, you might have Header.js, Footer.js, Sidebar.js, etc.4. **Write your JSX**: In each component file, write the JSX that represents the HTML structure of that component. For example, in
Header.js, you might have something like this:
import React from 'react';
function Header() {
return (
My Website
);
}
export default Header;
5. **Write your CSS**: You can write CSS in separate
.css files and import them into your component files, or you can write inline styles directly in your JSX. The choice is up to you and depends on your specific needs and preferences.6. **Assemble your components**: In your
App.js file, import all of your components and assemble them to create the full page. For example:
import React from 'react';
import Header from './components/Header';
import Footer from './components/Footer';
import Sidebar from './components/Sidebar';
function App() {
return (
);
}
export default App;
Remember, this is a very general guide and the specifics will depend on your particular design. Also, this doesn't cover state management or any kind of dynamic behavior, which you would likely need for a real-world application. But it should give you a good starting point.