Skip to content

Commit 13727a5

Browse files
YunaAnnYunaAnn
committed
UI, main.css
1 parent 34e88be commit 13727a5

File tree

4 files changed

+119
-12
lines changed

4 files changed

+119
-12
lines changed

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# JavaScriptAlgorythms
22

33
1. Name Swap
4-
EXAMPLE
4+
- EXAMPLE:
55
'Doe Jane' -> 'Jane Doe'
66
'Nowak Jan' -> 'Jan Nowak'

‎algorithms.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
function nameSwap(/*str*/)
22
{
3-
var nameSwapString = document.getElementById("nameSwap").value;
4-
53
// EXAMPLE
64
// 'Doe Jane' -> 'Jane Doe'
75
// 'Nowak Jan' -> 'Jan Nowak'
@@ -22,6 +20,8 @@ function nameSwap(/*str*/)
2220
//One line
2321
//return str.split(' ').reverse().join(' ');
2422

23+
var nameSwapString = document.getElementById("nameSwap").value;
24+
2525
var nameSwapResult = nameSwapString.split(' ').reverse().join(' ');
2626
document.getElementById("swapNameResult").innerHTML = nameSwapResult;
2727
}

‎css/main.css

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
html
2+
{
3+
font-family: 'Courier New', Courier, monospace;
4+
}
5+
6+
body, .jumbotron
7+
{
8+
background-color: #e2e2e2;
9+
}
10+
11+
strong
12+
{
13+
font-size: 2rem;
14+
}
15+
16+
/*-----------------------------------------*/
17+
18+
.jumbotron
19+
{
20+
padding-bottom: 2rem;
21+
}
22+
23+
.description
24+
{
25+
padding-bottom:1.5rem;
26+
}
27+
28+
/*-----------------------------------------*/
29+
.blue-container
30+
{
31+
background-color: #17A2B8;
32+
color: #e2e2e2;
33+
padding: 3rem 0 3rem 0;
34+
}
35+
36+
.algorithms
37+
{
38+
padding-left:1.7rem;
39+
}
40+
41+
.col-4, .col-8
42+
{
43+
margin: 1.5rem 0 1.5rem 0;
44+
}
45+
46+
.blue-container h1
47+
{
48+
font-size: 3rem;
49+
padding-bottom: 1rem;
50+
}
51+
52+
.blue-container h6
53+
{
54+
font-size: 1rem;
55+
font-weight: 500;
56+
line-height: 1.2;
57+
}
58+
59+
.example
60+
{
61+
padding-bottom: .5rem;
62+
}
63+
64+
.form-control:focus
65+
{
66+
background-color: #dbdbdb;
67+
border: none;
68+
}
69+
70+
.btn
71+
{
72+
border-radius: .6rem;
73+
}
74+
75+
/*-----------------------------------------*/
76+

‎index.html

Lines changed: 40 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,24 +6,55 @@
66
<title> JavaScript Algorithms | Menu </title>
77
<!--CSS-->
88
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
9+
<link rel="stylesheet" href="css/main.css">
10+
<!--ICONS-->
11+
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.10.2/css/all.css"/>
912
</head>
1013

1114
<body>
1215

1316
<div class = "container">
17+
<div class="jumbotron">
18+
<h1 class="display-4"> JavaScript Algorithms </h1>
19+
<p class="lead"> Algorithms: Name Swap </p>
20+
<hr class="my-4">
21+
<p class="description"> By YunaAnn </p>
22+
<a href="https://github.com/YunaAnn/JavaScriptAlgorithms"><button type="button" class="btn btn-info btn-lg"> Code </button></a>
23+
<a href="https://github.com/YunaAnn"><button type="button" class="btn btn-outline-info btn-lg"> Github profile </button></a>
24+
</div>
25+
</div>
1426

15-
<h5>Write a name to swap</h5>
16-
<p> EXAMPLE </p>
17-
<p> 'Doe Jane' -> 'Jane Doe'</p>
18-
<p> ' Nowak Jan' -> 'Jan Nowak'</p>
27+
<div class="blue-container">
28+
<div class = "container">
29+
<div class="algorithms">
30+
<div class="row">
31+
<div class="col-4">
1932

20-
<input type="text" id="nameSwap" name="nameswap">
21-
<button onclick="nameSwap()" type="button"> Swap! </button>
33+
<div class="example">
34+
<h1 class="display-4"> Name Swap </h1>
35+
<h3 class="lead"> EXAMPLE </h3>
36+
<h6> Doe Jane -> Jane Doe </h6>
37+
<h6> Nowak Jan -> Jan Nowak </h6>
38+
</div>
2239

23-
<p> RESULT </p>
24-
<p id="swapNameResult"> ------------ </p>
40+
<div class="row">
41+
<div class="col-8">
42+
<input class="form-control form-control-lg" type="text" id="nameSwap" name="nameswap">
43+
</div>
44+
<div class="col-4">
45+
<button onclick="nameSwap()" class="btn btn-dark btn-lg"> Swap! </button>
46+
</div>
47+
</div>
2548

26-
</div>
49+
<p class="lead"> RESULT </p>
50+
<strong id="swapNameResult"> ------------ </strong>
51+
52+
53+
</div>
54+
</div>
55+
</div>
56+
</div>
57+
</div>
2758

2859
<!--JS-->
2960
<script src="algorithms.js"></script>

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy