Skip to content

Still working on the project. Up and down for kids a lot today. #91

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

Still working on the project. Up and down for kids a lot today. #91

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4269800
Still working on the project. Up and down for kids a lot today.
ajf412 Mar 28, 2018
7215760
Assignment complete.
ajf412 Mar 29, 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
48 changes: 48 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,48 @@
.Box__h1 {
border: none;
}

nav {
padding: 10px;
}

.Box__navDropdown{
border: 2px solid black;
padding: 15px;
width: 100px;
}

.Box__navButtons {
display: none;
flex-direction: column;
justify-content: center;
padding: 10px 0 10px 0;
margin-top: 15px;
border: 2px solid black;
width: 100px;
position:fixed;
background: white;
}
a{
padding: 5px 0 5px 15px;
}

.Box__placeholder {
padding: 0 20px 0 20px;
width: 100%;
margin: 0;
border: 2px solid black;
/*display: flex;*/
}

.Box__text{
display:flex;
}

@media(min-width: 401px){
.Box__text {
width: 100%;
justify-content: center;
position: fixed;
}
}
20 changes: 20 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,20 @@
.Section {
border: 2px solid black;

}

.Section__header {
display: flex;
align-items: center;
padding-left: 10px;
border-bottom: none;
}

@media(min-width: 401px){
.Section__info {
display: flex;
flex-direction: row;
align-self: stretch;
justify-items: stretch;
}
}
31 changes: 28 additions & 3 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,34 @@
<!DOCTYPE html>
<hml>
<html>
<head>
<title>Introduction to the DOM</title>
<link rel="stylesheet" href="./styles.css">
<link rel='stylesheet' href='./styles.css'>
<script src='./index.js' async></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class = 'Section Section__header'>
<nav class='Box Box__nav'>
<div id = 'navDropdown' class="Box__navDropdown">Dropdown</div>
<div id = 'navButtons' class='Box__navButtons'>
<a href='https://lambdaschool.com/'>Lambda</a>
<a href='http://www.google.com'>Google</a>
<a href='https://developer.mozilla.org/en-US/'>MDN</a>
</div>
</nav>
<div class = 'Box Box__text'>
<h1 class = 'Box Box__h1'>Header</h1>
</div>
</div>
<section class = 'Section Section__info'>
<div class = 'Box Box__placeholder'>
<h2 class='Box__h3'>Placeholder</h2>
<p class = 'Box__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 Box__placeholder'>
<h2 class='Box__h3'>Placeholder</h2>
<p class = 'Box__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>
</section>
</body>
</hml>
</html>
28 changes: 28 additions & 0 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
// ________ VARIABLES ________
const navButtons = document.getElementById('navButtons');
const navDropdown = document.getElementById('navDropdown');
let navButtonOn = true;
let cursor = 'default';

// ________ NAV DROPDOWN ________
function displayNavButtons() {
navButtonOn = !navButtonOn;
if (!navButtonOn){
navButtons.style.display = 'none';
}
else navButtons.style.display = 'flex';
}

function cursorDefault() {
document.body.style.cursor = 'default';
}

function cursorDropdown() {
document.body.style.cursor = 's-resize';
}

console.log(navButtons);

navDropdown.addEventListener('mouseover', cursorDropdown);
navDropdown.addEventListener('mouseout', cursorDefault);
navDropdown.addEventListener('click', displayNavButtons);
10 changes: 9 additions & 1 deletion styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,16 @@
@import './components/Section/Section.css';
@import './components/Box/Box.css';
* {
box-sizing: border-box;
}

body {
box-sizing: border-box;
min-width: 300px;
margin: 0;
display: flex;
flex-direction: column;
}

h1 {
font-size: 36px;
}