Modal App

Modal App

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.

View on Project

react project

Menu App

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.

View on Project

react project

Accordion App

This project aims to create an accordion using our data in our json object. For this, we added icons and used them as buttons.

Creating the application and css steps are similar to previous projects. Review component has been created. Here we used icons as a new feature. We have installed our package. And we imported the icons we want to use.

First, we structured our project. Then we imported our css, data object and component with react I useState. We created the app return simply. We pulled our data and transferred it to our variable. We split our object with map. and in the return inside, we returned our component, unlike the previous ones. We got our id by giving a key to our component and returned the rest of the array with ...{}.

Then we came to our component and imported our useState and icons. We created our return and called our objects in the relevant places. Then we added the button. We gave our button our icons with ternary instead of name.

We designed with CSS. We used grid and flex structures for this. Finally, we defined onclick in our button. We added a simple function inside. Ta Taa. Our app is ready to be used.

View on Project