|
@@ -11,28 +11,37 @@ const datas = [
|
|
|
type: "html",
|
|
type: "html",
|
|
|
name: "",
|
|
name: "",
|
|
|
text: `<!DOCTYPE html>
|
|
text: `<!DOCTYPE html>
|
|
|
- <h1 id="codepen">Welcome to the Codepen</h1>`,
|
|
|
|
|
|
|
+ <div id="codepen"
|
|
|
|
|
+ class="buttonProps blue"
|
|
|
|
|
+ onclick="toggleColor()">
|
|
|
|
|
+ Welcome to the Codepen
|
|
|
|
|
+ </div>`,
|
|
|
},
|
|
},
|
|
|
{
|
|
{
|
|
|
type: "css",
|
|
type: "css",
|
|
|
name: "",
|
|
name: "",
|
|
|
- text: `#codepen {
|
|
|
|
|
- color: blue;
|
|
|
|
|
- font-size: 25px;
|
|
|
|
|
- font-family: Times New Roman;
|
|
|
|
|
|
|
+ text: `.blue {
|
|
|
|
|
+ color: blue;
|
|
|
|
|
+ font-size: 27px;
|
|
|
|
|
+ margin-bottom: 10px;
|
|
|
|
|
+ font-family: Sans-Serif;
|
|
|
|
|
+}
|
|
|
|
|
+.red {
|
|
|
|
|
+ color: red;
|
|
|
}`,
|
|
}`,
|
|
|
},
|
|
},
|
|
|
{
|
|
{
|
|
|
type: "javascript",
|
|
type: "javascript",
|
|
|
name: "",
|
|
name: "",
|
|
|
- text: `let btn = document.createElement('button');
|
|
|
|
|
|
|
+ text: `const btn = document.createElement('button');
|
|
|
btn.innerHTML = 'Change color';
|
|
btn.innerHTML = 'Change color';
|
|
|
- btn.style.color = 'red';
|
|
|
|
|
- btn.style.fontSize = '20px';
|
|
|
|
|
|
|
+ btn.style.color = 'black';
|
|
|
|
|
+ btn.style.fontSize = '18px';
|
|
|
document.body.append(btn);
|
|
document.body.append(btn);
|
|
|
btn.style.cursor = 'pointer';
|
|
btn.style.cursor = 'pointer';
|
|
|
btn.onclick = () => {
|
|
btn.onclick = () => {
|
|
|
- document.getElementById('codepen').style.color = 'red'};`,
|
|
|
|
|
|
|
+ document.getElementById('codepen').classList.toggle("red")
|
|
|
|
|
+ };`,
|
|
|
},
|
|
},
|
|
|
];
|
|
];
|
|
|
|
|
|
Yevheniia Akinshyna