PromptBase
Close icon
Explore
Marketing & BusinessDown chevron icon
General
Home
Marketplace
Apps
Create
Hire
Login
Sell
Outlined heart icon
🤖 GPT

Fs Software Engineer Project Specific

Fs Software Engineer Project Specific gpt prompt mini thumbnail
25Eye icon
Views
TestedTick icon
TipsTick icon
Customizable prompt that can get any Chat GPT instance up-to-speed on your project's current state. The Trained Code Helper will do any task you ask it to do, and will use industry standards, language standards, best practices, and any custom rules you provide to it. The prompt can be used with both GPT 3.5 turbo and GPT 4. For more complex situations we recommend using GPT 4 as the overall quality of the experience seems better.
...more
$4.99
Get prompt
Add to cart icon
After purchasing, you will gain access to the prompt file, which you can use with ChatGPT or the app builder.
You'll receive 20 free generation credits with this purchase.
By purchasing this prompt, you agree to our terms of service.
11 months ago

Prompt Details

Model
Chat - GPT-4 (gpt-4)
Token size
294 ($0.00880 / call)
Example input
Draft a 2 button modal that is fully customizable that features a header section and a message body. The layout should be a card style with no close button in the corner, only the confirm and deny buttons. Let's also listen for clickaways and escape presses only when the modal is open.
Example output
Sure! As a Senior Full Stack Software Engineer, here's a draft of a 2 button modal that's fully customizable and features a header section and a message body. The layout will be a card style with no close button in the corner, only the confirm and deny buttons. Additionally, it will listen for clickaways and escape presses only when the modal is open. We'll start by creating a new component Modal.js in our components directory. This component will contain the HTML structure and styling for our modal. Here's an example structure for our Modal.js component: jsx Copy code import React from 'react'; const Modal = ({ title, message, confirmText, denyText, onConfirm, onDeny, isOpen }) => { const handleConfirm = () => { onConfirm(); }; const handleDeny = () => { onDeny(); }; const handleKeyDown = (event) => { if (event.key === 'Escape') { onDeny(); } }; const handleClickAway = (event) => { if (event.target.className === 'modal') { onDeny(); } }; if (!isOpen) { return null; } return ( <div className="fixed z-10 inset-0 overflow-y-auto" onClick={handleClickAway}> <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"> <div className="fixed inset-0 transition-opacity"> <div className="absolute inset-0 bg-gray-500 opacity-75"></div> </div> <span className="hidden sm:inline-block sm:align-middle sm:h-screen"></span>&#8203; <div className="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full" role="dialog" aria-modal="true" aria-labelledby="modal-headline" onKeyDown={handleKeyDown}> <div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4"> <div className="sm:flex sm:items-start"> <div className="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10"> {/* Header Icon */} </div> <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left"> <h3 className="text-lg leading-6 font-medium text-gray-900" id="modal-headline"> {title} </h3> <div className="mt-2"> <p className="text-sm leading-5 text-gray-500"> {message} </p> </div> </div> </div> </div> <div className="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse"> <span className="flex w-full rounded-md shadow-sm sm:ml-3 sm:w-auto"> <button onClick={handleConfirm} type="button" className="inline-flex justify-center w-full rounded-md border border-transparent px-4 py-2 bg-red-600 text-base leading-6 font-medium text-white shadow-sm hover:bg-red-500 focus:outline-none focus:shadow-outline-red transition ease-in-out duration-150 sm:text-sm sm:leading-5"> {confirmText} </button> </span> <span className="mt-3 flex w-full rounded-md shadow-sm sm:mt-0 sm:w-auto"> <button onClick={handleDeny} type="button" className="inline-flex justify-center w-full rounded-md border border-gray-300 px-4 py-2 bg-white text-base leading-6 font-medium text-gray-700 shadow-sm hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue transition ease-in-out duration-150 sm:text-sm sm:leading-5"> {denyText} </button> </span> </div> </div> </div> </div> ); }; export default Modal; As you can see, this component takes in several props such as: `title`, `message`, `confirmText`, `denyText`, `onConfirm`, `onDeny`, and `isOpen`. `title` and `message` are strings that represent the header and message of the modal, respectively. `confirmText` and `denyText` are strings that represent the text on the confirm and deny buttons, respectively. `onConfirm` and `onDeny` are callback functions that will be called when the confirm and deny buttons are clicked, respectively. `isOpen` is a boolean value that represents whether the modal should be shown or not. The `Modal` component also includes event listeners for the Escape key and clickaways, which will call the `onDeny` function when triggered. This ensures that the modal can only be closed by clicking one of the buttons or pressing the Escape key. To use this component in our app, we can import it into our desired component and pass in the necessary props. Here's an example of how we can use the `Modal` component in another component: ```jsx import React, { useState } from 'react'; import Modal from './Modal'; const MyComponent = () => { const [isOpen, setIsOpen] = useState(false); const handleConfirm = () => { // Do something on confirm setIsOpen(false); }; const handleDeny = () => { // Do something on deny setIsOpen(false); }; return ( <> <button onClick={() => setIsOpen(true)}>Open Modal</button> <Modal title="Confirmation" message="Are you sure you want to proceed?" confirmText="Confirm" denyText="Cancel" onConfirm={handleConfirm} onDeny={handleDeny} isOpen={isOpen} /> </> ); }; export default MyComponent; In this example, we've created a new component MyComponent which renders a button that, when clicked, sets the isOpen state to true, thereby showing the Modal component. We've also defined handleConfirm and handleDeny functions that will be called when the confirm and deny buttons are clicked, respectively. These functions can perform any necessary actions and set the isOpen state to false, which will close the modal. I hope this helps! Let me know if you have any questions or need further assistance.
Browse Marketplace