Skip to content

Add new CSS changes into the main branch #56

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
xaoccc wants to merge 20 commits into
base: main
Choose a base branch
from
Open

Add new CSS changes into the main branch #56

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
da16f17
option Ruse added
xaoccc Sep 22, 2024
dbf7317
Update README.md
techfrapi Sep 22, 2024
6514764
Update README.md
techfrapi Sep 22, 2024
f28a28f
Update README.md
techfrapi Sep 22, 2024
ec963f4
Merge pull request #1 from techfrapi/techfrapi-patch-1
shadow-develop Sep 22, 2024
ad9cc79
Update README.md
techfrapi Sep 22, 2024
fec9502
Merge pull request #2 from techfrapi/techfrapi-patch-1
shadow-develop Sep 22, 2024
be1cc78
Implemented functionality to add a new town
techfrapi Sep 22, 2024
882432c
Merge pull request #3 from techfrapi/editor_branch
shadow-develop Sep 22, 2024
c0c4def
Implemented functionality to shuffle the existing towns
shadow-develop Sep 22, 2024
5bb75cb
Implemented functionality to shuffle the existing towns + merged the …
shadow-develop Sep 22, 2024
b5b1b7d
option Ruse added
xaoccc Sep 23, 2024
90b00bf
added Veliko Tarnovo
xaoccc Sep 23, 2024
d5db69b
added some css
xaoccc Sep 23, 2024
cb6bfd2
Merge pull request #4 from techfrapi/shuffler-branch
shadow-develop Sep 23, 2024
e6e9dc5
added red color to delete button
xaoccc Sep 25, 2024
2ddc200
added background image and fixed the display of the result
xaoccc Sep 25, 2024
30e2732
Merge branch 'main' into editor_branch
xaoccc Sep 25, 2024
761ccc5
update buttons
xaoccc Sep 25, 2024
66442b1
final html/css update
xaoccc Sep 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,12 @@
<<<<<<< HEAD
# Towns for SoftUni
Code for the Git and GitHub Exercise
=======
# Roles

- Bobby (techfrapi) takes the role "Editor"
- Ivan (shadow-develop) takes the role "Shuffler"
- Tashev (xaoccc) takes the role "Styler"

>>>>>>> 882432cf27ae1db17e863fc8bc7b300d9916cc2a

83 changes: 80 additions & 3 deletions towns.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,80 @@
select, input {
width: 100px;
}
html {
font-family: Arial, sans-serif;
}

main {
margin: 5rem auto;
width: 14rem;
}

body {
background-color: #0592f11c;
background-image: url(https://images.unsplash.com/photo-1480714378408-67cf0d13bc1b?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
background-position-x: center;
background-position-y: top;
background-repeat: no-repeat;
background-blend-mode: darken;
}

h1 {
text-align: center;
font-size: 3rem;
}

select {
margin-bottom: 1rem;
width: 60%;
display: block;
margin: 0 auto 1rem;
}

.field {
display: flex;
flex-direction: row;
margin-bottom: 1rem;
gap: 0.75rem;
}

button, input {
display: block;
padding: 0.5rem 1rem;
border: none;
border-radius: 0.4rem;
}

button {
background-color: #007bff;
color: white;
width: 5rem;

}

button#btnDelete {
background: red;
}


button:hover {
cursor: pointer;
background-color: #051ed5;
}

button#btnDelete:hover {
background: rgb(139, 0, 0);
}


.field input {
width: 7rem;
}

#result {
margin-top: 1rem;
display: none;
width: 90%;
background: rgba(255, 255, 255, 0.8);
padding: 0.5rem 1rem;
}



35 changes: 22 additions & 13 deletions towns.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,26 +3,35 @@

<head>
<title>Towns</title>
<link rel="stylesheet" href="towns.css" />
<link rel="stylesheet" href="towns.css" />
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="towns.js"></script>
</head>

<body>
<main>
<h1>Towns</h1>
<select id="towns" size="4">
<option>Sofia</option>
<option>Plovdiv</option>
<option>Varna</option>
<option>Bourgas</option>
</select>

<h1>Towns</h1>
<select id="towns" size="4">
<option>Sofia</option>
<option>Plovdiv</option>
<option>Varna</option>
<option>Bourgas</option>
</select>
<div class="field">
<input type="text" id="townName" />
<button id="btnDelete">Delete</button>
</div>
<div class="field">
<input type="text" id="townNameForAdd" />
<button id="btnAdd">Add</button>
</div>
<div>
<button id="btnShuffle">Shuffle</button>
</div>
<div id="result"></div>
</main>

<div>
<input type="text" id="townName" />
<button id="btnDelete">Delete</button>
</div>
<div id="result"></div>

</body>

Expand Down
34 changes: 33 additions & 1 deletion towns.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
$(document).ready(function() {
$('#btnDelete').click(deleteTown)
$('#btnShuffle').click(shuffleTowns);
$('#btnAdd').click(addTown);
});


function deleteTown() {
let townName = $('#townName').val();
$('#townName').val('');
Expand All @@ -12,8 +15,37 @@ function deleteTown() {
option.remove();
}
}
if (removed)
if (removed) {
$('#result').css("display", "block");
$('#result').text(townName + " deleted.");
}

else
$('#result').text(townName + " not found.");
}

function shuffleTowns() {
let towns = $('#towns option').toArray();
$('#towns').empty();
shuffleArray(towns);
$('#towns').append(towns);
$('#result').text("Towns shuffled.");

function shuffleArray(array) {
for (var i = array.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var oldElement = array[i];
array[i] = array[j];
array[j] = oldElement;
}
}
}

function addTown() {
let townName = $('#townNameForAdd').val();
$('#townNameForAdd').val('');
$('#towns').append($('<option>').text(townName));
$('#result').css("display", "block");
$('#result').text(townName + " added.");
}