【前端】夯实基础 css/html/js 50个练手项目（一连更新） ...

愛在花開的季節  金牌会员 | 2024-6-8 23:28:47 | 来自手机 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 887|帖子 887|积分 2661

前言

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


  • 项目地点：https://github.com/bradtraversy/50projects50days
Day 1 expanding-cards

效果预览

核心代码：
  1. <body>
  2.     <div class="container">
  3.       <!--active 标识被点击的图片 -->
  4.       <div class="panel active" >
  5.       </div>
  6.       <div class="panel" >
  7.       </div>
  8.       <div class="panel" >
  9.       </div>
  10.       <div class="panel" >
  11.       </div>
  12.       <div class="panel" >
  13.       </div>
  14.     </div>
  16.     <script src="script.js"></script>
  17.   </body>
复制代码
  1. // 为所有的 panel 注册点击事件
  2. panels.forEach(panel => {
  3.     panel.addEventListener('click', () => {
  4.             // 清空所有 active 样式
  5.         removeActiveClasses()
  6.         // 激活被点击 panel 的 active样式
  7.         panel.classList.add('active')
  8.     })
  9. })
  11. function removeActiveClasses() {
  12.     panels.forEach(panel => {
  13.         panel.classList.remove('active')
  14.     })
  15. }
复制代码
知识点总结：


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

效果预览

核心代码：
  1. function update() {
  2.     // Day1 中的处理方式
  3.     circles.forEach((circle, idx) => {
  4.         if(idx < currentActive) {
  5.             circle.classList.add('active')
  6.         } else {
  7.             circle.classList.remove('active')
  8.         }
  9.     })
  10.     // 按钮的禁用控制
  11.     if(currentActive === 1) {
  12.         prev.disabled = true
  13.     } else if(currentActive === circles.length) {
  14.         next.disabled = true
  15.     } else {
  16.         prev.disabled = false
  17.         next.disabled = false
  18.     }
  19. }
复制代码
知识点总结：


  • Day1 中的样式控制
  • 通用的前进退却按钮禁用逻辑

    • 当前节点为第一个节点：退却按钮禁用
    • 当前节点为最后一个节点：前进按钮禁用
    • 其他情况，都不禁用

Day 7 Split Landing Page

效果预览

核心代码：
  1. const left = document.querySelector('.left')
  2. const right = document.querySelector('.right')
  3. const container = document.querySelector('.container')
  5. left.addEventListener('mouseenter', () => container.classList.add('hover-left'))
  6. left.addEventListener('mouseleave', () => container.classList.remove('hover-left'))
  8. right.addEventListener('mouseenter', () => container.classList.add('hover-right'))
  9. right.addEventListener('mouseleave', () => container.classList.remove('hover-right'))
复制代码
知识点总结：


  • 两种样式的互斥交互，成对编写 classList.add/remove
  • mouseenter 是鼠标移入变乱，mouseleave 是鼠标移出变乱
Day9 Sound Board

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

核心代码：
  1.     <audio id="applause" src="sounds/applause.mp3"></audio>
  2.     <audio id="boo" src="sounds/boo.mp3"></audio>
  3.     <audio id="gasp" src="sounds/gasp.mp3"></audio>
  4.     <audio id="tada" src="sounds/tada.mp3"></audio>
  5.     <audio id="victory" src="sounds/victory.mp3"></audio>
  6.     <audio id="wrong" src="sounds/wrong.mp3"></audio>
  7.        
  8.         <!-- 作为容器给js添加按钮 -->
  9.     <div id="buttons"></div>
  11.     <script src="script.js"></script>
复制代码
  1. const sounds = ['applause', 'boo', 'gasp', 'tada', 'victory', 'wrong']
  3. sounds.forEach(sound => {
  4.     const btn = document.createElement('button')
  5.     btn.classList.add('btn')
  7.     btn.innerText = sound
  8.         // 注册事件 点击按钮就停止所有音效后，播放当前选中的音乐
  9.     btn.addEventListener('click', () => {
  10.         stopSongs()
  12.         document.getElementById(sound).play()
  13.     })
  14.         // 加进h5渲染页面
  15.     document.getElementById('buttons').appendChild(btn)
  16. })
  18. function stopSongs() {
  19.     sounds.forEach(sound => {
  20.         const song = document.getElementById(sound)
  22.         song.pause()
  23.         song.currentTime = 0;
  24.     })
  25. }
复制代码
知识点总结：


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

效果预览

核心代码：
  1. jokeBtn.addEventListener('click', generateJoke)
  3. generateJoke()
  5. async function generateJoke() {
  6.   const config = {
  7.     headers: {
  8.       Accept: 'application/json',
  9.     },
  10.   }
  12.   const res = await fetch('https://icanhazdadjoke.com', config)
  14.   const data = await res.json()
  16.   jokeEl.innerHTML = data.joke
  17. }
复制代码


  • 第二种generateJoke的写法
  1. function generateJoke() {
  2.    const config = {
  3.      headers: {
  4.        Accept: 'application/json',
  5.      },
  6.    }
  8.    fetch('https://icanhazdadjoke.com', config)
  9.      .then((res) => res.json())
  10.      .then((data) => {
  11.        jokeEl.innerHTML = data.joke
  12.      })
  13. }
复制代码
知识点总结：


  • 利用js发起异步http请求的两种方式

    • async await fetch
    • Promise形式的链式调用 fetch then

Day11 Event Keycodes




  • keyCode 是一个属性，这个项目可以当个字典用。原文演示地点
  1. const insert = document.getElementById('insert')
  3. window.addEventListener('keydown', (event) => {
  4.   insert.innerHTML = `
  5.   <div class="key">
  6.   ${event.key === ' ' ? 'Space' : event.key}
  7.   <small>event.key</small>
  8. </div>
  10. <div class="key">
  11.   ${event.keyCode}
  12.   <small>event.keyCode</small>
  13. </div>
  15. <div class="key">
  16.   ${event.code}
  17.   <small>event.code</small>
  18. </div>
  19.   `
  20. })
复制代码
其中一个应用场景是禁止回车提交表单。
  1. <form method="post">
  2. <input type="text"  name="username" id="username" onKeyPress="return EnterStop(event);"/>
  3.     <input type="button" value="提交" id="submint"/>
  4. </form>
复制代码
  1. function EnterStop(e){
  2.          if(e.keyCode == 13){
  3.            return false;
  4.          }
  5. }
复制代码
Day12 FAQ collapse

演示地点

跟 day 1 一样，利用了 active 的思绪，并且在js层面用 dom 查找父元素举行样式操作
  1. <body>
  2.     <h1>Frequently Asked Questions</h1>
  3.     <div class="faq-container">
  4.       <div class="faq active">
  5.         <h3 class="faq-title">
  6.           Why shouldn't we trust atoms?
  7.         </h3>
  9.         <p class="faq-text">
  10.           They make up everything
  11.         </p>
  13.         <button class="faq-toggle">
  14.           <i class="fas fa-chevron-down"></i>
  15.           <i class="fas fa-times"></i>
  16.         </button>
  17.       </div>
  18.     </div>
  19.     <script src="script.js"></script>
  20.   </body>
复制代码
重点1：classList.toggle(‘active’)

toggle 函数的能力：本例中，如果元素有 active 属性，那么就删除 ative。如果没有则追加。做到了一种类似开关的效果。
  1. const toggles = document.querySelectorAll('.faq-toggle')
  3. toggles.forEach(toggle => {
  4.     toggle.addEventListener('click', () => {
  5.         toggle.parentNode.classList.toggle('active')
  6.     })
  7. })
复制代码
重点2：css 伪类选择器

类选择器被激活后，包裹住div，用了一个css中的伪类的本领。

  1. .faq.active::before,
  2. .faq.active::after {
  3.   content: '\f075';
  4.   font-family: 'Font Awesome 5 Free';
  5.   color: #2ecc71;
  6.   font-size: 7rem;
  7.   position: absolute;
  8.   opacity: 0.2;
  9.   top: 20px;
  10.   left: 20px;
  11.   z-index: 0;
  12. }
复制代码
重点3：css 的覆盖

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

  1. .faq.active::before,
  2. .faq.active::after {
  3.   content: '\f075';
  4.   font-family: 'Font Awesome 5 Free';
  5.   color: #2ecc71;
  6.   font-size: 7rem;
  7.   position: absolute;
  8.   opacity: 0.2;
  9.   top: 20px;
  10.   left: 20px;
  11.   z-index: 0;
  12. }
  13. // 覆盖样式，形成蓝色的图形.faq.active::before {  color: #3498db;  top: -10px;  left: -30px;  transform: rotateY(180deg);}
复制代码
Day46 Quiz App

演示地点
重点 label 标签的 for 属性



  • html
  1. <body>
  2.     <div class="quiz-container" id="quiz">
  3.       <div class="quiz-header">
  4.         <h2 id="question">Question text</h2>
  5.         <ul>
  6.           <li>
  7.             <input type="radio" name="answer" id="a" class="answer">
  8.              <!-- label 标签的文字与input绑定  -->
  9.             <label for="a" id="a_text">Question</label>
  10.           </li>
  11.           <!-- 忽略剩下3个选项 -->
  12.          </ul>
  13.       </div>
  14.       <button id="submit">Submit</button>
  15.     </div>
  16.     <script src="script.js"></script>
  17.   </body>
复制代码


  • label for
    当点击label标签内的文本后，就会触发绑定的表单元素。
    上面的场景是点击问题的文字，input元素就会被激活


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

愛在花開的季節

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

存储 挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表