🚀 API Explorer

Learn to work with APIs using Fetch API

🌐 Your API Base URL: https://api.techshare.cc/api

🎮 Basic Tasks

📋 Task 1: Get All Users

fetch('https://api.techshare.cc/api/users') .then(response => response.json()) .then(data => { document.getElementById('output_users').textContent = JSON.stringify(data); })
JSON.stringify(data) converts JavaScript objects to readable text.
Results will appear here...

👤 Task 2: Get a Specific User

fetch('https://api.techshare.cc/api/users/693c0a4357cce1118095f635') .then(response => response.json()) .then(data => { document.getElementById('output_user').textContent = JSON.stringify(data); })
Results will appear here...

📝 Task 3: Get All Posts

fetch('https://api.techshare.cc/api/posts') .then(response => response.json()) .then(data => { const titles = data.map(post => post.title); document.getElementById('output_posts').textContent = JSON.stringify(titles); })
.map() extracts just the title from each post.
Results will appear here...

➕ Task 4: Create a New Post

fetch('https://api.techshare.cc/api/posts', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ title: 'My First API Post', content: 'Learning APIs is fun!', userId: 1, published: true }) }) .then(response => response.json()) .then(data => { document.getElementById('output_create').textContent = JSON.stringify(data); })
method: 'POST' creates new data. body: sends our data to the API.
Results will appear here...

💡 Bonus Challenges

🔍 Challenge: Filter Posts by User

fetch('https://api.techshare.cc/api/posts') .then(response => response.json()) .then(posts => { const userPosts = posts.filter(post => post.userId === 1); document.getElementById('output_filter').textContent = 'Posts by user 1: ' + userPosts.length; })
.filter() keeps only items matching our condition.
Results will appear here...
💡 Remember: fetch() gets data → .then() processes it → JSON.stringify() displays it.