https://github.com/matiascarabella/reddit-mystery-button

One of my first interview challenges (2019): A front-end recreation project of Reddit. It uses HTML, CSS, and JavaScript to create the requested functionality and mimic the look and feel of Reddit’s website. The project is for learning purposes only and does not include any back-end functionality.
https://github.com/matiascarabella/reddit-mystery-button

css html interview-challenge javascript reddit reddit-clone

Last synced: about 1 month ago
JSON representation

One of my first interview challenges (2019): A front-end recreation project of Reddit. It uses HTML, CSS, and JavaScript to create the requested functionality and mimic the look and feel of Reddit’s website. The project is for learning purposes only and does not include any back-end functionality.

• Host: GitHub
• URL: https://github.com/matiascarabella/reddit-mystery-button
• Owner: MatiasCarabella
• Created: 2019-12-20T05:59:45.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2023-03-27T06:40:18.000Z (almost 2 years ago)
• Last Synced: 2024-11-07T10:21:03.213Z (3 months ago)
• Topics: css, html, interview-challenge, javascript, reddit, reddit-clone
• Language: CSS
• Homepage: https://matiascarabella.github.io/redditMysteryButton/
• Size: 184 KB
• Stars: 0
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Reddit Mystery Button

This project was one of the first challenges I faced in the professional world. It was part of an **interview** process for a company that I applied to back in 2019. The goal was to create a 'Reddit clone' with an imaginary feature for April Fools. I learned a lot from this experience and I’m quite proud of the result given my knowledge at the time. 

My first job ended up being more back-end oriented, which became my main focus later on. 😊

---

### Problem

The date is March 20, 2015, you're a Reddit employee and you come up with an 'April Fools' prank: To create a section of the page containing a large button and a counter indicating a descending amount of seconds.

The counter descends from 60 seconds to 0 and only resets if someone with the page open presses the button. It can only be pressed once per user and, when a user presses it, a color is assigned as a reminder based on the following table:



### Requirement

A single page application that implements the button idea considering the following aspects:

- The 'click' of the button is an irreversible action.

- The single page should be minimalistic.

- Since it is for a joke, nothing about how the button works should be explained explicitly.

- You can decide how much and what kind of contextual information to provide to the user.

- Simulate other people's clicks and have everything work offline _(with some standard random function)_.

### Extras

In addition, you can apply any of the following:

- Use Angular 7 as a framework. You can use Angular Material as UX library.

- Add visualizations for the different events that occur automatically.

- Add visualizations to indicate the user's color.

- Keep track of automatic clicks and show some statistics or related visualization.