Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/shahramshakiba/javascript-work-showcase
🟡 JavaScript-Work-Showcase | Your time and consideration in reviewing my work are greatly appreciated. Please feel free to explore and share your thoughts (JavaScript🟡)
https://github.com/shahramshakiba/javascript-work-showcase
html-css javascript portfolio work-showcase
Last synced: 2 days ago
JSON representation
🟡 JavaScript-Work-Showcase | Your time and consideration in reviewing my work are greatly appreciated. Please feel free to explore and share your thoughts (JavaScript🟡)
- Host: GitHub
- URL: https://github.com/shahramshakiba/javascript-work-showcase
- Owner: ShahramShakiba
- Created: 2023-10-26T08:01:43.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2023-12-07T12:34:18.000Z (12 months ago)
- Last Synced: 2023-12-07T13:32:27.617Z (12 months ago)
- Topics: html-css, javascript, portfolio, work-showcase
- Language: HTML
- Homepage: https://www.linkedin.com/in/shahramshakiba/
- Size: 3.78 MB
- Stars: 6
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# JavaScript Work Showcase 
### 
Description
- Over time, I have dedicated myself to creating a diverse range of projects using JavaScript, with the primary goal of pushing the boundaries of my skills in this specific domain.
- These projects have not only provided me with a platform for improving my abilities but have also presented me with the opportunity to tackle increasingly complex challenges.
- Through this ongoing collection of work, I have been able to continuously test and improve my proficiency in JavaScript, ultimately allowing me to grow and develop as a proficient developer in this field.
> Your time and consideration in reviewing my work are greatly appreciated. Please feel free to explore and share your thoughts.
### _List of projects :_
> ✅ Coming Soon Landing Page ✅ Login & Signup Form
> ✅ Sidebar Menu ✅ Responsive Navigation Bar
> ✅ Custom Form Validation ✅ Card Slider
> ✅ Filterable Image Gallery ✅ Custom Captcha Generator
> ✅ OTP Verification Form ✅ Password Validation
> ✅ Popup Share Modal ✅ Drag and Drop List
> ✅ Toggle Light/Dark Mode ✅ Download Button with Timer
> ✅ Pagination ✅ Star Rating System
> ✅ Popup Cookies Consent Box ✅ Toast Notification
> ✅ Range Slider ✅ Show & Hide Password
> ✅ Character Limit ✅ Text Typing Effect
### 💻 Coming Soon Page 
- A Coming Soon Landing Page is a pre-launch page or placeholder for a page that isn't ready because a product, service, feature, or website hasn't launched yet.
- It's a temporary location for visitors to learn more about something before that part of the website is finalized and ready to launch.
https://github.com/ShahramShakiba/JavaScript-Work-Showcase/assets/110089830/076cb982-d874-40a5-9923-d1866f6be48d
***
### 💻 Login & Signup Form
- Login forms are used in almost every website and Application. A login form utilizes the credentials of a user, in order to authenticate their access.
- It generally consists of the typical username or email and password. But more fields can be added to improve the site's security.
https://github.com/ShahramShakiba/JavaScript-Work-Showcase/assets/110089830/d6b7e4e4-0d50-4e0e-8ef8-aa72b594222a
***
### 💻 Sidebar Menu
- A sidebar is the combination of several navigation links aligned vertically at the left or right side of the web page.
- Sidebar helps users to get into the different webpage through the help of navigation links and they have open and close features.
https://github.com/ShahramShakiba/JavaScript-Work-Showcase/assets/110089830/7d506e1b-1e28-4873-9008-9390e8234871
***
### 💻 Responsive Navigation Bar
- The main purpose of Navigation Bar is to directly redirect into the web pages by clicking on the hyperlinks as they want.
- Another main purpose of the Navigation Bar is to make the user’s works convenient and easier.
https://github.com/ShahramShakiba/JavaScript-Work-Showcase/assets/110089830/4d8a3c72-fd97-46ce-b1bd-9baa69768299
***
### 💻 Custom Form Validation 
- In this project, I create a set of functions which can be used to validate a form using the HTML validation attributes that, by default, the browser uses to trigger its own validation.
https://github.com/ShahramShakiba/JavaScript-Work-Showcase/assets/110089830/b407b264-a9ea-46be-977b-14097022e400
***
### 💻 Card Slider
- A card slider means the combination of cards aligned horizontally and has a feature to slide to watch the hidden cards.
- The card can contain any content. Like profile cards, e-commerce product cards, blogs card, and others.
https://github.com/ShahramShakiba/JavaScript-Work-Showcase/assets/110089830/8f459ab0-12dd-4cfd-b15b-23705bc0d8c8
***
### 💻 Filterable Image Gallery 
- A filterable image gallery is a type of image gallery that allows users to filter or sort the displayed images based on certain categories or tags.
- This is one of the essential elements on today’s website, as it allows users to easily find the images they are interested in without having to scroll through a long list of images.
https://github.com/ShahramShakiba/JavaScript-Work-Showcase/assets/110089830/2646cd0a-65b2-4fb9-9996-09faea32dfb4
***
### 💻 Custom Captcha Generator
- Captcha stands for “Completely Automated Public Turing test to tell Computers and Humans Apart”.
- Captcha is a great way to protect privacy and provides a web experience free from the usability issues that SPAM creates.
- Many web services, including Google, use CAPTCHA to help prevent unauthorized account entry.
https://github.com/ShahramShakiba/JavaScript-Work-Showcase/assets/110089830/c1b4bf06-617e-446a-9bac-05b67186edfd
***
### 💻 OTP Verification Form
- One-time password (OTP) systems provide a mechanism for logging on to a network or service using a unique password that can only be used once, as the name suggests.
- An OTP is more secure than a static password, especially a user-created password, which can be weak and/or reused across multiple accounts.
- One of the most common uses of OTPs is the case where a user has forgotten their password, or had their account breached.
https://github.com/ShahramShakiba/JavaScript-Work-Showcase/assets/110089830/8d81a4f0-4612-4373-89e8-91ce58fa3890
***
### 💻 Password Validation
- In today’s digital world, it is important to create strong and secure passwords that are difficult to guess or hack.
- This is where password validation or strength checks come into play.
- By implementing this password validation feature, website owners can ensure that users create strong passwords that are less likely to be compromised.
https://github.com/ShahramShakiba/JavaScript-Work-Showcase/assets/110089830/136593a7-6126-48d8-95b7-c4a3270834fc
***
### 💻 Popup Share Modal
- A modal window disables most of the page and requires users to focus on a specific window before continuing.
- There is a view modal button, when you click on that button then the modal box appears with a popup animation.
- In this share modal box, there are some social media icons with pretty cool hover animation and an input box to copy the link.
https://github.com/ShahramShakiba/JavaScript-Work-Showcase/assets/110089830/8c98b8f0-bd6c-4e7d-9526-e1b483758c33
***
### 💻 Drag and Drop List
- Drag and drop sortable lists are a widely used UI element allowing users to reorder items by dragging and dropping them on a desired position.
- This functionality can be found in many web applications, like task managers and e-commerce websites.
https://github.com/ShahramShakiba/JavaScript-Work-Showcase/assets/110089830/5e6e184f-0f3f-409c-90b2-a2798067e05b
***
### 💻 Toggle Light/Dark Mode
- The dark mode is ideal for reducing eye strain in low-light conditions and conserving battery power.
- It might also enhance focus and productivity, particularly for late-night workers. On the other hand, the light mode can improve reading comprehension, speed and might even foster creativity.
https://github.com/ShahramShakiba/JavaScript-Work-Showcase/assets/110089830/237faa87-4c80-44ee-87d4-4f0c4490a369
***
### 💻 Download Button with Timer
- There is a download button that starts the timer for particular seconds, and the file download only after the timer is finished.
- Users can easily sync downloaded files from the internet to their computer to anywhere of their own choice.
https://github.com/ShahramShakiba/JavaScript-Work-Showcase/assets/110089830/afa119d1-b476-4539-90d1-03a8bb01f1a1
***
### 💻 Pagination
- Pagination is the way of linking a series of pages with related content.
- Where a user can use links such as "next", "previous", and page numbers to navigate between pages that display one page of results at a time.
https://github.com/ShahramShakiba/JavaScript-Work-Showcase/assets/110089830/06310df5-ede0-4c3d-b4e4-c95a129d1408
***
### 💻 Star Rating System
- A star rating system consists of a set of stars that are displayed on a website or application, and users can select a certain number of stars to represent their rating.
- It is widely used to allow users to provide feedback or to rate items such as products, movies, or restaurants.
https://github.com/ShahramShakiba/JavaScript-Work-Showcase/assets/110089830/820007b3-2012-4dcd-9d87-f1f9f1c6306f
***
### 💻 Popup Cookies Consent Box
- Cookies are text files that are sent to your browser by a website you visit.
- They assist the website in remembering information about your visit, which can both make it simpler for you to return to the site and increase its usefulness to you.
https://github.com/ShahramShakiba/JavaScript-Work-Showcase/assets/110089830/55e46c6a-742d-418f-943c-3ab02f4227cf
***
### 💻 Toast Notification
- Toast Notification is the message box that appears from any side of the gadget screen, mainly from the right top side.
- The message can be a warning message, error message, or some positive message.
https://github.com/ShahramShakiba/JavaScript-Work-Showcase/assets/110089830/2b6bced2-a4f8-44ef-a91f-916e45613b28
***
### 💻 Range Slider
- Range Slider is the section that can be available on the webpage to increase and decrease the value.
- For example when we have to increase or volume of the computer we have to use a range slider.
https://github.com/ShahramShakiba/JavaScript-Work-Showcase/assets/110089830/611a2cc9-7b77-4bac-9484-3fd8004c3e1a
***
### 💻 Show & Hide Password
- As a definition, password show and hide mean showing or hiding the letter of the passwords by clicking on the toggle button.
- This type of feature is mostly added to the form for security purposes because many users do not want to show their passwords to those who are around them.
https://github.com/ShahramShakiba/JavaScript-Work-Showcase/assets/110089830/4cb98fac-7d69-4de0-8065-8941b3f4bf9b
***
### 💻 Character Limit
- Character limits exist to keep things organized, and to prevent too much information from being included in one message.
- Social media platforms impose character limits for different reasons, but most of them are similar regardless of the site and its users:
- Keeps content clear and brief: By sticking to character limits, users are encouraged to get their point across as quickly and clearly as possible.
https://github.com/ShahramShakiba/JavaScript-Work-Showcase/assets/110089830/3c5e36f0-21d3-4fca-b6b4-0be32ddf1098
***
### 💻 Text Typing Effect
- In this typing animation, each letter of the word appears after the other, creating a typewriter effect.
- There is also a blinking caret animation at the end of the word to make the effect more attractive.
https://github.com/ShahramShakiba/JavaScript-Work-Showcase/assets/110089830/d753a957-938c-4726-ad23-3c878a18eefc
## 
Find me around the Web :
