Skip to content

finished SBA #13

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
nick-devos wants to merge 9 commits into
base: master
Choose a base branch
from
Open

finished SBA #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
4911937
first commit
nick-devos Jul 9, 2020
1c00040
progress
nick-devos Jul 9, 2020
8aeb4f6
progress
nick-devos Jul 9, 2020
b3da3db
progress
nick-devos Jul 9, 2020
7f0f7bd
progress
nick-devos Jul 9, 2020
a3d37e8
progress
nick-devos Jul 10, 2020
5c5c96f
progress
nick-devos Jul 10, 2020
42e2d87
progress
nick-devos Jul 10, 2020
9ed634f
added link in README.md
nick-devos 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
127 changes: 42 additions & 85 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,107 +1,64 @@
# AD - SBA - HTML/CSS/JavaScript


Please use this link to access my website: https://nick-devos.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.
* This 3-page website was designed to fulfill the requirements of the Per Scholas HTML, CSS, & Javascript SBA.

### Resources used
* Bootstrap: `https://getbootstrap.com/`
* Google fonts: `https://fonts.google.com/`
* Photos: `https://www.gamestop.com/`, `https://www.reddit.com/r/cyberpunkgame/comments/9d3cv6/cyberpunk_2077_wallpaper_for_pc/`, `'https://cdn.wccftech.com/wp-content/uploads/2019/06/cyberpunk-2077-keyart.jpg'`

* 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.
### Page 1
#### Home - Landing Page
* Form for sign-in
* Nice .gif background

* 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.
### Page 2
#### Product Selection Page
* Bootstrap cards used for each product
* Each card contains an image, button for adding to cart, and price
* HTML table at bottom of page uses iterates through an array with JS to populate table
* Short animations on buttons on hover

* 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.
### Page 3
#### Checkout Page
* Second form area for detailed check-out
* Multiple input areas for things like names, address, and payment options
* Payment type uses a dropdown menu as required


* 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
- [x] Have at least 3 pages, keep the grid system consistent as much as possible
- [x] Use at least 10 different HTML tags
- [x] Use HTML tables
- [x] Implement at least two uses for forms
- [x] Dropped Down Menu
- [x] Use web fonts
- [x] Use different types of content in the form of text, images, videos, and GIFs
- [x] 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)
- [x] Inline, internal, and external styling
- [x] Use five different CSS selectors
- [x] Don’t use too many fonts
- [x] Use colors that complement each other
- [ ] Use Flexbox (Optional)
- [ ] Use SASS/SCSS (Optional)
- [x] 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

#### 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`
- [x] External scripts
- [x] 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)
187 changes: 187 additions & 0 deletions checkout.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,187 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Checkout - SBA</title>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link href="./css/style.css" rel="stylesheet">
<script type="text/javascript" src="./js/utils.js"></script>
<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>

</head>



<body id="page3">
<header>
<!----------------- BEGIN NAV ----------------->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark" style="font-family: 'Lato', sans-serif;">
<a class="navbar-brand" style="font-weight: 700;" href="#">Nick DeVos</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">
<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="products.html">Products</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="checkout.html">Checkout</a>
</li>
</ul>
</div>
</nav>
<!----------------- END NAV ----------------->
</header>

<main id="cart-form">
<div class="row">
<div class="col-md-8 order-md-1 mx-auto">
<h4 class="mb-3">Billing address</h4>
<form class="needs-validation" novalidate>
<div class="row">
<div class="col-md-6 mb-3">
<label for="firstName">First name</label>
<input type="text" class="form-control" id="firstName" placeholder="" value="" required>
<div class="invalid-feedback">
Valid first name is required.
</div>
</div>
<div class="col-md-6 mb-3">
<label for="lastName">Last name</label>
<input type="text" class="form-control" id="lastName" placeholder="" value="" required>
<div class="invalid-feedback">
Valid last name is required.
</div>
</div>
</div>

<div class="mb-3">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" onblur="validateEmail()" placeholder="you@example.com" required>
<div class="invalid-feedback">
Please enter a valid email address for shipping updates.
</div>
</div>

<div class="mb-3">
<label for="address">Address</label>
<input type="text" class="form-control" id="address" placeholder="1234 Main St" required>
<div class="invalid-feedback">
Please enter your shipping address.
</div>
</div>

<div class="mb-3">
<label for="address2">Address 2 <span class="text-muted">(Optional)</span></label>
<input type="text" class="form-control" id="address2" placeholder="Apartment or suite">
</div>

<div class="row">
<div class="col-md-5 mb-3">
<label for="country">Country</label>
<input type="text" class="form-control" id="zip" placeholder="United States" required>
<div class="invalid-feedback">
Please select a valid country.
</div>
</div>
<div class="col-md-4 mb-3">
<label for="state">State</label>
<input type="text" class="form-control" id="zip" placeholder="NC" required>
<div class="invalid-feedback">
Please provide a valid state.
</div>
</div>
<div class="col-md-3 mb-3">
<label for="zip">Zip</label>
<input type="text" class="form-control" id="zip" placeholder="" required>
<div class="invalid-feedback">
Zip code required.
</div>
</div>
</div>
<hr class="mb-4">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="same-address">
<label class="custom-control-label" for="same-address">Shipping address is the same as my billing address</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="save-info">
<label class="custom-control-label" for="save-info">Save this information for next time</label>
</div>
<hr class="mb-4">

<h4 class="mb-3">Payment</h4>

<div class="d-block my-3">
<label for="payment">Payment</label>
<select class="custom-select d-block w-100" id="payment" required>
<option value="">Choose...</option>
<option>Credit Card</option>
<option>Debit Card</option>
<option>PayPal</option>
</select>
</div>
<div class="row">
<div class="col-md-6 mb-3">
<label for="cc-name">Name on card</label>
<input type="text" class="form-control" id="cc-name" placeholder="" required>
<small class="text-muted">Full name as displayed on card</small>
<div class="invalid-feedback">
Name on card is required
</div>
</div>
<div class="col-md-6 mb-3">
<label for="cc-number">Credit card number</label>
<input type="text" class="form-control" id="cc-number" placeholder="" required>
<div class="invalid-feedback">
Credit card number is required
</div>
</div>
</div>
<div class="row">
<div class="col-md-3 mb-3">
<label for="cc-expiration">Expiration</label>
<input type="text" class="form-control" id="cc-expiration" placeholder="" required>
<div class="invalid-feedback">
Expiration date required
</div>
</div>
<div class="col-md-3 mb-3">
<label for="cc-cvv">CVV</label>
<input type="text" class="form-control" id="cc-cvv" placeholder="" required>
<div class="invalid-feedback">
Security code required
</div>
</div>
</div>
<hr class="mb-4">
<button class="btn btn-primary btn-lg btn-block" type="submit">Continue to checkout</button>
</form>
</div>
</div>
</main>

<footer>
<!-- <script type="text/javascript" src="./js/footer-functions.js"></script> -->
<div class="foot">
Website built for educational purposes only! I do not own the images shown and do not sell anything.. please refer to the README.md for citation.
</div>
</footer>


</body>


</html>
Loading