Challenge [Frontend Mentor] - In this challenge, JavaScript was used to filter jobs based on the selected categories. Technologies used: HTML5, CSS3 and React.

Overview

Frontend Mentor - Job listings with filtering

Front-end challenge focused on javascript logic, where a list of fictitious vacancies is presented and these must be filtered according to user interaction with the fields.

About

Front-end coding challenge. Frontend Mentor.

The challenge is to build out this job listing page and get it looking as close to the design as possible.

You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go.

Your users should be able to:

  • View the optimal layout for the site depending on their device's screen size
  • See hover states for all interactive elements on the page
  • Filter job listings based on the categories

By using this app any user can learn how they've been using their money and always keep track of your balance.

Technologies

The following tools and frameworks were used in the construction of the project:

How to run

  1. Clone this repository
  2. Install dependencies
npm i
  1. Run the front-end with
npm start
  1. You can optionally build the project running
npm run build
  1. Finally access http://localhost:3000 on your favorite browser (unless it is Internet Explorer. In this case, review your life decisions)
You might also like...

The Bookstore is a website similar to the "Awesome Books" website. Here we will create an MVP version of it that allows you to: Display a list of books, Add a book and Remove a selected book.

The Bookstore is a website similar to the

Book Store This is Book Store project. Built With HTML CSS JavaScript React Screenshot Live Demo Go Live 😎 Getting Started Open dev branch Open VSCod

May 3, 2022

The Bookstore is a website similar to the "Awesome Books" website built in the previous module. You will create an MVP version of it that allows you to: Display a list of books. Add a book. Remove a selected book.

The Bookstore is a website similar to the

Bookstore The Bookstore is a website similar to the "Awesome Books" website built in the previous module. You will create an MVP version of it that al

Jun 12, 2022

A frontend Framework for building B2B applications running in the browser on top of REST/GraphQL APIs, using ES6, React and Material Design

A frontend Framework for building B2B applications running in the browser on top of REST/GraphQL APIs, using ES6, React and Material Design

react-admin A frontend Framework for building data-driven applications running in the browser on top of REST/GraphQL APIs, using ES6, React and Materi

Dec 30, 2022

A personal project, made with React, React Native, Typescript and some of the most used front-end libraries.

A personal project, made with React, React Native, Typescript and some of the most used front-end libraries.

A personal project, made with React, React Native, Typescript and some of the most used front-end libraries.

Jul 23, 2022

A simple demo of React Lottie power to 1st Loggi Frontend Show & Tell

Loggi Frontend Show & Tell - Animações com React Lottie A simple demo of React Lottie power to 1st Loggi Frontend Show & Tell This project was bootstr

Aug 4, 2022

Site para treinar minhas habilidades com o react no frontEnd (totalmente voltado para o aprendizado)

Tutorial Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you ca

Jan 31, 2022

This is a challenge intiated by ModelSis. It consists in building a basic fullstack web app

This is a challenge intiated by ModelSis. It consists in building a basic fullstack web app

modelsis-react-fullstack 🏁 Description This is a challenge intiated by ModelSis. It consists in building a basic fullstack web app. The current repos

Jan 21, 2022

Rocket Bank is a finance mobile app built for XP Mobile Challenge.

Rocket Bank is a finance mobile app built for XP Mobile Challenge.

Rocket Bank is a mobile application made with React Native. You can track your portfolio performance, make deposits and withdrawals, and buy and sell

Jul 27, 2022

Free Open Source High Quality Dashboard based on Bootstrap 4 & React 16: http://dashboards.webkom.co/react/airframe

Free Open Source High Quality Dashboard based on Bootstrap 4 & React 16: http://dashboards.webkom.co/react/airframe

Airframe React High Quality Dashboard / Admin / Analytics template that works great on any smartphone, tablet or desktop. Available as Open Source as

Jun 5, 2022
Owner
Rui Neto
Driven by constant programming and engineering challenges!
Rui Neto
⚡️The Fullstack React Framework — built on Next.js

The Fullstack React Framework "Zero-API" Data Layer — Built on Next.js — Inspired by Ruby on Rails Read the Documentation “Zero-API” data layer lets y

⚡️Blitz 12.5k Jan 4, 2023
Edvora App is a web application based on an external API, showing data about different types of products and the user can filter these data by choosing a specific state, city or product name. Build with React.js

Edvora App is a web application based on an external API, showing data about different types of products and the user can filter these data by choosing a specific state, city or product name. Build with React.js

Kyrillos Hany 5 Mar 11, 2022
React tooltip is a React.JS Component that brings usefull UX and UI information in selected elements of your website.

React Tooltip ✅ React tooltip is a React.JS Component that brings usefull UX and UI information in elements of your website. Installation ⌨️ React Too

Marc Ramos 1 Dec 22, 2021
Mobile app development framework and SDK using HTML5 and JavaScript. Create beautiful and performant cross-platform mobile apps. Based on Web Components, and provides bindings for Angular 1, 2, React and Vue.js.

Onsen UI - Cross-Platform Hybrid App and PWA Framework Onsen UI is an open source framework that makes it easy to create native-feeling Progressive We

null 8.7k Jan 8, 2023
A full-stack application for junior developers to find jobs that match their skill-level, find gigs in order to boost their resume, and showcase a portfolio.

Junior is a full-stack web application that was created to facilitate junior developers in finding jobs that match their skill-level, boosting their resume through finding and completing gigs, and providing a way to easily showcase a portfolio

Karolina 5 Oct 25, 2022
A markdown-it plugin and Nunjucks async filter to make working with Cloudinary in Eleventy easier.

Cloudinary Eleventy Helpers This is a collection of Eleventy Cloudinary helpers. It currently includes: A markdown-it plugin that converts local image

Jason Lengstorf 9 Feb 2, 2022
This is a custom recipe app called chefMaster. which contains a lot of interesting such as many apis requests, filter, search , add posts. Property design

In the project directory, you can run: npm start Runs the app in the development mode. Open http://localhost:3000 to view it in the browser. The page

Andrew Smal 0 Nov 9, 2022
Common recipes to productively use Nx with various technologies and in different setups. Made with ❤️ by the Nx Team

Nx Recipes Welcome to Nx Recipes! Here you'll find various examples to use Nx to achieve a particular goal. Contributing Absolutely!! We're going to h

Nrwl 30 Dec 24, 2022
A web application for a company that provides commercial and scientific space travel services. The application allows users to book rockets and join selected space missions.

Space Travelers' Hub A web application for a company that provides commercial and scientific space travel services. The application allows users to bo

Manel Hammouche 8 Oct 14, 2022
A web application that allows users to book rockets and join selected space missions, Using the SpaceX API.

Space-Travelers-Hub A web application that allow users to book rockets and join selected space missions, Using the SpaceX API. This project was bootst

Rachid Boudaoudi 6 Dec 9, 2021