Skip to content

add 3 and 4 labs #2

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
ledan404 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

add 3 and 4 labs #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
255 changes: 255 additions & 0 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,255 @@
.container.p-3 {
border-radius: 10px;
border-color: #4F5665;
}

.logo.col-md-1 {
min-width: 100px;
max-height: 38px;
margin-top: 5px;
}

.tabs {
display: flex;
justify-content: center;
}

.my_dogs {
text-decoration: none;
color: #4F5665;
min-width: 100px;
max-height: 24px;
margin-top: 0px;
}

.create_dogs {
text-decoration: none;
color: #4F5665;
min-width: 100px;
max-height: 24px;
margin-top: 0px;
}

.form-control {
display: flex;
justify-content: right;
max-width: 450px;
min-width: 100px;
max-height: 24px;
}

h3.mb-3 {
text-align: center;
}

.horizontal_block {
border: none;
background-color: #4F5665;
color: #4F5665;
height: 2px;
}

form#add_form.bg-light {
border-right: 2px solid #4F5665;
height: 100%;
}

#search_label.form-label {
text-align: left;
margin-left: 15px;
max-width: 150px;
}

.switch {
margin-left: 25px;
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}

.switch input {
display: none;
}

.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .4s;
}

.slider:before {
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
transition: .4s;
}

input:checked + .slider {
background-color: #2196F3;
}

input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
transform: translateX(26px);
}

.slider.round {
border-radius: 34px;
}

.slider.round:before {
border-radius: 50%;
}

#count_label.form-label {
text-align: left;
margin-left: 15px;
}

#count_button.btn.btn-primary {
margin-left: 65px;
width: 150px;
}

.count_result_label {
margin-left: 15px;
}

.first_dog_item {
min-height: 80px;
min-width: 135px;
max-height: 130px;
max-width: 185px;
}

.dog_title {
margin-left: 10px;
}

.dog_description {
margin-left: 10px;
font-size: 12px;
}

.edit-remove-buttons {
display: flex;
justify-content: space-between;
}

.edit-button {
color: #FFFFFF;
background-color: #2196F3;
border-color: #2196F3;
border-radius: 10px;
width: 75px;
margin-left: 10px;
}

.remove-button {
color: #FFFFFF;
background-color: #F53855;
border-color: #F53855;
border-radius: 10px;
width: 85px;
}

.first_dog {
border: 2px solid #4F5665;
border-radius: 10px;
background: #FFFFFF;
width: 195px;
height: 280px;
list-style-type: none;
}

.item-card {
max-width: 420px;
}

.item-container__image {
min-height: 200px;
max-width: 420px;
cursor: pointer;
}

.delete-section {
color: white;
padding: 20px;
border: 1px solid rgb(255, 53, 53);
border-radius: 16px;
background: rgba(255, 53, 53, 0.3);
min-height: 400px;
display: grid;
place-items: center;
transition: background-color 0.3s ease-in-out;
}

.delete-section.selected {
background: rgba(255, 53, 53, 0.5);
}

.delete-section__icon {
width: 40px;
}

.edit-window {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
padding: 20px;
border: 1px solid #ccc;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
z-index: 1000;
}

.edit-window h3 {
margin-top: 0;
}
.container.p-3 {
border-radius: 10px;
border-color: #4F5665;
}

.logo.col-md-1 {
min-width: 100px;
max-height: 38px;
margin-top: 5px;
}

.tabs {
display: flex;
justify-content: center;
}

.my_dogs {
text-decoration: none;
color: #4F5665;
min-width: 100px;
max-height: 24px;
margin-top: 0;
}

.create_dogs {
text-decoration: none;
color: #4F5665;
min-width: 100px;
max-height: 24px;
margin-top: 0;
}
.edit-window {
display: block;
}
Binary file added img/.DS_Store
View file
Open in desktop
Binary file not shown.
Binary file added img/GoldenRetriever.jpeg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/LabradorRetriever.jpeg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/PesPatron.jpeg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
114 changes: 114 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,114 @@
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Dogs</title>

<link rel="stylesheet" href="./css/style.css" />

<!-- Bootstrap 5 -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
crossorigin="anonymous"
/>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
crossorigin="anonymous"
></script>

<!-- UUID library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/uuid/8.2.0/uuid.min.js"></script>
</head>
<body>
<header id="header" class="header">
<div class="main-header">
<div class="container p-3">
<div class="row mb-3">
<div class="logo col-md-1">
My DOGS
</div>
<div class="col-md-3">
</div>
<div class="col-md-5 d-flex justify-content-end">
<input id="search_input" type="text" class="form-control" placeholder="Type something..."/>
</div>
<div class="col-md-1">
<button id="search_button" type="button" class="btn btn-primary">
Search
</button>
</div>
<div class="col-md-1">
<button id="clear_find_button" type="button" class="btn btn-danger">
Clear
</button>
</div>
</div>
</div>
</div>
</header>

<div class="container p-3">
<div class="row">
<div class="col-md-3 mt-2">
<form id="add_form" class="bg-light">
<h3 class="mb-3">Manage Dogs</h3>
<div class="mb-3">
<label id="search_label" class="form-label">
Sort by the cutest dogs </label>
<label class="switch">
<input id="sort_switch" type="checkbox">
<span class="slider round"></span>
</label>
</div>
<div class="mb-3">
<div class="horizontal_block"></div>
</div>
<div class="mb-3">
<label id="count_label" class="form-label">Count total daily expenses:</label>
</div>
<div class="mb-3">
<button id="count_button" type="button" class="btn btn-primary">
Count
</button>
</div>
<div class="mb-3">
<label id="count_result_label" class="count_result_label">
Total cuteness:
</label>
<span id="total_price">0</span>
</div>
<div class="col-md-5 mt-2">
<div class="create_dog_title">Create Dog</div>
<div class="create_title_input">
<form id="dogForm" class="create_dog_form">
<label for="dog-select">Title</label><br>
<select name="dogs" id="dog-select" required>
<option value="">Select a title</option>
<option value="GoldenRetriever">GoldenRetriever</option>
<option value="LabradorRetriever">LabradorRetriever</option>
<option value="PesPatron">PesPatron</option>
</select><br>
<label for="description_input">Description</label><br>
<input id="description_input" type="text" class="description-control" placeholder="Type something..." required/><br>
<label for="expenses_input">Daily expenses ($)</label><br>
<input id="expenses_input" type="number" class="expenses-control" placeholder="Example, 5" min="1" step="1" required/><br>

<button id="submit_button" type="submit" >Submit</button>
</form>
</div>
</div>
</form>
</div>

<ul id="items_container" class="col-md-8">
</ul>

</div>
</div>
<script type="module" src="./js/index.js"></script>
</body>
</html>
Loading