Create a Coffee Name Generator

栏目: IT技术 · 发布时间: 4年前

内容简介:On a whim, I decided to create a random Coffee Name generator. Althought there isn't a lot of code, I thought there were a few features (You can browse and experiment with the code in the following

Create a Coffee Name Generator

On a whim, I decided to create a random Coffee Name generator. Althought there isn't a lot of code, I thought there were a few features ( Web Animations API and Intl.ListFormat().format ) that I thought were interesting and wanted to share.

Code Sandbox

You can browse and experiment with the code in the following CodeSandbox embed.

JavaScript Generator

Let's first start with the JavaScript generator that builds the coffee names. I'll break it apart below and identify two parts that I found interesting.

Setup

The only external dependency I used was lodash for the sample and random functions. I could have written them from scratch, but they are pretty handy tools to grab when you need them. Data-wise, I have lists of coffee sizes, types, add-ins, toppings, and flavors that are used to build the coffee name. You can customize these arrays to include your favorite items.

import { sample, random } from 'lodash';

const sizes = ['Short', 'Tall', 'Grande', 'Venti'];
const coffeeTypes = [
  'Cappuccino',
  'Espresso',
  'Caffè Latte',
  'Caffè Mocha',
];
const addIns = ['1% Milk', '2% Milk', 'Almondmilk', 'Cream'];
const toppings = [
  'Caramel Drizzel',
  'Chocolate Powder',
  'Vanilla Powder',
  'Whipped Cream',
];
const flavors = [
  'Caramel Syrup',
  'Hazelnut Syrup',
  'Vanilla Syrup',
  'Mocah Sauce',
];

Generate Add-ons

The generateAddons function is split into two main sections:

  1. Building a random array of add-ons
  2. Converting an array into words
export const generateAddons = () => {
  const additions = [    random(0, 1) && sample(addIns),    random(0, 1) && sample(toppings),    random(0, 1) && sample(flavors),  ].filter(Boolean);
  return `${    additions.length ? 'with' : ''  } ${new Intl.ListFormat().format(additions)}`;};

1. Random Add-ons

The first part of generateAddons randomly builds the set of add-ons for the drink. There may be one add-on, two, or all three. Each entry uses the random function and if it's truthy then it picks an item from that array, otherwise it's value will be undefined . The filter at the end will only keep those items that are truthy, which removes any entry that had an undefined value.

2. Array to Words

The second part of the generateAddons function converts the array (of 0 to 3 items) into an English string (example: ["apple", "pear", "orange"] to "apple, pear, and orange" ). When I first started making this function I wrote my own algorithm, but then started to see if I could pull in an external node module. To my surprise, I found that there's a native Intl.ListFormat().format browser API.

NOTE: Unfortunatley the support for Intl: ListFormat: format isn't the greatest at the moment. Thankfully though, there is a polyfill if you really want to use it in currently unsupported browsers ( @formatjs/intl-listformat ).

Create a Coffee Name Generator

React Code

The following code is for the App React component that displays the generated coffee name and will animate the inner coffee liquid when the name changes.

export default function App() {
  const [name, setName] = useState(generateCoffee());
  const coffeeRef = useRef(null);
  useEffect(() => {
    coffeeRef.current.animate(      [        {          top: '15rem',          transform: 'translateX(-50%) rotate(0deg)',        },        {          top: '-5rem',          transform: 'translateX(-50%) rotate(360deg)',        },      ],      {        duration: 3000,        fill: 'forwards',      },    );  }, [name]);

  return (
    <div className="App">
      <Title>Coffee Name Generator</Title>
      <Coffee ref={coffeeRef} />      <Generate onClick={() => setName(generateCoffee())}>
        Generate
      </Generate>
      <CoffeeName>{name}</CoffeeName>
    </div>
  );
}

The parts I'd like to highlight are the coffeeRef (created and assigned to the Coffee component) and the animate method called inside the React.useEffect . Each time the coffee name is generated the useEffect will get invoked. Since we are dealing with a ref , we need to access the current property to get at the underlying DOM element. From there, we can call the animate method passing the states we'd like to animate and additional metadata.

Thankfully the browser support for Web Animations API is better than what we saw above with Intl: ListFormat: format .

Create a Coffee Name Generator

Conclusion

I enjoyed putting this demo together and I hope you either learned something or found the experience enjoyable :grinning: Have a great day and wonderful rest of the week!


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

游戏编程权威指南

游戏编程权威指南

Mike McShaffry 麦克沙福瑞、David “Rez” Graham 格雷海姆 / 师蓉、李静、李青翠 / 人民邮电 / 2016-3 / 99.00元

全书分为4个部分共24章。首部分是游戏编程基础,主要介绍了游戏编程的定义、游戏架构等基础知识。 第二部分是让游戏跑起来,主要介绍了初始化和关闭代码、主循环、游戏主题和用户界面等。 第三部分是核心游戏技术,主要介绍了一些*为复杂的代码 示例,如3D编程、游戏音频、物理和AI编程等。 第四部分是综合应用,主要介绍了网络编程、多道程序设计和用C#创建工具等,并利用前面所讲的 知识开发出......一起来看看 《游戏编程权威指南》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具