Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history 
issue # 9 Created modal design for Covid Case.  included .cc,.js and .html files
  • Loading branch information
@JaraAnd
JaraAnd authored Oct 22, 2021
1 parent f46ccae commit 3852efe
Show file tree
Hide file tree
Showing 3 changed files with 244 additions and 0 deletions.
118 changes: 118 additions & 0 deletions modal-covidcase.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,118 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="modal.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-md" data-toggle="modal" data-target="#myModal">Covid Case Status</button>

<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-md">
<div class="modal-content">
<div class="modal-header" style="background-color: #a65555;">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Covid Case Status</h4>
</div>
<div class="modal-body">

<div class="row">
<div class="col-md-4 text-center">

</div>
<div class="col-md-7.5">
<label>Vaccination Status</label>
</div>
</div>
<div class="row">
</div>
<div class="row">
<div class="col-md-4 text-center">

</div>
<div class="col-md-8 text-center">
<div class="row">
<div class="col-md-6">
<input class="form-control" id="ex1" type="text" placeholder="Type">
</div>
<div class="col-sm-5">

</div>
</div>
</div>
</div>

<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-7.5">
<label>Covid Test Result</label>
</div>
</div>
<div class="row">
<div class="col-sm-4 text-center xm-auto">

</div>
<div class="col-md-8 text-center">
<div class="row">
<div class="col-md-8">
<input class="form-control" id="ex1" type="text" placeholder="Positive/Negative">
</div>
<div class="col-sm-3">

</div>
</div>
</div>
</div>

<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-7.5">
<label>Current Covid Status</label>
</div>
</div>
<div class="row">
<div class="col-md-4 text-center">

</div>
<div class="col-md-8 text-center">
<div class="row">
<div class="col-md-8">
<input class="form-control" id="ex1" type="text" placeholder="Positive/Negative">
</div>
<div class="col-sm-3">

</div>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-sm-4"></div>
<div class="col-md-4 ml-auto">

</div>

</div>
</div>

<div class="modal-footer">
<button type="button" class="btn btn-success" data="modal">Confirm</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
<script src="modal.js"></script>
</div>
</div>
</div>
</div>

</body>
</html>
99 changes: 99 additions & 0 deletions modal.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
:root {
--modal-duration: 1s;
--modal-color: #428bca;
}

body {
font-family: Arial, Helvetica, sans-serif;
background: #f4f4f4;
font-size: 17px;
line-height: 1.6;
display: flex;
height: 100vh;
align-items: left;
justify-content: center;
}

.button {
background: #ca4242;
padding: 1em 2em;
color: rgba(255, 238, 238, 0.933);
border: 0;
border-radius: 5px;
cursor: pointer;
}

.button:hover {
background: #ac3838;
}

.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
height: 100%;
width: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
margin: 10% auto;
width: 60%;
box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.17);
animation-name: modalopen;
animation-duration: var(--modal-duration);
}

.modal-header h2,
.modal-footer h3 {
margin: 0;
}

.modal-header {
background: var(--modal-color);
padding: 15px;
color: #fff;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}

.modal-body {
padding: 10px 20px;
background: #fff;
}

.modal-footer {
background: var(--modal-color);
padding: 10px;
color: #fff;
text-align: center;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}

.close {
color: #ccc;
float: right;
font-size: 30px;
color: #fff;
}

.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}

@keyframes modalopen {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

27 changes: 27 additions & 0 deletions modal.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
// Get Modal Elements
var modal = document.getElementById('simpleModal');
var modalBtn = document.getElementById('modalBtn');
var closeBtn = document.getElementById('closeBtn')[0];

// listen for open click
modalBtn.addEventListener('click', openModal);
//listen for close click
closeBtn.addEventListener('click', closeModal);
window.addEventListener('click', outsideClick);

// function to Open
function openModal() {
modal.style.display = 'block';
}

// function to Close
function closeModal() {
modal.style.display = 'none';
}

// Close If Outside Click
function outsideClick(e) {
if (e.target == modal) {
modal.style.display = 'none';
}
}

0 comments on commit 3852efe

Please sign in to comment.