Inside the Walls: Community Reporting Tool for Renters (Oindriza Reza Nodi)

README.md

@@ -1 +1,46 @@
-Add a readme for your engagement tool here. Include content overview, data citations, and any relevant technical details.
+Inside the Walls
+
+Inside the Walls is a community-driven web application designed to surface renters’ lived experiences inside residential spaces. The platform allows users to submit, view, and share qualitative and quantitative reports about rental addresses across Philadelphia, helping prospective renters make more informed housing decisions based on real experiences rather than marketing claims alone.
+
+This application is publicly accessible at https://oindriza.github.io/engagement-project-Inside-the-Walls/.
+
+
+Motivation
+
+Rental housing decisions are often made with limited information. Public listings typically emphasize price, square footage, and amenities, while omitting critical aspects of daily living such as maintenance quality, safety concerns, environmental conditions, landlord responsiveness, or general livability.
+
+For renters, particularly students, low-income residents, and individuals relocating to unfamiliar neighborhoods, this information gap can lead to costly and stressful outcomes. Inside the Walls was created to address this gap by offering a transparent, community-generated space where renters can document and share their experiences inside specific housing locations.
+
+The goal of this project is not to rank or police housing, but to center lived experience and create a lightweight, accessible mechanism for collective knowledge-sharing.
+
+
+What the App Does
+
+Inside the Walls allows users to:
+
+a) Search and interact with locations across Philadelphia
+b) Submit reports for specific addresses, including:
+- Personal comments describing their experience
+- A rating reflecting overall livability
+- View previously submitted reports left by other users at the same or nearby addresses
+- Evaluate whether a location aligns with their needs before deciding to move
+
+Each report contributes to a growing, shared archive of renter experiences, enabling future users to assess patterns rather than relying on isolated anecdotes.
+
+
+Intended Use
+
+This application is intended to support:
+- Renters evaluating potential housing
+- Students and first-time renters unfamiliar with local neighborhoods
+- Individuals seeking peer-generated insights into housing conditions
+- Community members interested in transparent, experience-based housing information
+
+The platform emphasizes participation and accessibility, allowing anyone to both contribute and learn from others’ submissions.
+
+Technical Overview
+- Frontend: Vanilla JavaScript (ES Modules), HTML5, CSS3
+- Data Handling: JavaScript-based form submission and dynamic rendering
+- Styling: Custom CSS with modern syntax and consistent naming conventions
+- Code Quality: Enforced via ESLint (Google Style Guide) and Stylelint (Standard Config)
+- All JavaScript and CSS files are linted to ensure readability, consistency, and maintainability.

css/style.css

@@ -0,0 +1,190 @@
+/* GLOBAL RESET */
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  height: 100%;
+  margin: 0;
+  overflow: hidden; /* no outer scroll */
+  font-family: Arial, sans-serif;
+  background: #f7f7f7;
+}
+
+/* MAIN LAYOUT */
+
+main.layout {
+  display: grid;
+  grid-template-columns: 1.2fr 1fr;
+  height: 100vh;
+  width: 100vw;
+}
+
+/* MAP PANEL */
+
+#map-panel {
+  position: relative;
+  padding: 0;
+}
+
+#map {
+  height: 100%;
+  width: 100%;
+}
+
+/* Title sits ON the map */
+.map-title {
+  position: absolute;
+  top: 14px;
+  left: 52px; /* beside Leaflet zoom buttons */
+  z-index: 1000;
+
+  font-weight: 800;
+  font-size: 1.4rem;
+  letter-spacing: 0.3px;
+
+  background: white;
+  padding: 8px 14px;
+  border-radius: 6px;
+
+  box-shadow: 0 2px 6px rgb(0 0 0 / 25%);
+}
+
+/* Floating instruction card */
+.map-instructions {
+  position: absolute;
+  bottom: 16px;
+  left: 16px;
+  z-index: 1000;
+
+  max-width: 260px;
+
+  background: white;
+  padding: 10px 12px;
+  border-radius: 6px;
+
+  font-size: 0.85rem;
+  line-height: 1.35;
+  color: #333;
+
+  box-shadow: 0 2px 6px rgb(0 0 0 / 25%);
+}
+
+/* SIDE PANEL (ONLY SCROLL AREA) */
+
+.side-panel {
+  padding: 1rem;
+  overflow-y: auto; /* single scrollbar */
+  background: #f7f7f7;
+}
+
+/* FORM SECTIONS */
+
+section {
+  background: white;
+  padding: 1rem;
+  margin-bottom: 1.25rem;
+  border-radius: 6px;
+  box-shadow: 0 1px 3px rgb(0 0 0 / 5%);
+}
+
+label {
+  font-weight: 600;
+  margin-bottom: 0.25rem;
+  display: block;
+}
+
+input,
+select,
+textarea,
+button {
+  width: 100%;
+  padding: 0.55rem;
+  margin-bottom: 0.75rem;
+  font-size: 0.95rem;
+}
+
+textarea {
+  resize: vertical;
+  min-height: 80px;
+}
+
+/* BUTTONS */
+
+button {
+  background: #000;          /* black primary buttons */
+  color: #fff;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+
+  font-weight: 600;
+  letter-spacing: 0.2px;
+
+  transition: background 0.15s ease;
+}
+
+button:hover {
+  background: #111;
+}
+
+/* Secondary (Clear Selection) */
+.secondary-btn {
+  background: #e0e0e0;
+  color: #333;
+  font-weight: 500;
+}
+
+.secondary-btn:hover {
+  background: #d5d5d5;
+}
+
+/* STAR RATING */
+
+.stars {
+  font-size: 0.9rem;
+  margin-bottom: 0.75rem;
+}
+
+.stars input {
+  margin-right: 6px;
+}
+
+/* DISCLAIMER / CONFIRMATION */
+
+.disclaimer {
+  font-size: 0.85rem;
+  color: #666;
+  margin-top: 0.5rem;
+}
+
+/* LEAFLET POPUP → REPORT CARD STYLE */
+
+.leaflet-popup-content {
+  margin: 8px;
+  font-size: 0.9rem;
+}
+
+.leaflet-popup-content-wrapper {
+  border-radius: 6px;
+  box-shadow: 0 2px 8px rgb(0 0 0 / 25%);
+}
+
+.leaflet-popup-tip {
+  background: white;
+}
+
+.report-entry {
+  margin-bottom: 6px;
+}
+
+/* BLACK LOCATOR MARKER */
+
+.black-marker {
+  color: black;
+  font-size: 16px;
+  line-height: 16px;
+  text-align: center;
+}