Need a RESET button

[rajtilakjee]

After filling out the online app with names of Google Fonts, if we decide to go with the default one, there is no way to go back to it if the user does not remember the settings (font name, size etc.)

This can be easily solved by having a RESET button on the app that would clear the values present in the app and go back to the default values.

[DenverCoder1]

One option you have is to refresh the page (f5, ctrl+r, or the browser refresh button). That's the simplest way to reset values.

If you just want to see the values without refreshing everything, you can open it in a new tab to check the default.

If you feel it would be helpful, feel free to contribute, though. We do already store defaults for pretty much all fields, so it shouldn't be too complicated.

[rajtilakjee]

Would love to contribute. However, I am not familiar with JS. I know Python though. If it's not too much for you, can you guide me a little as to how the project is structured, I can definitely try. You can take your time, there's no hurry.

[DenverCoder1]

The demo site code is in /src/demo/, it is in JavaScript like you said.

The button itself could be added to the HTML in index.php. In the /src/demo/js/script.js you should see a preview object.

Inside of that there is a "default" mapping which corresponds to ids of elements to default values (this is used for hiding query params when they aren't needed in the URL, so there are some exceptions particularly, the default on the demo site for pause is 1000 rather than 0).

You can add a reset function to the preview object and below it add an event listener to call it similar to the other buttons down at the bottom of the file.

If you'd like more specific instructions, let me know.

[rajtilakjee]

Let me try with this. If I need more information, I'll leave a comment here. Thank you so much for taking out time to explain this.

[rajtilakjee]

This is how you reset a dropdown in JS, am I right?

https://pastebin.com/fTbURuK5

Since the elements are not part of a form element, I need to loop through individual elements and reset them. Let me know if I am heading in the right direction. Thanks.

[DenverCoder1]

This is how you reset a dropdown in JS, am I right?

https://pastebin.com/fTbURuK5

Since the elements are not part of a form element, I need to loop through individual elements and reset them. Let me know if I am heading in the right direction. Thanks.

You should be able to just set the value directly eg. element.value = "false" the same way as regular input fields.

And yeah, basically can just loop through the element fields and set their values to reset them.

[rajtilakjee]

Hey, I got 2 solutions for you:

https://pastebin.com/EqJ5XYpG

I could not check them since I don't have a server setup on my laptop. Let me know if these are workable solutions. If they need little amendment(s), could you please help me out with it? Also, if I were to learn these, would Odin's Project be a nice place to start?

[DenverCoder1]

I've heard about The Odin Project, but I haven't tried it myself. I learned mostly from just having side projects and looking things up as necessary to get things to work.

First solution looks like a good start. 👍

While the reset function can be done globally (and in some projects, it would make sense to do so), since in this case there is a preview object with functions and the defaults, I think it makes sense to do it inside of that.

In which case, the HTML would call preview.reset() rather than resetForm(), for example

<input type="button" value="Reset" onclick="preview.reset();">

The function would then be defined in preview as a key-value pair like:

let preview = {
    /* the other fields and functions here */
    reset: function () {
        /* add what the function does here */
    },
}

In the function, you'd want to create a loop or forEach on a list of inputs. I'd recommend getting a list of inputs, eg.

const inputs = document.querySelectorAll(".param");

Then doing a forEach on it to set the values, checking if the value exists before setting it since things like lines aren't defined in defaults.

inputs.forEach((input) => {
  let value = this.defaults[input.name];
  if (value) {
    input.value = value;
  }
});

Only two things left are:

• using overrides since we want font to default to "Fira Code" instead of "monospace" and pause to default to "1000" on the demo site, width to be 435
• Making sure the color and background color pickers get updated

For the overrides, we may want to make an object to keep things organized, eg.

const overrides = {
  font: "Fira Code",
  pause: "1000",
  width: "435",
};

Then to retrieve the value, we would instead check overrides first, then defaults as a fallback.

let value = overrides[input.name] || this.defaults[input.name];

For fixing the jscolor inputs, we can rely on the documentation which tells us we can instead do:

input.jscolor.fromString(value);

But only if the input.name is "color" or "background". So we would want to use an if-else when setting the value to make sure for those 2 it's correct. eg.

if (value) {
  if (["color", "background"].includes(input.name)) {
    input.jscolor.fromString(value);
  } else {
    input.value = value;
  }
}

Hopefully you should be able to piece this together and get it working. Let me know if you have any additional questions 😄

[rajtilakjee]

I have made the necessary changes to script.js and index.php files, and have created a pull request for you to review.