feat(curriculum): restore seed + solution to Chinese (#40683)
* feat(tools): add seed/solution restore script * chore(curriculum): remove empty sections' markers * chore(curriculum): add seed + solution to Chinese * chore: remove old formatter * fix: update getChallenges parse translated challenges separately, without reference to the source * chore(curriculum): add dashedName to English * chore(curriculum): add dashedName to Chinese * refactor: remove unused challenge property 'name' * fix: relax dashedName requirement * fix: stray tag Remove stray `pre` tag from challenge file. Signed-off-by: nhcarrigan <nhcarrigan@gmail.com> Co-authored-by: nhcarrigan <nhcarrigan@gmail.com>
This commit is contained in:
Oliver Eyton-Williams
committed by
GitHub
GitHub
parent
0095583028
commit
ee1e8abd87
@ -3,6 +3,7 @@ id: 587d7fae367417b2b2512be4
|
||||
title: 访问来自 API 的 JSON 数据
|
||||
challengeType: 6
|
||||
forumTopicId: 301499
|
||||
dashedName: access-the-json-data-from-an-api
|
||||
---
|
||||
|
||||
# --description--
|
||||
@ -46,5 +47,120 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function(){
|
||||
document.getElementById('getMessage').onclick = function(){
|
||||
const req = new XMLHttpRequest();
|
||||
req.open("GET",'/json/cats.json', true);
|
||||
req.send();
|
||||
req.onload=function(){
|
||||
const json = JSON.parse(req.responseText);
|
||||
document.getElementsByClassName('message')[0].innerHTML = JSON.stringify(json);
|
||||
// Add your code below this line
|
||||
|
||||
// Add your code above this line
|
||||
};
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: "Helvetica", sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.box {
|
||||
border-radius: 5px;
|
||||
background-color: #eee;
|
||||
padding: 20px 5px;
|
||||
}
|
||||
button {
|
||||
color: white;
|
||||
background-color: #4791d0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #4791d0;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0F5897;
|
||||
border: 1px solid #0F5897;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h1>Cat Photo Finder</h1>
|
||||
<p class="message box">
|
||||
The message will go here
|
||||
</p>
|
||||
<p>
|
||||
<button id="getMessage">
|
||||
Get Message
|
||||
</button>
|
||||
</p>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function(){
|
||||
document.getElementById('getMessage').onclick = function(){
|
||||
const req = new XMLHttpRequest();
|
||||
req.open("GET",'/json/cats.json', true);
|
||||
req.send();
|
||||
req.onload=function(){
|
||||
const json = JSON.parse(req.responseText);
|
||||
document.getElementsByClassName('message')[0].innerHTML = JSON.stringify(json);
|
||||
// Add your code below this line
|
||||
console.log(json[2].codeNames[1]);
|
||||
// Add your code above this line
|
||||
};
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: "Helvetica", sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.box {
|
||||
border-radius: 5px;
|
||||
background-color: #eee;
|
||||
padding: 20px 5px;
|
||||
}
|
||||
button {
|
||||
color: white;
|
||||
background-color: #4791d0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #4791d0;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0F5897;
|
||||
border: 1px solid #0F5897;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h1>Cat Photo Finder</h1>
|
||||
<p class="message">
|
||||
The message will go here
|
||||
</p>
|
||||
<p>
|
||||
<button id="getMessage">
|
||||
Get Message
|
||||
</button>
|
||||
</p>
|
||||
```
|
||||
|
||||
@ -3,6 +3,7 @@ id: 587d7fad367417b2b2512be2
|
||||
title: 通过单击事件更改文本
|
||||
challengeType: 6
|
||||
forumTopicId: 301500
|
||||
dashedName: change-text-with-click-events
|
||||
---
|
||||
|
||||
# --description--
|
||||
@ -31,5 +32,107 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function(){
|
||||
document.getElementById('getMessage').onclick = function(){
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: "Helvetica", sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.box {
|
||||
border-radius: 5px;
|
||||
background-color: #eee;
|
||||
padding: 20px 5px;
|
||||
}
|
||||
button {
|
||||
color: white;
|
||||
background-color: #4791d0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #4791d0;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0F5897;
|
||||
border: 1px solid #0F5897;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h1>Cat Photo Finder</h1>
|
||||
<p class="message box">
|
||||
The message will go here
|
||||
</p>
|
||||
<p>
|
||||
<button id="getMessage">
|
||||
Get Message
|
||||
</button>
|
||||
</p>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded',function(){
|
||||
document.getElementById('getMessage').onclick = function(){
|
||||
// Add your code below this line
|
||||
document.getElementsByClassName('message')[0].textContent = "Here is the message";
|
||||
// Add your code above this line
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: "Helvetica", sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.box {
|
||||
border-radius: 5px;
|
||||
background-color: #eee;
|
||||
padding: 20px 5px;
|
||||
}
|
||||
button {
|
||||
color: white;
|
||||
background-color: #4791d0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #4791d0;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0F5897;
|
||||
border: 1px solid #0F5897;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h1>Cat Photo Finder</h1>
|
||||
<p class="message">
|
||||
The message will go here
|
||||
</p>
|
||||
<p>
|
||||
<button id="getMessage">
|
||||
Get Message
|
||||
</button>
|
||||
</p>
|
||||
```
|
||||
|
||||
@ -3,6 +3,7 @@ id: 587d7fae367417b2b2512be5
|
||||
title: 将 JSON 数据转换为 HTML
|
||||
challengeType: 6
|
||||
forumTopicId: 16807
|
||||
dashedName: convert-json-data-to-html
|
||||
---
|
||||
|
||||
# --description--
|
||||
@ -69,5 +70,130 @@ assert(code.match(/json\.forEach/g));
|
||||
assert(code.match(/<strong>.+<\/strong>/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function(){
|
||||
document.getElementById('getMessage').onclick = function(){
|
||||
const req = new XMLHttpRequest();
|
||||
req.open("GET",'/json/cats.json',true);
|
||||
req.send();
|
||||
req.onload = function(){
|
||||
const json = JSON.parse(req.responseText);
|
||||
let html = "";
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
document.getElementsByClassName('message')[0].innerHTML = html;
|
||||
};
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: "Helvetica", sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.box {
|
||||
border-radius: 5px;
|
||||
background-color: #eee;
|
||||
padding: 20px 5px;
|
||||
}
|
||||
button {
|
||||
color: white;
|
||||
background-color: #4791d0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #4791d0;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0F5897;
|
||||
border: 1px solid #0F5897;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h1>Cat Photo Finder</h1>
|
||||
<p class="message box">
|
||||
The message will go here
|
||||
</p>
|
||||
<p>
|
||||
<button id="getMessage">
|
||||
Get Message
|
||||
</button>
|
||||
</p>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function(){
|
||||
document.getElementById('getMessage').onclick = function(){
|
||||
const req = new XMLHttpRequest();
|
||||
req.open("GET",'/json/cats.json',true);
|
||||
req.send();
|
||||
req.onload = function(){
|
||||
const json = JSON.parse(req.responseText);
|
||||
let html = "";
|
||||
// Add your code below this line
|
||||
json.forEach(function(val) {
|
||||
var keys = Object.keys(val);
|
||||
html += "<div class = 'cat'>";
|
||||
keys.forEach(function(key) {
|
||||
html += "<strong>" + key + "</strong>: " + val[key] + "<br>";
|
||||
});
|
||||
html += "</div><br>";
|
||||
});
|
||||
// Add your code above this line
|
||||
document.getElementsByClassName('message')[0].innerHTML = html;
|
||||
};
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: "Helvetica", sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.box {
|
||||
border-radius: 5px;
|
||||
background-color: #eee;
|
||||
padding: 20px 5px;
|
||||
}
|
||||
button {
|
||||
color: white;
|
||||
background-color: #4791d0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #4791d0;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0F5897;
|
||||
border: 1px solid #0F5897;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h1>Cat Photo Finder</h1>
|
||||
<p class="message">
|
||||
The message will go here
|
||||
</p>
|
||||
<p>
|
||||
<button id="getMessage">
|
||||
Get Message
|
||||
</button>
|
||||
</p>
|
||||
```
|
||||
|
||||
@ -3,6 +3,7 @@ id: 587d7faf367417b2b2512be8
|
||||
title: 根据地理位置数据找到用户的 GPS 坐标
|
||||
challengeType: 6
|
||||
forumTopicId: 18188
|
||||
dashedName: get-geolocation-data-to-find-a-users-gps-coordinates
|
||||
---
|
||||
|
||||
# --description--
|
||||
@ -59,5 +60,39 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
</script>
|
||||
<h4>You are here:</h4>
|
||||
<div id="data">
|
||||
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
// Add your code below this line
|
||||
if (navigator.geolocation) {
|
||||
navigator.geolocation.getCurrentPosition(function(position) {
|
||||
document.getElementById('data').innerHTML = "latitude: " + position.coords.latitude + "<br>longitude: " + position.coords.longitude;
|
||||
});
|
||||
}
|
||||
// Add your code above this line
|
||||
</script>
|
||||
<h4>You are here:</h4>
|
||||
<div id="data">
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
```
|
||||
|
||||
@ -3,6 +3,7 @@ id: 5ccfad82bb2dc6c965a848e5
|
||||
title: 使用 JavaScript 的 fetch 方法获取 JSON
|
||||
challengeType: 6
|
||||
forumTopicId: 301501
|
||||
dashedName: get-json-with-the-javascript-fetch-method
|
||||
---
|
||||
|
||||
# --description--
|
||||
@ -69,5 +70,105 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded',function(){
|
||||
document.getElementById('getMessage').onclick= () => {
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
};
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: "Helvetica", sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.box {
|
||||
border-radius: 5px;
|
||||
background-color: #eee;
|
||||
padding: 20px 5px;
|
||||
}
|
||||
button {
|
||||
color: white;
|
||||
background-color: #4791d0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #4791d0;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0F5897;
|
||||
border: 1px solid #0F5897;
|
||||
}
|
||||
</style>
|
||||
<h1>Cat Photo Finder</h1>
|
||||
<p id="message" class="box">
|
||||
The message will go here
|
||||
</p>
|
||||
<p>
|
||||
<button id="getMessage">
|
||||
Get Message
|
||||
</button>
|
||||
</p>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded',function(){
|
||||
document.getElementById('getMessage').onclick= () => {
|
||||
fetch('/json/cats.json')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
document.getElementById('message').innerHTML=JSON.stringify(data);
|
||||
})
|
||||
};
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: "Helvetica", sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.box {
|
||||
border-radius: 5px;
|
||||
background-color: #eee;
|
||||
padding: 20px 5px;
|
||||
}
|
||||
button {
|
||||
color: white;
|
||||
background-color: #4791d0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #4791d0;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0F5897;
|
||||
border: 1px solid #0F5897;
|
||||
}
|
||||
</style>
|
||||
<h1>Cat Photo Finder</h1>
|
||||
<p id="message" class="box">
|
||||
The message will go here
|
||||
</p>
|
||||
<p>
|
||||
<button id="getMessage">
|
||||
Get Message
|
||||
</button>
|
||||
</p>
|
||||
```
|
||||
|
||||
@ -3,6 +3,7 @@ id: 587d7fae367417b2b2512be3
|
||||
title: 使用 XMLHttpRequest 方法获取 JSON
|
||||
challengeType: 6
|
||||
forumTopicId: 301502
|
||||
dashedName: get-json-with-the-javascript-xmlhttprequest-method
|
||||
---
|
||||
|
||||
# --description--
|
||||
@ -85,5 +86,111 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function(){
|
||||
document.getElementById('getMessage').onclick = function(){
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: "Helvetica", sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.box {
|
||||
border-radius: 5px;
|
||||
background-color: #eee;
|
||||
padding: 20px 5px;
|
||||
}
|
||||
button {
|
||||
color: white;
|
||||
background-color: #4791d0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #4791d0;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0F5897;
|
||||
border: 1px solid #0F5897;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h1>Cat Photo Finder</h1>
|
||||
<p class="message box">
|
||||
The message will go here
|
||||
</p>
|
||||
<p>
|
||||
<button id="getMessage">
|
||||
Get Message
|
||||
</button>
|
||||
</p>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded',function(){
|
||||
document.getElementById('getMessage').onclick = function(){
|
||||
const req = new XMLHttpRequest();
|
||||
req.open('GET', '/json/cats.json', true);
|
||||
req.send();
|
||||
req.onload = () => {
|
||||
const json = JSON.parse(req.responseText);
|
||||
document.getElementsByClassName('message')[0].innerHTML = JSON.stringify(json);
|
||||
};
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: "Helvetica", sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.box {
|
||||
border-radius: 5px;
|
||||
background-color: #eee;
|
||||
padding: 20px 5px;
|
||||
}
|
||||
button {
|
||||
color: white;
|
||||
background-color: #4791d0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #4791d0;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0F5897;
|
||||
border: 1px solid #0F5897;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h1>Cat Photo Finder</h1>
|
||||
<p class="message box">
|
||||
The message will go here
|
||||
</p>
|
||||
<p>
|
||||
<button id="getMessage">
|
||||
Get Message
|
||||
</button>
|
||||
</p>
|
||||
```
|
||||
|
||||
@ -3,6 +3,7 @@ id: 587d7fad367417b2b2512be1
|
||||
title: 使用 onclick 属性处理点击事件
|
||||
challengeType: 6
|
||||
forumTopicId: 301503
|
||||
dashedName: handle-click-events-with-javascript-using-the-onclick-property
|
||||
---
|
||||
|
||||
# --description--
|
||||
@ -39,5 +40,101 @@ assert(code.match(/document\s*\.getElementById\(\s*?('|")getMessage\1\s*?\)/g));
|
||||
assert(typeof document.getElementById('getMessage').onclick === 'function');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function(){
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: "Helvetica", sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.box {
|
||||
border-radius: 5px;
|
||||
background-color: #eee;
|
||||
padding: 20px 5px;
|
||||
}
|
||||
button {
|
||||
color: white;
|
||||
background-color: #4791d0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #4791d0;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0F5897;
|
||||
border: 1px solid #0F5897;
|
||||
}
|
||||
</style>
|
||||
<h1>Cat Photo Finder</h1>
|
||||
<p class="message box">
|
||||
The message will go here
|
||||
</p>
|
||||
<p>
|
||||
<button id="getMessage">
|
||||
Get Message
|
||||
</button>
|
||||
</p>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function(){
|
||||
// Add your code below this line
|
||||
document.getElementById('getMessage').onclick = function(){ };
|
||||
// Add your code above this line
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: "Helvetica", sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.box {
|
||||
border-radius: 5px;
|
||||
background-color: #eee;
|
||||
padding: 20px 5px;
|
||||
}
|
||||
button {
|
||||
color: white;
|
||||
background-color: #4791d0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #4791d0;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0F5897;
|
||||
border: 1px solid #0F5897;
|
||||
}
|
||||
</style>
|
||||
<h1>Cat Photo Finder</h1>
|
||||
<p class="message box">
|
||||
The message will go here
|
||||
</p>
|
||||
<p>
|
||||
<button id="getMessage">
|
||||
Get Message
|
||||
</button>
|
||||
</p>
|
||||
```
|
||||
|
||||
@ -3,6 +3,7 @@ id: 587d7faf367417b2b2512be9
|
||||
title: 使用 XMLHttpRequest 方法发送数据
|
||||
challengeType: 6
|
||||
forumTopicId: 301504
|
||||
dashedName: post-data-with-the-javascript-xmlhttprequest-method
|
||||
---
|
||||
|
||||
# --description--
|
||||
@ -77,5 +78,129 @@ assert(
|
||||
assert(code.match(/\.send\(\s*?body\s*?\)/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function(){
|
||||
document.getElementById('sendMessage').onclick = function(){
|
||||
|
||||
const userName = document.getElementById('name').value;
|
||||
const url = 'https://jsonplaceholder.typicode.com/posts';
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: "Helvetica", sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.box {
|
||||
border-radius: 5px;
|
||||
background-color: #eee;
|
||||
padding: 20px 5px;
|
||||
}
|
||||
button {
|
||||
color: white;
|
||||
background-color: #4791d0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #4791d0;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0F5897;
|
||||
border: 1px solid #0F5897;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h1>Cat Friends</h1>
|
||||
<p class="message box">
|
||||
Reply from Server will be here
|
||||
</p>
|
||||
<p>
|
||||
<label for="name">Your name:
|
||||
<input type="text" id="name"/>
|
||||
</label>
|
||||
<button id="sendMessage">
|
||||
Send Message
|
||||
</button>
|
||||
</p>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function(){
|
||||
document.getElementById('sendMessage').onclick = function(){
|
||||
|
||||
const userName = document.getElementById('name').value;
|
||||
const url = 'https://jsonplaceholder.typicode.com/posts';
|
||||
// Add your code below this line
|
||||
const xhr = new XMLHttpRequest();
|
||||
xhr.open('POST', url, true);
|
||||
xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
|
||||
xhr.onreadystatechange = function () {
|
||||
if (xhr.readyState === 4 && xhr.status === 201){
|
||||
const serverResponse = JSON.parse(xhr.response);
|
||||
document.getElementsByClassName('message')[0].textContent = serverResponse.userName + serverResponse.suffix;
|
||||
}
|
||||
};
|
||||
const body = JSON.stringify({ userName: userName, suffix: ' loves cats!' });
|
||||
xhr.send(body);
|
||||
// Add your code above this line
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: "Helvetica", sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.box {
|
||||
border-radius: 5px;
|
||||
background-color: #eee;
|
||||
padding: 20px 5px;
|
||||
}
|
||||
button {
|
||||
color: white;
|
||||
background-color: #4791d0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #4791d0;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0F5897;
|
||||
border: 1px solid #0F5897;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h1>Cat Friends</h1>
|
||||
<p class="message">
|
||||
Reply from Server will be here
|
||||
</p>
|
||||
<p>
|
||||
<label for="name">Your name:
|
||||
<input type="text" id="name"/>
|
||||
</label>
|
||||
<button id="sendMessage">
|
||||
Send Message
|
||||
</button>
|
||||
</p>
|
||||
```
|
||||
|
||||
@ -3,6 +3,7 @@ id: 587d7fae367417b2b2512be7
|
||||
title: 预先过滤 JSON 以获得所需的数据
|
||||
challengeType: 6
|
||||
forumTopicId: 18257
|
||||
dashedName: pre-filter-json-to-get-the-data-you-need
|
||||
---
|
||||
|
||||
# --description--
|
||||
@ -31,5 +32,140 @@ json = json.filter(function(val) {
|
||||
assert(code.match(/json\.filter/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function(){
|
||||
document.getElementById('getMessage').onclick = function(){
|
||||
const req = new XMLHttpRequest();
|
||||
req.open("GET",'/json/cats.json', true);
|
||||
req.send();
|
||||
req.onload=function(){
|
||||
let json = JSON.parse(req.responseText);
|
||||
let html = "";
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
json.forEach(function(val) {
|
||||
html += "<div class = 'cat'>"
|
||||
|
||||
html += "<img src = '" + val.imageLink + "' " + "alt='" + val.altText + "'>"
|
||||
|
||||
html += "</div>"
|
||||
});
|
||||
document.getElementsByClassName('message')[0].innerHTML = html;
|
||||
};
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: "Helvetica", sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.box {
|
||||
border-radius: 5px;
|
||||
background-color: #eee;
|
||||
padding: 20px 5px;
|
||||
}
|
||||
button {
|
||||
color: white;
|
||||
background-color: #4791d0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #4791d0;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0F5897;
|
||||
border: 1px solid #0F5897;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h1>Cat Photo Finder</h1>
|
||||
<p class="message box">
|
||||
The message will go here
|
||||
</p>
|
||||
<p>
|
||||
<button id="getMessage">
|
||||
Get Message
|
||||
</button>
|
||||
</p>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function(){
|
||||
document.getElementById('getMessage').onclick = function(){
|
||||
const req = new XMLHttpRequest();
|
||||
req.open("GET",'/json/cats.json', true);
|
||||
req.send();
|
||||
req.onload = function(){
|
||||
let json = JSON.parse(req.responseText);
|
||||
let html = "";
|
||||
// Add your code below this line
|
||||
json = json.filter(function(val) {
|
||||
return (val.id !== 1);
|
||||
});
|
||||
|
||||
// Add your code above this line
|
||||
json.forEach(function(val) {
|
||||
html += "<div class = 'cat'>"
|
||||
|
||||
html += "<img src = '" + val.imageLink + "' " + "alt='" + val.altText + "'>"
|
||||
|
||||
html += "</div>"
|
||||
});
|
||||
document.getElementsByClassName('message')[0].innerHTML = html;
|
||||
};
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: "Helvetica", sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.box {
|
||||
border-radius: 5px;
|
||||
background-color: #eee;
|
||||
padding: 20px 5px;
|
||||
}
|
||||
button {
|
||||
color: white;
|
||||
background-color: #4791d0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #4791d0;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0F5897;
|
||||
border: 1px solid #0F5897;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h1>Cat Photo Finder</h1>
|
||||
<p class="message">
|
||||
The message will go here
|
||||
</p>
|
||||
<p>
|
||||
<button id="getMessage">
|
||||
Get Message
|
||||
</button>
|
||||
</p>
|
||||
```
|
||||
|
||||
@ -3,6 +3,7 @@ id: 587d7fae367417b2b2512be6
|
||||
title: 渲染数据源的图像
|
||||
challengeType: 6
|
||||
forumTopicId: 18265
|
||||
dashedName: render-images-from-data-sources
|
||||
---
|
||||
|
||||
# --description--
|
||||
@ -33,5 +34,128 @@ assert(code.match(/val\.imageLink/g));
|
||||
assert(code.match(/val\.altText/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function(){
|
||||
document.getElementById('getMessage').onclick = function(){
|
||||
const req=new XMLHttpRequest();
|
||||
req.open("GET",'/json/cats.json',true);
|
||||
req.send();
|
||||
req.onload = function(){
|
||||
const json = JSON.parse(req.responseText);
|
||||
let html = "";
|
||||
json.forEach(function(val) {
|
||||
html += "<div class = 'cat'>";
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
html += "</div><br>";
|
||||
});
|
||||
document.getElementsByClassName('message')[0].innerHTML=html;
|
||||
};
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: "Helvetica", sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.box {
|
||||
border-radius: 5px;
|
||||
background-color: #eee;
|
||||
padding: 20px 5px;
|
||||
}
|
||||
button {
|
||||
color: white;
|
||||
background-color: #4791d0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #4791d0;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0F5897;
|
||||
border: 1px solid #0F5897;
|
||||
}
|
||||
</style>
|
||||
<h1>Cat Photo Finder</h1>
|
||||
<p class="message box">
|
||||
The message will go here
|
||||
</p>
|
||||
<p>
|
||||
<button id="getMessage">
|
||||
Get Message
|
||||
</button>
|
||||
</p>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function(){
|
||||
document.getElementById('getMessage').onclick = function(){
|
||||
const req = new XMLHttpRequest();
|
||||
req.open("GET",'/json/cats.json',true);
|
||||
req.send();
|
||||
req.onload = function(){
|
||||
const json = JSON.parse(req.responseText);
|
||||
let html = "";
|
||||
json.forEach(function(val) {
|
||||
html += "<div class = 'cat'>";
|
||||
// Add your code below this line
|
||||
html += "<img src = '" + val.imageLink + "' " + "alt='" + val.altText + "'>";
|
||||
// Add your code above this line
|
||||
html += "</div><br>";
|
||||
});
|
||||
document.getElementsByClassName('message')[0].innerHTML = html;
|
||||
};
|
||||
};
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: "Helvetica", sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.box {
|
||||
border-radius: 5px;
|
||||
background-color: #eee;
|
||||
padding: 20px 5px;
|
||||
}
|
||||
button {
|
||||
color: white;
|
||||
background-color: #4791d0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #4791d0;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0F5897;
|
||||
border: 1px solid #0F5897;
|
||||
}
|
||||
</style>
|
||||
<h1>Cat Photo Finder</h1>
|
||||
<p class="message">
|
||||
The message will go here
|
||||
</p>
|
||||
<p>
|
||||
<button id="getMessage">
|
||||
Get Message
|
||||
</button>
|
||||
</p>
|
||||
```
|
||||
|
||||
Reference in New Issue
Block a user