-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
131 lines (102 loc) · 5.6 KB
/
index.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
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Home</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="base.css">
</head>
<body>
<nav class="navbar navbar-default navbar-expand-sm navbar-dark navbar-custom" style="background-color: olivedrab" id="top-menu">
<a class="navbar-brand" href="index.html">Home</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item"><a class="nav-link" href="projects.html">Projects</a></li>
<li class="nav-item"><a class="nav-link" href="https://github.com/jenfad" target="_blank">GitHub</a></li>
<li class="nav-item"><a class="nav-link" href="https://www.linkedin.com/in/jenniferfadimba/" target="_blank">LinkedIn</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdown" data-toggle="dropdown" href="#">Other Links</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="https://public.tableau.com/profile/jennifer.fadimba#!/" target="_blank">Tableau</a>
<a class="dropdown-item" href="http://rpubs.com/jenfad19" target="_blank">Rpubs</a>
<a class="dropdown-item" href="https://codepen.io/jenfad/" target="_blank">Code Pen</a>
</div>
</li>
</ul>
</div>
</nav>
<div class="container" id="begin">
<p id="topics">Product, Web Development and Data Analytics</p>
</div>
<div class="container" id="featured">
<h1>Featured Projects</h1>
</div>
<div id="root">
</div>
<div class="container"><h4><a href="projects.html">More Projects</a></h4></div>
<script src="index.js"></script>
<!--react and babel-->
<script type="application/javascript" src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
<script type="application/javascript" src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
<script type="application/javascript" src="https://unpkg.com/[email protected]/babel.js"></script>
<script type="text/babel">
const rootElement = document.getElementById('root');
var request = new XMLHttpRequest();
request.open('GET', "projectsData.json");
//getting data from json file in same folder doesn't work locally in Chrome, but does in Edge
//pictures saved as 'JPG' locally but 'jpg' on hosting servie
request.onload = function(){
var data = JSON.parse(request.responseText);
class Projects extends React.Component {
state = data;
//making the project div a container helps contain the images down;
// later have if statement for when link length is greater than 0
render() {
return (
<div className="Projects">
{ this.state.projectsData.filter(project => project.featured === true).map(project =>
<div className="project container">
<a href={project.link} target="_blank">
<div className="projectHeader">
<h2>{ project.name }</h2>
</div>
</a>
<img src={ project.imgsrc } />
<p className="Description">{project.description}</p>
<p className="tags">{project.tags}</p>
</div>)
}
</div>
);
}
}
class App extends React.Component {
constructor(props) {
super(props);
}
render(){
return(
<div>
<Projects />
</div>
)
}
}
ReactDOM.render(
<App />,
rootElement
)
}
request.onerror = function(){
rootElement.innerHTML = "Sorry! Looks like the projects failed to load";
}
request.send();
</script>
</body>
</html>