Javascript

Photo Filter Website: User-Friendly Navigation

Photo Filter Website: User-Friendly Navigation

Key Features for Navigation:

  • Clear filter categories (e.g., Brightness, Contrast, Grayscale)

  • Easy-to-use controls (sliders, buttons)

  • Instant preview of changes

  • Responsive layout for desktop and mobile

  • Accessible labels and tooltips

Example HTML + CSS + JS: Basic Filter UI with Navigation

html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Photo Filter Demo</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
h1 {
text-align: center;
}
#image-container {
text-align: center;
margin-bottom: 20px;
}
img {
max-width: 100%;
border-radius: 8px;
}
.filters {
display: flex;
flex-direction: column;
gap: 15px;
}
.filter-group {
display: flex;
align-items: center;
justify-content: space-between;
}
label {
flex: 1;
min-width: 120px;
}
input[type="range"] {
flex: 2;
}
</style>
</head>
<body>

<h1>Photo Filter Website</h1>

<div id="image-container">
<img id="photo" src="https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d" alt="Sample Photo" />
</div>

<div class="filters" role="navigation" aria-label="Photo Filters">
<div class="filter-group">
<label for="brightness">Brightness</label>
<input type="range" id="brightness" min="0" max="200" value="100" aria-valuemin="0" aria-valuemax="200" aria-valuenow="100" />
</div>
<div class="filter-group">
<label for="contrast">Contrast</label>
<input type="range" id="contrast" min="0" max="200" value="100" aria-valuemin="0" aria-valuemax="200" aria-valuenow="100" />
</div>
<div class="filter-group">
<label for="grayscale">Grayscale</label>
<input type="range" id="grayscale" min="0" max="100" value="0" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" />
</div>
<div class="filter-group">
<label for="sepia">Sepia</label>
<input type="range" id="sepia" min="0" max="100" value="0" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" />
</div>
</div>

<script>
const photo = document.getElementById('photo');

const filters = {
brightness: 100,
contrast: 100,
grayscale: 0,
sepia: 0
};

function updateFilters() {
const filterString = `
brightness(${filters.brightness}%)
contrast(${filters.contrast}%)
grayscale(${filters.grayscale}%)
sepia(${filters.sepia}%)
`;
photo.style.filter = filterString;
}

document.querySelectorAll('.filters input[type="range"]').forEach(input => {
input.addEventListener('input', e => {
const { id, value } = e.target;
filters[id] = value;
e.target.setAttribute('aria-valuenow', value);
updateFilters();
});
});

updateFilters(); // initialize filter on load
</script>

</body>
</html>

How This Works

  • Navigation via Sliders: Users adjust sliders labeled with filter names.

  • Live Preview: Image updates immediately on slider change.

  • Accessible: Labels linked to inputs; ARIA attributes help screen readers.

  • Simple UI: Clean layout, easy to understand.

Next Steps to Improve Navigation

  • Add preset filter buttons (“Vintage,” “Bright,” etc.)

  • Mobile-friendly hamburger menu for many filters

  • Keyboard navigation support for sliders

  • Reset button to clear all filters

  • Save/share filtered image functionality

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *