In this challenge, I will be creating a two-page website where users will input and view blog posts. It includes building a content form, dynamically rendering blog posts, and implementing a light/dark mode toggle.
AS A marketing student I WANT a personal blog SO THAT I can showcase my thoughts and experiences
GIVEN a personal blog WHEN I load the app, THEN I am presented with the landing page containing a form with labels and inputs for username, blog title, and blog content. WHEN I submit the form, THEN blog post data is stored to localStorage. WHEN the form submits, THEN I am redirected to the posts page. WHEN I enter try to submit a form without a username, title, or content, THEN I am presented with a message that prompts me to complete the form. WHEN I view the posts page, THEN I am presented with a header, with a light mode/dark mode toggle, and a "Back" button. WHEN I click the light mode/dark mode toggle, THEN the page content's styles update to reflect the selection. WHEN I click the "Back" button, THEN I am redirected back to the landing page where I can input more blog entries. WHEN I view the main content, THEN I am presented with a list of blog posts that are pulled from localStorage. WHEN I view localStorage, THEN I am presented with a JSON array of blog post objects, each including the post author's username, title of the post, and post's content. WHEN I take a closer look at a single blog entry in the list, THEN I can see the title, the content, and the author of the post. WHEN I view the footer, THEN I am presented with a link to the developer's portfolio.
<img width="1018" alt="Screen Shot 
2024-08-20 at 8 38 37 PM" src="https://gi
thub.com/user-attachments/assets/f
9cdd7c2-beb3-4d1b-ab5b-fa2aa88c8614">
mock-up.mp4
Deployment link