Skip to content

Steven Velazquez - Bootcamp Solutions #105

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

Steven Velazquez - Bootcamp Solutions #105

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
5cda965
Steven Velazquez - Bootcamp Solutions
StevenVelazquez Mar 10, 2025
5bab879
Steven Velazquez - Bootcamp Solutions
StevenVelazquez Mar 11, 2025
52ee38f
Steven Velazquez - Bootcamp Solutions
StevenVelazquez Mar 11, 2025
0dfb432
Steven Velazquez - Bootcamp Solutions
StevenVelazquez Mar 12, 2025
a8b0e42
Steven Velazquez - Bootcamp Solutions
StevenVelazquez Mar 21, 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
14 changes: 7 additions & 7 deletions Week 1.1 - HTML/1. Build a Form/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
# Build a Form

Build a form with the following specifications:
- [ ] An input field to accept and validate emails
- [ ] An input field to accept a password
- [ ] A button to submit the form
- [ ] The form submits to the a page at `/login/`
- [ ] The form uses POST to submit the form data
- [ ] Form is accessible to a screen reader
- [ ] Form is keyboard navigable
- [X] An input field to accept and validate emails
- [X] An input field to accept a password
- [X] A button to submit the form
- [X] The form submits to the a page at `/login/`
- [X] The form uses POST to submit the form data
- [X] Form is accessible to a screen reader
- [X] Form is keyboard navigable

Build your form in designated area in the provided HTML file.
9 changes: 9 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 @@ -8,6 +8,15 @@
<body>

<!-- Add your code here -->
<form action="/login/" method="POST">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required aria-required="true">

<label for="password">Password:</label>
<input type="password" id="password" name="password" required aria-required="true">

<button type="submit">Login</button>
</form>

</body>
</html>
7 changes: 7 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,13 @@
<body>

<!-- Add your code here -->
<picture>
<source srcset="https://placehold.co/2000x900" media="(min-width: 1880px)">
<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>
5 changes: 5 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,11 @@
<body>

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

</body>
</html>
55 changes: 53 additions & 2 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 @@ -7,7 +7,58 @@
</head>
<body>

<!-- Add your code here -->
<!-- Number of the menu -->
<nav>
<ul>
<li><a href="#">Menu Item 1</a></li>
<li><a href="#">Menu Item 2</a></li>
<li><a href="#">Menu Item 3</a></li>
<li><a href="#">Menu Item 4</a></li>
<li><a href="#">Menu Item 5</a></li>
<li><a href="#">Menu Item 6</a></li>
<li><a href="#">Menu Item 7</a></li>
</ul>
</nav>

<!-- Slider Section for the First Slide -->
<div class="slider-container">
<!-- Dot navigation on the left -->
<div class="dots">
<span class="dot"></span>
</div>

<!-- Slides Wrapper (Contains only the first slide for now) -->
<div class="slides-wrapper">
<!-- First Slide -->
<div class="slide">
<section>
<h1>Phase 4:</h1>
<h2>Distrination Thrive</h2>
<h3>Objective: 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 channels from top to bottom. Scale high-performing channels and fully harvest the demand your top-of-funnel awareness campaigns have been creating. Use insights gained from your contact lists, data, and web analytics to do prospecting and build look-a-like audiences for incremental growth.
</p>
</section>

<hr>

<section>
<h4>Key Focus:</h4>
<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>
<h4>Time <img src="clock.png" alt="clock icon"></h4>
<p>approx. 24 months and beyond</p>
</section>
</div>
</div>
</div>

</body>
</html>
</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
40 changes: 36 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,45 @@

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

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

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

/* Link button*/
.button--link {
background-color: transparent;
border-color: transparent;
}

/* Danger button */
.button--default {
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>
11 changes: 11 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,17 @@
width: 100px;
height: 100px;
background-color: rebeccapurple;
transition: transform 200ms ease-in-out;
transform-origin: center;
}

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

// Custom Code END

Expand Down
19 changes: 7 additions & 12 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 @@ -13,19 +13,14 @@

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

const map = {
'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 rtn;
return map[key] || 'Error: Invalid option selected...'
}
</script>

Expand Down
4 changes: 4 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,10 @@ <h1 data-counter>0</h1>
}

// Add your code here to make clicking the button run the increment function
const buttonE1 = document.querySelector('[data-action="increment-counter"]');

buttonE1.addEventListener('click',increment);

</script>

</body>
Expand Down
8 changes: 8 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,14 @@ <h2>More Jeff Goldblum</h2>

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

//Extract the inner
const templateContent = templateE1.innerHTML;

//append template to container
containerE1.insertAdjacentHTML('beforeend', templateContent);
</script>

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

<script>
// Add your code here
fetch('https://ghibliapi.vercel.app/films')
.then(reponse => reponse.json())
.then(data => {
const moviesList = document.querySelector('.movies');

data.forEach(film => {
const listItem = document.createElement('li');
listItem.textContent = film.title;
moviesList.appendChild(listItem);
});
})
.catch(error => console.error('Error fetching data:',error));
</script>

</body>
Expand Down
18 changes: 10 additions & 8 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,54 +29,56 @@
<style>
.cards {
/* Add your code here */
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
</style>

<section class="cards">
<article class="card">
<img src="https://via.placeholder.com/300x240" alt="placeholder" />
<img src="https://placehold.co/300x240" alt="placeholder" />
<h2>Lorem Ipsum Dolor</h2>
<p>Forget the fat lady! You're obsessed with the fat lady! Drive us out of here! Is this my espresso machine? Wh-what is-h-how did you get my espresso machine? I was part of something special. Eventually, you do plan to have dinosaurs on your dinosaur tour, right?</p>
<a class="more" href="#">Read More</a>
</article>
<article class="card">
<img src="https://via.placeholder.com/300x240" alt="placeholder" />
<img src="https://placehold.co/300x240" alt="placeholder" />
<h2>Lorem Ipsum Dolor</h2>
<p>Forget the fat lady! You're obsessed with the fat lady! Drive us out of here! Is this my espresso machine? Wh-what is-h-how did you get my espresso machine? I was part of something special.</p>
<a class="more" href="#">Read More</a>
</article>
<article class="card">
<img src="https://via.placeholder.com/300x240" alt="placeholder" />
<img src="https://placehold.co/300x240" alt="placeholder" />
<h2>Lorem Ipsum Dolor</h2>
<p>Forget the fat lady! You're obsessed with the fat lady! Drive us out of here! Is this my espresso machine? Wh-what is-h-how did you get my espresso machine?</p>
<a class="more" href="#">Read More</a>
</article>
<article class="card">
<img src="https://via.placeholder.com/300x240" alt="placeholder" />
<img src="https://placehold.co/300x240" alt="placeholder" />
<h2>Lorem Ipsum Dolor</h2>
<p>Forget the fat lady! You're obsessed with the fat lady! Drive us out of here! Is this my espresso machine?</p>
<a class="more" href="#">Read More</a>
</article>
<article class="card">
<img src="https://via.placeholder.com/300x240" alt="placeholder" />
<img src="https://placehold.co/300x240" alt="placeholder" />
<h2>Lorem Ipsum Dolor</h2>
<p>Forget the fat lady! You're obsessed with the fat lady! Drive us out of here! Is this my espresso machine?</p>
<a class="more" href="#">Read More</a>
</article>
<article class="card">
<img src="https://via.placeholder.com/300x240" alt="placeholder" />
<img src="hhttps://placehold.co/300x240" alt="placeholder" />
<h2>Lorem Ipsum Dolor</h2>
<p>Forget the fat lady! You're obsessed with the fat lady! Drive us out of here! Is this my espresso machine? Wh-what is-h-how did you get my espresso machine?</p>
<a class="more" href="#">Read More</a>
</article>
<article class="card">
<img src="https://via.placeholder.com/300x240" alt="placeholder" />
<img src="https://placehold.co/300x240" alt="placeholder" />
<h2>Lorem Ipsum Dolor</h2>
<p>Forget the fat lady! You're obsessed with the fat lady! Drive us out of here! Is this my espresso machine? Wh-what is-h-how did you get my espresso machine? I was part of something special.</p>
<a class="more" href="#">Read More</a>
</article>
<article class="card">
<img src="https://via.placeholder.com/300x240" alt="placeholder" />
<img src="https://placehold.co/300x240" alt="placeholder" />
<h2>Lorem Ipsum Dolor</h2>
<p>Forget the fat lady! You're obsessed with the fat lady! Drive us out of here! Is this my espresso machine? Wh-what is-h-how did you get my espresso machine? I was part of something special. Eventually, you do plan to have dinosaurs on your dinosaur tour, right?</p>
<a class="more" href="#">Read More</a>
Expand Down
Loading