Skip to content

Commit cf348f6

Browse files
sswietoniowskisswietoniowski
authored
Merge pull request #258 from sswietoniowski/hyperskill_frontend_developer_solutions
Hyperskill frontend developer solutions
2 parents a9b4587 + f3833f7 commit cf348f6

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

96 files changed

+3846
-4
lines changed

‎README.md

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,11 @@ This repository contains numerous examples that help to grasp concepts related t
66

77
This repository contains the following sub-directories:
88

9-
- [css](https://github.com/sswietoniowski/learning-html-and-css-and-javascript/tree/master/css) the CSS examples,
10-
- [html](https://github.com/sswietoniowski/learning-html-and-css-and-javascript/tree/master/html) the HTML examples,
11-
- [javascript](https://github.com/sswietoniowski/learning-html-and-css-and-javascript/tree/master/javascript) the JavaScript examples,
12-
- [projects](https://github.com/sswietoniowski/learning-html-and-css-and-javascript/tree/master/projects) demo projects created using aforementioned technologies & more :-).
9+
- [css](./css) the CSS examples,
10+
- [html](./html) the HTML examples,
11+
- [javascript](./javascript) the JavaScript examples,
12+
- [projects](./projects) demo projects created using aforementioned technologies & more :-),
13+
- [hyperskill](./hyperskill/) my solutions to [Hyperskill](https://hyperskill.org) projects from the [Frontend Developer](https://hyperskill.org/tracks/5) track.
1314

1415
## Learning Resources
1516

‎hyperskill/01_case_converter/01/index.css

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
* {
2+
box-sizing: border-box;
3+
}
4+
5+
body {
6+
font-family: "Times New Roman", serif;
7+
}
8+
9+
.title {
10+
font-size: 32px;
11+
font-weight: bold;
12+
}
13+
14+
.text {
15+
margin-top: 16px;
16+
float: left;
17+
width: 100%;
18+
}
19+
20+
#textarea {
21+
font-size: 16px;
22+
padding: 16px;
23+
border: 1px solid black;
24+
width: 100%; max-width: 100%;
25+
height: 100px;
26+
}
27+
28+
button {
29+
margin-top: 16px;
30+
font-size: 16px;
31+
background-color: white;
32+
color: black;
33+
border: 2px solid lightcoral;
34+
border-radius: 8px;
35+
}
36+
37+
button:hover {
38+
background-color: lightcoral;
39+
color: white;
40+
}

‎hyperskill/01_case_converter/01/index.html

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Case Converter</title>
6+
<link rel="stylesheet" type="text/css" href="index.css">
7+
</head>
8+
<body>
9+
<div class="title">Case Converter</div>
10+
<div class="text">
11+
<label for="textarea"></label>
12+
<textarea id="textarea" onkeyup="adjustHeight(this)"></textarea>
13+
</div>
14+
<div class="buttons">
15+
<button id="upper-case" onclick="upperCase()">Upper Case</button>
16+
<button id="lower-case" onclick="lowerCase()">Lower Case</button>
17+
<button id="proper-case" onclick="properCase()">Proper Case</button>
18+
<button id="sentence-case" onclick="sentenceCase()">Sentence Case</button>
19+
<button id="save-text-file" onclick="saveTextFile()">Save Text File</button>
20+
</div>
21+
<script>
22+
const element = document.getElementById("textarea");
23+
24+
const upperCase = () => {
25+
element.value = element.value.toUpperCase();
26+
}
27+
const lowerCase = () => {
28+
element.value = element.value.toLowerCase();
29+
}
30+
31+
String.prototype.toProperCase = function() {
32+
return this.replace(
33+
/\w\S*/g,
34+
word => word.charAt(0).toUpperCase() + word.substr(1).toLowerCase()
35+
);
36+
}
37+
38+
const properCase = () => {
39+
element.value = element.value.toProperCase();
40+
}
41+
42+
String.prototype.toSentenceCase = function() {
43+
return this.toLowerCase().replace(
44+
/(^\w|\.\s*\w)/gi,
45+
firstLetterOfASentence => firstLetterOfASentence.toUpperCase()
46+
);
47+
}
48+
49+
const sentenceCase = () => {
50+
element.value = element.value.toSentenceCase();
51+
}
52+
53+
const download = (filename, text) => {
54+
let element = document.createElement('a');
55+
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
56+
element.setAttribute('download', filename);
57+
element.style.display = 'none';
58+
document.body.appendChild(element);
59+
element.click();
60+
document.body.removeChild(element);
61+
}
62+
63+
const saveTextFile = () => {
64+
const textFileName = "text.txt";
65+
download(textFileName, element.value);
66+
}
67+
68+
const adjustHeight = (element) => {
69+
element.style.height = "25px";
70+
element.style.height = (element.scrollHeight) + "px";
71+
}
72+
</script>
73+
</body>
74+
</html>

‎hyperskill/01_case_converter/02/index.css

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
* {
2+
box-sizing: border-box;
3+
}
4+
5+
body {
6+
font-family: "Times New Roman", serif;
7+
}
8+
9+
.title {
10+
font-size: 32px;
11+
font-weight: bold;
12+
}
13+
14+
.text {
15+
margin-top: 16px;
16+
float: left;
17+
width: 100%;
18+
}
19+
20+
#textarea {
21+
font-size: 16px;
22+
padding: 16px;
23+
border: 1px solid black;
24+
width: 100%; max-width: 100%;
25+
height: 100px;
26+
}
27+
28+
button {
29+
margin-top: 16px;
30+
font-size: 16px;
31+
background-color: white;
32+
color: black;
33+
border: 2px solid lightcoral;
34+
border-radius: 8px;
35+
}
36+
37+
button:hover {
38+
background-color: lightcoral;
39+
color: white;
40+
}

‎hyperskill/01_case_converter/02/index.html

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Case Converter</title>
6+
<link rel="stylesheet" type="text/css" href="index.css">
7+
</head>
8+
<body>
9+
<div class="title">Case Converter</div>
10+
<div class="text">
11+
<label for="textarea"></label>
12+
<textarea id="textarea" onkeyup="adjustHeight(this)"></textarea>
13+
</div>
14+
<div class="buttons">
15+
<button id="upper-case" onclick="upperCase()">Upper Case</button>
16+
<button id="lower-case" onclick="lowerCase()">Lower Case</button>
17+
<button id="proper-case" onclick="properCase()">Proper Case</button>
18+
<button id="sentence-case" onclick="sentenceCase()">Sentence Case</button>
19+
<button id="save-text-file" onclick="saveTextFile()">Save Text File</button>
20+
</div>
21+
<script>
22+
const element = document.getElementById("textarea");
23+
24+
const upperCase = () => {
25+
element.value = element.value.toUpperCase();
26+
}
27+
const lowerCase = () => {
28+
element.value = element.value.toLowerCase();
29+
}
30+
31+
String.prototype.toProperCase = function() {
32+
return this.replace(
33+
/\w\S*/g,
34+
word => word.charAt(0).toUpperCase() + word.substr(1).toLowerCase()
35+
);
36+
}
37+
38+
const properCase = () => {
39+
element.value = element.value.toProperCase();
40+
}
41+
42+
String.prototype.toSentenceCase = function() {
43+
return this.toLowerCase().replace(
44+
/(^\w|\.\s*\w)/gi,
45+
firstLetterOfASentence => firstLetterOfASentence.toUpperCase()
46+
);
47+
}
48+
49+
const sentenceCase = () => {
50+
element.value = element.value.toSentenceCase();
51+
}
52+
53+
const download = (filename, text) => {
54+
let element = document.createElement('a');
55+
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
56+
element.setAttribute('download', filename);
57+
element.style.display = 'none';
58+
document.body.appendChild(element);
59+
element.click();
60+
document.body.removeChild(element);
61+
}
62+
63+
const saveTextFile = () => {
64+
const textFileName = "text.txt";
65+
download(textFileName, element.value);
66+
}
67+
68+
const adjustHeight = (element) => {
69+
element.style.height = "25px";
70+
element.style.height = (element.scrollHeight) + "px";
71+
}
72+
</script>
73+
</body>
74+
</html>

‎hyperskill/01_case_converter/03/index.css

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
* {
2+
box-sizing: border-box;
3+
}
4+
5+
body {
6+
font-family: "Times New Roman", serif;
7+
}
8+
9+
.title {
10+
font-size: 32px;
11+
font-weight: bold;
12+
}
13+
14+
.text {
15+
margin-top: 16px;
16+
float: left;
17+
width: 100%;
18+
}
19+
20+
#textarea {
21+
font-size: 16px;
22+
padding: 16px;
23+
border: 1px solid black;
24+
width: 100%; max-width: 100%;
25+
height: 100px;
26+
}
27+
28+
button {
29+
margin-top: 16px;
30+
font-size: 16px;
31+
background-color: white;
32+
color: black;
33+
border: 2px solid lightcoral;
34+
border-radius: 8px;
35+
}
36+
37+
button:hover {
38+
background-color: lightcoral;
39+
color: white;
40+
}

‎hyperskill/01_case_converter/03/index.html

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Case Converter</title>
6+
<link rel="stylesheet" type="text/css" href="index.css">
7+
</head>
8+
<body>
9+
<div class="title">Case Converter</div>
10+
<div class="text">
11+
<label for="textarea"></label>
12+
<textarea id="textarea" onkeyup="adjustHeight(this)"></textarea>
13+
</div>
14+
<div class="buttons">
15+
<button id="upper-case" onclick="upperCase()">Upper Case</button>
16+
<button id="lower-case" onclick="lowerCase()">Lower Case</button>
17+
<button id="proper-case" onclick="properCase()">Proper Case</button>
18+
<button id="sentence-case" onclick="sentenceCase()">Sentence Case</button>
19+
<button id="save-text-file" onclick="saveTextFile()">Save Text File</button>
20+
</div>
21+
<script>
22+
const element = document.getElementById("textarea");
23+
24+
const upperCase = () => {
25+
element.value = element.value.toUpperCase();
26+
}
27+
const lowerCase = () => {
28+
element.value = element.value.toLowerCase();
29+
}
30+
31+
String.prototype.toProperCase = function() {
32+
return this.replace(
33+
/\w\S*/g,
34+
word => word.charAt(0).toUpperCase() + word.substr(1).toLowerCase()
35+
);
36+
}
37+
38+
const properCase = () => {
39+
element.value = element.value.toProperCase();
40+
}
41+
42+
String.prototype.toSentenceCase = function() {
43+
return this.toLowerCase().replace(
44+
/(^\w|\.\s*\w)/gi,
45+
firstLetterOfASentence => firstLetterOfASentence.toUpperCase()
46+
);
47+
}
48+
49+
const sentenceCase = () => {
50+
element.value = element.value.toSentenceCase();
51+
}
52+
53+
const download = (filename, text) => {
54+
let element = document.createElement('a');
55+
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
56+
element.setAttribute('download', filename);
57+
element.style.display = 'none';
58+
document.body.appendChild(element);
59+
element.click();
60+
document.body.removeChild(element);
61+
}
62+
63+
const saveTextFile = () => {
64+
const textFileName = "text.txt";
65+
download(textFileName, element.value);
66+
}
67+
68+
const adjustHeight = (element) => {
69+
element.style.height = "25px";
70+
element.style.height = (element.scrollHeight) + "px";
71+
}
72+
</script>
73+
</body>
74+
</html>

‎hyperskill/01_case_converter/README.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# Case Converter
2+
3+
My solution to the project [Case Converter](https://hyperskill.org/projects/193?track=5) on [Hyperskill](https://hyperskill.org).
4+
5+
Each stage of the project is in a separate folder.
6+
7+
![Case Converter](./img/case_converter.png)

‎hyperskill/01_case_converter/img/case_converter.png

8.53 KB
Loading

0 commit comments

Comments
 (0)