diff --git a/scripts/script.js b/scripts/script.js
index e69de29..df72c34 100644
--- a/scripts/script.js
+++ b/scripts/script.js
@@ -0,0 +1,194 @@
+/* settings component */
+const settingsMenu = document.createElement('template');
+settingsMenu.innerHTML = `
+
+
+
+`;
+
+customElements.define('settings-menu', class extends HTMLElement {
+ constructor() {
+ super()
+ this.attachShadow({
+ mode: 'open'
+ }).append(settingsMenu.content.cloneNode(true))
+
+ this.settingsContainer = this.shadowRoot.querySelector('.settingsContainer');
+ this.settingsIcon = this.shadowRoot.querySelector('.settingsIcon'); //svg icon
+ this.menu = this.shadowRoot.querySelector('.menu'); // for the main menu
+ this.menuContainer = this.shadowRoot.querySelector('.menuContainer');
+ this.menuSlot = this.shadowRoot.querySelector('.menuSlot');
+ this.closeMenu; // for close icons
+ this.count = 0; // a counter
+ this.menuIndex;
+ }
+
+
+
+ connectedCallback() {
+
+ // to rotate the svg icon and display the main menu
+ this.settingsIcon.addEventListener('click', e => {
+
+ if(this.menuIndex){
+ this.shadowRoot.querySelector('.submenu'+(this.menuIndex)).style.visibility = "hidden";
+ }
+
+
+ if(this.count%2==0){
+
+ this.settingsIcon.classList.add('svgClicked');
+ this.menu.style.visibility = "visible";
+
+ }else{
+
+ this.settingsIcon.classList.remove('svgClicked');
+ this.menu.style.visibility = "hidden";
+ /* I know instead of this I should have added and removed a class but it was not working */
+
+ }
+
+ this.count++;
+
+ });
+
+ // creating slots for sub menu
+ const frag = document.createDocumentFragment();
+
+ this.menuSlot.assignedElements().forEach( (menuOption , index) =>{
+
+ let submenu = document.createElement('div');
+ let submenuSlot = document.createElement('slot');
+ let submenuTitle = document.createElement('div');
+
+ // adding a heading and a close icon to a sub menu
+ submenuTitle.innerHTML = " " + menuOption.innerHTML;
+
+ menuOption.setAttribute("index", (index+1));
+ submenuSlot.setAttribute('name', 'menu' + (index+1));
+ submenu.classList.add('submenu');
+ submenu.classList.add('submenu' + (index+1));
+
+ submenu.append(submenuTitle);
+ submenu.append(submenuSlot);
+ frag.append(submenu);
+
+ });
+
+
+ this.menuContainer.append(frag);
+ this.closeMenu = this.shadowRoot.querySelectorAll('.closeMenu'); // get a list of closeIcons
+
+ // adding click event to main menu to open respective sub menu
+
+ this.menu.addEventListener( 'click', e=> {
+
+ let menuOption = e.target.closest('div');
+
+ this.menuIndex = menuOption.getAttribute('index');
+
+ let submenu = this.shadowRoot.querySelector('.submenu'+(this.menuIndex));
+
+ submenu.style.visibility="visible";
+ this.menu.style.visibility = "hidden";
+
+ });
+
+ // adding click event to close Icons and adding code to hide the respective sub menu
+
+ this.closeMenu.forEach((closeButton) =>{
+ closeButton.addEventListener('click', e=>{
+ let submenuIndex = closeButton.getAttribute('index');
+
+ this.shadowRoot.querySelector('.submenu'+(submenuIndex)).style.visibility = "hidden";
+
+ this.menu.style.visibility = "visible";
+
+ });
+ });
+
+
+ }
+
+});
\ No newline at end of file
diff --git a/test.html b/test.html
index 92954b4..e304ec6 100644
--- a/test.html
+++ b/test.html
@@ -4,12 +4,52 @@
Document
-
+
-
+
+
+
+
+
+ Playback
+ quality
+ About
+
+ 0.25
+ 0.5
+ 0.75
+ Normal
+ 1.25
+ 1.5
+ 1.75
+
+ 1044p
+ 720p
+ 480p
+ 360p
+ 240p
+ 144p
+ auto
+ -
+ Profile
+ Hobbies
+ Education
+
+