123

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <!-- graphics used in the project -->
<svg style="display: none;" viewBox="0 0 100 100" width="50" height="50">
    <!-- icons for the navigation bar -->
    <symbol id="signal" viewBox="0 0 100 100">
        <g transform="translate(2.5 0)">
            <rect
                x="0"
                y="80"
                width="20"
                height="20"
                fill="currentColor">
            </rect>
            <g transform="translate(25 0)">
                <rect
                    x="0"
                    y="60"
                    width="20"
                    height="40"
                    fill="currentColor">
                </rect>
            </g>
            <g transform="translate(50 0)">
                <rect
                    x="0"
                    y="40"
                    width="20"
                    height="60"
                    fill="currentColor">
                </rect>
            </g>
            <g transform="translate(75 0)">
                <rect
                    x="0"
                    y="20"
                    width="20"
                    height="80"
                    fill="currentColor">
                </rect>
                <rect
                    x="0"
                    y="20"
                    width="20"
                    height="80"
                    fill="currentColor">
                </rect>
            </g>
        </g>
    </symbol>

    <symbol id="wifi" viewBox="0 0 100 100">
        <circle
            cx="50"
            cy="90"
            r="10"
            fill="currentColor">
        </circle>

        <g
            stroke="currentColor"
            stroke-width="20"
            fill="none">
            <path
                d="M 25 70 a 35 35 0 0 1 50 0">
            </path>

            <path
                d="M 10 45 a 65 65 0 0 1 80 0">
            </path>
        </g>
    </symbol>

    <symbol id="battery" viewBox="0 0 100 100">
        <rect
            x="5"
            y="35"
            width="80"
            height="50"
            fill="currentColor">
        </rect>
        <rect
            x="85"
            y="45"
            width="15"
            height="30"
            fill="currentColor">
        </rect>
    </symbol>

    <!-- icon for the order button -->
    <symbol id="arrow" viewBox="0 0 100 100">
        <path
            d="M 20 50 h 65 l -25 -25 l 25 25 l -25 25"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="10"
            stroke="currentColor"
            fill="none">
        </path>
    </symbol>

    <!-- icon of fruits -->
    <symbol id="pineapple" viewBox="0 0 100 100">
        <g transform="translate(0,12.5)" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3">
            <path d="m50 21q20 0 20 20 0 25-15 25h-10q-15 0-15-25 0-20 20-20" stroke-dasharray="55 8 80"/>
            <g stroke-width="2.5">
                <path d="m36 33 2-2 2 2"/>
                <path d="m60 33 2-2 2 2"/>
                <path d="m30 46 4-4 4 4" stroke-dasharray="8, 3, 5"/>
                <path d="m62 46 4-4 4 4"/>
                <path d="m33 57 2.5-2.5 2.5 2.5"/>
                <path d="m62 57 2.5-2.5 2.5 2.5"/>
                <path d="m43 41 7-7 7 7"/>
                <path d="m43 56 7-7 7 7"/>
            </g>
            <g fill="#ffffff">
                <path d="m43 16 7-7 7 7"/>
                <path d="m43 21-2-11 9 9 9-9-2 11"/>
                <path d="m40 21-7-7 17 7 17-7-7 7"/>
            </g>
        </g>
    </symbol>

    <symbol id="peach" viewBox="0 0 100 100">
        <g transform="translate(-7.0352 18.875)" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3">
            <g stroke-width="2.5">
                <path d="m47 16v-8a3 3 0 0 1 6 0v8"/>
                <path d="m53 14q2-10 16-7-4 14-16 7l8-3"/>
            </g>
            <path d="m50 16a20 20 0 0 0-20 20 18 18 0 0 0 18 18q2.5 0 5 3 2.5-3 5-3a18 18 0 0 0 18-18 20 20 0 0 0-20-20 20 20 0 0 0-10 20" stroke-dasharray="70, 45, 80"/>
            <g transform="rotate(30 -43.373 151.62)">
                <path d="m0-18c-20 8-16 32 0 32s20-24 0-32"/>
            </g>
            <g transform="rotate(30 -43.373 151.62)">
                <path d="m0-8c-8 4-8 12 0 16 8-4 8-12 0-16"/>
            </g>
        </g>
    </symbol>

    <symbol id="raspberry" version="1.1" viewBox="0 0 100 100">
        <g transform="translate(50 50)" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
            <g transform="translate(.10082 .49998)">
            <g>
                <path d="m-2 0q-5-25 18-18 3 25-18 18"/>
                <path d="m-2 0 15-15" stroke-dasharray="12, 4, 1, 10"/>
            </g>
            <g>
                <path d="m-15-10q-5-10 5-15 4 8 7 10 10 8 0 10" fill="#ffffff" stroke-dasharray="25, 5, 20"/>
                <path d="m-5-9q-2-4-4-5"/>
            </g>
            <g transform="matrix(.020627 -.99979 -.99979 -.020627 -.99002 -2.0879)">
                <path d="m-15-10q-5-10 5-15 4 8 7 10 10 8 0 10" fill="#ffffff" stroke-dasharray="25, 5, 20"/>
                <path d="m-5-9q-2-4-4-5"/>
            </g>
                <g fill="#ffffff">
                    <circle cx="-20" cy="20" r="4"/>
                    <circle cx="-19" cy="14" r="4.1"/>
                    <circle cx="-14" cy="18" r="4.1"/>
                    <circle cx="-18" cy="9" r="4.2"/>
                    <circle cx="-9" cy="17" r="4.2"/>
                    <circle cx="-14" cy="13" r="4.2"/>
                    <circle cx="-17" cy="4" r="4.3"/>
                    <circle cx="-4" cy="16" r="4.3"/>
                    <circle cx="-9" cy="8" r="4.3"/>
                    <circle cx="-16" cy="-1" r="4.4"/>
                    <circle cx="1" cy="15" r="4.4"/>
                    <circle cx="-5" cy="3" r="4.4"/>
                    <circle cx="-11" cy="1" r="4.4"/>
                    <circle cx="-1" cy="9" r="4.4"/>
                    <circle cx="-14" cy="-9" r="4.5"/>
                    <circle cx="-8" cy="-6" r="4.5"/>
                    <circle cx="3" cy="5" r="4.5"/>
                    <circle cx="8" cy="12" r="4.5"/>
                    <circle cx="-1" cy="-1" r="4.5"/>
                </g>
            </g>
        </g>
    </symbol>

    <!-- icons for the buttons, framing the fruit icons with accompanying text and a circle as a background -->
    <symbol id="pineapple-button" viewBox="0 0 100 100">
        <circle
            cx="50"
            cy="50"
            r="50"
            fill="#ffffff">
        </circle>
        <use href="#pineapple" transform="translate(0 -10)"></use>
        <text
            text-anchor="middle"
            font-size="0.7rem"
            font-weight="bold"
            x="50"
            y="80">
            Pineapple
        </text>
    </symbol>

    <symbol id="peach-button" viewBox="0 0 100 100">
        <circle
            cx="50"
            cy="50"
            r="50"
            fill="#ffffff">
        </circle>
        <use href="#peach" transform="translate(0 -10)"></use>
        <text
            text-anchor="middle"
            font-size="0.7rem"
            font-weight="bold"
            x="50"
            y="80">
            Peach
        </text>
    </symbol>

    <symbol id="raspberry-button" viewBox="0 0 100 100">
        <circle
            cx="50"
            cy="50"
            r="50"
            fill="#ffffff">
        </circle>
        <use href="#raspberry" transform="translate(0 -10)"></use>
        <text
            text-anchor="middle"
            font-size="0.7rem"
            font-weight="bold"
            x="50"
            y="80">
            Raspberry
        </text>
    </symbol>
</svg>


<!-- html structure
div, wrapping container
    nav, svg icons
    header, state of the application
    svg, graphic visualizing the drink in a mixer
    div, scrollable list of ingredients
    div, list of selected ingredients and button to proceed to mixing the drink
-->

<div class="phone">
    <!-- in the nav show the current time before the three icons created earlier in the svg block -->
    <nav class="phone__nav">
        <span>9:42</span>
        <svg viewBox="0 0 100 100" width="20" height="20">
            <use href="#signal"></use>
        </svg>
        <svg viewBox="0 0 100 100" width="20" height="20">
            <use href="#wifi"></use>
        </svg>
        <svg viewBox="0 0 100 100" width="20" height="20">
            <use href="#battery"></use>
        </svg>
    </nav>

    <!-- highlight the number of ingredients left in a strong element -->
    <header class="phone__state">
        <h2>Hello there</h2>
        <p>You can choose<br/>
            <strong>
                2 more
            </strong>
            ingredients.
        </p>
    </header>

    <!-- within a mixer, draw the milk and fruit section through rectangle elements -->
    <svg class="phone__drink" viewBox="0 0 100 180" width="300" height="440">
        <defs>
            <!-- linear gradient applied on the straw, to create a light source in the top left corner -->
            <linearGradient
                id="gradient-light"
                gradientUnits="userSpaceOnUse"
                x1="50"
                x2="100"
                y1="-50"
                y2="20">
                <stop stop-color="#ffffff" offset="0"></stop>
                <stop stop-color="#ff4966" offset="1"></stop>
            </linearGradient>

            <!-- clip matching the body of the drink, to crop the rectangles describing the liquid within the drink and the rectangles fabricating the shades through semi transparent elements -->
            <clipPath
                id="clip-body">
                <path
                    d="M 12.5 70 l 10 100 a 150 150 0 0 0 55 0 l 10 -100 v 5 a 160 160 0 0 1 -80 0">
                </path>
            </clipPath>

            <!-- clip above the drink's lid, to crop the lid where the straw pops out -->
            <clipPath
                id="clip-lid">
                <path
                    d="M 0 10 h 47 v 30 a 6 6 0 0 0 6 0 v -30 h 47 v 80 h -100">
                </path>
            </clipPath>

            <!-- mask for the drink's rim, to show the rim's back minus the straw -->
            <mask
                id="mask-rim">
                <rect
                    x="0"
                    y="0"
                    width="100"
                    height="100"
                    fill="#fff">
                </rect>
                <path
                    fill="#000"
                    d="M 47 140 a 4 4 0 0 0 6 0 v -125 q 0 -4 5 -5 l 20 -3 l -0.5 -7 l -26 3.9 q -5 1 -5 5">
                </path>
            </mask>
        </defs>
        <g>
            <!-- straw -->
            <g>
                <path
                    fill="#ff4966"
                    d="M 47 140 a 4 4 0 0 0 6 0 v -125 q 0 -4 5 -5 l 20 -3 l -0.5 -7 l -26 3.9 q -5 1 -5 5">
                </path>

                <path
                    fill="url(#gradient-light)"
                    d="M 47 140 a 4 4 0 0 0 6 0 v -125 q 0 -4 5 -5 l 20 -3 l -0.5 -7 l -26 3.9 q -5 1 -5 5">
                </path>
            </g>

            <!-- cup -->
            <g>
                <!-- lid
                    clip the lid where the straw ought to pop out
                    include a small line to remark where the straw pops out
                    include a reflection through an ellipse in the top left section of the lid
                -->
                <g>
                    <path
                        clip-path="url(#clip-lid)"
                        opacity="0.7"
                        fill="#F1F7F3"
                        d="M 8 70 a 42 40 0 0 1 84 0 a 90 90 0 0 1 -84 0">
                    </path>
                    <path
                        opacity="0.5"
                        stroke="none"
                        fill="#F1F7F3"
                        d="M 47 40 a 6 6 0 0 0 6 0 v 1 a 6 6 0 0 1 -6 0">
                    </path>

                    <g transform="translate(30 50) rotate(30)">
                        <ellipse
                            opacity="0.7"
                            fill="#ffffff"
                            cx="0"
                            cy="0"
                            rx="6"
                            ry="12">
                        </ellipse>
                    </g>
                </g>

                <!-- body -->
                <path
                fill="none"
                    stroke="#F7F7F7"
                    stroke-width="5"
                    stroke-linejoin="round"
                    stroke-linecap="round"
                    d="M 10 70 l 10 100 a 150 150 0 0 0 60 0 l 10 -100 a 120 120 0 0 1 -80 0">
                </path>


                <!-- clip the group describing the rectangles for the milk and fruit section, to show only the element within the mixer's body -->
                <!-- liquid -->
                <g
                    clip-path="url(#clip-body)">
                    <!--
                        ! include rectangle elements in this group
                        given the negative scale, increasing y values push the rectangles upwards
                    -->
                    <g class="drink" transform="translate(0 180) scale(1 -1)">
                        <rect
                            x="0"
                            y="0"
                            width="100"
                            height="50"
                            fill="rgb(239, 224, 153)">
                        </rect>
                    </g>
                </g>

                <!-- above the liquid include the body with a semi transparent fill to match the lid's color -->
                <path
                    opacity="0.3"
                    fill="#F7F7F7"
                    d="M 10 70 l 10 100 a 150 150 0 0 0 60 0 l 10 -100 a 120 120 0 0 1 -80 0">
                </path>

                <!-- shades
                overlap semi transparent rectangles to give a different shade to the underlying assets
                -->
                <g
                    clip-path="url(#clip-body)">
                    <rect
                        x="0"
                        y="0"
                        width="100"
                        height="200"
                        fill="#fff"
                        opacity="0.2">
                    </rect>
                    <rect
                        x="0"
                        y="0"
                        width="62"
                        height="200"
                        fill="#fff"
                        opacity="0.3">
                    </rect>
                    <rect
                        x="0"
                        y="0"
                        width="38"
                        height="200"
                        fill="#fff"
                        opacity="0.4">
                    </rect>
                </g>

                <!-- rim
                overlap multiple paths to create a 3d effect
                use a fill instead of a stroke to rapidly overlap elements by modifying few command values -->
                <g>
                    <g mask="url(#mask-rim)">
                        <path
                            fill="#F7F7F7"
                            d="M 4 70 a 180 180 0 0 1 92 0 v 5 a 180 180 0 0 0 -92 0">
                        </path>
                        <path
                            fill="#000"
                            opacity="0.03"
                            d="M 4 72 a 180 180 0 0 1 92 0 v 3 a 180 180 0 0 0 -92 0">
                        </path>
                    </g>

                    <path
                        fill="#F7F7F7"
                        d="M 4 70 a 200 200 0 0 0 92 0 v 5 a 200 200 0 0 1 -92 0">
                    </path>
                    <path
                        fill="#000"
                        opacity="0.03"
                        d="M 4 72 a 200 200 0 0 0 92 0 v 3 a 200 200 0 0 1 -92 0">
                    </path>
                </g>
            </g>
        </g>
    </svg>


    <!-- describe the ingredients in a div, each with an svg icon and a button to add/remove the ingredients -->
    <div class="phone__ingredients">
        <!-- ! include the button elements through the script -->
        <!-- <button>
            <svg style="color: #fbe054;" width="20" height="20">
                <use href="#pineapple-button"></use>
            </svg>
            <span>Add +</span>
        </button>
        <button>
            <svg style="color: #fdb07d;" width="20" height="20">
                <use href="#peach-button"></use>
            </svg>
            <span>Add +</span>
        </button>
        <button>
            <svg style="color: #ff6060;" width="20" height="20">
                <use href="#raspberry-button"></use>
            </svg>
            <span>Add +</span>
        </button> -->
    </div>

    <!-- list the selected ingredients in an unordered list and highlight the button to proceed mixing the drink -->
    <div class="phone__order">
        <div class="order--list">
            <h3>Your choice:</h3>
            <ul>
                <li>1x Big Soya Smoothie</li>
                <li></li>
            </ul>
        </div>
        <button>
            <svg width="20" height="20">
                <use href="#arrow"></use>
            </svg>
        </button>
    </div>
</div>
            
          
!
            
              @import url("https://fonts.googleapis.com/css?family=Muli:300,400,600,900&display=swap");

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
body {
  color: #333;
  font-family: "Muli", sans-serif;
  min-height: 100vh;
  /* add a circle with a linear gradient in the center of the screen, above another linear gradient */
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><linearGradient id="gradient" x1="0" y1="1" x2="1" y2="0"><stop offset="0" stop-color="%23FBDBE3"></stop><stop offset="1" stop-color="%23F39BAE"></stop></linearGradient><circle cx="50" cy="50" r="50" fill="url(%23gradient)"></circle></svg>'),
    linear-gradient(45deg, #ffecf0, #f5c3cf);
  background-position: 50%, 0%;
  background-size: 40%, 100%;
  background-repeat: no-repeat;
}

/* for the phone UI specify a tall, thin, rounded rectangle */
div.phone {
  max-width: 280px;
  margin: 2rem auto;
  border-radius: 15px;
  background: #fffffd;
  /* display the content in a column */
  display: flex;
  flex-direction: column;
  /* add multiple shadows to make a solid rounded border with a small blue-ish overlay and a softer shadow */
  box-shadow: 0 0 0 0.02rem #ddf, 0 0 1rem 0.1rem #f4f4ff, 0 0 0 0.8rem #fcfcff,
    0 0 0.8rem 0.5rem #ccf;
}

/* display the navigation's items in a row */
.phone__nav {
  display: flex;
  align-items: center;
  padding: 0.5rem 1rem;
  margin-bottom: 0.5rem;
}
.phone__nav span {
  flex-grow: 1;
  font-weight: 600;
  font-size: 0.7rem;
}
.phone__nav svg {
  margin: 0 0.1rem;
  width: 0.8rem;
  height: 0.8rem;
}

.phone__state {
  padding: 0 1rem;
}
.phone__state h2 {
  color: #ff4966;
  font-size: 1.4rem;
}
.phone__state p {
  font-size: 0.8rem;
}

/* display the drink in the center of the phone */
.phone__drink {
  align-self: center;
  width: 70%;
  height: auto;
  margin: 1.5rem 0 0;
}

/* display the ingredients in a non-wrapping row */
.phone__ingredients {
  display: flex;
  align-items: center;
  margin: 0 0.5rem;
  /* allow for horizontal scroll */
  overflow-x: auto;
}
/* visually hide the scrollbar */
.phone__ingredients::-webkit-scrollbar {
  opacity: 0;
}
/* prevent the buttons from shrinking */
.phone__ingredients button {
  margin: 0.5rem;
  flex-shrink: 0;
  border: none;
  background: none;
  position: relative;
  font-family: inherit;
  /* display the svg and span atop one another */
  display: flex;
  flex-direction: column;
  align-items: center;
}
.phone__ingredients button svg {
  width: 78px;
  height: 78px;
  display: block;
  filter: drop-shadow(0 0 10px hsla(0, 0%, 0%, 0.05));
}
/* have the span overlap on the svg */
.phone__ingredients button span {
  position: relative;
  border-radius: 20px;
  background: #ff4966;
  color: #fff;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  margin-top: -0.5rem;
}
/* on click darken the background color of the span element through an overlapping pseudo element */
.phone__ingredients button span:before {
  position: absolute;
  content: "";
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: #000;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
  transition-property: opacity, transform;
  transition-duration: 0.1s;
  transition-timing-function: ease-out;
}
.phone__ingredients button:active span:before {
  opacity: 0.2;
  transform: translate(-50%, -50%) scale(1);
}

/* display the receipt on a completely white background */
.phone__order {
  display: flex;
  background: #fff;
  margin: 0.5rem 0.75rem 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 15px;
  box-shadow: 0 1px 15px -2px #f5c3cf;
  min-height: 75px;
}
/* have the heading and list stretch to occupy the available width */
.phone__order .order--list {
  flex-grow: 1;
}
.phone__order .order--list h3 {
  font-size: 0.6rem;
  color: #ff4966;
  text-transform: uppercase;
  margin-bottom: 0.1rem;
}
/* remove the bullet point from the unordered list */
.phone__order .order--list ul {
  list-style: none;
  font-size: 0.8rem;
  text-transform: capitalize;
  line-height: 1.5;
}

/* highlight the button with the accent color
replicate the active state created for the ingredients' span
! enable this state alongside full opacity only when a class is added
this to highlight when the button is clickable
*/
.phone__order button {
  align-self: center;
  background: #ff4966;
  border: none;
  color: #fff;
  width: 30px;
  height: 30px;
  padding: 0.3rem;
  border-radius: 50%;
  opacity: 0.5;
  cursor: not-allowed;
  transition: opacity 0.15s ease-out;
}
.phone__order button svg {
  display: block;
  width: 100%;
  height: 100%;
}
.phone__order.complete button {
  opacity: 1;
  cursor: pointer;
}

            
          
!
            
              /* with global variables
- describe the list of ingredients
- describe the state of the order
*/
const state = {
  ingredients: [ // an array of ingredients by name and matching color
    {
      name: 'pineapple',
      color: 'rgb(255, 208, 66)',
    },
    {
      name: 'peach',
      color: 'rgb(242, 110, 73)',
    },
    {
      name: 'raspberry',
      color: 'rgb(228, 41, 57)',
    },
  ],
  order: { // an object detailing the selection as well as variables used for the size and position of the rectangles
    ingredients: [],
    left: 2,
    base: 50, // where the rectangles ought to be positioned, vertically (atop the existing rect element)
    measure: 25, // height of each rectangle
  }
}

/* based on the list of ingredients add one button in the .phone__ingredients section
 with the following markup (but using the name and color of the ingredients)
<button>
    <svg style="color: #fbe054;" width="20" height="20">
        <use href="#pineapple-button"></use>
    </svg>
    <span>Add +</span>
</button>
*/
const phoneIngredients = document.querySelector('.phone__ingredients');


// function called on the order button
function handleOrder() {
  // proceed updating the UI to show the final mixture
  this.removeEventListener('click', handleOrder);

  // shake the svg
  const phoneDrink = document.querySelector('.phone__drink');
  anime({
    targets: phoneDrink,
    rotate: [4, 0, -4],
    loop: 4,
    direction: 'alternate',
    duration: 100,
    easing: 'easeInOutSine',
  })

  // include a rectangle element spanning the entirety of the g.drink 100 height
  // this rectangle using the color dictated by the selected ingredients
  const { ingredients } = state;
  const { ingredients: ingredientsOrder } = state.order;
  const colors = ingredientsOrder.map(nameOrder => ingredients.find(({name}) => name === nameOrder).color);
  // add up the rgb values of each ingredient
  const regexRGB = /rgb\((\d+), (\d+), (\d+)\)/;
  const color = colors.reduce((acc, curr) => {
    const [, r, g, b] = curr.match(regexRGB);
    return [r, g, b].map((value, index) => parseInt(value, 10) + acc[index]);
  },[239, 225, 153]); // initialize the array with the color of the soya drink (this would technically weigh for twice the intensity, but to avoid too similar a color, I consider it diluted)

  // include the color using the sum of all rgb codes, divided by the number of colors present
  phoneDrink.querySelector('g.drink').innerHTML += `
  <g id="mix" transform="translate(0 50)">
    <rect
        transform="scale(1 0)"
        x="0"
        y="-50"
        width="100"
        height="100"
        fill="rgb(${color.map(value => value / 3).join(',')})">
    </rect>
  </g>
  `;

  // after a small delay animate the rectangle to its full y scale
  anime({
    targets: `g#mix rect`,
    transform: 'scale(1 1)',
    duration: 300,
    delay: 300,
    easing: 'easeInOutSine',
  });

  // once the shaking is complete remove the ingredients
  // before removing the ingredients hide them from view
  anime({
    targets: phoneIngredients,
    opacity: 0,
    visibility: 'hidden',
    duration: 250,
    delay: 600,
    easing: 'easeInOutSine',
    complete: () => {
      anime({
        targets: phoneIngredients,
        height: 0,
        duration: 250,
        easing: 'easeInOutSine',
        complete: () => {
          phoneIngredients.parentElement.removeChild(phoneIngredients);
        }
      })
    }
  });

  // remove the order button and update the phoneState/phoneOrder text elements to highlight the final screen
  const phoneState = document.querySelector('.phone__state');
  const phoneOrder = document.querySelector('.phone__order');


  // phoneState.querySelector('p').innerHTML = 'And here it is!<br/><strong>Hope you\'ll enjoy</strong>';
  anime({
    targets: this,
    scale: 0,
    duration: 250,
    delay: 750,
    easing: 'easeInOutSine',
    complete: () => {
      this.parentElement.removeChild(this);
    }
  });
  anime({
    targets: phoneState,
    opacity: 0,
    visibility: 'hidden',
    duration: 250,
    delay: 750,
    easing: 'easeInOutSine',
    complete: () => {
      phoneState.innerHTML = `
        <h2>Here it is</h2>
        <p>Hope you'll enjoy<br/>your smoothie!</p>
      `;
      anime({
        targets: phoneState,
        opacity: 1,
        visibility: 'visible',
        duration: 200,
        easing: 'easeInOutSine',
      });
    }
  });
  anime({
    targets: phoneOrder,
    opacity: 0,
    visibility: 'hidden',
    duration: 250,
    delay: 850,
    easing: 'easeInOutSine',
    complete: () => {
      phoneOrder.querySelector('div').innerHTML = `
        <h3>Your great choice</h3>
        <p>A ${ingredientsOrder.join('-')} flavored refreshment.</p>
      `;
      anime({
        targets: phoneOrder,
        opacity: 1,
        visibility: 'visible',
        duration: 200,
        easing: 'easeInOutSine',
      });
    }
  });

}

// function called by the ingredients button
function handleIngredient() {
  // retrieve the name of the ingredient and based on the state.order.ingredients, state.order.left values proceed adding/removing the ingredients
  const ingredient = this.getAttribute('data-ingredient');
  const { ingredients, left, base, measure } = state.order;


  /* possible scenarios
  1. ingredient is present in the ingredients array, proceed to remove it
  1. ingredient is not present, analyse the number of ingredients left
    1. more than 0, proceed to add the ingredient
    1. 0, do nothing

    all the while updating the state and the UI where needed (heading, order section, but most importantly the drink)
  */
 if(ingredients.includes(ingredient)) {
    // update the state removing the ingredient
    const index = ingredients.indexOf(ingredient);
    state.order.ingredients = [...ingredients.slice(0, index), ...ingredients.slice(index + 1)];
    state.order.left = left + 1;

    // update the UI
    // number of ingredients left
    const phoneState = document.querySelector('.phone__state');
    phoneState.querySelector('p').innerHTML = `You can choose<br/><strong>${state.order.left} more</strong> ingredients.`

    // possibility to add the now removed ingredient
    this.querySelector('span').textContent = 'Add +';

    // list of selected ingredients
    const phoneOrder = document.querySelector('.phone__order');
    phoneOrder.querySelector('ul li:last-of-type').textContent = state.order.ingredients.join(', ');

    // class for the order button
    phoneOrder.classList.remove('complete');
    // remove the event listener to avoid running the function accidentally
    phoneOrder.querySelector('button').removeEventListener('click', handleOrder);

    // update the SVG to remove the selected ingredient and possibly translate the ingredients chosen afterwards
    const phoneDrink = document.querySelector('.phone__drink');
    // before removing the element have the selected rectangled scaled back to 0
    anime({
      targets: phoneDrink.querySelector(`g#${ingredient} rect`),
      transform: 'scale(1 0)',
      duration: 200,
      easing: 'easeInOutSine',
      complete: () => {
        const selectedIngredient = phoneDrink.querySelector(`g#${ingredient}`)
        selectedIngredient.parentElement.removeChild(selectedIngredient);
      }
    });
    // translate the remaining ingredient, if any downwards
    const remainingIngredient = ingredients.find(ingr => ingr !== ingredient);
    anime({
      targets: phoneDrink.querySelector(`g#${remainingIngredient}`),
      transform: `translate(0 ${base - measure * 2})`,
      duration: 200,
      easing: 'easeInOutSine',
    });


    // reduce the base value
    state.order.base = base - measure;

 } else if(left > 0) {
    // update the state adding the ingredient
    state.order.ingredients.push(ingredient);
    state.order.left = left - 1;

    // update the UI
    // ! display different content if left is now equal to 0, to direct toward the mixing step
    const phoneState = document.querySelector('.phone__state');

    const phoneOrder = document.querySelector('.phone__order');

    if(state.order.left === 0) {
      phoneOrder.classList.add('complete');
      phoneOrder.querySelector('button').addEventListener('click', handleOrder);
      phoneState.querySelector('p').innerHTML = '<strong>You are all set</strong><br/>Proceed mixing.';
    } else {
      phoneState.querySelector('p').innerHTML = `You can choose<br/><strong>${state.order.left} more</strong> ingredients.`;
    }

    this.querySelector('span').textContent = 'Remove';

    phoneOrder.querySelector('ul li:last-of-type').textContent = state.order.ingredients.join(', ');

    // update the SVG to add the rectangle element
    const phoneDrink = document.querySelector('.phone__drink');
    const {color} = state.ingredients.find(({name}) => name === ingredient);
    // ! initially set the vertical scale to 0 and animate the rectangle with anime.js
    phoneDrink.querySelector('g.drink').innerHTML += `
    <g id="${ingredient}" transform="translate(0 ${base})">
      <rect
          transform="scale(1 0)"
          x="0"
          y="0"
          width="100"
          height="${measure}"
          fill="${color}">
      </rect>
    </g>
    `;

    anime({
      targets: `g#${ingredient} rect`,
      transform: 'scale(1 1)',
      duration: 200,
      easing: 'easeInOutSine'
    })

    // increase the base variable to move the following rectangle upwards
    state.order.base = base + measure;
 }
}

state.ingredients.forEach(({ name, color }) => {
  // create and append a button specifying the markup described above
  const button = document.createElement('button');
  // data attribute to rapidly identify the selected ingredient
  button.setAttribute('data-ingredient', name);
  button.addEventListener('click', handleIngredient);
  button.innerHTML = `
  <svg style="color: ${color};" width="20" height="20">
      <use href="#${name}-button"></use>
  </svg>
  <span>Add +</span>
  `;
  phoneIngredients.appendChild(button);
});


// orderButton.addEventListener('click', handleOrder);

// bonus: add the current hour and minutes in the span element
// using the hh:mm format
const now = new Date();
const hours = now.getHours();
const minutes = now.getMinutes();
const zeroPadded = num => (num >= 10 ? num.toString() : `0${num}`);

const span = document.querySelector('nav span');
span.textContent = `${zeroPadded(hours)}:${zeroPadded(minutes)}`;
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console