Skip to content

Commit 84d460d

Browse files
devictoriberodevictoribero
committed
Explaining the exercise in html. Adding styles to the Code component
* Created basic styles for code component: String, keywords, default, punctuation... * Imported the needed styles
1 parent e8484ea commit 84d460d

File tree

7 files changed

+115
-13
lines changed

7 files changed

+115
-13
lines changed

‎index.html

+39-1
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,11 @@
88
<title>Implementatino of indexOf method</title>
99

1010
<link rel="stylesheet" href="./styles/reset.css">
11+
<link rel="stylesheet" href="./styles/variables.css">
1112
<link rel="stylesheet" href="./styles/HeaderPage.css">
1213
<link rel="stylesheet" href="./styles/Section.css">
14+
<link rel="stylesheet" href="./styles/Code.css">
15+
<link rel="stylesheet" href="./styles/utilities.css">
1316

1417
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,700" rel="stylesheet">
1518
<link href="https://fonts.googleapis.com/css?family=Amatic+SC" rel="stylesheet">
@@ -47,8 +50,43 @@ <h1 class="HeaderPage-mainTitle">
4750
<h2 class="Section-title">Goal</h2>
4851
<p class="Section-paragraph">Implement the method of the String.prototype indexOf</p>
4952
</div>
50-
</main>
5153

54+
<div class="Section">
55+
<h2 class="Section-title">Definition</h2>
56+
<p class="Section-paragraph">
57+
The <span class="u-highlight">indexOf()</span> method returns the index within the calling <span class="u-highlight">String</span> object of
58+
the first occurrence of the specified value, starting the search at <span class="u-highlight">fromIndex</span>.
59+
Returns -1 if the value is not found.
60+
</p>
61+
</div>
62+
63+
<div class="Section">
64+
<h2 class="Section-title">Proposal</h2>
65+
<p class="Section-paragraph">
66+
The first thing I thought about was to create the needed <span class="u-highlight">guard clauses</span> so I would let the main algorithm logic
67+
<span class="u-highlight">clean from all the concerns</span> that would only make it dirtier
68+
</p>
69+
<figure class="Code u-vertical-space-top">
70+
<pre>
71+
<code>
72+
<span class="Code-comments">// Truncate `from` because we can't secure that it's an integer</span>
73+
<span class="Code-keyword">var</span> _fromTruncated = <span class="Code-keyword">Math</span><span class="Code-punctuation">.</span>trunc<span class="Code-punctuation">(</span>from<span class="Code-punctuation">);</span>
74+
<span class="Code-keyword">if</span> <span class="Code-punctuation">(</span>searchValue <span class="Code-punctuation">===</span> <span class="Code-string">''</span> <span class="Code-punctuation">&&</span> _fromTruncated <span class="Code-punctuation"><</span> 0<span class="Code-punctuation">) {</span>
75+
<span class="Code-keyword">return</span> 0;
76+
<span class="Code-punctuation">}</span>
77+
78+
<span class="Code-keyword">if</span> <span class="Code-punctuation">(</span>searchValue <span class="Code-punctuation">===</span> <span class="Code-string">''</span> <span class="Code-punctuation">&&</span> _fromTruncated <span class="Code-punctuation">>=</span> <span class="Code-keyword">this</span><span class="Code-punctuation">.</span>length<span class="Code-punctuation">) {</span>
79+
<span class="Code-keyword">return</span> <span class="Code-keyword">this</span><span class="Code-punctuation">.</span>length;
80+
<span class="Code-punctuation">}</span>
81+
82+
<span class="Code-keyword">if</span> <span class="Code-punctuation">(</span>searchValue <span class="Code-punctuation">===</span> <span class="Code-string">''</span><span class="Code-punctuation">) {</span>
83+
<span class="Code-keyword">return</span> _fromTruncated<span class="Code-punctuation">;</span>
84+
<span class="Code-punctuation">}</span>
85+
</code>
86+
</pre>
87+
</figure>
88+
</div>
89+
</main>
5290

5391
<script src="src/indexOf.js"></script>
5492
<script src="src/index.js"></script>

‎src/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -36,4 +36,4 @@ const str2 = 'tuturron';
3636
console.log('ORIGINAL');
3737
console.log(str2.indexOf('tu', 1));
3838
console.log('NEW');
39-
console.log(str2.indexOf('tu', 1));
39+
console.log(str2.indexOf('tu', 1));

‎styles/Code.css

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
.Code {
2+
background-color: rgba(238, 238, 238, 0.35);
3+
background-color: #2B3A42;
4+
overflow: auto;
5+
padding: 0;
6+
border-radius: 3px;
7+
font-family: var(--font-family-monospace);
8+
font-size: 13px;
9+
line-height: 19px;
10+
}
11+
12+
.Code code {
13+
display: block;
14+
margin: 0;
15+
padding: 0;
16+
white-space: pre;
17+
border: none;
18+
background: transparent;
19+
text-shadow: 0 1px 0 rgba(23, 31, 35, 0.5);
20+
color: var(--color-code-default);
21+
}
22+
23+
.Code-comments {
24+
color: var(--color-code-commments);
25+
}
26+
27+
.Code-string {
28+
color: var(--color-code-string);
29+
}
30+
31+
.Code-keyword {
32+
color: var(--color-code-keyword);
33+
}
34+
35+
.Code-punctuation {
36+
color: var(--color-code-punctuation);
37+
}

‎styles/HeaderPage.css

-10
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,3 @@
1-
:root {
2-
--font-family-main: 'Raleway', sans-serif;
3-
--font-family-handwritten: 'Amatic SC', cursive;
4-
--HeaderPage-corner-text-distance: 15px;
5-
--HeaderPage-corner-text-distance-tablet: 30px;
6-
7-
--color-turquoise: #74ebd5;
8-
--color-violet: #ACB6E5;
9-
}
10-
111
.HeaderPage {
122
width: 100%;
133
background: var(--color-turquoise);

‎styles/Section.css

+12-1
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,21 @@
11
.Section {
2-
padding: 15px;
2+
padding: 30px 15px;
33
-webkit-box-sizing: border-box;
44
-moz-box-sizing: border-box;
55
box-sizing: border-box;
66
}
77

88
.Section-title {
99
color: var(--color-violet);
10+
font-weight: bold;
11+
font-size: 2.5rem;
12+
font-family: var(--font-family-main);
13+
margin-bottom: 10px;
14+
}
15+
16+
.Section-paragraph {
17+
font-family: var(--font-family-main);
18+
font-weight: 200;
19+
font-size: 1rem;
20+
line-height: 1.3rem;
1021
}

‎styles/utilities.css

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
.u-highlight {
2+
background: var(--color-violet);
3+
padding: 0 5px;
4+
border-radius: 3px;
5+
opacity: 0.7;
6+
}
7+
8+
.u-vertical-space-top {
9+
margin-top: 20px;
10+
}

‎styles/variables.css

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
:root {
2+
--font-family-main: 'Raleway', sans-serif;
3+
--font-family-handwritten: 'Amatic SC', cursive;
4+
--font-family-monospace: monospace;
5+
--HeaderPage-corner-text-distance: 15px;
6+
--HeaderPage-corner-text-distance-tablet: 30px;
7+
8+
--color-turquoise: #74ebd5;
9+
--color-violet: #ACB6E5;
10+
--color-black: #1a1a1a;
11+
--color-code-default: #a5cee1;
12+
--color-code-commments: #77858c;
13+
--color-code-string: #4db277;
14+
--color-code-keyword: #62b1d8;
15+
--color-code-punctuation: #e1e6e9;
16+
}

0 commit comments

Comments
 (0)