From the template (1st image), on the click of the “add a new note button”, a text window should pop up and the count should update to 3 notes after entering your text.
Any form of assistance on how to fix this will be appreciated.
The first thing you’ll need is a Modal Window. How you do that will depend on how you’re building the project. For instance, if you’re using a library like Bootstrap, then you’re half way done, if not, then you need to learn how to create a modal window with JavaScript and CSS.
Assuming you’re not using any library, then you need to create three layers:
A transparent background that will catch any events, specially a click that will close the modal and cancel any action.
The actual modal window, where the textarea (or input) will be shown.
The action buttons and how you handle them.
You’ll need the z-index property to make it look like it’s in top of the rest of web.
Start by creating the window without functionality, just like what’s shown on picture 1, including the textarea and buttons (OK and Cancel). Come back when you’re done.
You used an <iframe></iframe>, right? If so, you cannot remove the title (An embedded page…).
For the count, you simple create a variable before opening the iframe, and when just before the modal is open, add one to that variable:
let count = 0;
function updateCount(count) {
document.querySelector('#the-element-that-displays-the-count').innerText = count;
}
document.querySelector('#button-that-opens-modal').onclick = function(e) {
updateCount(++count);
// Then open the modal
};
Since you’re using a native function (prompt) the title cannot be changed. However, you can use a library that creates a modal (or popup/prompt), create a custom one with CSS and JavaScript (which would be a good exercise) or use the native HTML5 dialog element.