-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcode.html
135 lines (128 loc) · 9.21 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
<!doctype html>
<html lang="en" class="h-100">
<head>
<title>Word Reverse: A Coding Project By Matthew Snyder</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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="css/prism.css">
<link rel="stylesheet" href="css/style.css">
<script src="https://kit.fontawesome.com/5db21ba9c6.js" crossorigin="anonymous"></script> <!--font-awesome-->
<link rel="icon" type="img/png" href="img/favicon-32x32.png">
</head>
<body class="d-flex flex-column h-100"> <!--Column will fill up height of browser-->
<!--Nav Area -->
<nav class="navbar navbar-expand-md navbar-dark fixed-top"> <!--Expand all of the links for medium screens and above, and hamburger icon for screens less than medium breakpont. dark background, fixed to to top-->
<div class="container-fluid">
<a class="navbar-brand" href="#"><img src="img/Dark logo.svg" alt="Matthew Snyder Mark" class="d-inline-block align-text-top" width="40" height="25">Word Reverse</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" aria-current="page" 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" href="code.html">The Code</a>
</li>
<li class="nav-item">
<a class="nav-link" target="_blank" href="#">Git Repo</a>
</li>
<li class="nav-item">
<a class="nav-link" target="_blank" href="#">About</a> <!--Put portfolio link here later-->
</li>
</ul>
</div>
</div>
</nav>
<!--main area-->
<main class="flex-shrink-0">
<div class="container py-5 px-4 mt-5">
<h2 class="border-1 border-bottom border-dark text-center">The Code for APP NAME</h2>
<div class="row row-cols-1 row-cols-lg-2">
<!--first column is code embed-->
<div class="col-lg-8">
<pre class="line-numbers"> <!--line-numbers will put an increasing number for each line there is.-->
<code class="language-javascript">
function getString(){
document.getElementById('alert').classList.add('invisible')
const userString = document.getElementById('userString').value
let reversedString = reverseString(userString)
displayString(reversedString)
}
function reverseString(userString){
let reversedString = [];
for(let i = userString.length - 1; i >= 0; i--){
reversedString += userString[i]
}
return reversedString
}
function displayString(reversedString){
const displayString = document.getElementById('message')
displayString.innerHTML = `${reversedString}`
document.getElementById('alert').classList.remove('invisible')
}
</code>
</pre>
</div>
<!--second column is description of the code-->
<div class="col-lg-4">
<!-- <p>The code is structured in one function</p> -->
<h5 class="mt-2 pb-1 border-bottom border-light">getString()</h5>
<p>The getString() function is responsible for retrieving the users input and passing it to other functions used as a parameter. I also added a class of 'invisible' to the alert div that way it toggles between invisible and visibile. Two other functions are called here, reverseString() and displayString(0 which are described below.</p>
<br>
<h5 class="pb-1 border-bottom border-light">reverseString()</h5>
<p>The reverseString() class takes a parameter which is representing the users input. Inside of the functiuon I initialized an empty array and used a for loop to iterate through the users string, adding the characters of the string to the empty array in backwards order.</p>
<br>
<h5 class="pb-1 border-bottom border-light">displayString()</h5>
<p>The displayString() class takes a parameter which is representing the users input. INside of the function I access the html element with a class of message and assign the innerHTML of the element to the reversed string. I also remove the invisible class that was added inside of the getString() function so the user can see the reversed string,</p>
</div>
</div>
</div>
</main>
<!--Footer Section-->
<footer class="footer mt-auto py-3">
<div class="container-fluid ">
<div class="row row-cols-1 row-cols-lg-3 gy-3"> <!--Each column is 4 unites wide since there is a 12 unite maximum -->
<div class="col order-last text-light order-lg-first"> <!--When the screen size is less than large than we want this copy right information to be on the bottom instead of first. For large and above we want the copy right information first.-->
<div class="" style="font-size:12px"><span class="text-muted" style="font-size:12px">©2021</span> Matthew Snyder | [email protected]</div> <!--text-muted just changes the appearance of the text-->
</div>
<div class="col d-flex align-items-centers justify-content-start justify-content-lg-center"> <!--d-flex allows us to control horizontal and vertical positions, aligned content to the center using align items which gives vertical alignment and then justify content-center is horizontal alignment which leaves the content in center of col-->
<img src="img/dark-logo.svg.svg" alt="Matthew Snyder logo" height="24"> <!--put height="24" to keeps things proportional and looking right-->
</div>
<div class="col d-flex align-items-center justify-content-start justify-content-lg-end"> <!--d-flex makes the column take up the least amount of space, doesnt try and spread anything out, align items center provides vertical alignment. justify-content-end moves our items to the far right of the col-->
<div class="row">
<div class="col social"><a href="https://github.com/mattsnyde" target="_blank"> <i class="fab fa-github fa-2x"></i></a></div>
<div class="col social" ><a href="https://www.linkedin.com/in/matthew-snyder-00552320b/" target="_blank"><i class="fab fa-linkedin fa-2x"></i></a></div>
<div class="col social"><a href="https://twitter.com/Matt31137398" target="_blank"><i class="fab fa-twitter fa-2x"></i></a></div>
</div>
</div>
</div>
</div>
</footer>
<script src="js/prism.js"></script>
<script> //Makes the prism look nicer.
Prism.plugins.NormalizeWhitespace.setDefaults({
'remvoe-trailing':true,
'remove-indent':true,
'left-trim':true,
'right-trim':true,
})
</script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"
integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous">
</script>
<script src="js/site.js"></script>
</body>
</html>