adalab / modulo-2-evaluacion-intermedia-marialapc

modulo-2-evaluacion-intermedia-marialapc created by GitHub Classroom

---

Chat We. with String Projects

This project has been developed for String as our final project for Adalab.

This project is based on the development of a kind of social network focused on messaging. It is intended to facilitate the communication among members of the same channel or private group. This social network will allow us to log in as users, access these groups and be able to send messages within them creating a thread.

This project was developed by:

Bismilah Langford: https://github.com/bismilahlf
Cristina Pérez: https://github.com/crstinapl
María Ramírez: https://github.com/mariavioleta1417
María Victoria Rubio: https://github.com/mariviru
Raquel Villaverde: https://github.com/raquelv85
Raquel Romo: https://github.com/rqlromo

Project structure

The project has been created with React, therefore, its structure is based on components.

Content and Characteristics

• Login and logout
• Group listing page
• Group conversation page
• Thread page

If you want to contribute:

First of all, you must clone this project from our repository on Github.

Instalation

In order to install the project, you must type npm install into the terminal to install the node modules packages.

Start Project

To start the project, type npm start.

Used technologies

This app has been built using bootstrap,react,javascript,jsx and sass.

Tools

This project has been created with Create React App (https://github.com/facebookincubator/create-react-app), a generating tool that automates the installation of React and Babel, which will transform the ES6 code into ES5 and preconfigure the project.

Below you will find some information on how to perform common tasks. You can find the most recent version of this guide here.

Available Scripts

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 will reload if you make any changes. You will also see any lint errors in the console.

npm run build

It builds the app for production to the build folder. It correctly sets React into production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes. Your app is ready to be deployed!

See the section about deployment for more information.

modulo-2-evaluacion-intermedia-marialapc's Issues

Some improvements

Some improvements

Really cool job @marialapc !!!

Here you have some tips to improve the exercise:

JavaScript: basic

• Define the var for the randomNumber.
• Define the logic to transform the random number into the computer selection.
• Add the functionality to select the strength of the evil race
• Compare the user selection with the computer generated item and write the results into the page.

JavaScript: advanced

• Move the feedback logic to a function and execute it on each click.
• You are writing many times "trackEl.innerHTML = 'something';", what about making a function that accepts a string as param and paints it into 'trackEl'?

Good practices

• Make multiple commits as you work.
• Try to improve your commits messages. "Add JS" is a bit poor. "Add random number logic" is more explanatory.

Steps to bonus the game

You are close to the exercise solution, but here you have a steps guide to complete it anyway ;)

1. Save a reference to DOM elements in variables.
2. Use three counter variables: one for user wins, other for computer wins and another for total rounds played.
3. Increment the counter for computer wins when the computer wins a round (find the correct conditions).
4. Increment the round counter always the user clicks on "Batalla" button.
5. Show the counters in the proper elements of the page.
6. Create other function to check if the players have reached the maximum limit of rounds and call it from the listener function.
7. Add a reset button that cleans the select, the counter and writes the initial feedback

Further challenges

Then you can improve the game as you please, here you have some ideas:

• Show an image with the user and computer selection
• Make the input work when selecting the option.
• Whatever you want!

Call to action

Let me know if you have any doubts ;)

Go for it!!

Do not close this issue until your teacher asks you to