The latest articles on Forem by Mark Fulton (@markfulton). https://forem.com/markfulton https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1160775%2F31daa736-c61c-4cb6-ad38-03c90ce8d1b6.jpg https://forem.com/markfulton en Mark Fulton Sun, 08 Oct 2023 09:38:39 +0000 https://forem.com/markfulton/chatgpt-applet-developer-prompt-v10-188o https://forem.com/markfulton/chatgpt-applet-developer-prompt-v10-188o <h2> Introducing the Applet Developer Prompt </h2> <h3> This prompt for GPT-4 will allow anyone, <strong>regardless of skill level</strong>, to <strong>generate beautiful and useful JavaScript applets</strong>. </h3> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--WlWe7RDL--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e2239wuea3b44yazh5no.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--WlWe7RDL--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e2239wuea3b44yazh5no.png" alt="Image description" width="800" height="469"></a></p> <p>These can be all kinds of simple, useful <strong>tools</strong>, <strong>embeds, calculators, charts</strong>, <strong>planners</strong>, <strong>widgets</strong>, <strong>image apps</strong>, <strong>text transformation</strong>, etc.</p> <p>You are <strong>only limited by your imagination</strong> and what JavaScript libraries, frameworks, and APIs you have access to. There are many available for free.</p> <p>📂 <a href="https://getsmartgpt.com/apps/"><strong>ChatGPT Generated Apps Collection</strong></a></p> <h3> Try creating your own applet with ChatGPT-4 today! </h3> <p>You just need an idea. 💡</p> <p>🗒️ <strong>Note:</strong> This prompt is intended to be used on the <strong>GPT-4 Default</strong> model.</p> <h2> ⚙️ <a href="https://markfulton.com/prompts/applet-developer-v10">Applet Developer Prompt for ChatGPT</a> </h2> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>Name Your Applet: Describe What Your App Does: You are an expert full-stack web developer specializing in JavaScript and CSS/HTML applet development and design. Your task is to develop expert-level code for this project. Please provide the completed code required to accomplish all the requirements of this project as detailed above. The applet should feature a modern CSS design with a CSS glassmorphism effect above an appropriate gradient body background. Use flex-direction: column unless your app needs a different layout. Include an h1 title tag above the app container. The app should be mobile responsive, have medium-large font sizes for body, rounded corners, subtle background gradients, and extra padding. The app should be centered on the page. Add a centered copyright ''©2023 {Applet Name}'' below the app container. Make sure your code is clean and includes concise and professional code comment documentation. </code></pre> </div> <p><strong>Using this Prompt:</strong> All you have to do is edit the first two lines. In <strong>your description</strong>, be very specific and describe every feature you want in the application, but be realistic within the constraints of JavaScript. You may <strong>follow up to add additional features</strong> or <strong>nudge ChatGPT</strong> to give you the full code! Use the 📂 <strong><a href="https://getsmartgpt.com/apps/CodeZip/">CodeZip app</a></strong> to package and download your app code.</p> <p>💡<strong>Tip for App Ideas</strong>: Try to think of things that annoy you or take up your time and solve them!</p> <h3> 📂 CodeZip - Easily save and download code from ChatGPT </h3> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--uzjMz_yx--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pnffuj9x5lcvm8834d0n.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--uzjMz_yx--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pnffuj9x5lcvm8834d0n.png" alt="Image description" width="800" height="558"></a></p> <p>One <strong>important app</strong> I created entirely with this prompt is the 📂 <strong><a href="https://getsmartgpt.com/apps/CodeZip/">CodeZip app</a></strong> for ChatGPT. It’s the app that <strong>makes this prompt 10x more efficient</strong>. Try it to <strong>download your ChatGPT code fast</strong>.</p> <h4> Feedback Welcome </h4> <p><strong>What are your thoughts? What will you build?</strong></p> webdev javascript chatgpt promptengineering