SBA

The Document Object Model

Overview

In this Skills-Based Assessment (SBA), you will develop an “Interactive Personal Blog Platform” from scratch.

This project will test your ability to manipulate the DOM, handle user events, implement form validation, and utilize localStorage for data persistence.

The primary focus is on client-side JavaScript functionality to create a dynamic and interactive web application. While the appearance of the application is important, the focus is on the JavaScript functionality, so do not spend too much time on styling.

Time Allotment

Time: 5.5 hours

Scenario

Imagine you are building a personal project: a simple, client-side only blog or journal platform. You want to be able to quickly jot down thoughts, save them, view them later, and manage your entries directly in your browser without needing a backend database. The application should be user-friendly and provide a seamless experience for managing your posts.

Requirements

Your Interactive Personal Blog Platform must include the following features:

Create New Posts:
- A form with fields for a post title and post content (e.g., using <input type="text"> for title and <textarea> for content).
- Upon submission, the new post should be added to a list of posts displayed on the page.
- The form should be validated: both title and content are required.
- Display custom, user-friendly error messages if validation fails.
Display Posts:
- All created posts should be displayed on the page. Each displayed post should clearly show its title and content.
- Posts should be rendered dynamically using JavaScript.
Edit Posts:
- Each displayed post should have an “Edit” button.
- Clicking “Edit” should allow the user to modify the title and content of that specific post. This might involve populating the main form (or a modal form) with the existing post data.
- After editing, the updated post should be reflected in the display.
- Form validation should also apply during editing.
Delete Posts:
- Each displayed post should have a “Delete” button.
- Clicking “Delete” should remove the post from the display and from localStorage.
Data Persistence with localStorage:
- All blog posts (title, content, and perhaps a unique ID and timestamp you generate) must be saved in localStorage.
- When the page is loaded or refreshed, any posts previously saved in localStorage should be retrieved and displayed.
- Updates (from edits) and deletions must also be reflected in localStorage.

Instructions

Part 1: Project Setup

Create Project Files:
- Create a new folder for your project (e.g., personal-blog-sba).
- Inside this folder, create the following files:
  - index.html (for the HTML structure)
  - styles.css (for your CSS styles)
  - script.js (for your JavaScript logic)

Part 2: HTML Structure

Design the Layout (index.html):
- Create a section for the new post form (including input for title, textarea for content, and a submit button).
- Create a section where the list of blog posts will be displayed dynamically.
- Ensure you have elements (e.g., <span>) near your form inputs to display validation error messages.
- Link your styles.css and script.js files.

Part 3: CSS Styling

Style the Application (styles.css):
- Apply basic styling to make the application clean, readable, and user-friendly.
- Style the form, input fields, buttons, and the display area for posts.
- Style the error messages to be noticeable (e.g., red text).

Part 4: JavaScript Implementation

Core Logic (script.js):
- Global Variables/State: Plan how you’ll manage your posts (e.g., an array of post objects).
- DOM Element Selection: Get references to your form, input fields, error message elements, post display area, etc.
- Load Posts from localStorage: On script load, check localStorage for existing posts. If found, parse them and render them on the page.
- Render Posts Function: Create a function that takes the array of posts and dynamically creates the HTML to display them. Each post should include its title, content, an “Edit” button, and a “Delete” button. Ensure new posts are added to the display without needing a page refresh.
- Handle New Post Form Submission:
  - Add an event listener to the form’s submit event.
  - Prevent the default form submission using event.preventDefault().
  - Validate the form inputs (title and content are required). Display custom error messages if invalid.
  - If valid, create a new post object (e.g., with id, title, content, timestamp).
  - Add the new post to your local array of posts.
  - Save the updated array of posts to localStorage (remember to JSON.stringify).
  - Re-render the list of posts on the page.
  - Clear the form fields.
- Handle Delete Post:
  - Use event delegation or add event listeners to “Delete” buttons.
  - When a “Delete” button is clicked, identify the post to be deleted (e.g., using a data attribute for the post ID).
  - Remove the post from your local array.
  - Update localStorage.
  - Re-render the posts.
- Handle Edit Post:
  - Add event listeners to “Edit” buttons.
  - When an “Edit” button is clicked, populate the form (or a dedicated edit form/modal) with the selected post’s title and content. You’ll need a way to track which post is being edited.
  - Modify the form submission logic (or create a separate update function) to update the existing post in your local array instead of creating a new one.
  - Update localStorage.
  - Re-render the posts.
- Utility Functions (Optional but Recommended): Consider helper functions for tasks like generating unique IDs, saving to localStorage, loading from localStorage, etc.

Part 5: Testing and Refinement

Test All Features Thoroughly:
- Adding new posts with valid and invalid data.
- Display of posts.
- Editing posts (ensure correct post is updated).
- Deleting posts.
- Persistence: Refresh the page, close and reopen the browser to ensure posts are saved and loaded correctly from localStorage.
Review Code: Check for any errors, improve readability, and add comments where necessary.

Deliverables

Submit the following to Canvas via a GitHub repository:

Project Files:
- index.html
- styles.css
- script.js
A README.md file. This file should include:
- A brief description of your project.
- Instructions on how to run the application (if anything beyond opening index.html in a browser is needed).
- A reflection on your development process, challenges faced, and how you overcame them.
- Any known issues or features not implemented.

Rubric for Evaluation (100 points total)

Criteria	Excellent	Good	Satisfactory	Needs Improvement	Points
HTML Structure (10 pts)	Semantic, well-organized, accessible (e.g., labels). All required elements present.	Mostly semantic & organized, minor issues. Most required elements present.	Basic structure, some non-semantic elements or disorganization. Some elements may be missing.	Poorly structured or largely non-semantic. Key elements missing.	___ / 10
CSS Styling (5 pts)	Clean, readable, effective styling; good visual hierarchy and UX.	Adequate styling, mostly readable, minor layout/aesthetic issues.	Basic styling, some readability or layout problems.	Minimal or poor styling, significantly impacts UX.	___ / 10
DOM Element Selection & Creation (15 pts)	Efficiently & correctly uses `querySelector`/`querySelectorAll`; correctly creates & appends new DOM elements.	Mostly correct usage, minor inefficiencies or errors.	Basic usage, several errors or significant inefficiencies in selection or creation.	Incorrect or minimal use of selection/creation methods.	___ / 15
Dynamic DOM Content & Attributes (20 pts)	Effectively manipulates content & attributes for dynamic updates; uses template literals well. All post data (title, content) clearly displayed.	Mostly effective manipulation, minor errors. Most post data displayed.	Basic manipulation, several errors or missed updates. Post display may be incomplete or unclear.	Poor or incorrect content/attribute manipulation. Post display significantly flawed.	___ / 15
Event Handling (20 pts)	Correctly implements `addEventListener` for all interactions (add, edit, delete, form submit); `event.preventDefault()` used appropriately.	Mostly correct event handling, minor issues with listeners or event object usage. Most interactions functional.	Basic event handling, some interactions missing or incorrectly implemented.	Poor or missing event handling; major interactions non-functional.	___ / 20
Form Validation (15 pts)	Robust client-side validation (HTML5 & JS) for new/edited posts; clear, custom error messages.	Good validation, most cases covered, minor issues with messages or logic.	Basic validation, significant gaps or poor error messages.	Minimal or no effective form validation.	___ / 15
Local Storage Implementation (10 pts)	Correctly uses `localStorage` to save, retrieve, update, & delete posts (array of objects with `JSON.stringify`/`JSON.parse`); data persists.	`localStorage` used, minor issues with data handling or persistence.	Basic `localStorage` usage, significant errors in persistence or data handling.	`localStorage` not implemented or fundamentally incorrect.	___ / 10
Code Quality & Readability (5 pts)	Well-organized, easy to read, meaningful names, helpful comments.	Mostly readable, minor organizational issues or sparse comments.	Difficult to read, poorly organized, or lacks comments.	Code is very difficult to understand.	___ / 5
Total Points					___ / 100

Submission Guidelines

Ensure all project files (index.html, styles.css, script.js) and the README.md are included in your submission.
Follow the specific submission instructions provided by your facilitator.
Make sure your JavaScript code is well-commented, explaining the logic of key functions or complex sections.

Good luck! We look forward to seeing your interactive blog platform.