Skip to content

Emilio RA - Bootcamp Solutions #113

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

Emilio RA - Bootcamp Solutions #113

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
d3c98da
Emilio RA - Bootcamp Solutions
milotrompe Mar 19, 2025
65eee69
Bootcamp 2 CSS ready for review
milotrompe Mar 20, 2025
6ada959
Bootcamp 3 js ready for review
milotrompe Mar 24, 2025
e93d463
Bootcamp CSS Grid ready to review
milotrompe Mar 25, 2025
aa70184
bootcamp 2.2 flexbox ready for review
milotrompe Mar 27, 2025
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
60 changes: 59 additions & 1 deletion Week 1.1 - HTML/1. Build a Form/index.html
View file
Open in desktop
Copy link
Contributor

@svihooper svihooper Apr 2, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Emilio,

Looks like we're missing one part of the checklist: "Form is accessible to a screen reader"

Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,68 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Build a Form</title>
<style>
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f4f4f4;
}
form {
background: white;
padding: 20px;
border-radius: 5px;
width: 300px;
text-align: center;
}
fieldset {
border: none;
}
label {
display: block;
padding: 8px;
margin-bottom: 10px;
}
input {
margin-bottom: 30px;
}
button {
width: 75px;
padding: 8px;
margin: 0 auto;
background: green;
color: white;
border-radius: 4px;
cursor: pointer;
display: block;
}
</style>
</head>
<body>

<div id="title">
<h1>Emilio's Form</h1>
</div>

<!-- Add your code here -->
<form action="/login/" method="POST" for="login-form">
<fieldset>
<!--Email field-->
<label for="email">Email:</label>
<input type="email" id="email" name="email" required placeholder="Enter your email">
<!--Email field Ends-->

<!--Password field-->
<label for="password">Password:</label>
<input type="password" id="password" name="password" required placeholder="Enter your password">
<!--Password field Ends-->

<!--Submit Button-->
<button type="submit">Submit</button>
<!--Submit Button Ends-->
</fieldset>
</form>
</body>
</html>
8 changes: 7 additions & 1 deletion 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 @@ -24,7 +24,13 @@
</head>
<body>

<!-- Add your code here -->
<picture>
<source srcset="https://placehold.co/2000x900" media="(min-width: 1800px)">
<source srcset="https://placehold.co/1600x720" media="(min-width: 1440px)">
<source srcset="https://placehold.co/1200x540" media="(min-width: 1024px)">
<source srcset="https://placehold.co/800x360" media="(min-width: 640px)">
<img src="https://placehold.co/400x180" alt="Responsive-Image">
</picture>

</body>
</html>
6 changes: 5 additions & 1 deletion 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 @@ -24,7 +24,11 @@
</head>
<body>

<!-- Add your code here -->
<picture>
<source media="(min-width: 1024px)" srcset="https://placehold.co/1600x720" />
<source media="(min-width: 640px) and (max-width: 1023px)" srcset="https://placehold.co/1200x900" />
<img src="https://placehold.co/540x800" alt="Responsive Image" />
</picture>

</body>
</html>
43 changes: 42 additions & 1 deletion 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 @@ -7,7 +7,48 @@
</head>
<body>

<!-- Add your code here -->
<div class="main-container">
<nav class="sidebar-memu">
<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</nav>

<div class="content-wrapper">
<section class="section-content">
<h1>Phase 4:</h1>
<h2>Destination Thrive</h2>
<h3>Objetive: Create omni-channel synergy</h3>
<p>This is the time to fully leverage your hard work and thrive. During this phase, attention should be given to creating omni-channel synergy, syncing your messaging and channes from top to bottom. Scale high performing channels and fully harvest the demand your top of funnel awareness campaings have been creating. Use insights gained from your contact list, data, and web analytics to do prospecting and build look-a-like audiences for incremental growth.</p>
</section>

<section class="section-content">
<h2>Key Focus</h2>
<ul>
<li>Harvesting the demand created by your content marketing efforts.</li>
<li>Scale paid media and social efforts</li>
<li>Leverage your new audiences</li>
<li>omni-channel synergy</li>
</ul>
</section>

<section class="section-content">
<h2>Time</h2>
<p>approx. 24 months and beyond</p>
</section>
</div>
</div>

</body>
</html>
5 changes: 3 additions & 2 deletions 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 @@ -8,8 +8,9 @@
<body>

<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
36 changes: 31 additions & 5 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 @@ -8,14 +8,40 @@
<body>

<style>
/* Add your CSS here */
button {
border-radius: 4px;
padding: 12px 32px;
color: black;
border: none;
cursor: pointer;
font-size: 16px;
}

.button-default {
background-color: #f5f5f5;
}

.button-primary {
background-color: #90CDF4;
}

.button-link {
background-color: transparent;
text-decoration: underline;
border: none;
cursor: pointer;
}

.button-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="button-default">Default</button>
<button class="button-primary">Primary</button>
<button class="button-link">Link</button>
<button class="button-danger">Danger</button>

</body>
</html>
8 changes: 8 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,14 @@
width: 100px;
height: 100px;
background-color: rebeccapurple;
transition: transform 200ms ease-in-out;
}
.box:hover {
transform: scale(2);
transition-duration: 200ms;
}
.box:not(:hover) {
transition-duration: 160ms;
}
</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( num => num % 2 === 0 );

// Custom Code END

Expand Down
5 changes: 1 addition & 4 deletions 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 @@ -10,10 +10,7 @@
<script>
const startingArray = ['Sergio', 'Keve', 'Kam', 'Bree', 'Blake'];

// 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(name => ({name}));

// Custom Code END

Expand Down
24 changes: 10 additions & 14 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 @@ -8,25 +8,21 @@
<body>

<script>
const information = getInformation('date');
const information = getInformation('mood');
console.log(information);

// Rewrite this function to replace the if/else logic with a map lookup.
function getInformation(key) {
let rtn;

function getInformation(key) {
const mapInfo = {
date: 'October 6, 1986',
time: '21:13 PM',
mood: 'Powerful, spirited...'
};

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...';
return mapInfo[key] || 'Error invalid option selected';
}

return rtn;
}

</script>

</body>
Expand Down
2 changes: 1 addition & 1 deletion 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 @@ -19,7 +19,7 @@ <h1 data-counter>0</h1>
counterEl.innerText = counter;
}

// Add your code here to make clicking the button run the increment function
document.querySelector('[data-action="increment-counter"]').addEventListener('click', increment);
</script>

</body>
Expand Down
6 changes: 5 additions & 1 deletion 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 @@ -14,6 +14,7 @@ <h2>Hello, world!</h2>
</section>
</script>


<main class="container">
<h1>Lorem Ipsum Dolor Sit Amet</h1>
<section>
Expand All @@ -23,7 +24,10 @@ <h2>More Jeff Goldblum</h2>
</main>

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

container.insertAdjacentHTML('beforeend', template);
</script>

</body>
Expand Down
18 changes: 17 additions & 1 deletion 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 @@ -10,7 +10,23 @@
<ul class="movies"></ul>

<script>
// Add your code here
async function catchMovies() {
try {
const response = await fetch('https://ghibliapi.vercel.app/films');
const movies = await response.json();

const allMovies = document.querySelector(".movies");
movies.forEach(movie => {
const list = document.createElement("li");
list.textContent = movie.title;
allMovies.appendChild(list);
});
} catch (error){
console.error("something went wrong",error);
}
}

catchMovies();
</script>

</body>
Expand Down
3 changes: 2 additions & 1 deletion 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 @@ -28,7 +28,8 @@

<style>
.cards {
/* Add your code here */
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
</style>

Expand Down
7 changes: 6 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 @@ -18,7 +18,12 @@
<body>

<style>
/* Add your code here */
.photo img{
position: absolute;
top: 0;
left:0;
object-fit: cover;
}
</style>

<div class="photo">
Expand Down
Loading