The purpose of this project is to provide some cool and out of the box web components for my friends(KK & Lennon)' web development assignment. 😜
Use git clone
to download this project, and add any component you need to your own project.
This projects include
1. Rating
Used for voting, and the all data after voting is stored in local storage.
Use for switching the page theme with one or more toggle buttons.
Used for picture selection. As for the position of the selected picture, the picture previously placed in the middle is randomly selected to be placed in a position.
5. Hover music
Used to play music when the mouse hovers.
6. Page viewer
Used to loop through images.
A complex responsive footer.
Used to toggle the iframe in the page.
- Hide or show dom elememts in page: 01.page%20switch.html
- Insert dom elements with loop 02.insertDomWithLoop.html
- Import dynamic insert script 4.1template.html
- Store data(number, string, json) to local storage 5.store.html
- Set html background wiht JS 6.dark.html
- Embed google form in page 9.google form.html
- Import JS first first
<script src="./view pager.js"></script>
<script src="./move.min.js"></script>
- Place the div container to you want
<div id="viewPager-card-container">
<div id="viewPager-left"><i class="fa-solid fa-chevron-left"></i></div>
<div class="viewPager-card" id="viewPager-card1" position="1"><img src="./image/1.png" alt=""></div>
<div class="viewPager-card" id="viewPager-card2" position="2"><img src="./image/2.png" alt=""></div>
<div class="viewPager-card" id="viewPager-card3" position="3"><img src="./image/3.png" alt=""></div>
<div class="viewPager-card" id="viewPager-card4" position="4"><img src="./image/4.png" alt=""></div>
<div class="viewPager-card" id="viewPager-card5" position="5"><img src="./image/5.png" alt=""></div>
<div id="viewPager-right"><i class="fa-solid fa-chevron-right"></i></div>
</div>
Demo
- Single page switching
- looply insert Dom
- search
- template
- Data store
- Night mode
- Timer
- Stacked display at random locations
- form
- Play music in suspension.
Frame
- Grader
- Global theme switch component
- search
- Random stacking
- Play music in suspension
Distributed under the MIT License. See LICENSE for more information.