I haven’t tried anything because I don’t know where to start. I need to have an html button open a modal that will create a div with an expiration date (it will disappear on that date and time permanently), on the create button click (and the create button in the modal will also close the modal. Does anyone know how to do this?
Start by creating a button element using HTML.
Next, using HTML, create modal (make it hidden by default with CSS)
Next, write JavaScript to open (display) the model if the button is clicked.
Write JavaScript that will display the expiration date in the modal and keep track of it in a variable.
Write JavaScript that checks at specific intervals of time (your choice here) and compares the current date/time to the expiration date/time. If the current date/time is greater or equal to the expiration date, then hide the modal.
You will need to clarify this a bit more. There are two buttons? One that opens the modal and one that resides in the modal that when clicked needs to close/hide the modal?
If I am correct, then you will need to add a button element within the modal and then write JavaScript that will cause the modal to close (hide) when either the original button or the button in the modal is clicked.
I need one that opens the modal, and the second one will both add the new card with the expiration date and it will close the modal.
Then I suggest creating the modal for the page first and create a button that displays it from its default state of hidden.
I am not sure what you mean by card here. It sounds like there will be a button on the modal that when clicked adds a card to where? So I assume the modal has an input where the user can enter the expiration date? If so, then you wan the button on the modal to add the expiration date to the page on a card and close the modal at the same time I think?
Then, you want the card to disappear when the expiration date/time equals the current date/time?
The card will be displayed below the add session button in the image (the blue button in the background behind the modal - the modal has been opened to show you what it looks like now- I just need the functionality - everything else is already there) without the modal, and then the modal is how you create/add a scheduled session (there is a data and time input in the modal), and then the create session button with the plus in the second image with the modal is how you add the card and close the modal. Everything will be created when you click the create session button in the modal. (It’s the blue button in the image with the modal (it has the title “Create Session” at the top)) There’s a start time and end time, the end time is what is actually going to make it disappear because on the specific date at the end time, the card will disappear.
I am confused. You already have the modal HTML. You have all the buttons. You just need what functionality?
Can you please post all the code you have written so far?
Is this a homework project for school? Is this a challenge/problem from another website? If so, please provide a link or upload a full description of the overall project.
<style>
#myBtn {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 9; /* Sit on top */
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
padding-top: 50px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
border-top:6px solid #146ad9;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
padding: 20px;
box-shadow:0 0 5px #111;
width: 40%;
}
/* The Close Button */
.close {
border-radius:6px;
background-color:#146ad9;
color:white;
padding:10px 16px 10px 16px;
border:none;
cursor:pointer;
}
.startbutton {
border-radius:6px;
background-color:#146ad9;
color:white;
padding:10px 16px 10px 16px;
border:none;
cursor:pointer;
}
.close:hover,
.close:focus {
border-radius:6px;
background-color:#146ad9;
color:white;
padding:10px 16px 10px 16px;
border:none;
cursor:pointer;
}
.session-label {
width:120px;
display:inline-block;
}
input[type="date"] {
outline:none;
padding:2px 4px 2px 4px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
border:1px solid #ccc;
color:#777;
cursor:pointer;
margin-top:5px;
border-radius:8px;
}
input[type="time"] {
outline:none;
padding:2px 4px 2px 4px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
border:1px solid #ccc;
color:#777;
cursor:pointer;
margin-top:5px;
border-radius:8px;
}
input[type="text"] {
outline:none;
padding:2px 4px 2px 4px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
border:1px solid #ccc;
color:#777;
width:60%;
margin-top:5px;
border-radius:8px;
}
</style>
<!-- Trigger/Open The Modal -->
<button class="startbutton" id="myBtn" title="Schedule a session"><img src="https://deviceconsole.desinic8.repl.co/plus.png" style="width:16px; margin-bottom:-2.5px; margin-right:3px"> Add Session</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<p style="font-size:1em; color:#333; margin-top:-6px; font-weight:600">Create Session</p>
<p style="color:#444; font-size:0.8em">Create a scheduled session that will automatically start, even if you're not logged in.</p>
<hr style="border: none; height: 2px; background: #fff">
<label class="session-label" style="color:#444; font-size:0.8em; margin-top:5px">New Session for:</label>
<input type="text" placeholder="Type class name as it appears in your class list">
<br>
<label class="session-label" style="color:#444; font-size:0.8em">Session Date:</label>
<input type="date">
<br>
<label class="session-label" style="color:#444; font-size:0.8em">Start Time:</label>
<input type="time">
<br>
<label class="session-label" style="color:#444; font-size:0.8em">End Time:</label>
<input type="time">
<br>
<button class="close" title="Schedule a session" style="margin-top:20px"><img src="https://deviceconsole.desinic8.repl.co/check (2).png" style="width:16px; margin-bottom:-2.5px; margin-right:3px"> Create session</button>
<br>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById("myModal");
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
This is a project that I’ve been trying to play around with for fun. I need to have the localstorage for the card creation and the expiration thing. I also need to have the class title (school class title) be able to be displayed in the card (I don’t know if I mentioned it or not.) Hopefully this code is enough information. If you need more, just let me know.
To answer your question about what it’s for, (in detail), it’s a test project for something I may or may not build to release. I’m just trying to get a prototype, so it doesn’t have to be studio quality because I can style it myself.
I posted the code above.
I posted the code. Can you help me or should I ask someone else? (Sorry, if that sounded rude)