-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathapp.html
106 lines (103 loc) · 6.98 KB
/
app.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
<!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/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 active" href="app.html">The App</a>
</li>
<li class="nav-item">
<a class="nav-link" 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-->
<main class="flex-shrink-0">
<div class="container mt-4">
<div class="row row-cols-1 row-cols-lg-2">
<div class="col">
<h1 class="display-4 fw-bold lh-1 mb-3">Word Reverse: A coding Project</h1>
<h4 class="lead ">A javascript coding exercise using arrays that reads strings and displays them in reverse.</h4>
</div>
<div class="col">
<h5 class="border-1 border-bottom border-warning mt-2">Enter a string to reverse</h5>
<form class="row hx-3 gy-2">
<div class="col">
<input class="form-control bg-dark border-warning text-light" id ="userString" type="text" aria-label="User string" name="User String" placeholder="Enter string here">
</div>
<div class="col-12">
<button type="button" id="btnSubmit" class="btn btn-warning btn-md">Reverse</button>
</div>
<div class=" text-light alert alert-dark mt-5 fade invisible show" id="alert" type="alert"><!--Styles an alert like div that is currently not visible by default. It will fade in when appropraite.-->
<h5 class="alert-heading">Your string has been reversed</h5>
<hr>
<p class="mb-0" id="message"></p>
</div>
</form>
</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="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>
<script>
document.getElementById('btnSubmit').addEventListener('click', function(){getString()})
</script>
</body>
</html>