文章目录

• • 前言
  • Day 1 expanding-cards
  • Day 2 progress-steps
  • Day 7 Split Landing Page
  • Day9 Sound Board
  • Day10 Dad Jokes
  • Day11 Event Keycodes
  • Day12 FAQ collapse
  • • 重点1：classList.toggle('active')
    • 重点2：css 伪类选择器
    • 重点3：css 的覆盖
    • Day46 Quiz App
    • • 重点 label 标签的 for 属性

        前言

        发现一个没有用前端框架的练手项目，很适合我这种纯后端开发夯实基础，内含50个mini project，学习一下，做做笔记。

        • 项目地址：https://github.com/bradtraversy/50projects50days

          Day 1 expanding-cards

          效果预览

          核心代码：

          // 为所有的 panel 注册点击事件panels.forEach(panel => {    panel.addEventListener('click', () => {    // 清空所有 active 样式        removeActiveClasses()        // 激活被点击 panel 的 active样式        panel.classList.add('active')    })})function removeActiveClasses() {    panels.forEach(panel => {        panel.classList.remove('active')    })}

          知识点总结：

          • 响应式布局 flex: 5;
          • 操作 classList 可以动态修改节点的 class

            Day 2 progress-steps

            效果预览

            核心代码：

            function update() {    // Day1 中的处理方式    circles.forEach((circle, idx) => {        if(idx  
            知识点总结：
             

            • Day1 中的样式控制
            • 通用的前进后退按钮禁用逻辑
              • 当前节点为第一个节点：后退按钮禁用
              • 当前节点为最后一个节点：前进按钮禁用
              • 其他情况，都不禁用

                Day 7 Split Landing Page

                效果预览

                核心代码：

                const left = document.querySelector('.left')const right = document.querySelector('.right')const container = document.querySelector('.container')left.addEventListener('mouseenter', () => container.classList.add('hover-left'))left.addEventListener('mouseleave', () => container.classList.remove('hover-left'))right.addEventListener('mouseenter', () => container.classList.add('hover-right'))right.addEventListener('mouseleave', () => container.classList.remove('hover-right'))

                知识点总结：

                • 两种样式的互斥交互，成对编写 classList.add/remove
                • mouseenter 是鼠标移入事件，mouseleave 是鼠标移出事件

                  Day9 Sound Board

                  效果预览 （打开音频设备）

                  核心代码：

                  const sounds = ['applause', 'boo', 'gasp', 'tada', 'victory', 'wrong']sounds.forEach(sound => {    const btn = document.createElement('button')    btn.classList.add('btn')    btn.innerText = sound// 注册事件 点击按钮就停止所有音效后，播放当前选中的音乐    btn.addEventListener('click', () => {        stopSongs()        document.getElementById(sound).play()    })// 加进h5渲染页面    document.getElementById('buttons').appendChild(btn)})function stopSongs() {    sounds.forEach(sound => {        const song = document.getElementById(sound)        song.pause()        song.currentTime = 0;    })}

                  知识点总结：

                  • html中声明一个 p 作为容器，提供js渲染
                  • audio元素.play() 播放
                  • audio元素.pause() audio元素.currentTime = 0 停止

                    Day10 Dad Jokes

                    效果预览

                    核心代码：

                    jokeBtn.addEventListener('click', generateJoke)generateJoke()async function generateJoke() {  const config = {    headers: {      Accept: 'application/json',    },  }  const res = await fetch('https://icanhazdadjoke.com', config)  const data = await res.json()  jokeEl.innerHTML = data.joke}

                    • 第二种generateJoke的写法

                       function generateJoke() {   const config = {     headers: {       Accept: 'application/json',     },   }   fetch('https://icanhazdadjoke.com', config)     .then((res) => res.json())     .then((data) => {       jokeEl.innerHTML = data.joke     }) }

                      知识点总结：

                      • 使用js发起异步http请求的两种方式
                        • async await fetch
                        • Promise形式的链式调用 fetch then

                          Day11 Event Keycodes

                          • keyCode 是一个属性，这个项目可以当个字典用。原文演示地址

                            const insert = document.getElementById('insert')window.addEventListener('keydown', (event) => {  insert.innerHTML = `    ${event.key === ' ' ? 'Space' : event.key}   event.key  ${event.keyCode}  event.keyCode  ${event.code}  event.code  `})

                            其中一个应用场景是禁止回车提交表单。

                            function EnterStop(e){         if(e.keyCode == 13){           return false;         }}

                            Day12 FAQ collapse

                            演示地址

                            跟 day 1 一样，使用了 active 的思路，并且在js层面用 dom 查找父元素进行样式操作

                                
                            Frequently Asked Questions
                                              
                                      Why shouldn't we trust atoms?        
                                    
                                      They make up everything        
                                                                                

                            重点1：classList.toggle(‘active’)

                            toggle 函数的能力：本例中，如果元素有 active 属性，那么就删除 ative。如果没有则追加。做到了一种类似开关的效果。

                            const toggles = document.querySelectorAll('.faq-toggle')toggles.forEach(toggle => {    toggle.addEventListener('click', () => {        toggle.parentNode.classList.toggle('active')    })})

                            重点2：css 伪类选择器

                            类选择器被激活后，包裹住p，用了一个css中的伪类的技巧。

                            .faq.active::before,.faq.active::after {  content: '\f075';  font-family: 'Font Awesome 5 Free';  color: #2ecc71;  font-size: 7rem;  position: absolute;  opacity: 0.2;  top: 20px;  left: 20px;  z-index: 0;}

                            重点3：css 的覆盖

                            这个图是拿css来画出来的，可以观察代码实现，利用了css覆盖的知识

                            .faq.active::before,.faq.active::after {  content: '\f075';  font-family: 'Font Awesome 5 Free';  color: #2ecc71;  font-size: 7rem;  position: absolute;  opacity: 0.2;  top: 20px;  left: 20px;  z-index: 0;}// 覆盖样式，形成蓝色的图形.faq.active::before {  color: #3498db;  top: -10px;  left: -30px;  transform: rotateY(180deg);}

                            Day46 Quiz App

                            演示地址

                            重点 label 标签的 for 属性

                            • html

                                                 
                              Question text
                                      
                                                                   Question          
                                                 
                                    Submit          

                              • label for

                                当点击label标签内的文本后，就会触发绑定的表单元素。

                                上面的场景是点击问题的文字，input元素就会被激活