Skip to content

Commit

Permalink
add exercises
Browse files Browse the repository at this point in the history
  • Loading branch information
@Nicktho
Nicktho committed Sep 9, 2020
0 parents commit 73fe044
Show file tree
Hide file tree
Showing 4 changed files with 166 additions and 0 deletions.
Binary file added images/light-bulb-off.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/light-bulb-on.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
149 changes: 149 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,149 @@
<!doctype html>
<html lang="en">

<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

<title>DOM Exercises</title>
</head>

<body>
<div class="container">
<div class="row text-center py-4">
<div class="col">
<h1>Dom Exercises</h1>
</div>
</div>
<div class="row row-cols-1 row-cols-lg-3 row-cols-md-2">
<div class="col p-3">
<div class="card h-100">
<h4 class="card-header">Buttons</h4>
<div class="card-body">
<p class="card-text">
Click the button to display your name.
</p>
<div id="display-name" class="alert alert-success invisible">nick</div>
<button id="display-name-button" type="button" class="btn btn-primary btn-block">Click</button>
</div>
</div>
</div>
<div class="col p-3">
<div class="card h-100">
<h4 class="card-header">Mouse Over</h4>
<div class="card-body">
<p class="card-text">
Switch the light on when your mouse hovers over it.

</p>
<img class="mx-auto d-block" src="images/light-bulb-off.png" />
</div>
</div>
</div>
<div class="col p-3">
<div class="card h-100">
<h4 class="card-header">Toggle</h4>
<div class="card-body">
<p class="card-text">
Clicking the button should toggle the alert on and off.
</p>
<div class="alert alert-success">Hello world!</div>
<button type="button" class="btn btn-primary btn-block">On</button>
</div>
</div>
</div>
<div class="col p-3">
<div class="card h-100">
<h4 class="card-header">Validate</h4>
<div class="card-body">
<p class="card-text">
Validate the text box to be at least 3 characters.
</p>
<form id="form-validate" class="needs-validation">
<div class="form-row">
<label for="form-first-name">First Name</label>
<input type="text" class="form-control" id="form-first-name" required>
<div class="valid-feedback">Looks good!</div>
<div class="invalid-feedback">First Name needs to be 3 characters long</div>
</div>
<div class="form-row my-3">
<button class="btn btn-primary btn-block" type="submit">Submit form</button>
</div>
</form>
</div>
</div>
</div>
<div class="col p-3">
<div class="card h-100">
<h4 class="card-header">Challenge: Lists</h4>
<div class="card-body">
<p class="card-text">
When the "Add" button is clicked, add a new hobby to the list.
</p>
<form id="form-hobby" class="needs-validation">
<div class="form-row">
<div class="col-8">
<input type="text" class="form-control" placeholder="Hobby" id="form-hobby-text"
required>
</div>
<div class="col">
<button class="btn btn-primary btn-block" type="submit">Add</button>
</div>
</div>
</form>
<ul class="list-group mt-3">
<li class="list-group-item">Eating pizza</li>
</ul>
</div>
</div>
</div>
<div class="col p-3">
<div class="card h-100">
<h4 class="card-header">Challenge: Lists (Part 2)</h4>
<div class="card-body">
<p class="card-text">
When the icon next to a hobby is clicked, remove it from the list.
</p>
<ul class="list-group mt-3">
<li class="list-group-item d-flex justify-content-between align-items-center">
Eating pizza
<a href="#" class="badge badge-danger">x</a>
</li>

<li class="list-group-item d-flex justify-content-between align-items-center">
Painting
<a href="#" class="badge badge-danger">x</a>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Playing video games
<a href="#" class="badge badge-danger">x</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>



<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
crossorigin="anonymous"></script>
<script src="index.js"></script>
</body>

</html>
17 changes: 17 additions & 0 deletions index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
// Buttons
const displayNameButton = document.querySelector('#display-name-button');

displayNameButton.onclick = () => {
const displayName = document.querySelector('#display-name');
displayName.classList.remove('invisible');
};

// Mouse Over

// Toggle

// Validate

// Challenge: Lists

// Challenge: Lists (Part 2)

0 comments on commit 73fe044

Please sign in to comment.