technolyceum/g10-m2
Template
15
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

deleted

Browse Source
This commit is contained in:
root
2025-12-18 16:04:11 +03:00
parent f5b8759926
commit 032ae9192b
3 changed files with 0 additions and 339 deletions
Download Patch File Download Diff File Expand all files Collapse all files

330
Presentation API Explorer - Starter Template.html
View File

@@ -1,330 +0,0 @@
<!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 =&gt; response.json())
.then(data =&gt; {
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 =&gt; response.json())
.then(data =&gt; {
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 =&gt; response.json())
.then(data =&gt; {
const titles = data.map(post =&gt; 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 =&gt; response.json())
.then(data =&gt; {
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 =&gt; response.json())
.then(posts =&gt; {
const userPosts = posts.filter(post =&gt; 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>

0
Python Loops & Code Tracing.html → Presentation Python Loops & Code Tracing.html
View File

9
Python Loops & Code Tracing_files/all.min.css vendored
View File

File diff suppressed because one or more lines are too long