Introduction
I have been learning about Front-end development and was privileged to join a hackathon. The task was to build a Shopify onboarding dashboard for online stores using HTML, CSS, and JavaScript. I will explain how I set it up and the steps I took to build it.
It was a perfect challenge to showcase my skills; one can only show proof of knowledge in web development after building something. Frantz Kati, a full-stack software engineer and educator, organized this hackathon.
Here is the final app [https://oyiks.github.io/Shopify_clone/].
Prerequisites
For you to build a Shopify onboarding dashboard like this, you would have an understanding of the following:
HTML
CSS
JavaScript.
This is the file structure.
HTML Structure
Here, I added the font as seen in the UI design to the head of the HTML document and linked the CSS file to the HTML.
The navigation starts here with a nav element, the navigation's container. I added a div nested in the nav element so I can add responsive images using the picture element and make the image a link that you can click to go to another page.
Next, I added a div container with a class of search and an input which is a flex child of the nav element.
The next in the navigation bar is a div container with the class btn, and a button with a bell icon. The three attributes on the button are used for accessibility; aria-has-popup indicates an element triggers a popup; aria-expanded indicates the current state of an element; aria-controls specifies the ID of the element.
Next, you have an unordered list which is used for accessibility, with a class of menu-active and ID of profile-menu-content; aria-labelledby attribute for the screen reader to associate the profile-menu with the unordered list; role=”menu” is used to indicate the menu since Ul element is non-semantic in this situation.
Here is the dropdown menu for the button with the bell icon. You have a div container with a class of menu-icon which wraps the dropdown with three list items. The first two are images and the last is an inner container with text.
The next button is wrapped in a div container with a class menu-wrapper and the button has a class of profile-trigger for styling and other attributes for accessibility. Embedded in the button is a placeholder image.
Another dropdown menu begins. There is a div with a list container and an image with text named All Stores inside it, along with a horizontal line.
Next, you have 4 four list elements that nest a paragraph with text in it.
To create a card component, I added a div container with the class advert advert-active. I added another div nested in the div container with the class advert-message which would be one of the flex children. Then, the next flex child is a div container which is the parent of a button element and a cancel icon for closing the card component.
To create an accordion, I added a div, the parent container with a class of accordion-container. Next, I added two divs nested in the accordion container div that would be flex children. Then, I added a div that would carry some text in the header of the accordion.
Next is the progress bar which is given an attribute of max=”100” and value=”0” to show the maximum is 100 and starts at 0.
Now, I want to build the collapsible section. All collapsible have a div container with an image and text.
CSS Styling
I added the fonts needed to the body and gave it a background color of “#b5b5b5”.
I gave the nav container a display flex and a space between it. I also added a background color the same as the design and aligned the items to be the same vertical height.
The progress bar has a width of 72px and a height of 10px, a margin-left of 10px for space at the left-hand side. The accent color is the color that fills the progress bar which is black in this case.
The accordion container is the div container that wraps the accordion. It’s given a border radius on all four sides and a background color of white and is made wide with 888px.
The accordion menu class is the div container with all the collapsible elements. It’s given a display flex so that all the elements stay on the same line and space with all the items aligned at the center.
This is the styling for devices below 480px. A little bit of adjustment to the nav container, reducing the gap, padding, and height.
JavaScript Code
For the functionality with JavaScript, a function is created as shown below.
Inside the ShowMenuComponent function, the button with the bell icon with a class of Alert Trigger is selected and stored as a reference to the MenuTrigger variable. Also, the dropdown menu which is an Ul element with an ID of profile-menu-content is selected and stored as a reference to the menu variable.
Next, I added a click event handler MenuTrigger so that the dropdown menu is shown when the button with the bell icon is triggered. The button with the bell icon has an attribute aria-expanded that is set to true and stored in the variable isExpanded. Menu.classList.toggles adds the class menu-active which makes the dropdown menu active.
All the lists in the dropdown menu are selected and stored as a reference to the variable allMenuItems. Now, there is a conditional statement, if the button with the bell icon is clicked, the aria-expanded attribute is set to false and focused, else it is set to true and the AllMenuItems is focused detecting to assistive technology that the dropdown menu has collapsed and brought back to default. Lastly, you call the function using ShowMenuComponent();.
Next, another function is created to expand the dropdown menu after the second button is clicked. The button with the class profile-trigger is selected and stored as a reference to the variable MenuTrigger. Also, the ID's profile menu is selected and stored as a reference to the variable menu.
A click-event listener is added which toggles the dropdown menu whenever the second button is clicked. Lastly, the function is called using showDropdownMenu();.
Another function is created to toggle the advert component on and off. The cancel-icon class is selected which is an image that behaves like a button and is stored as a reference to the variable AdvertTrigger. Also, the advert class of the advert component div container is selected and stored as a reference to the variable menu.
A click event listener is added to toggle the advert menu component when the cancel icon is clicked. Finally, the function is called using AdvertMenuComponent();.
,
Another functionality was created to collapse the accordion and expand it. The div container with a class of loading texts for the accordion child elements was selected and reference was stored in the variable AccordionTrigger.
A for loop was created to run through the five accordion child elements with a click event listener inserted inside the loop. Once any of the child elements is clicked, it is displayed, else it stays unexpanded by default. DisplayAccordion(); is used to call the function.
Conclusion
You have come a long way in getting into my head to understand the steps I took in building this Shopify onboarding UI. It was good for me because I had to practically make use of those syntaxes I had been watching from tutorials. This proves to me that building things is really the way to learn, but far better is writing about what you built.
Next, I would write on a budget tracker I built using Reactjs, a framework on JavaScript. Let me know your thoughts.
Top comments (0)