Skip to content

Commit 8743ff6

Browse files
CyrusKabirCyrusKabir
committed
test
1 parent e0cb32a commit 8743ff6

16 files changed

+336
-1912
lines changed

‎README.md

+24-1,912
Large diffs are not rendered by default.

‎logo.svg ‎assets/logo.svg

File renamed without changes.

‎solutions/Javascript-DOM/dom-fundamentals.js

+127
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
const dom_fundamentals = [
2+
{
3+
category: "DOM fundamentals",
4+
title: "Check the checkbox",
5+
nth: 1,
6+
scenario: `
7+
Your first JavaScript DOM exercise. Let's start simple.
8+
Extend the JavaScript code below to interact with the displayed HTML elements.
9+
Once you click the button, the checkbox should be checked.
10+
Confirm your code by clicking the button!
11+
`,
12+
html: `
13+
<input id="checkbox" disabled/>
14+
<label for="checkbox">checkbox</label>
15+
<button type="button" id="button">Verify Code</button>
16+
`,
17+
javascript: `
18+
const button = document.getElementById('button');
19+
button.addEventListener('click', () => {
20+
const checkbox = document.getElementById('checkbox');
21+
checkbox.checked = true;
22+
});
23+
`
24+
},
25+
{
26+
category: "DOM fundamentals",
27+
title: "Get full-name from inputs",
28+
nth: 1,
29+
scenario: `
30+
displayed HTML elements.
31+
This time we are looking for the full name.
32+
When the button is clicked, combine the names of the first two input fields.
33+
Insert the full name in the third input field.
34+
Hint: Check if your code still works if you change the first or last name.
35+
Confirm your code by clicking the button!
36+
`,
37+
html: `
38+
<input type="text" id="firstName" placeholder="Max" value="Max"/>
39+
<input type="text" id="lastName" placeholder="Musterman" value="Musterman"/>
40+
<input type="text" id="fullName" placeholder="full name" readonly/>
41+
<button type="button" id="button">Verify Code</button>
42+
`,
43+
javascript: `
44+
const button = document.getElementById('button');
45+
button.addEventListener('click' , () => {
46+
const firstName = document.getElementById('firstName');
47+
const lastName = document.getElementById('lastName');
48+
const fullName = document.getElementById('fullName');
49+
fullName.value = firstName.value + ' ' + lastName.value;
50+
});
51+
`
52+
},
53+
{
54+
category: "DOM fundamentals",
55+
title: "Increment the counter on button click",
56+
nth: 1,
57+
scenario: `
58+
Extend the JavaScript code below to interact with the displayed HTML elements.
59+
On each button click, increase the value of the button by 1.
60+
Confirm your code by clicking the button!
61+
`,
62+
html: `
63+
<button type="button" id="button">0</button>
64+
`,
65+
javascript: `
66+
const button = document.getElementById('button');
67+
button.addEventListener('click' , () => {
68+
// type in your code here
69+
const button = document.getElementById('button');
70+
button.addEventListener('click' , () => {
71+
const oldValue = parseInt(button.innerText, 10);
72+
button.innerText = oldValue + 1;
73+
});
74+
});
75+
`
76+
},
77+
{
78+
category: "DOM fundamentals",
79+
title: "Increment the counter on button click",
80+
nth: 1,
81+
scenario: `
82+
Extend the JavaScript code below to interact with the displayed HTML elements.
83+
On each button click, increase the value of the button by 1.
84+
Confirm your code by clicking the button!
85+
`,
86+
html: `
87+
<button type="button" id="button">0</button>
88+
`,
89+
javascript: `
90+
const button = document.getElementById('button');
91+
button.addEventListener('click' , () => {
92+
// type in your code here
93+
const button = document.getElementById('button');
94+
button.addEventListener('click' , () => {
95+
const oldValue = parseInt(button.innerText, 10);
96+
button.innerText = oldValue + 1;
97+
});
98+
});
99+
`
100+
},
101+
{
102+
category: "DOM fundamentals",
103+
title: "Increment the counter on button click 2",
104+
nth: 1,
105+
scenario: `
106+
Extend the JavaScript code below to interact with the displayed HTML elements.
107+
On each button click, increase the value of the button by 1.
108+
Confirm your code by clicking the button!
109+
`,
110+
html: `
111+
<button type="button" id="button">0</button>
112+
`,
113+
javascript: `
114+
const button = document.getElementById('button');
115+
button.addEventListener('click' , () => {
116+
// type in your code here
117+
const button = document.getElementById('button');
118+
button.addEventListener('click' , () => {
119+
const oldValue = parseInt(button.innerText, 10);
120+
button.innerText = oldValue + 1;
121+
});
122+
});
123+
`
124+
},
125+
]
126+
127+
module.exports = dom_fundamentals;

‎solutions/Javascript-DOM/dom-manipulation.js

+95
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
const dom_manipulation = [
2+
{
3+
category: "DOM manipulation",
4+
title: "Remove element from the DOM",
5+
nth: 1,
6+
scenario: `
7+
You may not see it in the example UI, but underneath the red circle is a green circle.
8+
Extend the function removeRedCircle to remove the circle with id red from the DOM.
9+
Make sure that you really remove the element instead of just hiding it.
10+
Confirm that your code works by clicking the button.
11+
`,
12+
html: `
13+
<div id="green"/>
14+
<div id="red"/>
15+
<button type="button" id="button">Click Me</button>
16+
`,
17+
javascript: `
18+
const button = document.querySelector('#button');
19+
20+
const removeRedCircle = () => {
21+
const redCircle = document.querySelector('#red');
22+
redCircle.parentNode.removeChild(redCircle);
23+
};
24+
25+
button.addEventListener('click', removeRedCircle);
26+
`
27+
},
28+
{
29+
category: "DOM manipulation",
30+
title: "Change id of HTML element",
31+
nth: 1,
32+
scenario: `
33+
In this scenario the existing code listens to a click on the button.
34+
When the button is clicked, the function changeInput is triggered.
35+
changeInput tries to select an input field with id inputEl. But, the existing input field does not have this id.
36+
Add some Javascript code to add the id inputEl to the existing input field.
37+
Verify that your code works by clicking the button.
38+
`,
39+
html: `
40+
<div id="wrapper">
41+
<input type="text" placeholder="Text" readonly/>
42+
<button type="button">Click Me</button>
43+
</div>
44+
`,
45+
javascript: `
46+
const button = document.querySelector('#wrapper button');
47+
48+
const changeInput = () => {
49+
const input = document.querySelector('#inputEl');
50+
if(input) {
51+
input.value = 'Hello World';
52+
}
53+
};
54+
55+
button.addEventListener('click', changeInput);
56+
57+
const input = document.querySelector("#wrapper input[type=text]");
58+
input.setAttribute("id", "inputEl");
59+
`
60+
},
61+
{
62+
category: "DOM manipulation",
63+
title: "Wrap element in div",
64+
nth: 1,
65+
scenario: `
66+
The JavaScript code below installs en eventListener on a variable btn.
67+
A button element that is a descendent of another element with id wrapper was assigned to the variable btn.
68+
But, the existing button element has no parent node with id wrapper.
69+
Make the code work by creating a new element with id wrapper that wraps the existing button element.
70+
Verify your solution by clicking the button. It should change its text.
71+
Hint: you might have to use the following methods: querySelector, createElement, setAttribute, append.
72+
`,
73+
html: `
74+
<button type="button" id="button">Click Me</button>
75+
`,
76+
javascript: `
77+
const button = document.querySelector('#button');
78+
const wrapper = document.createElement('div');
79+
wrapper.setAttribute('id', 'wrapper');
80+
button.parentNode.append(wrapper);
81+
wrapper.append(button);
82+
83+
const btn = document.querySelector('#wrapper btn');
84+
85+
if(btn) {
86+
const handleClick = () => {
87+
btn.innerText = 'Thank you! ❤️'
88+
}
89+
90+
btn.addEventListener('click', handleClick)
91+
`
92+
},
93+
]
94+
95+
module.exports = dom_manipulation;

‎solutions/Javascript-DOM/dom-selector-methods.js

Whitespace-only changes.

‎solutions/Javascript-DOM/events-and-user-interactions.js

Whitespace-only changes.

‎solutions/Javascript-DOM/index.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
const DOM_FUNDAMENTALS = require("./dom-fundamentals");
2+
const DOM_MANIPULATION = require("./dom-manipulation");
3+
const ALL_JAVASCRIPT_DOM_SOLUTIONS = [
4+
...DOM_FUNDAMENTALS,
5+
...DOM_MANIPULATION,
6+
];
7+
8+
module.exports = ALL_JAVASCRIPT_DOM_SOLUTIONS;

‎solutions/Javascript-DOM/recursive-functions.js

Whitespace-only changes.

‎solutions/Javascript-Fundamentals/arrays.js

Whitespace-only changes.

‎solutions/Javascript-Fundamentals/basics.js

Whitespace-only changes.

‎solutions/Javascript-Fundamentals/dates.js

Whitespace-only changes.

‎solutions/Javascript-Fundamentals/object.js

Whitespace-only changes.

‎solutions/Javascript-Fundamentals/sets.js

Whitespace-only changes.

‎solutions/all.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
const JAVASCRIPT_DOM_SOLUTIONS = require("./Javascript-DOM/index");
2+
const ALL_SOLUTIONS = [...JAVASCRIPT_DOM_SOLUTIONS];
3+
module.exports = ALL_SOLUTIONS;

‎test.js

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
const fs = require("fs");
2+
const solutions = require("./solutions/all");
3+
const testFilePath = "./README.md";
4+
fs.readFile(testFilePath, "utf-8", (err, data) => {
5+
if (err) {
6+
console.log(err);
7+
return err;
8+
}
9+
let dataSplitedByLines = data.split(/\r?\n/);
10+
for(let solution of solutions) {
11+
let renderedResult = render(solution);
12+
const injectStart = `<!-- inject ${solution.category} start -->`;
13+
const injectEnd = `<!-- inject ${solution.category} end -->`;
14+
let startPos = dataSplitedByLines.indexOf(injectStart);
15+
let endPos = dataSplitedByLines.indexOf(injectEnd);
16+
let injectPos = (endPos - startPos) + startPos;
17+
if (dataSplitedByLines.join("\n").includes(`- #### ${solution.title}`) === false) {
18+
if(startPos + endPos === -2) break; // if category was not defined in README file
19+
else {
20+
dataSplitedByLines.splice(injectPos, 0, renderedResult);
21+
}
22+
} else {
23+
const linesOfDuplicateSolution = renderedResult.split("\n").length;
24+
const injectPos = dataSplitedByLines.indexOf(`- #### ${solution.title}`);
25+
if(injectPos !== -1) {
26+
dataSplitedByLines.splice(injectPos, linesOfDuplicateSolution, renderedResult)
27+
}
28+
}
29+
}
30+
let result = dataSplitedByLines.join("\n");
31+
fs.writeFile(testFilePath, result, (err) => {
32+
if (err) {
33+
console.log(err);
34+
return err
35+
}
36+
});
37+
})
38+
39+
function render(solution) {
40+
return `- #### ${solution.title}
41+
<details><summary>Solution ${solution.nth}</summary>
42+
<p>
43+
44+
scenario :
45+
\`\`\`python
46+
${solution.scenario}
47+
\`\`\`
48+
${
49+
(() => solution.html ? `\`\`\`html :
50+
${solution.html}
51+
\`\`\`` : "")()
52+
}
53+
javascript :
54+
\`\`\`js
55+
${solution.javascript}
56+
\`\`\`
57+
</p>
58+
</details>
59+
60+
[Back to table ⬆](#table-of-solutions)`
61+
}

‎test.md

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
2+
<!-- inject x start -->
3+
<!-- inject x end -->
4+
5+
<!-- inject y start -->
6+
<!-- inject y end -->
7+
8+
<!-- inject a start -->
9+
<!-- inject a end -->
10+
11+
<!-- inject code start -->
12+
<!-- inject code end -->
13+
14+
<!-- inject solution start -->
15+
<!-- inject solution end -->
16+
17+
<!-- inject DOM fundamentals start -->
18+
<!-- inject DOM fundamentals end -->

0 commit comments

Comments
 (0)