\n \n
\n )\n }\n\n mobileMenuClass() {\n const active = this.state.openMobileMenu ? \"active\" : \"\";\n return `menu-mobile-container ${active}`;\n }\n}\n","export function isNumeric(aString) {\n if (typeof aString != \"string\") return false // we only process strings!\n return !isNaN(aString) && // use type coercion to parse the _entirety_ of the string (`parseFloat` alone does not do this)...\n !isNaN(parseFloat(aString)) // ...and ensure strings of whitespace fail\n}\n","import React, {Component} from 'react';\nimport \"assets/scss/styles.scss\";\n\n\nclass Reciclaje extends Component {\n render() {\n return (\n \n
\n \n
\n - \n
- \n \n \n
- \n ¿Qué es?\n \n
- \n Calculadora\n \n
- \n Consejos\n \n
- \n Contacto\n \n
\n
\n \n
\n \n
\n ¿Qué es la huella de carbono?
\n\n Es la cantidad de gases de efecto invernadero (GEI) emitidos de\n forma\n directa o indirecta por una persona, actividad u organización y se mide en toneladas de\n CO2 equivalente (tn CO2). Las emisiones de GEI son la principal causa del Cambio\n Climático. Conocé más.\n
\n Comenzar\n\n
\n\n Conocé tu Huella
\nMedí, reducí y compensá tu Huella de Carbono
\n en 3 simples pasos\n
\n
\n Calcular\n \n 
\n
\n Medí
\n\n 
\n
\n Reducí
\n\n 
\n
\n Compensá
\n\n
\n Elije el tipo de formulario que te gustaría completar
\n\n \n 
\n 
\n
\n Tengo 5 minutos
\n \n \nAvanzado
\n \n\n 
\n \n
\n Desarrollado por
\n \n\n \n \n */}\n {/*
\n Reducí tu huella
\nConocé todas las recomendaciones para reducir tu huella\n de\n carbono
haciendo click acá
Compensá tu huella
*/}\n {/*Conocé las diferentes opciones para compensar tu huella*/}\n {/* de*/}\n {/* carbono
haciendo click acá
\n
\n\n Este proyecto contribuye con los siguientes ODS:
\n\n \n \n 7\n \n Energía Asequible y no contaminante\n \n \n 
\n \n \n \n 8\n \n TRABAJO DECENTE Y CRECIMIENTO ECONÓMICO\n \n \n 
\n \n \n \n 12\n \n PRODUCCIÓN Y CONSUMO RESPONSABLES\n \n \n 
\n \n \n \n 13\n \n ACCIÓN POR EL CLIMA\n \n \n 
\n \n \n \n 14\n \n VIDA SUBMARINA\n \n \n 
\n\n \n \n \n 15\n \n VIDA DE ECOSISTEMAS TERRESTRES\n \n \n 
\n\n \n \n \n 17\n \n ALIANZAS PARA LOGRAR LOS OBJETIVOS\n \n \n 
\n\n \n
\n \n 
\n \n
\n\n Este proyecto cuenta con el apoyo de:
\n \n\n
\n Conocenos
\n \nEsta es una iniciativa de Sustentabilidad Sin Fronteras\n co-desarrollada con ERYX y validada por Centro Tecnológico BETA de la Universidad Central de\n Cataluña Universidad de VIC.
\n\n
\n \n Para consultas escribinos a
\n huelladecarbono@sustentabilidadsf.org.ar\n
\n \n \n\n
\n );\n }\n}\n\nexport default Reciclaje;","import React, {Component} from 'react';\nimport \"assets/scss/styles.scss\";\n\n\nclass Energia extends Component {\n render() {\n return (\n \n\t\t\t\t\n
\n );\n }\n}\n\nexport default Energia;","import React, {Component} from 'react';\nimport \"assets/scss/styles.scss\";\n\n\nclass Personal extends Component {\n render() {\n return (\n \n\t\t\t\t\n
\n );\n }\n}\n\nexport default Personal;","import React, {Component} from 'react';\nimport \"assets/scss/styles.scss\";\n\n\nclass Alimentacion extends Component {\n render() {\n return (\n \n \n
\n );\n }\n}\n\nexport default Alimentacion;","import React, {Component} from 'react';\nimport \"assets/scss/styles.scss\";\n\n\nclass Transporte extends Component {\n render() {\n return (\n \n \n\n
\n );\n }\n}\n\nexport default Transporte;","export const genderOptions = [\n 'Masculino', \n 'Femenino', \n 'Otro'\n];\n\n\nexport const yesNoOptions = [\n 'Sí',\n 'No'\n];\n\nexport const fuelOptions = [\n 'GasOil',\n 'Nafta',\n 'GNC',\n 'Electricidad',\n 'No uso auto'\n];\n\nexport const plasticBagsOptions = {\n '30x40': 'Pequeña (30x40cm)',\n '40x50': 'Mediana (40x50cm)',\n '50x70': 'Grande (50x70cm o más)'\n};\n\nexport const monthsOptions = [\n 'Enero',\n 'Febrero',\n 'Marzo',\n 'Abril',\n 'Mayo',\n 'Junio',\n 'Julio',\n 'Agosto',\n 'Septiembre',\n 'Octubre',\n 'Noviembre',\n 'Diciembre'\n];\n\nexport const optionsEnviormentalKnowledge=[\n 'Sé poco y nada',\n 'Sé algo y de vez en cuando busco aprender más',\n 'Sé mucho y me preocupo',\n 'Soy profesional en temas ambientales'\n];\n","import {isNumeric} from \"../utils/isNumeric\";\nimport iconoTransporte from \"../assets/img/icono-transporte.svg\";\nimport iconoAlimentacion from \"../assets/img/icono-alimentacion.svg\";\nimport iconoConsumo from \"../assets/img/icono-energia.svg\";\nimport iconoEstiloDeVida from \"../assets/img/icono-hogar.svg\";\nimport iconoPersonal from \"../assets/img/icono-personal.svg\";\nimport Reciclaje from \"../assets/img/Reciclaje\";\nimport Energia from \"../assets/img/Energia\";\nimport Personal from \"../assets/img/Personal\";\nimport Alimentacion from \"../assets/img/Alimentacion\";\nimport Transporte from \"../assets/img/Transporte\";\nimport {yesNoOptions, genderOptions, optionsEnviormentalKnowledge,\n fuelOptions, plasticBagsOptions} from \"../utils/options\";\n\n\nexport const separationMethodsOptions = [\n 'Separo los reciclables (papel, cartón, metal, vidrio, plásticos)',\n 'Hago compost',\n 'Separo los reciclables y hago compost'\n];\n\nexport default [\n {\n name: \"Transporte\",\n icon: iconoTransporte,\n questions: [\n {\n \"id\": \"kilometersTraveledByCar\",\n \"animation\": Transporte,\n \"question\": \"¿Cuántos km hacés en auto por mes?\",\n \"helptext1\": \"Considerá en tu respuesta sólo las actividades de rutina e incluí el uso de taxi / uber / cabify.\",\n \"helptext2\": \"Si no usás este tipo de vehículo, completá con 0.\",\n \"type\": 'text',\n \"unit\": \"km\",\n \"validator\": (answer) => {\n return answer !== \"\" && isNumeric(answer)\n }\n },\n {\n \"id\": 'averagePersonPerCar',\n \"animation\": Transporte,\n \"question\": \"En promedio, ¿con cuántas personas viajás cada vez que usás tu auto?\",\n \"helptext1\": \"Considerá solo las actividades de rutina.\",\n \"helptext2\": \"Si no usás auto o no lo compartís, completá con 0\",\n \"type\": 'text',\n \"unit\": \"\",\n \"validator\": (answer) => {\n return answer !== \"\" && isNumeric(answer)\n }\n },\n {\n \"id\": 'carEfficiency',\n \"animation\": Transporte,\n \"question\": \"Qué consumo tiene el motor de tu auto que usás?\",\n \"helptext1\": \"Ingresá el valor en litros/100km.\",\n \"helptext2\": \"Si no usás auto, completá con 0.\",\n \"type\": 'text',\n \"unit\": \"l/100km\",\n \"validator\": (answer) => {\n return answer !== \"\" && isNumeric(answer)\n }\n },\n {\n \"id\": 'carFuelType',\n \"animation\": Transporte,\n \"question\": \"¿Qué tipo de combustible utiliza tu auto?\",\n \"helptext1\": \"\",\n \"helptext2\": \"\",\n \"validator\": (answer) => { return fuelOptions.includes(answer) },\n \"type\": 'radio',\n \"options\": fuelOptions,\n \"optionsLabel\": fuelOptions\n },\n {\n \"id\": 'kilometersTraveledByTaxi',\n \"animation\": Transporte,\n \"question\": \"¿Cuántos km hacés en taxi / uber / cabify o en auto compartido por mes? \",\n \"helptext1\": \"Considerá en tu respuesta sólo las actividades de rutina.\",\n \"helptext2\": \"Si no usás taxi / uber / cabify, completá con 0.\",\n \"type\": 'text',\n \"unit\": \"km\",\n \"validator\": (answer) => {\n return answer !== \"\" && isNumeric(answer)\n }\n },\n {\n \"id\": \"kilometersTraveledByMotorcycle\",\n \"animation\": Transporte,\n \"question\": \"¿Cuántos km hacés en moto por mes?\",\n \"helptext1\": \"Considerá en tu respuesta sólo las actividades de rutina.\",\n \"helptext2\": \"Si no usás este tipo de vehículo, completá con 0.\",\n \"type\": 'text',\n \"unit\": \"km\",\n \"validator\": (answer) => {\n return answer !== \"\" && isNumeric(answer)\n }\n },\n {\n \"id\": 'kilometersTraveledByBus',\n \"animation\": Transporte,\n \"question\": \"¿Cuántos km hacés en colectivo por mes?\",\n \"helptext1\": \"Considerá en tu respuesta sólo las actividades de rutina.\",\n \"helptext2\": \"Si no usás este tipo de vehículo, completá con 0.\",\n \"type\": 'text',\n \"unit\": \"km\",\n \"validator\": (answer) => {\n return answer !== \"\" && isNumeric(answer)\n }\n },\n {\n \"id\": 'kilometersTraveledBySubway',\n \"animation\": Transporte,\n \"question\": \"¿Cuántos km hacés en subte o tren por mes?\",\n \"helptext1\": \"Considerá en tu respuesta sólo las actividades de rutina.\",\n \"helptext2\": \"Si no usás este tipo de vehículo, completá con 0.\",\n \"type\": 'text',\n \"unit\": \"km\",\n \"validator\": (answer) => {\n return answer !== \"\" && isNumeric(answer)\n }\n },\n {\n \"id\": 'kilometersTraveledByLongDistanceBus',\n \"animation\": Transporte,\n \"question\": \"¿Cuántos km haces en micro de media o larga distancia por año? \",\n \"helptext1\": \"Considerá en tu respuesta sólo las actividades de rutina.\",\n \"helptext2\": \"Si no usás este tipo de vehículo, completá con 0.\",\n \"type\": 'text',\n \"unit\": \"km\",\n \"validator\": (answer) => {\n return answer !== \"\" && isNumeric(answer)\n }\n },\n {\n \"id\": 'kilometersTraveledByPlane',\n \"animation\": Transporte,\n \"question\": \"¿Cuántos km haces en avión por año? \",\n \"helptext1\": \"Considerá la actividad de tu último año\",\n \"helptext2\": \"Si no sabés la cantidad de km de alguno de tus viajes, podés chequearlo en https://es.distance.to/\",\n \"type\": 'text',\n \"unit\": \"km\",\n \"validator\": (answer) => {\n return answer !== \"\" && isNumeric(answer)\n }\n }\n ]\n },\n {\n name: \"Alimentacion\",\n icon: iconoAlimentacion,\n questions: [\n {\n \"id\": 'meatConsumption',\n \"animation\": Alimentacion,\n \"question\": \"¿Cuántas veces por semana comés carne (roja o blanca?)\",\n \"helptext1\": null,\n \"helptext2\": 'Si no comés carne, completa con 0.',\n \"type\": 'text',\n \"unit\": \"\",\n \"validator\": (answer) => { return answer !== \"\" && isNumeric(answer)}\n }\n ]\n },\n {\n name: \"Estilo de vida\",\n icon: iconoEstiloDeVida,\n questions: [\n {\n \"id\": 'peopleInHome',\n \"animation\": Reciclaje,\n \"question\": \"¿Con cuántas personas vivís?\",\n \"helptext1\": null,\n \"helptext2\": \"Si vivís solo, completá con 0.\",\n \"type\": 'text',\n \"validator\": (answer) => { return answer !== \"\" && isNumeric(answer)}\n },\n {\n \"id\": 'bagSize',\n \"animation\": Reciclaje,\n \"question\": \"¿Qué tamaño de bolsa de basura usás?\",\n \"helptext1\": null,\n \"helptext2\": null,\n \"validator\": (answer) => { return Object.keys(plasticBagsOptions).includes(answer) },\n \"type\": 'radio',\n \"options\": Object.keys(plasticBagsOptions),\n \"optionsLabel\": Object.values(plasticBagsOptions),\n },\n {\n \"id\": 'numberOfBagsPerWeek',\n \"animation\": Reciclaje,\n \"question\": \"¿Cuántas bolsas de basura generás por semana?\",\n \"helptext1\": null,\n \"helptext2\": null,\n \"type\": 'text',\n \"validator\": (answer) => { return answer !== \"\" && isNumeric(answer)}\n },\n {\n \"id\": 'doYouSeparate',\n \"animation\": Reciclaje,\n \"question\": \"¿Separás los residuos?\",\n \"helptext1\": null,\n \"helptext2\": null,\n \"validator\": (answer) => { return yesNoOptions.includes(answer) },\n \"type\": 'radio',\n \"options\": yesNoOptions,\n \"optionsLabel\": yesNoOptions\n\n },\n {\n \"id\": 'separationMethods',\n \"animation\": Reciclaje,\n \"question\": \"¿Cómo separás los residuos?\",\n \"helptext1\": null,\n \"helptext2\": null,\n \"validator\": (answer) => { return separationMethodsOptions.includes(answer) },\n \"type\": 'radio',\n \"options\": separationMethodsOptions,\n \"optionsLabel\": separationMethodsOptions,\n \"onlyIf\" : ['doYouSeparate', (value) => {return value === yesNoOptions[0]}]\n },\n {\n \"id\": 'internetUse',\n \"animation\": Reciclaje,\n \"question\": \"¿Cuántas horas usás internet por día? \",\n \"helptext1\": \"Considerá el uso de internet en el celular. \",\n \"helptext2\": 'Si no usás internet, completá con 0.',\n \"type\": 'text',\n \"unit\": \"hs\",\n \"validator\": (answer) => { return answer !== \"\" && isNumeric(answer) && answer <= 24}\n },\n {\n \"id\": 'jeansBought',\n \"animation\": Reciclaje,\n \"question\": \"¿Cuántos jeans te compraste el último año?\",\n \"helptext1\": \"\",\n \"helptext2\": 'Si no te compraste jeans, completá con 0. ',\n \"type\": 'text',\n \"unit\": \"\",\n \"validator\": (answer) => { return answer !== \"\" && isNumeric(answer)}\n },\n ]\n },\n {\n name: \"Servicios\",\n icon: iconoConsumo,\n questions: [\n {\n \"id\": 'electricConsumption',\n \"animation\": Energia,\n \"question\": \"¿Cuántos kw/h de luz se consume por mes en tu casa? \",\n \"helptext1\": \"¡Podés buscarlo en tu factura de luz! \",\n \"helptext2\": 'Si no usás electricidad, completá con 0.',\n \"type\": 'text',\n \"unit\": \"\",\n \"validator\": (answer) => { return answer !== \"\" && isNumeric(answer)}\n },\n {\n \"id\": 'gasConsumption',\n \"animation\": Energia,\n \"question\": \"¿Cuántos m3 de gas se consumen por mes en tu casa?\",\n \"helptext1\": \"¡Podés buscarlo en tu factura de gas!\",\n \"helptext2\": 'Si no usás gas, completá con 0. Si usás garrafa, contestá con 0 esta pregunta y respondé la siguiente.',\n \"type\": 'text',\n \"unit\": \"m3\",\n \"validator\": (answer) => { return answer !== \"\" && isNumeric(answer)}\n },\n {\n \"id\": 'gasCarafeConsumption',\n \"animation\": Energia,\n \"question\": \"Si usás garrafa, ¿cuántas garrafas consumen al mes en tu hogar?\",\n \"helptext1\": \"Para tu respuesta considerá que cada garrafa es de 12 kg.\",\n \"helptext2\": 'Si no usás garrafa, completá con 0. ',\n \"type\": 'text',\n \"unit\": \"\",\n \"validator\": (answer) => { return answer !== \"\" && isNumeric(answer)}\n },\n {\n \"id\": 'waterConsumption',\n \"animation\": Energia,\n \"question\": \"¿Cúantos m3 de agua se consume por mes en tu casa?\",\n \"helptext1\": \"¡Podés buscarlo en tu factura de agua!\",\n \"helptext2\": 'Si no usás agua corriente, completá con 0.',\n \"type\": 'text',\n \"unit\": \"m3\",\n \"validator\": (answer) => { return answer !== \"\" && isNumeric(answer)}\n },\n ]\n },\n {\n name: \"Sobre vos\",\n icon: iconoPersonal,\n questions: [\n {\n \"id\": 'personAge',\n \"animation\": Personal,\n \"question\": \"¿Cuántos años tenés?\",\n \"helptext1\": null,\n \"helptext2\": null,\n \"type\": 'text',\n \"validator\": (answer) => { return answer !== \"\" && isNumeric(answer)}\n },\n {\n \"id\": 'genreSelection',\n \"animation\": Personal,\n \"question\": \"¿Cuál es tu género?\",\n \"helptext1\": null,\n \"helptext2\": null,\n \"validator\": (answer) => { return genderOptions.includes(answer) },\n \"type\": 'radio',\n \"options\": genderOptions,\n \"optionsLabel\": genderOptions\n },\n {\n \"id\": 'environmentalKnowledge',\n \"animation\": Personal,\n \"question\": \"¿Cuál es tu nivel de conocimiento en temas ambientales? \",\n \"helptext1\": null,\n \"helptext2\": null,\n \"validator\": (answer) => { return optionsEnviormentalKnowledge.includes(answer) },\n \"type\": 'radio',\n \"options\": optionsEnviormentalKnowledge,\n \"optionsLabel\": optionsEnviormentalKnowledge\n },\n {\n \"id\": 'knowCarbonFootprint',\n \"animation\": Personal,\n \"question\": \"¿Alguna vez escuchaste hablar de la Huella de carbono?\",\n \"helptext1\": null,\n \"helptext2\": null,\n \"validator\": (answer) => { return yesNoOptions.includes(answer) },\n \"type\": 'radio',\n \"options\": yesNoOptions,\n \"optionsLabel\": yesNoOptions\n },\n {\n \"id\": 'calculateCarbonFootprint',\n \"animation\": Personal,\n \"question\": \"¿Alguna vez mediste tu Huella de carbono?\",\n \"helptext1\": null,\n \"helptext2\": null,\n \"validator\": (answer) => { return yesNoOptions.includes(answer) },\n \"type\": 'radio',\n \"options\": yesNoOptions,\n \"optionsLabel\": yesNoOptions\n }\n ]\n }\n]\n","import React from \"react\";\n\n\nexport class AnswerPanel extends React.Component {\n constructor(props) {\n super(props);\n\n this.handleChange = this.handleChange.bind(this);\n }\n\n render() {\n return (\n \n {this._renderWidget()}\n
\n )\n }\n\n _renderWidget() {\n throw Error(\"Subclass responsibility\")\n }\n\n // handlers\n\n handleChange() {\n throw Error(\"Subclass responsibility\")\n }\n\n cssClassName() {\n if (!this.props.answerValid) {\n return \"error\"\n }\n }\n}\n","import React from \"react\";\nimport {AnswerPanel} from \"./AnswerPanel\";\n\n\nexport class TextAnswerPanel extends AnswerPanel {\n\n _renderWidget() {\n return (\n {this.props.question.unit}
\n\n \n \n
\n \n {this.renderQuestion(this.props.question)}\n {this.renderAnswerPanel(this.props.question)}\n
\n }\n\n renderQuestion(question) {\n return (\n {question.question}
\n{question.helptext1}
\n{question.helptext2}
\n\n
\n )\n }\n\n renderQuestionAnimation() {\n return React.createElement(this.currentQuestion().animation);\n }\n\n renderStepIndicatorItems() {\n const steps = Array.from(Array(this.props.questions.length).keys());\n return steps.map(step => {\n return {this.props.sectionName}
\n\n {this.renderQuestionAnimation()}\n
\n \n {this.renderStepIndicator()}\n - \n {this.renderStepIndicatorItems()}\n
{section.name}
\n\n
\n )\n }\n}\n","import React from \"react\";\nimport {FormSection} from \"./FormSection\";\nimport {SideMenu} from \"./SideMenu\";\nimport {Feedback} from \"./Feedback\";\n\n\nexport class Form extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n currentSection: 0,\n answers: this.initializeAnswers(),\n showFeedback: false\n };\n this.handleSectionCompleted = this.handleSectionCompleted.bind(this);\n this.handleFeedbackContinue = this.handleFeedbackContinue.bind(this);\n }\n\n initializeAnswers() {\n let answers = [];\n\n this.props.sections.forEach((section) => {\n let sectionAnswers = {};\n section.questions.forEach((question) => {\n sectionAnswers[question.id] = '';\n });\n answers.push(sectionAnswers);\n });\n\n return answers;\n }\n\n // renders\n\n render() {\n return (\n \n
\n \n
\n \n
\n \n ¡Felicitaciones! Cada vez estas más cerca de conocer tu huella de\n carbono.
\n\n
\n \n
\n {`${this.props.percentage} %`}
\n\n
\n \n
\n \n
\n )\n }\n\n renderMainContent() {\n if (this.state.showFeedback) {\n return \n
\n {this.renderSideMenu()}\n {this.renderMainContent()}\n \n
\n Calculadora de huella de carbono
\n- \n {this.renderStepIndicatorItems()}\n