Skip to content

Commit 7599ddb

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

File tree

4 files changed

+84
-79
lines changed

4 files changed

+84
-79
lines changed

‎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)
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