oakesso/coding-challenge-paris

Coding Challenge

Introduction

Welcome to this coding challenge! Here, we will test your coding abilities by doing some tasks.

This challenge takes inspirtation from several tests that former Ironhackers had in the past. It takes 1 hour. The idea is to give an overview of what could be a test given by a company.

Rules

• You have 1 hour to complete the challenge.
• You can ask for help twice. Every time you ask for help, a teacher is going to give you a hint and spend maximum 2 minutes with you.
• You can't communicate with other people.
• You can go on any website to find information 😀

Score

You will have different tasks to complete. Each task gives you up to a certain number of points. You can complete the tasks in the order you want!

#	Task	Points
0	Initialize the project	10
1	Create the page Temperature	12
2	Create the page Customize Image	15
3	Create a Readme file	5
4	Deploy online	3
5	Make a beautiful website	10
6	Have a good code quality	5

Advice

Don't spend too much time on something that is too hard for you and move on to the next steps. Don't miss the last tasks (3, 4, 5 and 6) which are easy and very important.

Tools used

• React generated with create-react-app
• NPM packages: react-router-dom

Task 0 | Initialize the project

Create the React application

• Generate a new app with CreateReactApp.
• We'll use react-router-dom in order to have the following "pages"
  • / -- the home page
  • /temperature
  • /customize-image 👉 In your src/App.js, implement a <nav> with 3 links to those pages.

At the end of this step, you should have a website displaying 3 different links. At this stage, only the "Home" should work.

Make sure your code is clear enough for another developer 😉

Publish to GitHub

Create a new GitHub repository and push your code to Github.

You can send the GitHub link to your instructor.

Now you are ready to start the real part 🚀

Task 1 | Create the page Temperature

In this task you have to create a tool to give information about the weather.

Create a Temperature component, rendered when you go to "http://localhost:3000/temperature".

This component should render:

• An input so that the user can type a temperature, in Celsius
• A text that changes based on the temperature:
  • When the temperature is lower than 10 => "It's cold ❄️" (in blue)
  • When the temperature is between 10 and 30 => "It's nice 🌼" (in black)
  • When the temperature is above 30 => "It's warm ☀️" (in red)

For this task, you need only 1 state temperature.

Task 2 | Create the page Customize Image

In this task you have to create a tool to previsualize pictures with diffrent sizes.

Create a CustomizeImage component, rendered you go to "http://localhost:3000/customize-image".

In this component, you should render:

• An text input
• A range input, between 0 and 200
• A text with the following pattern: "... x ... px", where ... is the value of the range input
• An image where the "src" is the value of the text input

For this task, you need 2 states: size and url.

Don't worry if your image doesn't have the right proportions. It should work perfectly with square images.

Task 3 | Create a Readme file

The Readme file is the content that is displayed when you go to a Github repository.

You need to create/change a README.md file with:

• The instructions to execute your project on a computer
• A link to your project (see next task)
• Some screenshots

Task 4 | Deploy online

Because your are doing a simple front-end project, you can deploy your website very easily with different tools. The easiest one to use is Netlify.

First, run the following command:

# Create a /build folder with a static website (simple index.html + CSS + JS)
$ npm run build

Then, go to https://netlify.com/drop and drag and drop your /build folder generated by the previous command.

It's already done 😀 Don't forget to add the link to your README.md file.

Task 5 | Make a beautiful website

Try to make the best website as possible!

Some simple things you can do:

• Change the favicon
• Change the title

Task 6 | Have a good code quality

People are going to read your code so it's important to have a clean code that follow these principles:

• Have a good indentation. To reindent a file in VS Code, you can type Cmd+Shift+P > "Format Document".
• Choose explicit names for variables and functions
• Keep your functions short. If a function is more than 50 lines, you probably need to create sub-functions to make your code neater.