DEV Community: 打coding的奥特曼

Implement Dark Mode in Tailwind React Application

打coding的奥特曼 — Mon, 04 Jul 2022 12:42:40 +0000

1.active dark mode in tailwind.config.js

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  darkMode: 'class',
  theme: {
    extend: {
    },
  },
  plugins: [],
}

2. set dark mode in App.js , and pass {dark,setDark} to ,in which we set the toggle method in

function App() {
  const [dark,setDark]=useState(false);
  return (
    <div className={dark?"dark":''}>
      <Nav props={{dark,setDark}}/>
      <Routes>
        <Route path="/" element={<Home />}/>
      </Routes>
    </div>
  );
}
export default App;

3.set the toggle in the component

Nav.jsx,sun and moon are the icon you choose for it

function Nav({props}) {
  const {dark,setDark} = props
  const handleClick = ()=>{
    setDark(!dark)
  }
  return (
  <>
   <img src={dark?sun:moon} alt="toggle" className="w-5 h-5 
    absolute cursor-pointer" onClick={handleClick}/>
  </>
export default Nav;

4. add dark mode to the components ,such as About.js

function About(props) {
  console.log(skills)
  return (
    <div id='about' className=' dark:bg-gray-700 dark:text-white'>

    </div>
  );
}

export default About;

一行代码把句子里的每个单词首字母大写

打coding的奥特曼 — Sat, 04 Jun 2022 11:41:17 +0000

str = 'hello world, today is saturday'
str.split(' ').map( i =>  i[0].toUpperCase()+i.slice(1)   
    ).join(' ')

react在非受控下读取form表单

打coding的奥特曼 — Mon, 22 Nov 2021 06:32:23 +0000


const Form = ()=>{
 const handleSubmit = (e)=>{
    e.preventDefault();
    const formData = new FormData(e.target)
    const data = Object.fromEntries(formData.entries())
    console.log(data )
}

return (
 <form  onSubmit={handleSubmit} >
    <input type="text" name='username'  placeholder='username'/>
    <input type="email" name='email' placeholder='email'/>
    <input type="password" name='password' placeholder='password'  />
    <input type="password"  placeholder='confirm password' />    
     <button>submit</button>
  </form>
)
}
export default Form

react 5分钟写一个乐透开奖

打coding的奥特曼 — Thu, 28 Oct 2021 13:08:33 +0000

先放个效果图


import { useState } from 'react';
const Lottery = () => {
  const [pool,setPool]=useState([]) // 设置奖池初始值
  // 生成一个随机数字
  const randomNumber = (min, max) =>{
    const range = max - min + 1;
    const rand = Math.random() ;
    const num = Math.floor(rand * range + min);
    return num;
  }
  // 奖池生成器 
  const generator = (n，min，max)=>{
    const arr = [];
    while(arr.length<n){
      const num = randomNumber(min,max)
      if (arr.indexOf(num)===-1){
        arr.push(num)
      }
    }
    return arr;
  }

  return (
    <div>
      <button onClick={()=>setPool(generator(6，1,45))}>一键开奖</button>
      <button onClick={()=>setPool([])}>清空奖池</button>

      <div className="lottery">
        <ul>
          {pool.map((num,i)=>(<li key={i}><div>{num}</div></li>))}
        </ul>
      </div>
    </div>
  );
};

export default Lottery;

补充一个对象数组去重

打coding的奥特曼 — Thu, 09 Sep 2021 04:27:17 +0000

const _ = require('lodash') ;
const arr = [{a:1},{b:1},{c:1},{c:1},{e:1},{a:1}];
const res = _.uniqWith(arr,_.isEqual);
console.log(res);//[ { a: 1 }, { b: 1 }, { c: 1 }, { e: 1 } ]

规范姓名格式

打coding的奥特曼 — Wed, 08 Sep 2021 14:23:30 +0000

请把用户输入的不规范的英文名字，变为首字母大写，其他小写的规范名字。输入：['adam', 'LISA', 'barT']，输出：['Adam', 'Lisa', 'Bart']。

const list = ['adam', 'LISA', 'barT'];
const normalizeStr = str=>str.slice(0,1).toUpperCase()+str.slice(1).toLowerCase();
const normalize = list=>list.map(x => normalizeStr(x));
console.log(normalize(list));

不使用JavaScript内置的parseInt()函数，利用map和reduce操作实现一个string2int()函数

打coding的奥特曼 — Tue, 07 Sep 2021 01:10:14 +0000

const str2int = s=>[].slice.apply(s).map(x=>+x).reduce((x,y)=>x*10+y);

1.利用[].slice.apply(s)将s 拆成字符串数组
2.利用+将string转换成number，用map遍历，map(x=>+x)，
3.利用reduce把数组转化成一个数字
打印结果如下：

补充，使用Array.from 可以节省掉map

const str2int = s=>Array.from(s,x=>+x).reduce((x,y)=>x*10+y)
console.log(str2int('12345'));  //12345
console.log(typeof str2int('12345')); //number

去重

打coding的奥特曼 — Mon, 06 Sep 2021 07:39:12 +0000

方法 1

const arr = [1,1,2,3,4,4,5]
const uniqueArr = [...new Set(arr)];
console.log(uniqueArr); //[ 1, 2, 3, 4, 5 ]

方法2

import _ from 'lodash';
const arr = [1,1,2,3,4,4,5]；
const uniqueArr = _.uniq(arr);
console.log(uniqueArr); //[ 1, 2, 3, 4, 5 ]

求和

打coding的奥特曼 — Mon, 06 Sep 2021 07:21:20 +0000

//将传入的参数转为数组
const turnArray = (...rest)=> [].slice.apply(rest);
//利用reduce对数组求和
const add = arr => arr.reduce((pre,cur)=>pre+cur);
console.log(add(turnArray(1,2,3,4,5,6)));

如何解决箭头函数没有arguments

打coding的奥特曼 — Mon, 06 Sep 2021 01:26:25 +0000

比如我们想要一个function，可以把传入的参数转成一个数组，传统方法代码如下

function turnArr(){
  return [].slice.apply(arguments)
}
console.log(turnArr(1,2,3))  // [1,2,3]

但如果我们用箭头函数的形式改写的话，发现就报错了，

加个参数进去试试，还是报错

为啥不行？原因是箭头函数没有arguments这个类参数数组对象，那么如何解决呢？用剩余参数

const turnArr = (...arguments) => [].slice.apply(arguments)
console.log(turnArr(1,2,3)) //[1,2,3]

成功解决了，但是再用这样的写法就啰嗦

const turnArr1 = (...args) => args;
console.log(turnArr1(1,2,3)); //[1,2,3]

因为arguments是伪数组，而剩余参数确是货真价实的真数组.

path.resolve

打coding的奥特曼 — Sun, 05 Sep 2021 04:34:46 +0000

path.resolve 用法

express.static使用中的一些测试

打coding的奥特曼 — Sun, 05 Sep 2021 04:27:24 +0000

写一个基本的server.js

根目录下PUBLIC目录作为静态目录，直接写目录名即可，网页显示如下

测试一

将PUBLIC目录内容复制一份，扔进levelOne子目录，下面我们需要将levelOne作为静态目录.

我们发现如果直接写levelOne目录名，样式丢失了

正确的做法是写明levelOne的相对路径了，只写目录名是找不到的

测试2

我们给静态文件加一个虚拟的文件前缀（文件系统中不存在）

如果我们继续访问默认路径localhost:3000,发现样式丢失

正确做法是访问localhost:3000/static路径

看，样式回来了
所以我建议我们应该顺手把访问路由的路径也加上static，最后代码如下：