This project aims to provide the user with an interactive modal (pop-up/collapsible window). This modal is opened by clicking a button and closed by clicking an 'X' button or outside the modal.
The project was built using HTML, CSS and vanilla Javascript. The basic structure of the application was created with HTML. The 'Open Modal' button, the 'Close' button and the modal itself are included in this structure.
With CSS, the user interface of the application is designed. Positioning the modal in the center, styling the buttons, and changes that will occur as a result of user interaction (opening and closing the modal) were made with CSS.
Using vanilla Javascript, the functionality of opening and closing the modal by clicking on the buttons is provided. Clicking the 'Open Modal' button makes the modal visible. Clicking the 'Close' button or clicking outside the modal causes the modal to become invisible. To provide this functionality, Javascript functions that dynamically change CSS styles are used.
This project aims to create a menu application where users can view food options in different categories. For this, we will use the data from our JSON object and React Hooks.
The application creation process and CSS steps are similar to previous projects. Menu component has been created. In this component, React Hooks were used to list food categories and the dishes of these categories.
First, we structured our project. Then we imported CSS, data object and component using React and useState. We created app return in a simple way. We pulled our data and transferred it to a variable. We separated our data object using map and returned our component within the loop, unlike the previous ones. We took the id as the key value of each component and returned the remaining array using ...{}.
Afterwards, we came to our component and imported the useState and the necessary food categories. We created a return and called our objects in the relevant places. Next, we added a button for each food category.
We made our design with CSS. We used grid and flex structures for this. Finally, we defined the onclick property to our buttons. We added a simple function inside. That's it. Our application is ready for use.
