Skip to content

Commit 7599ddb

Browse files
YunaAnnYunaAnn
committed
UI update
1 parent 5bc9a45 commit 7599ddb

4 files changed

Lines changed: 84 additions & 79 deletions

File tree

‎README.md‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,12 @@
1616
2. Do geese see God?
1717

1818
3. Reverse String
19-
- EXAMPLE </h3>
19+
- EXAMPLE
2020
1. cat -> tac
2121
2. lovely -> ylevol
2222

2323
4. Repeat String
24-
- EXAMPLE:
24+
- EXAMPLE
2525
1. cat, 5 -> catcatcatcatcat
26-
2. rain, 4' -> rainrainrainrain
26+
2. rain, 4' -> rainrainrainrain
27+

‎algorithms.js‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,6 @@ function reverseString()
5050

5151
var reverseStringResult = reverseString.split('').reverse().join('');
5252
document.getElementById("reverseStringResult").innerHTML = reverseStringResult;
53-
5453
}
5554

5655

@@ -86,7 +85,6 @@ function repeatString()
8685
*/
8786

8887
document.getElementById("repeatStringResult").innerHTML = finalString;
89-
9088
}
9189

9290

‎css/main.css‎

Lines changed: 19 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@ html
55

66
body, .jumbotron
77
{
8-
background-color: #e2e2e2;
8+
background: #17A2B8;
9+
color: #e2e2e2;
910
}
1011

1112
strong
@@ -25,21 +26,16 @@ strong
2526
padding-bottom:1.5rem;
2627
}
2728

28-
/*-----------------------------------------*/
29-
.blue-container
29+
.my-4
3030
{
31-
background: rgb(34,137,171);
32-
background: radial-gradient(circle, rgba(34,137,171,1) 0%, rgba(32,132,149,1) 100%);
33-
color: #e2e2e2;
34-
padding: 3rem 0 3rem 0;
35-
margin-bottom:1rem;
31+
background-color: #e2e2e2;
3632
}
3733

38-
.grey-container
34+
/*-----------------------------------------*/
35+
.white-container
3936
{
40-
background: rgb(61,61,61);
41-
background: radial-gradient(circle, rgba(61,61,61,1) 0%, rgba(61,61,61,1) 100%);
42-
color: #e2e2e2;
37+
background-color: #e2e2e2;
38+
color: #1a1a1a;
4339
padding: 3rem 0 3rem 0;
4440
margin-bottom:1rem;
4541
}
@@ -54,26 +50,13 @@ strong
5450
margin: 1.5rem 0 1.5rem 0;
5551
}
5652

57-
.blue-container h1
53+
.white-container h1
5854
{
5955
font-size: 3rem;
6056
padding-bottom: 1rem;
6157
}
6258

63-
.blue-container h6
64-
{
65-
font-size: 1rem;
66-
font-weight: 500;
67-
line-height: 1.2;
68-
}
69-
70-
.grey-container h1
71-
{
72-
font-size: 3rem;
73-
padding-bottom: 1rem;
74-
}
75-
76-
.grey-container h6
59+
.white-container h6
7760
{
7861
font-size: 1rem;
7962
font-weight: 500;
@@ -87,7 +70,8 @@ strong
8770

8871
.form-control:focus
8972
{
90-
background-color: #dbdbdb;
73+
background-color:#17A2B8;
74+
color:#fff;
9175
border: none;
9276
}
9377

@@ -102,3 +86,10 @@ strong
10286
}
10387

10488
/*-----------------------------------------*/
89+
.contact
90+
{
91+
margin: -.4rem 0 1rem 1.5rem;
92+
}
93+
.contact a { color: #e2e2e2; }
94+
.contact a:hover { color: #fff; }
95+
.contact i { font-size:50px; }

‎index.html‎

Lines changed: 61 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -19,55 +19,15 @@ <h1 class="display-4"> JavaScript Algorithms </h1>
1919
<p class="lead" id="description"> Algorithms: Name Swap, Palindrome, Reverse String, Repeat String </p>
2020
<hr class="my-4">
2121
<p class="by"> 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>
22+
<a target="_blank" rel="noopener noreferrer" href="https://github.com/YunaAnn/JavaScriptAlgorithms"><button type="button" class="btn btn-dark btn-lg"> Code </button></a>
23+
<a target="_blank" rel="noopener noreferrer" href="https://github.com/YunaAnn"><button type="button" class="btn btn-outline-dark btn-lg"> Github profile </button></a>
2424
</div>
2525
</div>
2626

27-
<div class="blue-container">
27+
<div class="white-container">
2828
<div class = "container">
2929
<div class="algorithms">
30-
<div class="row">
31-
<div class="col-4">
32-
<div class="example">
33-
<h1 class="display-4"> Name Swap </h1>
34-
<h3 class="lead"> EXAMPLE </h3>
35-
<h6> Doe Jane -> Jane Doe </h6>
36-
<h6> Nowak Jan -> Jan Nowak </h6>
37-
</div>
38-
<div class="row">
39-
<div class="col-8">
40-
<input class="form-control form-control-lg" type="text" id="nameSwap" name="nameSwap">
41-
</div>
42-
</div>
43-
<button id="btn-space" onclick="nameSwap()" class="btn btn-dark btn-lg"> Swap! </button>
44-
<p class="lead"> RESULT </p>
45-
<strong id="swapNameResult"> ------------ </strong>
46-
</div>
47-
<div class="col-8">
48-
<div class="example">
49-
<h1 class="display-4"> Palindrome </h1>
50-
<h3 class="lead"> EXAMPLE PALIDROMES </h3>
51-
<h6> Never odd or even </h6>
52-
<h6> Do geese see God? </h6>
53-
</div>
54-
<div class="row">
55-
<div class="col-12">
56-
<input class="form-control form-control-lg" type="text" id="palindrome" name="palindrome">
57-
</div>
58-
</div>
59-
<button id="btn-space" onclick="palindrome()" class="btn btn-dark btn-lg"> Is palindrome? </button>
60-
<p class="lead"> RESULT (true/false) </p>
61-
<strong id="palindromeResult"> ------------ </strong>
62-
</div>
63-
</div>
64-
</div>
65-
</div>
66-
</div>
6730

68-
<div class="grey-container">
69-
<div class = "container">
70-
<div class="algorithms">
7131
<div class="row">
7232
<div class="col-4">
7333
<div class="example">
@@ -81,7 +41,7 @@ <h6> lovely -> ylevol </h6>
8141
<input class="form-control form-control-lg" type="text" id="reverseString" name="reverseString">
8242
</div>
8343
</div>
84-
<button id="btn-space" onclick="reverseString()" class="btn btn-info btn-lg"> Reverse! </button>
44+
<button id="btn-space" onclick="reverseString()" class="btn btn-outline-info btn-lg"> Reverse! </button>
8545
<p class="lead"> RESULT </p>
8646
<strong id="reverseStringResult"> ------------ </strong>
8747
</div>
@@ -101,15 +61,70 @@ <h6> rain, 4' -> rainrainrainrain </h6>
10161
<input class="form-control form-control-lg" type="number" min="1" step="1" id="repeatStringNumber" name="repeatStringNumber">
10262
</div>
10363
</div>
104-
<button id="btn-space" onclick="repeatString()" class="btn btn-info btn-lg"> Repeat! </button>
64+
<button id="btn-space" onclick="repeatString()" class="btn btn-outline-info btn-lg"> Repeat! </button>
10565
<p class="lead"> RESULT </p>
10666
<strong id="repeatStringResult"> ------------ </strong>
10767
</div>
10868

10969
</div>
70+
71+
<div class="row">
72+
<div class="col-4">
73+
<div class="example">
74+
<h1 class="display-4"> Name Swap </h1>
75+
<h3 class="lead"> EXAMPLE </h3>
76+
<h6> Doe Jane -> Jane Doe </h6>
77+
<h6> Nowak Jan -> Jan Nowak </h6>
78+
</div>
79+
<div class="row">
80+
<div class="col-8">
81+
<input class="form-control form-control-lg" type="text" id="nameSwap" name="nameSwap">
82+
</div>
83+
</div>
84+
<button id="btn-space" onclick="nameSwap()" class="btn btn-outline-info btn-lg"> Swap! </button>
85+
<p class="lead"> RESULT </p>
86+
<strong id="swapNameResult"> ------------ </strong>
87+
</div>
88+
<div class="col-8">
89+
<div class="example">
90+
<h1 class="display-4"> Palindrome </h1>
91+
<h3 class="lead"> EXAMPLE PALIDROMES </h3>
92+
<h6> Never odd or even </h6>
93+
<h6> Do geese see God? </h6>
94+
</div>
95+
<div class="row">
96+
<div class="col-12">
97+
<input class="form-control form-control-lg" type="text" id="palindrome" name="palindrome">
98+
</div>
99+
</div>
100+
<button id="btn-space" onclick="palindrome()" class="btn btn-outline-info btn-lg"> Is palindrome? </button>
101+
<p class="lead"> RESULT (true/false) </p>
102+
<strong id="palindromeResult"> ------------ </strong>
103+
</div>
104+
</div>
110105
</div>
111106
</div>
112-
</div>
107+
</div>
108+
109+
<div class = "container">
110+
111+
<div class="row">
112+
<div class="col-4">
113+
<h3> JavaScript Algorithms </h3>
114+
</div>
115+
<div class="col-4">
116+
</div>
117+
<div class="col-4">
118+
<div class="contact">
119+
<a target="_blank" rel="noopener noreferrer" href="https://github.com/YunaAnn/JavaScriptAlgorithms"> <i class="fas fa-code"></i></a>
120+
<a target="_blank" rel="noopener noreferrer" href="https://github.com/YunaAnn"><i class="fab fa-github" style="padding-left:10px"></i></a>
121+
</div>
122+
</div>
123+
124+
125+
126+
127+
</div>
113128

114129

115130
<!--JS-->

0 commit comments

Comments
 (0)