Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/monsara/art
Add logic for the web site components in pure JavaScript in classic style according to the technical task from the course "Practical JavaScript (Advanced)" on Udemy platform. More information in README.md
https://github.com/monsara/art
accordion anchorscroll animated-css bootstrap burger-menu drag-and-drop fetch-api filter gulp html-css-javascript input-mask modal popup slider text-validation webpack
Last synced: 10 days ago
JSON representation
Add logic for the web site components in pure JavaScript in classic style according to the technical task from the course "Practical JavaScript (Advanced)" on Udemy platform. More information in README.md
- Host: GitHub
- URL: https://github.com/monsara/art
- Owner: monsara
- Created: 2021-01-23T19:19:03.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2021-01-30T17:29:57.000Z (almost 4 years ago)
- Last Synced: 2024-07-24T21:12:35.444Z (4 months ago)
- Topics: accordion, anchorscroll, animated-css, bootstrap, burger-menu, drag-and-drop, fetch-api, filter, gulp, html-css-javascript, input-mask, modal, popup, slider, text-validation, webpack
- Language: HTML
- Homepage: https://monsara.github.io/art/dist
- Size: 9.14 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Art web site
Add logic for the web site components in pure JavaScript in classic style according to the technical task from the course ["Practical JavaScript (Advanced)"](https://www.udemy.com/course/javascript_practice/) on Udemy platform.
Technical task: https://docs.google.com/document/d/1UFU42VTlqKQ8VIhco3l_K6M6oGlfFAK1MAqlkpcRG0I/edit
GitHup Page: https://monsara.github.io/art/dist
## Browser Support
New browsers — Firefox, Chrome, Opera, Microsoft Edge and IE 11, newer versions
of Android/iOS, etc.
## Used techniques
### HTML/CSS
- SASS/SCSS (SCSS modules, CSS Animation, CSS Flexbox)
### JavaScript features
- Using modules for features
- Opening modal windows when clicking on modal triggers
- Opening modal windows after a set time
- Opening modal windows on scrolling to the end of landing page
- Сlosing modal windows by pressing close button and modal backdrop
- Destroing modal tirger on open modal window
- Vertical and horisontal sliders
- Auto switching slides
- Using PHP server
- Using Fatch API to post form data to the server
- Informing еру user about the progress of posting form data to the server
- Using mask for input with phone nomber
- Text validation for text inputs (only allow cyrillic characters and numbers)
- Getting data from server using Fetch API for uploading more styles in styles
section
- Filtration portfolio works
- Replace images on mouseover event in sizes section
- Toggle accordions in Often questions section
- Showing burger menu on tablet screens and bellow, and hide it when resizing
if the screen is less than 992px
- Drag-and-Drop picture uploading in forms
## Libs, frameworks
- Animate.css
- Bootstrap
## Instruments
- Git
- Npm
- Node.js
- Gulp
- Webpack
- Chrome DevTools
- VS Code
## Developing
### Run site locally
Before using, make sure that Gulp and Node.js are installed on your computer
To build the site on your PC, run the following commands in the terminal:
- Clone the repository on your computer
```shell
git clone https://github.com/monsara/art.git
```
- Go to the project folder
```shell
cd art
```
- Install dependencies
```shell
npm install
```
- Run the build project
```shell
gulp
```
- In the browser tab go to [http://localhost:4000](http://localhost:4000)