Skip to content

SBA Javascript 3 page website(tried completing most of it) #22

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
AnjaliG927 wants to merge 6 commits into
base: master
Choose a base branch
from
Open

SBA Javascript 3 page website(tried completing most of it) #22

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
7b2ffaf
firstpage html
AnjaliG927 Jul 9, 2020
73a1099
second page
AnjaliG927 Jul 9, 2020
c79c82f
updated
AnjaliG927 Jul 10, 2020
83fdfe1
updated
AnjaliG927 Jul 10, 2020
b058513
completed
AnjaliG927 Jul 10, 2020
f34809b
completed
AnjaliG927 Jul 10, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
104 changes: 3 additions & 101 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,107 +1,9 @@
# AD - SBA - HTML/CSS/JavaScript


* Access my site navigating to the following link https://anjalig927.github.io/sba.javascript_3-page-website/

### Description
* In this Skill-based Assessment, you will be creating a small website and you get to pick what is the website about. The main purpose of this SBA is to test your skills in implementing a clean HTML structure that follows the methodologies of visual design, and styling your site so that it is user-friendly.

* You have the entire day for this SBA. Make sure to check in with your instructor for approval of your idea. Your work will be graded based on the below technical requirements. Also, creativity always works in your favor.

* Since this is your first time creating a 3 page website, keep it simple. Keeping it simple is very important. It ensures that you can complete this project within the given time and also gives you a better idea of what can you get done in the given time if you were to do it again with more requirements.

* Once you got your idea, think in the user’s perspective when creating the website.  You like your users to have a good experience when interacting with your site. This gives you a better chance of users trusting your site and coming back for more. For this SBA, don’t worry too much about the content. There are many places you can get free content to display on your site. Concentrate more on the web site's structure and grid system.


* Some resources for free content:
* Photos: `https://www.pexels.com/search/template/`
* Text: `https://www.lipsum.com/`
* GIFs: `https://www.motionelements.com/stock-image-10116013-business-and-startup-4k`

* Useful API sites:
* https://rapidapi.com/ (Links to an external site.)
* https://any-api.com/ (Links to an external site.)
* https://github.com/toddmotto/public-apis#public-apis- (Links to an external site.)
* https://apilist.fun/

### Deliverable:
* A theme for your site that you feel comfortable with
* Complete all technical requirements for HTML, CSS, and Javascript
* Have markups of your pages
* Research for a public API that can provide you with content (Optional)
* Include a README file. The file should include technical specifications and description of your website.
* Host on GitHub, include the link to your GitHub account in the README file(optional)
* Submit the project in a ZIP file




## Technical requirements

* HTML
* Have at least 3 pages, keep the grid system consistent as much as possible
* Use at least 10 different HTML tags
* Use HTML tables
* Implement at least two uses for forms
* Dropped Down Menu
* Use web fonts
* Use different types of content in the form of text, images, videos, and GIFs
* Use regex validation

* CSS
* Inline, internal, and external styling
* Use five different CSS selectors
* Don’t use too many fonts
* Use colors that complement each other
* Use Flexbox (Optional)
* Use SASS/SCSS (Optional)
* Use animations (Optional)

* Javascript
* External scripts
* Use variables, if statements, loops, at least one form of collections, functions/call back, and events
* Use AJAX (Optional)
* Use JSON or XML (Optional)
* Use JQuery (Optional)



## How to Download

#### Part 1 - Forking the Project
* To _fork_ the project, click the `Fork` button located at the top right of the project.


#### Part 2 - Navigating to _forked_ Repository
* Navigate to your github profile to find the _newly forked repository_.
* Copy the URL of the project to the clipboard.

#### Part 3 - Cloning _forked_ repository
* Clone the repository from **your account** into the `~/dev` directory.
* if you do not have a `~/dev` directory, make one by executing the following command:
* * `mkdir ~/dev`
* navigate to the `~/dev` directory by executing the following command:
* * `cd ~/dev`
* clone the project by executing the following command:
* * `git clone https://github.com/${MYUSERNAME}/${NAMEOFPROJECT}`






## How to Submit
* This application is a 3 page website for food lovers which allow users to view healthy and exciting recipes and also create their own recipe.
* This application is developed in HTML,CSS,Bootstrap and the scripting language is Javascript.

#### Part 1 - _Pushing_ local changes to remote repository
* from a _terminal_ navigate to the root directory of the _cloned_ project.
* from the root directory of the project, execute the following commands:
* * add all changes
* * `git add .`
* * commit changes to be pushed
* * `git commit -m 'I have added changes'`
* * push changes to your repository
* * `git push -u origin master`

#### Part 2 - Submitting assignment
* from the browser, navigate to the _forked_ project from **your** github account.
* click the `Pull Requests` tab.
* select `New Pull Request`
194 changes: 194 additions & 0 deletions cake.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,194 @@
<!DOCTYPE html>
<html lang="en">

<!-- ----------------------------------------------------------------- -->
<!-- ----------------------------------------------------------------- -->
<!-- ----------------------------------------------------------------- -->

<head>
<!-- header begins here -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>YumTum</title>


<!-- <script type="text/javascript" src="./js/header-functions.js"></script> -->

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
crossorigin="anonymous"></script>



<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">

<link href="./css/style.css" rel="stylesheet">
</head> <!-- header ends here -->

<body class="recipe" data-spy="scroll">
<!-- Navigation bar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="index.html">
<img src="./img/color-cook-cooking-delicious-259763.jpg" width="40" height="40"
class="d-inline-block align-top" alt="YumTum homepage" loading="lazy">
<span id="brand-font"> YumTum</span>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="about.html">About</a> <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Browse Recipes
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="cake.html">Chocolate Cake</a>
<a class="dropdown-item" href="lemonade.html">Lemonade</a>
<a class="dropdown-item" href="createRecipe.html">Add your recipe</a>
</div>
</li>

</ul>

</div>
</nav>
<!-- navigation bar ends -->

<!-- Main content -->
<div class="container overflow-auto">
<h1 class="display-5">Chocolate Cake</h1>

<div class="info">
<div><img src=./img/photo-of-chocolate-cake-2144200.jpg alt="chocolate cake" style="float: left;">
<p>This is a rich and moist chocolate cake. It only takes a few minutes to prepare the batter. Frost
with your favorite chocolate frosting.
Donec risus dui, scelerisque sit amet accumsan auctor, porta vel magna. Donec tempus dictum magna.
Maecenas sed mollis sapien. In volutpat urna felis, et eleifend nunc lacinia ut.

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec
pretium risus ipsum, vel blandit mi blandit at. Nam sodales semper eros, vel posuere sapien
malesuada
id. Nullam convallis sem in elit vulputate luctus. Aenean dui lacus, fermentum sit amet tempor non,
sodales ullamcorper dolor. Duis faucibus lorem urna, non venenatis nisi molestie nec. Suspendisse
euismod cursus lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis leo
non
consequat imperdiet.
</p>
</div>
</div>

<div class="info">

<div id="ingredients">
<h3 style="margin-left: 20px;">Ingredients</h3>
<table class="table table-bordered">
<thead class="thead-dark">
<tr>
<th scope="col">#</th>
<th scope="col">Ingredients</th>
<th scope="col">measure</th>

</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>All purpose Flour</td>
<td>1 cup</td>


</tr>
<tr>
<th scope="row">2</th>
<td>vanila essence</td>
<td>1 tbsp</td>

</tr>
<tr>
<th scope=" row">4</th>
<td>eggs</td>
<td>3</td>

</tr>
<tr>
<th scope=" row">5</th>
<td>butter, melted</td>
<td>¼ cup</td>

</tr>
<tr>
<th scope=" row">6</th>
<td>white sugar </td>
<td>3 tbsp</td>

</tr>
</tbody>
</table>
</div>
</div>

<div class="info">


<p>
<h3>Directions:</h3>
In a medium bowl, mix together cookie crumbs, 3 tablespoons sugar, and melted butter. Press mixture
into the
bottom of a 9 inch springform pan.


In a saucepan, combine raspberries, 2 tablespoons sugar, cornstarch, and water. Bring to boil, and
continue
boiling 5 minutes, or until sauce is thick. Strain sauce through a mesh strainer to remove seeds.


Preheat oven to 325 degrees F (165 degrees C). In a metal bowl over a pan of simmering water, melt white
chocolate chips with half-and-half, stirring occasionally until smooth.


In a large bowl, mix together cream cheese and 1/2 cup sugar until smooth. Beat in eggs one at a time.
Blend
in vanilla and melted white chocolate. Pour half of batter over crust. Spoon 3 tablespoons raspberry
sauce
over batter. Pour remaining cheesecake batter into pan, and again spoon 3 tablespoons raspberry sauce
over
the top. Swirl batter with the tip of a knife to create a marbled effect.


Bake for 55 to 60 minutes, or until filling is set. Cool, cover with plastic wrap, and refrigerate for 8
hours before removing from pan. Serve with remaining raspberry sauce.
</p>
</div>

<footer>
<!-- footer of page begins here -->
<script type="text/javascript" src="./js/homepage.js"></script>
</footer> <!-- footer of page ends here -->
<!-- ====================================================== -->
<!-- ====================================================== -->
</div>
</body>
<!-- ---------------------------------------------------------------------------------- -->
<!-- ---------------------------------------------------------------------------------- -->
<!-- ---------------------------------------------------------------------------------- -->

</html>
Loading