Create a Coffee Name Generator

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

内容简介: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!


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

查看所有标签

猜你喜欢:

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

Web Design Index by Content 3 (Web Design Index)

Web Design Index by Content 3 (Web Design Index)

Pepin Press (EDT) / Pepin Press / 2007-11 / USD 29.99

Would you like an overview of the state of the art in web design in a specific field? WEB DESIGN INDEX BY CONTENT provides exactly that: every year, 500 new designs are selected and grouped in more th......一起来看看 《Web Design Index by Content 3 (Web Design Index)》 这本书的介绍吧!

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

在线压缩/解压 CSS 代码

随机密码生成器
随机密码生成器

多种字符组合密码

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具