JavaScript Code challenge

Date:14/09/2025

By Moses Maina

Flatacuties 🐾

Flatacuties is a fun app where users can vote for the cutest animal! This project demonstrates fetching data from a local JSON server and dynamically displaying content on a webpage with vanilla JavaScript.

---

Features

Core Features

• View all animals: A sidebar lists all animal names.
• View animal details: Click an animal name to see its image and current vote count.
• Vote for animals: Increases the number of votes for any animal locally.
• Reset votes: Reset an animal's votes back to 0.

---

Project Setup

1. Clone the repository:

   git clone git@github.com:moses804/code-challenge-2.git
   cd flatacuties
   

2. Install JSON Server (if not already installed): npm install -g json-server

3. Create db.json and add the following data: { "characters": [ { "id": 1, "name": "Mr. Cute", "image": "https://thumbs.gfycat.com/EquatorialIckyCat-max-1mb.gif", "votes": 0 }, { "id": 2, "name": "Mx. Monkey", "image": "https://thumbs.gfycat.com/FatalInnocentAmericanshorthair-max-1mb.gif", "votes": 0 }, { "id": 3, "name": "Ms. Zebra", "image": "https://media2.giphy.com/media/20G9uNqE3K4dRjCppA/source.gif", "votes": 0 }, { "id": 4, "name": "Dr. Lion", "image": "http://bestanimations.com/Animals/Mammals/Cats/Lions/animated-lion-gif-11.gif", "votes": 0 }, { "id": 5, "name": "Mme. Panda", "image": "https://media.giphy.com/media/ALalVMOVR8Qw/giphy.gif", "votes": 0 } ] }

4. Start the backend server: json-server --watch db.json The server runs at: http://localhost:3000/characters

5. Open index.html in your browser to view the frontend

Project Structure

flatacuties/ index.html # Main HTML file style.css # CSS for styling index.js # JavaScript logic (fetch, render, vote) db.json # Local JSON server data

How It Works

1. Fetch & display animals

   index.js fetches the data from /characters endpoint and displays all names in a sidebar.

2. Show animal details

   Clicking a name renders the animal's image, name, and votes.

3. Vote & Reset

   Clicking Vote increases the votes locally.

   Clicking Reset sets votes back to 0.

4. Add new animal (bonus)

   Users can submit a form with an animal name and image URL.

   The new animal is added to the list (local only).

   Technologies Used

HTML – structure of the page

CSS – styling and layout

JavaScript – fetch API, DOM manipulation

JSON Server – local backend API

License

The content of this site is licensed under the MIT License. (c) 2025 Moses Maina