On Click Event Functionality

JavaScript
#1

Hi there,

I just started learning JavaScript, which seems to be pretty difficult.

So, I am to replicate a webpage (1st image):

image
image873×546 66.8 KB

I have been able to create this with HTML and CSS. However, I am having difficulty adding the functionality to the webpage (2nd image):

image
image1366×503 89 KB

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 code can be viewed on CodePen: Introduction to CSS /JavaScript - Personal Journal (codepen.io).

Thank you!

#2

Hello!

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:

  1. A transparent background that will catch any events, specially a click that will close the modal and cancel any action.
  2. The actual modal window, where the textarea (or input) will be shown.
  3. 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.

#3

Hi Nicolas,

Many thanks for the assistance.

I have been able to implement the modal window, but having issues creating one button that serves both the count and the pop up.

Also, any idea on how to take out the embedded message, so it just displays as “write your note”? image

Thank you!

#4

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
};
#5

Hi Nicolas,

I did not use an<iframe></iframe>. I think I am lost.

#6

If that’s case, could you share your code? Ideally on https://repl.it/ or something similar.

#9

Hi Nicolas,

Here is a link to the code: https://repl.it/@ChiomaSarah/IdealisticColdScandisk#index.html

Thank you!

#10

I see…

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.