Skip to content

Week3 masoud #5

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
massam89 wants to merge 9 commits into
base: master
Choose a base branch
from
Open

Week3 masoud #5

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
731c47d
Ex1
massam89 Nov 30, 2020
6826f59
Ex2
massam89 Dec 1, 2020
5cf8dc3
Ex3
massam89 Dec 1, 2020
925292a
Ex4
massam89 Dec 1, 2020
4ab7470
Ex5
massam89 Dec 1, 2020
a83d2b9
Finished project
massam89 Dec 2, 2020
cc0b008
Add modal and some features, responsive, fixed some bugs
massam89 Dec 3, 2020
322923f
fixed folder
massam89 Dec 3, 2020
3a07b78
Add modal transition
massam89 Dec 4, 2020
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
Prev Previous commit
Add modal transition
  • Loading branch information
@massam89
massam89 committed Dec 4, 2020
commit 3a07b78ff3772f47056b64b33fdd7e81c36d8203
2 changes: 1 addition & 1 deletion Week3/Masoud/project/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ <h2>TIP AMOUNT</h2>

<div class="clearfix"></div>

<div class="modal">
<div id="modal" class="trans modal">
<div class="modal-box">
<h3>Warning</h3>
<p>Please fill all fields</p>
Expand Down
8 changes: 7 additions & 1 deletion Week3/Masoud/project/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ const people = document.getElementById('people');
const calculate = document.getElementById('calculate');
const amount = document.getElementById('amount');
const each = document.getElementById('each');
const modal = document.querySelector('.modal');
const modal = document.getElementById('modal');
const close = document.getElementById('close');

// When press on calculate button
Expand All @@ -14,6 +14,7 @@ calculate.addEventListener('click', calculateTip);
//calculate tip
function calculateTip(e) {
e.preventDefault();

// Display modal element when at least one field empty
if (bill.value == '' || service.value == 'default' || people.value == '') {
modal.style.display = 'block';
Expand All @@ -24,6 +25,11 @@ function calculateTip(e) {
const timing = setTimeout(function () {
modal.style.display = 'none';
}, 5000);
//transition modal
modal.classList.remove('trans');
setTimeout(function () {
modal.classList.add('trans');
}, 5);
} else { //Calculate tip when all fields are filled
amount.textContent = parseFloat(service.value * bill.value / 100 / people.value).toFixed(2);
each.textContent = 'each';
Expand Down
9 changes: 7 additions & 2 deletions Week3/Masoud/project/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,16 +112,21 @@ span{
}

.modal{
background-color: rgb(0, 0,0,0.5);
position: fixed;
width: 100%;
height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: none;
border-radius: 10px;
transform: translate(-50%, -50%);
}

.trans{
background-color: rgb(0, 0,0,0.5);
transition: background 500ms ease;
}

.modal-box{
background-color: orangered;
width: 60%;
Expand Down