Skip to content

Commit 5c21ae9

Browse files
devictoriberodevictoribero
committed
Finished the index.html.
* Added some styles more to the simulated code embedded * Added explanation of the tech exercise * Reorganization of some folders
1 parent 84d460d commit 5c21ae9

File tree

7 files changed

+85
-28
lines changed

7 files changed

+85
-28
lines changed

‎index.html

+63-25
Original file line numberDiff line numberDiff line change
@@ -8,18 +8,19 @@
88
<title>Implementatino of indexOf method</title>
99

1010
<link rel="stylesheet" href="./styles/reset.css">
11-
<link rel="stylesheet" href="./styles/variables.css">
12-
<link rel="stylesheet" href="./styles/HeaderPage.css">
13-
<link rel="stylesheet" href="./styles/Section.css">
14-
<link rel="stylesheet" href="./styles/Code.css">
15-
<link rel="stylesheet" href="./styles/utilities.css">
11+
<link rel="stylesheet" href="styles/utils/variables.css">
12+
<link rel="stylesheet" href="styles/main.css">
13+
<link rel="stylesheet" href="styles/components/HeaderPage.css">
14+
<link rel="stylesheet" href="styles/components/Section.css">
15+
<link rel="stylesheet" href="styles/components/Code.css">
16+
<link rel="stylesheet" href="styles/utils/utilities.css">
1617

1718
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,700" rel="stylesheet">
1819
<link href="https://fonts.googleapis.com/css?family=Amatic+SC" rel="stylesheet">
1920
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
2021
</head>
21-
<body>
2222

23+
<body>
2324
<header class="HeaderPage">
2425
<h1 class="HeaderPage-mainTitle">
2526
Implementation
@@ -45,7 +46,7 @@ <h1 class="HeaderPage-mainTitle">
4546
</nav>
4647
</header>
4748

48-
<main class="content">
49+
<main class="main-content">
4950
<div class="Section">
5051
<h2 class="Section-title">Goal</h2>
5152
<p class="Section-paragraph">Implement the method of the String.prototype indexOf</p>
@@ -63,28 +64,65 @@ <h2 class="Section-title">Definition</h2>
6364
<div class="Section">
6465
<h2 class="Section-title">Proposal</h2>
6566
<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
67+
The first thing came to my mind were the <span class="u-highlight">guard clauses</span> that helped me to <span class="u-highlight">isolate</span> the code not related to the algorithm itself.
68+
Doing this, instead of nested conditionals we got a "flat" list of conditionals, one after the other. It makes the code easier to read too.
6869
</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>
7770

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>
71+
<p class="Section-paragraph u-vertical-space-top">
72+
The idea behind my solution is to iterate until we find a match with the first letter of the string we are looking for.<br>
73+
If we don't find any, we return -1. If we do, we start to check the other character of the given string.
74+
</p>
75+
76+
<p class="Section-paragraph u-vertical-space-top">
77+
Once we have found the first character, if the given string has <span class="u-highlight">length === 1</span> it means we can return that index. If there are more characters to check, we go for it.<br>
78+
</p>
79+
80+
<p class="Section-paragraph u-vertical-space-top">
81+
If the next character to check is different than the character in <span class="u-highlight">this</span> we leave from that second loop and we go for another match with the first character of the given word.
82+
</p>
8183

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+
<pre class="Code u-vertical-space-top">
85+
<code>
86+
<span class="Code-comments">// Truncate `from` because we can't secure that it's an integer</span>
87+
<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>
88+
<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>
89+
<span class="Code-keyword">return</span> 0<span class="Code-punctuation">;</span>
90+
<span class="Code-punctuation">}</span>
91+
92+
<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>
93+
<span class="Code-keyword">return</span> <span class="Code-keyword">this</span><span class="Code-punctuation">.</span>length<span class="Code-punctuation">;</span>
94+
<span class="Code-punctuation">}</span>
95+
96+
<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>
97+
<span class="Code-keyword">return</span> _fromTruncated<span class="Code-punctuation">;</span>
98+
<span class="Code-punctuation">}</span>
99+
100+
<span class="Code-keyword">for</span> <span class="Code-punctuation">(</span><span class="Code-keyword">var</span> i <span class="Code-punctuation">=</span> _fromTruncated<span class="Code-punctuation">;</span> i <span class="Code-punctuation"><</span> this<span class="Code-punctuation">.</span>length<span class="Code-punctuation">;</span> i++<span class="Code-punctuation">)</span> {
101+
<span class="Code-keyword">var</span> thisCharsLeft <span class="Code-punctuation">=</span> this.length - i<span class="Code-punctuation">;</span>
102+
<span class="Code-keyword">if</span> <span class="Code-punctuation">(</span>this<span class="Code-punctuation">[</span>i<span class="Code-punctuation">]</span> <span class="Code-punctuation">===</span> searchValue<span class="Code-punctuation">[</span>0<span class="Code-punctuation">]</span><span class="Code-punctuation">)</span> {
103+
<span class="Code-keyword">var</span> initial = i<span class="Code-punctuation">;</span>
104+
<span class="Code-keyword">if</span> <span class="Code-punctuation">(</span>searchValue.length <span class="Code-punctuation">===</span> 1<span class="Code-punctuation">)</span> <span class="Code-punctuation">{</span>
105+
<span class="Code-keyword">return</span> initial<span class="Code-punctuation">;</span>
106+
107+
<span class="Code-punctuation">}</span> <span class="Code-keyword">else if</span> <span class="Code-punctuation">(</span>thisCharsLeft > searchValue.length - 1<span class="Code-punctuation">)</span> <span class="Code-punctuation">{</span>
108+
<span class="Code-keyword">for</span> <span class="Code-punctuation">(</span><span class="Code-keyword">var</span> j = 1<span class="Code-punctuation">;</span> j < searchValue.length<span class="Code-punctuation">;</span> j++<span class="Code-punctuation">)</span> <span class="Code-punctuation">{</span>
109+
<span class="Code-keyword">if</span> <span class="Code-punctuation">(</span>this[++i] !== searchValue[j]<span class="Code-punctuation">)</span> <span class="Code-punctuation">{</span>
110+
<span class="Code-keyword">break</span><span class="Code-punctuation">;</span>
111+
<span class="Code-punctuation">}</span> <span class="Code-keyword">else if</span> <span class="Code-punctuation">(</span>j <span class="Code-punctuation">===</span> <span class="Code-punctuation">(</span>searchValue.length - 1<span class="Code-punctuation">)</span>) <span class="Code-punctuation">{</span>
112+
<span class="Code-keyword">return</span> initial<span class="Code-punctuation">;</span>
113+
<span class="Code-punctuation">}</span>
114+
<span class="Code-punctuation">}</span>
115+
<span class="Code-punctuation">}</span>
116+
<span class="Code-punctuation">}</span>
84117
<span class="Code-punctuation">}</span>
85-
</code>
86-
</pre>
87-
</figure>
118+
119+
<span class="Code-keyword">return</span> -1<span class="Code-punctuation">;</span>
120+
<span class="Code-punctuation">}</span><span class="Code-punctuation">;</span>
121+
122+
123+
124+
</code>
125+
</pre>
88126
</div>
89127
</main>
90128

‎styles/Code.css renamed to ‎styles/components/Code.css

File renamed without changes.

‎styles/HeaderPage.css renamed to ‎styles/components/HeaderPage.css

File renamed without changes.

‎styles/Section.css renamed to ‎styles/components/Section.css

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
.Section {
2-
padding: 30px 15px;
2+
padding: 1.25rem 1rem;
33
-webkit-box-sizing: border-box;
44
-moz-box-sizing: border-box;
55
box-sizing: border-box;
@@ -17,5 +17,7 @@
1717
font-family: var(--font-family-main);
1818
font-weight: 200;
1919
font-size: 1rem;
20-
line-height: 1.3rem;
20+
line-height: 1.75rem;
21+
text-align: justify;
22+
color: var(--color-black);
2123
}

‎styles/main.css

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
.main-content {
2+
width: 100%;
3+
margin: 0 auto;
4+
}
5+
6+
@media screen and (min-width: 768px) {
7+
.main-content {
8+
margin: 4rem auto;
9+
max-width: 600px;
10+
}
11+
}
12+
13+
@media screen and (min-width: 1024px) {
14+
.main-content {
15+
max-width: 800px;
16+
}
17+
}

‎styles/utilities.css renamed to ‎styles/utils/utilities.css

File renamed without changes.

‎styles/variables.css renamed to ‎styles/utils/variables.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77

88
--color-turquoise: #74ebd5;
99
--color-violet: #ACB6E5;
10-
--color-black: #1a1a1a;
10+
--color-black: #2d3436;
1111
--color-code-default: #a5cee1;
1212
--color-code-commments: #77858c;
1313
--color-code-string: #4db277;

0 commit comments

Comments
 (0)