/
portfolio-item-six.html
141 lines (135 loc) · 5.51 KB
/
portfolio-item-six.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!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" />
<link rel="stylesheet" href="index.css" />
<!-- Google Font -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"
rel="stylesheet"
/>
<title>Keith's Portfolio Website</title>
</head>
<body class="project-background">
<div class="site-container">
<!-- ----------------- Header Section ------------------- -->
<header class="header-container">
<img
id="hamburger-icon"
src="icons/hamburger-icon.png"
alt="hamburger menu icon"
/>
<ul class="nav-bar">
<a href="index.html#skills" class="nav-item"><li>Skills</li></a>
<a href="index.html#portfolio" class="nav-item"><li>Portfolio</li></a>
<a href="index.html#about-me" class="nav-item"><li>About Me</li></a>
<a href="index.html#contact" class="nav-item"><li>Contact</li></a>
</ul>
</header>
<ul class="nav-bar-two">
<a href="index.html#skills" class="nav-item-two"><li>Skills</li></a>
<a href="index.html#portfolio" class="nav-item-two"><li>Portfolio</li></a>
<a href="index.html#about-me" class="nav-item-two"><li>About Me</li></a>
<a href="index.html#contact" class="nav-item-two"><li>Contact</li></a>
</ul>
<!-- ---------------- Project Information --------------- -->
<section class="project-layout">
<div class="project-layout-top">
<img
src="images/Movie-Watchlist-Screenshot.png"
alt="my invoice creator project"
class="project-image"
/>
<div class="project-headings">
<h1 class="project-title">Movie Watchlist</h1>
<p class="project-subheading">A JavaScript and API Project</p>
</div>
</div>
<div class="project-details">
<h3>A Scrimba FrontEnd Developer Path Project</h3>
<p>
This project involved using the OMDB API to access information about
movies. The goal of the project was to allow the user to type in a
search query and find movies related to that query. From the
results, the user could select any that they wished to save to a
separate 'watchlist' page. Whenever the user returned to the
watchlist page, they should be able to view all of the movies that
have been saved. If they no longer wanted a movie on their list,
they also have the option to remove it.
</p>
<h3>Programming Languages Used</h3>
<ul class="project-languages">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<h3>Project Requirements</h3>
<p>
There were 4 main requirements for this project. The first was there
needed to be two separate pages. This included an 'index.html' page
and a 'watchlist.html' page. The second requirement was to have the
'index.html' page be a search page. This search page would call to
the OMDB API with the search queries entered and display the movie
details in the results. The third requirement was to have an 'add to
watchlist' button. This button will save that movie data to local
storage so it could be accessed on the 'watchlist' page. The final
requirement was to have the 'watchlist.html' page load the data from
local storage and display the saved movies.
</p>
<p class="source-code">The GitHub:</p>
<a
class="source-code-link"
href="https://github.com/KeithPetr/Movie-Watchlist"
>https://github.com/KeithPetr/Movie-Watchlist</a
>
<p class="click-on-image">
Click on the image below to go to the application
</p>
<a
class="project-gif"
href="https://keith-movie-watchlist.netlify.app/"
target="_blank"
><img src="gifs/Movie-Watchlist-Gif.gif" alt="movie watchlist gif"
/></a>
</div>
</section>
<!-- ----------------- Links Section --------------------- -->
<section class="links">
<div class="links-container">
<h3 class="find-me">Find me on...</h3>
<div class="link-icons">
<a
href="https://www.linkedin.com/in/keith-petryshyn-886b5016/"
target="_blank"
>
<img
src="icons/linkedin.svg"
class="icon linkedin"
alt="linkedin icon"
/>
</a>
<a href="https://github.com/KeithPetr" target="_blank">
<img
src="icons/github.svg"
class="icon github"
alt="github icon"
/>
</a>
<a href="https://twitter.com/KeithABCoding" target="_blank">
<img
src="icons/twitter.svg"
class="icon twitter"
alt="twitter icon"
/>
</a>
</div>
</div>
</section>
</div>
</body>
<script src="index.js"></script>
</html>