Skip to content

Commit

Permalink
update readme
Browse files Browse the repository at this point in the history
  • Loading branch information
@aar9nk
aar9nk committed Dec 31, 2020
1 parent 091c9ec commit c938f21
Show file tree
Hide file tree
Showing 2 changed files with 180 additions and 133 deletions.
15 changes: 8 additions & 7 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,17 @@
# DOM Practice

## Instructions
## Description

Here are a few practice exercises to interact with the DOM. Try and complete as much as you can without using the solutions, as we are practicing all the skills involved in web development! I would suggest only looking at the solutions after you have your own working example, or you have exhausted your google searches.

### Setup

1. Clone this repository

2. Open `index.html` in your browser
2. Open `index.html` in your browser by using `open index.html` in terminal

3. Implement solutions in `index.js` to each exercise
3. Implement solutions in `index.js` for each of the exercises

**HINT**: Hints are available in the `hints` directory and solutions in `solutions` for each
exercise. These folders also have all hints and solutions in a file called `all.js`.
**HINT**: Hints are available in the `hints` directory and solutions in `solutions`

Try completing each exercise on your own, before checking the hints or solutions.

Good luck!
298 changes: 172 additions & 126 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,151 +1,197 @@
<!doctype html>
<!DOCTYPE html>
<html lang="en">

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

<body>
<body>
<div class="container">
<div class="row text-center py-4">
<div class="col">
<h1>Dom Exercises</h1>
<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">
Aaron
</div>
<button
id="display-name-button"
type="button"
class="btn btn-primary btn-block"
>
Click
</button>
</div>
</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 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
id="light-bulb"
class="mx-auto d-block"
src="images/light-bulb-off.png"
/>
</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 id="light-bulb" class="mx-auto d-block" src="images/light-bulb-off.png" />
</div>
</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 id="toggle-alert" class="alert alert-success invisible">
Hello world!
</div>
<button
id="toggle-button"
type="button"
class="btn btn-primary btn-block"
>
On
</button>
</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 id="toggle-alert" class="alert alert-success invisible">Hello world!</div>
<button id="toggle-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" novalidation>
<div class="form-row">
<label for="form-first-name">First Name</label>
<input
type="text"
id="form-validate-first-name"
class="form-control"
/>
<div class="valid-feedback">Looks good!</div>
<div class="invalid-feedback">
First Name needs to be 3 characters long or more
</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" novalidation>
<div class="form-row">
<label for="form-first-name">First Name</label>
<input type="text" id="form-validate-first-name" class="form-control">
<div class="valid-feedback">Looks good!</div>
<div class="invalid-feedback">First Name needs to be 3 characters long or more</div>
</div>
<div class="form-row my-3">
<button class="btn btn-primary btn-block" type="submit">
Submit form
</button>
</div>
</form>
</div>
<div class="form-row my-3">
<button class="btn btn-primary btn-block" type="submit">
Submit form
</button>
</div>
</form>
</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" id="form-hobby-text" class="form-control" placeholder="Hobby"
required>
</div>
<div class="col">
<button class="btn btn-primary btn-block" type="submit">Add</button>
</div>
</div>
</form>
<ul id="hobby-list" 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</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"
id="form-hobby-text"
class="form-control"
placeholder="Hobby"
required
/>
</div>
<div class="col">
<button class="btn btn-primary btn-block" type="submit">
Add
</button>
</div>
</div>
</form>
<ul id="hobby-list" class="list-group mt-3">
<li class="list-group-item">Eating pizza</li>
</ul>
</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 id="hobby-list-2" class="list-group mt-3">
<li class="hobby list-group-item d-flex justify-content-between align-items-center">
Eating pizza
<a href="#" class="remove-hobby badge badge-danger">x</a>
</li>
</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 id="hobby-list-2" class="list-group mt-3">
<li
class="hobby list-group-item d-flex justify-content-between align-items-center"
>
Eating pizza
<a href="#" class="remove-hobby badge badge-danger">x</a>
</li>

<li class="hobby list-group-item d-flex justify-content-between align-items-center">
Painting
<a href="#" class="remove-hobby badge badge-danger">x</a>
</li>
<li class="hobby list-group-item d-flex justify-content-between align-items-center">
Playing video games
<a href="#" class="remove-hobby badge badge-danger">x</a>
</li>
</ul>
</div>
</div>
<li
class="hobby list-group-item d-flex justify-content-between align-items-center"
>
Painting
<a href="#" class="remove-hobby badge badge-danger">x</a>
</li>
<li
class="hobby list-group-item d-flex justify-content-between align-items-center"
>
Playing video games
<a href="#" class="remove-hobby 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="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>
</body>
</html>

0 comments on commit c938f21

Please sign in to comment.