devF
KPCKevin Powell - Community
•Created by Mawiz on 10/5/2024 in #front-end
Is it possible to create something like this with just CSS?
its all possible with CSS .
But If you use popular animation librarylike framer-motion, it will be faster and more awesome.
3 replies
KPCKevin Powell - Community
•Created by Jonah on 10/1/2024 in #front-end
Problem with the container background
Thanks you for the update!
Have you tried the second method?
19 replies
KPCKevin Powell - Community
•Created by Jonah on 10/1/2024 in #front-end
Problem with the container background
You can conditionally set the display property of the container when the quiz is completed:
import React from "react";
import Questions from "./Questions";
import QuizResults from "./QuizResults";
export default function Main({ isQuizCompleted }) {
return (
<div
className="container"
style={{
backgroundColor: isQuizCompleted ? 'transparent' : '#343964',
display: isQuizCompleted ? 'none' : 'block' // Hide the container when the quiz is completed
}}
>
{/* Only render Questions if the quiz is not completed /}
{!isQuizCompleted && <Questions />}
{/ Render QuizResults when the quiz is completed /}
<QuizResults isQuizCompleted={isQuizCompleted} />
</div>
);
}
You also instead of keeping the div always rendered, you can render the div conditionally based on whether the quiz is completed or not:
import React from "react";
import Questions from "./Questions";
import QuizResults from "./QuizResults";
export default function Main({ isQuizCompleted }) {
return (
<>
{/ Only render Questions and the container if the quiz is not completed */}
{!isQuizCompleted ? (
<div className="container" style={{ backgroundColor: '#343964' }}>
<Questions />
</div>
) : (
<QuizResults isQuizCompleted={isQuizCompleted} />
)}
</>
);
}
19 replies