-
Notifications
You must be signed in to change notification settings - Fork 0
/
code.html
199 lines (181 loc) · 10.5 KB
/
code.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
<!doctype html>
<html lang="en" class="h-100">
<head>
<title>HundredNext: A Coding Project by Helena Vaquera</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="css/site.css" rel="stylesheet">
<link href="css/prism.css" rel="stylesheet">
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Arima+Madurai:wght@300&family=Montserrat&display=swap" rel="stylesheet">
<link rel="icon" type="image/png" href="img/applogo.png">
<!-- font-awesome -->
<script src="https://kit.fontawesome.com/5db21ba9c6.js" crossorigin="anonymous"></script>
</head>
<body class="d-flex flex-column h-100">
<!-- ======== Nav Section ======== -->
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#"><img src="img/applogo.png" class="mx-1"alt="" height="35px">HundredNext</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse"
aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav me-auto mb-2 mb-md-0">
<li class="nav-item">
<a class="nav-link" href="index.html"> Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="app.html">The App</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="code.html">The Code</a>
</li>
<li class="nav-item">
<a class="nav-link" target="_blank" href="https://github.com/helenalvp/hundrednext">Git Repo</a>
</li>
<li class="nav-item">
<a class="nav-link" target="_blank" href="https://helenalvp.com/">About</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- ======= Main Section ======== -->
<main class="flex-shrink-0">
<div class="container py-4 px-5 pt-5 mt-lg-5">
<h2 class="title border-1 border-bottom border-dark">The Code for HundredNext</h2>
<div class="row row-cols-1 row cols-lg-2 ">
<div class="col-lg-8">
<pre class="line-numbers">
<code class="language-javascript">
function getValues(){
// get values from the page
let startValue = document.getElementById("startValue").value;
let endValue =document.getElementById("endValue").value;
// changes values from string to number
startValue = parseInt(startValue)
endValue = parseInt(endValue)
if(Number.isInteger(startValue)&& Number.isInteger(endValue)){
numbers = generateNumbers(startValue, endValue)
displayNumbers(numbers)
}else{
alert("You must enter integers")
}
}
//generate numbers from startvalue to the endValue
function generateNumbers(sValue, eValue){
let numbers = []
// we want to get all numbers from start to end
for(let i = sValue; i <= eValue; i++){
numbers.push(i)
}
return numbers
}
//display the numbers and mark even numbers bold
function displayNumbers(numbersArr){
let templateRows = ""
for(let i = 0; i < numbersArr.length; i++){
let number = numbersArr[i]
let className = "odd"
if(number % 2 == 0){
className = "even"
}
//This does not render properly with Prism see the source.
templateRows += `<tr><td class='${className}'>${number}</td></tr>`
}
document.getElementById("results").innerHTML = templateRows;
}
</code>
</pre>
</div>
<div class="col-lg-4 mt-2">
<p>
This code uses your input to return a range of numbers back to you. If the number is even, it will be in bold.
</p>
<h5>
getValues
</h5>
<p>
<span class="text-primary">getValues</span> is the main function that retrieves and validates the values from the DOM.
</p>
<p>
It changes the values from a string to an integer, and passes the values to the rest of the functions
(<span class="text-primary">generateNumbers </span>and <span class="text-primary">displayNumbers</span>) after confirming that the values are integers.
</p>
<h5>
generateNumbers
</h5>
<p>
<span class="text-primary">generateNumbers</span> is a function that uses the start values and end values inputted as the range to create an array of numbers that will be displayed.
</p>
<p>
It uses a <span class="text-danger">for</span> loop to iterate through each number between the start and the end value and returns an array containing those numbers.
</p>
<h5>
displayNumbers
</h5>
<p>
<span class="text-primary">displayNumbers</span> retrieves the array from <span class="text-primary">generateNumbers</span> and creates the html markup to add to the DOM in another <span class="text-danger">for</span> loop.
</p>
<p>
Inside this for loop, the function will also check to see if it is odd or even, and will give the appropriate class name that will change the style of the number acordingly.It will create a string of template rows to be added to a table in the DOM.
</p>
<p>
After creating the string of numbers with their class name, we add the string into the DOM and have it displayed to the user.
</p>
</div>
<div class="col-12 border-top border-2">
<p class="extra-info">
In line 39, the addition of templateRows is not rendered correctly.
Inside the back ticks I nested the numbers inside a table row and table detail element, with a class=`${className}` to also add the css style for that number.
</p>
</div>
</div>
</main>
<!-- ======== Footer Section ======== -->
<footer class="footer mt-auto py-3 bg-dark text-light sticky-footer">
<div class="container-fluid">
<div class="row row-cols-1 row-cols-lg-3 gy-2">
<div class="col text-light order-last order-lg-first">
<div><span class="text-muted">©2021</span> Helena Vaquera | helenalvp@gmail.com</div>
</div>
<div class="col d-flex align-items-center justify-content-start justify-content-lg-center">
<img src="img/self-logo/logo-circle.png" alt="Helena Vaquera Logo" height="40">
</div>
<div class="col d-flex align-items-center justify-content-start justify-content-lg-end">
<div class="row">
<div class="col social"><a href="https://linkedin.com/in/helenalvp/" target="_blank"><i class="fab fa-linkedin fa-2x"></i></a></div>
<div class="col social"><a href="https://github.com/helenalvp" target="_blank"><i class="fab fa-github fa-2x"></i></a></div>
<div class="col social"><a href="https://twitter.com/helenalvp" target="_blank"><i class="fab fa-twitter fa-2x"></i></a></div>
<div class="col social"><a href="https://dev.to/helenalvp" target="_blank"><i class="fab fa-dev fa-2x"></i></a></div>
</div>
</div>
</div>
</div>
</footer>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"
integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous">
</script>
<script src="js/prism.js"></script>
<script>
Prism.plugins.NormalizeWhitespace.setDefaults({
'remove-trailing': true,
'remove-indent': true,
'left-trim': true,
'right-trim': true
})
</script>
</body>
</html>