html css js
intermediate

Santa Gifts

The Santa Gifts App challenge will test your HTML, CSS and JS skills along with designing skills.

Brief

Your challenge is to build this Santa Gifts App and should meet following requirements:

  • The design should at least look like presented in the preview.
  • The Santa should be able to perform the generation of gifts by clicking Present Gift button.
  • The app should be viewable in mobile and desktop screens.

You can use any tools you like to complete the challenge.

The design of the challenge is kept minimal. You can build your optimized version.

NOTE: It is highly recommended to first go through the challenge by yourself before checking the solution.

Prerequisites

You should have the basic knowledge of HTML, CSS and JS to complete this challenge.

Starter Code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Coding Challenges | Santa Gifts</title>

    <!-- Write your CSS below or feel free to create separate stylesheet -->
    <style>
      /* CSS here */

    </style>
  </head>
  <body>

    <!-- HTML here -->


    <script>
      // JavaScript here
      var emojisData = {
        smile: "&#128522;",
        cake: "&#127874;",
        wine: "&#127863;",
        champagne: "&#127870",
        popcorn: "&#127871;",
        beer: "&#127866;",
        doublebeer: "&#127867;",
        chocolate: "&#127851;",
        icecreamcone: "&#127846;",
        icecreamcup: "&#127847;",
        laptop: "&#128187;",
        camera: "&#128247;",
        mobile: "&#128241;"
      }

    </script>
  </body>
</html>

See Solution

Check the solution code here