Skip to content
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

Jump to bottom

made an about page with a list of hobbies #117

Open
wants to merge 11 commits into
base: master
Choose a base branch
from
Open

made an about page with a list of hobbies #117

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
e24045c
made an about page with a list of hobbies
theLP100 Nov 16, 2022
d1f0eb9
added a header and a sidebar
theLP100 Nov 28, 2022
9a7e5b1
added an image. i now need to fix the page so it looks better.
theLP100 Nov 28, 2022
4bccbb8
updated formatting on about page to get picture displayed the way I want
theLP100 Nov 29, 2022
35dce59
added an index, using the same style as the about section
theLP100 Nov 30, 2022
82a29f9
made links between all pages
theLP100 Nov 30, 2022
f5f1cbe
got 3 pages working and added in class and id references
theLP100 Nov 30, 2022
ccb98d8
made my first every .js file to modify a webpage. this produces beha…
theLP100 Dec 2, 2022
3166155
changed title of index to book in all places
theLP100 Dec 6, 2022
a467420
added an add book button that adds books emojis
theLP100 Dec 6, 2022
8b5943b
added book count functionality and fixed book emojis
theLP100 Dec 6, 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
Binary file added assets/me and booker.jpeg
View file
Open in desktop
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 assets/the knot stop image.jpeg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
56 changes: 54 additions & 2 deletions pages/about.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,64 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<title>About LP</title>
<link href="../styles/about_style.css" rel="stylesheet" />

</head>


<body>

<div>
<header>
<h1>
LP's Awesome Site
</h1>
</header>
<main>
<h1>About LP</h1>
<section>
<img src="../assets/me and booker.jpeg" alt="LP and their cat Booker relaxing at home">
Copy link

Choose a reason for hiding this comment

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

Spaces in links causes issues! This line threw an in an HTML validator


<h2> Hobbies:</h2>
<ul class = "list">
<li>3D Printing Resin Miniatures</li>
<li>Reading non-fiction books to educate myself</li>
<li>Knitting</li>
<li>Playing and DMing Dungeons and Dragons</li>
<li>Making leather goods</li>
<li>Playing Age of Sigmar</li>
<li>Walking and running with my dog</li>
<li>Biking</li>
</ul>

</section>
</main>
<aside>
<h2>
Menu
</h2>
<p>
<!--this is how you link to associated pages.-->
<a href = "books.html"> Books</a>
</p>

<p>
<a href = "https://www.etsy.com/shop/theKnotStopLP"> Check out my Etsy!</a>
</p>
<p>
<!--this is how you link to associated pages.-->
<a href = "portfolio.html"> Portfolio</a>
</p>
</aside>

</div>
</body>




</html>
57 changes: 57 additions & 0 deletions pages/books.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Books</title>
<link href="../styles/about_style.css" rel="stylesheet" />
</head>
<body>
<div>
<header>
<h1>
Books
</h1>
</header>
<aside>
<h2>
Menu
</h2>
<p>
<!--this is how you link to associated pages.-->
<a href = "about.html"> About</a>
</p>


<p>
<a href = "https://www.etsy.com/shop/theKnotStopLP"> Check out my Etsy!</a>
</p>
<p>
<!--this is how you link to associated pages.-->
<a href = "portfolio.html"> Portfolio</a>
</p>
</aside>

<main>
Here are some books I recommend:
<ul class = "list" id="bookList"></ul>
Copy link

Choose a reason for hiding this comment

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

There is a </ul> closing tag on this line, which closes the unordered list before any list items could be added! Errors were thrown here in the HTML validator.

<li>The Shame Machine, by Cathy O'Neill</li>
<li>Weapons of Math Destruction, by Cathy O'Neill</li>
<li>The New Jim Crow, by Michelle Alexander</li>
<li>The Color of Law, by Richard Rothstein</li>
<li>Mediocre - the Dangerous Legacy of White Male America, by Igeoma Oluo</li>
</ul>
<br>
<section>
<button id="addBookButton">Add Book</button>
</section>
<section id="bookContainer">
<h2 id = "bookCount">Book Count: 0</h2>
Copy link

Choose a reason for hiding this comment

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

It looks like this is not intended to be a heading, but instead a counter for books. Consider using a different tag. Screen readers will get confused and think this is the heading for a new section of the page.

</section>

</main>
</div>
<script src="../src/books.js" type="text/javascript"></script>
</body>
</html>
12 changes: 0 additions & 12 deletions pages/index.html
View file
Open in desktop

This file was deleted.

36 changes: 34 additions & 2 deletions pages/portfolio.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,41 @@
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<title>Portfolio</title>
<link href="../styles/about_style.css" rel="stylesheet" />
</head>
<body>

<div>
<header>
<h1>
This is my Portfolio
</h1>
</header>
<aside>
<h2>
Menu
</h2>
<p>
<!--this is how you link to associated pages.-->
<a href = "about.html"> About</a>
</p>

<p>
<!--this is how you link to associated pages.-->
<a href = "books.html"> Books</a>
</p>


<p>
<a href = "https://www.etsy.com/shop/theKnotStopLP"> Check out my Etsy!</a>
</p>
</aside>

<main>
<h1 id="specialheader">
This is a very special header.
</h1>
</main>
</div>
</body>
</html>
53 changes: 53 additions & 0 deletions src/books.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
const state = {
Copy link

Choose a reason for hiding this comment

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

Great start to using JS on your page!

bookCount: 0,
};

//function to add books
const addBook = (event) => {
console.log("in addBook:", event);
const newBook = document.createElement("span");
const bookContainer = document.querySelector("#bookContainer");
newBook.textContent = "📖";
bookContainer.appendChild(newBook);

//Book Count Behavior
state.bookCount += 1;
const bookCountContainer = document.querySelector("#bookCount");
bookCountContainer.textContent = `Book Count: ${state.bookCount}`;
};

//registering event handler
const registerEventHandlers = (event) => {
console.log("in registerEventHandelers:", event);
const bookButton = document.querySelector("#addBookButton");
bookButton.addEventListener("click", addBook);
};

document.addEventListener("DOMContentLoaded", registerEventHandlers);

//this is my first javascript file in a webpage!

console.log("Hello, World!");

const getRandomNumber = (max) => {
return Math.floor(Math.random() * (max + 1));
};

console.log(getRandomNumber(10));
console.log(getRandomNumber(100));

const getCurrentTime = () => {
const currentDate = new Date();
return (
currentDate.getHours() +
":" +
currentDate.getMinutes() +
":" +
currentDate.getSeconds()
);
};

console.log(`The Current Time is ${getCurrentTime()}.`);

const bookListElement = document.getElementById("bookList");
//now you can change something about booklist if you want to. this doesn't do anything at the moment.
65 changes: 65 additions & 0 deletions styles/about_style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
body {
color: darkblue;
font-family: Arial, Helvetica, sans-serif;
background: lightblue
}

h1, h2 {
color: deeppink;
}

div{
margin: auto;
width: 80vw;
height: 80vh;
display: grid;
grid-template-columns: repeat(5, 20%);
grid-template-rows: repeat(5, 20%);
margin: auto;
}

aside {
background-color: lightpink;
grid-row: 2/6;
grid-column: 1/2;
}

main {
background-color: cyan;
grid-column: 2 / span 4;
grid-row: 2/6;
}

header {
grid-column: 1 / -1;
background-color: white;
}

img {
display: grid;
height: 400px;
grid-row-start: 1;
grid-column-start: 4;
}

section {
display: grid;
grid-row-start: 1;
grid-column: 1/4;

}

#specialheader {
color: purple;
font-size: 200;

}

.list {
color: blue;
}

#bookContainer{
white-space: nowrap;
display: inline-block;
}