Carousel

A stunning, dynamic image carousel component built with React JS and Tailwind CSS. This component allows you to easily showcase a visually appealing slideshow of images in your web applications with seamless image transitions and a sleek, modern design.

It's my fourth carousel component. it doesn't use any runtime library except of react core itself and CSS-in-JS approach allowers. this Component uses 2x less code than previous version (I built it using hooks.). It's optimized better (it supports multiple slides, now it doesn't have last page changing rotation issue). Component is set up from scratch, it doesn't need CRA to run.

This is final project for Web development course by UOC & Robogarden (restaurant app): In this project, you will be creating a restaurant website where people can view important information about the restaurant. Your website must have three pages: home page, about page, and contact page. You can see a sample of the home and contact pages in the images below. You can read a description of each page in the following sections. Project Objectives By the end of this project, you will be able to: Create web pages for a website. Use HTML to build the content displayed on a web page. Use CSS to change the look and feel of HTML elements. Use Bootstrap CSS for responsive web design and rapid development. Identify simpler JavaScript implementation using jQuery. All Pages Each page on your website must have the following sections: A header section containing the restaurant name or logo and navigation links for accessing other pages. The header section should be implemented using Bootstrap Navbar (https://getbootstrap.com/docs/5.1/components/navbar/). You are expected to write a custom CSS for changing the background colour of the hyperlinks on hover. A footer section that displays copyright information. Home Page The home page is the landing page of the website. The home page displays the restaurant menu. The home page must have the following: An image slider that displays three images. This can be implemented using the Bootstrap Carousel component (https://getbootstrap.com/docs/5.1/components/carousel/). A list of food menus displayed using Bootstrap Card. On a laptop screen (lg and above) display three food menus in a row. On a tablet screen (md and above) display two food menus in a row. On a mobile device, display one food menu in a row. Each food menu item must have a button that can be used to like or dislike a food item. You are expected to use JavaScript to toggle between a Like or Dislike status. About Page This page should be used to display some general information about the restaurant. Feel free to display the content of this page in any creative way you can think of. Contact Page This page must contain a contact form that customers can fill out to contact the restaurant. The contact form must contain the following fields which should be created using Bootstrap classes: Name, Email, Phone, and Message. When the submit button is clicked, the form fields should be validated using Javascript. The validation checks if the user has filled each of the form inputs and displays an appropriate message for a field if it is not filled. For instance, if the name is not filled and the submit button is clicked, an alert message should be displayed with the text “The Name field is required”. Required Tools and Frameworks Web browser. Visual Studio code editor (Optional). Bootstrap. jQuery.