Find Jobs
Hire Freelancers

Build sockot.io traffic light app

$30-250 CAD

Kansellert
Lagt ut omtrent 5 år siden

$30-250 CAD

Betalt ved levering
To reinforce these initial socket concepts we’ve just covered. We will write a small app that simulates control of one or more traffic light components. The setup will work as follows: • Server Side Code: o Use the server code in today’s [login to view URL] as a starting point (this will be provided) o In addition, add an array of objects that include street names and data representing the length of time (in milliseconds) required for each lamp in a street light to be illuminated (green, red and yellow). In the data, ensure each element of the array uses different times, the provided example uses 12, 7.5 and 3 seconds respectively. Use the following format: let streetLights = [ {streetName: 'Maple', green: 12000, red: 7500, yellow: 3000}, … … Add other street values here } o When the server receives a join message from a client, a street name will be passed from the client as part of the payload . Use this name as the room to join. o After joining, have the server emit a turnLampOn message back to the client. This message should contain a payload consisting of the array element whose street name property matches the current room name (use the array method find to get the desired entry). This is an example from the MDN site to show you the syntax of using the find but obviously is not part of the lab: const result = [login to view URL]( fruit => [login to view URL] === 'cherries' ); • Client Side Code: o Create a component called [login to view URL] that does the following:  In the componentDidMount method: • Connects to the socket server • Emits a join message to the server, passing [login to view URL] as the payload (a parent component will load this see pg. 10) • In return, handles a turnLampOn message from server that includes lamp data as the payload from server. Then registers an event handler where the lights will be controlled  turnLampOn Event handler • Renders lamps based on state data (see markup below) • Continously calls a timing method for each color and the particular amount of time the light will be lit. This processing should be asynchronous ensuring one light completes before the next one starts) and should always be redgreenyellow and back to red continuously: while (true) { await [login to view URL]('red', [login to view URL]); … // other colours go here } waitSomeSeconds = (color, wait) => { return new Promise((resolve, reject) => { setTimeout(() => { [login to view URL]({ currentcolor: color }); resolve(); }, wait); }); };  Renders a single traffic light using markup similar to (again feel free to design your own): <div className="light"> <div className="lamp" style={{ backgroundColor: [login to view URL]('red'), margin: '.5rem' }} /> <div className="lamp" style={{ backgroundColor: [login to view URL]('yellow'), margin: '.5rem' }} /> <div className="lamp" style={{ backgroundColor: [login to view URL]('green'), margin: '.5rem' }} /> <div style={{ textAlign: 'center', fontName: 'Helvetica' }}>{[login to view URL]}</div> </div>  This code is an example to change the lamp’s backgroundColor to white if it’s not active so that there is only ever one active lamp: getColor = color => ([login to view URL] === color ? color : 'white');  The markup above uses classes called lamp and light. The following CSS can be added to [login to view URL] file to render 3 circle divs, and make sure you add the import for it to the [login to view URL] file .lamp { height: 3rem; width: 3rem; border-style: solid; border-width: 2px; border-radius: 50%; } .light { border: solid; width: 4.25rem; } o The parent component must contain a minimum of 4 <TrafficLight…/> tags. You can make this parent a functional component as no state or lifecycle methods are required
Prosjekt-ID: 18925526

Om prosjektet

6 forslag
Eksternt prosjekt
Aktiv 5 år siden

Ønsker du å tjene penger?

Fordeler med budgivning på Freelancer

Angi budsjettet og tidsrammen
Få betalt for arbeidet ditt
Skisser forslaget ditt
Det er gratis å registrere seg og by på jobber
6 freelancers are bidding on average $156 CAD for this job
Brukeravatar
Hi, My name is Han. I am who is React Expert with 3+ years experience in a React Company. I read your project description carefully. My Skills are as below. - Web : ReactJS (FrontEnd) + MongoDB + Express/Laravel (Backend) - iOS/Android : React Native + Firebase + Express/Django RESTful API - Raspberry Pi: ElectronicJs(ReactJs) + RESTful API I am free , so that I can start your job immediately. Surely I can finish your job quickly with best quality. Please discuss more detail over chat. Best Regards. Han.
$144 CAD om 3 dager
5,0 (3 omtaler)
3,6
3,6

Om klienten

CANADAs flagg
London, Canada
5,0
1
Betalingsmetode bekreftet
Medlem siden mai 26, 2015

Klientbekreftelse

Takk! Vi har sendt deg en lenke for at du skal kunne kreve din gratis kreditt.
Noe gikk galt. Vær så snill, prøv på nytt.
Registrerte brukere Publiserte jobber
Freelancer ® is a registered Trademark of Freelancer Technology Pty Limited (ACN 142 189 759)
Copyright © 2024 Freelancer Technology Pty Limited (ACN 142 189 759)
Forhåndsvisning innlasting
Tillatelse gitt for geolokalisering.
Påloggingsøkten din er utløpt og du har blitt logget ut. Logg på igjen.