FDD_Project_Components

About The Project

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. 😜

(back to top)

Getting Started

Use git clone to download this project, and add any component you need to your own project. This projects include

Frame part

1. Rating

Used for voting, and the all data after voting is stored in local storage.

Show demo

2. Theme Switching

Use for switching the page theme with one or more toggle buttons.

Show demo

4. Ramdom Place Image

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.

Show demo

5. Hover music

Used to play music when the mouse hovers.

Show demo

6. Page viewer

Used to loop through images.

Show demo

7. Responsive footer

A complex responsive footer.

Show demo

9. Iframe switching

Used to toggle the iframe in the page.

Show demo

Others

1. Hide or show dom elememts in page: 01.page%20switch.html
2. Insert dom elements with loop 02.insertDomWithLoop.html
3. Import dynamic insert script 4.1template.html
4. Store data(number, string, json) to local storage 5.store.html
5. Set html background wiht JS 6.dark.html
6. Embed google form in page 9.google form.html

Usage

1. Import JS first first

<script src="./view pager.js"></script>
<script src="./move.min.js"></script>

2. 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>

(back to top)

Roadmap

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

(back to top)

License

Distributed under the MIT License. See LICENSE for more information.

(back to top)