Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Javascript 3 project branch #7

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

Open
wants to merge 23 commits into
base: Nikos-Spiropoulos
Choose a base branch
from
Open

Javascript 3 project branch #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
c2cb9b8
Create test.txt.txt
spiropoulos94 Feb 5, 2020
a086173
Create testReadme.txt
spiropoulos94 Feb 5, 2020
91cb85c
Create whoDoWeHaveHere.js
spiropoulos94 Feb 6, 2020
42f644b
exercise1 finished
spiropoulos94 Feb 6, 2020
dc3f122
programming humour added
spiropoulos94 Feb 8, 2020
727f9cc
exercise 3
spiropoulos94 Feb 10, 2020
8f5e955
Update index.html
spiropoulos94 Feb 10, 2020
06906b8
first comment work
spiropoulos94 Feb 12, 2020
da96f3d
little update on week1 of project
spiropoulos94 Feb 16, 2020
95da064
Update index.js
spiropoulos94 Feb 16, 2020
2768963
Update index.js
spiropoulos94 Feb 16, 2020
2c606d3
Update index.js
spiropoulos94 Feb 16, 2020
0db052f
Update index.js
spiropoulos94 Feb 16, 2020
81da1d6
Update index.js
spiropoulos94 Feb 16, 2020
1ce0036
update
spiropoulos94 Feb 16, 2020
0c3527f
week one part of project finished
spiropoulos94 Feb 17, 2020
c918bba
Update index.js
spiropoulos94 Feb 17, 2020
0cd011b
i love commiting
spiropoulos94 Feb 17, 2020
b33bffa
update
spiropoulos94 Feb 17, 2020
8fd4613
up to date
spiropoulos94 Feb 18, 2020
07f25bc
trying to implement repo replacing(progress from week 2)
spiropoulos94 Feb 23, 2020
c448476
added repo List, making of contributors list
spiropoulos94 Feb 24, 2020
2b95515
added some eye-hurting functionality for contributors banner
spiropoulos94 Feb 25, 2020
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
14 changes: 14 additions & 0 deletions Week1/js-exercises-week1/exercise1/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
<div id="app"></div>

<script src="script.js"></script>
</body>
</html>
35 changes: 35 additions & 0 deletions Week1/js-exercises-week1/exercise1/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
//function using XMLHttp Request

let xhrObject = new XMLHttpRequest();

xhrObject.addEventListener('error', xhrObjectErrorHandler);

function xhrObjectErrorHandler(event) {
console.log('Error');
}
xhrObject.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {


let xhrObjectJason = JSON.parse(xhrObject.responseText);


let name = `${xhrObjectJason.results[0].name.first} ${xhrObjectJason.results[0].name.last}`;
document.body.innerHTML = `<h1> Hello ${name}, you were called using XmlHttpRequest.</h1>`;
}
};

xhrObject.open('GET', 'https://www.randomuser.me/api');
xhrObject.send();

//function using axios

axios
.get('https://www.randomuser.me/api')
.then(function(response) {
let nameAxios = `${response.data.results[0].name.first} ${response.data.results[0].name.last}`;
document.body.innerHTML += `<h1> Hello ${nameAxios}, you were called using Axios.</h1>`;
})
.catch(function(error) {
//console.log(error);
});
41 changes: 41 additions & 0 deletions Week1/js-exercises-week1/exercise2 Programming Humour/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
let header = document.createElement('H1');
header.innerHTML = `In this webpage you will see the latest post from xkcd.com <br>
First one is displayed with an XMLHttpRequest and second one is displayed with axios library `;
document.body.appendChild(header);
//document.body.appendChild

//function using XMLHttpRequest--------

let xhrObject = new XMLHttpRequest();

xhrObject.onreadystatechange = () => {
if (xhrObject.readyState == 4 && xhrObject.status == 200) {
let xhrObjectJason = JSON.parse(xhrObject.responseText);
let image = document.createElement('img');
image.src = xhrObjectJason.img;
document.body.appendChild(image);
}
};

xhrObject.open('GET', 'https://xkcd.now.sh/?comic=latest');
xhrObject.onerror = err => {
console.log(err);
};
xhrObject.send();

//function using axios--------

axios
.get('https://xkcd.now.sh/?comic=latest')
.then(function(response) {
// handle success
let axiosImage = document.createElement('img');
axiosImage.src = response.data.img;
document.body.appendChild(axiosImage);

console.log(axiosImage);
})
.catch(function(error) {
// handle error
console.log(error);
});
12 changes: 12 additions & 0 deletions Week1/js-exercises-week1/exercise2 Programming Humour/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
<script src="app.js"></script>
</body>
</html>
58 changes: 58 additions & 0 deletions Week1/js-exercises-week1/exercise3 dog photo gallery/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
//made using xmlhttp request

let xmlObject = new XMLHttpRequest();

function randomDogPhotoXml() {
xmlObject.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
// Typical action to be performed when the document is ready:
let jsonObject = JSON.parse(xmlObject.responseText);
let button = document.querySelector('button');

let image = document.createElement('img');
image.setAttribute('width', '150px');
image.setAttribute('height', '150px');
image.src = jsonObject.message;

document.body.appendChild(image);

console.log(image);
}
};

xmlObject.open('GET', 'https://dog.ceo/api/breeds/image/random');
xmlObject.onerror = err => {
console.log(err);
};
xmlObject.send();
}

let buttonOne = document.getElementById('buttonOne');
buttonOne.addEventListener('click', () => {
randomDogPhotoXml();
});

//made using axios

function randomDogPhotoAxios() {
axios
.get('https://dog.ceo/api/breeds/image/random')
.then(function(response) {
// handle success
let imageAxios = document.createElement('img');
imageAxios.src = response.data.message;
imageAxios.setAttribute('width', '300px');
imageAxios.setAttribute('height', '300px');
console.log(imageAxios);
document.body.appendChild(imageAxios);
})
.catch(function(error) {
// handle error
console.log(error);
});
}

let buttonTwo = document.getElementById('buttonTwo');
buttonTwo.addEventListener('click', () => {
randomDogPhotoAxios();
});
19 changes: 19 additions & 0 deletions Week1/js-exercises-week1/exercise3 dog photo gallery/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<head>
<title>Random Dog Photo Gallery</title>
<meta charset="UTF-8" />
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
<button id="buttonOne">
click me to add a random dog photo with XMLHttpRequest
</button>
<button id="buttonTwo">
click me to add a random dog photo with Axios
</button>

<script src="app.js"></script>
</body>
</html>
Empty file added Week1/test.txt.txt
View file
Open in desktop
Empty file.
46 changes: 26 additions & 20 deletions homework/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,29 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
<meta name="theme-color" content="#000000" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="format-detection" content="telephone=no" />
<link rel="apple-touch-icon" href="./hyf.png" />
<link rel="shortcut icon" type="image/png" href="./hyf.png" />
<title>HYF-GITHUB</title>
<link
href="https://fonts.googleapis.com/css?family=Roboto:400,700"
rel="stylesheet"
/>
<link rel="stylesheet" href="./style.css" />
</head>

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="theme-color" content="#000000">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<link rel="apple-touch-icon" href="./hyf.png">
<link rel="shortcut icon" type="image/png" href="./hyf.png" />
<title>HYF-GITHUB</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
<link rel="stylesheet" href="./style.css">
</head>

<body>
<div id="root"></div>
<script src="./index.js"></script>
</body>

</html>
<body>
<div id="root">
<!-- here will be appended the javascript generated elements-->
</div>
<script src="./index.js"></script>
</body>
</html>
92 changes: 90 additions & 2 deletions homework/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
'use strict';

let body = document.querySelector('body');
body.id = 'body';

{
function fetchJSON(url, cb) {
const xhr = new XMLHttpRequest();
Expand All @@ -16,6 +19,28 @@
xhr.send();
}

function renderContributors(data, contributorsBanner) {
let container = document.createElement('div');
contributorsBanner.appendChild(container);
data.forEach(contributor => {
let image = document.createElement('img');
image.setAttribute('href', contributor.avatar_url);
let name = document.createElement('h5');
name.innerHTML = `${contributor.login}`;
container.appendChild(image);
container.appendChild(name);
});
}

function fetchContributors(repo) {
var obj;
fetch(repo.contributors_url)
.then(res => res.json())
.then(data => (obj = data))
.then(() => console.log(obj))
.then(() => renderContributors(obj, contributorsBanner));
}

function createAndAppend(name, parent, options = {}) {
const elem = document.createElement(name);
parent.appendChild(elem);
Expand All @@ -30,11 +55,30 @@
}

function renderRepoDetails(repo, ul) {
createAndAppend('li', ul, { text: repo.name });
createAndAppend('li', ul, { text: ` Repository : ${repo.name}` });
let a = createAndAppend('a', ul, { text: repo.name });
a.setAttribute('href', repo.html_url);
a.setAttribute('target', '_blank');
createAndAppend('p', ul, { text: `Description : ${repo.description}` });
createAndAppend('p', ul, { text: `Forks : ${repo.forks}` });
var dateobj = new Date(repo.updated_at);
Copy link

Choose a reason for hiding this comment

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

Try not to use var. Prefer const or let

var updateDate = dateobj.toUTCString();
createAndAppend('p', ul, { text: `Update at : ${updateDate}` });
}

///crreating repos banner
let reposBanner = document.createElement('section');
reposBanner.innerHTML = 'HYF REPOSITORIES';
reposBanner.className += 'banner';
Copy link

Choose a reason for hiding this comment

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

There should be as little code as possible that leaves outside of a function. It is better to place this code inside a init() function of example and just call init at the beginning of your code

///creating contributors banner
let contributorsBanner = document.createElement('section');
contributorsBanner.className = ' contributors banner';
contributorsBanner.innerHTML = 'Contributors';

/////////////////////////////////////////////////////////////////////MAIN FUNCTION STARTS HERE////////////////////////////////////////////////////////////////////////////////////////
function main(url) {
fetchJSON(url, (err, repos) => {
// "repos" is a referrence to xhr response. all this is part of the predefined callback function
const root = document.getElementById('root');
if (err) {
createAndAppend('div', root, {
Expand All @@ -43,8 +87,52 @@
});
return;
}

repos.sort(function(a, b) {
return a.name.toUpperCase() > b.name.toUpperCase()
? 1
: b.name.toUpperCase() > a.name.toUpperCase()
? -1
: 0;
});

let reposIndices = [];
for (let x = 0; x < 10; x++) {
reposIndices.push(repos[x]);
}
Copy link

Choose a reason for hiding this comment

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

This is a classic case of a map function


repos = reposIndices;

document.getElementById('root').appendChild(reposBanner);
document.getElementById('root').appendChild(contributorsBanner);

const ul = createAndAppend('ul', root);
repos.forEach(repo => renderRepoDetails(repo, ul));
const select = createAndAppend('select', reposBanner);

let startingRepo = repos[0];

renderRepoDetails(startingRepo, ul);
fetchContributors(startingRepo);

repos.forEach(repo => {
let option = document.createElement('option');
option.innerHTML = repo.name;
option.value = repo.name;
select.appendChild(option);

let selectBtn = document.querySelector('select');
let li = document.querySelector('li');
let div = document.getElementById('root');

selectBtn.addEventListener('change', () => {
if (selectBtn.value == repo.name) {
ul.innerHTML = ' ';
contributorsBanner.innerHTML = ' ';
renderRepoDetails(repo, ul);
fetchContributors(repo);
}
});
});
});
}

Expand Down
Loading