Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
80 changes: 80 additions & 0 deletions PhotoShotListPlanner/cobie1818/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
# Photo Shot List Planner

A responsive photography planning app built with HTML, CSS, and vanilla
JavaScript. Photographers can organize shot ideas before a trip or photo
session and track which shots they have completed.

## Features

- Add shots with a title, category, and priority.
- Reject empty and whitespace-only titles.
- Mark shots as completed or pending.
- Filter by all, pending, or completed shots.
- Delete individual shots.
- Display a completed-shot counter.
- Save the list in localStorage between page visits.
- Adapt the layout to desktop and mobile screens.

## Technologies

- HTML5 for page structure and form controls
- CSS3 for styling and responsive layouts
- Vanilla JavaScript for interactions and list management
- Browser localStorage for persistence

No framework, package installation, API key, or database is required.
VS Code's Live Server extension is used for local development.

## Run Locally

1. Clone or download the repository.
2. Open the repository folder in VS Code.
3. Install the Live Server extension if it is not already installed.
4. Navigate to PhotoShotListPlanner/cobie1818.
5. Right-click index.html and select "Open with Live Server."

## How to Use

1. Enter a shot idea.
2. Select its category and priority.
3. Click "Add shot."
4. Use a shot's checkbox to toggle its completion status.
5. Use "Show shots" to filter the list.
6. Click "Delete" to remove an unwanted shot.

## Data Storage

The list is saved in the current browser on the current device.
It does not synchronize between browsers or devices. Clearing browser
site data removes the saved list.

The app displays a message if stored data cannot be loaded or changes
cannot be saved. User-entered titles are displayed as text rather
than interpreted as HTML.

## Manual Testing

The following checks were performed in Microsoft Edge:

- Adding shots with different categories and priorities
- Completing shots and returning them to pending
- Updating the completion counter
- Filtering completed and pending shots
- Retaining the list and completion status after refresh
- Rejecting empty and whitespace-only titles
- Adding and deleting a temporary shot
- Inspecting the responsive layout at a 375-pixel viewport width

No automated tests are included with this contribution.

## Screenshot

![Photo Shot List Planner with sample shots](screenshot.png)

## Related Issue

https://github.com/thinkswell/javascript-mini-projects/issues/1245

## Author

Jacobie Jackson (cobie1818)
86 changes: 86 additions & 0 deletions PhotoShotListPlanner/cobie1818/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Photo Shot List Planner</title>
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>
</head>
<body>
<main class="container">
<header>
<p class="eyebrow">PLAN YOUR NEXT PHOTO SESSION</p>
<h1>Photo Shot List Planner</h1>
<p>Keep your ideas organized and capture every shot that matters.</p>
</header>

<section class="panel" aria-labelledby="add-heading">
<h2 id="add-heading">Add a shot</h2>

<form id="shot-form">
<div class="field">
<label for="shot-title">Shot idea</label>
<input
type="text"
id="shot-title"
placeholder="Example: Sunset over the city skyline"
maxlength="120"
required
>
</div>

<div class="form-row">
<div class="field">
<label for="shot-category">Category</label>
<select id="shot-category">
<option value="Landscape">Landscape</option>
<option value="Street">Street</option>
<option value="Portrait">Portrait</option>
<option value="Architecture">Architecture</option>
<option value="Detail">Detail</option>
<option value="Other">Other</option>
</select>
</div>

<div class="field">
<label for="shot-priority">Priority</label>
<select id="shot-priority">
<option value="High">High</option>
<option value="Medium" selected>Medium</option>
<option value="Low">Low</option>
</select>
</div>
</div>

<button type="submit" class="primary-button">Add shot</button>
</form>

<p id="feedback" role="status" aria-live="polite"></p>
</section>

<section class="panel" aria-labelledby="list-heading">
<div class="list-header">
<h2 id="list-heading">Your shot list</h2>
<p id="shot-count" aria-live="polite">0 of 0 shots completed</p>
</div>

<div class="field filter-field">
<label for="shot-filter">Show shots</label>
<select id="shot-filter">
<option value="all">All shots</option>
<option value="pending">Pending</option>
<option value="completed">Completed</option>
</select>
</div>

<p id="empty-message">Your list is empty. Add your first shot above.</p>
<ul id="shot-list" class="shot-list"></ul>
</section>

<footer>
<p>Your shot list is saved in this browser on this device.</p>
</footer>
</main>
</body>
</html>
Binary file added PhotoShotListPlanner/cobie1818/screenshot.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading