330 lines
11 KiB
HTML
330 lines
11 KiB
HTML
<!DOCTYPE html>
|
||
<!-- saved from url=(0069)file:///Users/home/Downloads/deepseek_html_20251218_ab3325%20(4).html -->
|
||
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>API Explorer - Starter Template</title>
|
||
<style>
|
||
* {
|
||
box-sizing: border-box;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
body {
|
||
font-family: Arial, sans-serif;
|
||
line-height: 1.6;
|
||
color: #333;
|
||
background: #f5f5f5;
|
||
padding: 20px;
|
||
}
|
||
|
||
.container {
|
||
max-width: 1000px;
|
||
margin: 0 auto;
|
||
background: white;
|
||
border-radius: 10px;
|
||
padding: 30px;
|
||
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
h1 {
|
||
color: #4361ee;
|
||
text-align: center;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.subtitle {
|
||
text-align: center;
|
||
color: #666;
|
||
margin-bottom: 30px;
|
||
font-size: 1.1rem;
|
||
}
|
||
|
||
.api-url {
|
||
background: #e8f4fd;
|
||
padding: 15px;
|
||
border-radius: 8px;
|
||
text-align: center;
|
||
margin: 20px 0;
|
||
font-family: 'Courier New', monospace;
|
||
font-size: 1.1rem;
|
||
border-left: 4px solid #4361ee;
|
||
}
|
||
|
||
.section {
|
||
background: #f8f9fa;
|
||
padding: 20px;
|
||
border-radius: 8px;
|
||
margin: 25px 0;
|
||
border-left: 4px solid #4cc9f0;
|
||
}
|
||
|
||
h2 {
|
||
color: #3a0ca3;
|
||
margin-bottom: 15px;
|
||
padding-bottom: 8px;
|
||
border-bottom: 2px solid #f0f0f0;
|
||
}
|
||
|
||
h3 {
|
||
color: #4361ee;
|
||
margin: 20px 0 10px 0;
|
||
}
|
||
|
||
.task {
|
||
background: white;
|
||
padding: 15px;
|
||
border-radius: 6px;
|
||
margin: 15px 0;
|
||
border: 1px solid #e0e0e0;
|
||
}
|
||
|
||
button {
|
||
background: #4361ee;
|
||
color: white;
|
||
border: none;
|
||
padding: 10px 20px;
|
||
border-radius: 5px;
|
||
cursor: pointer;
|
||
font-size: 1rem;
|
||
margin: 5px;
|
||
transition: background 0.3s;
|
||
}
|
||
|
||
button:hover {
|
||
background: #3a0ca3;
|
||
}
|
||
|
||
.output-area {
|
||
background: #2d2d2d;
|
||
color: #f8f8f2;
|
||
padding: 15px;
|
||
border-radius: 6px;
|
||
min-height: 80px;
|
||
max-height: 300px;
|
||
overflow-y: auto;
|
||
font-family: 'Courier New', monospace;
|
||
font-size: 0.9rem;
|
||
white-space: pre-wrap;
|
||
word-wrap: break-word;
|
||
margin-top: 10px;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.note {
|
||
background: #fff3cd;
|
||
border-left: 4px solid #ffc107;
|
||
padding: 12px;
|
||
margin: 15px 0;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.note strong {
|
||
color: #856404;
|
||
}
|
||
|
||
.instructions {
|
||
background: #e8f5e9;
|
||
padding: 15px;
|
||
border-radius: 6px;
|
||
margin: 20px 0;
|
||
border-left: 4px solid #4caf50;
|
||
}
|
||
|
||
.code-block {
|
||
background: #f8f9fa;
|
||
padding: 10px;
|
||
border-radius: 5px;
|
||
font-family: 'Courier New', monospace;
|
||
margin: 10px 0;
|
||
border-left: 3px solid #4361ee;
|
||
white-space: pre;
|
||
overflow-x: auto;
|
||
}
|
||
|
||
.explanation {
|
||
background: #e8f4fd;
|
||
padding: 10px;
|
||
border-radius: 5px;
|
||
margin: 10px 0;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.explanation code {
|
||
background: #e3f2fd;
|
||
padding: 2px 4px;
|
||
border-radius: 3px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<h1>🚀 API Explorer</h1>
|
||
<p class="subtitle">Learn to work with APIs using Fetch API</p>
|
||
|
||
<div class="api-url">
|
||
🌐 Your API Base URL: <strong>https://api.techshare.cc/api</strong>
|
||
</div>
|
||
|
||
<!-- Section 1: Basic Tasks -->
|
||
<div class="section">
|
||
<h2>🎮 Basic Tasks</h2>
|
||
|
||
<!-- Task 1 -->
|
||
<div class="task">
|
||
<h3>📋 Task 1: Get All Users</h3>
|
||
<div class="code-block">fetch('https://api.techshare.cc/api/users')
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
document.getElementById('output_users').textContent = JSON.stringify(data);
|
||
})</div>
|
||
<div class="explanation">
|
||
<strong>JSON.stringify(data)</strong> converts JavaScript objects to readable text.
|
||
</div>
|
||
<button onclick="runTask1()">Run Task 1</button>
|
||
<div class="output-area" id="output_users">Results will appear here...</div>
|
||
</div>
|
||
|
||
<!-- Task 2 -->
|
||
<div class="task">
|
||
<h3>👤 Task 2: Get a Specific User</h3>
|
||
<div class="code-block">fetch('https://api.techshare.cc/api/users/693c0a4357cce1118095f635')
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
document.getElementById('output_user').textContent = JSON.stringify(data);
|
||
})</div>
|
||
<button onclick="runTask2()">Run Task 2</button>
|
||
<div class="output-area" id="output_user">Results will appear here...</div>
|
||
</div>
|
||
|
||
<!-- Task 3 -->
|
||
<div class="task">
|
||
<h3>📝 Task 3: Get All Posts</h3>
|
||
<div class="code-block">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);
|
||
})</div>
|
||
<div class="explanation">
|
||
<strong>.map()</strong> extracts just the title from each post.
|
||
</div>
|
||
<button onclick="runTask3()">Run Task 3</button>
|
||
<div class="output-area" id="output_posts">Results will appear here...</div>
|
||
</div>
|
||
|
||
<!-- Task 4 -->
|
||
<div class="task">
|
||
<h3>➕ Task 4: Create a New Post</h3>
|
||
<div class="code-block">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);
|
||
})</div>
|
||
<div class="explanation">
|
||
<strong>method: 'POST'</strong> creates new data. <strong>body:</strong> sends our data to the API.
|
||
</div>
|
||
<button onclick="runTask4()">Run Task 4</button>
|
||
<div class="output-area" id="output_create">Results will appear here...</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Section 2: Bonus Challenges -->
|
||
<div class="section">
|
||
<h2>💡 Bonus Challenges</h2>
|
||
|
||
<div class="task">
|
||
<h3>🔍 Challenge: Filter Posts by User</h3>
|
||
<div class="code-block">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;
|
||
})</div>
|
||
<div class="explanation">
|
||
<strong>.filter()</strong> keeps only items matching our condition.
|
||
</div>
|
||
<button onclick="runChallenge1()">Run Challenge</button>
|
||
<div class="output-area" id="output_filter">Results will appear here...</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="note">
|
||
<strong>💡 Remember:</strong>
|
||
<code>fetch()</code> gets data → <code>.then()</code> processes it → <code>JSON.stringify()</code> displays it.
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// Pre-written solutions for demonstration
|
||
function runTask1() {
|
||
fetch('https://api.techshare.cc/api/users')
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
document.getElementById('output_users').textContent = JSON.stringify(data);
|
||
});
|
||
}
|
||
|
||
function runTask2() {
|
||
fetch('https://api.techshare.cc/api/users/693c0a4357cce1118095f635')
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
document.getElementById('output_user').textContent = JSON.stringify(data);
|
||
});
|
||
}
|
||
|
||
function runTask3() {
|
||
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);
|
||
});
|
||
}
|
||
|
||
function runTask4() {
|
||
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);
|
||
});
|
||
}
|
||
|
||
function runChallenge1() {
|
||
fetch('https://api.techshare.cc/api/posts')
|
||
.then(response => response.json())
|
||
.then(posts => {
|
||
const userPosts = posts.filter(post => post.userId == '_693c0a4357cce1118095f635');
|
||
document.getElementById('output_filter').textContent =
|
||
'Posts by user 1: ' + userPosts;
|
||
});
|
||
}
|
||
|
||
// Initialize
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
console.log('API Explorer Ready!');
|
||
});
|
||
</script>
|
||
|
||
</body></html> |