Yingxue (corrected)

.stylelintrc.json

@@ -1,3 +1,3 @@
-{
-  "extends": "stylelint-config-standard"
+{
+  "extends": "stylelint-config-standard"
 }

PRD.md

@@ -1,38 +1,48 @@
-# School Explorer Product Requirements Document
-
-## Who is it for (users):
-
-* Parents (or students) deciding between which schools to choose
-* Educational advocates to determine where to target their efforts and resources?
-* School administrators evaluating their own school against others?
-
-## Why do they need it (users' problems and goals):
-
-There are hundreds of schools throughout the district and parents and students may not know all of their options.Likewise, it can be difficult to keep up with changes in the process of applying to schools for even the most plugged-in parents.
-
-**Parents (or students) want clear guidance about schools, to make sure that they can choose a school that's going to give their student (or themselves) the best opportunities to excel, coupled with the best alignment with their interests.**
-
-Choosing a school can be a long process. Initially, there is a lot of exploring of the space: what are my neighborhood schools? What are the schools I can apply to outside of my neighborhood.
-
-Once they have an idea of the general landscape, the may start to ask bigger questions (e.g., if I wanted to be in the catchment for school X, how much would it cost to live there?).
-
-Finally, at the point where they have an idea of what schools they should target, they have to find the criteria for and navigate the process of gaining admission to those schools.
-
-## What do we propose:
-
-**User stories:**
-* As a parent, I want to be able to share schools or lists of schools with a permalink, so that I can get input from friends, family, or other trusted members of my community.
-* As a parent, I want to be able to compare the data points about schools side-by-side, so that I can quickly see how they compare against each other along available metrics.
-* As a student, I want to see the distance of a school from my home, so that I can factor travel time in to my evaluation
-* As a parent new to school research, I want a plain-language step-by-step wizard for narrowing down schools, so that I can be guided through a process that may have unfamiliar language along a number of dimensions that I'm not yet aware of.
-
-**Features:**
-* A map that shows the locations and types of schools
-* A list that show some high-level information about each school, and links to things like teacher reviews, news and media, or social media
-* Widgets that allow for sorting the school list
-* Widgets that allow for filtering which schools are displayed
-* Able to select schools in the list to highlight
-* Clicking on a school on the map or in the list highlights the corresponding school in the list or on the map.
-* Map shows school catchment areas for selected schools
-* **(stretch)** Hilighting a school adds to schools compare (demographics, scores, college admission rates, pipeline schools (i.e., where do kids end up next), etc.)
-* **(stretch)** A wizard interface that uses plain language to present each of the school search options.
+# School Explorer Product Requirements Document
+
+## Who is it for (users):
+
+* Parents (or students) deciding between which schools to choose
+* Educational advocates to determine where to target their efforts and resources?
+* School administrators evaluating their own school against others?
+
+## Why do they need it (users' problems and goals):
+
+There are hundreds of schools throughout the district and parents and students may not know all of their options.Likewise, it can be difficult to keep up with changes in the process of applying to schools for even the most plugged-in parents.
+
+**Parents (or students) want clear guidance about schools, to make sure that they can choose a school that's going to give their student (or themselves) the best opportunities to excel, coupled with the best alignment with their interests.**
+
+Choosing a school can be a long process. Initially, there is a lot of exploring of the space: what are my neighborhood schools? What are the schools I can apply to outside of my neighborhood.选择学校可能是一个漫长的过程。 最初，对该空间进行了很多探索：我附近的学校有哪些？ 我可以申请我所在社区以外的哪些学校。
+
+Once they have an idea of the general landscape, the may start to ask bigger questions (e.g., if I wanted to be in the catchment for school X, how much would it cost to live there?).一旦他们了解了总体情况，他们可能会开始提出更大的问题（例如，如果我想住在 X 学校的学区内，住在那里要花多少钱？）。
+
+Finally, at the point where they have an idea of what schools they should target, they have to find the criteria for and navigate the process of gaining admission to those schools.最后，当他们知道他们应该瞄准哪些学校时，他们必须找到这些学校的录取标准并引导这些学校的录取过程。
+
+## What do we propose:
+
+**User stories:**
+* As a parent, I want to be able to share schools or lists of schools with a permalink, so that I can get input from friends, family, or other trusted members of my community.
+* As a parent, I want to be able to compare the data points about schools side-by-side, so that I can quickly see how they compare against each other along available metrics.
+* As a student, I want to see the distance of a school from my home, so that I can factor travel time in to my evaluation
+* As a parent new to school research, I want a plain-language step-by-step wizard for narrowing down schools, so that I can be guided through a process that may have unfamiliar language along a number of dimensions that I'm not yet aware of.
+
+**Features:**
+* A map that shows the locations and types of schools
+* A list that show some high-level information about each school, and links to things like teacher reviews, news and media, or social media
+* Widgets that allow for sorting the school list
+* Widgets that allow for filtering which schools are displayed
+* Able to select schools in the list to highlight
+* Clicking on a school on the map or in the list highlights the corresponding school in the list or on the map.
+* Map shows school catchment areas for selected schools
+* **(stretch)** Hilighting a school adds to schools compare (demographics, scores, college admission rates, pipeline schools (i.e., where do kids end up next), etc.)
+* **(stretch)** A wizard interface that uses plain language to present each of the school search options.
+
+显示学校位置和类型的地图
+* 显示有关每所学校的一些高级信息的列表，以及指向教师评论、新闻和媒体或社交媒体等内容的链接
+* 允许对学校列表进行排序的小部件
+允许过滤显示哪些学校的小部件
+* 可以选择列表中的学校来突出显示
+* 单击地图或列表中的学校会突出显示列表或地图中的相应学校。
+* 地图显示选定学校的学校集水区
+* **（伸展）** 突出学校会增加学校比较（人口统计数据、分数、大学录取率、备选学校（即孩子们接下来会去哪里）等）
+* **（拉伸）** 一个向导界面，使用简单的语言来呈现每个学校搜索选项。

TASKS.md

@@ -1,19 +1,19 @@
-- [ ] Create an _index.html_ with a basic HTML page structure
-- [ ] Create an empty CSS file for the project
-- [ ] Create an empty JavaScrip file for the project
-- [ ] Link to the empty CSS file from the bottom of the `head` of your HTML file
-- [ ] Link to the empty JavaScript file from the bottom of the `body` of your HTML file
-- [ ] Add a level-1 heading (`h1`) to the body with the app title, just so there's something to see on the page
+- [*] Create an _index.html_ with a basic HTML page structure
+- [*] Create an empty CSS file for the project
+- [*] Create an empty JavaScrip file for the project
+- [*] Link to the empty CSS file from the bottom of the `head` of your HTML file
+- [*] Link to the empty JavaScript file from the bottom of the `body` of your HTML file
+- [*] Add a level-1 heading (`h1`) to the body with the app title, just so there's something to see on the page
 
 Check the app in the browser.
 
-- [ ] Add a Leaflet map for displaying the list of schools to the page
+- [*] Add a Leaflet map for displaying the list of schools to the page
   * **Tip:** Usually when I'm starting with a new leaflet map, I just Google "leaflet quickstart" and copy a few things from that page. Other times I may use a CDN like 
   * **Recommendation:** Give your map a meaningful ID -- something like `school-map`, and then name the corresponding JavaScript variable something similar, e.g. `schoolMap`.
-- [ ] Import the data from _site/data/schools.js_ into your JavaScript file.
-- [ ] Create a function called `makeSchoolFeature` to transform one of the school elements into a GeoJSON-like feature. **This function should be made available globally (on the window object)**.
-- [ ] Use the function to display all the `schools` data on the map.
-- [ ] Create a function to show an array of schools on the map.
+- [*] Import the data from _site/data/schools.js_ into your JavaScript file.
+- [*] Create a function called `makeSchoolFeature` to transform one of the school elements into a GeoJSON-like feature. **This function should be made available globally (on the window object)**.
+- [*] Use the function to display all the `schools` data on the map.
+- [*] Create a function to show an array of schools on the map.
 
 ----------
 

__tests__/test-folder-structure.js

@@ -1,14 +1,14 @@
-/* globals describe it expect */
-import { fileURLToPath } from 'url';
-import { dirname } from 'path';
-import './jest-extensions';
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
-
-describe('The site folder', () => {
-  it ('should contain an index.html file', async () => {
-    const siteDir = __dirname + '/../site/';
-    await expect(siteDir).toContainFile('index.html');
-  });
-});
+/* globals describe it expect */
+import { fileURLToPath } from 'url';
+import { dirname } from 'path';
+import './jest-extensions';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+describe('The site folder', () => {
+  it ('should contain an index.html file', async () => {
+    const siteDir = __dirname + '/../site/';
+    await expect(siteDir).toContainFile('index.html');
+  });
+});

site/css/styles.css

@@ -0,0 +1,31 @@
+body {
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+  }
+
+  h1 {
+    padding: 1rem;
+  }
+
+  #school-map { height: 100%; }
+
+  .content-container {
+    display: flex;
+    flex-direction: row-reverse;
+    overflow: hidden;
+    height: 100%;
+  }
+
+  .map-container {
+    width: 60%;
+  }
+
+  .list-container {
+    width: 40%;
+    overflow-y: scroll;
+    padding: 1rem;
+    padding-top: 0;
+  }

site/index.html

@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+
+<html>
+    <head>
+        <title> School Explorer </title>
+
+        <!-- leaflet's default style-->
+        <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
+        integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ=="
+        crossorigin=""/>
+
+        <!-- My CSS files-->
+        <link href="css/styles.css" rel="stylesheet" type="text/css"/>
+
+    </head>
+
+    <body>
+        <div>
+            <h1 style = "
+            background-color: blanchedalmond;
+            border: 1px solid blanchedalmond;
+            padding: 16px;
+            ">Schools in Philadelphia</h1>
+        </div>
+
+        <div class="content-container">
+            <div class="map-container">
+                <div id="school-map"></div>
+            </div>
+
+            <dive class="list-container">
+                <label><input type="checkbox" class="grade-checkbox" value="Grade K"> Grade K </label>
+                <label><input type="checkbox" class="grade-checkbox" value="Grade 1"> Grade 1 </label>
+                <label><input type="checkbox" class="grade-checkbox" value="Grade 2"> Grade 2 </label>
+                <label><input type="checkbox" class="grade-checkbox" value="Grade 3"> Grade 3 </label>
+                <label><input type="checkbox" class="grade-checkbox" value="Grade 4"> Grade 4 </label>
+                <label><input type="checkbox" class="grade-checkbox" value="Grade 5"> Grade 5 </label>
+                <label><input type="checkbox" class="grade-checkbox" value="Grade 6"> Grade 6 </label>
+                <label><input type="checkbox" class="grade-checkbox" value="Grade 7"> Grade 7 </label>
+                <label><input type="checkbox" class="grade-checkbox" value="Grade 8"> Grade 8 </label>
+                <label><input type="checkbox" class="grade-checkbox" value="Grade 9"> Grade 9 </label>
+                <label><input type="checkbox" class="grade-checkbox" value="Grade 10"> Grade 10 </label>
+                <label><input type="checkbox" class="grade-checkbox" value="Grade 11"> Grade 11 </label>
+                <label><input type="checkbox" class="grade-checkbox" value="Grade 12"> Grade 12 </label>
+
+                <input type="text" id="school-name-input" placeholder="Enter school name...">
+
+                <ul id="school-list"></ul>
+            </div>
+        </div>
+
+        <!-- Leaflet JavaScript-->
+        <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
+        integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ=="
+        crossorigin=""></script>
+
+        <!-- My project JS modules-->
+        <script type="module" src="js/main.js"></script>
+
+    </body>
+</html>