Skip to content

Components-BEM I Kevin Tan Mathias Bakken Justin Hong #73

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

Components-BEM I Kevin Tan Mathias Bakken Justin Hong #73

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
ce1fef1
linked html and js files
JustinSHong Mar 28, 2018
5fd54ce
set up header and dropdown
JustinSHong Mar 28, 2018
1c40367
set up content block in html
JustinSHong Mar 28, 2018
0021445
Set up flex-box to Header and Content Block
Mar 28, 2018
29daf73
Added styles
Mar 28, 2018
2c4d270
set up drop down constructor and modified box css
JustinSHong Mar 28, 2018
ed98d7e
Created callback function, added show property to css
Mar 28, 2018
b2a16ea
Added dropdown prototype and activated dropdown button
Mar 28, 2018
b48e4cc
revised drop down area and styled it
JustinSHong Mar 28, 2018
cbd3fe3
added styles to drop box content
JustinSHong Mar 28, 2018
51eb444
finalized drop down content styles
JustinSHong Mar 28, 2018
fa5cb0b
refactor index.js
JustinSHong Mar 28, 2018
15a2592
added and removed some comments
JustinSHong Mar 28, 2018
8273f83
removed first childDropdown asignment
JustinSHong Mar 28, 2018
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
44 changes: 44 additions & 0 deletions components/Box/Box.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
.Box {
display: flex;
border: 2px solid black;
flex-direction: row;

}

.Box__Header {
margin-left: auto;
margin-right: auto;
}

.Box__Dropdown {
border: 2px solid black;
display: inline-block;
font-size: 18px;
}

.Box__DropdownContent {
display:none;
background-color: #f9f9f9;
position: absolute;
min-width: 100%;
margin-top: 80px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.Box__DropdownContent a {
display: block;
text-align: left;
color: black;
padding: 12px 16px;
}

.Box__DropdownContent a:hover {
background-color: #ddd;
}

/* Show the dropdown menu */
.show {
display: block;
}

4 changes: 4 additions & 0 deletions components/Section/Section.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
.Box__Section {
border: 2px solid black;
padding: 20px;
}
30 changes: 28 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,35 @@
<!DOCTYPE html>
<hml>
<html>
<head>
<title>Introduction to the DOM</title>
<link rel="stylesheet" href="./styles.css">
<script type="text/javascript" src="index.js" async></script>
</head>
<body>
<div class="Box"> <!-- Header Block -->
<button class="Box__Dropdown Box__DropdownBtn">
Dropdown
</button>
<div id="myDropdown" class="Box__DropdownContent">
<a href="#">Lambda</a>
<a href="#">Google</a>
<a href="#">MDN</a>
</div>
<h1 class="Box__Header">Header</h1>
</div>
<div class="Box"> <!-- Content Block -->
<div class="Box__Section">
<h3>Placeholder</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce risus nibh, gravida nec felis quis, facilisis facilisis lectus. Nulla ac orci pretium, condimentum orci quis, accumsan nisi. Aliquam erat volutpat. Curabitur cursus mattis libero, at viverra risus hendrerit quis. Fusce imperdiet tristique tortor non tincidunt. Mauris accumsan urna nec augue feugiat porta. Proin vitae magna in ex malesuada laoreet eget a nulla. Aliquam tristique et elit at consequat. In hac habitasse platea dictumst.
</p>
</div>
<div class="Box__Section">
<h3>Placeholder</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce risus nibh, gravida nec felis quis, facilisis facilisis lectus. Nulla ac orci pretium, condimentum orci quis, accumsan nisi. Aliquam erat volutpat. Curabitur cursus mattis libero, at viverra risus hendrerit quis. Fusce imperdiet tristique tortor non tincidunt. Mauris accumsan urna nec augue feugiat porta. Proin vitae magna in ex malesuada laoreet eget a nulla. Aliquam tristique et elit at consequat. In hac habitasse platea dictumst.
</p>
</div>
</div>
</body>
</hml>
</html>
21 changes: 21 additions & 0 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
// access dropDown button
let dropDown = document.querySelector('.Box__DropdownContent');
let dropButton = document.querySelector('.Box__DropdownBtn');
// console.log(dropDown);
// console.log(childDropdown);

// Dropdown constructor
class Dropdown {
constructor(el) {
this.element = el;
this.element.addEventListener('click', this.showContent);
}
// Dropdown prototype
showContent() {
dropDown.classList.toggle("show");
}
}
// create an Dropdown instance
childDropdown = new Dropdown(dropDown);

dropButton.addEventListener('click', childDropdown.showContent);
2 changes: 2 additions & 0 deletions styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,3 +6,5 @@ body {
min-width: 300px;
margin: 0;
}