Merge pull request #78 from cse110-fa22-group29/sprint-2-homepage-integration

Sprint 2 homepage integration
This commit is contained in:
rheabhutada02 2022-11-20 14:06:32 -08:00 committed by GitHub
commit ce6b8fcfa6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 352 additions and 119 deletions

View File

@ -1,2 +1,5 @@
# cse110-fa22-group29
[Team Page Link](https://github.com/cse110-fa22-group29/cse110-fa22-group29/blob/main/admin/team.md)
[Food Journal](https://cse110-fa22-group29.github.io/cse110-fa22-group29/)

View File

@ -31,6 +31,9 @@ So far the features listed below have been completed to some degree:
- Linting (JS)
- Implemented: ction triggers on any PR, uses eslint to perform style enforcement on all JS components
- ToDo: trigger workflow only on certain PRs which relate to JS code
- Linting (HTML)
- Implemented: action triggers on any PR, uses HTMLhint to perform style enforcement on all HTML components
- Linting (CSS)
- Implemented: action triggers on any PR, uses Stylelint to perform style enforcement on all CSS components
## Planned Features and Timeline

View File

@ -0,0 +1,47 @@
# Meeting Minutes (11/07/2022)
## Team 29: Hackers1995
## Meeting Topic: First Sprint
Meeting notes for the first sprint
## Attendance
1. Rhea Bhutada
2. George Dubinin
3. Gavyn Ezell
4. Henry Feng
5. Kara Hoagland
6. Marc Reta
7. Sanjit Joseph
8. Daniel Hernandez
9. Arthur Lu
10. Isaac Otero
## Meeting Details
- When: 11/17/2022 at 11:30PM
- Where: Design & Innovation Building
## Agenda:
- ### Old/Unresolved Business
- N/A
- ### New Business
- Second sprint commences!
- Focus on design progress for the project showoff
- Cuisine vs Tag identifiers for reviews (both?)
- localStorage will hold:
- list of active IDs which is updated for very create operation. An ID uniquely identifies a review
- value, "nextId" denoting the index of the next available slot for an Id
- entries for every single review (javascript object)
- a list for every tag that denotes which Ids belong to reviews containing this tag
End2end tests will rely on specific html element names which include the following:
- "create-btn" (located on homepage and used to create a new review)
- "submit-btn" (located on form and used to post review)
- "update-btn" (located on a specific review page)
- "delete-btn" (located on a specific review page)
- "tag-add-btn" (located on the review create form)
- ### Next Meeting's Business
## Decisions Made
-
## End Time
- 11/17/2022 at 1:00PM

View File

@ -0,0 +1,36 @@
# Meeting Minutes (11/20/2022)
## Team 29: Hackers1995
## Meeting Topic: Second Sprint Meeting 3
<what are we working on today>
## Attendance
1. Rhea Bhutada
2. George Dubinin
3. Gavyn Ezell
4. Henry Feng
5. Kara Hoagland
6. Marc Reta
7. Sanjit Joseph
8. Daniel Hernandez
9. Arthur Lu
10. Isaac Otero
## Meeting Details
- When: 11/20/2022 at 1:00PM
- Where: CSE Building Second Floor
## Agenda:
- ### Old/Unresolved Business
- N/A
- ### New Business
- Planning for the Agile Steam Status Video
- *Present the status of your software*
- *Description of current challenges to development*
- *Preview of the next sprint and what to look forward to*
- ### Next Meeting's Business
## Decisions Made
-
## End Time
- 11/20/2022 at 3:00PM

View File

@ -14,37 +14,51 @@
<!-- Main Stylesheets & Scripts -->
<!-- Temporarily commented out reset.css due to furthur discussion needed on the values of the default config-->
<!-- <link rel="stylesheet" href="/static/reset.css" /> -->
<link rel="stylesheet" href="./static/ReviewCard.css" />
<link rel="stylesheet" href="./static/CreatePage.css" />
<link rel="icon" href="./assets/images/icons/favicon.ico">
<script src="./assets/scripts/CreatePage.js" type="module"></script>
</head>
<body>
<input type="button" value="Home" id="home-btn" onclick="window.location.assign('./index.html')">
<form id="new-food-entry">
<fieldset>
<legend>Pic:</legend>
<label for="mealImage">
Source:
<input type="text" id="mealImg" name="mealImg">
</label>
<label for="image-alt">
Alt Text:
<input type="text" id="imgAlt" name="imgAlt">
</label>
</fieldset>
<fieldset>
<legend> Meal: </legend>
<label for="Meal: ">Meal:
<input type="text" id="mealName" name="mealName" required>
</label>
<label for="comments">Comments:
<br>
<textarea name="comments" id="comments"></textarea>
</label>
</fieldset>
<div class ="Top-Bar">
<img src ="./assets/images/icons/Logo.png" alt="logo" />
<h1> Food Journal </h1>
<!--
<form id="form">
<input type='search' id="seaching" name="searchBar" placeholder="Search journal...">
<button class="click" type="search">
Search
</button>
</form>
--->
</div>
<div class="journal-form">
<h1>New Entry </h1>
<form id="new-food-entry">
<fieldset>
<legend>Pic:</legend>
<label for="mealImage">
Source:
<input type="text" id="mealImg" name="mealImg">
</label>
<label for="image-alt">
Alt Text:
<input type="text" id="imgAlt" name="imgAlt">
</label>
</fieldset>
<fieldset>
<legend> Meal: </legend>
<label for="Meal: ">Meal:
<input type="text" id="mealName" name="mealName" required>
</label>
<label for="comments">Comments:
<br>
<textarea name="comments" id="comments"></textarea>
</label>
</fieldset>
<fieldset class="rating">
<legend> Rating: </legend>
<input type="radio" id="s5" name="rating" value="5"/> <label for="s5" id="s5-select"> 5 stars </label>
@ -54,24 +68,25 @@
<input type="radio" id="s1" name="rating" value="1"/> <label for="s1" id="s1-select"> 1 star </label>
</fieldset>
<fieldset>
<legend>Other Info:</legend>
<label for="restaurant">
Restaurant:
<input type="text" id="restaurant" name="restaurant" required>
</label>
<label for="tag-form">
Tags:
<input type="text" id="tag-form" name="tag-form">
<div class='tag-container' id="tag-container-form">
<fieldset>
<legend>Other Info:</legend>
<label for="restaurant">
Restaurant:
<input type="text" id="restaurant" name="restaurant" required>
</label>
<label for="tag-form">
Tags:
<input type="text" id="tag-form" name="tag-form">
<div class='tag-container' id="tag-container-form">
</div>
<button type="button" id="tag-add-btn">Add Tag</button>
</label>
</fieldset>
<button type="submit" id="save-btn" value="Submit">Save Review</button>
</form>
</fieldset>
<button type="submit" id="save-btn" value="Submit">Save Review</button>
</form>
</div>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

View File

@ -18,12 +18,12 @@ function init() {
* @param {Array<Object>} reviews An array of reviews
*/
function addReviewsToDocument(reviews) {
let mainEl = document.querySelector("main");
let box = document.getElementById("review-container");
reviews.forEach(review => {
let newReview = document.createElement("review-card");
newReview.data = review;
//TODO: want to append it to whatever the box is in layout
mainEl.append(newReview);
box.append(newReview);
});
}

View File

@ -14,14 +14,39 @@
<!-- Main Stylesheets & Scripts -->
<!-- Temporarily commented out reset.css due to furthur discussion needed on the values of the default config-->
<!-- <link rel="stylesheet" href="/static/reset.css" /> -->
<link rel="stylesheet" href="./static/ReviewCard.css" />
<link rel="stylesheet" href="./static/homepage.css" />
<script src="assets/scripts/main.js" type="module"></script>
</head>
<body>
<div class ="Top-Bar">
<img src ="./assets/images/icons/Logo.png" alt="logo" />
<h1 style="font-family:'Lucida Sans'"> Food Journal </h1>
<form id="form">
<input type='search' id="seaching" name="searchBar" placeholder="Search journal...">
<button class="click" type="search">
Search
</button>
</form>
<!--
<form id="form">
<input type='search' id="seaching" name="searchBar" placeholder="Search journal...">
<button class="click" type="search">
Search
</button>
</form>
--->
<main>
<!-- Add Food Entries Here -->
<div class="Review-boxes">
<h2> Recent Reviews </h2>
<a href='./CreatePage.html'><img src ="./assets/images/icons/Grouppink.png" alt="CREATE" /></a>
</div>
<div class="Filter-box">
</div>
<div class="review-container" id="review-container"></div>
</main>
<button type="button" id="create-btn"><a href='./CreatePage.html'></a>CREATE</button>
<!--<button type="button" id="create-btn"><a href='./CreatePage.html'></a>CREATE</button>-->
</body>
</html>

View File

@ -1,83 +1,84 @@
/* CreatePage.css */
* {
font-family: sans-serif;
body{
background-color: #13323b;
}
body {
height: 100%;
width: 100%;
}
fieldset {
border: 2px solid rgb(214 214 214);
box-sizing: border-box;
display: block;
width: max-content;
}
form button {
display: block;
margin-top: 5px;
}
label[for="ingredients"] p {
margin: 0;
}
label[for="numRatings"] {
margin: 10px 0 0;
}
label[for^="rating"] {
padding-right: 10px;
}
label:not([for^="rating"]) {
display: block;
margin-bottom: 5px;
}
main {
column-gap: 10px;
display: flex;
flex-wrap: wrap;
height: auto;
max-width: 660px;
row-gap: 10px;
width: 100%;
}
.tag-container {
display: flex;
flex-flow: row wrap;
}
.tag {
background-color: grey;
border-radius: 7px;
color: white;
padding-right: 7px;
padding-left: 7px;
margin: 3px;
}
.tag::before {
display: inline-block;
content: "x";
height: 15px;
width: 15px;
margin-right: 4px;
h1 {
text-align: center;
color: white;
cursor: pointer;
}
.Top-Bar{
margin-top: -8cm;
}
.Top-Bar > img{
position: relative;
top: 7.85cm;
}
.Top-Bar > h1{
position: relative;
top: 2.2cm;
font-size: 3cm;
color: #EAA9BC
}
.Top-Bar > form{
position: relative;
left: 32cm;
}
.tag:hover::before {
color: red;
.journal-form {
font-size: 120%;
width: 50%;
display: block;
margin: auto;
color: #ccb3bb;
border: 3px solid rgb(7, 0, 0);
background-color: #b52754;
}
.danger {
background-color: rgb(254 171 171);
border-color: red;
.hidden,
.rating:not(:checked) > input { /* Hide radio circles while star rating */
display: none;
}
/* Unchecked stars */
.rating:not(:checked) > label {
/* Make stars line up sideways and not vertically */
float: right;
/* Hide label text */
width: 1em;
overflow: hidden;
white-space: nowrap;
/* Star default color and size */
font-size: 200%;
line-height: 1.2;
color: #b3b3cc;
}
.rating > label:active {
position: relative;
}
.rating:not(:checked) > label::before {
content: "★";
}
/* Checked star color */
.rating > input:checked ~ label {
color: #ffbf00;
}
.rating:not(:checked) > label:hover,
.rating:not(:checked) > label:hover ~ label {
color: orangered;
}
.rating > input:checked + label:hover,
.rating > input:checked ~ label:hover,
.rating > input:checked + label:hover ~ label,
.rating > input:checked ~ label:hover ~ label,
.rating > label:hover ~ input:checked ~ label {
color: orangered;
}

View File

@ -0,0 +1,65 @@
/* homepage.css */
/* Color*/
body{
background-color: #13323b;
}
.Top-Bar{
margin-top: -8cm;
}
.Top-Bar > img{
position: relative;
top: 7.5cm;
}
.Top-Bar > h1{
position: relative;
left: 10.5cm;
top: 2.2cm;
font-size: 3cm;
color: #EAA9BC;
}
.Top-Bar > form{
position: relative;
left: 32cm;
}
.Review-boxes {
position: relative;
}
.Review-boxes > h2 {
position: relative;
left: 10cm;
font-size: 1.5cm;
color: #EAA9BC;
}
.Review-boxes > input {
position: relative;
left: 20.34cm;
top: -3.5cm;
}
.Filter-box{
width:300px;
height:700px;
background: #8D4E62;
position: relative;
left: 29.5cm;
top: -5.5cm;
}
.review-container{
display: flex;
position: relative;
top: -22cm;
left: 5cm;
max-width: 900px;
flex-wrap: wrap;
}
.review-container > div {
background-color: #f1f1f1;
width: 200px;
height: 200px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}

View File

@ -0,0 +1,19 @@
# Use Stylelint for CSS linting framework
- Status: accept
- Deciders: Arthur Lu, Marc Reta
- Date: 11 / 14 / 22
## Decision Drivers
- Need linting to work with multiple style standards
- Need linting to be fast and informative
## Considered Options
- Stylelint
- Prettier
## Decision Outcome
Chosen Option: Stylelint for its easy installation and unopinionated.

View File

@ -0,0 +1,19 @@
# Use HTMLhint for HTML linting framework
- Status: accept
- Deciders: Arthur Lu, Marc Reta
- Date: 11 / 14 / 22
## Decision Drivers
- Need linting to work with multiple style standards
- Need linting to be fast and informative
## Considered Options
- HTMLhint
- HTML-validate
## Decision Outcome
Chosen Option: HTMLhint for its low configuration complexity.