Skip to content

Jonathan Wells - Bootcamp Solutions #93

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

Jonathan Wells - Bootcamp Solutions #93

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
d0381c4
completed 1.1 HTML
Jonbonbroski Jul 8, 2022
f3544d5
completed Week 1.2 CSS Assessments
Jonbonbroski Jul 8, 2022
1412588
completed 1.3 JavaScript Assessments
Jonbonbroski Jul 8, 2022
139f6d2
complete 2.1 CSS Grid Assessments
Jonbonbroski Jul 11, 2022
6e92456
Completed Flexbox Assessments
Jonbonbroski Jul 11, 2022
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
12 changes: 12 additions & 0 deletions Week 1.1 - HTML/1. Build a Form/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,5 +9,17 @@

<!-- Add your code here -->

<form action="/login" method="post">
<div>
<label for="email">Email</label>
<input type="email" name="email" required>
</div>
<div>
<label for="password">Password</label>
<input type="password" name="password" required>
</div>
<input type="submit" value="Log In">
</form>

</body>
</html>
10 changes: 10 additions & 0 deletions Week 1.1 - HTML/2. Create a Responsive Image - Resolution/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,16 @@
<body>

<!-- Add your code here -->
<picture>
<source media="(min-width:1800px)" srcset="https://via.placeholder.com/2000x900" />
<source media="(min-width:1440px)" srcset="https://via.placeholder.com/1600x720" />
<source media="(min-width:1024px)" srcset="https://via.placeholder.com/1200x540" />
<source media="(min-width:640px)" srcset="https://via.placeholder.com/800x360" />
<img src="https://via.placeholder.com/400x180"
alt="gray box that shows height and width"
height="180"
width="400"/>
</picture>

</body>
</html>
8 changes: 8 additions & 0 deletions Week 1.1 - HTML/3. Create a Reponsive Image - Aspect Ratio/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,14 @@
<body>

<!-- Add your code here -->
<picture>
<source media="(min-width:1024px)" srcset="https://via.placeholder.com/1600x720" />
<source media="(min-width:640px)" srcset="https://via.placeholder.com/1200x900" />
<img src="https://via.placeholder.com/540x800"
alt="gray box that shows an image's height and width"
height="540"
width="800"/>
</picture>

</body>
</html>
46 changes: 46 additions & 0 deletions Week 1.1 - HTML/4. Mock Up a Design/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,55 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mock Up a Design</title>
</head>

</style>




<body>

<!-- Add your code here -->
<nav></nav>

<div class="container">
<div>

</div>
<div class="container-head">
<div class="tab-title">
<h3>Phase 4:</h3>
</div>
<h1>Destination Thrive</h1>
</div>
<div class="container-main">
<div>
<h2>Objective: Creat omni-channel synergy</h3>
</div>
<div class="container-section">
<p>

</p>
</div>
<hr>
<div class="container-section">
<div>
<h4>Key Focus:</h4>
<ul>
<li>a</li>
<li>a</li>
<li>a</li>
</ul>
</div>
<div>
<h4>Time <span>{-}</span></h4>
<p></p>
</div>
</div>
</div>


</div>

</body>
</html>
2 changes: 1 addition & 1 deletion Week 1.2 - CSS/1. Selectors - Attributes/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@

<style>
/* Update the following line of CSS to only style the inputs of type `text` */
* { border: 2px solid rebeccapurple; }
input[type="text"] { border: 2px solid rebeccapurple; }
</style>

<input type="text" />
Expand Down
2 changes: 1 addition & 1 deletion Week 1.2 - CSS/2. Selectors - Children/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@

<style>
/* Update the following line of CSS to only style the immediate `.item` children of `.container` */
.container .item { border: 2px solid rebeccapurple; }
.container > .item { border: 2px solid rebeccapurple; }
</style>

<ul class="container">
Expand Down
2 changes: 1 addition & 1 deletion Week 1.2 - CSS/3. Selectors - Siblings/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@

<style>
/* Update the following line of CSS to only style `<p>` that follow an `<h2>` */
p {
h2 + p {
font-size: 22px;
line-height: 1.5;
color: rebeccapurple;
Expand Down
25 changes: 21 additions & 4 deletions Week 1.2 - CSS/4. Inheritance and Systems/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,30 @@

<style>
/* Add your CSS here */
button{
border-radius:4px;
padding:12px 32px 12px 32px;
color:black;
}
.btn-default{
background-color:#f5f5f5;
}
.btn-primary{
background-color:#90CDF4;
}
.btn-link{
background-color:transparent;
}
.btn-danger{
background-color:#FEB2B2;
}
</style>

<!-- Add as many or as few classes as needed to accomplish the goal to the buttons below -->
<button>Default</button>
<button>Primary</button>
<button>Link</button>
<button>Danger</button>
<button class="btn-default">Default</button>
<button class="btn-primary">Primary</button>
<button class="btn-link">Link</button>
<button class="btn-danger">Danger</button>

</body>
</html>
5 changes: 5 additions & 0 deletions Week 1.2 - CSS/5. Transitions/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,11 @@
width: 100px;
height: 100px;
background-color: rebeccapurple;
transition:200ms;
}

.box:hover {
transform:scale(2);
}
</style>

Expand Down
1 change: 1 addition & 0 deletions Week 1.2 - CSS/6. Tricks - Click Passthrough/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@
width: 100%;
height: 100%;
background-image: linear-gradient(to bottom, transparent, black);
pointer-events:none;
}
</style>

Expand Down
2 changes: 1 addition & 1 deletion Week 1.3 - JavaScript/1. Filter/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
// Custom Code BEGIN
// Modify the code in this block however you need to get the desired ending array.
// You must store your new array in the `endingArray` variable for it to log out properly.
let endingArray;
let endingArray = startingArray.filter((e)=>e%2===0);

// Custom Code END

Expand Down
2 changes: 1 addition & 1 deletion Week 1.3 - JavaScript/2. Map/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
// Custom Code BEGIN
// Modify the code in this block however you need to get the desired ending array.
// You must store your new array in the `endingArray` variable for it to log out properly.
let endingArray;
let endingArray = startingArray.map(e=>{return {name:e}});

// Custom Code END

Expand Down
23 changes: 12 additions & 11 deletions Week 1.3 - JavaScript/3. Objects as a Map/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,21 +12,22 @@
console.log(information);

// Rewrite this function to replace the if/else logic with a map lookup.

function getInformation(key) {
let rtn;

if (key === 'date') {
rtn = 'October 6, 1986';
} else if (key === 'time') {
rtn = '21:13 PM';
} else if (key === 'mood') {
rtn = 'Powerful, spirited...';
} else {
rtn = 'Error: Invalid option selected...';
}
let data = new Map();
data.set('date','October 6, 1986')
.set('time','21:13 PM')
.set('mood','Powerful, spirited...')

return rtn;
if(data.has(key)){
let rtn = data.get(key);
return rtn;
}else{
return 'Error: Invalid option selected...'
}
}

</script>

</body>
Expand Down
2 changes: 2 additions & 0 deletions Week 1.3 - JavaScript/4. Event Listeners/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,8 @@ <h1 data-counter>0</h1>
}

// Add your code here to make clicking the button run the increment function

document.querySelector('[data-action]').addEventListener("click",()=>{increment()})
</script>

</body>
Expand Down
4 changes: 4 additions & 0 deletions Week 1.3 - JavaScript/5. DOM Manipulation/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,10 @@ <h2>More Jeff Goldblum</h2>

<script>
// Add you code here
let scriptHTML = document.querySelector('script[type="text/template"]').innerHTML
let main = document.querySelector('main.container')
main.insertAdjacentHTML("beforeend", scriptHTML);

</script>

</body>
Expand Down
17 changes: 17 additions & 0 deletions Week 1.3 - JavaScript/Data Fetching/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,23 @@

<script>
// Add your code here
const movieList = document.querySelector('ul.movies')
fetch('https://ghibliapi.herokuapp.com/films',{
method:"GET",
headers:{}
})
.then(response=>{return response.json()})
.then(data=>{
console.log(data)
data.map(movie=>{
let li = document.createElement('li');
li.textContent = `${movie.title} - ${movie.original_title}`;
movieList.appendChild(li);
})
})
.catch(err=>{console.log(err)})


</script>

</body>
Expand Down
3 changes: 3 additions & 0 deletions Week 2.1 - CSS Grid/1. Responsive Grids/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,9 @@
<style>
.cards {
/* Add your code here */
display:grid;
grid-template-columns: repeat(auto-fill, minmax(280px,1fr));
grid-auto-flow:row;
}
</style>

Expand Down
11 changes: 10 additions & 1 deletion Week 2.1 - CSS Grid/2. Placing Items/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,14 +19,23 @@

<style>
/* Add your code here */
.photo{
display:grid;
}

.photo, img{
grid-column:1;
grid-row:1;
}

</style>

<div class="photo">
<img class="channel channel-cyan" src="./cyan.png" alt="cyan" />
<img class="channel channel-magenta" src="./magenta.png" alt="magenta" />
<img class="channel channel-yellow" src="./yellow.png" alt="yellow" />
<img class="channel channel-black" src="./black.png" alt="black" />
</div>
</div>

</body>
</html>
Loading