1.Expanding Cards

The effect is as shown in the figure:

• The source code
• Online sample

• Summary of knowledge:

1. CSS: Elastic box layoutflexProperty: Make all the child elements of the elastic box model object the same length, ignoring their internal contents.
2. JavaScript:[].filter.call()Method can quickly achieve simple TAB switching. As in the above example source code:

const panelItems = document.querySelectorAll(".container > .panel");
panelItems.forEach(item= > {
    item.addEventListener('click'.() = > {
        [].filter.call(item.parentElement.children,el= >el ! == item).forEach(el= > el.classList.remove('active'));
        item.classList.add('active')}); });Copy the code

2.Progress Steps

The effect is as shown in the figure:

• The source code
• Online sample

• Summary of knowledge:

1. CSS:CSSThe use of variables and the use of an elastic box centered vertically and horizontally with pseudo-elements.
2. JavaScript: calculate the width of the progress bar, class name operation. As the above example part of the source code is as follows:

function handleClass(el){
    let methods = {
        addClass,
        removeClass
    };
    function addClass(c){
        el.classList.add(c);
        return methods;
    };
    function removeClass(c){
        el.classList.remove(c);
        return methods;
    }
    return methods
}
Copy the code

3.Rotating Navigation Animation

The effect is as shown in the figure:

• The source code
• Online sample

• Summary of knowledge:

1. CSS:CSS elastic box layout plusrotateThe animation.
2. JavaScript: operations to add and remove class names. As the above example part of the source code is as follows:

const addClass = (el,className) = > el.classList.add(className);
const removeClass = (el,className) = > el.classList.remove(className);
Copy the code

4.hidden-search-widget

The effect is as shown in the figure:

• The source code
• Online sample

• Summary of knowledge:

1. CSS:CSS transition animation + width changes +inputtheplaceholderStyle.
2. JavaScript: operations to add and remove class names. As the above example part of the source code is as follows:

.search.active > .input {
    width: 240px;
}
.search.active > .search-btn {
    transform: translateX(238px);
}
.search > .search-btn..search > .input {
    border: none;
    width: 45px;
    height: 45px;
    outline: none;
    transition: all .3s cubic-bezier(0.25.0.46.0.45.0.94);
    border-radius: 8px;
}
Copy the code

searchBtn.addEventListener('click'.() = > {
    searchContainer.classList.toggle('active');
    searchInput.focus();
})
Copy the code

5.Blurry Loading

The effect is as shown in the figure:

• The source code
• Online sample

• Summary of knowledge:

1. CSS:CSS filterThe use of attributes; .
2. JavaScript: Timers with dynamic Settings style. As the above example part of the source code is as follows:

let load = 0;
let timer = null;
let blurryLoadingHandler = function(){
    load++;
    if(load > 99) {clearTimeout(timer)
    }else{
        timer = setTimeout(blurryLoadingHandler,20);
    }
    text.textContent = 'Page loading${ load }% `;
    text.style.opacity = scale(load,0.100.1.0);
    bg.style.filter = `blur(${scale(load,0.100.20.0)}px)`;
}
blurryLoadingHandler();
Copy the code

Here is a very important utility function (which will be used in several subsequent examples) that looks like this:

const scale = (n,inMin,inMax,outerMin,outerMax) = > (n - inMin) * (outerMax - outerMin) / (inMax - inMin) + outerMin;
Copy the code

The utility function maps a range of numbers to another range of numbers. For example, map the number range from 1 to 100 to 0 to 1. For details.

6.Scroll Animation

The effect is as shown in the figure:

• The source code
• Online sample

• Summary of knowledge:

1. CSS:CSSDisplacement animation.
2. JavaScript: dynamic element creation + element scroll event listening + view visible area judgment + shaking function. As the above example part of the source code is as follows:

function debounce(fn,time = 100){
    let timer = null;
    return function(){
        if(timer)clearTimeout(timer);
        timer = setTimeout(fn,time); }}let triggerBottom = window.innerHeight / 5 * 4;
boxElements.forEach((box,index) = > {
   const top = box.getBoundingClientRect().top;
   if(top <= triggerBottom){
       box.classList.add('show');
   }else{
      box.classList.remove('show'); }})Copy the code

7. Split Landing Page

The effect is as shown in the figure:

• The source code
• Online sample

• Summary of knowledge:

1. CSS:CSSTransition effect + Elastic box vertical horizontal center +CSSLocation + width change.
2. JavaScript: hover event + class name operation. As the above example part of the source code is as follows:

HTMLElement.prototype.addClass = function(className) {
    this.classList.add(className);
};
HTMLElement.prototype.removeClass = function(className){
    this.classList.remove(className);
}
const on = (el,type,handler,useCapture = false) = > {
    if(el && type && handler) {
        el.addEventListener(type,handler,useCapture);
    }
}
on(leftSplit,'mouseenter'.() = > container.addClass('hover-left'));
on(leftSplit,'mouseleave'.() = > container.removeClass('hover-left'));
on(rightSplit,'mouseenter'.() = > container.addClass('hover-right'));
on(rightSplit,'mouseleave'.() = > container.removeClass('hover-right'));
Copy the code

From this example, I also know the difference between mouseenter and mouseleave and mouseover and mouseout, summarized as follows:

1. Enter fires only once and only after the mouse has moved away from the target element. And over and out is a constant trigger.
2. Enter enters a child element, and e.t. arget can’t tell whether to move in/out a child element or a parent element, while over and out can.

8.Form Wave

The effect is as shown in the figure:

• The source code
• Online sample

• Summary of knowledge:

1. CSS:CSSGradient + elastic box vertical horizontal center +CSSTransition Animation +CSSUse of the shift + focus pseudo-class selector with its sibling element selector.
2. JavaScript: Replace string with tag + dynamically created element. As the above example part of the source code is as follows:

const createLetter = v= > v.split("").map((letter,idx) = > `<span style="transition-delay:${ idx * 50 }ms">${ letter }</span>`).join("");
Copy the code

9.Sound Board

The effect is as shown in the figure:

• The source code
• Online sample

• Summary of knowledge:

1. CSS:CSSGradient + Elastic box vertical horizontal center + basic style.
2. JavaScript: Dynamically create elements + play audio (audioTags). As the above example part of the source code is as follows:

sounds.forEach(sound= > {
    const btn = create('button');
    btn.textContent = sound;
    btn.type = "button";
    const audio = create('audio');
    audio.src = "./audio/" + sound + '.mp3';
    audio.id = sound;
    btn.addEventListener('click'.() = > {
        stopSounds();
        $(The '#' + sound).play();
    });
    buttonContainer.appendChild(btn);
    buttonContainer.insertAdjacentElement('beforebegin',audio);
});
Copy the code

10. Dad Jokes

The effect is as shown in the figure:

• The source code
• Online sample

• Summary of knowledge:

1. CSS:CSSGradient + Elastic box vertical horizontal center + basic style.
2. JavaScript: event listener +fetch APIRequest interface. As the above example part of the source code is as follows:

const api = 'https://icanhazdadjoke.com';
const on = (el,type,handler,useCapture = false) = > {
    if(el && type && handler){
        el.addEventListener(type,handler,useCapture);
    }
}
on(getJokeBtn,'click',request);
request();
async function request(){
    const res = await fetch(api,headerConfig);
    const data = await res.json();
    content.innerHTML = data.joke;
}
Copy the code

11. Event Keycodes

The effect is as shown in the figure:

• The source code
• Online sample

• Summary of knowledge:

1. CSS:CSSGradient + Elastic box vertical horizontal center + basic style.
2. JavaScript: Keyboard event listener + event object properties. As the above example part of the source code is as follows:

const container = document.querySelector('#container');
window.addEventListener("keydown".event= > {
    createKeyCodeTemplate(event);
});

function createKeyCodeTemplate(e){
    const { key,keyCode,code } = e;
    let template = ""; [{title:"event.key".content:key === "" ? "Space" : key
        },
        {
            title:"event.keyCode".content:keyCode
        },
        {
            title:"event.code".content:code
        }
    ].forEach(value= > {
        template += `<div class="key"><small>${ value.title }</small>${ value.content }</div>`;
    });
    container.innerHTML = template;
}
Copy the code

12. Faq Collapse

The effect is as shown in the figure:

• The source code
• Online sample

• Summary of knowledge:

1. CSS:font-awesomeUse of font libraries + pseudo-element selectors + positioning +CSSGradient + Basic style.
2. JavaScript: Dynamically create element + class name toggle + event proxy. As the above example part of the source code is as follows:

const faqs = document.querySelectorAll('.faq-container > .faq');
container.addEventListener('click'.e= > {
   if(e.target.className.indexOf('faq-icon') > -1){
      faqs[[].indexOf.call(faqs,e.target.parentElement)].classList.toggle('active'); }});Copy the code

13. Random Choice Picker

The effect is as shown in the figure:

• The source code
• Online sample

• Summary of knowledge:

1. CSS: Basic styles.
2. JavaScript: dynamically create elements + class name toggle + delay timer usage + random number + keyboard event listening. As the above example part of the source code is as follows:

function createTags(value,splitSymbol){
    if(! value || ! value.length)return;
    const words = value.split(splitSymbol).map(v= > v.trim()).filter(v= > v);
    tags.innerHTML = ' ';
    words.forEach(word= > {
        const tag = document.createElement('span');
        tag.classList.add('tag'); tag.innerText = word; tags.appendChild(tag); })}function randomTag(){
    const time = 50;
    let timer = null;
    let randomHighLight = () = > {
        const randomTagElement = pickerRandomTag();
        highLightTag(randomTagElement);
        timer = setTimeout(randomHighLight,100);
        setTimeout(() = > {
            unHighLightTag(randomTagElement);
        },100);
    }
    randomHighLight();
    setTimeout(() = > {
        clearTimeout(timer);
        setTimeout(() = > {
            const randomTagElement = pickerRandomTag();
            highLightTag(randomTagElement);
        },100);
    },time * 100);
}
function pickerRandomTag(){
    const tagElements = document.querySelectorAll('#tags .tag');
    return tagElements[Math.floor(Math.random() * tagElements.length)];
}
Copy the code

14. Animated Navigation

The effect is as shown in the figure:

• The source code
• Online sample

• Summary of knowledge:

1. CSS: Basic style + positioning + displacement transform and Angle rotation.
2. JavaScript: class name toggle. As the above example part of the source code is as follows:

toggle.addEventListener('click'.() = > nav.classList.toggle('active'));
Copy the code

15. Incrementing Counter

The effect is as shown in the figure:

• The source code
• Online sample

• Summary of knowledge:

1. CSS: Basic style +CSSThe gradient +font-awesomeUse of font libraries.
2. JavaScript: dynamically create elements + timer to achieve incremental addition. As the above example part of the source code is as follows:

function updateCounterHandler() {
    const counters_elements = document.querySelectorAll('.counter');
    counters_elements.forEach(element= > {
        element.textContent = '0';
        const updateCounter = () = > {
            const value = +element.getAttribute('data-count');
            const textContent = +element.textContent;
            const increment = value / 100;
            if (textContent < value) {
                element.textContent = `The ${Math.ceil(increment + textContent)}`;
                setTimeout(updateCounter, 10);
            } else {
                element.textContent = value;
            }
        }
        updateCounter();
    });
}
Copy the code

16. Drink Water

The effect is as shown in the figure:

• The source code
• Online sample

• Summary of knowledge:

1. CSS: Basic style +CSSThe gradient +CSSTransition effects.
2. JavaScript: Regular expression + loop + style and content Settings. As the above example part of the source code is as follows:

if (actives.length === l) {
                setHeightVisible('0'.'hidden'.'350px'.'visible');
                setTextContent("100%"."0L");
            } else if (actives.length === 0) {
                setHeightVisible('350px'.'visible'.'0'.'hidden');
                setTextContent("12.5%"."2L");
            } else {
                const h1 = unitHei * (l - actives.length) + 'px';
                const h2 = unitHei * actives.length + 'px';
                setHeightVisible(h1, 'visible', h2, 'visible');
                const t1 = (unitHei * actives.length / 350) * 100 + "%";
                const t2 = (cups[i].textContent.replace(/ml/."").replace(/\s+/."") - 0) * (l - actives.length) / 1000 + 'L';
                setTextContent(t1, t2);
}
Copy the code

17. movie-app

The effect is as shown in the figure:

• The source code
• Online sample

• Summary of knowledge:

1. CSS: Basic style +CSSThe gradient +CSSTransition effect + Clear float.
2. JavaScript: listening for interface requests + keyboard events. As the above example part of the source code is as follows:

search.addEventListener('keydown'.e= > {
        if(e.keyCode === 13) {let value = e.target.value.replace(/\s+/."");
            if(value){
                getMovies(SEARCH_API + value);
                setTimeout(() = > {
                    e.target.value = "";
                },1000);
            }else{
                window.location.reload(true); }}})Copy the code

PS: This example effect needs to be accessed over a wall due to limited interface access.

18. background-slider

The effect is as shown in the figure:

• The source code
• Online sample

• Summary of knowledge:

1. CSS: Basic style +CSSGradient + Shadow effect + Positioning + pseudo element selector.
2. JavaScript: Background Settings and class name operations. As the above example part of the source code is as follows:

let currentActive = 0;
function setBackgroundImage(){
    const url = slideItems[currentActive].style.backgroundImage;
    background.style.backgroundImage = url;
}
function setSlideItem(){
    const currentSlide = slideItems[currentActive];
    const siblings = [].filter.call(slideItems,slide= >slide ! == currentSlide); currentSlide.classList.add('active');
    siblings.forEach(slide= > slide.classList.remove('active'));
}
Copy the code

19. theme-clock

The effect is as shown in the figure:

• The source code
• Online sample

• Summary of knowledge:

1. CSS: Basic style +CSSVariable + shadow effect + position.
2. JavaScript: Chinese and English toggle and theme mode toggle, as well as date object processing. As the above example part of the source code is as follows:

function setCurrentDate(){
    const date = new Date(a);const month = date.getMonth();
    const day = date.getDay();
    const time = date.getDate();
    const hour = date.getHours();
    const hourForClock = hour % 12;
    const minute = date.getMinutes();
    const second = date.getSeconds();
    const amPm = hour >= 12 ? langText[currentLang]['time-after-text'] : langText[currentLang]['time-before-text'];
    const w = currentLang === 'zh' ? dayZHs : days;
    const m = currentLang === 'zh' ? monthZHs : months;
    const values = [
        `translate(-50%,-100%) rotate(${ scale(hourForClock,0.11.0.360)}deg)`.`translate(-50%,-100%) rotate(${ scale(minute,0.59.0.360)}deg)`.`translate(-50%,-100%) rotate(${ scale(second,0.59.0.360)}deg)`
    ];
    [hourEl,minuteEl,secondEl].forEach((item,index) = > setTransForm(item,values[index]));
    timeEl.innerHTML = `${ hour }:${ minute >= 10 ? minute : '0' + minute } ${ amPm }`;
    dateEl.innerHTML = `${w[day]}.${ m[month]}<span class="circle">${ time }</span>${ langText[currentLang]['date-day-text']}`;
    timer = setTimeout(setCurrentDate,1000);
}
Copy the code

PS: This example also uses the same tool function scale as in Example 5

20. button-ripple-effect

The effect is as shown in the figure:

• The source code
• Online sample

• Summary of knowledge:

1. CSS: Basic style +CSSThe gradient +CSSThe animation.
2. JavaScript: Coordinate calculation + offset + timer. As the above example part of the source code is as follows:

const x = e.clientX;
const y = e.clientY;
const left = this.offsetLeft;
const top = this.offsetTop;

const circleX = x - left;
const circleY = y - top;
const span = document.createElement('span');
span.classList.add('circle');
span.style.left = circleX + 'px';
span.style.top = circleY + 'px';
this.appendChild(span);
setTimeout(() = > span.remove(),1000);
Copy the code

21. drawing-app

The effect is as shown in the figure:

• The source code
• Online sample

• Summary of knowledge:

1. CSS: Basic styles.
2. JavaScript:canvas API + mouseEvents and calculationsxwithyCoordinate +ewColorPickerThe use of. As the above example part of the source code is as follows:

function mouseDownHandler(e){
    isPressed = true;
    x = e.offsetX;
    y = e.offsetY;
}
function throttle(fn,wait = 100){
    let done = false;
    return (. args) = > {
        if(! done){ fn.call(this,args);
            done = true;
        }
        setTimeout(() = > {
            done = false; },wait); }}Copy the code

22. drag-n-drop

The effect is as shown in the figure:

• The source code
• Online sample

• Summary of knowledge:

1. CSS: Basic style +CSSThe gradient +CSSElastic box layout.
2. JavaScript:drag event API+ Randomly generated images. As the above example part of the source code is as follows:

function onDragStart(){
    this.classList.add('drag-move');
    setTimeout(() = > this.className = "invisible".200);
}
function onDragEnd(){
    this.classList.add("drag-fill");
}

function onDragOver(e){
    e.preventDefault();
}
function onDragEnter(e){
    e.preventDefault();
    this.classList.add('drag-active');
}
function onDragLeave(){
    this.className = "drag-item";
}
function onDrop(){
    this.className = "drag-item";
    this.appendChild(dragFill);
}
Copy the code

23. content-placholder

The effect is as shown in the figure:

• The source code
• Online sample

• Summary of knowledge:

1. CSS: Basic style +CSSThe gradient +CSSCard style.
2. JavaScript: skeleton screen loading effect. As the above example part of the source code is as follows:

animated_bgs.forEach(bg= > bg.classList.remove("animated-bg"));
animated_bgs_texts.forEach(text= > text.classList.remove("animated-bg-text"));
Copy the code

24. sticky-navbar

The effect is as shown in the figure:

• The source code
• Online sample

• Summary of knowledge:

1. CSS: Basic style +CSSGradient + Fixed positioning navigation.
2. JavaScript: Scroll event. As the above example part of the source code is as follows:

window.addEventListener("scroll".e= > {
    if(window.scrollY > nav.offsetHeight + 100) {
        nav.classList.add("active");
    }else{
        nav.classList.remove("active"); }})Copy the code

PS: The mobile layout is also done here.

25. double-slider

The effect is as shown in the figure:

• The source code
• Online sample

• Summary of knowledge:

1. CSS: Basic style +CSSGradient + displacement transformation.
2. JavaScript: the realization of the idea of the rotund diagram, mainly usingtransformYMobile terminal usagetransformX. As the above example part of the source code is as follows:

function setTransform(){
    let translate = isHorizontal() ? "translateX" : "translateY";
    leftSlide.style.transform = `${ translate }(${position * currentIndex}px)`;
    rightSlide.style.transform = `${ translate }(${-(position * currentIndex)}px)`;
}
Copy the code

26. toast-notification

The effect is as shown in the figure:

• The source code
• Online sample

• Summary of knowledge:

1. CSS: Basic style + basic style of the message prompt.
2. JavaScript: encapsulates a randomly created message prompt box. As the above example part of the source code is as follows:

function createNotification({message = null,type = null,auto = false,autoTime = 1000,left = 0,top = 0}){
    const toastItem = createEle("div");
    let closeItem = null;
    if(! auto){ closeItem = createEle("span");
        closeItem.innerHTML = "×";
        closeItem.className = "toast-close-btn";
    }
    toastItem.className = `toast toast-${type}`;
    toastItem.textContent = message;
    if(closeItem)toastItem.appendChild(closeItem);
    container.appendChild(toastItem);
    const leftValue = (left - toastItem.clientWidth) <= 0 ? 0 : left - toastItem.clientWidth - 30;
    const topValue = (top - toastItem.clientHeight) <= 0 ? 0 : top - toastItem.clientHeight - 30;
    toastItem.style.left = leftValue + 'px';
    toastItem.style.top = topValue + 'px';
    if(auto){
        setTimeout(() = > {
            toastItem.remove();
        },autoTime);
    }else{
        closeItem.addEventListener("click".() = >{ toastItem.remove(); }); }}Copy the code

Message prompt box implementation ideas can refer to this article.

27. github-profiles

The effect is as shown in the figure:

• The source code
• Online sample

• Summary of knowledge:

1. CSS: Basic styles.
2. JavaScript:try-catchHandling exception syntax +axios APIrequestgithub API + async-awaitSyntax. As the above example part of the source code is as follows:

async function getRepoList(username){
    try {
        const { data } = await axios(githubAPI + username + '/repos? sort=created');
        addRepoList(data);
    } catch (error) {
        if(error.response.status == 404){
            createErrorCard("Error finding warehouse!"); }}}Copy the code

28. double-click-heart

The effect is as shown in the figure:

• The source code
• Online sample

• Summary of knowledge:

1. CSS: Basic style +CSSPicture of love.
2. JavaScript: Event count. As the above example part of the source code is as follows:

function clickHandler(e){
    if(clickTime === 0){
        clickTime = Date.now();
    }else{
        if(Date.now() - clickTime < 400){
            createHeart(e);
            clickTime = 0;
        }else{
            clickTime = Date.now(); }}}Copy the code

29. auto-text-effect

The effect is as shown in the figure:

• The source code
• Online sample

• Summary of knowledge:

1. CSS: Basic styles.
2. JavaScript: Timer + timer time calculation. As the above example part of the source code is as follows:

let time = 300 / speed.value;
writeText();
function writeText(){
    text.innerHTML = string.slice(0,idx);
    idx++;
    if(idx > string.length){
        idx = 1;
    }
    setTimeout(writeText,time);
}
speed.addEventListener("input".e= > time = 300 / e.target.value);
Copy the code

30. password generator

The effect is as shown in the figure:

• The source code
• Online sample

• Summary of knowledge:

1. CSS: Basic style layout.
2. Select box event listener + random number +copy API. As the above example part of the source code is as follows:

function getRandomLower(){
    // The code of a to Z ranges from 97 to 122
    // Can be obtained by the charCodeAt() method
    return String.fromCharCode(Math.floor(Math.random() * 26) + 97);
}
function getRandomUpper(){
    // The code of A to Z ranges from 65 to 90
    // Can be obtained by the charCodeAt() method
    return String.fromCharCode(Math.floor(Math.random() * 26) + 65);
}
function getRandomNumber(){
    // The code of 0 to 9 ranges from 48 to 57
    // Can be obtained by the charCodeAt() method
    return String.fromCharCode(Math.floor(Math.random() * 10) + 48);
}
Copy the code

31. good-cheap-fast

The effect is as shown in the figure:

• The source code
• Online sample

• Summary of knowledge:

1. CSS:CSSImplement switch widget style + basic layout style.
2. JavaScript:inputthechangeEvent listening. As the above example part of the source code is as follows:

const checkBoxElements = document.querySelectorAll(".switch-container input[type='checkbox']");
checkBoxElements.forEach(item= > item.addEventListener("change".e= > {
    const index = Array.from(checkBoxElements).indexOf(e.target);
    if(Array.from(checkBoxElements).every(v= > v.checked)){
        if(index === 0){
            checkBoxElements[2].checked = false;
        }else if(index === 1){
            checkBoxElements[0].checked = false;
        }else{
            checkBoxElements[1].checked = false; }}}));Copy the code

32. notes-app

The effect is as shown in the figure:

• The source code
• Online sample

• Summary of knowledge:

1. CSS: Basic style + card layout.
2. JavaScript:marked.jsThe use of +localStorage APIStore data + calculate mouse cursor position. As the above example part of the source code is as follows:

 on($(".edit", note), "click".e= > {
      const isFocus = textarea.getAttribute("data-focus");
      if (isFocus === "false") {
            textarea.setAttribute("data-focus"."true");
            if(textarea.classList.contains("hidden")){
                textarea.classList.remove("hidden");
            }
            if(! focusStatus){ textarea.value = notes[index].text; }const text = textarea.value.trim();
            // console.log(text);
            if (textarea.setSelectionRange) {
                textarea.focus();
                textarea.setSelectionRange(text.length, text.length);
            }else if (textarea.createTextRange) {
                const range = textarea.createTextRange();
                range.collapse(true);
                range.moveEnd('character', text.length);
                range.moveStart('character', text.length); range.select(); }}else {
        textarea.setAttribute("data-focus"."false");
        notes[index].text = textarea.value;
        main.innerHTML = marked(notes[index].text);
        setData("notes", notes); }});Copy the code

33. animated-countdown

The effect is as shown in the figure:

• The source code
• Online sample

• Summary of knowledge:

1. CSS: Basic styles + displacement, rotation, zoom animations.
2. JavaScript: Animation events + animation creation and reset. As the above example part of the source code is as follows:

function runAnimation(){
    const numArr = $$("span",numGroup);
    const nextToLast = numArr.length - 1;
    numArr[0].classList.add("in");
    numArr.forEach((num,index) = > {
        num.addEventListener("animationend".e= > {
            const {animationName} = e;
            if(animationName === "goIn"&& index ! == nextToLast){ num.classList.remove("in");
                num.classList.add("out");
            }else if(animationName === "goOut" && num.nextElementSibling){
                num.nextElementSibling.classList.add("in");
            }else{
                counter.classList.add("hide");
                final.classList.add("show"); }})})}function resetAnimation(){
    counter.classList.remove("hide");
    final.classList.remove("show");
    const numArr = $$("span",numGroup);
    if(numArr){
        numArr.forEach(num= > num.classList.value = ' ');
        numArr[0].classList.add("in"); }}Copy the code

34. image-carousel

The effect is as shown in the figure:

• The source code
• Online sample

• Summary of knowledge:

1. CSS: Basic style layout.
2. JavaScript: timer to achieve the round. As the above example part of the source code is as follows:

function changeCarouselItem(){
    if(currentIndex > carouselItems.length - 1){
        currentIndex = 0;
    }else if(currentIndex < 0){
        currentIndex = carouselItems.length - 1;
    }
        carousel.style.transform = `translateX(-${ currentIndex * carouselContainer.offsetWidth }px)`;
}
Copy the code

PS: This is an extra step in the timer pit, that is, if we use the setTimeout simulation to implement the setInterval method, there will be problems here, I added a comment in the JS code to explain.

// let interval = mySetInterval(run,1000);
// Why use this method can't achieve the desired effect?
// Use this method as follow to replace window.setInterval,clicked the prev button more to get the stranger effect.
// Maybe this method does not conform to the specification,So make sure to use window.setInterval.
// function mySetInterval(handler,time = 1000){
// let timer = null;
// const interval = () => {
// handler();
// timer = setTimeout(interval,time);
/ /}
// interval();
// return {
// clearMyInterval(){
// clearTimeout(timer);
/ /}
/ /}
// }
Copy the code

This is because the timer we implemented with setTimeout is not conforming to the specification, and setInterval has a default delay of 10ms. Refer to specifications.

35. hover board

The effect is as shown in the figure:

• The source code
• Online sample

• Summary of knowledge:

1. CSS: Basic style +CSSGradient.
2. JavaScript: Dynamically create elements + hover events. As the above example part of the source code is as follows:

function setColor(element){
    element.style.background = `linear-gradient(135deg, ${ randomColor() } 10%, ${ randomColor() }100%) `;
    element.style.boxShadow = `0 0 2px ${ randomColor() },0 0 10px ${ randomColor() }`;
}
function removeColor(element){
    element.style.background = `linear-gradient(135deg, #1d064e 10%, #10031a 100%)`;
    element.style.boxShadow = `0 0 2px #736a85`;
}
Copy the code

36. pokedex

The effect is as shown in the figure:

• The source code
• Online sample

• Summary of knowledge:

1. CSS: Basic style layout +CSSGradient.
2. JavaScript:fetch APIInterface request + create card. As the above example part of the source code is as follows:

function createPokemon(pokemon){
    const pokemonItem = document.createElement("div");
    pokemonItem.classList.add("pokedex");

    const name = pokemon.name[0].toUpperCase() + pokemon.name.slice(1).toLowerCase();
    const id = pokemon.id.toString().padStart(3."0");
    const poke_types = pokemon.types.map(type= > type.type.name);
    const type = main_types.find(type= > poke_types.indexOf(type) > -1);
    const color = colors[type];
    pokemonItem.style.background = `linear-gradient(135deg, ${ color } 10%, ${ randomColor() }100%) `;
    pokemonItem.innerHTML = `
    <div class="pokedex-avatar">
        <img src="https://pokeres.bastionbot.org/images/pokemon/${pokemon.id}.png" alt="the pokemon">
    </div>
    <div class="info">
        <span class="number">#${ id }</span>
        <h3 class="name">${ name }</h3>
        <small class="type">Type:<span>${ type }</span></small>
    </div>`;
    container.appendChild(pokemonItem);
}
Copy the code

Special note: the interface seems not very stable, maybe my network reason, the picture did not load out.

37. mobile-tab-navigation

The effect is as shown in the figure:

• The source code
• Online sample

• Summary of knowledge:

1. CSS: Basic style layout +CSSGradient to achieve the layout of the phone.
2. JavaScript: feel is the mobile end to achieve a rotograph toggle, usingopacityThere’s nothing to say. As the above example part of the source code is as follows:

function hideAllElement(nodeList){
    nodeList.forEach(item= > item.classList.remove("active"));
}
navItems.forEach((item,index) = > {
    item.addEventListener("click".() = > {
        hideAllElement(navItems);
        hideAllElement(carouselItems);
        item.classList.add("active");
        carouselItems[index].classList.add("active"); })})Copy the code

38. password-strength-background

The effect is as shown in the figure:

• The source code
• Online sample

• Summary of knowledge:

1. CSS: It’s really about usingtailwind.cssThis atomizationCSSFramework.
2. JavaScript: Listen for input box events, then change the background blur. As the above example part of the source code is as follows:

password.addEventListener("input".e= > {
    const { value } = e.target;
    const blur = 20 - value.length * 2;
    background.style.filter = `blur(${ blur }px)`;
});
Copy the code

39. 3D-background-boxes

The effect is as shown in the figure:

• The source code
• Online sample

• Summary of knowledge:

1. CSS:Vw, the vhLayout +skewTilt transformation.
2. JavaScript: loop + background image location Settings. As the above example part of the source code is as follows:

function createBox(){
    for(let i = 0; i <4; i++){for(let j = 0; j <4; j++){const box = document.createElement("div");
            box.classList.add("box");
            box.style.backgroundPosition = `${ -j * 15 }vw ${ -i * 15 }vh`; boxContainer.appendChild(box); }}}Copy the code

40. Verify Your Account

The effect is as shown in the figure:

• The source code
• Online sample

• Summary of knowledge:

1. CSS: Basic style layout +inputSome special style Settings.
2. JavaScript:JavaScript focusEvents. As the above example part of the source code is as follows:

.code-container .code:focus {
    border-color: #2397ef;
}
.code::-webkit-outer-spin-button,
.code::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.code:valid {
    border-color: # 034775;
    box-shadow: 0 10px 10px -5px rgba(0.0.0.0.25);
}
Copy the code

function onFocusHandler(nodeList){
    onFocus(nodeList[0]);
    nodeList.forEach((node,index) = > {
        node.addEventListener("keydown".e= > {
            // console.log(e.key);
            if(e.key >= 0 && e.key <= 9){
                nodeList[index].value = "";
                setTimeout(() = > onFocus(nodeList[index + 1]),0);
            }else{
                setTimeout(() = > onFocus(nodeList[index - 1]),0); }})}); }function onFocus(node){
    if(! node)return;
    const { nodeName } = node;
    return nodeName && nodeName.toLowerCase() === "input" && node.focus();
}
Copy the code

41. live-user-filter

The effect is as shown in the figure:

• The source code
• Online sample

• Summary of knowledge:

1. CSS: Basic Style layout + Scrollbar style.
2. JavaScript:fetch APIInterface request +inputEvents filter data. As the above example part of the source code is as follows:

async function requestData(){
    const res = await fetch('https://randomuser.me/api? results=50');
    const { results } = await res.json();
    result.innerHTML = "";

    results.forEach(user= > {
        const listItem = document.createElement("li");
        filterData.push(listItem);
        const { picture:{ large },name:{ first,last },location:{ city,country } } = user;
        listItem.innerHTML = `
            <img src="${ large }" alt="${ first + ' ' + last }" />
            <div class="user-info">
                <h4>${ first }  ${ last }</h4>
                <p>${ city }.${ country }</p>
            </div>
        `; result.appendChild(listItem); })}Copy the code

42. feedback-ui-design

The effect is as shown in the figure:

• The source code
• Online sample

• Summary of knowledge:

1. CSS:CSSDraw love + Basic style layout.
2. JavaScript: implementation of the TAB switching function. As the above example part of the source code is as follows:

ratingItem.forEach(item= > {
    item.addEventListener("click".e= > {
        siblings(item).forEach(sib= > sib.classList.remove("active"));
        item.classList.add("active"); selectRating = item.innerText; })}); send.addEventListener("click".() = > {
    selectRatingItem.innerText = selectRating;
    sendPage.classList.add("hide");
    receivePage.classList.remove("hide");
});
back.addEventListener("click".() = > {
    selectRating = $(".rating.active").innerText;
    selectRatingItem.innerText = $(".rating.active").innerText;
    sendPage.classList.remove("hide");
    receivePage.classList.add("hide");
});
Copy the code

43. custom-range-slider

The effect is as shown in the figure:

• The source code
• Online sample

• Summary of knowledge:

1. CSS:inputElement style Settings (compatible writing) + basic style layout.
2. JavaScript:input rangeElements of theinputEvent listening. As the above example part of the source code is as follows:

input[type="range"]::-webkit-slider-runnable-track {
    background-image: linear-gradient(135deg.#E2B0FF 10%.#9F44D3 100%);
    width: 100%;
    height: 12px;
    cursor: pointer;
    border-radius: 4px;
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-image: linear-gradient(135deg.#d9e2e6 10%.#e4e1e4 100%);
    border: 1px solid #b233e4;
    cursor: pointer;
    margin-top: -6px;
}
Copy the code

range.addEventListener("input".e= > {
    // string to the number
    const value = +e.target.value;
    const label = e.target.nextElementSibling;

    const range_width = getStyle(e.target,"width");//XXpx
    const label_width = getStyle(label,"width");//XXpx

    // Due to contain px,slice the width
    const num_width = +range_width.slice(0,range_width.length - 2);
    const num_label_width = +label_width.slice(0,label_width.length - 2);

    const min = +e.target.min;
    const max = +e.target.max;

    const left = value * (num_width / max) - num_label_width / 2 + scale(value,min,max,10, -10);

    label.style.left = `${left}px`;
    label.innerHTML = value;
});
Copy the code

44. netflix-mobile-navigation

The effect is as shown in the figure:

• The source code
• Online sample

• Summary of knowledge:

1. CSS: Navigation width change +CSSGradient + Basic style layout.
2. JavaScript: Click on the button to switch between the clear and hidden navigation bars. As the above example part of the source code is as follows:

function changeNav(type){
    navList.forEach(nav= > nav.classList[type === "open" ? "add" : "remove"] ("visible"));
}
Copy the code

45. quiz-app

The effect is as shown in the figure:

• The source code
• Online sample

• Summary of knowledge:

1. CSS: Card layout + basic styles.
2. JavaScript: form submission + multiple choice question calculation. As the above example part of the source code is as follows:

submit.addEventListener("click".() = > {
    const answer = getSelected();
    if(answer){
        if(answer === quizData[currentQuestion].correct){
            score++;
        }
        currentQuestion++;
        if(currentQuestion > quizData.length - 1){
            quizContainer.innerHTML = `
                <h2>You answered ${ score } / ${ quizData.length }questions correctly! </h2> <button type="button" class="btn" onclick="location.reload()">reload</button> `
        }else{ loadQuiz(); }}})Copy the code

46. testimonial-box-switcher

The effect is as shown in the figure:

• The source code
• Online sample

• Summary of knowledge:

1. CSS:CSSAnimation + width changes to implement progress bar +font-awesomeUse of font library + basic style layout.
2. Note that the execution time of the timer is the same as the execution animation time for setting the progress bar. As the above example part of the source code is as follows:

.progress-bar {
    width: 100%;
    height: 4px;
    background-color: #fff;
    animation: grow 10s linear infinite;
    transform-origin: left;
}
@keyframes grow {
    0% {
        transform: scaleX(0); }}Copy the code

function updateTestimonial(){
    const { text,name,position,photo } = testimonials[currentIndex];
    const renderElements = [testimonial,username,role];
    userImage.setAttribute("src",photo);
    order.innerHTML = currentIndex + 1;
    [text,name,position].forEach((item,index) = > renderElements[index].innerHTML = item);
    currentIndex++;
    if(currentIndex > testimonials.length - 1){
        currentIndex = 0; }}Copy the code

Special note :CSS can also achieve progress bar.

47. random-image-feed

The effect is as shown in the figure:

• The source code
• Online sample

• Summary of knowledge:

1. CSS: Image layout + Basic Style layout +CSSThe realization of the prompt box (positioning + pseudo-elements) +CSSAchieve the top back effect.
2. JavaScript: Random number + (listening for scroll events) controls back to the top button for explicit/implicit. As the above example part of the source code is as follows:

function onLoad(rows = 5) {
    container.innerHTML = "";
    for (let i = 0; i < rows * 3; i++) {
        const imageItem = document.createElement("img");
        imageItem.src = `${refreshURL}${getRandomSize()}`;
        imageItem.alt = "random image-" + i;
        imageItem.loading = "lazy"; container.appendChild(imageItem); }}function getRandomSize() {
    return `${getRandomValue()}x${getRandomValue()}`;
}
function getRandomValue() {
    return Math.floor(Math.random() * 10) + 300;
}
window.onload = () = > {
    changeBtn.addEventListener("click".() = > onLoad());
    window.addEventListener("scroll".() = > {
        const { scrollTop, scrollHeight } = document.documentElement || document.body;
        const { clientHeight } = flexCenter;
        back.style.display = scrollTop + clientHeight > scrollHeight ? 'block' : 'none';
    })
    onLoad();
}
Copy the code

48. todo-list

The effect is as shown in the figure:

• The source code
• Online sample

• Summary of knowledge:

1. CSS: Basic style layout +CSSGradient.
2. JavaScript:keydownwithcontextmenuEvent listening +localStorage APIStore data. As the above example part of the source code is as follows:

function addTodo(todo){
    let inputValue = input.value;
    if(todo){
        inputValue = todo.text;
    }
    if(inputValue){
        const liItem = document.createElement("li");
        liItem.innerText = inputValue;
        if(todo && todo.complete){
            liItem.classList.add("complete");
        }
        liItem.addEventListener("click".() = > {
            liItem.classList.toggle("complete");
            updateList();
        });
        liItem.addEventListener("contextmenu".(e) = > {
            e.preventDefault();
            liItem.remove();
            updateList();
        });
        todoList.appendChild(liItem);
        input.value = ""; updateList(); }}function updateList(){
    const listItem = $$("li",todoList);
    const saveTodoData = [];
    listItem.forEach(item= > {
        saveTodoData.push({
            text:item.innerText,
            complete:item.classList.contains("complete")})});localStorage.setItem("todoData".JSON.stringify(saveTodoData));
}
Copy the code

49. insect-catch-game

The effect is as shown in the figure:

• The source code
• Online sample

• Summary of knowledge:

1. CSS: Basic style layout.
2. Toggle + replace text in elements (not tag elements) + use of timer. As the above example part of the source code is as follows:

function replaceText(el,text,wrapSymbol = ""){
    let newText = [];
    if(wrapSymbol){
        // why not use split method? ,because it can filter the wrap symbol.
        const getIndex = (txt) = > txt.search(new RegExp("\ \" + wrapSymbol));
        let searchIndex = getIndex(text),i = 0,len = text.length;
        while(searchIndex ! = = -1){
            newText.push(text.slice(i,searchIndex) + wrapSymbol);
            i = searchIndex;
            if(getIndex(text.slice(searchIndex + 1= = = -))1){
                newText.push(text.slice(searchIndex + 1,len));
            }
            searchIndex = getIndex(text.slice(searchIndex + 1)); }}const walk = (el,handler) = > {
        const children = Array.from(el.childNodes);
        let wrapIndex = children.findIndex(node= > node.nodeName.toLowerCase() === "br");
        children.forEach((node,index) = > {
            if(node.nodeType === 3 && node.textContent.replace(/\s+/."")){
                wrapSymbol ? handler(node,newText[index - wrapIndex < 0 ? 0: index - wrapIndex]) : handler(node,text);; }}); } walk(el,(node,txt) = > {
        const parent = node.parentNode;
        parent.insertBefore(document.createTextNode(txt),node);
        parent.removeChild(node);
    });
}
Copy the code

The above tool function implementation reference here to achieve.

Special note: this example is a more comprehensive example.

50. kinetic-loader

The effect is as shown in the figure:

• The source code
• Online sample

• Summary of knowledge:

1. CSS:CSS rotation animation + basic style layout.

As the above example part of the source code is as follows:

@keyframes rotateA {
    0%,25% {
        transform: rotate(0deg);
    }
    50%,75% {
        transform: rotate(180deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
@keyframes rotateB {
    0%,25% {
        transform: rotate(90deg);
    }
    50%,75% {
        transform: rotate(270deg);
    }
    100% {
        transform: rotate(450deg); }}Copy the code

On the last day, an extra 404 effect was implemented as a special ending (^_^). This is a comprehensive use of CSS animation, as follows:

51. 404 page

The effect is as shown in the figure:

• The source code
• Online sample

• Summary of knowledge:

1. CSS:CSSAnimation usage + basic style layout +svgStyle Settings for icon elements.

As the above example part of the source code is as follows:

@keyframes background {
    from {
        background: linear-gradient(135deg,#e0e0e0 10%,#ffffff 90%);
    }
    to {
        background: linear-gradient(135deg,#ffffff 10%,#e0e0e0 90%);
    }
}
@keyframes stampSlide {
    0% {
        transform: rotateX(90deg) rotateZ(-90deg) translateZ(-200px) translateY(130px);
    }
    100% {
        transform: rotateX(90deg) rotateZ(-90deg) translateZ(-200px) translateY(-4000px);
    }
}
@keyframes slide {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-200px);
    }
}
@keyframes roll {
    0% {
        transform: rotateZ(0deg);
    }
    85% {
        transform: rotateZ(90deg);
    }
    87% {
        transform: rotateZ(88deg);
    }
    90% {
        transform: rotateZ(90deg);
    }
    100% {
        transform: rotateZ(90deg);
    }
}
@keyframes zeroFour {
    0% {
        content:"4";
    }
    100% {
        content:"0";
    }
}
@keyframes draw {
    0% {
        stroke-dasharray: 30 150;
        stroke-dashoffset: 42;
    }
    100% {
        stroke:rgba(8.69.131.0.9);
        stroke-dasharray: 224;
        stroke-dashoffset: 0; }}Copy the code