##################
Clearing the Build
##################

Summary
=======

In this chapter, we will wrap up our application by enabling resetting of the configurator.

Concepts
========

* Clearing the model
* Resetting the build

--------------------------------------------

Resetting your application
==========================

The next step in this tutorial is to hook up the "Reset Build" button. This is relatively straightforward. We want to clear our model from the main assembly viewer, reset our ``Map`` data structure that holds our selections, and reset the DOM to clear the selection information.

.. code-block:: js

	document.getElementById("reset-build-btn").onclick = () => {
		let opt = confirm("Are you sure would you like to reset your build? (This will clear all current selections!)")
		if (opt) {
			this._viewer.model.clear();
			
			document.getElementById("breakdown-frame").innerHTML = "Not Selected";
			document.getElementById("breakdown-fork").innerHTML = "Not Selected";
			document.getElementById("breakdown-frontwheel").innerHTML = "Not Selected";
			document.getElementById("breakdown-rearwheel").innerHTML = "Not Selected";
			document.getElementById("breakdown-seat").innerHTML = "Not Selected";
			document.getElementById("breakdown-crankset").innerHTML = "Not Selected";
			document.getElementById("breakdown-handlebar").innerHTML = "Not Selected";
			
			this._buildSelections.clear();
		}
	}

As a final touch, we will add one more callback to resize our canvas if the window is resized. This good practice to do for any web application using |HCNOW|.

.. code-block:: js

	window.onresize = () => {
		this._viewer.resizeCanvas();
		this._compViewer.resizeCanvas();
	};

With this, all pieces of your tutorial should be complete. Feel free to build upon this example or experiment with additional APIs to further your learning.

