coffeeordeath/edx
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Progress on project0

Browse Source
This commit is contained in:
ahosking 2022-11-14 19:14:28 -05:00
parent ef241688b7
commit 2b1ad5d981
6 changed files with 178 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
project0/.DS_Store vendored Normal file
View File

Binary file not shown.

14
project0/advanced.html Normal file
View File

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Advanced Search</title>
</head>
<body>
<br>
Advanced Search
<form action="https://google.com/search">
<input type="text" name="q">
<input type="submit" value="Google Search">
</form>
</body>
</html>

14
project0/image.html Normal file
View File

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Image Search</title>
</head>
<body>
<br>
Image Search
<form action="https://google.com/search">
<input type="text" name="q">
<input type="submit" value="Google Search">
</form>
</body>
</html>

34
project0/index.html Normal file
View File

@ -0,0 +1,34 @@
<!DOCTYPE html>
<link rel="stylesheet" href="search.css">
<html lang="en">
<head>
<title>Search</title>
</head>
<body>
<div class="header">
<div class="header-right">
<a href="./image.html">Image Search</a>
<a href="./advanced.html">Advanced Search</a>
</div>
</div>
<div class="mainBody">
<div class="search">
Alex was here.
<form action="https://google.com/search">
<!-- https://www.google.com/search?q=css+basics -->
<div class="search__input">
<input type="text" name="q">
</div>
<div class="search__buttons">
<input type="submit" value="Google Search">
</div>
</form>
</div>
</div>
</body>
</html>

95
project0/search.css Normal file
View File

@ -0,0 +1,95 @@
* {
margin: 0;
}
body {
display: flex;
flex-direction: column;
height: 100vh;
}
.header {
display: flex;
justify-content: space-between;
padding: 20px 30px;
align-items: center;
}
.header a {
margin-right: 20px;
text-decoration: inherit;
color: rgba(0, 0, 0, 0.87);
font-size: 15px;
}
.header a:hover {
text-decoration: underline;
}
.header-right {
display: flex;
margin-left: auto;
min-width: 13vw;
justify-content: space-between;
}
.header__right .header__apps {
margin-right: 10px;
}
/* Main Body */
.mainBody {
flex: 1;
display: flex;
margin-top: 12%;
flex-direction: column;
}
.mainBody img {
object-fit: contain;
height: 100px;
}
/* search */
.search__input {
display: flex;
align-items: center;
border: 1px solid lightgray;
height: 30px;
padding: 10px 20px;
border-radius: 999px;
width: 75vw;
margin: 0 auto;
margin-top: 40px;
max-width: 560px;
}
.search__input input {
flex: 1;
padding: 10px 20px;
border: none;
outline: none;
}
.search__input .material-icons {
color: gray;
}
.search__buttons {
margin-top: 30px;
display: flex;
justify-content: center;
}
.search__buttons button {
margin: 5px;
padding: 10px 15px;
background-color: #f8f8f8;
outline: none;
border: none;
cursor: pointer;
}

21
project0/specification.txt Normal file
View File

@ -0,0 +1,21 @@
https://cs50.harvard.edu/web/2020/projects/0/search/
Specification
Your website must meet the following requirements:
Your website should have at least three pages: one for regular Google Search (which must be called index.html), one for Google Image Search, and one for Google Advanced Search.
On the Google Search page, there should be links in the upper-right of the page to go to Image Search or Advanced Search. On each of the other two pages, there should be a link in the upper-right to go back to Google Search.
On the Google Search page, the user should be able to type in a query, click “Google Search”, and be taken to the Google search results for that page.
Like Google’s own, your search bar should be centered with rounded corners. The search button should also be centered, and should be beneath the search bar.
On the Google Image Search page, the user should be able to type in a query, click a search button, and be taken to the Google Image search results for that page.
On the Google Advanced Search page, the user should be able to provide input for the following four fields (taken from Google’s own advanced search options)
Find pages with… “all these words:”
Find pages with… “this exact word or phrase:”
Find pages with… “any of these words:”
Find pages with… “none of these words:”
Like Google’s own Advanced Search page, the four options should be stacked vertically, and all of the text fields should be left aligned.
Consistent with Google’s own CSS, the “Advanced Search” button should be blue with white text.
When the “Advanced Search” button is clicked, the user should be taken to the search results page for their given query.
Add an “I’m Feeling Lucky” button to the main Google Search page. Consistent with Google’s own behavior, clicking this link should take users directly to the first Google search result for the query, bypassing the normal results page.
You may encounter a redirect notice when using the “I’m Feeling Lucky” button. Not to worry! This is an expected consequence of a security feature implemented by Google.
The CSS you write should resemble Google’s own aesthetics.