364 lines
12 KiB
HTML
364 lines
12 KiB
HTML
<!DOCTYPE html>
|
||
<!-- saved from url=(0069)file:///Users/home/Downloads/deepseek_html_20251218_ab3325%20(6).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;
|
||
}
|
||
|
||
.input-group {
|
||
margin: 10px 0;
|
||
}
|
||
|
||
.input-group label {
|
||
display: block;
|
||
margin-bottom: 5px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.input-group input[type="text"],
|
||
.input-group input[type="number"],
|
||
.input-group textarea {
|
||
width: 100%;
|
||
padding: 8px;
|
||
border: 1px solid #ddd;
|
||
border-radius: 4px;
|
||
font-family: Arial, sans-serif;
|
||
}
|
||
|
||
.input-group textarea {
|
||
min-height: 80px;
|
||
resize: vertical;
|
||
}
|
||
|
||
.checkbox-group {
|
||
display: flex;
|
||
align-items: center;
|
||
margin: 10px 0;
|
||
}
|
||
|
||
.checkbox-group input {
|
||
margin-right: 8px;
|
||
}
|
||
</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('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="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('user').textContent = JSON.stringify(data);
|
||
})</div>
|
||
<button onclick="runTask2()">Run Task 2</button>
|
||
<div class="output-area" id="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('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="posts">Results will appear here...</div>
|
||
</div>
|
||
|
||
<!-- Task 4 -->
|
||
<div class="task">
|
||
<h3>➕ Task 4: Create a New Post</h3>
|
||
|
||
<div class="input-group">
|
||
<label for="postTitle">Post Title:</label>
|
||
<input type="text" id="postTitle" value="My First API Post">
|
||
</div>
|
||
|
||
<div class="input-group">
|
||
<label for="postContent">Post Content:</label>
|
||
<textarea id="postContent">Learning APIs is fun!</textarea>
|
||
</div>
|
||
|
||
<div class="checkbox-group">
|
||
<input type="checkbox" id="postPublished" checked="">
|
||
<label for="postPublished">Published</label>
|
||
</div>
|
||
|
||
<div class="code-block">const title = document.getElementById('postTitle').value;
|
||
const content = document.getElementById('postContent').value;
|
||
const published = document.getElementById('postPublished').checked;
|
||
|
||
fetch('https://api.techshare.cc/api/posts', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({
|
||
title: title,
|
||
content: content,
|
||
userId: '693c0a4357cce1118095f635',
|
||
published: published
|
||
})
|
||
})
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
document.getElementById('create').textContent = JSON.stringify(data);
|
||
})</div>
|
||
<div class="explanation">
|
||
<strong>method: 'POST'</strong> creates new data.<br>
|
||
<strong>userId</strong> is hardcoded to user 693c0a4357cce1118095f635.
|
||
</div>
|
||
<button onclick="runTask4()">Run Task 4</button>
|
||
<div class="output-area" id="create">Results will appear here...</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Section 2: Bonus Challenges -->
|
||
<div class="section">
|
||
<h2>💡 Bonus Challenges</h2>
|
||
|
||
<div class="task">
|
||
<h3>🔍 Challenge 1: Filter Posts by User ID</h3>
|
||
<p>First, run Task 2 to see user details. Note the <code>id</code> field (not <code>_id</code>).</p>
|
||
|
||
<div class="input-group">
|
||
<label for="userIdInput">Enter User ID to filter by:</label>
|
||
<input type="number" id="userIdInput" value="1">
|
||
</div>
|
||
|
||
<div class="code-block">const userId = document.getElementById('userIdInput').value;
|
||
|
||
fetch('https://api.techshare.cc/api/posts')
|
||
.then(response => response.json())
|
||
.then(posts => {
|
||
const userPosts = posts.filter(post => post.userId === Number(userId));
|
||
document.getElementById('filter').textContent =
|
||
'Posts by user ID ' + userId + ': ' + JSON.stringify(userPosts);
|
||
})</div>
|
||
<div class="explanation">
|
||
<strong>Number(userId)</strong> converts text to number for comparison.<br>
|
||
Posts use <code>userId</code> (like 1, 2, 3), not MongoDB <code>_id</code>.
|
||
</div>
|
||
<button onclick="runChallenge1()">Run Challenge 1</button>
|
||
<div class="output-area" id="filter">Results will appear here...</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="note">
|
||
<strong>💡 Important:</strong>
|
||
User ID in posts is different from MongoDB <code>_id</code>.
|
||
Check Task 2 results: user <code>693c0a4357cce1118095f635</code> has <code>id: "1"</code>.
|
||
So posts with <code>userId: 1</code> belong to this user.
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
function runTask1() {
|
||
// Students type their code here
|
||
}
|
||
|
||
function runTask2() {
|
||
// Students type their code here
|
||
}
|
||
|
||
function runTask3() {
|
||
// Students type their code here
|
||
}
|
||
|
||
function runTask4() {
|
||
// Students type their code here
|
||
}
|
||
|
||
function runChallenge1() {
|
||
// Students type their code here
|
||
}
|
||
|
||
// Initialize
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
console.log('API Explorer Ready!');
|
||
});
|
||
</script>
|
||
|
||
</body></html> |