zexceed Posts - Answer Overflow

zexceed

•Created by zexceed on 9/18/2024 in #front-end

How to add input entries to a list

I'm building a resume builder project with react and I feel a bit stuck on how to add to a list (the resume view) the entries I type into the inputs. I made it work with this code: function EducationField({ setEducationData }: EducationFieldProp) { const [newEducationData, setNewEducationData] = useState({ id: uuidv4(), schoolName: '', title: '', location: '', startDate: '', endDate: '', }); function handleAddEducation(e: ChangeEvent<HTMLInputElement>) { const { name, value } = e.target; setNewEducationData((prev) => ({ ...prev, [name]: value })); } function addToList() { setEducationData((prev) => [...prev, newEducationData]); setNewEducationData({ id: uuidv4(), schoolName: '', title: '', location: '', startDate: '', endDate: '', }); } return ( <Form> <div> <Input label="School" name="schoolName" text="Insert name" value={newEducationData.schoolName} onChange={handleAddEducation} /> <Input label="Title" name="title" text="Insert title" value={newEducationData.title} onChange={handleAddEducation} /> <Input label="Location" name="location" text="Insert location" value={newEducationData.location} onChange={handleAddEducation} /> <Input label="Start Date" name="startDate" text="Insert start date" value={newEducationData.startDate} onChange={handleAddEducation} /> <Input label="End Date" name="endDate" text="Insert end date" value={newEducationData.endDate} onChange={handleAddEducation} /> </div> <AddButton onClick={addToList} text="Education" /> </Form> ); } export default EducationField;`

2 replies

KPCKevin Powell - Community

•Created by zexceed on 9/14/2024 in #front-end

Can't make Fluid for Tailwind work

Hello guys I'm starting a new project using React+Vite+Typescript and Tailwind for styling. I bumped into Fluid for Tailwind (https://fluid.tw/#tailwind-merge) and I was pretty much curious to use but I really cant make it work. I keep having a warning: "warn - fluid-tailwind: Fluid extractor not found in your Tailwind config". here is my tailwind.config if can be any helpful:

/** @type {import('tailwindcss').Config} */
const fluidTailwind = require("fluid-tailwind");

module.exports = {
  content: ["./index.html", "./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {
      colors: {
        primary: "#daff6f",
        secondary: "#a8aeff",
        tertiary: "#e6e6fa",
        black: "#161616",
        subtext: "#d3d3d3",
        secondSubtext: "#717171",
        secondaryAccent: "#CDD0ED",
        primaryAccent: "#EFFFC3",
      },
      screens: {
        xsm: { max: "650px" },
        md: { min: "651px" },
        lg: { min: "768px", max: "1023px" },
        xl: { min: "1024px", max: "1279px" },
        "2xl": { min: "1280px", max: "1535px" },
        "3xl": { min: "1536px" },
      },
    },
  },
  plugins: [
    fluidTailwind({
      textSizes: {
        sm: "14px",
        base: "16px",
        lg: "18px",
        xl: "20px",
      },
    }),
  ],
};

I tried to add and import "extract" like said on the guide but it keeps not working. Does anyone ever used this plugin? I hope you can help me to fix it, thank you!!!

1 replies

KPCKevin Powell - Community

•Created by zexceed on 7/30/2024 in #front-end

How to render multiple button with different bg color

Hey guys , hope you doing well. I started to study react and to not only focus on the theory I’m starting to build something. I wanted to render multiple buttons (given an array with names in it) but each with different colors: the colors are 2 and should be seen as 1-2-2-1 . I did the first part, rendering 4 button with each a name contained in the array but I really can’t think of how to set the color… I was thinking to use a useState , but I’m making more confusing and here I’m asking for your help! ( I’m styling with Tailwind) . Thank you

22 replies

KPCKevin Powell - Community

•Created by zexceed on 11/19/2023 in #front-end

compiled .css files not pushed in repo

Hello everyone, I was adviced to not push my dist folder with .css files , infact I added the folder in a .gitignore but css style from my webpage is not showing now. Can anyone advice me what to do because I think I got that wrong … Ps. I created another folder with the main.css file and a script in a json that allows me to copy the changes from dist/main.css to css/main.css

16 replies

Gaming

Programming