{"id":21,"date":"2023-09-15T23:40:42","date_gmt":"2023-09-15T23:40:42","guid":{"rendered":"https:\/\/draftsparks.com\/?page_id=21"},"modified":"2023-09-23T07:55:48","modified_gmt":"2023-09-23T07:55:48","slug":"writing-prompt-generator","status":"publish","type":"page","link":"https:\/\/draftsparks.com\/tools\/writing-prompt-generator\/","title":{"rendered":"Writing Prompt Generator"},"content":{"rendered":"\n<div class=\"wp-block-group alignwide is-layout-flow wp-block-group-is-layout-flow\"><div x-data=\"promptApp\" x-init=\"fetchRandomPrompt\">\r\n    <!-- Left Column -->\r\n    <div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\r\n        <div class=\"flex-1 flex-container\" style=\"margin-top:0px;\">\r\n\t\t\t<div>\r\n\t\t\t\t<span style=\"color: var(--wp--preset--color--primary); font-weight: bold;\">Prompt Options:&nbsp;<\/span>\r\n\t\t\t<\/div>\r\n\t\t\t<div>\r\n\t\t\t\t<label style=\"margin-left: 2rem;\">\r\n\t\t\t\t\t<input type=\"checkbox\" x-model=\"filters.fiction\"> Include Fiction Prompts\r\n\t\t\t\t<\/label>\r\n\t\t\t<\/div>\r\n\t\t\t<div>\r\n\t\t\t\t<label style=\"margin-left: 2rem;\">\r\n\t\t\t\t\t<input type=\"checkbox\" x-model=\"filters.nonfiction\"> Include Non-Fiction Prompts\r\n\t\t\t\t<\/label>\r\n\t\t\t<\/div>\r\n\t\t\t<div style=\"flex-basis: 100%;\">\r\n\t\t\t\t<button @click=\"fetchRandomPrompt\" style=\"display: block; width: 100%; margin: 2rem 0; background-color: black; color: white; padding: 1.5rem; font-size: 2rem;\">\ud83d\udd04 Generate A Random Writing Prompt!<\/button>\r\n\t\t\t<\/div>\r\n\t\t<\/div>\r\n    <\/div>\r\n\r\n    <!-- Right Column -->\r\n    <div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\r\n        <div class=\"flex-1\" style=\"border: 3px solid black; padding: 2rem; margin-top: 1rem; minimum-height: 250px;\">\r\n\t\t\t<!-- This div will show when isLoading is true -->\r\n\t\t\t<p x-show=\"isLoading\"  style=\"color: var(--wp--preset--color--primary); font-weight: bold; margin-top:0;\">_____________________________<\/p>\r\n\t\t\t<div x-show=\"isLoading\" class=\"spinning\" style=\"margin:3rem; font-size: 3rem;\">\u27f3<br><\/div>\r\n\t\t\t<p x-show=\"isLoading\">_____________________________<\/p>\r\n\r\n\t\t\t<!-- This div will show when isLoading is false -->\r\n\t\t\t<a x-show=\"!isLoading\" x-html=\"promptTitle\" x-bind:href=\"promptLink\" target=\"_blank\" style=\"color: var(--wp--preset--color--primary); font-weight: bold; margin-top:0;\" rel=\"noopener\"><\/a>\r\n\t\t\t<div x-show=\"!isLoading\" x-html=\"promptExcerpt\" class=\"has-large-font-size\"><\/div>\r\n\t\t\t<a x-show=\"!isLoading\" x-bind:href=\"promptLink\" target=\"_blank\" rel=\"noopener\">Explore This Prompt Further \u2192<\/a>\r\n\r\n        <\/div>\r\n    <\/div>\r\n\r\n<\/div>\r\n\r\n<!-- Inline JavaScript -->\r\n<script>\r\n    var promptApp = {\r\n        filters: {\r\n            fiction: true,\r\n            nonfiction: true\r\n        },\r\n\t\tisLoading: false,\r\n        promptTitle: '',\r\n\t\tpromptExcerpt: '',\r\n\t\tpromptLink: '',\r\n        fetchRandomPrompt: async function() {\r\n\t\t \tthis.isLoading = true; \/\/ Start loading\r\n            const totalFilteredPosts = await this.fetchTotalFilteredPosts();\r\n\r\n            if (totalFilteredPosts === 0) {\r\n                this.promptContent = 'No prompts found!';\r\n                return;\r\n            }\r\n\r\n            const randomOffset = Math.floor(Math.random() * totalFilteredPosts);\r\n            let endpoint = `\/wp-json\/wp\/v2\/posts?per_page=1&offset=${randomOffset}`;\r\n\r\n            if (this.filters.fiction) {\r\n                endpoint += '&categories[]=9'; \r\n            }\r\n            if (this.filters.nonfiction) {\r\n                endpoint += '&categories[]=43'; \r\n            }\r\n\r\n            try {\r\n                const response = await fetch(endpoint);\r\n\r\n                if (!response.ok) {\r\n                    throw new Error(`HTTP error! Status: ${response.status}`);\r\n                }\r\n\r\n                const data = await response.json();\r\n\r\n                if (data.length) {\r\n\t\t\t\t\tthis.promptTitle = data[0].title.rendered;\r\n\t\t\t\t\tthis.promptExcerpt = data[0].excerpt.rendered;\r\n\t\t\t\t\tthis.promptLink = data[0].link;\r\n\t\t\t\t} else {\r\n\t\t\t\t\tthis.promptTitle = '';\r\n\t\t\t\t\tthis.promptExcerpt = '';\r\n\t\t\t\t\tthis.promptLink = '';\r\n\t\t\t\t}\r\n\r\n\r\n\r\n            } catch (error) {\r\n                console.error(\"Error fetching random prompt:\", error);\r\n                this.promptContent = 'Error fetching prompt!';\r\n            }\r\n\t\t\tthis.isLoading = false; \/\/ End loading\r\n        },\r\n        fetchTotalFilteredPosts: async function() {\r\n            let endpoint = `\/wp-json\/wp\/v2\/posts?_fields=id`;\r\n\r\n            if (this.filters.fiction) {\r\n                endpoint += '&categories[]=9'; \r\n            }\r\n            if (this.filters.nonfiction) {\r\n                endpoint += '&categories[]=43'; \r\n            }\r\n\r\n            try {\r\n                const response = await fetch(endpoint);\r\n\r\n                if (!response.ok) {\r\n                    throw new Error(`HTTP error! Status: ${response.status}`);\r\n                }\r\n\r\n                const data = await response.json();\r\n                return data.length;\r\n\r\n            } catch (error) {\r\n                console.error(\"Error fetching total filtered posts:\", error);\r\n                return 0;\r\n            }\r\n        }\r\n    };\r\n<\/script>\r\n<style>\r\n\t@keyframes spin {\r\n\t\t0% {\r\n\t\t\ttransform: rotate(0deg);\r\n\t\t}\r\n\t\t100% {\r\n\t\t\ttransform: rotate(360deg);\r\n\t\t}\r\n\t}\r\n\r\n.spinning {\r\n    display: inline-block;  \/* Required to apply transform on inline elements *\/\r\n    animation: spin 2s linear infinite;\r\n}\r\n\r\n    \/* Desktop: inline columns *\/\r\n    .flex-container {\r\n        display: flex;\r\n        flex-direction: row;\r\n        align-items: center; \r\n        gap: 1rem;\r\n        flex-wrap: wrap; \r\n    }\r\n\r\n    .flex-container > div {\r\n        flex: 1; \r\n        align-items: flex-start; \r\n    }\r\n\r\n    \/* Mobile: Full-width columns *\/\r\n    @media (max-width: 768px) {\r\n        .flex-container {\r\n            flex-direction: column;\r\n        }\r\n        .flex-container > div {\r\n            width: 100%;\r\n        }\r\n    }\r\n<\/style>\n<\/div>\n\n\n\n<p>\ud83d\udc4b Hi there!<br><br>Our writing prompts here at DraftSparks are 100% free, and we have thousands of them!<\/p>\n\n\n\n<p>Keep clicking the button as much as you like until you get a writing prompt that you find interesting.<\/p>\n\n\n\n<p><strong>How It Works:<\/strong><\/p>\n\n\n\n<ol>\n<li><strong>Choose Your Prompt Type<\/strong>: Select from fiction, non-fiction, or both. We&#8217;ll add new filters in the future if people ask for them!<\/li>\n\n\n\n<li><strong>Get Inspired<\/strong>: Click the black &#8216;Generate Prompt&#8217; button and let the magic begin!<\/li>\n\n\n\n<li><strong>Write &amp; Share<\/strong>: Craft your masterpiece and share it with our community or on social media. Tag us at @DraftSparks on most social networks. \ud83e\udd17<\/li>\n<\/ol>\n\n\n\n<p class=\"has-secondary-background-color has-background\">\ud83d\udd17 <strong>If you like this tool, please consider linking to it from your website! It&#8217;s the number one way that new users can find it via Google.<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">More Free Writing Tools:<\/h2>\n\n\n\n<div class=\"wp-block-columns alignwide is-layout-flex wp-container-core-columns-is-layout-1 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"has-secondary-background-color has-background\"><strong><a href=\"https:\/\/draftsparks.com\/tools\/character-name-generator\/\" data-type=\"page\" data-id=\"45684\">Character Name Generator<\/a><\/strong><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"has-secondary-background-color has-background\"><strong><a href=\"https:\/\/draftsparks.com\/tools\/journaling-prompt-generator\/\">Journal Writing Prompt Generator<\/a><\/strong><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"has-secondary-background-color has-background\"><strong><a href=\"https:\/\/draftsparks.com\/tools\/poetry-prompt-generator\/\">Poetry Prompt Generator<\/a><\/strong><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"has-secondary-background-color has-background\"><strong>More Coming Soon!<\/strong><\/p>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>\ud83d\udc4b Hi there! Our writing prompts here at DraftSparks are 100% free, and we have thousands of them! Keep clicking the button as much as you like until you get a writing prompt that you find interesting. How It Works: \ud83d\udd17 If you like this tool, please consider linking to it from your website! It&#8217;s [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":16,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"_links":{"self":[{"href":"https:\/\/draftsparks.com\/wp-json\/wp\/v2\/pages\/21"}],"collection":[{"href":"https:\/\/draftsparks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/draftsparks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/draftsparks.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/draftsparks.com\/wp-json\/wp\/v2\/comments?post=21"}],"version-history":[{"count":27,"href":"https:\/\/draftsparks.com\/wp-json\/wp\/v2\/pages\/21\/revisions"}],"predecessor-version":[{"id":45910,"href":"https:\/\/draftsparks.com\/wp-json\/wp\/v2\/pages\/21\/revisions\/45910"}],"up":[{"embeddable":true,"href":"https:\/\/draftsparks.com\/wp-json\/wp\/v2\/pages\/16"}],"wp:attachment":[{"href":"https:\/\/draftsparks.com\/wp-json\/wp\/v2\/media?parent=21"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}