The goal of this test is to create some interactive cards using HTML, CSS/SCSS, and JavaScript inside a Ruby on Rails application.
- Vanilla JS and CSS/SCSS only (no Bootstrap, React or other frontend frameworks).
- The layout for the cards should be responsive.
- The page must be built within the provided Rails application.
- Provide access to your code, e.g. link to a GitHub repo.
- The card data should be stored (e.g. in JS mocked API response).
Before you begin building, clone this repo and follow the steps below to setup Ruby on Rails on your system.
Rails requires Ruby. Install Ruby 3.1.4.
For installation methods for most Operating Systems take a look at ruby-lang.org.
Run the following command to verify Ruby is installed on your system:
ruby --versionYou will also need an installation of the SQLite3 database. Many popular UNIX-like OSes ship with an acceptable version of SQLite3. Others can find installation instructions at the SQLite3 website.
Run the following command to verify SQLite3 is installed on your system:
sqlite3 --versionIn the root directory of this repo, run the following command to install Rails and its dependencies.
bundle installVerify that Rails has been installed with:
rails --versionRun the following command in the root directory to start the Web server in dev mode:
./bin/devThis will start up Puma, a web server distributed with Rails by default.
To see your application in action, open a browser window and navigate to http://localhost:3000. You should see a white page with a "Ready" heading and an image.
To start building, locate the following files/folders:
app/views/layouts/application.html.erb
- This file is used to render the layout of the page, including the
<head>and<body>tags.
app/views/home/index.html.erb
- You can use this file to write your HTML.
app/assets/stylesheets/application.scss
- You can use this file to write your CSS/SCSS.
app/javascript/application.js
- You can use this file to write your JS.
public/images/
- You can use and reference the images from this folder.
The card states are shown below. The image should fade and a button should appear when the card is hovered over. When an item is added to the cart, an icon should appear on the top left-hand corner of the card indicating that it has been added to the cart. A new button should now appear allowing you to remove the item from the cart, which resets the card back to its original state.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent